restty 0.1.8 → 0.1.10

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

@@ -875,12 +875,12 @@ float luminance(vec3 color) {
 }
 
 void main() {
-  vec4 sample = texture(u_atlas, v_uv);
+  vec4 atlasSample = texture(u_atlas, v_uv);
   bool useLinear = u_blend.x > 0.5;
   bool useCorrection = u_blend.y > 0.5;
 
   if (v_mode > 0.5) {
-    vec4 color = sample;
+    vec4 color = atlasSample;
     if (useLinear) {
       color.rgb = srgbToLinear(color.rgb);
     }
@@ -898,7 +898,7 @@ void main() {
   fg.rgb *= fg.a;
   bg.rgb *= bg.a;
 
-  float alpha = sample.a;
+  float alpha = atlasSample.a;
   if (useCorrection && useLinear) {
     float fg_l = luminance(fg.rgb);
     float bg_l = luminance(bg.rgb);
@@ -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/dist/renderer/shaders.d.ts

@@ -2,6 +2,6 @@ export declare const RECT_SHADER = "\nstruct Uniforms {\n  res: vec2f,\n  _pad:
 export declare const RECT_SHADER_GL_VERT = "#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\n\nlayout(location = 0) in vec2 a_quad;\nlayout(location = 1) in vec2 a_pos;\nlayout(location = 2) in vec2 a_size;\nlayout(location = 3) in vec4 a_color;\n\nout vec4 v_color;\n\nvoid main() {\n  vec2 pixel = a_pos + a_quad * a_size;\n  vec2 clip = vec2(\n    (pixel.x / u_resolution.x) * 2.0 - 1.0,\n    1.0 - (pixel.y / u_resolution.y) * 2.0\n  );\n  gl_Position = vec4(clip, 0.0, 1.0);\n  v_color = a_color;\n}\n";
 export declare const RECT_SHADER_GL_FRAG = "#version 300 es\nprecision highp float;\n\nuniform vec2 u_blend;\n\nin vec4 v_color;\nout vec4 fragColor;\n\n// sRGB to linear conversion for proper blending\nfloat srgbToLinear(float c) {\n  if (c <= 0.04045) {\n    return c / 12.92;\n  }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\n\nvec3 srgbToLinear(vec3 c) {\n  return vec3(srgbToLinear(c.r), srgbToLinear(c.g), srgbToLinear(c.b));\n}\n\nvoid main() {\n  bool useLinear = u_blend.x > 0.5;\n  vec4 color = v_color;\n  if (useLinear) {\n    color.rgb = srgbToLinear(color.rgb);\n  }\n  color.rgb *= color.a;\n  fragColor = color;\n}\n";
 export declare const GLYPH_SHADER_GL_VERT = "#version 300 es\nprecision highp float;\n\nuniform vec2 u_resolution;\n\nlayout(location = 0) in vec2 a_quad;\nlayout(location = 1) in vec2 a_pos;\nlayout(location = 2) in vec2 a_size;\nlayout(location = 3) in vec2 a_uv0;\nlayout(location = 4) in vec2 a_uv1;\nlayout(location = 5) in vec4 a_color;\nlayout(location = 6) in vec4 a_bg;\nlayout(location = 7) in float a_slant;\nlayout(location = 8) in float a_mode;\n\nout vec2 v_uv;\nout vec4 v_color;\nout vec4 v_bg;\nout float v_mode;\n\nvoid main() {\n  vec2 pixel = a_pos + vec2(a_quad.x * a_size.x + a_slant * (1.0 - a_quad.y), a_quad.y * a_size.y);\n  vec2 clip = vec2(\n    (pixel.x / u_resolution.x) * 2.0 - 1.0,\n    1.0 - (pixel.y / u_resolution.y) * 2.0\n  );\n  v_uv = a_uv0 + (a_uv1 - a_uv0) * a_quad;\n  gl_Position = vec4(clip, 0.0, 1.0);\n  v_color = a_color;\n  v_bg = a_bg;\n  v_mode = a_mode;\n}\n";
-export declare const GLYPH_SHADER_GL_FRAG = "#version 300 es\nprecision highp float;\n\nuniform sampler2D u_atlas;\nuniform vec2 u_blend;\n\nin vec2 v_uv;\nin vec4 v_color;\nin vec4 v_bg;\nin float v_mode;\nout vec4 fragColor;\n\n// sRGB to linear conversion for proper blending\nfloat srgbToLinear(float c) {\n  if (c <= 0.04045) {\n    return c / 12.92;\n  }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\n\n// Linear to sRGB conversion\nfloat linearToSrgb(float c) {\n  if (c <= 0.0031308) {\n    return c * 12.92;\n  }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\n\nvec3 srgbToLinear(vec3 c) {\n  return vec3(srgbToLinear(c.r), srgbToLinear(c.g), srgbToLinear(c.b));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  return vec3(linearToSrgb(c.r), linearToSrgb(c.g), linearToSrgb(c.b));\n}\n\nfloat luminance(vec3 color) {\n  return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n  vec4 sample = texture(u_atlas, v_uv);\n  bool useLinear = u_blend.x > 0.5;\n  bool useCorrection = u_blend.y > 0.5;\n\n  if (v_mode > 0.5) {\n    vec4 color = sample;\n    if (useLinear) {\n      color.rgb = srgbToLinear(color.rgb);\n    }\n    color.rgb *= color.a;\n    fragColor = color;\n    return;\n  }\n\n  vec4 fg = v_color;\n  vec4 bg = v_bg;\n  if (useLinear) {\n    fg.rgb = srgbToLinear(fg.rgb);\n    bg.rgb = srgbToLinear(bg.rgb);\n  }\n  fg.rgb *= fg.a;\n  bg.rgb *= bg.a;\n\n  float alpha = sample.a;\n  if (useCorrection && useLinear) {\n    float fg_l = luminance(fg.rgb);\n    float bg_l = luminance(bg.rgb);\n    if (abs(fg_l - bg_l) > 0.001) {\n      float blend_l = srgbToLinear(linearToSrgb(fg_l) * alpha + linearToSrgb(bg_l) * (1.0 - alpha));\n      alpha = clamp((blend_l - bg_l) / (fg_l - bg_l), 0.0, 1.0);\n    }\n  }\n\n  vec4 color = fg * alpha;\n  fragColor = color;\n}\n";
+export declare const GLYPH_SHADER_GL_FRAG = "#version 300 es\nprecision highp float;\n\nuniform sampler2D u_atlas;\nuniform vec2 u_blend;\n\nin vec2 v_uv;\nin vec4 v_color;\nin vec4 v_bg;\nin float v_mode;\nout vec4 fragColor;\n\n// sRGB to linear conversion for proper blending\nfloat srgbToLinear(float c) {\n  if (c <= 0.04045) {\n    return c / 12.92;\n  }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\n\n// Linear to sRGB conversion\nfloat linearToSrgb(float c) {\n  if (c <= 0.0031308) {\n    return c * 12.92;\n  }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\n\nvec3 srgbToLinear(vec3 c) {\n  return vec3(srgbToLinear(c.r), srgbToLinear(c.g), srgbToLinear(c.b));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  return vec3(linearToSrgb(c.r), linearToSrgb(c.g), linearToSrgb(c.b));\n}\n\nfloat luminance(vec3 color) {\n  return dot(color, vec3(0.2126, 0.7152, 0.0722));\n}\n\nvoid main() {\n  vec4 atlasSample = texture(u_atlas, v_uv);\n  bool useLinear = u_blend.x > 0.5;\n  bool useCorrection = u_blend.y > 0.5;\n\n  if (v_mode > 0.5) {\n    vec4 color = atlasSample;\n    if (useLinear) {\n      color.rgb = srgbToLinear(color.rgb);\n    }\n    color.rgb *= color.a;\n    fragColor = color;\n    return;\n  }\n\n  vec4 fg = v_color;\n  vec4 bg = v_bg;\n  if (useLinear) {\n    fg.rgb = srgbToLinear(fg.rgb);\n    bg.rgb = srgbToLinear(bg.rgb);\n  }\n  fg.rgb *= fg.a;\n  bg.rgb *= bg.a;\n\n  float alpha = atlasSample.a;\n  if (useCorrection && useLinear) {\n    float fg_l = luminance(fg.rgb);\n    float bg_l = luminance(bg.rgb);\n    if (abs(fg_l - bg_l) > 0.001) {\n      float blend_l = srgbToLinear(linearToSrgb(fg_l) * alpha + linearToSrgb(bg_l) * (1.0 - alpha));\n      alpha = clamp((blend_l - bg_l) / (fg_l - bg_l), 0.0, 1.0);\n    }\n  }\n\n  vec4 color = fg * alpha;\n  fragColor = color;\n}\n";
 export declare const GLYPH_SHADER = "\nstruct Uniforms {\n  res: vec2f,\n  _pad: vec2f,\n  blend: vec2f,\n  _pad2: vec2f,\n};\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var atlasSampler: sampler;\n@group(0) @binding(2) var atlasTex: texture_2d<f32>;\n\nstruct VSIn {\n  @location(0) quad: vec2f,\n  @location(1) pos: vec2f,\n  @location(2) size: vec2f,\n  @location(3) uv0: vec2f,\n  @location(4) uv1: vec2f,\n  @location(5) color: vec4f,\n  @location(6) bg: vec4f,\n  @location(7) slant: f32,\n  @location(8) mode: f32,\n};\n\nstruct VSOut {\n  @builtin(position) position: vec4f,\n  @location(0) uv: vec2f,\n  @location(1) color: vec4f,\n  @location(2) bg: vec4f,\n  @location(3) mode: f32,\n};\n\n@vertex\nfn vsMain(input: VSIn) -> VSOut {\n  let pixel = input.pos +\n    vec2f(input.quad.x * input.size.x + input.slant * (1.0 - input.quad.y), input.quad.y * input.size.y);\n  let clip = vec2f(\n    (pixel.x / uniforms.res.x) * 2.0 - 1.0,\n    1.0 - (pixel.y / uniforms.res.y) * 2.0\n  );\n  let uv = input.uv0 + (input.uv1 - input.uv0) * input.quad;\n\n  var out: VSOut;\n  out.position = vec4f(clip.x, clip.y, 0.0, 1.0);\n  out.uv = uv;\n  out.color = input.color;\n  out.bg = input.bg;\n  out.mode = input.mode;\n  return out;\n}\n\n// sRGB to linear conversion for proper blending\nfn srgbToLinear(c: f32) -> f32 {\n  if (c <= 0.04045) {\n    return c / 12.92;\n  }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\n\n// Linear to sRGB conversion\nfn linearToSrgb(c: f32) -> f32 {\n  if (c <= 0.0031308) {\n    return c * 12.92;\n  }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\n\nfn srgbToLinear3(c: vec3f) -> vec3f {\n  return vec3f(srgbToLinear(c.x), srgbToLinear(c.y), srgbToLinear(c.z));\n}\n\nfn linearToSrgb3(c: vec3f) -> vec3f {\n  return vec3f(linearToSrgb(c.x), linearToSrgb(c.y), linearToSrgb(c.z));\n}\n\nfn luminance(color: vec3f) -> f32 {\n  return dot(color, vec3f(0.2126, 0.7152, 0.0722));\n}\n\n@fragment\nfn fsMain(input: VSOut) -> @location(0) vec4f {\n  let sample = textureSample(atlasTex, atlasSampler, input.uv);\n  let useLinear = uniforms.blend.x > 0.5;\n  let useCorrection = uniforms.blend.y > 0.5;\n\n  if (input.mode > 0.5) {\n    var color = sample;\n    if (useLinear) {\n      color = vec4f(srgbToLinear3(color.rgb), color.a);\n    }\n    return vec4f(color.rgb * color.a, color.a);\n  }\n\n  var alpha = sample.a;\n\n  var fg = input.color;\n  var bg = input.bg;\n  if (useLinear) {\n    fg = vec4f(srgbToLinear3(fg.rgb), fg.a);\n    bg = vec4f(srgbToLinear3(bg.rgb), bg.a);\n  }\n  fg = vec4f(fg.rgb * fg.a, fg.a);\n  bg = vec4f(bg.rgb * bg.a, bg.a);\n\n  if (useCorrection && useLinear) {\n    let fg_l = luminance(fg.rgb);\n    let bg_l = luminance(bg.rgb);\n    if (abs(fg_l - bg_l) > 0.001) {\n      let blend_l = srgbToLinear(linearToSrgb(fg_l) * alpha + linearToSrgb(bg_l) * (1.0 - alpha));\n      alpha = clamp((blend_l - bg_l) / (fg_l - bg_l), 0.0, 1.0);\n    }\n  }\n\n  var color = fg * alpha;\n  return color;\n}\n";
 export declare const GLYPH_SHADER_NEAREST = "\nstruct Uniforms {\n  res: vec2f,\n  _pad: vec2f,\n  blend: vec2f,\n  _pad2: vec2f,\n};\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var atlasSampler: sampler;\n@group(0) @binding(2) var atlasTex: texture_2d<f32>;\n\nstruct VSIn {\n  @location(0) quad: vec2f,\n  @location(1) pos: vec2f,\n  @location(2) size: vec2f,\n  @location(3) uv0: vec2f,\n  @location(4) uv1: vec2f,\n  @location(5) color: vec4f,\n  @location(6) bg: vec4f,\n  @location(7) slant: f32,\n  @location(8) mode: f32,\n};\n\nstruct VSOut {\n  @builtin(position) position: vec4f,\n  @location(0) uv: vec2f,\n  @location(1) color: vec4f,\n  @location(2) bg: vec4f,\n  @location(3) mode: f32,\n};\n\n@vertex\nfn vsMain(input: VSIn) -> VSOut {\n  let pixel = input.pos +\n    vec2f(input.quad.x * input.size.x + input.slant * (1.0 - input.quad.y), input.quad.y * input.size.y);\n  let clip = vec2f(\n    (pixel.x / uniforms.res.x) * 2.0 - 1.0,\n    1.0 - (pixel.y / uniforms.res.y) * 2.0\n  );\n  let uv = input.uv0 + (input.uv1 - input.uv0) * input.quad;\n\n  var out: VSOut;\n  out.position = vec4f(clip.x, clip.y, 0.0, 1.0);\n  out.uv = uv;\n  out.color = input.color;\n  out.bg = input.bg;\n  out.mode = input.mode;\n  return out;\n}\n\n// sRGB to linear conversion for proper blending\nfn srgbToLinear(c: f32) -> f32 {\n  if (c <= 0.04045) {\n    return c / 12.92;\n  }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\n\n// Linear to sRGB conversion\nfn linearToSrgb(c: f32) -> f32 {\n  if (c <= 0.0031308) {\n    return c * 12.92;\n  }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\n\nfn srgbToLinear3(c: vec3f) -> vec3f {\n  return vec3f(srgbToLinear(c.x), srgbToLinear(c.y), srgbToLinear(c.z));\n}\n\nfn linearToSrgb3(c: vec3f) -> vec3f {\n  return vec3f(linearToSrgb(c.x), linearToSrgb(c.y), linearToSrgb(c.z));\n}\n\nfn luminance(color: vec3f) -> f32 {\n  return dot(color, vec3f(0.2126, 0.7152, 0.0722));\n}\n\n@fragment\nfn fsMain(input: VSOut) -> @location(0) vec4f {\n  let sample = textureSample(atlasTex, atlasSampler, input.uv);\n  let useLinear = uniforms.blend.x > 0.5;\n  let useCorrection = uniforms.blend.y > 0.5;\n\n  if (input.mode > 0.5) {\n    var color = sample;\n    if (useLinear) {\n      color = vec4f(srgbToLinear3(color.rgb), color.a);\n    }\n    return vec4f(color.rgb * color.a, color.a);\n  }\n\n  var alpha = sample.a;\n\n  var fg = input.color;\n  var bg = input.bg;\n  if (useLinear) {\n    fg = vec4f(srgbToLinear3(fg.rgb), fg.a);\n    bg = vec4f(srgbToLinear3(bg.rgb), bg.a);\n  }\n  fg = vec4f(fg.rgb * fg.a, fg.a);\n  bg = vec4f(bg.rgb * bg.a, bg.a);\n\n  if (useCorrection && useLinear) {\n    let fg_l = luminance(fg.rgb);\n    let bg_l = luminance(bg.rgb);\n    if (abs(fg_l - bg_l) > 0.001) {\n      let blend_l = srgbToLinear(linearToSrgb(fg_l) * alpha + linearToSrgb(bg_l) * (1.0 - alpha));\n      alpha = clamp((blend_l - bg_l) / (fg_l - bg_l), 0.0, 1.0);\n    }\n  }\n\n  var color = fg * alpha;\n  return color;\n}\n";

package/package.json

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