@aurigax-ai/ghostty-web 0.1.0 → 0.3.0

package/lib/glyph-ink.ts

@@ -0,0 +1,42 @@
+/**
+ * Finds the pixels a rasterized glyph actually covers, so the renderer draws
+ * a quad over the ink instead of over the whole padded atlas slot.
+ */
+
+const COLORED_SPREAD = 24;
+
+export interface GlyphInk {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  colored: boolean;
+}
+
+/** Bounds of the non-transparent pixels in RGBA `data` (`w` × `h`), or null when none. */
+export function glyphInk(data: Uint8ClampedArray, w: number, h: number): GlyphInk | null {
+  let left = w;
+  let right = -1;
+  let top = h;
+  let bottom = -1;
+  let colored = false;
+  for (let y = 0; y < h; y++) {
+    const row = y * w * 4;
+    for (let x = 0; x < w; x++) {
+      const i = row + x * 4;
+      if (data[i + 3] === 0) continue;
+      if (x < left) left = x;
+      if (x > right) right = x;
+      if (y < top) top = y;
+      bottom = y;
+      if (!colored) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        colored = Math.max(r, g, b) - Math.min(r, g, b) > COLORED_SPREAD;
+      }
+    }
+  }
+  if (right < 0) return null;
+  return { left, top, width: right - left + 1, height: bottom - top + 1, colored };
+}

package/lib/index.ts

@@ -92,7 +92,8 @@ export { Key, KeyAction, Mods } from './types';
 export type { KeyEvent, GhosttyCell, RGB, Cursor, TerminalHandle } from './types';
 
 // Low-level components (for custom integrations)
-export { CanvasRenderer } from './renderer';
+export { CanvasRenderer, TerminalRenderer } from './renderer';
+export { WebglRenderer } from './webgl-renderer';
 export type { RendererOptions, FontMetrics, IRenderable } from './renderer';
 export { InputHandler } from './input-handler';
 export { EventEmitter } from './event-emitter';
@@ -101,6 +102,12 @@ export type { SelectionCoordinates } from './selection-manager';
 
 // Addons
 export { FitAddon } from './addons/fit';
+export { SearchAddon } from './addons/search';
+export type {
+  ISearchDecorationOptions,
+  ISearchOptions,
+  ISearchResultChangeEvent,
+} from './addons/search';
 export type { ITerminalDimensions } from './addons/fit';
 
 // Link providers

package/lib/input-handler.ts

@@ -9,7 +9,6 @@
  * - Emitting data for Terminal to send to PTY
  *
  * Limitations:
- * - Does not handle IME/composition events (CJK input) - to be added later
  * - Captures all keyboard input (preventDefault on everything)
  */
 
