@deckbuilderkit/terminal 0.0.0-stage → 0.1.0

package/src/server/sessions.ts

@@ -0,0 +1,318 @@
+import { invalid, notFound } from '@deckbuilderkit/server-core';
+import { SerializeAddon } from '@xterm/addon-serialize';
+import { Terminal } from '@xterm/headless';
+import type { SessionInfo } from '../protocol.ts';
+import { spawnPty, type Pty } from './pty.ts';
+
+export type { SessionInfo };
+
+export type ViewKind = 'interactive' | 'preview';
+
+export interface Sink {
+  send(frame: string | Uint8Array): void;
+  close(): void;
+}
+
+export interface CreateOptions {
+  cmd: string[];
+  cwd: string;
+  cols: number;
+  rows: number;
+  env?: Record<string, string>;
+  label: string;
+  launcher?: string;
+  meta?: Record<string, unknown>;
+  profile?: string;
+  shell?: string;
+}
+
+const MAX_CWD = 4096;
+
+/** The local path of an OSC 7 `file://host/path` payload (Windows drive paths get backslashes), or null. */
+export function cwdFromOsc7(data: string): string | null {
+  if (!data.startsWith('file://') || data.length > MAX_CWD) return null;
+  const rest = data.slice('file://'.length);
+  const slash = rest.search(/[/\\]/);
+  if (slash < 0) return null;
+  let path = rest.slice(slash);
+  try {
+    path = decodeURIComponent(path);
+  } catch {}
+  if (/^[/\\][A-Za-z]:/.test(path)) path = path.slice(1).replace(/\//g, '\\');
+  if (/^[A-Za-z]:$/.test(path)) path += '\\';
+  return path && !path.includes('\0') ? path : null;
+}
+
+export interface Session {
+  readonly id: string;
+  readonly cwd: string;
+  readonly createdAt: number;
+}
+
+export interface TerminalSessions {
+  create(opts: CreateOptions): Session;
+  get(id: string): Session | undefined;
+  list(): SessionInfo[];
+  attach(id: string, sink: Sink, view: ViewKind): void;
+  detach(id: string, sink: Sink): void;
+  write(id: string, sink: Sink, data: string | Uint8Array): void;
+  resize(id: string, sink: Sink, cols: number, rows: number): void;
+  /** Drops the replay buffer's scrollback (the interactive view cleared its screen). */
+  clear(id: string, sink: Sink): void;
+  close(id: string, sink?: Sink): void;
+  closeAll(): void;
+  setLabel(id: string, label: string): void;
+  setMeta(id: string, meta: Record<string, unknown> | undefined): void;
+}
+
+export interface TerminalSessionsOptions {
+  spawn?: typeof spawnPty;
+  max?: number;
+  now?: () => number;
+}
+
+const SCROLLBACK = 5000;
+const MAX_LABEL = 80;
+const MAX_META_BYTES = 4096;
+
+interface Viewer {
+  sink: Sink;
+  view: ViewKind;
+  ready: boolean;
+  exitSent: boolean;
+}
+
+interface Entry extends Session {
+  cwd: string;
+  profile?: string;
+  shell?: string;
+  running?: boolean;
+  pty: Pty;
+  term: Terminal;
+  serializer: SerializeAddon;
+  label: string;
+  launcher?: string;
+  meta?: Record<string, unknown>;
+  cols: number;
+  rows: number;
+  exited: number | null | undefined;
+  title: string;
+  bells: number;
+  lastOutputAt: number;
+  viewers: Viewer[];
+}
+
+const randomId = () => Array.from(crypto.getRandomValues(new Uint8Array(8)), (b) => b.toString(16).padStart(2, '0')).join('');
+
+const control = (msg: Record<string, unknown>) => JSON.stringify(msg);
+
+function checkMeta(meta: Record<string, unknown> | undefined): void {
+  if (meta !== undefined && JSON.stringify(meta).length > MAX_META_BYTES) {
+    throw invalid('terminalMeta', 'Session metadata is too large');
+  }
+}
+
+export function terminalSessions({ spawn = spawnPty, max = 20, now = Date.now }: TerminalSessionsOptions = {}): TerminalSessions {
+  const entries = new Map<string, Entry>();
+
+  const must = (id: string): Entry => {
+    const e = entries.get(id);
+    if (!e) throw notFound('terminalSession', 'No such terminal session');
+    return e;
+  };
+
+  const interactive = (e: Entry) => e.viewers.find((v) => v.view === 'interactive');
+
+  function broadcast(e: Entry, frame: string | Uint8Array): void {
+    for (const v of e.viewers) if (v.ready) v.sink.send(frame);
+  }
+
+  function create(opts: CreateOptions): Session {
+    if (entries.size >= max) reapExited();
+    if (entries.size >= max) throw invalid('terminalLimit', 'Too many terminal sessions', { max });
+    checkMeta(opts.meta);
+    const pty = spawn(opts.cmd, opts.cwd, opts.cols, opts.rows, opts.env);
+    const term = new Terminal({ cols: opts.cols, rows: opts.rows, scrollback: SCROLLBACK, allowProposedApi: true });
+    const serializer = new SerializeAddon();
+    term.loadAddon(serializer);
+    const createdAt = now();
+    const e: Entry = {
+      id: randomId(),
+      cwd: opts.cwd,
+      createdAt,
+      pty,
+      term,
+      serializer,
+      label: opts.label.slice(0, MAX_LABEL),
+      launcher: opts.launcher,
+      meta: opts.meta,
+      profile: opts.profile,
+      shell: opts.shell,
+      cols: opts.cols,
+      rows: opts.rows,
+      exited: undefined,
+      title: '',
+      bells: 0,
+      lastOutputAt: createdAt,
+      viewers: [],
+    };
+    entries.set(e.id, e);
+
+    // The interactive client answers terminal queries itself; headless answers only when none is attached.
+    term.onData((reply) => {
+      if (!interactive(e) && e.exited === undefined) pty.write(reply);
+    });
+    term.onTitleChange((title) => {
+      e.title = title;
+      broadcast(e, control({ type: 'title', title }));
+    });
+    term.onBell(() => {
+      e.bells++;
+    });
+    // Shell integration: OSC 7 reports the cwd, OSC 133 C/D bracket a running command.
+    term.parser.registerOscHandler(7, (data) => {
+      const cwd = cwdFromOsc7(data);
+      if (cwd) e.cwd = cwd;
+      return true;
+    });
+    term.parser.registerOscHandler(133, (data) => {
+      const mark = data.split(';', 1)[0];
+      if (mark === 'C') e.running = true;
+      else if (mark === 'D' || mark === 'A') e.running = false;
+      return true;
+    });
+
+    pty.onData((data) => {
+      const chunk = data.slice();
+      e.lastOutputAt = now();
+      // Viewers get the bytes after the replay state has parsed them, so an attach never sees a gap.
+      try {
+        term.write(chunk, () => broadcast(e, chunk));
+      } catch {
+        close(e.id);
+      }
+    });
+    pty.onExit((code) => {
+      if (e.exited !== undefined) return;
+      e.exited = code;
+      term.write('', () => {
+        const frame = control({ type: 'exit', code });
+        for (const v of e.viewers) {
+          if (v.ready && !v.exitSent) v.sink.send(frame);
+          v.exitSent = true;
+        }
+      });
+    });
+    return e;
+  }
+
+  function attach(id: string, sink: Sink, view: ViewKind): void {
+    const e = must(id);
+    if (view === 'interactive') {
+      const prev = interactive(e);
+      if (prev) {
+        e.viewers = e.viewers.filter((v) => v !== prev);
+        prev.sink.close();
+      }
+    }
+    sink.send(control({ type: 'hello', session: e.id, cols: e.cols, rows: e.rows }));
+    // Live output starts once every earlier chunk has been parsed: the replay then ends exactly where it begins.
+    const viewer: Viewer = { sink, view, ready: false, exitSent: false };
+    e.viewers.push(viewer);
+    e.term.write('', () => {
+      if (!e.viewers.includes(viewer)) return;
+      sink.send(new TextEncoder().encode(e.serializer.serialize()));
+      if (e.title) sink.send(control({ type: 'title', title: e.title }));
+      if (e.exited !== undefined) {
+        sink.send(control({ type: 'exit', code: e.exited }));
+        viewer.exitSent = true;
+      }
+      viewer.ready = true;
+    });
+  }
+
+  function detach(id: string, sink: Sink): void {
+    const e = entries.get(id);
+    if (!e) return;
+    e.viewers = e.viewers.filter((v) => v.sink !== sink);
+    if (e.exited !== undefined && e.viewers.length === 0) close(id);
+  }
+
+  function reapExited(): void {
+    for (const e of [...entries.values()]) if (e.exited !== undefined && e.viewers.length === 0) close(e.id);
+  }
+
+  const isInteractive = (e: Entry, sink: Sink) => interactive(e)?.sink === sink;
+
+  function write(id: string, sink: Sink, data: string | Uint8Array): void {
+    const e = entries.get(id);
+    if (e && e.exited === undefined && isInteractive(e, sink)) e.pty.write(data);
+  }
+
+  function resize(id: string, sink: Sink, cols: number, rows: number): void {
+    const e = entries.get(id);
+    if (!e || e.exited !== undefined || !isInteractive(e, sink)) return;
+    e.cols = cols;
+    e.rows = rows;
+    e.pty.resize(cols, rows);
+    e.term.resize(cols, rows);
+  }
+
+  function clear(id: string, sink: Sink): void {
+    const e = entries.get(id);
+    if (!e || !isInteractive(e, sink)) return;
+    // After the output already queued, like the view's own clear.
+    e.term.write('', () => e.term.clear());
+  }
+
+  function close(id: string, sink?: Sink): void {
+    const e = entries.get(id);
+    if (!e) return;
+    if (sink && !isInteractive(e, sink)) return;
+    entries.delete(id);
+    if (e.exited === undefined) e.pty.kill();
+    for (const v of e.viewers) v.sink.close();
+    e.viewers = [];
+    e.term.dispose();
+  }
+
+  return {
+    create,
+    get: (id) => entries.get(id),
+    list: () =>
+      [...entries.values()].map((e) => ({
+        id: e.id,
+        label: e.label,
+        launcher: e.launcher,
+        meta: e.meta,
+        cwd: e.cwd,
+        profile: e.profile,
+        shell: e.shell,
+        running: e.running,
+        cols: e.cols,
+        rows: e.rows,
+        createdAt: e.createdAt,
+        exited: e.exited,
+        title: e.title,
+        bells: e.bells,
+        lastOutputAt: e.lastOutputAt,
+        viewers: { interactive: !!interactive(e), previews: e.viewers.filter((v) => v.view === 'preview').length },
+      })),
+    attach,
+    detach,
+    write,
+    resize,
+    clear,
+    close,
+    closeAll: () => {
+      for (const id of [...entries.keys()]) close(id);
+    },
+    setLabel(id, label) {
+      must(id).label = label.slice(0, MAX_LABEL);
+    },
+    setMeta(id, meta) {
+      checkMeta(meta);
+      must(id).meta = meta;
+    },
+  };
+}

package/src/server/shells.ts

@@ -0,0 +1,94 @@
+import { isShellId, SHELL_IDS, type ShellId } from '../protocol.ts';
+
+export { isShellId, SHELL_IDS, type ShellId };
+
+export interface ShellLookup {
+  platform: NodeJS.Platform;
+  env: Record<string, string | undefined>;
+  exists(path: string): boolean;
+}
+
+const POSIX_DIRS = ['/bin', '/usr/bin', '/usr/local/bin', '/opt/homebrew/bin'];
+
+const firstExisting = (paths: string[], exists: (p: string) => boolean): string | undefined => paths.find(exists);
+
+const posixArgs = (name: string): string[] => {
+  if (name === 'zsh') return ['-l', '-o', 'nopromptsp'];
+  if (name === 'bash' || name === 'fish' || name === 'sh' || name === 'dash') return ['-l'];
+  return [];
+};
+
+const posixShell = (name: string, { exists }: ShellLookup): string[] | null => {
+  const path = firstExisting(
+    POSIX_DIRS.map((d) => `${d}/${name}`),
+    exists,
+  );
+  return path ? [path, ...posixArgs(name)] : null;
+};
+
+function windowsShell(id: ShellId, { env, exists }: ShellLookup): string[] | null {
+  const root = env.SystemRoot ?? env.SYSTEMROOT ?? 'C:\\Windows';
+  const programFiles = env.ProgramFiles ?? 'C:\\Program Files';
+  const programFilesX86 = env['ProgramFiles(x86)'];
+  const localAppData = env.LOCALAPPDATA;
+  const pick = (paths: (string | undefined)[], args: string[] = []): string[] | null => {
+    const found = firstExisting(paths.filter((p): p is string => !!p), exists);
+    return found ? [found, ...args] : null;
+  };
+  switch (id) {
+    case 'powershell':
+      return pick([`${root}\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`], ['-NoLogo']);
+    case 'pwsh':
+      return pick(
+        [`${programFiles}\\PowerShell\\7\\pwsh.exe`, localAppData && `${localAppData}\\Microsoft\\WindowsApps\\pwsh.exe`],
+        ['-NoLogo'],
+      );
+    case 'cmd':
+      return pick([`${root}\\System32\\cmd.exe`]);
+    case 'wsl':
+      return pick([`${root}\\System32\\wsl.exe`]);
+    case 'git-bash':
+      return pick(
+        [
+          `${programFiles}\\Git\\bin\\bash.exe`,
+          programFilesX86 && `${programFilesX86}\\Git\\bin\\bash.exe`,
+          localAppData && `${localAppData}\\Programs\\Git\\bin\\bash.exe`,
+        ],
+        ['--login', '-i'],
+      );
+    default:
+      return null;
+  }
+}
+
+function posixAuto(lookup: ShellLookup): string[] | null {
+  const login = lookup.env.SHELL;
+  if (login && login.startsWith('/') && lookup.exists(login)) return [login, ...posixArgs(login.slice(login.lastIndexOf('/') + 1))];
+  return posixShell('bash', lookup) ?? posixShell('sh', lookup);
+}
+
+/** Argv for a known shell id on this machine; null when the id doesn't apply to the platform or isn't installed. */
+export function resolveShell(id: ShellId, lookup: ShellLookup): string[] | null {
+  if (lookup.platform === 'win32') {
+    return id === 'auto' ? windowsShell('powershell', lookup) : windowsShell(id, lookup);
+  }
+  switch (id) {
+    case 'auto':
+      return posixAuto(lookup);
+    case 'pwsh': {
+      const path = firstExisting(['/usr/local/bin/pwsh', '/usr/bin/pwsh', '/opt/homebrew/bin/pwsh', '/opt/microsoft/powershell/7/pwsh'], lookup.exists);
+      return path ? [path, '-NoLogo'] : null;
+    }
+    case 'bash':
+    case 'zsh':
+    case 'fish':
+    case 'sh':
+      return posixShell(id, lookup);
+    default:
+      return null;
+  }
+}
+
+export function availableShells(lookup: ShellLookup): ShellId[] {
+  return SHELL_IDS.filter((id) => resolveShell(id, lookup) !== null);
+}

package/src/shell-integration.ts

@@ -0,0 +1,46 @@
+/** An OSC 133 mark: A prompt start, B prompt end (input starts), C command output starts, D command done with its exit code. */
+export type PromptMark = { kind: 'A' } | { kind: 'B' } | { kind: 'C' } | { kind: 'D'; code: number | null };
+
+/** Parses the data of an OSC 133 sequence (`A`, `B`, `C`, `D;0`, `D`); null for anything else. */
+export function parseOsc133(data: string): PromptMark | null {
+  const [kind, arg] = data.split(';');
+  if (kind === 'A' || kind === 'B' || kind === 'C') return { kind };
+  if (kind !== 'D') return null;
+  const code = arg !== undefined && /^-?\d+$/.test(arg.trim()) ? Number(arg.trim()) : null;
+  return { kind: 'D', code };
+}
+
+/**
+ * The folder of an OSC 7 report (`file://host/path`, percent-encoded); a Windows drive path loses its
+ * leading slash (`/C:/x` → `C:/x`). Null when it is not a file URL.
+ */
+export function parseOsc7(data: string): string | null {
+  const m = /^file:\/\/[^/]*(\/.*)$/.exec(data.trim());
+  if (!m) return null;
+  let path: string;
+  try {
+    path = decodeURIComponent(m[1]);
+  } catch {
+    path = m[1];
+  }
+  return /^\/[A-Za-z]:([\\/]|$)/.test(path) ? path.slice(1) : path;
+}
+
+/** Values of the `{name}` placeholders in a tab title template. */
+export interface TitleVars {
+  name?: string;
+  shell?: string;
+  folder?: string;
+  cwd?: string;
+  title?: string;
+}
+
+/** Fills a tab title template; unknown placeholders stay as typed, empty ones vanish; the result is trimmed. */
+export function formatTabTitle(template: string, vars: TitleVars): string {
+  return template
+    .replace(/\{(\w+)\}/g, (all, key: string) => (key in TITLE_KEYS ? (vars[key as keyof TitleVars] ?? '') : all))
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const TITLE_KEYS = { name: 1, shell: 1, folder: 1, cwd: 1, title: 1 };

package/src/terminal.css

@@ -0,0 +1,76 @@
+.terminal-pane {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-sunken);
+}
+.terminal-host {
+  position: relative;
+  isolation: isolate;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  /* Top half the padding and no bottom one: the screen edges already leave room there. */
+  padding: calc(var(--terminal-padding, 8px) / 2) var(--terminal-padding, 8px) 0 var(--terminal-padding, 8px);
+}
+.terminal-pane.preview .terminal-host { flex: none; padding: 0; transform-origin: 0 0; pointer-events: none; }
+.terminal-host .xterm { height: 100%; }
+.terminal-host .xterm-viewport { background: var(--terminal-bg, var(--bg-sunken)) !important; }
+.terminal-host { background: var(--terminal-bg, transparent); }
+.terminal-overlay {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  max-width: calc(100% - 32px);
+  padding: var(--space-8) var(--space-12);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  color: var(--text-2);
+  font-size: var(--fs-sm);
+}
+.terminal-overlay .terminal-error { color: var(--err); }
+
+.terminal-find {
+  position: absolute;
+  top: 6px;
+  right: 14px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-4) var(--space-8);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+}
+.terminal-find input { width: 220px; min-width: 0; }
+.terminal-find-count { font-size: var(--fs-xs-plus); white-space: nowrap; }
+.terminal-host.ligatures .xterm-rows { font-variant-ligatures: normal !important; font-feature-settings: "liga" 1, "calt" 1; }
+.terminal-host .xterm-decoration.terminal-mark { left: -7px !important; width: 5px !important; display: flex; align-items: center; pointer-events: auto; cursor: default; }
+.terminal-mark::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
+.terminal-mark.running::before { background: var(--text-2); }
+.terminal-mark.ok::before { background: var(--ok); }
+.terminal-mark.err::before { background: var(--err); }
+.terminal-host.scrollbar-hidden .xterm-scrollable-element > .scrollbar { display: none !important; }
+.terminal-host:not(.scrollbar-hover):not(.scrollbar-hidden) .xterm-scrollable-element > .scrollbar.invisible { opacity: 1; pointer-events: auto; }
+.terminal-host.scrollbar-hover .xterm-scrollable-element > .scrollbar.invisible { opacity: 0; }
+.terminal-host.scrollbar-hover:hover .xterm-scrollable-element > .scrollbar { opacity: 1; pointer-events: auto; }
+/* A pane without the focus in a split: veiled in its own background by --terminal-dim (0 to 0.8). */
+.terminal-pane.dimmed .terminal-host::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  background: var(--terminal-bg, var(--bg-sunken));
+  opacity: var(--terminal-dim, 0);
+  pointer-events: none;
+}
+.terminal-paste-preview { max-height: 160px; overflow: auto; margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); border-radius: var(--radius-md); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--fs-xs-plus); white-space: pre; }

