termcut 0.1.0

package/src/export/svg.ts

@@ -0,0 +1,171 @@
+import { barHeight } from "../renderer/page";
+import type { Recording, ResolvedConfig } from "../types";
+import { FLAG, replayFrames, type GridCell, type GridFrame } from "./frames";
+
+const esc = (s: string) =>
+  s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
+
+const num = (n: number) => (Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, ""));
+
+interface Geometry {
+  cellW: number;
+  cellH: number;
+  termW: number;
+  termH: number;
+  frameX: number;
+  frameY: number;
+  frameW: number;
+  frameH: number;
+  termX: number;
+  termY: number;
+  width: number;
+  height: number;
+}
+
+export function svgGeometry(config: ResolvedConfig, cols: number, rows: number): Geometry {
+  const cellW = Math.round(config.font.size * 0.6 * 100) / 100 + config.font.letterSpacing;
+  const cellH = Math.ceil(config.font.size * config.font.lineHeight);
+  const termW = cols * cellW;
+  const termH = rows * cellH;
+  const bar = barHeight(config);
+  const frameW = termW + config.padding * 2;
+  const frameH = termH + config.padding * 2 + bar;
+  return {
+    cellW,
+    cellH,
+    termW,
+    termH,
+    frameX: config.margin,
+    frameY: config.margin,
+    frameW,
+    frameH,
+    termX: config.margin + config.padding,
+    termY: config.margin + config.padding + bar,
+    width: Math.ceil(frameW + config.margin * 2),
+    height: Math.ceil(frameH + config.margin * 2),
+  };
+}
+
+function windowBar(config: ResolvedConfig, g: Geometry): string {
+  if (config.windowBar === "none") return "";
+  const rings = config.windowBar.startsWith("rings");
+  const right = config.windowBar.endsWith("Right");
+  const y = g.frameY + Math.max(8, config.padding - 12) + 12;
+  const colors = ["#ff5f57", "#febc2e", "#28c840"];
+  const startX = right ? g.frameX + g.frameW - config.padding - 6 - 40 : g.frameX + config.padding + 6;
+  const dots = colors
+    .map((c, i) => `<circle cx="${num(startX + i * 20)}" cy="${num(y)}" r="6" ${rings ? `fill="none" stroke="${c}" stroke-width="2"` : `fill="${c}"`}/>`)
+    .join("");
+  const title = config.title
+    ? `<text x="${num(g.frameX + g.frameW / 2)}" y="${num(y + 4)}" text-anchor="middle" font-family="-apple-system, Segoe UI, Helvetica, Arial, sans-serif" font-size="13" fill="${config.theme.foreground}" opacity="0.7">${esc(config.title)}</text>`
+    : "";
+  return dots + title;
+}
+
+function styleAttrs(cell: GridCell, defaultFg: string): string {
+  let a = ` fill="${cell.fg ?? defaultFg}"`;
+  if (cell.flags & FLAG.bold) a += ' font-weight="bold"';
+  if (cell.flags & FLAG.italic) a += ' font-style="italic"';
+  if (cell.flags & FLAG.dim) a += ' opacity="0.6"';
+  const deco = [cell.flags & FLAG.underline ? "underline" : "", cell.flags & FLAG.strike ? "line-through" : ""].filter(Boolean).join(" ");
+  if (deco) a += ` text-decoration="${deco}"`;
+  return a;
+}
+
+function frameMarkup(frame: GridFrame, config: ResolvedConfig, g: Geometry): string {
+  const parts: string[] = [];
+  const { theme } = config;
+  const baseline = Math.round(g.cellH * 0.78 * 100) / 100;
+
+  for (const [y, cells] of frame.rows_) {
+    // Background runs
+    let x = 0;
+    let runStart = 0;
+    let runBg: string | null = null;
+    const flushBg = (end: number) => {
+      if (runBg) parts.push(`<rect x="${num(runStart * g.cellW)}" y="${num(y * g.cellH)}" width="${num((end - runStart) * g.cellW)}" height="${num(g.cellH)}" fill="${runBg}"/>`);
+    };
+    for (const cell of cells) {
+      if (cell.bg !== runBg) {
+        flushBg(x);
+        runStart = x;
+        runBg = cell.bg;
+      }
+      x += cell.width;
+    }
+    flushBg(x);
+
+    // Text runs with identical style
+    const spans: string[] = [];
+    x = 0;
+    let run: { x: number; text: string; style: string } | null = null;
+    for (const cell of cells) {
+      const blank = cell.text === " " && !(cell.flags & (FLAG.underline | FLAG.strike));
+      const style = blank ? "" : styleAttrs(cell, theme.foreground);
+      if (run && (run.style === style || (blank && run.text.length > 0))) {
+        run.text += cell.text;
+      } else {
+        if (run && run.text.trim()) spans.push(`<tspan x="${num(run.x * g.cellW)}"${run.style}>${esc(run.text.replace(/\s+$/, ""))}</tspan>`);
+        run = blank ? null : { x, text: cell.text, style };
+      }
+      x += cell.width;
+    }
+    if (run && run.text.trim()) spans.push(`<tspan x="${num(run.x * g.cellW)}"${run.style}>${esc(run.text.replace(/\s+$/, ""))}</tspan>`);
+    if (spans.length) parts.push(`<text y="${num(y * g.cellH + baseline)}">${spans.join("")}</text>`);
+  }
+
+  if (frame.cursor.visible && frame.cursor.row < frame.rows && frame.cursor.col < frame.cols) {
+    parts.push(`<rect x="${num(frame.cursor.col * g.cellW)}" y="${num(frame.cursor.row * g.cellH)}" width="${num(g.cellW)}" height="${num(g.cellH)}" fill="${theme.cursor ?? theme.foreground}" opacity="0.85"/>`);
+  }
+  return parts.join("");
+}
+
+export interface SvgResult {
+  svg: string;
+  frames: number;
+  duration: number;
+}
+
+/** Animated SVG: a horizontal strip of unique frames moved by a stepped CSS animation. No JS, no fonts embedded. */
+export async function buildSvg(rec: Recording, config: ResolvedConfig): Promise<SvgResult> {
+  const replay = await replayFrames(rec, config);
+  const g = svgGeometry(config, replay.cols, replay.rows);
+  const { theme, font } = config;
+  const n = replay.frames.length;
+  const total = replay.duration;
+
+  const keyframes: string[] = [];
+  for (let i = 0; i < n; i++) {
+    const pct = (replay.frames[i]!.time / total) * 100;
+    keyframes.push(`${num(pct)}%{transform:translateX(${num(-i * g.termW)}px)}`);
+  }
+  keyframes.push(`100%{transform:translateX(${num(-(n - 1) * g.termW)}px)}`);
+
+  const frames = replay.frames
+    .map((f, i) => `<g transform="translate(${num(i * g.termW)} 0)">${frameMarkup(f, config, g)}</g>`)
+    .join("\n");
+
+  const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${g.width}" height="${g.height}" viewBox="0 0 ${g.width} ${g.height}" font-family="${esc(font.family)}" font-size="${font.size}">
+<style>
+.strip{animation:tcut ${num(total)}s steps(1,end) infinite}
+@keyframes tcut{${keyframes.join("")}}
+text{white-space:pre;dominant-baseline:auto}
+</style>
+<rect width="100%" height="100%" fill="${config.marginFill}"/>
+<rect x="${num(g.frameX)}" y="${num(g.frameY)}" width="${num(g.frameW)}" height="${num(g.frameH)}" rx="${config.borderRadius}" fill="${theme.background}"/>
+${windowBar(config, g)}
+<clipPath id="term"><rect x="${num(g.termX)}" y="${num(g.termY)}" width="${num(g.termW)}" height="${num(g.termH)}"/></clipPath>
+<g clip-path="url(#term)"><g transform="translate(${num(g.termX)} ${num(g.termY)})"><g class="strip" xml:space="preserve">
+${frames}
+</g></g></g>
+</svg>
+`;
+  return { svg, frames: n, duration: total };
+}
+
+export async function writeSvg(rec: Recording, config: ResolvedConfig, file: string): Promise<SvgResult> {
+  const result = await buildSvg(rec, config);
+  await Bun.write(file, result.svg);
+  return result;
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { defineVideo, Video, renderCast, isVideo } from "./video";
+export type { RunOptions as VideoRunOptions, RunResult, VideoRecordOptions } from "./video";
+export { renderOutputs } from "./render";
+export { buildSvg } from "./export/svg";
+export { buildHtml } from "./export/html";
+export { replayFrames } from "./export/frames";
+export type { GridFrame, GridCell, GridReplay } from "./export/frames";
+export { runScriptTests, discoverScripts } from "./testing";
+export type { TestResult, TestSummary } from "./testing";
+export { themes, themeNames, resolveTheme } from "./themes";
+export { readCast, writeCast, parseCast, serializeCast } from "./cast";
+export { buildTimeline } from "./timeline";
+export { resolveConfig } from "./config";
+export { WaitTimeoutError, ExpectationError } from "./recorder";
+export type * from "./types";

package/src/keys.ts

@@ -0,0 +1,58 @@
+import type { KeyName } from "./types";
+
+const ESC = "\x1b";
+
+const keySequences: Record<KeyName, string> = {
+  enter: "\r",
+  tab: "\t",
+  backspace: "\x7f",
+  delete: `${ESC}[3~`,
+  escape: ESC,
+  space: " ",
+  up: `${ESC}[A`,
+  down: `${ESC}[B`,
+  right: `${ESC}[C`,
+  left: `${ESC}[D`,
+  home: `${ESC}[H`,
+  end: `${ESC}[F`,
+  pageUp: `${ESC}[5~`,
+  pageDown: `${ESC}[6~`,
+  insert: `${ESC}[2~`,
+  f1: `${ESC}OP`,
+  f2: `${ESC}OQ`,
+  f3: `${ESC}OR`,
+  f4: `${ESC}OS`,
+  f5: `${ESC}[15~`,
+  f6: `${ESC}[17~`,
+  f7: `${ESC}[18~`,
+  f8: `${ESC}[19~`,
+  f9: `${ESC}[20~`,
+  f10: `${ESC}[21~`,
+  f11: `${ESC}[23~`,
+  f12: `${ESC}[24~`,
+};
+
+export function keySequence(name: KeyName): string {
+  const seq = keySequences[name];
+  if (seq === undefined) {
+    throw new Error(`Unknown key "${name}". Known keys: ${Object.keys(keySequences).join(", ")}`);
+  }
+  return seq;
+}
+
+/** Ctrl+<letter> → control character (Ctrl+C = 0x03). Also accepts "[", "]", "\\", "^", "_", "@". */
+export function ctrlSequence(key: string): string {
+  if (key.length !== 1) throw new Error(`ctrl() expects a single character, got "${key}"`);
+  const upper = key.toUpperCase();
+  const code = upper.charCodeAt(0);
+  if (code >= 0x40 && code <= 0x5f) return String.fromCharCode(code & 0x1f);
+  if (key === "?") return "\x7f";
+  if (key === " ") return "\x00";
+  throw new Error(`Cannot send Ctrl+${key}`);
+}
+
+/** Alt/Meta+<key> → ESC-prefixed key. */
+export function altSequence(key: string): string {
+  const isNamed = key in keySequences;
+  return ESC + (isNamed ? keySequence(key as KeyName) : key);
+}

package/src/recorder.ts

@@ -0,0 +1,362 @@
+import { MARKER } from "./cast";
+import { formatMs, toMs } from "./duration";
+import { altSequence, ctrlSequence, keySequence } from "./keys";
+import { Screen } from "./screen";
+import type {
+  CastEvent,
+  Duration,
+  KeyName,
+  RecordOptions,
+  Recording,
+  ResolvedConfig,
+  RunOptions,
+  Script,
+  TerminalSession,
+  TypeOptions,
+  WaitOptions,
+} from "./types";
+
+export class WaitTimeoutError extends Error {
+  constructor(what: string, timeoutMs: number, screen: string) {
+    super(`Timed out after ${formatMs(timeoutMs)} waiting for ${what}.\n\n--- screen ---\n${screen}\n--------------`);
+    this.name = "WaitTimeoutError";
+  }
+}
+
+export class ExpectationError extends Error {
+  constructor(what: string, screen: string) {
+    super(`Expected ${what} to match.\n\n--- screen ---\n${screen}\n--------------`);
+    this.name = "ExpectationError";
+  }
+}
+
+/** Deterministic PRNG (mulberry32) so typing jitter is reproducible. */
+function mulberry32(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+interface ShellSetup {
+  cmd: string[];
+  env: Record<string, string>;
+}
+
+function shellSetup(config: ResolvedConfig): ShellSetup {
+  const { shell, prompt } = config;
+  if (Array.isArray(shell)) return { cmd: shell, env: {} };
+  switch (shell) {
+    case "bash":
+      return {
+        cmd: ["bash", "--norc", "--noprofile"],
+        env: {
+          PS1: prompt,
+          PS2: "",
+          HISTFILE: "/dev/null",
+          BASH_SILENCE_DEPRECATION_WARNING: "1",
+        },
+      };
+    case "zsh":
+      return {
+        cmd: ["zsh", "-f"],
+        env: { PS1: prompt, PROMPT: prompt, PS2: "", HISTFILE: "/dev/null", PROMPT_EOL_MARK: "" },
+      };
+    case "fish": {
+      const escaped = prompt.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+      return {
+        cmd: [
+          "fish",
+          "--no-config",
+          "--init-command",
+          `function fish_prompt; printf '%s' '${escaped}'; end; function fish_greeting; end; set -g fish_autosuggestion_enabled 0`,
+        ],
+        env: {},
+      };
+    }
+    case "sh":
+      return { cmd: ["sh"], env: { PS1: prompt, PS2: "" } };
+    default:
+      return { cmd: [shell], env: { PS1: prompt } };
+  }
+}
+
+/** Drives a Bun.Terminal PTY according to a script and produces an asciicast recording. */
+export async function record(config: ResolvedConfig, script: Script, opts: RecordOptions = {}): Promise<Recording> {
+  const log = opts.log ?? (() => {});
+  const events: CastEvent[] = [];
+  const screen = await Screen.create(config.cols, config.rows, { core: config.core });
+  const fast = opts.fast === true;
+  const decoder = new TextDecoder("utf-8");
+  const rand = mulberry32(config.seed);
+  const promptPattern = new RegExp(config.promptPattern);
+
+  let startedAt: number | null = null;
+  let hiddenDepth = 0;
+  let cols = config.cols;
+  let rows = config.rows;
+
+  const now = (): number => (startedAt === null ? 0 : (performance.now() - startedAt) / 1000);
+  const stamp = (): number => {
+    const t = now();
+    if (!config.quantize) return Number(t.toFixed(6));
+    return Math.ceil(t * config.fps - 1e-6) / config.fps;
+  };
+  const push = (type: CastEvent[1], data: string): void => {
+    const event: CastEvent = [stamp(), type, data];
+    events.push(event);
+    opts.onEvent?.(event);
+  };
+
+  const setup = shellSetup(config);
+  const env: Record<string, string> = {
+    ...process.env,
+    TERM: "xterm-256color",
+    COLORTERM: "truecolor",
+    LANG: process.env.LANG ?? "en_US.UTF-8",
+    ...setup.env,
+    ...config.env,
+  };
+  delete env.PROMPT_COMMAND;
+
+  let exited = false;
+  const proc = Bun.spawn(setup.cmd, {
+    cwd: config.cwd,
+    env,
+    terminal: {
+      cols,
+      rows,
+      name: "xterm-256color",
+      data(_terminal, chunk) {
+        const text = decoder.decode(chunk, { stream: true });
+        if (!text) return;
+        push("o", text);
+        screen.write(text);
+      },
+      exit() {
+        exited = true;
+      },
+    },
+  });
+  const terminal = proc.terminal;
+  if (!terminal) throw new Error("Bun.spawn did not return a terminal. Is this Bun >= 1.4?");
+  // Programs that query the terminal (DA, cursor position, …) need the emulator's answer written back.
+  screen.onResponse = (response) => {
+    if (!exited && !terminal.closed) terminal.write(response);
+  };
+
+  const sleep = async (duration: Duration): Promise<void> => {
+    const ms = toMs(duration);
+    if (fast) return;
+    await Bun.sleep(ms);
+  };
+
+  const ensureAlive = (): void => {
+    if (exited || terminal.closed) {
+      throw new Error(`The shell exited before the script finished.\n\n--- screen ---\n${screen.screen()}\n--------------`);
+    }
+  };
+
+  const raw = async (data: string | Uint8Array): Promise<void> => {
+    ensureAlive();
+    terminal.write(data);
+    push("i", typeof data === "string" ? data : decoder.decode(data));
+  };
+
+  const typingDelay = (base: number): number => {
+    if (config.typingJitter === 0) return base;
+    const factor = 1 + (rand() * 2 - 1) * config.typingJitter;
+    return Math.max(0, base * factor);
+  };
+
+  const type = async (text: string, typeOpts: TypeOptions = {}): Promise<void> => {
+    const speed = fast ? 0 : toMs(typeOpts.speed, config.typingSpeed);
+    for (const char of text) {
+      await raw(char === "\n" ? "\r" : char);
+      if (speed > 0) await Bun.sleep(typingDelay(speed));
+    }
+  };
+
+  const pressKey = async (sequence: string, times = 1): Promise<void> => {
+    for (let i = 0; i < times; i++) {
+      await raw(sequence);
+      if (!fast && config.typingSpeed > 0 && times > 1) await Bun.sleep(typingDelay(config.typingSpeed));
+    }
+  };
+
+  const key = (name: KeyName, times = 1): Promise<void> => pressKey(keySequence(name), times);
+
+  const matches = (pattern: RegExp, scope: "line" | "screen"): boolean =>
+    pattern.test(scope === "screen" ? screen.screen() : screen.line());
+
+  const toRegExp = (pattern: RegExp | string): RegExp =>
+    typeof pattern === "string" ? new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) : pattern;
+
+  const waitFor = async (
+    description: string,
+    test: () => boolean,
+    timeoutMs: number,
+  ): Promise<void> => {
+    const deadline = performance.now() + timeoutMs;
+    for (;;) {
+      await screen.settle();
+      if (test()) return;
+      if (exited) {
+        await screen.settle();
+        if (test()) return;
+        throw new Error(`Shell exited while waiting for ${description}.\n\n--- screen ---\n${screen.screen()}\n--------------`);
+      }
+      const remaining = deadline - performance.now();
+      if (remaining <= 0) throw new WaitTimeoutError(description, timeoutMs, screen.screen());
+      await Promise.race([screen.nextFlush(), Bun.sleep(Math.min(remaining, 50))]);
+    }
+  };
+
+  const wait = async (pattern?: RegExp | string, waitOpts: WaitOptions = {}): Promise<void> => {
+    const regex = pattern === undefined ? promptPattern : toRegExp(pattern);
+    const scope = waitOpts.scope ?? "line";
+    await waitFor(`${regex} on ${scope}`, () => matches(regex, scope), toMs(waitOpts.timeout, config.waitTimeout));
+  };
+
+  const waitForPrompt = async (afterLine: number, echoLine: string, timeoutMs: number): Promise<void> => {
+    await waitFor(
+      `prompt ${promptPattern}`,
+      () =>
+        promptPattern.test(screen.line()) &&
+        (screen.absoluteCursorLine() !== afterLine || screen.line() !== echoLine),
+      timeoutMs,
+    );
+  };
+
+  const run = async (command: string, runOpts: RunOptions = {}): Promise<void> => {
+    await type(command, runOpts);
+    await screen.settle();
+    const beforeLine = screen.absoluteCursorLine();
+    const echoLine = screen.line();
+    await raw("\r");
+    const timeout = toMs(runOpts.timeout, config.waitTimeout);
+    if (runOpts.wait === false) return;
+    if (runOpts.wait instanceof RegExp) {
+      await wait(runOpts.wait, { timeout });
+      return;
+    }
+    await waitForPrompt(beforeLine, echoLine, timeout);
+  };
+
+  const expect = async (pattern: RegExp | string, expectOpts: Pick<WaitOptions, "scope"> = {}): Promise<void> => {
+    await screen.settle();
+    const regex = toRegExp(pattern);
+    const scope = expectOpts.scope ?? "screen";
+    if (!matches(regex, scope)) throw new ExpectationError(`${regex} on ${scope}`, screen.screen());
+  };
+
+  const hide = async <T>(fn: () => Promise<T>): Promise<T> => {
+    if (hiddenDepth === 0) push("m", MARKER.hide);
+    hiddenDepth++;
+    try {
+      return await fn();
+    } finally {
+      hiddenDepth--;
+      if (hiddenDepth === 0) {
+        await screen.settle();
+        push("m", MARKER.show);
+      }
+    }
+  };
+
+  const session: TerminalSession = {
+    type,
+    run,
+    paste: (text) => raw(text),
+    key,
+    enter: (n) => key("enter", n),
+    tab: (n) => key("tab", n),
+    backspace: (n) => key("backspace", n),
+    delete: (n) => key("delete", n),
+    escape: (n) => key("escape", n),
+    space: (n) => key("space", n),
+    up: (n) => key("up", n),
+    down: (n) => key("down", n),
+    left: (n) => key("left", n),
+    right: (n) => key("right", n),
+    home: () => key("home"),
+    end: () => key("end"),
+    pageUp: (n) => key("pageUp", n),
+    pageDown: (n) => key("pageDown", n),
+    ctrl: (letter, n) => pressKey(ctrlSequence(letter), n),
+    alt: (k, n) => pressKey(altSequence(k), n),
+    raw,
+    sleep,
+    wait,
+    expect,
+    hide,
+    screenshot: async (file) => {
+      await screen.settle();
+      push("m", MARKER.screenshot + file);
+    },
+    marker: async (name) => {
+      push("m", name);
+    },
+    resize: async (newCols, newRows) => {
+      ensureAlive();
+      cols = newCols;
+      rows = newRows;
+      terminal.resize(newCols, newRows);
+      screen.resize(newCols, newRows);
+      push("r", `${newCols}x${newRows}`);
+      await screen.settle();
+    },
+    clear: () => run("clear"),
+    screen: () => screen.screen(),
+    line: () => screen.line(),
+    cursor: () => screen.cursor(),
+    get cols() {
+      return cols;
+    },
+    get rows() {
+      return rows;
+    },
+    config,
+  };
+
+  try {
+    // Everything that happens before the first prompt is stamped at t=0.
+    log(`starting ${Array.isArray(config.shell) ? config.shell.join(" ") : config.shell}`);
+    await waitFor(`initial prompt ${promptPattern}`, () => promptPattern.test(screen.line()), config.waitTimeout);
+    startedAt = performance.now();
+    log("recording");
+    await script(session);
+    if (hiddenDepth > 0) throw new Error("Script finished inside hide() — this is a bug in the recorder");
+    await screen.settle();
+    if (config.endPause > 0 && !fast) await Bun.sleep(config.endPause);
+    push("m", MARKER.end);
+  } finally {
+    try {
+      terminal.close();
+    } catch {
+      /* already closed */
+    }
+    if (!exited) proc.kill();
+    await proc.exited.catch(() => undefined);
+    screen.dispose();
+  }
+
+  const duration = events.length > 0 ? events[events.length - 1]![0] : 0;
+  return {
+    header: {
+      version: 2,
+      width: config.cols,
+      height: config.rows,
+      timestamp: Math.floor(Date.now() / 1000),
+      duration,
+      title: config.title || undefined,
+      env: { TERM: "xterm-256color", SHELL: Array.isArray(config.shell) ? config.shell[0]! : config.shell },
+      bunVideo: config,
+    },
+    events,
+  };
+}

package/src/render.ts

@@ -0,0 +1,52 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { writeHtml } from "./export/html";
+import { writeSvg } from "./export/svg";
+import { render as renderRaster, type RenderResult } from "./renderer/webview";
+import type { Recording, RenderProgress, ResolvedConfig } from "./types";
+
+export type { RenderResult };
+
+const kind = (output: string): "svg" | "html" | "raster" => {
+  if (output.endsWith("/")) return "raster";
+  const ext = path.extname(output).toLowerCase();
+  if (ext === ".svg") return "svg";
+  if (ext === ".html" || ext === ".htm") return "html";
+  return "raster";
+};
+
+/**
+ * Fan the configured outputs out to the right backend: `.svg` and `.html` are produced from the headless core
+ * (no WebView, no ffmpeg); everything else goes through the WebView + ffmpeg renderer in one pass.
+ */
+export async function renderOutputs(
+  rec: Recording,
+  config: ResolvedConfig,
+  onProgress?: (p: RenderProgress) => void,
+): Promise<RenderResult> {
+  const svg = config.output.filter((o) => kind(o) === "svg");
+  const html = config.output.filter((o) => kind(o) === "html");
+  const raster = config.output.filter((o) => kind(o) === "raster");
+
+  const result: RenderResult = { outputs: [], frames: 0, screenshots: [], durationSeconds: 0 };
+
+  for (const file of svg) {
+    await mkdir(path.dirname(path.resolve(file)), { recursive: true });
+    const r = await writeSvg(rec, config, file);
+    result.outputs.push(file);
+    result.frames = Math.max(result.frames, r.frames);
+    result.durationSeconds = r.duration;
+  }
+  for (const file of html) {
+    await writeHtml(rec, config, file);
+    result.outputs.push(file);
+  }
+  if (raster.length > 0) {
+    const r = await renderRaster(rec, { ...config, output: raster }, onProgress);
+    result.outputs.push(...r.outputs);
+    result.frames = r.frames;
+    result.screenshots.push(...r.screenshots);
+    result.durationSeconds = r.durationSeconds;
+  }
+  return result;
+}