feat: embed pane styles and expose pane style API

Author: wiedymi

README.md

@@ -109,6 +109,7 @@ await restty.setFontSources([
 
 `restty` ships a pane manager and a default terminal context menu so you can add split panes quickly.
 It auto-creates pane DOM, canvas, and hidden IME inputs for you.
+Pane/split/divider styles are injected by the library (no separate CSS file required).
 
 ```ts
 import {
@@ -131,6 +132,10 @@ const restty = new Restty({
   defaultContextMenu: {
     getPtyUrl: () => "ws://localhost:8787/pty",
   },
+  paneStyles: {
+    inactivePaneOpacity: 0.82,
+    dividerThicknessPx: 1,
+  },
   shortcuts: true,
 });
 
@@ -150,6 +155,7 @@ Main methods:
 - `destroy()`
 - `getPanes()` / `getActivePane()` / `getFocusedPane()`
 - `splitActivePane("vertical" | "horizontal")` / `splitPane(id, direction)` / `closePane(id)`
+- `getPaneStyleOptions()` / `setPaneStyleOptions({...})`
 - `connectPty(url)` / `disconnectPty()` / `isPtyConnected()`
 - `setRenderer("auto" | "webgpu" | "webgl2")`
 - `setFontSize(number)`

docs/usage.md

@@ -72,6 +72,7 @@ Useful methods:
 
 `Restty` supports split panes with default shortcuts/context-menu out of the box.
 It auto-creates each pane container, canvas, and hidden IME textarea.
+Pane, divider, and context-menu styles are injected automatically by the library.
 
 ```ts
 import {
@@ -80,12 +81,17 @@ import {
 
 const restty = new Restty({
   root: document.getElementById("paneRoot") as HTMLElement,
+  paneStyles: {
+    inactivePaneOpacity: 0.82,
+    dividerThicknessPx: 1,
+  },
   defaultContextMenu: true,
   shortcuts: true,
 });
 
 restty.splitActivePane("vertical");
 restty.splitActivePane("horizontal");
+restty.setPaneStyleOptions({ inactivePaneOpacity: 0.72, dividerThicknessPx: 2 });
 ```
 
 ## Low-level integration (`loadResttyWasm`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "restty",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Browser terminal rendering library powered by WASM, WebGPU/WebGL2, and TypeScript text shaping.",
   "keywords": [
     "terminal",

playground/public/style.css

@@ -51,14 +51,6 @@ main {
   min-height: 0;
 }
 
-.pane-root {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-}
-
 .settings-fab-stack {
   position: fixed;
   right: 20px;
@@ -174,162 +166,6 @@ main {
   line-height: 1;
 }
 
-.pane-split {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  gap: 0;
-  padding: 0;
-  background: #111;
-}
-
-.pane-split.is-vertical {
-  flex-direction: row;
-}
-
-.pane-split.is-horizontal {
-  flex-direction: column;
-}
-
-.pane {
-  position: relative;
-  flex: 1 1 0;
-  min-width: 0;
-  min-height: 0;
-  background: #000;
-  border: 0;
-  overflow: hidden;
-  opacity: 0.82;
-  transition: opacity 140ms ease-out;
-}
-
-.pane.is-active {
-  opacity: 1;
-}
-
-.pane-divider {
-  position: relative;
-  z-index: 2;
-  flex: 0 0 1px;
-  touch-action: none;
-}
-
-.pane-divider.is-vertical {
-  cursor: col-resize;
-  background: transparent;
-}
-
-.pane-divider.is-horizontal {
-  cursor: row-resize;
-  background: transparent;
-}
-
-.pane-divider.is-vertical:hover,
-.pane-divider.is-vertical.is-dragging {
-  background:
-    radial-gradient(
-      100px 46% at 50% 50%,
-      rgba(235, 235, 235, 0.92) 0%,
-      rgba(200, 200, 200, 0.48) 46%,
-      rgba(155, 155, 155, 0.12) 68%,
-      rgba(120, 120, 120, 0) 100%
-    ),
-    rgba(185, 185, 185, 0.24);
-}
-
-.pane-divider.is-horizontal:hover,
-.pane-divider.is-horizontal.is-dragging {
-  background:
-    radial-gradient(
-      46% 100px at 50% 50%,
-      rgba(235, 235, 235, 0.92) 0%,
-      rgba(200, 200, 200, 0.48) 46%,
-      rgba(155, 155, 155, 0.12) 68%,
-      rgba(120, 120, 120, 0) 100%
-    ),
-    rgba(185, 185, 185, 0.24);
-}
-
-body.is-resizing-split {
-  user-select: none;
-}
-
-.pane-canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-  outline: none;
-}
-
-.pane-ime-input {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pane-term-debug {
-  display: none;
-}
-
-.pane-context-menu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 200px;
-  padding: 6px;
-  border: 1px solid #2a2a2a;
-  border-radius: 8px;
-  background: #161616;
-  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
-}
-
-.pane-context-menu-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 7px 9px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #d6d6d6;
-  text-align: left;
-  cursor: pointer;
-}
-
-.pane-context-menu-item:hover {
-  background: #252525;
-}
-
-.pane-context-menu-item:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.pane-context-menu-item.is-danger {
-  color: #f1a1a1;
-}
-
-.pane-context-menu-label {
-  font-size: 12px;
-}
-
-.pane-context-menu-shortcut {
-  font-size: 10px;
-  color: #868686;
-}
-
-.pane-context-menu-separator {
-  height: 1px;
-  margin: 6px 4px;
-  background: #2a2a2a;
-}
-
 /* Panel */
 .panel {
   display: flex;

src/app/index.ts

@@ -80,6 +80,8 @@ export type {
   ResttyPaneSplitDirection,
   ResttyPaneContextMenuItem,
   ResttyPaneDefinition,
+  ResttyPaneStyleOptions,
+  ResttyPaneStylesOptions,
   ResttyPaneShortcutsOptions,
   ResttyPaneContextMenuOptions,
   CreateResttyPaneManagerOptions,

src/app/pane-app-manager.ts

@@ -1,6 +1,8 @@
 import {
   createDefaultResttyPaneContextMenuItems,
   createResttyPaneManager,
+  type ResttyPaneStyleOptions,
+  type ResttyPaneStylesOptions,
   type ResttyPaneContextMenuOptions,
   type ResttyPaneManager,
   type ResttyPaneShortcutsOptions,
@@ -23,6 +25,9 @@ export type ResttyPaneDomDefaults = {
   termDebugClassName?: string;
 };
 
+export type ResttyManagedPaneStyleOptions = ResttyPaneStyleOptions;
+export type ResttyManagedPaneStylesOptions = ResttyPaneStylesOptions;
+
 export type ResttyPaneAppOptionsInput = Omit<ResttyAppOptions, "canvas" | "imeInput" | "session">;
 
 export type ResttyDefaultPaneContextMenuOptions = {
@@ -47,6 +52,7 @@ export type CreateResttyAppPaneManagerOptions = {
   paneDom?: ResttyPaneDomDefaults;
   autoInit?: boolean;
   minPaneSize?: number;
+  paneStyles?: boolean | ResttyManagedPaneStylesOptions;
   shortcuts?: boolean | ResttyPaneShortcutsOptions;
   contextMenu?: ResttyPaneContextMenuOptions<ResttyManagedAppPane> | null;
   defaultContextMenu?: boolean | ResttyDefaultPaneContextMenuOptions;
@@ -140,6 +146,7 @@ export function createResttyAppPaneManager(
   const manager = createResttyPaneManager<ResttyManagedAppPane>({
     root: options.root,
     minPaneSize: options.minPaneSize,
+    styles: options.paneStyles,
     shortcuts,
     contextMenu,
     createPane: ({ id, sourcePane }) => {