package/src/terminalOptions.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import type { TerminalOptions } from './xterm-view.ts';
+
+export { resolveThemeId, TERMINAL_THEMES, themeOf, type TerminalThemeId } from './themes.ts';
+export { MAX_SCHEMES, parseWindowsTerminalSchemes, SCHEME_COLORS, type ColorScheme } from './schemes.ts';
+
+/** xterm's default `wordSeparator`. */
+export const DEFAULT_WORD_SEPARATORS = ' ()[]{}\',"`';
+
+/** App-wide terminal preferences; a pane's own `options` prop wins. */
+export const TerminalOptionsContext = createContext<TerminalOptions | undefined>(undefined);
+
+export const useTerminalOptions = (): TerminalOptions | undefined => useContext(TerminalOptionsContext);

package/src/theme.ts

@@ -0,0 +1,44 @@
+import type { ITheme } from '@xterm/xterm';
+
+/** xterm theme slot → app CSS token. Brights reuse the base tokens; the app palette has one shade per hue. */
+const SLOTS: [keyof ITheme, string][] = [
+  ['background', '--bg-sunken'],
+  ['foreground', '--text'],
+  ['cursor', '--accent'],
+  ['cursorAccent', '--bg-sunken'],
+  ['selectionBackground', '--selected'],
+  ['black', '--bg-elev'],
+  ['red', '--err'],
+  ['green', '--ok'],
+  ['yellow', '--warn'],
+  ['blue', '--info'],
+  ['magenta', '--debug'],
+  ['cyan', '--y-str'],
+  ['white', '--text-2'],
+  ['brightBlack', '--text-3'],
+  ['brightRed', '--err'],
+  ['brightGreen', '--ok'],
+  ['brightYellow', '--warn'],
+  ['brightBlue', '--info'],
+  ['brightMagenta', '--debug'],
+  ['brightCyan', '--y-str'],
+  ['brightWhite', '--text'],
+];
+
+/** Builds an xterm theme from the app's CSS tokens; `read` returns a token's value, empty when unset. */
+export function xtermTheme(read: (token: string) => string): ITheme {
+  const theme: Record<string, string> = {};
+  // A layout can set --terminal-surface to put the terminal on another surface than --bg-sunken.
+  const surface = read('--terminal-surface').trim();
+  for (const [slot, token] of SLOTS) {
+    const value = token === '--bg-sunken' && surface ? surface : read(token).trim();
+    if (value) theme[slot] = value;
+  }
+  return theme as ITheme;
+}
+
+/** Reads tokens from the document root's computed style. */
+export const readCssToken =
+  (el: Element = document.documentElement) =>
+  (token: string): string =>
+    getComputedStyle(el).getPropertyValue(token);

