feat: add xterm-zerolag-input standalone library

Extract Claudeman's local echo overlay into a reusable xterm.js addon at packages/xterm-zerolag-input/. Provides instant keystroke feedback via a DOM overlay, eliminating perceived input latency over high-RTT connections (SSH, mobile, cloud IDEs). - Zero dependencies, compatible with xterm v5.x and @xterm/xterm v5.4+ - Configurable prompt detection (character, regex, or custom function) - Flushed text tracking for tab-switch / deferred echo scenarios - Per-character grid-aligned rendering matching xterm's canvas output - 56 tests passing (prompt finder, overlay renderer, full addon lifecycle) - Dual CJS/ESM build with full TypeScript declarations Claudeman source is unchanged — migration to consume this lib is a separate follow-up. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-10-09 08:59:40 +02:00 · 2026-02-22 10:14:37 +01:00
parent 4aa38c1bbb
commit d14ac9de65
16 changed files with 2178 additions and 0 deletions
@@ -0,0 +1,96 @@
+import type { RenderParams, FontStyle } from './types.js';
+
+/**
+ * Render the overlay content into the container element.
+ *
+ * Creates per-character `<span>` elements positioned on an exact grid
+ * matching xterm.js's canvas renderer. This avoids sub-pixel drift that
+ * occurs with normal DOM text flow.
+ */
+export function renderOverlay(container: HTMLDivElement, params: RenderParams): void {
+    const { lines, startCol, totalCols, cellW, cellH, promptRow, font, showCursor, cursorColor } = params;
+
+    // Position container at prompt row
+    container.style.left = '0px';
+    container.style.top = (promptRow * cellH) + 'px';
+
+    // Clear and rebuild (typically 1-3 line divs, negligible cost)
+    container.innerHTML = '';
+    const fullWidthPx = totalCols * cellW;
+
+    for (let i = 0; i < lines.length; i++) {
+        const leftPx = i === 0 ? startCol * cellW : 0;
+        const widthPx = i === 0 ? (fullWidthPx - leftPx) : fullWidthPx;
+        const topPx = i * cellH;
+        const lineEl = makeLine(lines[i], leftPx, topPx, widthPx, cellH, cellW, font);
+        container.appendChild(lineEl);
+    }
+
+    // Block cursor at end of last line
+    if (showCursor) {
+        const lastLine = lines[lines.length - 1];
+        const lastLineLeft = lines.length === 1 ? startCol : 0;
+        const cursorCol = lastLineLeft + lastLine.length;
+        if (cursorCol < totalCols) {
+            const cursor = document.createElement('span');
+            cursor.style.cssText = 'position:absolute;display:inline-block';
+            cursor.style.left = (cursorCol * cellW) + 'px';
+            cursor.style.top = ((lines.length - 1) * cellH) + 'px';
+            cursor.style.width = cellW + 'px';
+            cursor.style.height = cellH + 'px';
+            cursor.style.backgroundColor = cursorColor;
+            container.appendChild(cursor);
+        }
+    }
+
+    container.style.display = '';
+}
+
+/**
+ * Create a styled line `<div>` with per-character grid positioning.
+ *
+ * Each character gets its own `<span>` placed at `i * cellW` pixels.
+ * This matches xterm's canvas renderer where each glyph occupies exactly
+ * one cell width, regardless of the actual glyph metrics.
+ */
+function makeLine(
+    text: string,
+    leftPx: number,
+    topPx: number,
+    widthPx: number,
+    cellH: number,
+    cellW: number,
+    font: FontStyle,
+): HTMLDivElement {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;pointer-events:none';
+    el.style.backgroundColor = font.backgroundColor;
+    el.style.left = leftPx + 'px';
+    el.style.top = topPx + 'px';
+    el.style.width = widthPx + 'px';
+    el.style.height = (cellH + 1) + 'px';
+    el.style.lineHeight = cellH + 'px';
+
+    for (let i = 0; i < text.length; i++) {
+        const span = document.createElement('span');
+        // Match xterm.js canvas text rendering:
+        // - antialiased smoothing (canvas uses grayscale, not LCD subpixel)
+        // - geometricPrecision for consistent glyph sizing
+        // - no ligatures (canvas renders each glyph independently)
+        span.style.cssText =
+            'position:absolute;display:inline-block;text-align:center;pointer-events:none;' +
+            '-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;' +
+            "text-rendering:geometricPrecision;font-feature-settings:'liga' 0,'calt' 0";
+        span.style.left = (i * cellW) + 'px';
+        span.style.width = cellW + 'px';
+        span.style.fontFamily = font.fontFamily;
+        span.style.fontSize = font.fontSize;
+        span.style.fontWeight = font.fontWeight;
+        span.style.color = font.color;
+        if (font.letterSpacing) span.style.letterSpacing = font.letterSpacing;
+        span.textContent = text[i];
+        el.appendChild(span);
+    }
+
+    return el;
+}