@dkkoval/tui-preview 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,93 +1,474 @@
-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;
+var it = Object.defineProperty;
+var ot = (e, t, n) => t in e ? it(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var F = (e, t, n) => ot(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsxs as O, jsx as H } from "react/jsx-runtime";
+import { useMemo as at, useRef as P, useState as $, useEffect as N } from "react";
+const S = 16, T = 80, tt = "/ghostty-vt.wasm", ct = 1, lt = 2, ht = 4, W = 8, K = 16, ut = 32, R = 64, Y = 128, ft = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+  "brightBlack",
+  "brightRed",
+  "brightGreen",
+  "brightYellow",
+  "brightBlue",
+  "brightMagenta",
+  "brightCyan",
+  "brightWhite"
+], wt = {
+  background: "#1a1b26",
+  foreground: "#a9b1d6",
+  cursor: "#c0caf5",
+  selectionBackground: "#33467c",
+  selectionForeground: "#c0caf5",
+  black: "#15161e",
+  red: "#f7768e",
+  green: "#9ece6a",
+  yellow: "#e0af68",
+  blue: "#7aa2f7",
+  magenta: "#bb9af7",
+  cyan: "#7dcfff",
+  white: "#a9b1d6",
+  brightBlack: "#414868",
+  brightRed: "#f7768e",
+  brightGreen: "#9ece6a",
+  brightYellow: "#e0af68",
+  brightBlue: "#7aa2f7",
+  brightMagenta: "#bb9af7",
+  brightCyan: "#7dcfff",
+  brightWhite: "#c0caf5"
+};
+class mt {
+  constructor(t, n) {
+    this.wasm = t, this.abi = n;
+  }
+  createTerminal(t, n, r) {
+    const o = this.wasm.ghostty_wasm_alloc_u8_array(this.abi.terminalConfigSize);
+    if (!o)
+      throw new Error("Failed to allocate terminal config.");
+    try {
+      const i = new DataView(this.wasm.memory.buffer);
+      let s = o;
+      i.setUint32(s, 1e4, !0), s += 4, i.setUint32(s, z(r.foreground), !0), s += 4, i.setUint32(s, z(r.background), !0), s += 4, i.setUint32(s, z(r.cursor), !0), s += 4;
+      for (const c of ft)
+        i.setUint32(s, z(r[c]), !0), s += 4;
+      const a = this.wasm.ghostty_terminal_new_with_config(t, n, o);
+      if (!a)
+        throw new Error("Failed to create libghostty terminal.");
+      return new dt(this.wasm, a, t, n, this.abi.cellSize);
+    } finally {
+      this.wasm.ghostty_wasm_free_u8_array(o, this.abi.terminalConfigSize);
+    }
+  }
 }