package/src/themes.ts

@@ -0,0 +1,49 @@
+import type { ITheme } from '@xterm/xterm';
+import { schemeTheme, type ColorScheme } from './schemes.ts';
+import { xtermTheme } from './theme.ts';
+
+export const TERMINAL_THEMES = ['app', 'dark-plus', 'light-plus', 'solarized-dark', 'solarized-light', 'dracula', 'one-dark', 'nord', 'gruvbox-dark', 'monokai'] as const;
+export type TerminalThemeId = (typeof TERMINAL_THEMES)[number];
+
+/** Background, foreground, cursor, selection, then the 16 ANSI colors (black..white, bright black..bright white). */
+type Palette = [string, string, string, string, ...string[]];
+
+const ANSI: (keyof ITheme)[] = [
+  'black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
+  'brightBlack', 'brightRed', 'brightGreen', 'brightYellow', 'brightBlue', 'brightMagenta', 'brightCyan', 'brightWhite',
+];
+
+const PALETTES: Record<Exclude<TerminalThemeId, 'app'>, Palette> = {
+  'dark-plus': ['#1e1e1e', '#cccccc', '#aeafad', '#264f78', '#000000', '#cd3131', '#0dbc79', '#e5e510', '#2472c8', '#bc3fbc', '#11a8cd', '#e5e5e5', '#666666', '#f14c4c', '#23d18b', '#f5f543', '#3b8eea', '#d670d6', '#29b8db', '#e5e5e5'],
+  'light-plus': ['#ffffff', '#333333', '#000000', '#add6ff', '#000000', '#cd3131', '#00bc00', '#949800', '#0451a5', '#bc05bc', '#0598bc', '#555555', '#666666', '#cd3131', '#14ce14', '#b5ba00', '#0451a5', '#bc05bc', '#0598bc', '#a5a5a5'],
+  'solarized-dark': ['#002b36', '#839496', '#93a1a1', '#073642', '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5', '#586e75', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'],
+  'solarized-light': ['#fdf6e3', '#657b83', '#586e75', '#eee8d5', '#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198', '#eee8d5', '#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1', '#fdf6e3'],
+  dracula: ['#282a36', '#f8f8f2', '#f8f8f2', '#44475a', '#21222c', '#ff5555', '#50fa7b', '#f1fa8c', '#bd93f9', '#ff79c6', '#8be9fd', '#f8f8f2', '#6272a4', '#ff6e6e', '#69ff94', '#ffffa5', '#d6acff', '#ff92df', '#a4ffff', '#ffffff'],
+  'one-dark': ['#282c34', '#abb2bf', '#528bff', '#3e4451', '#282c34', '#e06c75', '#98c379', '#e5c07b', '#61afef', '#c678dd', '#56b6c2', '#abb2bf', '#5c6370', '#e06c75', '#98c379', '#e5c07b', '#61afef', '#c678dd', '#56b6c2', '#ffffff'],
+  nord: ['#2e3440', '#d8dee9', '#d8dee9', '#434c5e', '#3b4252', '#bf616a', '#a3be8c', '#ebcb8b', '#81a1c1', '#b48ead', '#88c0d0', '#e5e9f0', '#4c566a', '#bf616a', '#a3be8c', '#ebcb8b', '#81a1c1', '#b48ead', '#8fbcbb', '#eceff4'],
+  'gruvbox-dark': ['#282828', '#ebdbb2', '#ebdbb2', '#504945', '#282828', '#cc241d', '#98971a', '#d79921', '#458588', '#b16286', '#689d6a', '#a89984', '#928374', '#fb4934', '#b8bb26', '#fabd2f', '#83a598', '#d3869b', '#8ec07c', '#ebdbb2'],
+  monokai: ['#272822', '#f8f8f2', '#f8f8f0', '#49483e', '#272822', '#f92672', '#a6e22e', '#f4bf75', '#66d9ef', '#ae81ff', '#a1efe4', '#f8f8f2', '#75715e', '#f92672', '#a6e22e', '#f4bf75', '#66d9ef', '#ae81ff', '#a1efe4', '#f9f8f5'],
+};
+
+/** `id` when it names a preset or one of `schemes`, else 'app'. */
+export function resolveThemeId(id: string | undefined, schemes: readonly ColorScheme[] = []): string {
+  if (!id) return 'app';
+  if ((TERMINAL_THEMES as readonly string[]).includes(id) || schemes.some((s) => s.id === id)) return id;
+  return 'app';
+}
+
+/**
+ * The xterm theme of a preset or a custom scheme (presets win on a shared id); 'app' (or an unknown
+ * id) builds it from the app's CSS tokens through `read`.
+ */
+export function themeOf(id: string | undefined, read: (token: string) => string, schemes: readonly ColorScheme[] = []): ITheme {
+  const palette = id && id !== 'app' && Object.hasOwn(PALETTES, id) ? PALETTES[id as Exclude<TerminalThemeId, 'app'>] : undefined;
+  if (!palette) {
+    const custom = id && id !== 'app' ? schemes.find((s) => s.id === id) : undefined;
+    return custom ? schemeTheme(custom) : xtermTheme(read);
+  }
+  const [background, foreground, cursor, selectionBackground, ...colors] = palette;
+  const theme: Record<string, string> = { background, foreground, cursor, cursorAccent: background, selectionBackground };
+  ANSI.forEach((slot, i) => (theme[slot] = colors[i]));
+  return theme as ITheme;
+}

package/src/view.ts

@@ -0,0 +1,12 @@
+/** What `TerminalPane` needs from an emulator; xterm.js implements it (`xterm-view.ts`). */
+export interface TerminalView {
+  write(data: string): void;
+  resize(cols: number, rows: number): void;
+  onInput(cb: (data: string) => void): void;
+  onResize(cb: (cols: number, rows: number) => void): void;
+  dispose(): void;
+}
+
+// TODO(ghostty-web): not a drop-in as of 0.4.0. It needs 'wasm-unsafe-eval' in the CSP
+// (WebAssembly.compile on an inlined data: URL, also fetched, so connect-src data:), an awaited
+// init() before `new Terminal`, and ignores `options.theme =` after open() (no live re-theme).