@@ -186,6 +185,7 @@ export class InputHandler {
   private keypressListener: ((e: KeyboardEvent) => void) | null = null;
   private pasteListener: ((e: ClipboardEvent) => void) | null = null;
   private beforeInputListener: ((e: InputEvent) => void) | null = null;
+  private containerBeforeInputListener: ((e: InputEvent) => void) | null = null;
   private compositionStartListener: ((e: CompositionEvent) => void) | null = null;
   private compositionUpdateListener: ((e: CompositionEvent) => void) | null = null;
   private compositionEndListener: ((e: CompositionEvent) => void) | null = null;
@@ -195,6 +195,13 @@ export class InputHandler {
   private wheelListener: ((e: WheelEvent) => void) | null = null;
   private isComposing = false;
   private isDisposed = false;
+  /**
+   * On macOS, whether Option acts as Meta (ESC prefix) instead of composing a
+   * character (Option+A types 'å'). Elsewhere Alt always acts as Meta.
+   */
+  macOptionIsMeta = false;
+  private readonly isMac =
+    typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '');
   private mouseButtonsPressed = 0; // Track which buttons are pressed for motion reporting
   private lastKeyDownData: string | null = null;
   private lastKeyDownTime = 0;
@@ -233,6 +240,7 @@ export class InputHandler {
     mouseConfig?: MouseTrackingConfig
   ) {
     this.encoder = ghostty.createKeyEncoder();
+    this.encoder.setOption(KeyEncoderOption.ALT_ESC_PREFIX, true);
     this.container = container;
     this.inputElement = inputElement;
     this.onDataCallback = onData;
@@ -286,6 +294,13 @@ export class InputHandler {
       this.inputElement.addEventListener('beforeinput', this.beforeInputListener);
     }
 
+    if (this.inputElement !== this.container) {
+      this.containerBeforeInputListener = (event: InputEvent) => {
+        if (event.target === this.container) this.handleBeforeInput(event);
+      };
+      this.container.addEventListener('beforeinput', this.containerBeforeInputListener);
+    }
+
     this.compositionStartListener = this.handleCompositionStart.bind(this);
     this.container.addEventListener('compositionstart', this.compositionStartListener);
 
@@ -338,6 +353,18 @@ export class InputHandler {
     return mods;
   }
 
+  /** macOS Option without Ctrl or Cmd composes a character unless Option is Meta. */
+  private optionComposes(event: KeyboardEvent): boolean {
+    return (
+      this.isMac &&
+      !this.macOptionIsMeta &&
+      event.altKey &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      event.key.length === 1
+    );
+  }
+
   /**
    * Check if this is a printable character with no special modifiers
    * @param event - KeyboardEvent
@@ -400,6 +427,13 @@ export class InputHandler {
       return;
     }
 
+    if (this.optionComposes(event)) {
+      event.preventDefault();
+      this.onDataCallback(event.key);
+      this.recordKeyDownData(event.key);
+      return;
+    }
+
     // For printable characters without modifiers, send the character directly
     // This handles: a-z, A-Z (with shift), 0-9, punctuation, etc.
     if (this.isPrintableCharacter(event)) {
@@ -525,7 +559,9 @@ export class InputHandler {
       const utf8 =
         event.key.length === 1 && event.key.charCodeAt(0) < 128
           ? event.key.toLowerCase() // Use lowercase for consistency
-          : undefined;
+          : event.altKey
+            ? baseCharacter(event.code)
+            : undefined;
 
       const encoded = this.encoder.encode({
         action,
@@ -1057,6 +1093,11 @@ export class InputHandler {
       this.beforeInputListener = null;
     }
 
+    if (this.containerBeforeInputListener) {
+      this.container.removeEventListener('beforeinput', this.containerBeforeInputListener);
+      this.containerBeforeInputListener = null;
+    }
+
     if (this.compositionStartListener) {
       this.container.removeEventListener('compositionstart', this.compositionStartListener);
       this.compositionStartListener = null;
@@ -1102,3 +1143,15 @@ export class InputHandler {
     return !this.isDisposed;
   }
 }
+
+/**
+ * The character a letter or digit key types without modifiers, from its
+ * physical code: Alt as Meta sends ESC and this even when the layout makes
+ * Alt+key type something else (macOS Option+A types 'å').
+ */
+function baseCharacter(code: string): string | undefined {
+  const letter = /^Key([A-Z])$/.exec(code);
+  if (letter) return letter[1].toLowerCase();
+  const digit = /^Digit([0-9])$/.exec(code);
+  return digit ? digit[1] : undefined;
+}

package/lib/interfaces.ts

@@ -14,6 +14,26 @@ export interface ITerminalOptions {
   fontSize?: number; // Default: 15
   fontFamily?: string; // Default: 'monospace'
   allowTransparency?: boolean;
+  fontWeight?: FontWeight; // Default: 'normal'
+  fontWeightBold?: FontWeight; // Default: 'bold'
+  lineHeight?: number; // Multiplies the cell height. Default: 1
+  scrollSensitivity?: number; // Multiplies wheel scrolling. Default: 1
+  /** Foreground colors are adjusted to at least this contrast ratio with their background (1 to 21). Default: 1 */
+  minimumContrastRatio?: number;
+  /** On macOS, Option acts as Meta instead of composing characters. Default: false */
+  macOptionIsMeta?: boolean;
+  /**
+   * How the terminal draws, read when it opens. 'webgl' draws on the GPU and
+   * falls back to 'canvas' when WebGL 2 is unavailable or its context is lost.
+   * Default: 'webgl'.
+   */
+  renderer?: 'webgl' | 'canvas';
+
+  /**
+   * What clicking and hovering a web link does (plain URLs and OSC 8
+   * hyperlinks). Without one, Ctrl/Cmd+click opens the link in a new window.
+   */
+  linkHandler?: ILinkHandler | null;
 
   // Phase 1 additions
   convertEol?: boolean; // Convert \n to \r\n (default: false)
@@ -27,6 +47,15 @@ export interface ITerminalOptions {
   ghostty?: Ghostty;
 }
 
+export type FontWeight = 'normal' | 'bold' | number;
+
+/** Handles web links the way xterm.js's `linkHandler` option does. Ranges are 0-based buffer cells. */
+export interface ILinkHandler {
+  activate(event: MouseEvent, text: string, range: IBufferRange): void;
+  hover?(event: MouseEvent, text: string, range: IBufferRange): void;
+  leave?(event: MouseEvent, text: string, range: IBufferRange): void;
+}
+
 export interface ITheme {
   foreground?: string;
   background?: string;

package/lib/providers/osc8-link-provider.ts

@@ -10,7 +10,9 @@
  * so we just need to scan for contiguous regions with the same ID.
  */
 
+import type { ILinkHandler } from '../interfaces';
 import type { IBufferRange, ILink, ILinkProvider } from '../types';
+import { webLink } from './web-link';
 
 /**
  * OSC 8 Hyperlink Provider
@@ -96,16 +98,7 @@ export class OSC8LinkProvider implements ILinkProvider {
           end: { x: endX, y },
         };
 
-        links.push({
-          text: uri,
-          range,
-          activate: (event) => {
-            // Open link if Ctrl/Cmd is pressed
-            if (event.ctrlKey || event.metaKey) {
-              window.open(uri, '_blank', 'noopener,noreferrer');
-            }
-          },
-        });
+        links.push(webLink(uri, range, () => this.terminal.options?.linkHandler ?? undefined));
       }
     }
 
@@ -121,6 +114,7 @@ export class OSC8LinkProvider implements ILinkProvider {
  * Minimal terminal interface required by OSC8LinkProvider
  */
 export interface ITerminalForOSC8Provider {
+  options?: { linkHandler?: ILinkHandler | null };
   buffer: {
     active: {
       length: number;

package/lib/providers/url-regex-provider.ts

@@ -8,7 +8,9 @@
  * take precedence over regex-detected URLs.
  */
 
+import type { ILinkHandler } from '../interfaces';
 import type { ILink, ILinkProvider } from '../types';
+import { webLink } from './web-link';
 
 /**
  * URL Regex Provider
@@ -74,19 +76,13 @@ export class UrlRegexProvider implements ILinkProvider {
 
       // Skip if URL is too short (e.g., just "http://")
       if (url.length > 8) {
-        links.push({
-          text: url,
-          range: {
-            start: { x: startX, y },
-            end: { x: endX, y },
-          },
-          activate: (event) => {
-            // Open link if Ctrl/Cmd is pressed
-            if (event.ctrlKey || event.metaKey) {
-              window.open(url, '_blank', 'noopener,noreferrer');
-            }
-          },
-        });
+        links.push(
+          webLink(
+            url,
+            { start: { x: startX, y }, end: { x: endX, y } },
+            () => this.terminal.options?.linkHandler ?? undefined
+          )
+        );
       }
 
       // Get next match
@@ -130,6 +126,7 @@ export class UrlRegexProvider implements ILinkProvider {
  * Minimal terminal interface required by UrlRegexProvider
  */
 export interface ITerminalForUrlProvider {
+  options?: { linkHandler?: ILinkHandler | null };
   buffer: {
     active: {
       getLine(y: number): IBufferLineForUrlProvider | undefined;

package/lib/providers/web-link.ts

@@ -0,0 +1,35 @@
+import type { ILinkHandler } from '../interfaces';
+import type { IBufferRange, ILink } from '../types';
+
+/**
+ * A link to a URI. With a host link handler the host decides what a click
+ * does (and shows its own hover hint); without one, Ctrl/Cmd+click opens the
+ * URI in a new window.
+ */
+export function webLink(
+  uri: string,
+  range: IBufferRange,
+  handler: () => ILinkHandler | undefined
+): ILink {
+  return {
+    text: uri,
+    range,
+    activate: (event) => {
+      const host = handler();
+      if (host) {
+        host.activate(event, uri, range);
+        return;
+      }
+      if (event.ctrlKey || event.metaKey) {
+        window.open(uri, '_blank', 'noopener,noreferrer');
+      }
+    },
+    hover: (hovered) => {
+      const host = handler();
+      if (!host) return;
+      const event = new MouseEvent(hovered ? 'mouseover' : 'mouseout');
+      if (hovered) host.hover?.(event, uri, range);
+      else host.leave?.(event, uri, range);
+    },
+  };
+}