-const S = { cols: 80, rows: 24 }, P = {}, Z = [];
-function J(e) {
-  return "wasm" in e;
+class dt {
+  constructor(t, n, r, o, i) {
+    F(this, "viewportPtr", 0);
+    F(this, "viewportLen", 0);
+    this.wasm = t, this.handle = n, this.cols = r, this.rows = o, this.cellSize = i;
+  }
+  write(t) {
+    const n = typeof t == "string" ? new TextEncoder().encode(t) : t;
+    if (n.length === 0) return;
+    const r = this.wasm.ghostty_wasm_alloc_u8_array(n.length);
+    if (!r)
+      throw new Error("Failed to allocate libghostty write buffer.");
+    try {
+      new Uint8Array(this.wasm.memory.buffer).set(n, r), this.wasm.ghostty_terminal_write(this.handle, r, n.length);
+    } finally {
+      this.wasm.ghostty_wasm_free_u8_array(r, n.length);
+    }
+  }
+  resize(t, n) {
+    t === this.cols && n === this.rows || (this.cols = t, this.rows = n, this.wasm.ghostty_terminal_resize(this.handle, t, n), this.releaseViewport());
+  }
+  hasResponse() {
+    return this.wasm.ghostty_terminal_has_response(this.handle);
+  }
+  isDirty() {
+    return this.wasm.ghostty_render_state_update(this.handle) !== 0;
+  }
+  readResponse(t = 4096) {
+    const n = this.wasm.ghostty_wasm_alloc_u8_array(t);
+    if (!n)
+      throw new Error("Failed to allocate libghostty response buffer.");
+    try {
+      const r = this.wasm.ghostty_terminal_read_response(this.handle, n, t);
+      if (r <= 0) return null;
+      const o = new Uint8Array(this.wasm.memory.buffer, n, r);
+      return new TextDecoder().decode(o);
+    } finally {
+      this.wasm.ghostty_wasm_free_u8_array(n, t);
+    }
+  }
+  getViewportData() {
+    const t = this.wasm.ghostty_render_state_get_cols(this.handle), n = this.wasm.ghostty_render_state_get_rows(this.handle);
+    this.cols = t, this.rows = n;
+    const r = Math.max(1, t * n * this.cellSize);
+    if ((r > this.viewportLen || this.viewportPtr === 0) && (this.releaseViewport(), this.viewportPtr = this.wasm.ghostty_wasm_alloc_u8_array(r), this.viewportLen = r, !this.viewportPtr))
+      throw new Error("Failed to allocate libghostty viewport buffer.");
+    const o = this.wasm.ghostty_render_state_get_viewport(this.handle, this.viewportPtr, this.viewportLen), i = new Uint8Array(o);
+    if (o > 0) {
+      const s = new Uint8Array(this.wasm.memory.buffer, this.viewportPtr, o);
+      i.set(s);
+    }
+    return this.wasm.ghostty_render_state_mark_clean(this.handle), {
+      cols: t,
+      rows: n,
+      buffer: i
+    };
+  }
+  dispose() {
+    this.releaseViewport(), this.wasm.ghostty_terminal_free(this.handle);
+  }
+  releaseViewport() {
+    this.viewportPtr !== 0 && (this.wasm.ghostty_wasm_free_u8_array(this.viewportPtr, this.viewportLen), this.viewportPtr = 0, this.viewportLen = 0);
+  }
 }
-function I(e) {
-  const t = e ?? Z;
-  return typeof t == "function" ? t : () => t;
+class gt {
+  constructor(t, n, r, o, i, s) {
+    F(this, "ctx");
+    F(this, "dpr");
+    F(this, "metrics");
+    this.canvas = t, this.cols = n, this.rows = r, this.fontSize = o, this.fontFamily = i, this.theme = s;
+    const a = t.getContext("2d");
+    if (!a)
+      throw new Error("Failed to create 2D canvas context.");
+    this.ctx = a, this.dpr = window.devicePixelRatio || 1, this.metrics = this.measureFont(), this.resizeCanvas(n, r);
+  }
+  get cellSize() {
+    return { w: this.metrics.width, h: this.metrics.height };
+  }
+  render(t) {
+    (t.cols !== this.cols || t.rows !== this.rows) && (this.cols = t.cols, this.rows = t.rows, this.resizeCanvas(t.cols, t.rows));
+    const { cols: n, rows: r, buffer: o } = t, i = new DataView(o.buffer, o.byteOffset, o.byteLength), s = this.ctx, a = this.metrics.width, c = this.metrics.height;
+    s.fillStyle = this.theme.background, s.fillRect(0, 0, n * a, r * c);
+    for (let l = 0; l < r; l++)
+      for (let u = 0; u < n; u++) {
+        const h = (l * n + u) * S, f = i.getUint8(h + 11);
+        if (f === 0) continue;
+        const w = i.getUint8(h + 10), b = L(i, h + 4), y = L(i, h + 7), _ = x(w, K), g = x(w, W) ? D(b) : this.theme.foreground, d = x(w, R) ? D(y) : this.theme.background;
+        (_ || x(w, R)) && (s.fillStyle = _ ? g : d, s.fillRect(u * a, l * c, f * a, c));
+      }
+    for (let l = 0; l < r; l++)
+      for (let u = 0; u < n; u++) {
+        const h = (l * n + u) * S, f = i.getUint8(h + 11);
+        if (f === 0) continue;
+        const w = i.getUint8(h + 10);
+        if (x(w, ut)) continue;
+        const b = i.getUint32(h, !0);
+        if (b === 0) continue;
+        const y = x(w, K), _ = L(i, h + 4), g = L(i, h + 7), d = x(w, W) ? D(_) : this.theme.foreground, m = x(w, R) ? D(g) : this.theme.background;
+        s.fillStyle = y ? m : d;
+        let p = "";
+        x(w, lt) && (p += "italic "), x(w, ct) && (p += "bold "), s.font = `${p}${this.fontSize}px ${this.fontFamily}`, x(w, Y) && (s.globalAlpha = 0.5);
+        const E = Et(b);
+        if (s.fillText(E, u * a, l * c + this.metrics.baseline), x(w, Y) && (s.globalAlpha = 1), x(w, ht)) {
+          const v = l * c + this.metrics.baseline + 2;
+          s.strokeStyle = s.fillStyle, s.lineWidth = 1, s.beginPath(), s.moveTo(u * a, v), s.lineTo(u * a + f * a, v), s.stroke();
+        }
+      }
+  }
+  dispose() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  measureFont() {
+    this.ctx.font = `${this.fontSize}px ${this.fontFamily}`;
+    const t = this.ctx.measureText("M"), n = Math.ceil(t.width), r = t.actualBoundingBoxAscent || this.fontSize * 0.8, o = t.actualBoundingBoxDescent || this.fontSize * 0.2;
+    return {
+      width: n,
+      height: Math.ceil(r + o) + 2,
+      baseline: Math.ceil(r) + 1
+    };
+  }
+  resizeCanvas(t, n) {
+    const r = t * this.metrics.width, o = n * this.metrics.height;
+    this.canvas.width = Math.max(1, Math.floor(r * this.dpr)), this.canvas.height = Math.max(1, Math.floor(o * this.dpr)), this.canvas.style.width = `${r}px`, this.canvas.style.height = `${o}px`, this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0), this.ctx.textBaseline = "alphabetic", this.ctx.textAlign = "left";
+  }
 }
-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)
+function et(e, t) {
+  const r = document.createElement("canvas").getContext("2d");
+  if (!r)
+    return {
+      w: Math.ceil(e * 0.6),
+      h: Math.ceil(e * 1.2)
+    };
+  r.font = `${e}px ${t}`;
+  const o = r.measureText("M"), i = Math.ceil(o.width), s = o.actualBoundingBoxAscent || e * 0.8, a = o.actualBoundingBoxDescent || e * 0.2;
+  return { w: i, h: Math.ceil(s + a) + 2 };
+}
+const Q = /* @__PURE__ */ new Map();
+function yt(e = tt) {
+  const t = e.toString(), n = Q.get(t);
+  if (n)
+    return n;
+  const r = (async () => {
+    const o = await fetch(e);
+    if (!o.ok)
+      throw new Error(`Failed to load libghostty wasm: ${o.status} ${o.statusText}`);
+    const i = await o.arrayBuffer();
+    if (i.byteLength === 0)
+      throw new Error("libghostty wasm is empty.");
+    const s = await WebAssembly.compile(i), c = (await WebAssembly.instantiate(s, {
+      env: {
+        log: () => {
+        }
+      }
+    })).exports;
+    if (!c.memory || !c.ghostty_terminal_new || !c.ghostty_render_state_get_viewport)
+      throw new Error("Invalid libghostty wasm exports.");
+    return bt(c), new mt(c, {
+      cellSize: S,
+      terminalConfigSize: T
+    });
+  })();
+  return Q.set(t, r), r;
+}
+async function _t(e) {
+  var _, g;
+  const t = await yt(e.wasmUrl ?? tt), n = { ...wt, ...e.theme };
+  let r, o;
+  const i = et(e.fontSize, e.fontFamily);
+  e.widthPx != null && e.heightPx != null ? (r = Math.max(1, Math.floor(e.widthPx / i.w)), o = Math.max(1, Math.floor(e.heightPx / i.h))) : (r = e.cols ?? 80, o = e.rows ?? 24), e.container.innerHTML = "";
+  const s = document.createElement("canvas");
+  s.style.display = "block", s.style.outline = "none", s.tabIndex = e.interactive ? 0 : -1, e.container.appendChild(s);
+  const a = t.createTerminal(r, o, n), c = new gt(
+    s,
+    r,
+    o,
+    e.fontSize,
+    e.fontFamily,
+    n
+  );
+  e.showCursor || a.write("\x1B[?25l"), c.render(a.getViewportData());
+  const l = ((_ = window.requestAnimationFrame) == null ? void 0 : _.bind(window)) ?? ((d) => window.setTimeout(d, 16)), u = ((g = window.cancelAnimationFrame) == null ? void 0 : g.bind(window)) ?? window.clearTimeout.bind(window);
+  let h = null, f = !1;
+  const w = () => {
+    h = null, !(f || !a.isDirty()) && c.render(a.getViewportData());
+  }, b = () => {
+    h !== null || f || (h = l(w));
+  }, y = e.interactive ? vt(s, (d) => {
+    var m;
+    return (m = e.onInput) == null ? void 0 : m.call(e, d);
+  }) : () => {
+  };
+  return {
+    cols: r,
+    rows: o,
+    cellSize: c.cellSize,
+    write(d) {
+      if (f) return;
+      const m = e.convertEol ? pt(d) : d;
+      a.write(m), b();
+    },
+    drainResponses() {
+      if (f) return [];
+      const d = [];
+      for (; a.hasResponse(); ) {
+        const m = a.readResponse();
+        if (!m) break;
+        d.push(m);
+      }
+      return d;
+    },
+    dispose() {
+      f = !0, h !== null && (u(h), h = null), y(), c.dispose(), a.dispose(), s.parentElement === e.container && e.container.removeChild(s);
     }
-  } : { fit: "container", size: S };
+  };
+}
+function bt(e) {
+  const t = e.ghostty_wasm_alloc_u8_array(T);
+  if (!t)
+    throw new Error("Failed to allocate ABI probe config buffer.");
+  let n = 0, r = 0, o = 0, i = 0;
+  const s = 1122867, a = 4478310, [c, l, u] = X(s), [h, f, w] = X(a);
+  try {
+    new Uint8Array(e.memory.buffer, t, T).fill(0);
+    const b = new DataView(e.memory.buffer, t, T);
+    if (b.setUint32(0, 16, !0), b.setUint32(4, s, !0), b.setUint32(8, a, !0), b.setUint32(12, 7833753, !0), n = e.ghostty_terminal_new_with_config(2, 1, t), !n)
+      throw new Error("Failed to create ABI probe terminal.");
+    const y = new TextEncoder().encode("\x1B[7mX");
+    if (o = y.length, r = e.ghostty_wasm_alloc_u8_array(o), !r)
+      throw new Error("Failed to allocate ABI probe write buffer.");
+    if (new Uint8Array(e.memory.buffer, r, o).set(y), e.ghostty_terminal_write(n, r, o), i = e.ghostty_wasm_alloc_u8_array(S), !i)
+      throw new Error("Failed to allocate ABI probe viewport buffer.");
+    const _ = e.ghostty_render_state_get_viewport(n, i, S);
+    if (_ !== S)
+      throw new Error(
+        `Incompatible libghostty ABI: expected cell size ${S}, got ${_}.`
+      );
+    const g = new DataView(e.memory.buffer, i, S), d = g.getUint8(10), m = x(d, W), p = x(d, R), E = g.getUint8(4) === c && g.getUint8(5) === l && g.getUint8(6) === u, v = g.getUint8(7) === h && g.getUint8(8) === f && g.getUint8(9) === w;
+    if (!m || !p || !E || !v)
+      throw new Error("Incompatible libghostty ABI: terminal config layout mismatch.");
+  } finally {
+    i && e.ghostty_wasm_free_u8_array(i, S), r && o > 0 && e.ghostty_wasm_free_u8_array(r, o), n && e.ghostty_terminal_free(n), e.ghostty_wasm_free_u8_array(t, T);
+  }
+}
+function pt(e) {
+  return e.replace(/\r?\n/g, `\r
+`);
+}
+function z(e) {
+  if (e.startsWith("#")) {
+    let i = e.slice(1);
+    i.length === 3 && (i = `${i[0]}${i[0]}${i[1]}${i[1]}${i[2]}${i[2]}`);
+    const s = Number.parseInt(i, 16);
+    return Number.isNaN(s) ? 0 : s;
+  }
+  const t = e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (!t) return 0;
+  const n = Number.parseInt(t[1], 10), r = Number.parseInt(t[2], 10), o = Number.parseInt(t[3], 10);
+  return n << 16 | r << 8 | o;
 }
