add terminal integration (#9)

- Created Terminal class integrating all components (ScreenBuffer, VTParser, CanvasRenderer, InputHandler)
- Added public API exports (lib/index.ts)
- Added 36 integration tests (all passing)
- Created full terminal demo (examples/terminal-demo.html)
- Fixed WASM loading with configurable wasmPath option
- Fixed keyboard input with auto-focus support
- Fixed backspace/enter handling with proper local echo
- Fixed character rendering with background clearing and font metrics padding
- All 186 tests passing

Author: sreya

examples/terminal-demo.html

@@ -65,7 +65,13 @@ export class Ghostty {
     } catch (e) {
       // Fall back to fetch (for browser environments)
       const response = await fetch(wasmPath);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch WASM: ${response.status} ${response.statusText}`);
+      }
       wasmBytes = await response.arrayBuffer();
+      if (wasmBytes.byteLength === 0) {
+        throw new Error(`WASM file is empty (0 bytes). Check path: ${wasmPath}`);
+      }
     }
 
     const wasmModule = await WebAssembly.instantiate(wasmBytes, {

lib/ghostty.ts

@@ -0,0 +1,40 @@
+/**
+ * Public API for @cmux/ghostty-terminal
+ * 
+ * Main entry point following xterm.js conventions
+ */
+
+// Main Terminal class
+export { Terminal } from './terminal';
+
+// xterm.js-compatible interfaces
+export type { 
+  ITerminalOptions, 
+  ITheme, 
+  ITerminalAddon,
+  ITerminalCore,
+  IDisposable,
+  IEvent
+} from './interfaces';
+
+// Ghostty WASM components (for advanced usage)
+export { Ghostty, SgrParser, KeyEncoder } from './ghostty';
+export type { 
+  SgrAttribute, 
+  SgrAttributeTag, 
+  KeyEvent, 
+  KeyAction, 
+  Key, 
+  Mods 
+} from './types';
+
+// Buffer types (for addon developers)
+export type { Cell, CellColor, Cursor } from './buffer';
+
+// Low-level components (for custom integrations)
+export { ScreenBuffer } from './buffer';
+export { VTParser } from './vt-parser';
+export { CanvasRenderer } from './renderer';
+export type { RendererOptions, FontMetrics } from './renderer';
+export { InputHandler } from './input-handler';
+export { EventEmitter } from './event-emitter';

lib/index.ts

@@ -192,6 +192,19 @@ export class InputHandler {
    * Attach keyboard event listeners to container
    */
   private attach(): void {
+    // Make container focusable so it can receive keyboard events (browser only)
+    if (typeof this.container.hasAttribute === 'function' && 
+        typeof this.container.setAttribute === 'function') {
+      if (!this.container.hasAttribute('tabindex')) {
+        this.container.setAttribute('tabindex', '0');
+      }
+      
+      // Add visual focus indication (only if style exists - for browser environments)
+      if (this.container.style) {
+        this.container.style.outline = 'none'; // Remove default outline
+      }
+    }
+    
     this.keydownListener = this.handleKeyDown.bind(this);
     this.container.addEventListener('keydown', this.keydownListener);
   }

lib/input-handler.ts

@@ -12,6 +12,7 @@ export interface ITerminalOptions {
   fontSize?: number;                // Default: 15
   fontFamily?: string;              // Default: 'monospace'
   allowTransparency?: boolean;
+  wasmPath?: string;                // Default: '../ghostty-vt.wasm' (relative to examples/)
 }
 
 export interface ITheme {

lib/interfaces.ts

@@ -143,11 +143,14 @@ export class CanvasRenderer {
     const widthMetrics = ctx.measureText('M');
     const width = Math.ceil(widthMetrics.width);
 
-    // Measure height using ascent + descent
+    // Measure height using ascent + descent with padding for glyph overflow
     const ascent = widthMetrics.actualBoundingBoxAscent || this.fontSize * 0.8;
     const descent = widthMetrics.actualBoundingBoxDescent || this.fontSize * 0.2;
-    const height = Math.ceil(ascent + descent);
-    const baseline = Math.ceil(ascent);
+    
+    // Add 2px padding to height to account for glyphs that overflow (like 'f', 'd', 'g', 'p')
+    // and anti-aliasing pixels
+    const height = Math.ceil(ascent + descent) + 2;
+    const baseline = Math.ceil(ascent) + 1; // Offset baseline by half the padding
 
     return { width, height, baseline };
   }
@@ -204,6 +207,10 @@ export class CanvasRenderer {
     // Scale context to match DPI (setting canvas.width/height resets the context)
     this.ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
 
+    // Set text rendering properties for crisp text
+    this.ctx.textBaseline = 'alphabetic';
+    this.ctx.textAlign = 'left';
+    
     // Fill background after resize
     this.ctx.fillStyle = this.theme.background;
     this.ctx.fillRect(0, 0, cssWidth, cssHeight);
@@ -308,11 +315,10 @@ export class CanvasRenderer {
       [fg, bg] = [bg, fg];
     }
 
-    // Draw background
-    if (bg.type !== 'default' || cell.inverse) {
-      this.ctx.fillStyle = this.colorToCSS(bg, true);
-      this.ctx.fillRect(cellX, cellY, cellWidth, this.metrics.height);
-    }
+    // Always draw background to clear previous character
+    // This fixes the issue where overwriting characters leaves remnants
+    this.ctx.fillStyle = this.colorToCSS(bg, true);
+    this.ctx.fillRect(cellX, cellY, cellWidth, this.metrics.height);
 
     // Skip rendering if invisible
     if (cell.invisible) {