@aurigax-ai/ghostty-web 0.1.0 → 0.3.0

package/lib/selection-manager.ts

@@ -13,7 +13,7 @@
 import { EventEmitter } from './event-emitter';
 import type { GhosttyTerminal } from './ghostty';
 import type { IEvent } from './interfaces';
-import type { CanvasRenderer } from './renderer';
+import type { TerminalRenderer } from './renderer';
 import type { Terminal } from './terminal';
 import type { GhosttyCell } from './types';
 
@@ -34,7 +34,7 @@ export interface SelectionCoordinates {
 
 export class SelectionManager {
   private terminal: Terminal;
-  private renderer: CanvasRenderer;
+  private renderer: TerminalRenderer;
   private wasmTerm: GhosttyTerminal;
   private textarea: HTMLTextAreaElement;
 
@@ -101,7 +101,7 @@ export class SelectionManager {
 
   constructor(
     terminal: Terminal,
-    renderer: CanvasRenderer,
+    renderer: TerminalRenderer,
     wasmTerm: GhosttyTerminal,
     textarea: HTMLTextAreaElement
   ) {
@@ -114,6 +114,11 @@ export class SelectionManager {
     this.attachEventListeners();
   }
 
+  /** Points the selection at a new renderer drawing the same canvas. */
+  setRenderer(renderer: TerminalRenderer): void {
+    this.renderer = renderer;
+  }
+
   // ==========================================================================
   // Public API
   // ==========================================================================

package/lib/terminal.ts

@@ -30,6 +30,7 @@ import {
 import { getGhostty } from './index';
 import { InputHandler, type MouseTrackingConfig } from './input-handler';
 import type {
+  FontWeight,
   IBufferNamespace,
   IBufferRange,
   IDisposable,
@@ -44,9 +45,16 @@ import { LinkDetector } from './link-detector';
 import { type IMarker, Marker } from './marker';
 import { OSC8LinkProvider } from './providers/osc8-link-provider';
 import { UrlRegexProvider } from './providers/url-regex-provider';
-import { CanvasRenderer } from './renderer';
+import {
+  CanvasRenderer,
+  type RendererOptions,
+  type SearchHighlight,
+  type SearchHighlightColors,
+  type TerminalRenderer,
+} from './renderer';
 import { SelectionManager } from './selection-manager';
 import type { ILink, ILinkProvider } from './types';
+import { WebglRenderer } from './webgl-renderer';
 
 // ============================================================================
 // Terminal Class
@@ -75,7 +83,7 @@ export class Terminal implements ITerminalCore {
   // Components (created on open())
   private ghostty?: Ghostty;
   public wasmTerm?: GhosttyTerminal; // Made public for link providers
-  public renderer?: CanvasRenderer; // Made public for FitAddon
+  public renderer?: TerminalRenderer; // Made public for FitAddon
   private inputHandler?: InputHandler;
   private selectionManager?: SelectionManager;
   private canvas?: HTMLCanvasElement;
@@ -96,6 +104,7 @@ export class Terminal implements ITerminalCore {
   private scrollEmitter = new EventEmitter<number>();
   private renderEmitter = new EventEmitter<{ start: number; end: number }>();
   private cursorMoveEmitter = new EventEmitter<void>();
+  private writeParsedEmitter = new EventEmitter<void>();
   // Public event accessors (xterm.js compatibility)
   public readonly onData: IEvent<string> = this.dataEmitter.event;
   public readonly onResize: IEvent<{ cols: number; rows: number }> = this.resizeEmitter.event;
@@ -106,6 +115,8 @@ export class Terminal implements ITerminalCore {
   public readonly onScroll: IEvent<number> = this.scrollEmitter.event;
   public readonly onRender: IEvent<{ start: number; end: number }> = this.renderEmitter.event;
   public readonly onCursorMove: IEvent<void> = this.cursorMoveEmitter.event;
+  /** Fires after written data was parsed, as xterm.js's onWriteParsed. */
+  public readonly onWriteParsed: IEvent<void> = this.writeParsedEmitter.event;
 
   private pwdEmitter = new EventEmitter<string>();
   private semanticPromptEmitter = new EventEmitter<SemanticPromptEvent>();
@@ -187,9 +198,17 @@ export class Terminal implements ITerminalCore {
       fontSize: options.fontSize ?? 15,
       fontFamily: options.fontFamily ?? 'monospace',
       allowTransparency: options.allowTransparency ?? false,
+      linkHandler: options.linkHandler ?? null,
+      renderer: options.renderer ?? 'webgl',
       convertEol: options.convertEol ?? false,
       disableStdin: options.disableStdin ?? false,
       smoothScrollDuration: options.smoothScrollDuration ?? 100, // Default: 100ms smooth scroll
+      fontWeight: options.fontWeight ?? 'normal',
+      fontWeightBold: options.fontWeightBold ?? 'bold',
+      lineHeight: options.lineHeight ?? 1,
+      scrollSensitivity: options.scrollSensitivity ?? 1,
+      minimumContrastRatio: options.minimumContrastRatio ?? 1,
+      macOptionIsMeta: options.macOptionIsMeta ?? false,
     };
 
     // Wrap in Proxy to intercept runtime changes (xterm.js compatibility)
@@ -241,11 +260,37 @@ export class Terminal implements ITerminalCore {
         break;
 
       case 'theme':
+        this.wasmTerm?.configure(this.themeConfig());
+        if (this.renderer && this.wasmTerm) {
+          this.renderer.setTheme(this.options.theme);
+          this.renderer.render(this.wasmTerm, true, this.viewportY, this, this.scrollbarOpacity);
+        }
+        break;
+
+      case 'macOptionIsMeta':
+        if (this.inputHandler) this.inputHandler.macOptionIsMeta = this.options.macOptionIsMeta;
+        break;
+
+      case 'fontWeight':
+      case 'fontWeightBold':
+      case 'lineHeight':
         if (this.renderer) {
-          console.warn('ghostty-web: theme changes after open() are not yet fully supported');
+          this.renderer.setFontOptions(this.fontOptions());
+          this.handleFontChange();
+        }
+        break;
+
+      case 'minimumContrastRatio':
+        if (this.renderer && this.wasmTerm) {
+          this.renderer.setMinimumContrastRatio(this.options.minimumContrastRatio);
+          this.renderer.render(this.wasmTerm, true, this.viewportY, this, this.scrollbarOpacity);
         }
         break;
 
+      case 'scrollback':
+        this.wasmTerm?.configure({ scrollbackLimit: this.options.scrollback });
+        break;
+
       case 'fontSize':
         if (this.renderer) {
           this.renderer.setFontSize(this.options.fontSize);
@@ -283,13 +328,6 @@ export class Terminal implements ITerminalCore {
     // Resize canvas to match new font metrics
     this.renderer.resize(this.cols, this.rows);
 
-    // Update canvas element dimensions to match renderer
-    const metrics = this.renderer.getMetrics();
-    this.canvas.width = metrics.width * this.cols;
-    this.canvas.height = metrics.height * this.rows;
-    this.canvas.style.width = `${metrics.width * this.cols}px`;
-    this.canvas.style.height = `${metrics.height * this.rows}px`;
-
     // Force full re-render with new font
     this.renderer.render(this.wasmTerm, true, this.viewportY, this);
   }
@@ -298,67 +336,48 @@ export class Terminal implements ITerminalCore {
    * Parse a CSS color string to 0xRRGGBB format.
    * Returns 0 if the color is undefined or invalid.
    */
-  private parseColorToHex(color?: string): number {
-    if (!color) return 0;
-
-    // Handle hex colors (#RGB, #RRGGBB)
+  private parseColorToHex(color?: string): number | undefined {
+    if (!color) return undefined;
     if (color.startsWith('#')) {
       let hex = color.slice(1);
-      if (hex.length === 3) {
+      if (hex.length === 3 || hex.length === 4) {
         hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
       }
-      const value = Number.parseInt(hex, 16);
-      return Number.isNaN(value) ? 0 : value;
+      const value = Number.parseInt(hex.slice(0, 6), 16);
+      return hex.length >= 6 && !Number.isNaN(value) ? value : undefined;
     }
-
-    // Handle rgb(r, g, b) format
-    const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
     if (match) {
       const r = Number.parseInt(match[1], 10);
       const g = Number.parseInt(match[2], 10);
       const b = Number.parseInt(match[3], 10);
       return (r << 16) | (g << 8) | b;
     }
-
-    return 0;
+    return undefined;
   }
 
-  /**
-   * Convert terminal options to WASM terminal config.
-   */
-  private buildWasmConfig(): GhosttyTerminalConfig | undefined {
+  /** Theme colors in the form libghostty-vt takes; a color the theme leaves out keeps Ghostty's default. */
+  private themeConfig(): GhosttyTerminalConfig {
     const theme = this.options.theme;
-    const scrollback = this.options.scrollback;
-
-    // If no theme and default scrollback, use defaults
-    if (!theme && scrollback === 10000) {
-      return undefined;
-    }
-
-    // Build palette array from theme colors
-    // Order: black, red, green, yellow, blue, magenta, cyan, white,
-    //        brightBlack, brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite
-    const palette: number[] = [
-      this.parseColorToHex(theme?.black),
-      this.parseColorToHex(theme?.red),
-      this.parseColorToHex(theme?.green),
-      this.parseColorToHex(theme?.yellow),
-      this.parseColorToHex(theme?.blue),
-      this.parseColorToHex(theme?.magenta),
-      this.parseColorToHex(theme?.cyan),
-      this.parseColorToHex(theme?.white),
-      this.parseColorToHex(theme?.brightBlack),
-      this.parseColorToHex(theme?.brightRed),
-      this.parseColorToHex(theme?.brightGreen),
-      this.parseColorToHex(theme?.brightYellow),
-      this.parseColorToHex(theme?.brightBlue),
-      this.parseColorToHex(theme?.brightMagenta),
-      this.parseColorToHex(theme?.brightCyan),
-      this.parseColorToHex(theme?.brightWhite),
-    ];
-
+    const palette = [
+      theme?.black,
+      theme?.red,
+      theme?.green,
+      theme?.yellow,
+      theme?.blue,
+      theme?.magenta,
+      theme?.cyan,
+      theme?.white,
+      theme?.brightBlack,
+      theme?.brightRed,
+      theme?.brightGreen,
+      theme?.brightYellow,
+      theme?.brightBlue,
+      theme?.brightMagenta,
+      theme?.brightCyan,
+      theme?.brightWhite,
+    ].map((color) => this.parseColorToHex(color));
     return {
-      scrollbackLimit: scrollback,
       fgColor: this.parseColorToHex(theme?.foreground),
       bgColor: this.parseColorToHex(theme?.background),
       cursorColor: this.parseColorToHex(theme?.cursor),
@@ -366,6 +385,10 @@ export class Terminal implements ITerminalCore {
     };
   }
 
+  private buildWasmConfig(): GhosttyTerminalConfig {
+    return { ...this.themeConfig(), scrollbackLimit: this.options.scrollback };
+  }
+
   // ==========================================================================
   // Lifecycle Methods
   // ==========================================================================
@@ -457,29 +480,18 @@ export class Terminal implements ITerminalCore {
         textarea.focus();
       });
 
-      // Create renderer
-      this.renderer = new CanvasRenderer(this.canvas, {
-        fontSize: this.options.fontSize,
-        fontFamily: this.options.fontFamily,
-        cursorStyle: this.options.cursorStyle,
-        cursorBlink: this.options.cursorBlink,
-        theme: this.options.theme,
-      });
-      this.renderer.onNeedsFrame = () => this.wake();
-
-      // Size canvas to terminal dimensions (use renderer.resize for proper DPI scaling)
+      this.renderer = this.createRenderer();
       this.renderer.resize(this.cols, this.rows);
 
       // Create mouse tracking configuration
       const canvas = this.canvas;
-      const renderer = this.renderer;
       const wasmTerm = this.wasmTerm;
       const mouseConfig: MouseTrackingConfig = {
         hasMouseTracking: () => wasmTerm?.hasMouseTracking() ?? false,
         hasSgrMouseMode: () => wasmTerm?.getMode(1006, false) ?? true, // SGR extended mode
         getCellDimensions: () => ({
-          width: renderer.charWidth,
-          height: renderer.charHeight,
+          width: this.renderer!.charWidth,
+          height: this.renderer!.charHeight,
         }),
         getCanvasOffset: () => {
           const rect = canvas.getBoundingClientRect();
@@ -522,6 +534,7 @@ export class Terminal implements ITerminalCore {
         this.textarea,
         mouseConfig
       );
+      this.inputHandler.macOptionIsMeta = this.options.macOptionIsMeta;
 
       // Create selection manager (pass textarea for context menu positioning)
       this.selectionManager = new SelectionManager(
@@ -553,6 +566,8 @@ export class Terminal implements ITerminalCore {
       parent.addEventListener('mousedown', this.handleMouseDown, { capture: true });
       parent.addEventListener('mousemove', this.handleMouseMove);
       parent.addEventListener('mouseleave', this.handleMouseLeave);
+      parent.addEventListener('focusin', this.handleFocusIn);
+      parent.addEventListener('focusout', this.handleFocusOut);
       parent.addEventListener('click', this.handleClick);
 
       // Setup document-level mouseup for scrollbar drag (so drag works even outside canvas)
@@ -578,6 +593,74 @@ export class Terminal implements ITerminalCore {
     }
   }
 
+  /** Which renderer draws the terminal now: 'webgl', or 'canvas' when asked for or fallen back to. */
+  get rendererType(): 'webgl' | 'canvas' {
+    return this.renderer instanceof WebglRenderer ? 'webgl' : 'canvas';
+  }
+
+  private fontOptions(): {
+    fontWeight: FontWeight;
+    fontWeightBold: FontWeight;
+    lineHeight: number;
+  } {
+    return {
+      fontWeight: this.options.fontWeight,
+      fontWeightBold: this.options.fontWeightBold,
+      lineHeight: this.options.lineHeight,
+    };
+  }
+
+  private rendererOptions(): RendererOptions {
+    return {
+      ...this.fontOptions(),
+      minimumContrastRatio: this.options.minimumContrastRatio,
+      fontSize: this.options.fontSize,
+      fontFamily: this.options.fontFamily,
+      cursorStyle: this.options.cursorStyle,
+      cursorBlink: this.options.cursorBlink,
+      theme: this.options.theme,
+    };
+  }
+
+  private createRenderer(): TerminalRenderer {
+    let renderer: TerminalRenderer | null = null;
+    if (this.options.renderer === 'webgl') {
+      try {
+        const webgl = new WebglRenderer(this.canvas!, this.rendererOptions());
+        webgl.onContextLost = () => this.fallBackToCanvas();
+        renderer = webgl;
+      } catch {
+        renderer = null;
+      }
+    }
+    renderer ??= new CanvasRenderer(this.canvas!, this.rendererOptions());
+    renderer.onNeedsFrame = () => this.requestFrame();
+    renderer.setFocused(this.focused);
+    return renderer;
+  }
+
+  /** Replaces a WebGL renderer whose context was lost with a canvas renderer on the same canvas. */
+  private fallBackToCanvas(): void {
+    if (!this.renderer || !this.canvas || !(this.renderer instanceof WebglRenderer)) return;
+    const hoveredLink = this.renderer.getHoveredHyperlinkId();
+    this.renderer.dispose();
+    const renderer = new CanvasRenderer(this.canvas, this.rendererOptions());
+    renderer.onNeedsFrame = () => this.requestFrame();
+    renderer.setHoveredHyperlinkId(hoveredLink);
+    renderer.setFocused(this.focused);
+    renderer.setSearchHighlights(this.searchHighlights.list, this.searchHighlights.colors);
+    if (this.selectionManager) {
+      renderer.setSelectionManager(this.selectionManager);
+      this.selectionManager.setRenderer(renderer);
+    }
+    this.renderer = renderer;
+    renderer.resize(this.cols, this.rows);
+    if (this.wasmTerm) {
+      renderer.render(this.wasmTerm, true, this.viewportY, this, this.scrollbarOpacity);
+    }
+    this.wake();
+  }
+
   /**
    * Write data to terminal
    */
@@ -723,13 +806,6 @@ export class Terminal implements ITerminalCore {
       // Resize renderer
       this.renderer!.resize(cols, rows);
 
-      // Update canvas dimensions
-      const metrics = this.renderer!.getMetrics();
-      this.canvas!.width = metrics.width * cols;
-      this.canvas!.height = metrics.height * rows;
-      this.canvas!.style.width = `${metrics.width * cols}px`;
-      this.canvas!.style.height = `${metrics.height * rows}px`;
-
       // Fire resize event
       this.resizeEmitter.fire({ cols, rows });
 
@@ -1007,16 +1083,18 @@ export class Terminal implements ITerminalCore {
     }
   }
 
-  /**
-   * Scroll viewport to a specific line in the buffer
-   * @param line Line number (0 = top of scrollback, scrollbackLength = bottom)
-   */
   /** Scrolls so that absolute buffer line `line` (0 = oldest scrollback line) is at the top, like xterm.js. */
   public scrollToLine(line: number): void {
-    this.wake();
     const scrollbackLength = this.getScrollbackLength();
     const top = Math.max(0, Math.min(scrollbackLength, Math.round(line)));
-    const newViewportY = scrollbackLength - top;
+    this.scrollToViewportY(scrollbackLength - top);
+  }
+
+  /** Scrolls to `viewportY` lines above the bottom. */
+  private scrollToViewportY(viewportY: number): void {
+    this.wake();
+    const scrollbackLength = this.getScrollbackLength();
+    const newViewportY = Math.max(0, Math.min(scrollbackLength, Math.round(viewportY)));
 
     if (newViewportY !== this.viewportY) {
       this.viewportY = newViewportY;
@@ -1173,6 +1251,7 @@ export class Terminal implements ITerminalCore {
     this.scrollEmitter.dispose();
     this.renderEmitter.dispose();
     this.cursorMoveEmitter.dispose();
+    this.writeParsedEmitter.dispose();
   }
 
   // ==========================================================================
@@ -1280,6 +1359,8 @@ export class Terminal implements ITerminalCore {
       this.element.removeEventListener('mousedown', this.handleMouseDown, { capture: true });
       this.element.removeEventListener('mousemove', this.handleMouseMove);
       this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+      this.element.removeEventListener('focusin', this.handleFocusIn);
+      this.element.removeEventListener('focusout', this.handleFocusOut);
       this.element.removeEventListener('click', this.handleClick);
 
       // Remove contenteditable and accessibility attributes added in open()
@@ -1635,6 +1716,8 @@ export class Terminal implements ITerminalCore {
         deltaLines = e.deltaY / 33;
       }
 
+      deltaLines *= this.options.scrollSensitivity;
+
       // Use smooth scrolling for any amount (no rounding needed)
       if (deltaLines !== 0) {
         // Calculate target position
@@ -1700,7 +1783,7 @@ export class Terminal implements ITerminalCore {
         const relativeY = mouseY - scrollbarPadding;
         const scrollFraction = 1 - relativeY / scrollbarTrackHeight; // Inverted: top = 1, bottom = 0
         const targetViewportY = Math.round(scrollFraction * scrollbackLength);
-        this.scrollToLine(Math.max(0, Math.min(scrollbackLength, targetViewportY)));
+        this.scrollToViewportY(targetViewportY);
       }
     }
   };
@@ -1758,7 +1841,7 @@ export class Terminal implements ITerminalCore {
     const viewportDelta = Math.round(scrollFraction * scrollbackLength);
 
     const newViewportY = this.scrollbarDragStartViewportY + viewportDelta;
-    this.scrollToLine(Math.max(0, Math.min(scrollbackLength, newViewportY)));
+    this.scrollToViewportY(newViewportY);
   }
 
   /**
@@ -1937,6 +2020,30 @@ export class Terminal implements ITerminalCore {
     };
   }
 
+  private focused = false;
+
+  private readonly handleFocusIn = (): void => this.setFocused(true);
+
+  private readonly handleFocusOut = (event: FocusEvent): void => {
+    const next = event.relatedTarget;
+    if (next instanceof Node && this.element?.contains(next)) return;
+    this.setFocused(false);
+  };
+
+  private setFocused(focused: boolean): void {
+    if (focused === this.focused) return;
+    this.focused = focused;
+    this.renderer?.setFocused(focused);
+    this.requestFrame();
+  }
+
+  /** Draws one frame, for a change that needs no follow-up frames (a cursor blink). */
+  private requestFrame(): void {
+    if (this.animationFrameId) return;
+    this.idleFrames = Terminal.IDLE_FRAMES_BEFORE_SLEEP;
+    if (this.isOpen && !this.isDisposed) this.startRenderLoop();
+  }
+
   /** Keeps the render loop running for a while; called whenever something may need drawing. */
   public wake(): void {
     this.idleFrames = 0;
@@ -1971,6 +2078,19 @@ export class Terminal implements ITerminalCore {
       (this.buffer as BufferNamespace)._fireBufferChange(this.buffer.active);
     }
     for (const marker of [...this.markers]) marker.refresh();
+    this.writeParsedEmitter.fire();
+    this.wake();
+  }
+
+  private searchHighlights: {
+    list: SearchHighlight[] | null;
+    colors?: SearchHighlightColors;
+  } = { list: null };
+
+  /** Shows search matches on viewport rows (null clears them). Used by SearchAddon. */
+  setSearchHighlights(list: SearchHighlight[] | null, colors?: SearchHighlightColors): void {
+    this.searchHighlights = { list, colors: colors ?? this.searchHighlights.colors };
+    this.renderer?.setSearchHighlights(list, colors);
     this.wake();
   }
 

package/lib/types.ts

@@ -394,7 +394,8 @@ export interface GhosttyTerminalConfig {
   fgColor?: number;
   bgColor?: number;
   cursorColor?: number;
-  palette?: number[];
+  /** The 16 ANSI colors; an undefined entry keeps Ghostty's default. */
+  palette?: (number | undefined)[];
 }
 
 /**

package/lib/webgl-instances.ts

@@ -0,0 +1,69 @@
+/**
+ * Packs the renderer's per-cell instance slots into dense arrays so a frame
+ * draws only the instances that show something. Slots with a zero width are
+ * empty. Rects that continue the previous one on the same row with the same
+ * color are merged into it.
+ */
+
+export const RECT_WORDS = 5;
+export const GLYPH_WORDS = 8;
+
+export interface InstanceArrays {
+  words: Float32Array;
+  bits: Uint32Array;
+}
+
+export function instanceArrays(instances: number, wordsPer: number): InstanceArrays {
+  const buffer = new ArrayBuffer(instances * wordsPer * 4);
+  return { words: new Float32Array(buffer), bits: new Uint32Array(buffer) };
+}
+
+export function compactRects(
+  src: InstanceArrays,
+  first: number,
+  count: number,
+  out: InstanceArrays
+): number {
+  const { words, bits } = src;
+  const outWords = out.words;
+  const outBits = out.bits;
+  let n = 0;
+  let last = -1;
+  for (let i = first; i < first + count; i++) {
+    const at = i * RECT_WORDS;
+    const width = words[at + 2];
+    if (width === 0) continue;
+    if (
+      last >= 0 &&
+      bits[at + 4] === outBits[last + 4] &&
+      words[at + 1] === outWords[last + 1] &&
+      words[at + 3] === outWords[last + 3] &&
+      outWords[last] + outWords[last + 2] === words[at]
+    ) {
+      outWords[last + 2] += width;
+      continue;
+    }
+    last = n * RECT_WORDS;
+    outBits[last] = bits[at];
+    outBits[last + 1] = bits[at + 1];
+    outBits[last + 2] = bits[at + 2];
+    outBits[last + 3] = bits[at + 3];
+    outBits[last + 4] = bits[at + 4];
+    n++;
+  }
+  return n;
+}
+
+export function compactGlyphs(src: InstanceArrays, count: number, out: InstanceArrays): number {
+  const { words, bits } = src;
+  const outBits = out.bits;
+  let n = 0;
+  for (let i = 0; i < count; i++) {
+    const at = i * GLYPH_WORDS;
+    if (words[at + 4] === 0) continue;
+    const to = n * GLYPH_WORDS;
+    for (let w = 0; w < GLYPH_WORDS; w++) outBits[to + w] = bits[at + w];
+    n++;
+  }
+  return n;
+}