ghostty-term — the live wasm terminal

Nothing re-implements VT here: parsing, grid state and scrollback live inside libghostty-vt; the component adds the browser-shaped pieces — DPR-aware cell metrics derived from the density kernels, rAF-batched dirty-row repaints, and the input bridge. The pty is yours: onData carries terminal input out (encoded keys, gated pastes, wheel), and the bind:this write() feeds pty output back in — the page's demo is a loopback answering through exactly that seam, no hidden shell.

Degradation is a typed state machine: data-state goes loading → ready | error, a failed wasm load renders a polite role="status" face carrying the GhosttyVTError message, and the children slot hands the degraded face to the consumer. The supply chain is the install section's contract — the wasm never enters git or the bundle source; the vite plugin pins its sha256 and serves it through the virtual:jixoai-ghostty module.

The axes story is this family's signature: SEVEN of the eight axes take lanes — density consumed as the cell-metric kernels (the one live ladder), size the §11 echo, the rest stamp-and-supply — and the eighth is the §13 shadow case: the theme prop is the shell-color OBJECT (absent-slot escape hatch), never the light/dark/system enum. The surface is typed-frozen under scoped .dark by design and the content is ANSI verbatim — a terminal keeps its colors. Kinship: terminal-card (the chrome paint law this page's window borrows) and code-card (the readonly render-side sibling).

Receipts: the density kernel ladder, the size echo (with the fixed --jx-text-base error voice), and the typed-frozen split were measured on this page's served DOM (probe, task 27); the supply-only rows carry grep receipts over ui/ghostty-term/ and vt-deps.ts. The adoption is the census batch A row (explicit-props W3-A); the theme shadow is the §13 no-rename precedent (the absent-slot contract, ghostty-term-defaults.svelte.ts).

<script lang="ts">
  import GhosttyTerm from '@ui/ghostty-term';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px) applies; at 48rem+ the md case (18px)
     wins — the §11 echo the root stamps (the cell math follows the
     density kernels, not this stamp) -->
<GhosttyTerm rows={3} cols={40} size={query({ md: 18 }, 13)} wasmUrl="https://invalid.jixoai.test/ghostty-vt.wasm" />

<script lang="ts">
  import GhosttyTerm from '@ui/ghostty-term';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px) applies; at 48rem+ the md case (18px)
     wins — the §11 echo the root stamps (the cell math follows the
     density kernels, not this stamp) -->
<GhosttyTerm rows={3} cols={40} size={query({ md: 18 }, 13)} wasmUrl="https://invalid.jixoai.test/ghostty-vt.wasm" />

<!-- ghostty-term: 7 of the 8 axes — 'theme' stays the family's own
     shell-theme OBJECT (background/foreground/…), never the axis enum;
     fontSize keeps its component-specific name (no collision) -->
<GhosttyTerm rows={3} cols={40} size={13} density="small" />