@dkkoval/tui-preview 0.1.0 → 0.1.1

package/dist/TuiPreview.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ansiToHtml } from "./core/ansi.js";
 import { loadGhostty } from "./core/ghostty.js";
 import { resolveTuiPreviewProps, warnLegacyPropsOnce } from "./core/normalize.js";
 import { WasiBridge, instantiateApp } from "./core/wasi.js";
@@ -13,19 +12,13 @@ export function TuiPreview(props) {
     const [errorMsg, setErrorMsg] = useState("");
     const cellSizeRef = useRef(null);
     const [termSize, setTermSize] = useState(resolved.size);
-    const [staticHtml, setStaticHtml] = useState(null);
     useEffect(() => {
         warnLegacyPropsOnce(resolved.usedLegacyProps);
     }, [resolved.usedLegacyProps]);
-    // ── Terminal mode effects ────────────────────────────────────────────────
     useEffect(() => {
-        if (resolved.mode !== "terminal")
-            return;
         setTermSize(resolved.size);
-    }, [resolved.mode, resolved.fit, resolved.size.cols, resolved.size.rows]);
+    }, [resolved.fit, resolved.size.cols, resolved.size.rows]);
     useEffect(() => {
-        if (resolved.mode !== "terminal")
-            return;
         if (resolved.fit !== "container")
             return;
         if (!wrapperRef.current)
@@ -43,10 +36,8 @@ export function TuiPreview(props) {
         });
         observer.observe(wrapperRef.current);
         return () => observer.disconnect();
-    }, [resolved.mode, resolved.fit, resolved.terminal.fontSize]);
+    }, [resolved.fit, resolved.terminal.fontSize]);
     useEffect(() => {
-        if (resolved.mode !== "terminal")
-            return;
         if (!termSize || !containerRef.current)
             return;
         let cancelled = false;
@@ -81,6 +72,10 @@ export function TuiPreview(props) {
                 });
                 termRef.current = term;
                 term.open(container);
+                // Static mode: hide cursor via DEC PM — app output only, no cursor chrome.
+                if (resolved.mode === "static") {
+                    term.write("\x1b[?25l");
+                }
                 let appCols = term.cols;
                 let appRows = term.rows;
                 if (resolved.fit === "container") {
@@ -156,94 +151,10 @@ export function TuiPreview(props) {
         resolved.terminal.cursorBlink,
         resolved.terminal.convertEol,
     ]);
-    // ── Static mode effect ───────────────────────────────────────────────────
-    useEffect(() => {
-        if (resolved.mode !== "static")
-            return;
-        let cancelled = false;
-        const setStatusAndNotify = (next) => {
-            setStatus(next);
-            resolved.onStatusChange?.(next);
-        };
-        setStatusAndNotify("loading");
-        setErrorMsg("");
-        setStaticHtml(null);
-        async function run() {
-            try {
-                const decoder = new TextDecoder();
-                const chunks = [];
-                const bridge = new WasiBridge({
-                    args: [resolved.wasm.toString(), ...resolved.resolveArgv(resolved.size)],
-                    env: resolved.env,
-                    stdout: (data) => chunks.push(new Uint8Array(data)),
-                    stderr: () => { },
-                    onExit: (code) => {
-                        if (!cancelled) {
-                            const total = chunks.reduce((n, c) => n + c.length, 0);
-                            const merged = new Uint8Array(total);
-                            let offset = 0;
-                            for (const c of chunks) {
-                                merged.set(c, offset);
-                                offset += c.length;
-                            }
-                            setStaticHtml(ansiToHtml(decoder.decode(merged)));
-                            setStatusAndNotify("exited");
-                            resolved.onExit?.(code);
-                        }
-                    },
-                });
-                const wasmApp = await instantiateApp(resolved.wasm, bridge);
-                if (cancelled)
-                    return;
-                setStatusAndNotify("running");
-                await wasmApp.run();
-            }
-            catch (e) {
-                if (!cancelled) {
-                    setStatusAndNotify("error");
-                    setErrorMsg(e instanceof Error ? e.message : String(e));
-                    resolved.onError?.(e);
-                }
-            }
-        }
-        run();
-        return () => { cancelled = true; };
-    }, [
-        resolved.mode,
-        resolved.wasm,
-        resolved.resolveArgv,
-        resolved.env,
-        resolved.size.cols,
-        resolved.size.rows,
-        resolved.onExit,
-        resolved.onError,
-        resolved.onStatusChange,
-    ]);
-    // ── Render ───────────────────────────────────────────────────────────────
-    const bg = resolved.terminal.theme?.background ?? "#1a1b26";
-    const fg = resolved.terminal.theme?.foreground ?? "#a9b1d6";
-    if (resolved.mode === "static") {
-        return (_jsxs("div", { className: props.className, style: {
-                position: "relative",
-                background: bg,
-                borderRadius: 6,
-                overflow: "hidden",
-                ...props.style,
-            }, children: [status === "loading" && _jsx("div", { style: overlayStyle, children: "Loading\u2026" }), status === "error" && (_jsxs("div", { style: { ...overlayStyle, color: "#f7768e" }, children: ["Error: ", errorMsg] })), staticHtml !== null && (_jsx("pre", { style: {
-                        margin: 0,
-                        padding: "0.5em",
-                        fontFamily: resolved.terminal.fontFamily,
-                        fontSize: resolved.terminal.fontSize,
-                        color: fg,
-                        lineHeight: 1.2,
-                        background: "transparent",
-                        overflow: "auto",
-                    }, dangerouslySetInnerHTML: { __html: staticHtml } }))] }));
-    }
     return (_jsxs("div", { ref: wrapperRef, className: props.className, style: {
             position: "relative",
             display: "inline-block",
-            background: bg,
+            background: resolved.terminal.theme?.background ?? "#1a1b26",
             borderRadius: 6,
             overflow: "hidden",
             ...props.style,

package/dist/core/index.d.ts

@@ -1,4 +1,3 @@
-export { ansiToHtml } from "./ansi.js";
 export { loadGhostty } from "./ghostty.js";
 export { resolveTuiPreviewProps, warnLegacyPropsOnce } from "./normalize.js";
 export { WasiBridge, WasiExitError, instantiateApp } from "./wasi.js";

package/dist/core/index.js

@@ -1,4 +1,3 @@
-export { ansiToHtml } from "./ansi.js";
 export { loadGhostty } from "./ghostty.js";
 export { resolveTuiPreviewProps, warnLegacyPropsOnce } from "./normalize.js";
 export { WasiBridge, WasiExitError, instantiateApp } from "./wasi.js";

package/dist/core/normalize.js

@@ -44,11 +44,12 @@ export function resolveTuiPreviewProps(props) {
                 cols: Math.max(1, props.size?.cols ?? DEFAULT_SIZE.cols),
                 rows: Math.max(1, props.size?.rows ?? DEFAULT_SIZE.rows),
             };
+        const mode = (props.mode ?? "terminal");
         return {
             wasm: props.wasm,
             env: props.env ?? EMPTY_ENV,
-            interactive: props.interactive ?? true,
-            mode: (props.mode ?? "terminal"),
+            interactive: mode === "static" ? false : (props.interactive ?? true),
+            mode,
             fit,
             size,
             terminal: {

package/dist/core/wasi.js

@@ -191,11 +191,18 @@ export class WasiExitError extends Error {
         this.code = code;
     }
 }
+/** Compiled module cache — keyed by URL string, persists for the page lifetime. */
+const moduleCache = new Map();
 /** Load and instantiate a WASM TUI app with a WasiBridge */
 export async function instantiateApp(source, bridge) {
-    const response = await fetch(source);
-    const bytes = await response.arrayBuffer();
-    const module = await WebAssembly.compile(bytes);
+    const key = source.toString();
+    let module = moduleCache.get(key);
+    if (!module) {
+        const response = await fetch(source);
+        const bytes = await response.arrayBuffer();
+        module = await WebAssembly.compile(bytes);
+        moduleCache.set(key, module);
+    }
     const importObject = {
         wasi_snapshot_preview1: bridge.imports,
     };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var K=Object.defineProperty;var X=(t,e,n)=>e in t?K(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var W=(t,e,n)=>X(t,typeof e!="symbol"?e+"":e,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),b=require("react"),j=["#000000","#cd0000","#00cd00","#cdcd00","#0000ee","#cd00cd","#00cdcd","#e5e5e5","#7f7f7f","#ff0000","#00ff00","#ffff00","#5c5cff","#ff00ff","#00ffff","#ffffff"];function Q(t){if(t<16)return j[t];if(t<232){const n=t-16,o=Math.floor(n/36),a=Math.floor(n%36/6),r=n%6,i=c=>c===0?0:c*40+55;return`rgb(${i(o)},${i(a)},${i(r)})`}const e=(t-232)*10+8;return`rgb(${e},${e},${e})`}function V(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function ee(t){let e=null,n=null,o=!1,a=!1,r=!1;const i=[];let c="",u="";function h(){const s=[];return e&&s.push(`color:${e}`),n&&s.push(`background-color:${n}`),o&&s.push("font-weight:bold"),a&&s.push("font-style:italic"),r&&s.push("text-decoration:underline"),s.join(";")}function m(){c&&(i.push(u?`<span style="${u}">${V(c)}</span>`:V(c)),c="")}function v(s){m();let f=0;for(;f<s.length;){const l=s[f];l===0?(e=null,n=null,o=!1,a=!1,r=!1):l===1?o=!0:l===22?o=!1:l===3?a=!0:l===23?a=!1:l===4?r=!0:l===24?r=!1:l>=30&&l<=37?e=j[l-30]:l===38?s[f+1]===2&&f+4<s.length?(e=`rgb(${s[f+2]},${s[f+3]},${s[f+4]})`,f+=4):s[f+1]===5&&f+2<s.length&&(e=Q(s[f+2]),f+=2):l===39?e=null:l>=40&&l<=47?n=j[l-40]:l===48?s[f+1]===2&&f+4<s.length?(n=`rgb(${s[f+2]},${s[f+3]},${s[f+4]})`,f+=4):s[f+1]===5&&f+2<s.length&&(n=Q(s[f+2]),f+=2):l===49?n=null:l>=90&&l<=97?e=j[l-82]:l>=100&&l<=107&&(n=j[l-92]),f++}u=h()}let d=0;for(;d<t.length;){const s=t[d];if(s==="\x1B"&&d+1<t.length&&t[d+1]==="["){const f=d+2;let l=f;for(;l<t.length&&(t.charCodeAt(l)<64||t.charCodeAt(l)>126);)l++;if(l<t.length){if(t[l]==="m"){const F=t.slice(f,l),I=F?F.split(";").map(y=>parseInt(y,10)||0):[0];v(I)}d=l+1}else d++}else if(s==="\r")d++;else{const f=h();f!==u&&(m(),u=f),c+=s,d++}}return m(),i.join("")}let p=null;function te(){return p||(p=Promise.resolve().then(()=>require("./ghostty-web-DkOZu5AZ.cjs")).then(async t=>(await t.init(),t))),p}const k={cols:80,rows:24},G={},ne=[];function re(t){return"wasm"in t}function Y(t){const e=t??ne;return typeof e=="function"?e:()=>e}function ie(t){return t.cols!==void 0||t.rows!==void 0?{fit:"none",size:{cols:Math.max(1,t.cols??k.cols),rows:Math.max(1,t.rows??k.rows)}}:{fit:"container",size:k}}let Z=!1;function se(t){!t||Z||(Z=!0,console.warn("[tui-preview] Legacy props (`app`, `args`, `cols`, `rows`, `fontSize`, `fontFamily`, `theme`) are deprecated. Use `wasm`, `argv`, `fit`, `size`, and `terminal`."))}function oe(t){var o,a,r,i,c,u,h,m,v;if(re(t)){const d=t.fit??(t.size?"none":"container"),s=d==="none"?{cols:Math.max(1,((o=t.size)==null?void 0:o.cols)??k.cols),rows:Math.max(1,((a=t.size)==null?void 0:a.rows)??k.rows)}:{cols:Math.max(1,((r=t.size)==null?void 0:r.cols)??k.cols),rows:Math.max(1,((i=t.size)==null?void 0:i.rows)??k.rows)};return{wasm:t.wasm,env:t.env??G,interactive:t.interactive??!0,mode:t.mode??"terminal",fit:d,size:s,terminal:{fontSize:((c=t.terminal)==null?void 0:c.fontSize)??14,fontFamily:((u=t.terminal)==null?void 0:u.fontFamily)??"monospace",cursorBlink:((h=t.terminal)==null?void 0:h.cursorBlink)??!0,convertEol:((m=t.terminal)==null?void 0:m.convertEol)??!0,theme:(v=t.terminal)==null?void 0:v.theme},resolveArgv:Y(t.argv),onExit:t.onExit,onError:t.onError,onStatusChange:t.onStatusChange,usedLegacyProps:!1}}const{fit:e,size:n}=ie(t);return{wasm:t.app,env:t.env??G,interactive:t.interactive??!0,mode:"terminal",fit:e,size:n,terminal:{fontSize:t.fontSize??14,fontFamily:t.fontFamily??"monospace",cursorBlink:!0,convertEol:!0,theme:t.theme},resolveArgv:Y(t.args),onExit:t.onExit,onError:t.onError,onStatusChange:t.onStatusChange,usedLegacyProps:!0}}const z=0,ce=6,P=8,le=0,J=1,ae=2;class N{constructor(e){W(this,"inputQueue",[]);W(this,"memory");this.opts=e}pushInput(e){const n=typeof e=="string"?new TextEncoder().encode(e):e;this.inputQueue.push(n)}attachMemory(e){this.memory=e}view(){return new DataView(this.memory.buffer)}u8(){return new Uint8Array(this.memory.buffer)}get imports(){return{args_sizes_get:(e,n)=>{const{args:o}=this.opts,a=new TextEncoder,r=o.reduce((i,c)=>i+a.encode(c).length+1,0);return this.view().setUint32(e,o.length,!0),this.view().setUint32(n,r,!0),z},args_get:(e,n)=>{const o=new TextEncoder,a=this.u8(),r=this.view();let i=n;return this.opts.args.forEach((c,u)=>{const h=o.encode(c);a.set(h,i),a[i+h.length]=0,r.setUint32(e+u*4,i,!0),i+=h.length+1}),z},environ_sizes_get:(e,n)=>{const o=this.envEntries(),a=new TextEncoder,r=o.reduce((i,c)=>i+a.encode(c).length+1,0);return this.view().setUint32(e,o.length,!0),this.view().setUint32(n,r,!0),z},environ_get:(e,n)=>{const o=new TextEncoder,a=this.u8(),r=this.view();let i=n;return this.envEntries().forEach((c,u)=>{const h=o.encode(c);a.set(h,i),a[i+h.length]=0,r.setUint32(e+u*4,i,!0),i+=h.length+1}),z},fd_write:(e,n,o,a)=>{if(e!==J&&e!==ae)return P;const r=this.view(),i=this.u8();let c=0;const u=[];for(let v=0;v<o;v++){const d=r.getUint32(n+v*8,!0),s=r.getUint32(n+v*8+4,!0);u.push(i.slice(d,d+s)),c+=s}const h=new Uint8Array(c);let m=0;for(const v of u)h.set(v,m),m+=v.length;return e===J?this.opts.stdout(h):this.opts.stderr(h),r.setUint32(a,c,!0),z},fd_read:(e,n,o,a)=>{if(e!==le)return P;const r=this.inputQueue.shift();if(!r)return ce;const i=this.view(),c=this.u8();let u=0;for(let h=0;h<o&&u<r.length;h++){const m=i.getUint32(n+h*8,!0),v=i.getUint32(n+h*8+4,!0),d=Math.min(v,r.length-u);c.set(r.subarray(u,u+d),m),u+=d}return i.setUint32(a,u,!0),z},poll_oneoff:(e,n,o,a)=>{const r=this.view();let i=0;for(let c=0;c<o;c++){const u=e+c*48,h=r.getUint8(u+8);if(h===0&&this.inputQueue.length>0){const m=n+i*32;r.setBigUint64(m,r.getBigUint64(u,!0),!0),r.setUint16(m+8,0,!0),r.setUint8(m+10,h),i++}}return r.setUint32(a,i,!0),z},proc_exit:e=>{throw this.opts.onExit(e),new H(e)},random_get:(e,n)=>(crypto.getRandomValues(new Uint8Array(this.memory.buffer,e,n)),z),fd_close:()=>z,fd_seek:()=>z,fd_fdstat_get:(e,n)=>(this.view().setUint8(n,e<=2?2:0),z),fd_prestat_get:()=>P,fd_prestat_dir_name:()=>P,path_open:()=>P,sched_yield:()=>z,clock_time_get:(e,n,o)=>{const a=BigInt(Date.now())*1000000n;return this.view().setBigUint64(o,a,!0),z}}}envEntries(){const e={TERM:"xterm-256color",COLORTERM:"truecolor",...this.opts.env};return Object.entries(e).map(([n,o])=>`${n}=${o}`)}}class H extends Error{constructor(e){super(`WASI exit: ${e}`),this.code=e}}async function O(t,e){const o=await(await fetch(t)).arrayBuffer(),a=await WebAssembly.compile(o),r={wasi_snapshot_preview1:e.imports},i=await WebAssembly.instantiate(a,r);e.attachMemory(i.exports.memory);const c=i.exports._start;if(!c)throw new Error("WASM module has no _start export");return{run:async()=>{try{c()}catch(u){if(!(u instanceof H))throw u}}}}function ue(t){var F,I;const e=b.useMemo(()=>oe(t),[t]),n=b.useRef(null),o=b.useRef(null),a=b.useRef(null),[r,i]=b.useState("loading"),[c,u]=b.useState(""),h=b.useRef(null),[m,v]=b.useState(e.size),[d,s]=b.useState(null);b.useEffect(()=>{se(e.usedLegacyProps)},[e.usedLegacyProps]),b.useEffect(()=>{e.mode==="terminal"&&v(e.size)},[e.mode,e.fit,e.size.cols,e.size.rows]),b.useEffect(()=>{if(e.mode!=="terminal"||e.fit!=="container"||!n.current)return;const y=new ResizeObserver(([_])=>{var E,A;const{width:T,height:x}=_.contentRect;if(T>0&&x>0){const w=((E=h.current)==null?void 0:E.w)??e.terminal.fontSize*.6,g=((A=h.current)==null?void 0:A.h)??e.terminal.fontSize*1.2;v({cols:Math.max(1,Math.floor(T/w)),rows:Math.max(1,Math.floor(x/g))})}});return y.observe(n.current),()=>y.disconnect()},[e.mode,e.fit,e.terminal.fontSize]),b.useEffect(()=>{if(e.mode!=="terminal"||!m||!o.current)return;let y=!1;const _=o.current,T=m,x=w=>{var g;i(w),(g=e.onStatusChange)==null||g.call(e,w)},E=w=>{var g;x("error"),u(w instanceof Error?w.message:String(w)),(g=e.onError)==null||g.call(e,w)};x("loading"),u("");async function A(){try{const w=await te();if(y)return;_.innerHTML="";const g=new w.Terminal({cols:T.cols,rows:T.rows,fontSize:e.terminal.fontSize,fontFamily:e.terminal.fontFamily,theme:e.terminal.theme,disableStdin:!e.interactive,cursorBlink:e.terminal.cursorBlink,convertEol:e.terminal.convertEol});a.current=g,g.open(_);let U=g.cols,R=g.rows;if(e.fit==="container"){const S=new w.FitAddon;g.loadAddon(S),S.fit(),U=g.cols,R=g.rows,n.current&&U>0&&R>0&&(h.current={w:n.current.clientWidth/U,h:n.current.clientHeight/R})}const D=e.resolveArgv({cols:U,rows:R}),B=new TextDecoder,C=new N({args:[e.wasm.toString(),...D],env:e.env,stdout:S=>g.write(B.decode(S)),stderr:S=>g.write(B.decode(S)),onExit:S=>{var q;y||(x("exited"),(q=e.onExit)==null||q.call(e,S))}});e.interactive&&g.onData(S=>C.pushInput(S));const $=await O(e.wasm,C);if(y)return;x("running"),queueMicrotask(()=>{y||$.run().catch(S=>{y||E(S)})})}catch(w){y||E(w)}}return A(),()=>{var w;y=!0,(w=a.current)==null||w.dispose(),a.current=null}},[e.mode,m,e.wasm,e.resolveArgv,e.env,e.fit,e.interactive,e.onExit,e.onError,e.onStatusChange,e.terminal.fontSize,e.terminal.fontFamily,e.terminal.theme,e.terminal.cursorBlink,e.terminal.convertEol]),b.useEffect(()=>{if(e.mode!=="static")return;let y=!1;const _=x=>{var E;i(x),(E=e.onStatusChange)==null||E.call(e,x)};_("loading"),u(""),s(null);async function T(){var x;try{const E=new TextDecoder,A=[],w=new N({args:[e.wasm.toString(),...e.resolveArgv(e.size)],env:e.env,stdout:U=>A.push(new Uint8Array(U)),stderr:()=>{},onExit:U=>{var R;if(!y){const D=A.reduce(($,S)=>$+S.length,0),B=new Uint8Array(D);let C=0;for(const $ of A)B.set($,C),C+=$.length;s(ee(E.decode(B))),_("exited"),(R=e.onExit)==null||R.call(e,U)}}}),g=await O(e.wasm,w);if(y)return;_("running"),await g.run()}catch(E){y||(_("error"),u(E instanceof Error?E.message:String(E)),(x=e.onError)==null||x.call(e,E))}}return T(),()=>{y=!0}},[e.mode,e.wasm,e.resolveArgv,e.env,e.size.cols,e.size.rows,e.onExit,e.onError,e.onStatusChange]);const f=((F=e.terminal.theme)==null?void 0:F.background)??"#1a1b26",l=((I=e.terminal.theme)==null?void 0:I.foreground)??"#a9b1d6";return e.mode==="static"?M.jsxs("div",{className:t.className,style:{position:"relative",background:f,borderRadius:6,overflow:"hidden",...t.style},children:[r==="loading"&&M.jsx("div",{style:L,children:"Loading…"}),r==="error"&&M.jsxs("div",{style:{...L,color:"#f7768e"},children:["Error: ",c]}),d!==null&&M.jsx("pre",{style:{margin:0,padding:"0.5em",fontFamily:e.terminal.fontFamily,fontSize:e.terminal.fontSize,color:l,lineHeight:1.2,background:"transparent",overflow:"auto"},dangerouslySetInnerHTML:{__html:d}})]}):M.jsxs("div",{ref:n,className:t.className,style:{position:"relative",display:"inline-block",background:f,borderRadius:6,overflow:"hidden",...t.style},children:[M.jsx("div",{ref:o,style:{display:r==="error"?"none":void 0}}),r==="loading"&&M.jsx("div",{style:L,children:"Loading…"}),r==="error"&&M.jsxs("div",{style:{...L,color:"#f7768e"},children:["Error: ",c]})]})}const L={padding:"1rem",fontFamily:"monospace",fontSize:14,color:"#a9b1d6"};exports.TuiPreview=ue;exports.WasiBridge=N;exports.WasiExitError=H;exports.instantiateApp=O;
+"use strict";var V=Object.defineProperty;var G=(e,t,n)=>t in e?V(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var R=(e,t,n)=>G(e,typeof t!="symbol"?t+"":t,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),v=require("react");let k=null;function H(){return k||(k=Promise.resolve().then(()=>require("./ghostty-web-DkOZu5AZ.cjs")).then(async e=>(await e.init(),e))),k}const _={cols:80,rows:24},W={},$=[];function Y(e){return"wasm"in e}function C(e){const t=e??$;return typeof t=="function"?t:()=>t}function Z(e){return e.cols!==void 0||e.rows!==void 0?{fit:"none",size:{cols:Math.max(1,e.cols??_.cols),rows:Math.max(1,e.rows??_.rows)}}:{fit:"container",size:_}}let D=!1;function J(e){!e||D||(D=!0,console.warn("[tui-preview] Legacy props (`app`, `args`, `cols`, `rows`, `fontSize`, `fontFamily`, `theme`) are deprecated. Use `wasm`, `argv`, `fit`, `size`, and `terminal`."))}function K(e){var i,o,r,s,c,u,a,h,m;if(Y(e)){const y=e.fit??(e.size?"none":"container"),d=y==="none"?{cols:Math.max(1,((i=e.size)==null?void 0:i.cols)??_.cols),rows:Math.max(1,((o=e.size)==null?void 0:o.rows)??_.rows)}:{cols:Math.max(1,((r=e.size)==null?void 0:r.cols)??_.cols),rows:Math.max(1,((s=e.size)==null?void 0:s.rows)??_.rows)},E=e.mode??"terminal";return{wasm:e.wasm,env:e.env??W,interactive:E==="static"?!1:e.interactive??!0,mode:E,fit:y,size:d,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:C(e.argv),onExit:e.onExit,onError:e.onError,onStatusChange:e.onStatusChange,usedLegacyProps:!1}}const{fit:t,size:n}=Z(e);return{wasm:e.app,env:e.env??W,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:C(e.args),onExit:e.onExit,onError:e.onError,onStatusChange:e.onStatusChange,usedLegacyProps:!0}}const w=0,X=6,b=8,tt=0,L=1,et=2;class j{constructor(t){R(this,"inputQueue",[]);R(this,"memory");this.opts=t}pushInput(t){const n=typeof t=="string"?new TextEncoder().encode(t):t;this.inputQueue.push(n)}attachMemory(t){this.memory=t}view(){return new DataView(this.memory.buffer)}u8(){return new Uint8Array(this.memory.buffer)}get imports(){return{args_sizes_get:(t,n)=>{const{args:i}=this.opts,o=new TextEncoder,r=i.reduce((s,c)=>s+o.encode(c).length+1,0);return this.view().setUint32(t,i.length,!0),this.view().setUint32(n,r,!0),w},args_get:(t,n)=>{const i=new TextEncoder,o=this.u8(),r=this.view();let s=n;return this.opts.args.forEach((c,u)=>{const a=i.encode(c);o.set(a,s),o[s+a.length]=0,r.setUint32(t+u*4,s,!0),s+=a.length+1}),w},environ_sizes_get:(t,n)=>{const i=this.envEntries(),o=new TextEncoder,r=i.reduce((s,c)=>s+o.encode(c).length+1,0);return this.view().setUint32(t,i.length,!0),this.view().setUint32(n,r,!0),w},environ_get:(t,n)=>{const i=new TextEncoder,o=this.u8(),r=this.view();let s=n;return this.envEntries().forEach((c,u)=>{const a=i.encode(c);o.set(a,s),o[s+a.length]=0,r.setUint32(t+u*4,s,!0),s+=a.length+1}),w},fd_write:(t,n,i,o)=>{if(t!==L&&t!==et)return b;const r=this.view(),s=this.u8();let c=0;const u=[];for(let m=0;m<i;m++){const y=r.getUint32(n+m*8,!0),d=r.getUint32(n+m*8+4,!0);u.push(s.slice(y,y+d)),c+=d}const a=new Uint8Array(c);let h=0;for(const m of u)a.set(m,h),h+=m.length;return t===L?this.opts.stdout(a):this.opts.stderr(a),r.setUint32(o,c,!0),w},fd_read:(t,n,i,o)=>{if(t!==tt)return b;const r=this.inputQueue.shift();if(!r)return X;const s=this.view(),c=this.u8();let u=0;for(let a=0;a<i&&u<r.length;a++){const h=s.getUint32(n+a*8,!0),m=s.getUint32(n+a*8+4,!0),y=Math.min(m,r.length-u);c.set(r.subarray(u,u+y),h),u+=y}return s.setUint32(o,u,!0),w},poll_oneoff:(t,n,i,o)=>{const r=this.view();let s=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+s*32;r.setBigUint64(h,r.getBigUint64(u,!0),!0),r.setUint16(h+8,0,!0),r.setUint8(h+10,a),s++}}return r.setUint32(o,s,!0),w},proc_exit:t=>{throw this.opts.onExit(t),new p(t)},random_get:(t,n)=>(crypto.getRandomValues(new Uint8Array(this.memory.buffer,t,n)),w),fd_close:()=>w,fd_seek:()=>w,fd_fdstat_get:(t,n)=>(this.view().setUint8(n,t<=2?2:0),w),fd_prestat_get:()=>b,fd_prestat_dir_name:()=>b,path_open:()=>b,sched_yield:()=>w,clock_time_get:(t,n,i)=>{const o=BigInt(Date.now())*1000000n;return this.view().setBigUint64(i,o,!0),w}}}envEntries(){const t={TERM:"xterm-256color",COLORTERM:"truecolor",...this.opts.env};return Object.entries(t).map(([n,i])=>`${n}=${i}`)}}class p extends Error{constructor(t){super(`WASI exit: ${t}`),this.code=t}}const I=new Map;async function N(e,t){const n=e.toString();let i=I.get(n);if(!i){const u=await(await fetch(e)).arrayBuffer();i=await WebAssembly.compile(u),I.set(n,i)}const o={wasi_snapshot_preview1:t.imports},r=await WebAssembly.instantiate(i,o);t.attachMemory(r.exports.memory);const s=r.exports._start;if(!s)throw new Error("WASM module has no _start export");return{run:async()=>{try{s()}catch(c){if(!(c instanceof p))throw c}}}}function nt(e){var y;const t=v.useMemo(()=>K(e),[e]),n=v.useRef(null),i=v.useRef(null),o=v.useRef(null),[r,s]=v.useState("loading"),[c,u]=v.useState(""),a=v.useRef(null),[h,m]=v.useState(t.size);return v.useEffect(()=>{J(t.usedLegacyProps)},[t.usedLegacyProps]),v.useEffect(()=>{m(t.size)},[t.fit,t.size.cols,t.size.rows]),v.useEffect(()=>{if(t.fit!=="container"||!n.current)return;const d=new ResizeObserver(([E])=>{var z,A;const{width:x,height:S}=E.contentRect;if(x>0&&S>0){const f=((z=a.current)==null?void 0:z.w)??t.terminal.fontSize*.6,l=((A=a.current)==null?void 0:A.h)??t.terminal.fontSize*1.2;m({cols:Math.max(1,Math.floor(x/f)),rows:Math.max(1,Math.floor(S/l))})}});return d.observe(n.current),()=>d.disconnect()},[t.fit,t.terminal.fontSize]),v.useEffect(()=>{if(!h||!i.current)return;let d=!1;const E=i.current,x=h,S=f=>{var l;s(f),(l=t.onStatusChange)==null||l.call(t,f)},z=f=>{var l;S("error"),u(f instanceof Error?f.message:String(f)),(l=t.onError)==null||l.call(t,f)};S("loading"),u("");async function A(){try{const f=await H();if(d)return;E.innerHTML="";const l=new f.Terminal({cols:x.cols,rows:x.rows,fontSize:t.terminal.fontSize,fontFamily:t.terminal.fontFamily,theme:t.terminal.theme,disableStdin:!t.interactive,cursorBlink:t.terminal.cursorBlink,convertEol:t.terminal.convertEol});o.current=l,l.open(E),t.mode==="static"&&l.write("\x1B[?25l");let U=l.cols,M=l.rows;if(t.fit==="container"){const g=new f.FitAddon;l.loadAddon(g),g.fit(),U=l.cols,M=l.rows,n.current&&U>0&&M>0&&(a.current={w:n.current.clientWidth/U,h:n.current.clientHeight/M})}const q=t.resolveArgv({cols:U,rows:M}),B=new TextDecoder,F=new j({args:[t.wasm.toString(),...q],env:t.env,stdout:g=>l.write(B.decode(g)),stderr:g=>l.write(B.decode(g)),onExit:g=>{var P;d||(S("exited"),(P=t.onExit)==null||P.call(t,g))}});t.interactive&&l.onData(g=>F.pushInput(g));const Q=await N(t.wasm,F);if(d)return;S("running"),queueMicrotask(()=>{d||Q.run().catch(g=>{d||z(g)})})}catch(f){d||z(f)}}return A(),()=>{var f;d=!0,(f=o.current)==null||f.dispose(),o.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]),T.jsxs("div",{ref:n,className:e.className,style:{position:"relative",display:"inline-block",background:((y=t.terminal.theme)==null?void 0:y.background)??"#1a1b26",borderRadius:6,overflow:"hidden",...e.style},children:[T.jsx("div",{ref:i,style:{display:r==="error"?"none":void 0}}),r==="loading"&&T.jsx("div",{style:O,children:"Loading…"}),r==="error"&&T.jsxs("div",{style:{...O,color:"#f7768e"},children:["Error: ",c]})]})}const O={padding:"1rem",fontFamily:"monospace",fontSize:14,color:"#a9b1d6"};exports.TuiPreview=nt;exports.WasiBridge=j;exports.WasiExitError=p;exports.instantiateApp=N;

package/dist/index.js

@@ -1,178 +1,103 @@
-var te = Object.defineProperty;
-var ne = (t, e, n) => e in t ? te(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var O = (t, e, n) => ne(t, typeof e != "symbol" ? e + "" : e, n);
-import { jsxs as D, jsx as p } from "react/jsx-runtime";
-import { useMemo as re, useRef as P, useState as W, useEffect as C } from "react";
-const I = [
-  "#000000",
-  "#cd0000",
-  "#00cd00",
-  "#cdcd00",
-  "#0000ee",
-  "#cd00cd",
-  "#00cdcd",
-  "#e5e5e5",
-  "#7f7f7f",
-  "#ff0000",
-  "#00ff00",
-  "#ffff00",
-  "#5c5cff",
-  "#ff00ff",
-  "#00ffff",
-  "#ffffff"
-];
-function V(t) {
-  if (t < 16) return I[t];
-  if (t < 232) {
-    const n = t - 16, s = Math.floor(n / 36), a = Math.floor(n % 36 / 6), r = n % 6, i = (c) => c === 0 ? 0 : c * 40 + 55;
-    return `rgb(${i(s)},${i(a)},${i(r)})`;
-  }
-  const e = (t - 232) * 10 + 8;
-  return `rgb(${e},${e},${e})`;
-}
-function q(t) {
-  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+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;
 }
-function ie(t) {
-  let e = null, n = null, s = !1, a = !1, r = !1;
-  const i = [];
-  let c = "", u = "";
-  function h() {
-    const o = [];
-    return e && o.push(`color:${e}`), n && o.push(`background-color:${n}`), s && o.push("font-weight:bold"), a && o.push("font-style:italic"), r && o.push("text-decoration:underline"), o.join(";");
-  }
-  function m() {
-    c && (i.push(u ? `<span style="${u}">${q(c)}</span>` : q(c)), c = "");
-  }
-  function v(o) {
-    m();
-    let f = 0;
-    for (; f < o.length; ) {
-      const l = o[f];
-      l === 0 ? (e = null, n = null, s = !1, a = !1, r = !1) : l === 1 ? s = !0 : l === 22 ? s = !1 : l === 3 ? a = !0 : l === 23 ? a = !1 : l === 4 ? r = !0 : l === 24 ? r = !1 : l >= 30 && l <= 37 ? e = I[l - 30] : l === 38 ? o[f + 1] === 2 && f + 4 < o.length ? (e = `rgb(${o[f + 2]},${o[f + 3]},${o[f + 4]})`, f += 4) : o[f + 1] === 5 && f + 2 < o.length && (e = V(o[f + 2]), f += 2) : l === 39 ? e = null : l >= 40 && l <= 47 ? n = I[l - 40] : l === 48 ? o[f + 1] === 2 && f + 4 < o.length ? (n = `rgb(${o[f + 2]},${o[f + 3]},${o[f + 4]})`, f += 4) : o[f + 1] === 5 && f + 2 < o.length && (n = V(o[f + 2]), f += 2) : l === 49 ? n = null : l >= 90 && l <= 97 ? e = I[l - 82] : l >= 100 && l <= 107 && (n = I[l - 92]), f++;
-    }
-    u = h();
-  }
-  let d = 0;
-  for (; d < t.length; ) {
-    const o = t[d];
-    if (o === "\x1B" && d + 1 < t.length && t[d + 1] === "[") {
-      const f = d + 2;
-      let l = f;
-      for (; l < t.length && (t.charCodeAt(l) < 64 || t.charCodeAt(l) > 126); )
-        l++;
-      if (l < t.length) {
-        if (t[l] === "m") {
-          const $ = t.slice(f, l), L = $ ? $.split(";").map((y) => parseInt(y, 10) || 0) : [0];
-          v(L);
-        }
-        d = l + 1;
-      } else
-        d++;
-    } else if (o === "\r")
-      d++;
-    else {
-      const f = h();
-      f !== u && (m(), u = f), c += o, d++;
-    }
-  }
-  return m(), i.join("");
+const S = { cols: 80, rows: 24 }, P = {}, Z = [];
+function J(e) {
+  return "wasm" in e;
 }
-let j = null;
-function oe() {
-  return j || (j = import("./ghostty-web-BfBVpf8G.js").then(async (t) => (await t.init(), t))), j;
+function I(e) {
+  const t = e ?? Z;
+  return typeof t == "function" ? t : () => t;
 }
-const T = { cols: 80, rows: 24 }, G = {}, se = [];
-function ce(t) {
-  return "wasm" in t;
-}
-function Y(t) {
-  const e = t ?? se;
-  return typeof e == "function" ? e : () => e;
-}
-function le(t) {
-  return t.cols !== void 0 || t.rows !== void 0 ? {
+function K(e) {
+  return e.cols !== void 0 || e.rows !== void 0 ? {
     fit: "none",
     size: {
-      cols: Math.max(1, t.cols ?? T.cols),
-      rows: Math.max(1, t.rows ?? T.rows)
+      cols: Math.max(1, e.cols ?? S.cols),
+      rows: Math.max(1, e.rows ?? S.rows)
     }
-  } : { fit: "container", size: T };
+  } : { fit: "container", size: S };
 }
-let Z = !1;
-function ae(t) {
-  !t || Z || (Z = !0, console.warn(
+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 ue(t) {
-  var s, a, r, i, c, u, h, m, v;
-  if (ce(t)) {
-    const d = t.fit ?? (t.size ? "none" : "container"), o = d === "none" ? {
-      cols: Math.max(1, ((s = t.size) == null ? void 0 : s.cols) ?? T.cols),
-      rows: Math.max(1, ((a = t.size) == null ? void 0 : a.rows) ?? T.rows)
+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 = t.size) == null ? void 0 : r.cols) ?? T.cols),
-      rows: Math.max(1, ((i = t.size) == null ? void 0 : i.rows) ?? T.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: t.wasm,
-      env: t.env ?? G,
-      interactive: t.interactive ?? !0,
-      mode: t.mode ?? "terminal",
-      fit: d,
-      size: o,
+      wasm: e.wasm,
+      env: e.env ?? P,
+      interactive: y === "static" ? !1 : e.interactive ?? !0,
+      mode: y,
+      fit: v,
+      size: w,
       terminal: {
-        fontSize: ((c = t.terminal) == null ? void 0 : c.fontSize) ?? 14,
-        fontFamily: ((u = t.terminal) == null ? void 0 : u.fontFamily) ?? "monospace",
-        cursorBlink: ((h = t.terminal) == null ? void 0 : h.cursorBlink) ?? !0,
-        convertEol: ((m = t.terminal) == null ? void 0 : m.convertEol) ?? !0,
-        theme: (v = t.terminal) == null ? void 0 : v.theme
+        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: Y(t.argv),
-      onExit: t.onExit,
-      onError: t.onError,
-      onStatusChange: t.onStatusChange,
+      resolveArgv: I(e.argv),
+      onExit: e.onExit,
+      onError: e.onError,
+      onStatusChange: e.onStatusChange,
       usedLegacyProps: !1
     };
   }
-  const { fit: e, size: n } = le(t);
+  const { fit: t, size: n } = K(e);
   return {
-    wasm: t.app,
-    env: t.env ?? G,
-    interactive: t.interactive ?? !0,
+    wasm: e.app,
+    env: e.env ?? P,
+    interactive: e.interactive ?? !0,
     mode: "terminal",
-    fit: e,
+    fit: t,
     size: n,
     terminal: {
-      fontSize: t.fontSize ?? 14,
-      fontFamily: t.fontFamily ?? "monospace",
+      fontSize: e.fontSize ?? 14,
+      fontFamily: e.fontFamily ?? "monospace",
       cursorBlink: !0,
       convertEol: !0,
-      theme: t.theme
+      theme: e.theme
     },
-    resolveArgv: Y(t.args),
-    onExit: t.onExit,
-    onError: t.onError,
-    onStatusChange: t.onStatusChange,
+    resolveArgv: I(e.args),
+    onExit: e.onExit,
+    onError: e.onError,
+    onStatusChange: e.onStatusChange,
     usedLegacyProps: !0
   };
 }
-const z = 0, fe = 6, B = 8, he = 0, J = 1, de = 2;
-class K {
-  constructor(e) {
-    O(this, "inputQueue", []);
-    O(this, "memory");
-    this.opts = e;
+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(e) {
-    const n = typeof e == "string" ? new TextEncoder().encode(e) : e;
+  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(e) {
-    this.memory = e;
+  attachMemory(t) {
+    this.memory = t;
   }
   view() {
     return new DataView(this.memory.buffer);
@@ -183,317 +108,240 @@ class K {
   // ── WASI imports object ────────────────────────────────────────────────
   get imports() {
     return {
-      args_sizes_get: (e, n) => {
-        const { args: s } = this.opts, a = new TextEncoder(), r = s.reduce((i, c) => i + a.encode(c).length + 1, 0);
-        return this.view().setUint32(e, s.length, !0), this.view().setUint32(n, r, !0), z;
+      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: (e, n) => {
-        const s = new TextEncoder(), a = this.u8(), r = this.view();
-        let i = n;
+      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 h = s.encode(c);
-          a.set(h, i), a[i + h.length] = 0, r.setUint32(e + u * 4, i, !0), i += h.length + 1;
-        }), z;
+          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: (e, n) => {
-        const s = this.envEntries(), a = new TextEncoder(), r = s.reduce((i, c) => i + a.encode(c).length + 1, 0);
-        return this.view().setUint32(e, s.length, !0), this.view().setUint32(n, r, !0), z;
+      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: (e, n) => {
-        const s = new TextEncoder(), a = this.u8(), r = this.view();
-        let i = n;
+      environ_get: (t, n) => {
+        const i = new TextEncoder(), s = this.u8(), r = this.view();
+        let o = n;
         return this.envEntries().forEach((c, u) => {
-          const h = s.encode(c);
-          a.set(h, i), a[i + h.length] = 0, r.setUint32(e + u * 4, i, !0), i += h.length + 1;
-        }), z;
+          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: (e, n, s, a) => {
-        if (e !== J && e !== de) return B;
-        const r = this.view(), i = this.u8();
+      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 v = 0; v < s; v++) {
-          const d = r.getUint32(n + v * 8, !0), o = r.getUint32(n + v * 8 + 4, !0);
-          u.push(i.slice(d, d + o)), c += o;
+        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 h = new Uint8Array(c);
-        let m = 0;
-        for (const v of u)
-          h.set(v, m), m += v.length;
-        return e === J ? this.opts.stdout(h) : this.opts.stderr(h), r.setUint32(a, c, !0), z;
+        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: (e, n, s, a) => {
-        if (e !== he) return B;
+      fd_read: (t, n, i, s) => {
+        if (t !== nt) return x;
         const r = this.inputQueue.shift();
-        if (!r) return fe;
-        const i = this.view(), c = this.u8();
+        if (!r) return et;
+        const o = this.view(), c = this.u8();
         let u = 0;
-        for (let h = 0; h < s && u < r.length; h++) {
-          const m = i.getUint32(n + h * 8, !0), v = i.getUint32(n + h * 8 + 4, !0), d = Math.min(v, r.length - u);
-          c.set(r.subarray(u, u + d), m), u += d;
+        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 i.setUint32(a, u, !0), z;
+        return o.setUint32(s, u, !0), d;
       },
-      poll_oneoff: (e, n, s, a) => {
+      poll_oneoff: (t, n, i, s) => {
         const r = this.view();
-        let i = 0;
-        for (let c = 0; c < s; c++) {
-          const u = e + c * 48, h = r.getUint8(u + 8);
-          if (h === 0 && this.inputQueue.length > 0) {
-            const m = n + i * 32;
-            r.setBigUint64(m, r.getBigUint64(u, !0), !0), r.setUint16(m + 8, 0, !0), r.setUint8(m + 10, h), i++;
+        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(a, i, !0), z;
+        return r.setUint32(s, o, !0), d;
       },
-      proc_exit: (e) => {
-        throw this.opts.onExit(e), new ee(e);
+      proc_exit: (t) => {
+        throw this.opts.onExit(t), new Q(t);
       },
-      random_get: (e, n) => (crypto.getRandomValues(new Uint8Array(this.memory.buffer, e, n)), z),
+      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: () => z,
-      fd_seek: () => z,
-      fd_fdstat_get: (e, n) => (this.view().setUint8(n, e <= 2 ? 2 : 0), z),
-      fd_prestat_get: () => B,
-      fd_prestat_dir_name: () => B,
-      path_open: () => B,
-      sched_yield: () => z,
-      clock_time_get: (e, n, s) => {
-        const a = BigInt(Date.now()) * 1000000n;
-        return this.view().setBigUint64(s, a, !0), z;
+      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 e = {
+    const t = {
       TERM: "xterm-256color",
       COLORTERM: "truecolor",
       ...this.opts.env
     };
-    return Object.entries(e).map(([n, s]) => `${n}=${s}`);
+    return Object.entries(t).map(([n, i]) => `${n}=${i}`);
   }
 }
-class ee extends Error {
-  constructor(e) {
-    super(`WASI exit: ${e}`), this.code = e;
+class Q extends Error {
+  constructor(t) {
+    super(`WASI exit: ${t}`), this.code = t;
   }
 }
-async function X(t, e) {
-  const s = await (await fetch(t)).arrayBuffer(), a = await WebAssembly.compile(s), r = {
-    wasi_snapshot_preview1: e.imports
-  }, i = await WebAssembly.instantiate(a, r);
-  e.attachMemory(i.exports.memory);
-  const c = i.exports._start;
-  if (!c) throw new Error("WASM module has no _start export");
+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 {
-        c();
-      } catch (u) {
-        if (!(u instanceof ee)) throw u;
+        o();
+      } catch (c) {
+        if (!(c instanceof Q)) throw c;
       }
     }
   };
 }
-function ve(t) {
-  var $, L;
-  const e = re(() => ue(t), [t]), n = P(null), s = P(null), a = P(null), [r, i] = W("loading"), [c, u] = W(""), h = P(null), [m, v] = W(e.size), [d, o] = W(null);
-  C(() => {
-    ae(e.usedLegacyProps);
-  }, [e.usedLegacyProps]), C(() => {
-    e.mode === "terminal" && v(e.size);
-  }, [e.mode, e.fit, e.size.cols, e.size.rows]), C(() => {
-    if (e.mode !== "terminal" || e.fit !== "container" || !n.current) return;
-    const y = new ResizeObserver(([_]) => {
-      var E, x;
-      const { width: U, height: b } = _.contentRect;
-      if (U > 0 && b > 0) {
-        const w = ((E = h.current) == null ? void 0 : E.w) ?? e.terminal.fontSize * 0.6, g = ((x = h.current) == null ? void 0 : x.h) ?? e.terminal.fontSize * 1.2;
-        v({
-          cols: Math.max(1, Math.floor(U / w)),
-          rows: Math.max(1, Math.floor(b / g))
+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 y.observe(n.current), () => y.disconnect();
-  }, [e.mode, e.fit, e.terminal.fontSize]), C(() => {
-    if (e.mode !== "terminal" || !m || !s.current) return;
-    let y = !1;
-    const _ = s.current, U = m, b = (w) => {
-      var g;
-      i(w), (g = e.onStatusChange) == null || g.call(e, w);
-    }, E = (w) => {
-      var g;
-      b("error"), u(w instanceof Error ? w.message : String(w)), (g = e.onError) == null || g.call(e, w);
+    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);
     };
-    b("loading"), u("");
-    async function x() {
+    E("loading"), u("");
+    async function b() {
       try {
-        const w = await oe();
-        if (y) return;
-        _.innerHTML = "";
-        const g = new w.Terminal({
-          cols: U.cols,
-          rows: U.rows,
-          fontSize: e.terminal.fontSize,
-          fontFamily: e.terminal.fontFamily,
-          theme: e.terminal.theme,
-          disableStdin: !e.interactive,
-          cursorBlink: e.terminal.cursorBlink,
-          convertEol: e.terminal.convertEol
+        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
         });
-        a.current = g, g.open(_);
-        let A = g.cols, M = g.rows;
-        if (e.fit === "container") {
-          const S = new w.FitAddon();
-          g.loadAddon(S), S.fit(), A = g.cols, M = g.rows, n.current && A > 0 && M > 0 && (h.current = {
+        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 / M
+            h: n.current.clientHeight / U
           });
         }
-        const H = e.resolveArgv({ cols: A, rows: M }), R = new TextDecoder(), F = new K({
-          args: [e.wasm.toString(), ...H],
-          env: e.env,
-          stdout: (S) => g.write(R.decode(S)),
-          stderr: (S) => g.write(R.decode(S)),
-          onExit: (S) => {
-            var Q;
-            y || (b("exited"), (Q = e.onExit) == null || Q.call(e, S));
+        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));
           }
         });
-        e.interactive && g.onData((S) => F.pushInput(S));
-        const k = await X(e.wasm, F);
-        if (y) return;
-        b("running"), queueMicrotask(() => {
-          y || k.run().catch((S) => {
-            y || E(S);
+        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 (w) {
-        y || E(w);
+      } catch (f) {
+        w || z(f);
       }
     }
-    return x(), () => {
-      var w;
-      y = !0, (w = a.current) == null || w.dispose(), a.current = null;
+    return b(), () => {
+      var f;
+      w = !0, (f = s.current) == null || f.dispose(), s.current = null;
     };
   }, [
-    e.mode,
-    m,
-    e.wasm,
-    e.resolveArgv,
-    e.env,
-    e.fit,
-    e.interactive,
-    e.onExit,
-    e.onError,
-    e.onStatusChange,
-    e.terminal.fontSize,
-    e.terminal.fontFamily,
-    e.terminal.theme,
-    e.terminal.cursorBlink,
-    e.terminal.convertEol
-  ]), C(() => {
-    if (e.mode !== "static") return;
-    let y = !1;
-    const _ = (b) => {
-      var E;
-      i(b), (E = e.onStatusChange) == null || E.call(e, b);
-    };
-    _("loading"), u(""), o(null);
-    async function U() {
-      var b;
-      try {
-        const E = new TextDecoder(), x = [], w = new K({
-          args: [e.wasm.toString(), ...e.resolveArgv(e.size)],
-          env: e.env,
-          stdout: (A) => x.push(new Uint8Array(A)),
-          stderr: () => {
-          },
-          onExit: (A) => {
-            var M;
-            if (!y) {
-              const H = x.reduce((k, S) => k + S.length, 0), R = new Uint8Array(H);
-              let F = 0;
-              for (const k of x)
-                R.set(k, F), F += k.length;
-              o(ie(E.decode(R))), _("exited"), (M = e.onExit) == null || M.call(e, A);
-            }
-          }
-        }), g = await X(e.wasm, w);
-        if (y) return;
-        _("running"), await g.run();
-      } catch (E) {
-        y || (_("error"), u(E instanceof Error ? E.message : String(E)), (b = e.onError) == null || b.call(e, E));
-      }
-    }
-    return U(), () => {
-      y = !0;
-    };
-  }, [
-    e.mode,
-    e.wasm,
-    e.resolveArgv,
-    e.env,
-    e.size.cols,
-    e.size.rows,
-    e.onExit,
-    e.onError,
-    e.onStatusChange
-  ]);
-  const f = (($ = e.terminal.theme) == null ? void 0 : $.background) ?? "#1a1b26", l = ((L = e.terminal.theme) == null ? void 0 : L.foreground) ?? "#a9b1d6";
-  return e.mode === "static" ? /* @__PURE__ */ D(
-    "div",
-    {
-      className: t.className,
-      style: {
-        position: "relative",
-        background: f,
-        borderRadius: 6,
-        overflow: "hidden",
-        ...t.style
-      },
-      children: [
-        r === "loading" && /* @__PURE__ */ p("div", { style: N, children: "Loading…" }),
-        r === "error" && /* @__PURE__ */ D("div", { style: { ...N, color: "#f7768e" }, children: [
-          "Error: ",
-          c
-        ] }),
-        d !== null && /* @__PURE__ */ p(
-          "pre",
-          {
-            style: {
-              margin: 0,
-              padding: "0.5em",
-              fontFamily: e.terminal.fontFamily,
-              fontSize: e.terminal.fontSize,
-              color: l,
-              lineHeight: 1.2,
-              background: "transparent",
-              overflow: "auto"
-            },
-            dangerouslySetInnerHTML: { __html: d }
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ D(
+    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: t.className,
+      className: e.className,
       style: {
         position: "relative",
         display: "inline-block",
-        background: f,
+        background: ((v = t.terminal.theme) == null ? void 0 : v.background) ?? "#1a1b26",
         borderRadius: 6,
         overflow: "hidden",
-        ...t.style
+        ...e.style
       },
       children: [
-        /* @__PURE__ */ p("div", { ref: s, style: { display: r === "error" ? "none" : void 0 } }),
-        r === "loading" && /* @__PURE__ */ p("div", { style: N, children: "Loading…" }),
-        r === "error" && /* @__PURE__ */ D("div", { style: { ...N, color: "#f7768e" }, 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
         ] })
@@ -501,15 +349,15 @@ function ve(t) {
     }
   );
 }
-const N = {
+const j = {
   padding: "1rem",
   fontFamily: "monospace",
   fontSize: 14,
   color: "#a9b1d6"
 };
 export {
-  ve as TuiPreview,
-  K as WasiBridge,
-  ee as WasiExitError,
-  X as instantiateApp
+  ut as TuiPreview,
+  it as WasiBridge,
+  Q as WasiExitError,
+  ot as instantiateApp
 };

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@dkkoval/tui-preview",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React component for embedding interactive TUI apps via ghostty-web",
+  "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,

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("");
-}