@dkkoval/tui-preview 0.1.0 → 0.2.0

package/dist/types.d.ts

@@ -4,17 +4,17 @@ export interface TuiRuntimeSize {
 }
 export type TuiArgv = string[] | ((size: TuiRuntimeSize) => string[]);
 export type TuiFitMode = "container" | "none";
-export type TuiRenderMode = "terminal" | "static";
+export type TuiRenderMode = "interactive" | "static";
 export type TuiPreviewStatus = "loading" | "running" | "exited" | "error";
 export interface TuiTerminalOptions {
     /** Font size in pixels. Default: 14 */
     fontSize?: number;
     /** CSS font family. Default: monospace */
     fontFamily?: string;
-    /** ghostty-web theme overrides */
+    /** Terminal color theme overrides */
     theme?: Partial<GhosttyTheme>;
-    /** Cursor blinking. Default: true */
-    cursorBlink?: boolean;
+    /** URL to libghostty-vt wasm. Default: "/ghostty-vt.wasm" */
+    wasmUrl?: string | URL;
     /** Convert LF to CRLF. Default: true */
     convertEol?: boolean;
 }
@@ -37,12 +37,7 @@ export interface TuiPreviewModernProps extends TuiPreviewCommonProps {
     wasm: string | URL;
     /** CLI argv (without argv[0]), static or size-aware */
     argv?: TuiArgv;
-    /**
-     * Render mode.
-     * - `"terminal"` (default): full ghostty-web terminal, supports interactive apps.
-     * - `"static"`: runs the app once, captures stdout, renders ANSI output as HTML.
-     *   No cursor, no input. Ideal for non-interactive previews in docs.
-     */
+    /** Render mode. Default: "interactive" */
     mode?: TuiRenderMode;
     /** "container" auto-fit or "none" fixed size. Default: "container" */
     fit?: TuiFitMode;
@@ -51,20 +46,7 @@ export interface TuiPreviewModernProps extends TuiPreviewCommonProps {
     /** Terminal renderer options */
     terminal?: TuiTerminalOptions;
 }
-/**
- * Legacy API retained for backwards compatibility.
- * Prefer `TuiPreviewModernProps`.
- */
-export interface TuiPreviewLegacyProps extends TuiPreviewCommonProps {
-    app: string | URL;
-    args?: TuiArgv;
-    cols?: number;
-    rows?: number;
-    fontSize?: number;
-    fontFamily?: string;
-    theme?: Partial<GhosttyTheme>;
-}
-export type TuiPreviewProps = TuiPreviewModernProps | TuiPreviewLegacyProps;
+export type TuiPreviewProps = TuiPreviewModernProps;
 export interface GhosttyTheme {
     background: string;
     foreground: string;
@@ -102,12 +84,12 @@ export interface ResolvedTuiPreviewOptions {
     mode: TuiRenderMode;
     fit: TuiFitMode;
     size: TuiRuntimeSize;
-    terminal: Required<Omit<TuiTerminalOptions, "theme">> & {
+    terminal: Required<Omit<TuiTerminalOptions, "theme" | "wasmUrl">> & {
         theme?: Partial<GhosttyTheme>;
+        wasmUrl?: string | URL;
     };
     resolveArgv: (size: TuiRuntimeSize) => string[];
     onExit?: (code: number) => void;
     onError?: (error: unknown) => void;
     onStatusChange?: (status: TuiPreviewStatus) => void;
-    usedLegacyProps: boolean;
 }

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@dkkoval/tui-preview",
-  "version": "0.1.0",
-  "description": "React component for embedding interactive TUI apps via ghostty-web",
+  "version": "0.2.0",
+  "description": "React component for embedding interactive TUI apps via libghostty",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dmk/tui-preview"
+  },
+  "homepage": "https://github.com/dmk/tui-preview#readme",
+  "bugs": {
+    "url": "https://github.com/dmk/tui-preview/issues"
+  },
   "type": "module",
   "license": "MIT",
   "sideEffects": false,
@@ -24,20 +32,19 @@
   ],
   "scripts": {
     "clean": "rm -rf dist dist-example",
+    "build:ghostty-wasm": "./scripts/build-libghostty-wasm.sh",
     "dev": "vite example",
     "build": "vite build",
     "build:lib": "tsc -p tsconfig.json && vite build --mode lib",
+    "prepack": "tsc -p tsconfig.json && vite build --mode lib && ./scripts/build-libghostty-wasm.sh dist/ghostty-vt.wasm",
     "typecheck": "tsc --noEmit",
-    "test": "npm run -s build:lib && node --test tests/*.test.mjs",
-    "check": "npm run typecheck && npm run test"
+    "test": "tsc -p tsconfig.json && vite build --mode lib && node --test tests/*.test.mjs",
+    "check": "tsc --noEmit && tsc -p tsconfig.json && vite build --mode lib && node --test tests/*.test.mjs"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "dependencies": {
-    "ghostty-web": "^0.4.0"
-  },
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",

package/dist/__vite-browser-external-2447137e-BcPniuRQ.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={};exports.default=e;

package/dist/__vite-browser-external-2447137e-DYxpcVy9.js

@@ -1,4 +0,0 @@
-const e = {};
-export {
-  e as default
-};

package/dist/core/ansi.d.ts

@@ -1,15 +0,0 @@
-/**
- * Minimal ANSI SGR → HTML converter.
- *
- * Handles the subset used by typical wasm32-wasi TUI apps:
- *   - Reset (0)
- *   - Bold, italic, underline (1/3/4 and their off codes)
- *   - Standard 16-color fg/bg (30–37, 39, 40–47, 49, 90–97, 100–107)
- *   - 256-color fg/bg (38;5;N / 48;5;N)
- *   - 24-bit truecolor fg/bg (38;2;R;G;B / 48;2;R;G;B)
- *
- * Non-SGR CSI sequences (cursor movement etc.) are silently dropped,
- * which is correct for static capture where only the final text matters.
- */
-/** Convert ANSI escape codes to an HTML string of styled `<span>` elements. */
-export declare function ansiToHtml(input: string): string;

package/dist/core/ansi.js

@@ -1,181 +0,0 @@
-/**
- * Minimal ANSI SGR → HTML converter.
- *
- * Handles the subset used by typical wasm32-wasi TUI apps:
- *   - Reset (0)
- *   - Bold, italic, underline (1/3/4 and their off codes)
- *   - Standard 16-color fg/bg (30–37, 39, 40–47, 49, 90–97, 100–107)
- *   - 256-color fg/bg (38;5;N / 48;5;N)
- *   - 24-bit truecolor fg/bg (38;2;R;G;B / 48;2;R;G;B)
- *
- * Non-SGR CSI sequences (cursor movement etc.) are silently dropped,
- * which is correct for static capture where only the final text matters.
- */
-// Standard xterm 16-color palette
-const ANSI16 = [
-    "#000000", "#cd0000", "#00cd00", "#cdcd00",
-    "#0000ee", "#cd00cd", "#00cdcd", "#e5e5e5",
-    "#7f7f7f", "#ff0000", "#00ff00", "#ffff00",
-    "#5c5cff", "#ff00ff", "#00ffff", "#ffffff",
-];
-function color256(n) {
-    if (n < 16)
-        return ANSI16[n];
-    if (n < 232) {
-        const i = n - 16;
-        const r = Math.floor(i / 36);
-        const g = Math.floor((i % 36) / 6);
-        const b = i % 6;
-        const v = (x) => (x === 0 ? 0 : x * 40 + 55);
-        return `rgb(${v(r)},${v(g)},${v(b)})`;
-    }
-    const grey = (n - 232) * 10 + 8;
-    return `rgb(${grey},${grey},${grey})`;
-}
-function escHtml(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-/** Convert ANSI escape codes to an HTML string of styled `<span>` elements. */
-export function ansiToHtml(input) {
-    // Current SGR state
-    let fg = null;
-    let bg = null;
-    let bold = false;
-    let italic = false;
-    let underline = false;
-    const result = [];
-    let buf = "";
-    let bufStyle = "";
-    function buildStyle() {
-        const parts = [];
-        if (fg)
-            parts.push(`color:${fg}`);
-        if (bg)
-            parts.push(`background-color:${bg}`);
-        if (bold)
-            parts.push("font-weight:bold");
-        if (italic)
-            parts.push("font-style:italic");
-        if (underline)
-            parts.push("text-decoration:underline");
-        return parts.join(";");
-    }
-    function flush() {
-        if (!buf)
-            return;
-        result.push(bufStyle ? `<span style="${bufStyle}">${escHtml(buf)}</span>` : escHtml(buf));
-        buf = "";
-    }
-    function applySgr(params) {
-        flush();
-        let i = 0;
-        while (i < params.length) {
-            const p = params[i];
-            if (p === 0) {
-                fg = null;
-                bg = null;
-                bold = false;
-                italic = false;
-                underline = false;
-            }
-            else if (p === 1) {
-                bold = true;
-            }
-            else if (p === 22) {
-                bold = false;
-            }
-            else if (p === 3) {
-                italic = true;
-            }
-            else if (p === 23) {
-                italic = false;
-            }
-            else if (p === 4) {
-                underline = true;
-            }
-            else if (p === 24) {
-                underline = false;
-            }
-            else if (p >= 30 && p <= 37) {
-                fg = ANSI16[p - 30];
-            }
-            else if (p === 38) {
-                if (params[i + 1] === 2 && i + 4 < params.length) {
-                    fg = `rgb(${params[i + 2]},${params[i + 3]},${params[i + 4]})`;
-                    i += 4;
-                }
-                else if (params[i + 1] === 5 && i + 2 < params.length) {
-                    fg = color256(params[i + 2]);
-                    i += 2;
-                }
-            }
-            else if (p === 39) {
-                fg = null;
-            }
-            else if (p >= 40 && p <= 47) {
-                bg = ANSI16[p - 40];
-            }
-            else if (p === 48) {
-                if (params[i + 1] === 2 && i + 4 < params.length) {
-                    bg = `rgb(${params[i + 2]},${params[i + 3]},${params[i + 4]})`;
-                    i += 4;
-                }
-                else if (params[i + 1] === 5 && i + 2 < params.length) {
-                    bg = color256(params[i + 2]);
-                    i += 2;
-                }
-            }
-            else if (p === 49) {
-                bg = null;
-            }
-            else if (p >= 90 && p <= 97) {
-                fg = ANSI16[p - 82];
-            }
-            else if (p >= 100 && p <= 107) {
-                bg = ANSI16[p - 92];
-            }
-            i++;
-        }
-        bufStyle = buildStyle();
-    }
-    let i = 0;
-    while (i < input.length) {
-        const ch = input[i];
-        if (ch === "\x1b" && i + 1 < input.length && input[i + 1] === "[") {
-            // CSI sequence: find the final byte (0x40–0x7e)
-            const seqStart = i + 2;
-            let end = seqStart;
-            while (end < input.length && (input.charCodeAt(end) < 0x40 || input.charCodeAt(end) > 0x7e)) {
-                end++;
-            }
-            if (end < input.length) {
-                if (input[end] === "m") {
-                    const seq = input.slice(seqStart, end);
-                    const params = seq ? seq.split(";").map((s) => parseInt(s, 10) || 0) : [0];
-                    applySgr(params);
-                }
-                // Non-SGR CSI (cursor movement etc.) — silently skip
-                i = end + 1;
-            }
-            else {
-                // Incomplete sequence at end of input — skip escape char
-                i++;
-            }
-        }
-        else if (ch === "\r") {
-            i++;
-        }
-        else {
-            // Regular character — append, flushing if style changed
-            const style = buildStyle();
-            if (style !== bufStyle) {
-                flush();
-                bufStyle = style;
-            }
-            buf += ch;
-            i++;
-        }
-    }
-    flush();
-    return result.join("");
-}

package/dist/core/ghostty.d.ts

@@ -1,2 +0,0 @@
-/** Load ghostty-web lazily to avoid SSR issues in host apps. */
-export declare function loadGhostty(): Promise<typeof import("ghostty-web")>;

package/dist/core/ghostty.js

@@ -1,11 +0,0 @@
-let ghosttyReady = null;
-/** Load ghostty-web lazily to avoid SSR issues in host apps. */
-export function loadGhostty() {
-    if (!ghosttyReady) {
-        ghosttyReady = import("ghostty-web").then(async (mod) => {
-            await mod.init();
-            return mod;
-        });
-    }
-    return ghosttyReady;
-}