restty 0.1.8 → 0.1.9

package/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)`

package/dist/app/index.d.ts

@@ -3,6 +3,6 @@ export { createResttyAppSession, getDefaultResttyAppSession } from "./session";
 export { createResttyPaneManager, createDefaultResttyPaneContextMenuItems, getResttyShortcutModifierLabel, } from "./panes";
 export { Restty } from "./restty";
 export type { ResttyAppElements, ResttyAppCallbacks, FontSource, ResttyFontSource, ResttyUrlFontSource, ResttyBufferFontSource, ResttyLocalFontSource, ResttyWasmLogListener, ResttyAppSession, ResttyAppOptions, ResttyApp, } from "./types";
-export type { ResttyPaneSplitDirection, ResttyPaneContextMenuItem, ResttyPaneDefinition, ResttyPaneShortcutsOptions, ResttyPaneContextMenuOptions, CreateResttyPaneManagerOptions, ResttyPaneManager, ResttyPaneWithApp, CreateDefaultResttyPaneContextMenuItemsOptions, } from "./panes";
+export type { ResttyPaneSplitDirection, ResttyPaneContextMenuItem, ResttyPaneDefinition, ResttyPaneStyleOptions, ResttyPaneStylesOptions, ResttyPaneShortcutsOptions, ResttyPaneContextMenuOptions, CreateResttyPaneManagerOptions, ResttyPaneManager, ResttyPaneWithApp, CreateDefaultResttyPaneContextMenuItemsOptions, } from "./panes";
 export type { ResttyOptions } from "./restty";
 export declare function createResttyApp(options: ResttyAppOptions): ResttyApp;

package/dist/app/pane-app-manager.d.ts

@@ -1,4 +1,4 @@
-import { type ResttyPaneContextMenuOptions, type ResttyPaneManager, type ResttyPaneShortcutsOptions, type ResttyPaneWithApp } from "./panes";
+import { type ResttyPaneStyleOptions, type ResttyPaneStylesOptions, type ResttyPaneContextMenuOptions, type ResttyPaneManager, type ResttyPaneShortcutsOptions, type ResttyPaneWithApp } from "./panes";
 import type { ResttyAppOptions, ResttyAppSession } from "./types";
 export type ResttyManagedAppPane = ResttyPaneWithApp & {
     canvas: HTMLCanvasElement;
@@ -11,6 +11,8 @@ export type ResttyPaneDomDefaults = {
     imeInputClassName?: string;
     termDebugClassName?: string;
 };
+export type ResttyManagedPaneStyleOptions = ResttyPaneStyleOptions;
+export type ResttyManagedPaneStylesOptions = ResttyPaneStylesOptions;
 export type ResttyPaneAppOptionsInput = Omit<ResttyAppOptions, "canvas" | "imeInput" | "session">;
 export type ResttyDefaultPaneContextMenuOptions = {
     enabled?: boolean;
@@ -31,6 +33,7 @@ export type CreateResttyAppPaneManagerOptions = {
     paneDom?: ResttyPaneDomDefaults;
     autoInit?: boolean;
     minPaneSize?: number;
+    paneStyles?: boolean | ResttyManagedPaneStylesOptions;
     shortcuts?: boolean | ResttyPaneShortcutsOptions;
     contextMenu?: ResttyPaneContextMenuOptions<ResttyManagedAppPane> | null;
     defaultContextMenu?: boolean | ResttyDefaultPaneContextMenuOptions;

package/dist/app/panes.d.ts

@@ -21,6 +21,17 @@ export type ResttyPaneContextMenuOptions<TPane extends ResttyPaneDefinition> = {
     canOpen?: (event: MouseEvent, pane: TPane) => boolean;
     getItems: (pane: TPane, manager: ResttyPaneManager<TPane>) => Array<ResttyPaneContextMenuItem | "separator">;
 };
+export type ResttyPaneStyleOptions = {
+    splitBackground?: string;
+    paneBackground?: string;
+    inactivePaneOpacity?: number;
+    activePaneOpacity?: number;
+    opacityTransitionMs?: number;
+    dividerThicknessPx?: number;
+};
+export type ResttyPaneStylesOptions = ResttyPaneStyleOptions & {
+    enabled?: boolean;
+};
 export type CreateResttyPaneManagerOptions<TPane extends ResttyPaneDefinition> = {
     root: HTMLElement;
     createPane: (context: {
@@ -37,6 +48,7 @@ export type CreateResttyPaneManagerOptions<TPane extends ResttyPaneDefinition> =
     minPaneSize?: number;
     contextMenu?: ResttyPaneContextMenuOptions<TPane> | null;
     shortcuts?: boolean | ResttyPaneShortcutsOptions;
+    styles?: boolean | ResttyPaneStylesOptions;
 };
 export type ResttyPaneManager<TPane extends ResttyPaneDefinition> = {
     getPanes: () => TPane[];
@@ -55,6 +67,8 @@ export type ResttyPaneManager<TPane extends ResttyPaneDefinition> = {
     splitPane: (id: number, direction: ResttyPaneSplitDirection) => TPane | null;
     splitActivePane: (direction: ResttyPaneSplitDirection) => TPane | null;
     closePane: (id: number) => boolean;
+    getStyleOptions: () => Readonly<Required<ResttyPaneStyleOptions>>;
+    setStyleOptions: (options: ResttyPaneStyleOptions) => void;
     requestLayoutSync: () => void;
     hideContextMenu: () => void;
     destroy: () => void;

package/dist/app/restty.d.ts

@@ -1,6 +1,6 @@
 import type { GhosttyTheme } from "../theme";
 import type { InputHandler } from "../input";
-import { type CreateResttyAppPaneManagerOptions, type ResttyPaneAppOptionsInput, type ResttyManagedAppPane } from "./pane-app-manager";
+import { type CreateResttyAppPaneManagerOptions, type ResttyManagedPaneStyleOptions, type ResttyPaneAppOptionsInput, type ResttyManagedAppPane } from "./pane-app-manager";
 import type { ResttyPaneManager, ResttyPaneSplitDirection } from "./panes";
 import type { ResttyFontSource } from "./types";
 export type ResttyOptions = Omit<CreateResttyAppPaneManagerOptions, "appOptions"> & {
@@ -24,6 +24,8 @@ export declare class Restty {
     splitActivePane(direction: ResttyPaneSplitDirection): ResttyManagedAppPane | null;
     splitPane(id: number, direction: ResttyPaneSplitDirection): ResttyManagedAppPane | null;
     closePane(id: number): boolean;
+    getPaneStyleOptions(): Readonly<Required<ResttyManagedPaneStyleOptions>>;
+    setPaneStyleOptions(options: ResttyManagedPaneStyleOptions): void;
     setActivePane(id: number, options?: {
         focus?: boolean;
     }): void;

package/dist/index.d.ts

@@ -14,5 +14,5 @@ export { parseGhosttyTheme, parseGhosttyColor, colorToFloats, colorToRgbU32, lis
 export type { GhosttyTheme, ThemeColor, ResttyBuiltinThemeName } from "./theme";
 export { Restty } from "./app/restty";
 export type { ResttyOptions } from "./app/restty";
-export type { ResttyManagedAppPane, ResttyPaneDomDefaults, ResttyPaneAppOptionsInput, } from "./app/pane-app-manager";
+export type { ResttyManagedAppPane, ResttyPaneDomDefaults, ResttyManagedPaneStyleOptions, ResttyManagedPaneStylesOptions, ResttyPaneAppOptionsInput, } from "./app/pane-app-manager";
 export type { ResttyFontSource, ResttyUrlFontSource, ResttyBufferFontSource, ResttyLocalFontSource, } from "./app/types";

package/dist/index.js

@@ -25464,6 +25464,230 @@ function getBuiltinTheme(name) {
   return parsed;
 }
 // src/app/panes.ts
+var RESTTY_PANE_ROOT_CLASS = "restty-pane-root";
+var RESTTY_PANE_STYLE_MARKER = "data-restty-pane-styles";
+var RESTTY_PANE_STYLE_TEXT = `
+.${RESTTY_PANE_ROOT_CLASS} {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-split {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  gap: 0;
+  padding: 0;
+  background: var(--restty-pane-split-background, #111);
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-split.is-vertical {
+  flex-direction: row;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-split.is-horizontal {
+  flex-direction: column;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  background: var(--restty-pane-background, #000);
+  border: 0;
+  overflow: hidden;
+  opacity: var(--restty-pane-inactive-opacity, 0.82);
+  transition: opacity var(--restty-pane-opacity-transition, 140ms) ease-out;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane.is-active {
+  opacity: var(--restty-pane-active-opacity, 1);
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-divider {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 var(--restty-pane-divider-thickness, 1px);
+  touch-action: none;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-divider.is-vertical {
+  cursor: col-resize;
+  background: transparent;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-divider.is-horizontal {
+  cursor: row-resize;
+  background: transparent;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-divider.is-vertical:hover,
+.${RESTTY_PANE_ROOT_CLASS} .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);
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-divider.is-horizontal:hover,
+.${RESTTY_PANE_ROOT_CLASS} .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;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  outline: none;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .pane-ime-input {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.${RESTTY_PANE_ROOT_CLASS} .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;
+}
+`;
+var DEFAULT_RESTTY_PANE_STYLE_OPTIONS = {
+  splitBackground: "#111",
+  paneBackground: "#000",
+  inactivePaneOpacity: 0.82,
+  activePaneOpacity: 1,
+  opacityTransitionMs: 140,
+  dividerThicknessPx: 1
+};
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function normalizeColor(value, fallback) {
+  if (typeof value !== "string")
+    return fallback;
+  const trimmed = value.trim();
+  return trimmed ? trimmed : fallback;
+}
+function normalizePaneStyleOptions(options) {
+  const inactivePaneOpacity = Number.isFinite(options.inactivePaneOpacity) ? clampNumber(Number(options.inactivePaneOpacity), 0, 1) : DEFAULT_RESTTY_PANE_STYLE_OPTIONS.inactivePaneOpacity;
+  const activePaneOpacity = Number.isFinite(options.activePaneOpacity) ? clampNumber(Number(options.activePaneOpacity), 0, 1) : DEFAULT_RESTTY_PANE_STYLE_OPTIONS.activePaneOpacity;
+  const opacityTransitionMs = Number.isFinite(options.opacityTransitionMs) ? clampNumber(Number(options.opacityTransitionMs), 0, 5000) : DEFAULT_RESTTY_PANE_STYLE_OPTIONS.opacityTransitionMs;
+  const dividerThicknessPx = Number.isFinite(options.dividerThicknessPx) ? clampNumber(Number(options.dividerThicknessPx), 1, 32) : DEFAULT_RESTTY_PANE_STYLE_OPTIONS.dividerThicknessPx;
+  return {
+    splitBackground: normalizeColor(options.splitBackground, DEFAULT_RESTTY_PANE_STYLE_OPTIONS.splitBackground),
+    paneBackground: normalizeColor(options.paneBackground, DEFAULT_RESTTY_PANE_STYLE_OPTIONS.paneBackground),
+    inactivePaneOpacity,
+    activePaneOpacity,
+    opacityTransitionMs,
+    dividerThicknessPx
+  };
+}
+function ensureResttyPaneStylesDocument(doc) {
+  if (doc.querySelector(`style[${RESTTY_PANE_STYLE_MARKER}="1"]`))
+    return;
+  const style = doc.createElement("style");
+  style.setAttribute(RESTTY_PANE_STYLE_MARKER, "1");
+  style.textContent = RESTTY_PANE_STYLE_TEXT;
+  doc.head.appendChild(style);
+}
+function applyPaneStyleOptionsToRoot(root, options) {
+  root.classList.add(RESTTY_PANE_ROOT_CLASS);
+  root.style.setProperty("--restty-pane-split-background", options.splitBackground);
+  root.style.setProperty("--restty-pane-background", options.paneBackground);
+  root.style.setProperty("--restty-pane-inactive-opacity", options.inactivePaneOpacity.toFixed(3));
+  root.style.setProperty("--restty-pane-active-opacity", options.activePaneOpacity.toFixed(3));
+  root.style.setProperty("--restty-pane-opacity-transition", `${options.opacityTransitionMs}ms`);
+  root.style.setProperty("--restty-pane-divider-thickness", `${options.dividerThicknessPx}px`);
+}
+function clearPaneStyleOptionsFromRoot(root) {
+  root.classList.remove(RESTTY_PANE_ROOT_CLASS);
+  root.style.removeProperty("--restty-pane-split-background");
+  root.style.removeProperty("--restty-pane-background");
+  root.style.removeProperty("--restty-pane-inactive-opacity");
+  root.style.removeProperty("--restty-pane-active-opacity");
+  root.style.removeProperty("--restty-pane-opacity-transition");
+  root.style.removeProperty("--restty-pane-divider-thickness");
+}
 function getResttyShortcutModifierLabel() {
   const isMac = typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
   return isMac ? "Cmd" : "Ctrl";
@@ -25550,6 +25774,17 @@ function createResttyPaneManager(options) {
   const paneCleanupFns = new Map;
   const minPaneSize = Number.isFinite(options.minPaneSize) ? Math.max(24, Number(options.minPaneSize)) : 96;
   const shortcutOptions = typeof options.shortcuts === "object" ? options.shortcuts : { enabled: options.shortcuts !== false };
+  const stylesInput = typeof options.styles === "object" && options.styles ? options.styles : undefined;
+  const stylesEnabled = options.styles === false ? false : stylesInput?.enabled ?? true;
+  let styleOptions = normalizePaneStyleOptions({
+    ...DEFAULT_RESTTY_PANE_STYLE_OPTIONS,
+    ...stylesInput
+  });
+  if (stylesEnabled) {
+    const doc = root.ownerDocument ?? document;
+    ensureResttyPaneStylesDocument(doc);
+    applyPaneStyleOptionsToRoot(root, styleOptions);
+  }
   let nextPaneId = 1;
   let activePaneId = null;
   let focusedPaneId = null;
@@ -25569,6 +25804,18 @@ function createResttyPaneManager(options) {
       options.onLayoutChanged?.();
     });
   };
+  const getStyleOptions = () => ({
+    ...styleOptions
+  });
+  const setStyleOptions = (next) => {
+    styleOptions = normalizePaneStyleOptions({
+      ...styleOptions,
+      ...next
+    });
+    if (!stylesEnabled)
+      return;
+    applyPaneStyleOptionsToRoot(root, styleOptions);
+  };
   const getPanes = () => Array.from(panes.values());
   const getPaneById = (id) => {
     return panes.get(id) ?? null;
@@ -26004,6 +26251,9 @@ function createResttyPaneManager(options) {
     root.replaceChildren();
     hideContextMenu();
     contextMenuEl?.remove();
+    if (stylesEnabled) {
+      clearPaneStyleOptionsFromRoot(root);
+    }
   };
   const api = {
     getPanes,
@@ -26016,6 +26266,8 @@ function createResttyPaneManager(options) {
     splitPane,
     splitActivePane,
     closePane,
+    getStyleOptions,
+    setStyleOptions,
     requestLayoutSync,
     hideContextMenu,
     destroy
@@ -55127,6 +55379,7 @@ function createResttyAppPaneManager(options) {
   const manager2 = createResttyPaneManager({
     root: options.root,
     minPaneSize: options.minPaneSize,
+    styles: options.paneStyles,
     shortcuts,
     contextMenu,
     createPane: ({ id, sourcePane }) => {
@@ -55228,6 +55481,12 @@ class Restty {
   closePane(id) {
     return this.paneManager.closePane(id);
   }
+  getPaneStyleOptions() {
+    return this.paneManager.getStyleOptions();
+  }
+  setPaneStyleOptions(options) {
+    this.paneManager.setStyleOptions(options);
+  }
   setActivePane(id, options) {
     this.paneManager.setActivePane(id, options);
   }

package/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",