-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`."
-  ));
+  return [e >> 16 & 255, e >> 8 & 255, e & 255];
 }
-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
-    };
+function L(e, t) {
+  return {
+    r: e.getUint8(t),
+    g: e.getUint8(t + 1),
+    b: e.getUint8(t + 2)
+  };
+}
+function x(e, t) {
+  return (e & t) !== 0;
+}
+function D(e) {
+  return `rgb(${e.r}, ${e.g}, ${e.b})`;
+}
+function Et(e) {
+  try {
+    return String.fromCodePoint(e);
+  } catch {
+    return " ";
   }
-  const { fit: t, size: n } = K(e);
+}
+function vt(e, t) {
+  const n = () => e.focus(), r = (i) => {
+    var a;
+    const s = (a = i.clipboardData) == null ? void 0 : a.getData("text");
+    s && (i.preventDefault(), t(s));
+  }, o = (i) => {
+    const s = xt(i);
+    s && (i.preventDefault(), t(s));
+  };
+  return e.addEventListener("mousedown", n), e.addEventListener("paste", r), e.addEventListener("keydown", o), () => {
+    e.removeEventListener("mousedown", n), e.removeEventListener("paste", r), e.removeEventListener("keydown", o);
+  };
+}
+function xt(e) {
+  if (e.isComposing || e.metaKey) return null;
+  let t = null;
+  switch (e.key) {
+    case "Enter":
+      t = "\r";
+      break;
+    case "Backspace":
+      t = "";
+      break;
+    case "Tab":
+      t = e.shiftKey ? "\x1B[Z" : "	";
+      break;
+    case "Escape":
+      t = "\x1B";
+      break;
+    case "ArrowUp":
+      t = "\x1B[A";
+      break;
+    case "ArrowDown":
+      t = "\x1B[B";
+      break;
+    case "ArrowRight":
+      t = "\x1B[C";
+      break;
+    case "ArrowLeft":
+      t = "\x1B[D";
+      break;
+    case "Home":
+      t = "\x1B[H";
+      break;
+    case "End":
+      t = "\x1B[F";
+      break;
+    case "Delete":
+      t = "\x1B[3~";
+      break;
+    case "PageUp":
+      t = "\x1B[5~";
+      break;
+    case "PageDown":
+      t = "\x1B[6~";
+      break;
+  }
+  return !t && e.ctrlKey && (t = At(e.key)), !t && e.key.length === 1 && !e.ctrlKey && (t = e.key), t ? e.altKey && !t.startsWith("\x1B") ? `\x1B${t}` : t : null;
+}
+function At(e) {
+  if (e.length !== 1) return null;
+  const t = e.toUpperCase();
+  if (t >= "A" && t <= "Z")
+    return String.fromCharCode(t.charCodeAt(0) - 64);
+  switch (e) {
+    case "@":
+    case " ":
+      return "\0";
+    case "[":
+      return "\x1B";
+    case "\\":
+      return "";
+    case "]":
+      return "";
+    case "^":
+      return "";
+    case "_":
+      return "";
+    default:
+      return null;
+  }
+}
+const Z = { cols: 80, rows: 24 }, Ut = {}, St = [];
+function Ft(e) {
+  return e === "static" ? "static" : "interactive";
+}
+function Bt(e) {
+  const t = e ?? St;
+  return typeof t == "function" ? t : () => t;
+}
+function Ct(e) {
+  var o, i, s, a, c, l, u;
+  const t = e.fit ?? (e.size ? "none" : "container"), n = {
+    cols: Math.max(1, ((o = e.size) == null ? void 0 : o.cols) ?? Z.cols),
+    rows: Math.max(1, ((i = e.size) == null ? void 0 : i.rows) ?? Z.rows)
+  }, r = Ft(e.mode);
   return {
-    wasm: e.app,
-    env: e.env ?? P,
-    interactive: e.interactive ?? !0,
-    mode: "terminal",
+    wasm: e.wasm,
+    env: e.env ?? Ut,
+    interactive: r === "static" ? !1 : e.interactive ?? !0,
+    mode: r,
     fit: t,
     size: n,
     terminal: {
-      fontSize: e.fontSize ?? 14,
-      fontFamily: e.fontFamily ?? "monospace",
-      cursorBlink: !0,
-      convertEol: !0,
-      theme: e.theme
+      fontSize: ((s = e.terminal) == null ? void 0 : s.fontSize) ?? 14,
+      fontFamily: ((a = e.terminal) == null ? void 0 : a.fontFamily) ?? "monospace",
+      wasmUrl: (c = e.terminal) == null ? void 0 : c.wasmUrl,
+      convertEol: ((l = e.terminal) == null ? void 0 : l.convertEol) ?? !0,
+      theme: (u = e.terminal) == null ? void 0 : u.theme
     },
-    resolveArgv: I(e.args),
+    resolveArgv: Bt(e.argv),
     onExit: e.onExit,
     onError: e.onError,
-    onStatusChange: e.onStatusChange,
-    usedLegacyProps: !0
+    onStatusChange: e.onStatusChange
   };
 }
-const d = 0, et = 6, x = 8, nt = 0, O = 1, rt = 2;
-class it {
+const A = 0, Tt = 6, C = 8, Mt = 1, kt = 0, j = 1, It = 2;
+class zt {
   constructor(t) {
-    k(this, "inputQueue", []);
-    k(this, "memory");
+    F(this, "inputQueue", []);
+    F(this, "memory");
     this.opts = t;
   }
   /** Push keyboard data from the terminal into the app's stdin */
@@ -109,83 +490,83 @@ class it {
   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;
+        const { args: r } = this.opts, o = new TextEncoder(), i = r.reduce((s, a) => s + o.encode(a).length + 1, 0);
+        return this.view().setUint32(t, r.length, !0), this.view().setUint32(n, i, !0), A;
       },
       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;
+        const r = new TextEncoder(), o = this.u8(), i = this.view();
+        let s = n;
+        return this.opts.args.forEach((a, c) => {
+          const l = r.encode(a);
+          o.set(l, s), o[s + l.length] = 0, i.setUint32(t + c * 4, s, !0), s += l.length + 1;
+        }), A;
       },
       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;
+        const r = this.envEntries(), o = new TextEncoder(), i = r.reduce((s, a) => s + o.encode(a).length + 1, 0);
+        return this.view().setUint32(t, r.length, !0), this.view().setUint32(n, i, !0), A;
       },
       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;
+        const r = new TextEncoder(), o = this.u8(), i = this.view();
+        let s = n;
+        return this.envEntries().forEach((a, c) => {
+          const l = r.encode(a);
+          o.set(l, s), o[s + l.length] = 0, i.setUint32(t + c * 4, s, !0), s += l.length + 1;
+        }), A;
       },
-      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;
+      fd_write: (t, n, r, o) => {
+        if (t !== j && t !== It) return C;
+        const i = this.view(), s = this.u8();
+        let a = 0;
+        const c = [];
+        for (let h = 0; h < r; h++) {
+          const f = i.getUint32(n + h * 8, !0), w = i.getUint32(n + h * 8 + 4, !0);
+          c.push(s.slice(f, f + w)), a += 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();
+        const l = new Uint8Array(a);
         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;
+        for (const h of c)
+          l.set(h, u), u += h.length;
+        return t === j ? this.opts.stdout(l) : this.opts.stderr(l), i.setUint32(o, a, !0), A;
+      },
+      fd_read: (t, n, r, o) => {
+        if (t !== kt) return C;
+        const i = this.inputQueue[0];
+        if (!i) return Tt;
+        const s = this.view(), a = this.u8();
+        let c = 0;
+        for (let l = 0; l < r && c < i.length; l++) {
+          const u = s.getUint32(n + l * 8, !0), h = s.getUint32(n + l * 8 + 4, !0), f = Math.min(h, i.length - c);
+          a.set(i.subarray(c, c + f), u), c += f;
         }
-        return o.setUint32(s, u, !0), d;
+        return c >= i.length ? this.inputQueue.shift() : c > 0 && (this.inputQueue[0] = i.subarray(c)), s.setUint32(o, c, !0), A;
       },
-      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++;
+      poll_oneoff: (t, n, r, o) => {
+        const i = this.view();
+        let s = 0;
+        for (let a = 0; a < r; a++) {
+          const c = t + a * 48, l = i.getUint8(c + 8);
+          if (l === Mt && this.inputQueue.length > 0) {
+            const u = n + s * 32;
+            i.setBigUint64(u, i.getBigUint64(c, !0), !0), i.setUint16(u + 8, 0, !0), i.setUint8(u + 10, l), s++;
           }
         }
-        return r.setUint32(s, o, !0), d;
+        return i.setUint32(o, s, !0), A;
       },
       proc_exit: (t) => {
-        throw this.opts.onExit(t), new Q(t);
+        throw this.opts.onExit(t), new nt(t);
       },
-      random_get: (t, n) => (crypto.getRandomValues(new Uint8Array(this.memory.buffer, t, n)), d),
+      random_get: (t, n) => (crypto.getRandomValues(new Uint8Array(this.memory.buffer, t, n)), A),
       // 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;
+      fd_close: () => A,
+      fd_seek: () => A,
+      fd_fdstat_get: (t, n) => (this.view().setUint8(n, t <= 2 ? 2 : 0), A),
+      fd_prestat_get: () => C,
+      fd_prestat_dir_name: () => C,
+      path_open: () => C,
+      sched_yield: () => A,
+      clock_time_get: (t, n, r) => {
+        const o = BigInt(Date.now()) * 1000000n;
+        return this.view().setBigUint64(r, o, !0), A;
       }
     };
   }
@@ -195,123 +576,128 @@ class it {
       COLORTERM: "truecolor",
       ...this.opts.env
     };
-    return Object.entries(t).map(([n, i]) => `${n}=${i}`);
+    return Object.entries(t).map(([n, r]) => `${n}=${r}`);
   }
 }
-class Q extends Error {
+class nt extends Error {
   constructor(t) {
     super(`WASI exit: ${t}`), this.code = t;
   }
 }
-const N = /* @__PURE__ */ new Map();
-async function ot(e, t) {
+const q = /* @__PURE__ */ new Map();
+async function Lt(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);
+  let r = q.get(n);
+  if (!r) {
+    const a = await fetch(e);
+    if (!a.ok)
+      throw new Error(`Failed to load app wasm: ${a.status} ${a.statusText}`);
+    const c = await a.arrayBuffer();
+    if (c.byteLength === 0)
+      throw new Error("App wasm is empty.");
+    r = await WebAssembly.compile(c), q.set(n, r);
   }
-  const s = {
+  const o = {
     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");
+  }, i = await WebAssembly.instantiate(r, o);
+  t.attachMemory(i.exports.memory);
+  const s = i.exports._start;
+  if (!s) throw new Error("WASM module has no _start export");
   return {
     run: async () => {
       try {
-        o();
-      } catch (c) {
-        if (!(c instanceof Q)) throw c;
+        s();
+      } catch (a) {
+        if (!(a instanceof nt)) throw a;
       }
     }
   };
 }
-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(() => {
+function $t(e) {
+  var h;
+  const t = at(() => Ct(e), [e]), n = P(null), r = P(null), [o, i] = $("loading"), [s, a] = $(""), c = P(null), [l, u] = $(
+    t.fit === "container" ? null : t.size
+  );
+  return N(() => {
+    u(t.fit === "container" ? null : t.size);
+  }, [t.fit, t.size.cols, t.size.rows]), N(() => {
     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))
-        });
-      }
+    const f = n.current, w = et(t.terminal.fontSize, t.terminal.fontFamily), b = (g, d) => {
+      var M, k;
+      const m = ((M = c.current) == null ? void 0 : M.w) ?? w.w, p = ((k = c.current) == null ? void 0 : k.h) ?? w.h, E = Math.max(1, Math.floor(g / m)), v = Math.max(1, Math.floor(d / p));
+      u((B) => B && B.cols === E && B.rows === v ? B : { cols: E, rows: v });
+    }, y = f.getBoundingClientRect();
+    y.width > 0 && y.height > 0 && b(y.width, y.height);
+    const _ = new ResizeObserver(([g]) => {
+      const { width: d, height: m } = g.contentRect;
+      d > 0 && m > 0 && b(d, m);
     });
-    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);
+    return _.observe(f), () => _.disconnect();
+  }, [t.fit, t.terminal.fontSize, t.terminal.fontFamily]), N(() => {
+    if (!l || !r.current) return;
+    let f = !1, w = null;
+    const b = r.current, y = l, _ = (m) => {
+      var p;
+      i(m), (p = t.onStatusChange) == null || p.call(t, m);
+    }, g = (m) => {
+      var p;
+      _("error"), a(m instanceof Error ? m.message : String(m)), (p = t.onError) == null || p.call(t, m);
     };
-    E("loading"), u("");
-    async function b() {
+    _("loading"), a("");
+    async function d() {
       try {
-        const f = await q();
-        if (w) return;
-        y.innerHTML = "";
-        const l = new f.Terminal({
-          cols: _.cols,
-          rows: _.rows,
+        let m = y.cols, p = y.rows, E = null;
+        const v = await _t({
+          container: b,
+          cols: y.cols,
+          rows: y.rows,
           fontSize: t.terminal.fontSize,
           fontFamily: t.terminal.fontFamily,
           theme: t.terminal.theme,
-          disableStdin: !t.interactive,
-          cursorBlink: t.terminal.cursorBlink,
-          convertEol: t.terminal.convertEol
+          convertEol: t.terminal.convertEol,
+          interactive: t.mode !== "static" && t.interactive,
+          showCursor: t.mode !== "static",
+          wasmUrl: t.terminal.wasmUrl,
+          onInput: (U) => E == null ? void 0 : E.pushInput(U)
         });
-        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
-          });
+        if (f) {
+          v.dispose();
+          return;
         }
-        const V = t.resolveArgv({ cols: A, rows: U }), F = new TextDecoder(), B = new it({
-          args: [t.wasm.toString(), ...V],
+        w = () => v.dispose(), m = v.cols, p = v.rows, c.current = v.cellSize;
+        const M = t.resolveArgv({ cols: m, rows: p }), k = new TextDecoder(), B = new TextDecoder(), G = (U, I) => {
+          const V = I.decode(U, { stream: !0 });
+          V && v.write(V);
+          for (const st of v.drainResponses())
+            E == null || E.pushInput(st);
+        };
+        E = new zt({
+          args: [t.wasm.toString(), ...M],
           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));
+          stdout: (U) => G(U, k),
+          stderr: (U) => G(U, B),
+          onExit: (U) => {
+            var I;
+            f || (_("exited"), (I = t.onExit) == null || I.call(t, U));
           }
         });
-        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);
+        const rt = await Lt(t.wasm, E);
+        if (f) return;
+        _("running"), queueMicrotask(() => {
+          f || rt.run().catch((U) => {
+            f || g(U);
           });
         });
-      } catch (f) {
-        w || z(f);
+      } catch (m) {
+        f || g(m);
       }
     }
-    return b(), () => {
-      var f;
-      w = !0, (f = s.current) == null || f.dispose(), s.current = null;
+    return d(), () => {
+      f = !0, w == null || w(), w = null;
     };
   }, [
     t.mode,
-    h,
+    l,
     t.wasm,
     t.resolveArgv,
     t.env,
@@ -323,41 +709,41 @@ function ut(e) {
     t.terminal.fontSize,
     t.terminal.fontFamily,
     t.terminal.theme,
-    t.terminal.cursorBlink,
+    t.terminal.wasmUrl,
     t.terminal.convertEol
-  ]), /* @__PURE__ */ D(
+  ]), /* @__PURE__ */ O(
     "div",
     {
       ref: n,
       className: e.className,
       style: {
         position: "relative",
-        display: "inline-block",
-        background: ((v = t.terminal.theme) == null ? void 0 : v.background) ?? "#1a1b26",
+        display: t.fit === "container" ? "block" : "inline-block",
+        background: ((h = t.terminal.theme) == null ? void 0 : h.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: [
+        /* @__PURE__ */ H("div", { ref: r, style: { display: o === "error" ? "none" : void 0 } }),
+        o === "loading" && /* @__PURE__ */ H("div", { style: J, children: "Loading…" }),
+        o === "error" && /* @__PURE__ */ O("div", { style: { ...J, color: "#f7768e" }, children: [
           "Error: ",
-          c
+          s
         ] })
       ]
     }
   );
 }
-const j = {
+const J = {
   padding: "1rem",
   fontFamily: "monospace",
   fontSize: 14,
   color: "#a9b1d6"
 };
 export {
-  ut as TuiPreview,
-  it as WasiBridge,
-  Q as WasiExitError,
-  ot as instantiateApp
+  $t as TuiPreview,
+  zt as WasiBridge,
+  nt as WasiExitError,
+  Lt as instantiateApp
 };