@dkkoval/tui-preview 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,363 +1,2 @@
-var H = Object.defineProperty;
-var $ = (e, t, n) => t in e ? H(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var k = (e, t, n) => $(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsxs as D, jsx as L } from "react/jsx-runtime";
-import { useMemo as Y, useRef as M, useState as R, useEffect as T } from "react";
-let p = null;
-function q() {
-  return p || (p = import("./ghostty-web-BfBVpf8G.js").then(async (e) => (await e.init(), e))), p;
-}
-const S = { cols: 80, rows: 24 }, P = {}, Z = [];
-function J(e) {
-  return "wasm" in e;
-}
-function I(e) {
-  const t = e ?? Z;
-  return typeof t == "function" ? t : () => t;
-}
-function K(e) {
-  return e.cols !== void 0 || e.rows !== void 0 ? {
-    fit: "none",
-    size: {
-      cols: Math.max(1, e.cols ?? S.cols),
-      rows: Math.max(1, e.rows ?? S.rows)
-    }
-  } : { fit: "container", size: S };
-}
-let W = !1;
-function X(e) {
-  !e || W || (W = !0, console.warn(
-    "[tui-preview] Legacy props (`app`, `args`, `cols`, `rows`, `fontSize`, `fontFamily`, `theme`) are deprecated. Use `wasm`, `argv`, `fit`, `size`, and `terminal`."
-  ));
-}
-function tt(e) {
-  var i, s, r, o, c, u, a, h, m;
-  if (J(e)) {
-    const v = e.fit ?? (e.size ? "none" : "container"), w = v === "none" ? {
-      cols: Math.max(1, ((i = e.size) == null ? void 0 : i.cols) ?? S.cols),
-      rows: Math.max(1, ((s = e.size) == null ? void 0 : s.rows) ?? S.rows)
-    } : {
-      cols: Math.max(1, ((r = e.size) == null ? void 0 : r.cols) ?? S.cols),
-      rows: Math.max(1, ((o = e.size) == null ? void 0 : o.rows) ?? S.rows)
-    }, y = e.mode ?? "terminal";
-    return {
-      wasm: e.wasm,
-      env: e.env ?? P,
-      interactive: y === "static" ? !1 : e.interactive ?? !0,
-      mode: y,
-      fit: v,
-      size: w,
-      terminal: {
-        fontSize: ((c = e.terminal) == null ? void 0 : c.fontSize) ?? 14,
-        fontFamily: ((u = e.terminal) == null ? void 0 : u.fontFamily) ?? "monospace",
-        cursorBlink: ((a = e.terminal) == null ? void 0 : a.cursorBlink) ?? !0,
-        convertEol: ((h = e.terminal) == null ? void 0 : h.convertEol) ?? !0,
-        theme: (m = e.terminal) == null ? void 0 : m.theme
-      },
-      resolveArgv: I(e.argv),
-      onExit: e.onExit,
-      onError: e.onError,
-      onStatusChange: e.onStatusChange,
-      usedLegacyProps: !1
-    };
-  }
-  const { fit: t, size: n } = K(e);
-  return {
-    wasm: e.app,
-    env: e.env ?? P,
-    interactive: e.interactive ?? !0,
-    mode: "terminal",
-    fit: t,
-    size: n,
-    terminal: {
-      fontSize: e.fontSize ?? 14,
-      fontFamily: e.fontFamily ?? "monospace",
-      cursorBlink: !0,
-      convertEol: !0,
-      theme: e.theme
-    },
-    resolveArgv: I(e.args),
-    onExit: e.onExit,
-    onError: e.onError,
-    onStatusChange: e.onStatusChange,
-    usedLegacyProps: !0
-  };
-}
-const d = 0, et = 6, x = 8, nt = 0, O = 1, rt = 2;
-class it {
-  constructor(t) {
-    k(this, "inputQueue", []);
-    k(this, "memory");
-    this.opts = t;
-  }
-  /** Push keyboard data from the terminal into the app's stdin */
-  pushInput(t) {
-    const n = typeof t == "string" ? new TextEncoder().encode(t) : t;
-    this.inputQueue.push(n);
-  }
-  /** Attach the WASM instance's memory after instantiation */
-  attachMemory(t) {
-    this.memory = t;
-  }
-  view() {
-    return new DataView(this.memory.buffer);
-  }
-  u8() {
-    return new Uint8Array(this.memory.buffer);
-  }
-  // ── WASI imports object ────────────────────────────────────────────────
-  get imports() {
-    return {
-      args_sizes_get: (t, n) => {
-        const { args: i } = this.opts, s = new TextEncoder(), r = i.reduce((o, c) => o + s.encode(c).length + 1, 0);
-        return this.view().setUint32(t, i.length, !0), this.view().setUint32(n, r, !0), d;
-      },
-      args_get: (t, n) => {
-        const i = new TextEncoder(), s = this.u8(), r = this.view();
-        let o = n;
-        return this.opts.args.forEach((c, u) => {
-          const a = i.encode(c);
-          s.set(a, o), s[o + a.length] = 0, r.setUint32(t + u * 4, o, !0), o += a.length + 1;
-        }), d;
-      },
-      environ_sizes_get: (t, n) => {
-        const i = this.envEntries(), s = new TextEncoder(), r = i.reduce((o, c) => o + s.encode(c).length + 1, 0);
-        return this.view().setUint32(t, i.length, !0), this.view().setUint32(n, r, !0), d;
-      },
-      environ_get: (t, n) => {
-        const i = new TextEncoder(), s = this.u8(), r = this.view();
-        let o = n;
-        return this.envEntries().forEach((c, u) => {
-          const a = i.encode(c);
-          s.set(a, o), s[o + a.length] = 0, r.setUint32(t + u * 4, o, !0), o += a.length + 1;
-        }), d;
-      },
-      fd_write: (t, n, i, s) => {
-        if (t !== O && t !== rt) return x;
-        const r = this.view(), o = this.u8();
-        let c = 0;
-        const u = [];
-        for (let m = 0; m < i; m++) {
-          const v = r.getUint32(n + m * 8, !0), w = r.getUint32(n + m * 8 + 4, !0);
-          u.push(o.slice(v, v + w)), c += w;
-        }
-        const a = new Uint8Array(c);
-        let h = 0;
-        for (const m of u)
-          a.set(m, h), h += m.length;
-        return t === O ? this.opts.stdout(a) : this.opts.stderr(a), r.setUint32(s, c, !0), d;
-      },
-      fd_read: (t, n, i, s) => {
-        if (t !== nt) return x;
-        const r = this.inputQueue.shift();
-        if (!r) return et;
-        const o = this.view(), c = this.u8();
-        let u = 0;
-        for (let a = 0; a < i && u < r.length; a++) {
-          const h = o.getUint32(n + a * 8, !0), m = o.getUint32(n + a * 8 + 4, !0), v = Math.min(m, r.length - u);
-          c.set(r.subarray(u, u + v), h), u += v;
-        }
-        return o.setUint32(s, u, !0), d;
-      },
-      poll_oneoff: (t, n, i, s) => {
-        const r = this.view();
-        let o = 0;
-        for (let c = 0; c < i; c++) {
-          const u = t + c * 48, a = r.getUint8(u + 8);
-          if (a === 0 && this.inputQueue.length > 0) {
-            const h = n + o * 32;
-            r.setBigUint64(h, r.getBigUint64(u, !0), !0), r.setUint16(h + 8, 0, !0), r.setUint8(h + 10, a), o++;
-          }
-        }
-        return r.setUint32(s, o, !0), d;
-      },
-      proc_exit: (t) => {
-        throw this.opts.onExit(t), new Q(t);
-      },
-      random_get: (t, n) => (crypto.getRandomValues(new Uint8Array(this.memory.buffer, t, n)), d),
-      // Stubs for calls TUI apps may make but we don't need to implement.
-      fd_close: () => d,
-      fd_seek: () => d,
-      fd_fdstat_get: (t, n) => (this.view().setUint8(n, t <= 2 ? 2 : 0), d),
-      fd_prestat_get: () => x,
-      fd_prestat_dir_name: () => x,
-      path_open: () => x,
-      sched_yield: () => d,
-      clock_time_get: (t, n, i) => {
-        const s = BigInt(Date.now()) * 1000000n;
-        return this.view().setBigUint64(i, s, !0), d;
-      }
-    };
-  }
-  envEntries() {
-    const t = {
-      TERM: "xterm-256color",
-      COLORTERM: "truecolor",
-      ...this.opts.env
-    };
-    return Object.entries(t).map(([n, i]) => `${n}=${i}`);
-  }
-}
-class Q extends Error {
-  constructor(t) {
-    super(`WASI exit: ${t}`), this.code = t;
-  }
-}
-const N = /* @__PURE__ */ new Map();
-async function ot(e, t) {
-  const n = e.toString();
-  let i = N.get(n);
-  if (!i) {
-    const u = await (await fetch(e)).arrayBuffer();
-    i = await WebAssembly.compile(u), N.set(n, i);
-  }
-  const s = {
-    wasi_snapshot_preview1: t.imports
-  }, r = await WebAssembly.instantiate(i, s);
-  t.attachMemory(r.exports.memory);
-  const o = r.exports._start;
-  if (!o) throw new Error("WASM module has no _start export");
-  return {
-    run: async () => {
-      try {
-        o();
-      } catch (c) {
-        if (!(c instanceof Q)) throw c;
-      }
-    }
-  };
-}
-function ut(e) {
-  var v;
-  const t = Y(() => tt(e), [e]), n = M(null), i = M(null), s = M(null), [r, o] = R("loading"), [c, u] = R(""), a = M(null), [h, m] = R(t.size);
-  return T(() => {
-    X(t.usedLegacyProps);
-  }, [t.usedLegacyProps]), T(() => {
-    m(t.size);
-  }, [t.fit, t.size.cols, t.size.rows]), T(() => {
-    if (t.fit !== "container" || !n.current) return;
-    const w = new ResizeObserver(([y]) => {
-      var z, b;
-      const { width: _, height: E } = y.contentRect;
-      if (_ > 0 && E > 0) {
-        const f = ((z = a.current) == null ? void 0 : z.w) ?? t.terminal.fontSize * 0.6, l = ((b = a.current) == null ? void 0 : b.h) ?? t.terminal.fontSize * 1.2;
-        m({
-          cols: Math.max(1, Math.floor(_ / f)),
-          rows: Math.max(1, Math.floor(E / l))
-        });
-      }
-    });
-    return w.observe(n.current), () => w.disconnect();
-  }, [t.fit, t.terminal.fontSize]), T(() => {
-    if (!h || !i.current) return;
-    let w = !1;
-    const y = i.current, _ = h, E = (f) => {
-      var l;
-      o(f), (l = t.onStatusChange) == null || l.call(t, f);
-    }, z = (f) => {
-      var l;
-      E("error"), u(f instanceof Error ? f.message : String(f)), (l = t.onError) == null || l.call(t, f);
-    };
-    E("loading"), u("");
-    async function b() {
-      try {
-        const f = await q();
-        if (w) return;
-        y.innerHTML = "";
-        const l = new f.Terminal({
-          cols: _.cols,
-          rows: _.rows,
-          fontSize: t.terminal.fontSize,
-          fontFamily: t.terminal.fontFamily,
-          theme: t.terminal.theme,
-          disableStdin: !t.interactive,
-          cursorBlink: t.terminal.cursorBlink,
-          convertEol: t.terminal.convertEol
-        });
-        s.current = l, l.open(y), t.mode === "static" && l.write("\x1B[?25l");
-        let A = l.cols, U = l.rows;
-        if (t.fit === "container") {
-          const g = new f.FitAddon();
-          l.loadAddon(g), g.fit(), A = l.cols, U = l.rows, n.current && A > 0 && U > 0 && (a.current = {
-            w: n.current.clientWidth / A,
-            h: n.current.clientHeight / U
-          });
-        }
-        const V = t.resolveArgv({ cols: A, rows: U }), F = new TextDecoder(), B = new it({
-          args: [t.wasm.toString(), ...V],
-          env: t.env,
-          stdout: (g) => l.write(F.decode(g)),
-          stderr: (g) => l.write(F.decode(g)),
-          onExit: (g) => {
-            var C;
-            w || (E("exited"), (C = t.onExit) == null || C.call(t, g));
-          }
-        });
-        t.interactive && l.onData((g) => B.pushInput(g));
-        const G = await ot(t.wasm, B);
-        if (w) return;
-        E("running"), queueMicrotask(() => {
-          w || G.run().catch((g) => {
-            w || z(g);
-          });
-        });
-      } catch (f) {
-        w || z(f);
-      }
-    }
-    return b(), () => {
-      var f;
-      w = !0, (f = s.current) == null || f.dispose(), s.current = null;
-    };
-  }, [
-    t.mode,
-    h,
-    t.wasm,
-    t.resolveArgv,
-    t.env,
-    t.fit,
-    t.interactive,
-    t.onExit,
-    t.onError,
-    t.onStatusChange,
-    t.terminal.fontSize,
-    t.terminal.fontFamily,
-    t.terminal.theme,
-    t.terminal.cursorBlink,
-    t.terminal.convertEol
-  ]), /* @__PURE__ */ D(
-    "div",
-    {
-      ref: n,
-      className: e.className,
-      style: {
-        position: "relative",
-        display: "inline-block",
-        background: ((v = t.terminal.theme) == null ? void 0 : v.background) ?? "#1a1b26",
-        borderRadius: 6,
-        overflow: "hidden",
-        ...e.style
-      },
-      children: [
-        /* @__PURE__ */ L("div", { ref: i, style: { display: r === "error" ? "none" : void 0 } }),
-        r === "loading" && /* @__PURE__ */ L("div", { style: j, children: "Loading…" }),
-        r === "error" && /* @__PURE__ */ D("div", { style: { ...j, color: "#f7768e" }, children: [
-          "Error: ",
-          c
-        ] })
-      ]
-    }
-  );
-}
-const j = {
-  padding: "1rem",
-  fontFamily: "monospace",
-  fontSize: 14,
-  color: "#a9b1d6"
-};
-export {
-  ut as TuiPreview,
-  it as WasiBridge,
-  Q as WasiExitError,
-  ot as instantiateApp
-};
+export { TuiPreview } from "./TuiPreview.js";
+export { WasiBridge, WasiExitError, instantiateApp } from "./core/wasi.js";

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,7 @@
 {
   "name": "@dkkoval/tui-preview",
-  "version": "0.1.1",
-  "description": "React component for embedding interactive TUI apps via ghostty-web",
+  "version": "0.2.1",
+  "description": "React component for embedding interactive TUI apps via libghostty",
   "repository": {
     "type": "git",
     "url": "https://github.com/dmk/tui-preview"
@@ -13,14 +13,12 @@
   "type": "module",
   "license": "MIT",
   "sideEffects": false,
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./core": {
       "types": "./dist/core/index.d.ts",
@@ -32,20 +30,20 @@
   ],
   "scripts": {
     "clean": "rm -rf dist dist-example",
+    "build:ghostty-wasm": "./scripts/build-libghostty-wasm.sh",
     "dev": "vite example",
+    "build:examples": "./scripts/build-examples-wasm.sh",
     "build": "vite build",
-    "build:lib": "tsc -p tsconfig.json && vite build --mode lib",
+    "build:lib": "tsc -p tsconfig.json",
+    "prepack": "tsc -p tsconfig.json && ./scripts/build-libghostty-wasm.sh dist/core/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 && node --test tests/*.test.mjs",
+    "check": "tsc --noEmit && tsc -p tsconfig.json && 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/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;
-}