tui-cap 0.1.0

package/dist/svg.js

@@ -0,0 +1,767 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultRenderOptions = defaultRenderOptions;
+exports.cellForeground = cellForeground;
+exports.measureGrid = measureGrid;
+exports.renderSvg = renderSvg;
+const palette_1 = require("./palette");
+/** Build a full set of render options, overriding defaults as needed. */
+function defaultRenderOptions(themeName = 'dark', overrides = {}) {
+    const chromeStyle = overrides.chromeStyle ?? 'mac';
+    return {
+        theme: palette_1.THEMES[themeName],
+        fontFamily: "'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+        fontSize: 14,
+        // SF Mono's true per-column advance: advanceWidth 1266 / unitsPerEm 2048 =
+        // 0.618164 em (8.654px at 14px), confirmed against the font file and Figma's
+        // own measurement. This MUST be the font's real metric, not a hand-tuned
+        // value: renderers that honour `textLength` (Chrome, Illustrator, the raster
+        // exporter) flow text to the grid either way, but Figma ignores `textLength`
+        // and draws every glyph at the font's true advance — so only a real-metric
+        // grid keeps Figma's text aligned with the column-pinned rects and borders.
+        advance: 0.618164,
+        // Terminals draw rows edge to edge with no inter-line gap; 1.25 keeps block
+        // bars and the mascot gapless and matches the default terminal cell height.
+        // The GUI exposes a slider and the CLI a --line-height flag to fine-tune.
+        lineHeight: 1.25,
+        padding: 24,
+        chrome: true,
+        chromeStyle,
+        title: 'GitHub Copilot CLI',
+        // Windows 11 title bars round the top corners at 7px (Figma spec); macOS
+        // Tahoe rounds at ~20px (corner radius ≈ half the title-bar height, measured
+        // off a real Terminal).
+        radius: chromeStyle === 'windows' || chromeStyle === 'windows-inactive' ? 7 : 20,
+        ...overrides,
+    };
+}
+/**
+ * A single glyph in the Unicode Box Drawing block (U+2500–U+257F): the rules,
+ * borders and rounded corners (╭ ╮ ╰ ╯ │ ─ ├ ┤ …) that frame dialogs and
+ * sub-menus. Every such glyph is broken into its own absolutely-positioned run
+ * (see `buildRuns`) so a box border lands on its exact grid column no matter how
+ * a renderer distributes `textLength` spacing — see the comment there for why.
+ */
+const BOX_DRAWING = /^[\u2500-\u257F]$/;
+const EMOJI_CAPABLE = /\p{Emoji}/u;
+const EMOJI_DEFAULT = /\p{Emoji_Presentation}/u;
+/**
+ * Pin emoji-capable-but-text-default glyphs (⚠ ✔ ▶ ™ …) to TEXT presentation by
+ * appending VS15 (U+FE0E). The terminal rendered them as a single-cell monochrome
+ * glyph; Illustrator, Chrome and other SVG renderers otherwise substitute a colour
+ * emoji, and VS15 forces the monochrome text glyph back for them.
+ *
+ * NOTE: Figma is the exception — its text engine force-renders U+26A0-class code
+ * points as colour emoji and ignores both VS15 and the assigned font (verified via
+ * figma.createNodeFromSvg + screenshot across Menlo/Apple Symbols/Arial Unicode MS/
+ * Segoe UI Symbol). There is no pure-SVG override; the Figma-native export tracked
+ * as a deferred follow-up is the fix there. We still emit VS15 because it is correct
+ * for the SVG's primary targets (Illustrator + raster) and is inert in Figma.
+ *
+ * Scoped to non-ASCII code points so characters that merely carry the Emoji property
+ * (digits, `#`, `*`) are left alone, skipped for genuinely wide / emoji-presentation
+ * glyphs (🚀), and a no-op when a variation selector already trails the base char.
+ */
+function pinTextPresentation(char, width) {
+    if (width === 1 &&
+        char.length === 1 &&
+        char.codePointAt(0) >= 0x2000 &&
+        EMOJI_CAPABLE.test(char) &&
+        !EMOJI_DEFAULT.test(char)) {
+        return `${char}\uFE0E`;
+    }
+    return char;
+}
+function isBlank(cell) {
+    return (cell.char === ' ' &&
+        cell.bg === null &&
+        !cell.inverse &&
+        !cell.underline &&
+        !cell.strike);
+}
+function effective(cell, theme) {
+    let fill = cell.fg ?? theme.foreground;
+    let bg = cell.bg;
+    if (cell.inverse) {
+        const newFill = cell.bg ?? theme.background;
+        bg = cell.fg ?? theme.foreground;
+        fill = newFill;
+    }
+    const decoration = [cell.underline ? 'underline' : '', cell.strike ? 'line-through' : '']
+        .filter(Boolean)
+        .join(' ') || null;
+    return {
+        fill,
+        bg,
+        weight: cell.bold ? 700 : 400,
+        italic: cell.italic,
+        decoration,
+        underlineStyle: cell.underline ? cell.underlineStyle ?? 'single' : undefined,
+        underlineColor: cell.underline ? cell.underlineColor ?? null : null,
+        opacity: cell.dim ? 0.6 : 1,
+        visible: !cell.invisible,
+    };
+}
+/**
+ * The resolved foreground (glyph) colour a cell renders with — honouring an
+ * explicit fg override, the theme default, and reverse video — as a hex string.
+ * Used by the GUI eyedropper to sample a character's on-screen colour.
+ */
+function cellForeground(cell, theme) {
+    return effective(cell, theme).fill;
+}
+// Map our underline style names to the CSS `text-decoration-style` keyword.
+// 'single' is the default and is expressed via the plain `text-decoration`
+// presentation attribute instead, so it isn't listed here.
+const CSS_UNDERLINE_STYLE = {
+    double: 'double',
+    curly: 'wavy',
+    dotted: 'dotted',
+    dashed: 'dashed',
+};
+const FULL_CELL = [0, 0, 1, 1];
+const BLOCK_GEOMETRY = {
+    '\u2580': { rects: [[0, 0, 1, 1 / 2]] }, // ▀ upper half
+    '\u2581': { rects: [[0, 7 / 8, 1, 1 / 8]] }, // ▁ lower 1/8
+    '\u2582': { rects: [[0, 6 / 8, 1, 2 / 8]] }, // ▂ lower 1/4
+    '\u2583': { rects: [[0, 5 / 8, 1, 3 / 8]] }, // ▃ lower 3/8
+    '\u2584': { rects: [[0, 1 / 2, 1, 1 / 2]] }, // ▄ lower half
+    '\u2585': { rects: [[0, 3 / 8, 1, 5 / 8]] }, // ▅ lower 5/8
+    '\u2586': { rects: [[0, 2 / 8, 1, 6 / 8]] }, // ▆ lower 3/4
+    '\u2587': { rects: [[0, 1 / 8, 1, 7 / 8]] }, // ▇ lower 7/8
+    '\u2588': { rects: [FULL_CELL] }, // █ full block
+    '\u2589': { rects: [[0, 0, 7 / 8, 1]] }, // ▉ left 7/8
+    '\u258A': { rects: [[0, 0, 6 / 8, 1]] }, // ▊ left 3/4
+    '\u258B': { rects: [[0, 0, 5 / 8, 1]] }, // ▋ left 5/8
+    '\u258C': { rects: [[0, 0, 1 / 2, 1]] }, // ▌ left half
+    '\u258D': { rects: [[0, 0, 3 / 8, 1]] }, // ▍ left 3/8
+    '\u258E': { rects: [[0, 0, 2 / 8, 1]] }, // ▎ left 1/4
+    '\u258F': { rects: [[0, 0, 1 / 8, 1]] }, // ▏ left 1/8
+    '\u2590': { rects: [[1 / 2, 0, 1 / 2, 1]] }, // ▐ right half
+    '\u2591': { rects: [FULL_CELL], opacity: 0.25 }, // ░ light shade
+    '\u2592': { rects: [FULL_CELL], opacity: 0.5 }, // ▒ medium shade
+    '\u2593': { rects: [FULL_CELL], opacity: 0.75 }, // ▓ dark shade
+    '\u2594': { rects: [[0, 0, 1, 1 / 8]] }, // ▔ upper 1/8
+    '\u2595': { rects: [[7 / 8, 0, 1 / 8, 1]] }, // ▕ right 1/8
+    '\u2596': { rects: [[0, 1 / 2, 1 / 2, 1 / 2]] }, // ▖ lower left
+    '\u2597': { rects: [[1 / 2, 1 / 2, 1 / 2, 1 / 2]] }, // ▗ lower right
+    '\u2598': { rects: [[0, 0, 1 / 2, 1 / 2]] }, // ▘ upper left
+    '\u2599': { rects: [[0, 0, 1 / 2, 1], [1 / 2, 1 / 2, 1 / 2, 1 / 2]] }, // ▙
+    '\u259A': { rects: [[0, 0, 1 / 2, 1 / 2], [1 / 2, 1 / 2, 1 / 2, 1 / 2]] }, // ▚
+    '\u259B': { rects: [[0, 0, 1, 1 / 2], [0, 1 / 2, 1 / 2, 1 / 2]] }, // ▛
+    '\u259C': { rects: [[0, 0, 1, 1 / 2], [1 / 2, 1 / 2, 1 / 2, 1 / 2]] }, // ▜
+    '\u259D': { rects: [[1 / 2, 0, 1 / 2, 1 / 2]] }, // ▝ upper right
+    '\u259E': { rects: [[1 / 2, 0, 1 / 2, 1 / 2], [0, 1 / 2, 1 / 2, 1 / 2]] }, // ▞
+    '\u259F': { rects: [[1 / 2, 0, 1 / 2, 1], [0, 1 / 2, 1 / 2, 1 / 2]] }, // ▟
+};
+function sig(r) {
+    return [
+        r.fill,
+        r.bg ?? '_',
+        r.weight,
+        r.italic ? 'i' : '',
+        r.decoration ?? '',
+        r.underlineStyle ?? '',
+        r.underlineColor ?? '',
+        r.opacity,
+        r.visible ? 'v' : 'h',
+    ].join('|');
+}
+function buildRuns(cells, theme) {
+    // Trim trailing blank cells so the SVG crops tightly to content.
+    let end = cells.length;
+    while (end > 0 && isBlank(cells[end - 1]))
+        end--;
+    const runs = [];
+    let current = null;
+    for (let i = 0; i < end; i++) {
+        const cell = cells[i];
+        const e = effective(cell, theme);
+        const wide = cell.width >= 2;
+        const block = BLOCK_GEOMETRY[cell.char] !== undefined;
+        const box = BOX_DRAWING.test(cell.char);
+        const char = block ? cell.char : pinTextPresentation(cell.char, cell.width);
+        const next = {
+            startCol: cell.col,
+            widthCols: cell.width,
+            text: char,
+            ...e,
+            wide,
+            block,
+            box,
+        };
+        // A double-width cell, or a block-element cell drawn as geometry, must stand
+        // alone. Every run is absolutely positioned by an explicit `x`, but inside a
+        // run the font advances each glyph by its own (single-column) advance.
+        // Merging a wide glyph would push the remainder of the run one column left
+        // per wide cell; block cells are not emitted as text at all. Breaking the
+        // run here — and forbidding anything from merging onto a wide/block run —
+        // keeps every following run pinned to its true column.
+        //
+        // Box-drawing glyphs (borders, rules, the rounded corners of dialog and
+        // sub-menu frames) are isolated for a related reason: a box border is
+        // reached on different rows by runs of very different length — a single `│`
+        // on a body row, a 3-glyph `│ │` on an input-box row, a 100+-glyph
+        // `│ ╭───╮ │` on a frame edge. `lengthAdjust="spacing"` distributes the
+        // gap between our cell width and a renderer's (often wider, substituted)
+        // monospace advance across each run independently, so the SAME logical
+        // column lands at slightly different x per run length and the border
+        // zig-zags / doubles in Figma. Pinning every box glyph to its own
+        // single-glyph run gives each its own absolute `x`, so borders, corners and
+        // rules align column-perfectly in every renderer while keeping the exact
+        // font glyph (rounded corners included).
+        const mergeable = current !== null &&
+            !wide &&
+            !block &&
+            !box &&
+            !current.wide &&
+            !current.block &&
+            !current.box &&
+            sig(current) === sig(next) &&
+            cell.col === current.startCol + current.widthCols;
+        if (mergeable) {
+            current.text += char;
+            current.widthCols += cell.width;
+        }
+        else {
+            if (current)
+                runs.push(current);
+            current = next;
+        }
+    }
+    if (current)
+        runs.push(current);
+    // The emit loop groups column-contiguous foreground runs (text + the single
+    // spaces between them) into one <text> per stretch, so prose stays a single
+    // editable object and Figma flows colour changes seamlessly. Here we only need
+    // to break a run at interior gaps of 2+ spaces — which every SVG renderer
+    // collapses to one space — so the segment after the gap starts its own run and
+    // pins to its true column (a dialog box's interior padding can't pull its right
+    // border left). Leading whitespace is peeled into its own run so the first
+    // glyph keeps its own absolute x even though Figma trims a node's leading
+    // whitespace.
+    return runs
+        .flatMap((run) => splitAtInteriorGaps(run))
+        .flatMap(pinAfterLeadingSpace);
+}
+/**
+ * Split a run at interior gaps of two or more spaces so each visible segment is
+ * pinned to its own column.
+ *
+ * A run is positioned only by an explicit `x` on its first cell; the font then
+ * advances each later glyph itself. SVG renderers (Figma, headless Chrome, many
+ * editor previews) collapse a run of 2+ spaces to a single space, so a row that
+ * is one uniform-style run — a dialog/sub-menu box row like
+ * "│ Prompt:        │" or a selected menu item "❯ 1. Yes        " — loses its
+ * interior padding and its trailing border/segment slides left. Pinning such a
+ * run's end with `textLength` would instead stretch the few surviving glyphs
+ * across the whole row. Splitting the run at every 2+-space gap gives each
+ * visible segment (a border, a label, a nested border) its own absolute `x` on
+ * its true column, so it lands correctly regardless of how the renderer treats
+ * whitespace, and each segment is short and gap-free so `textLength` pins it
+ * without stretching.
+ *
+ * The split keeps full column coverage: the gap stretches are emitted as their
+ * own space-only sub-runs (skipped by the text pass but still drawn as
+ * background rects), so selection bars and other backgrounds tile exactly as
+ * before. Single spaces are never a gap, so ordinary words ("GitHub Copilot
+ * CLI", "❯ ok") stay one run and flow together in the emit loop. Wide/block/box
+ * runs are always a single cell and are never split. Column offsets are counted
+ * excluding VS15 (U+FE0E), which `pinTextPresentation` appends as a zero-width
+ * selector.
+ */
+function splitAtInteriorGaps(run) {
+    if (run.wide || run.block || run.box)
+        return [run];
+    if (!/ {2,}/.test(run.text))
+        return [run];
+    const text = run.text;
+    const colsOf = (s) => {
+        let n = 0;
+        for (const cp of s)
+            if (cp !== '\uFE0E')
+                n++;
+        return n;
+    };
+    const parts = [];
+    let startCol = run.startCol;
+    const emit = (slice) => {
+        if (slice === '')
+            return;
+        const widthCols = colsOf(slice);
+        parts.push({ ...run, text: slice, startCol, widthCols });
+        startCol += widthCols;
+    };
+    const gap = / {2,}/g;
+    let cursor = 0;
+    let m;
+    while ((m = gap.exec(text)) !== null) {
+        emit(text.slice(cursor, m.index));
+        emit(m[0]);
+        cursor = m.index + m[0].length;
+    }
+    emit(text.slice(cursor));
+    return parts;
+}
+/**
+ * Pin a glyph that follows a gap to its true column.
+ *
+ * A run is positioned only by an explicit `x` on its first cell; the font then
+ * advances every later glyph by its own width. A run that is a long stretch of
+ * spaces followed by a visible glyph — the right-edge box border / scrollbar,
+ * which shares the white fill of the empty cells before it, so it merges into
+ * the same run — therefore lets that glyph ride N space-advances past the run's
+ * `x`. In any renderer whose space advance differs from our cell width by δ
+ * (Figma and some editor SVG previews substitute the monospace font) the glyph
+ * drifts by N·δ, so the right border zig-zags row to row: pinned on rows where
+ * its colour breaks the run, drifted on rows where it doesn't.
+ *
+ * Splitting the leading whitespace into its own run gives the trailing glyph its
+ * own absolute `x`, so it lands on its true column in every renderer. Both halves
+ * keep the same style (and background), so bars and gaps are unchanged. Runs with
+ * no leading whitespace (ordinary words like "GitHub Copilot CLI") and pure
+ * whitespace runs (separators/indents) are returned untouched, and wide/block
+ * runs — always a single cell — are never split.
+ */
+function pinAfterLeadingSpace(run) {
+    if (run.wide || run.block || run.box)
+        return [run];
+    const lead = run.text.length - run.text.replace(/^ +/, '').length;
+    if (lead === 0 || lead === run.text.length)
+        return [run];
+    return [
+        { ...run, text: run.text.slice(0, lead), widthCols: lead },
+        {
+            ...run,
+            text: run.text.slice(lead),
+            startCol: run.startCol + lead,
+            widthCols: run.widthCols - lead,
+        },
+    ];
+}
+function escapeXml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function roundedTopRect(w, h, r) {
+    return `M0,${h} L0,${r} Q0,0 ${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h} Z`;
+}
+/**
+ * Windows 11 caption buttons (minimize, maximize, close) drawn as line/rect
+ * glyphs flush to the right edge of the title bar. Each button occupies a
+ * 46px-wide cell (the Windows DIP convention); only the glyphs are drawn so the
+ * bar reads as "at rest" with no hover backgrounds.
+ */
+function winCaptionButtons(width, cy, fg, opacity) {
+    const capW = 46;
+    const g = 5; // half glyph size (10px icons)
+    const s = `stroke="${fg}" stroke-opacity="${opacity}" stroke-width="1" fill="none" shape-rendering="geometricPrecision"`;
+    const closeCx = width - capW / 2;
+    const maxCx = width - capW * 1.5;
+    const minCx = width - capW * 2.5;
+    return (`<line x1="${minCx - g}" y1="${cy}" x2="${minCx + g}" y2="${cy}" ${s}/>` +
+        `<rect x="${maxCx - g}" y="${cy - g}" width="${g * 2}" height="${g * 2}" rx="1" ${s}/>` +
+        `<line x1="${closeCx - g}" y1="${cy - g}" x2="${closeCx + g}" y2="${cy + g}" ${s}/>` +
+        `<line x1="${closeCx + g}" y1="${cy - g}" x2="${closeCx - g}" y2="${cy + g}" ${s}/>`);
+}
+/**
+ * The content extent of a set of per-row runs, in grid columns/rows: the
+ * right-most occupied column and the bottom-most occupied row (each at least 1).
+ * Shared by `renderSvg` (auto-fit) and `measureGrid` so a measured size always
+ * matches what `renderSvg` would draw.
+ */
+function measureRuns(runsByRow) {
+    let rows = 0;
+    let cols = 1;
+    runsByRow.forEach((runs, y) => {
+        if (runs.length === 0)
+            return;
+        rows = y + 1;
+        const last = runs[runs.length - 1];
+        cols = Math.max(cols, last.startCol + last.widthCols);
+    });
+    return { cols, rows: Math.max(rows, 1) };
+}
+/**
+ * Measure a grid's content extent (columns × rows) exactly as `renderSvg` would
+ * auto-fit it. Used to compute a uniform animation canvas size across frames.
+ */
+function measureGrid(grid, theme) {
+    return measureRuns(grid.lines.map((cells) => buildRuns(cells, theme)));
+}
+/** Render a styled grid into a self-contained, editable SVG document. */
+function renderSvg(grid, opts) {
+    const { theme } = opts;
+    const cellW = opts.fontSize * opts.advance;
+    const cellH = Math.round(opts.fontSize * opts.lineHeight);
+    const runsByRow = grid.lines.map((cells) => buildRuns(cells, theme));
+    // Auto-fit canvas to the content actually present.
+    const fit = measureRuns(runsByRow);
+    // For uniform animation frames the caller can pin a minimum canvas size so
+    // every frame shares identical dimensions; real content never gets clipped.
+    const usedCols = Math.max(fit.cols, opts.fixedCols ?? 0);
+    const usedRows = Math.max(fit.rows, opts.fixedRows ?? 0);
+    // A typing cursor can sit one cell past the last glyph (an empty cell that
+    // background trimming has already dropped), so widen the canvas to keep it on
+    // screen. Clamp to a sane cell so a stray caret can't blow up the dimensions.
+    const cursor = opts.cursor && opts.cursor.row >= 0 && opts.cursor.col >= 0 ? opts.cursor : null;
+    const canvasCols = cursor ? Math.max(usedCols, cursor.col + 1) : usedCols;
+    const canvasRows = cursor ? Math.max(usedRows, cursor.row + 1) : usedRows;
+    const isWindows = opts.chromeStyle === 'windows' || opts.chromeStyle === 'windows-inactive';
+    const barH = opts.chrome ? (isWindows ? 32 : 40) : 0;
+    const contentLeft = opts.padding;
+    const contentTop = barH + opts.padding;
+    const width = Math.ceil(canvasCols * cellW + opts.padding * 2);
+    const height = Math.ceil(canvasRows * cellH + opts.padding * 2 + barH);
+    const x = (col) => +(contentLeft + col * cellW).toFixed(2);
+    const lineTop = (row) => contentTop + row * cellH;
+    const baseline = (row) => +(lineTop(row) + opts.fontSize).toFixed(2);
+    // Emit a block-element glyph as one or more geometric rects filling the cell,
+    // so it tiles edge to edge instead of leaving a line-height gap.
+    const blockRectsFor = (char, col, row, fill, opacity) => {
+        const geom = BLOCK_GEOMETRY[char];
+        if (!geom)
+            return [];
+        const cellLeft = x(col);
+        const cellRight = x(col + 1);
+        const cellWpx = cellRight - cellLeft;
+        const cellTop = lineTop(row);
+        const op = opacity * (geom.opacity ?? 1);
+        const opAttr = op !== 1 ? ` fill-opacity="${+op.toFixed(3)}"` : '';
+        return geom.rects.map(([fx, fy, fw, fh]) => {
+            const rx = +(cellLeft + cellWpx * fx).toFixed(2);
+            const ry = +(cellTop + cellH * fy).toFixed(2);
+            const rw = +(cellWpx * fw).toFixed(2);
+            const rh = +(cellH * fh).toFixed(2);
+            return (`<rect x="${rx}" y="${ry}" width="${rw}" height="${rh}" ` +
+                `fill="${fill}"${opAttr} shape-rendering="crispEdges"/>`);
+        });
+    };
+    const bgRects = [];
+    const blockRects = [];
+    const textLines = [];
+    runsByRow.forEach((runs, y) => {
+        if (runs.length === 0)
+            return;
+        for (const run of runs) {
+            if (run.bg) {
+                bgRects.push(`<rect x="${x(run.startCol)}" y="${lineTop(y)}" ` +
+                    `width="${+(run.widthCols * cellW).toFixed(2)}" height="${cellH}" ` +
+                    `fill="${run.bg}" shape-rendering="crispEdges"/>`);
+            }
+            // Block-element glyphs are drawn geometrically (gapless), on top of any bg.
+            if (run.block && run.visible) {
+                blockRects.push(...blockRectsFor(run.text, run.startCol, y, run.fill, run.opacity));
+            }
+        }
+        // Emit the row's text by grouping each run of column-contiguous foreground
+        // glyphs into ONE <text> element, with a <tspan> per colour/style segment.
+        //
+        // Figma's SVG import honours `x` on a <text> but *ignores* it on a child
+        // <tspan>: it flows a text node's tspans continuously at the font's own
+        // advance. Our grid uses SF Mono's true advance (see `advance`), so that flow
+        // lands on the same columns as the background rects and borders. A SINGLE
+        // <text> per contiguous stretch is therefore the faithful unit: the single
+        // spaces between words are real glyphs that flow (never collapse), a colour
+        // change is just the next tspan picking up where the last left off (so a long
+        // link can't overflow onto an adjacent period — the "Capture." overlap), and
+        // the whole sentence stays ONE editable object instead of a litter of
+        // per-word nodes. We only START A NEW <text> where the
+        // glyphs are genuinely discontiguous and must pin to their own column:
+        //   • box / wide / block glyphs — each owns its cell (borders must tile, a
+        //     wide glyph spans two columns), so they are emitted standalone;
+        //   • background runs (selection bars, tab pills) — kept whole so their fill
+        //     <rect> tiles as one span;
+        //   • a real gap of 2+ spaces — collapsed to one space by Figma/Chrome, so it
+        //     is dropped and the following segment pins to its true column (without
+        //     this a box's interior padding would pull its right border left).
+        // Pure-whitespace runs carry no glyph (any background is a <rect>); a single
+        // space *between* two segments flows inside the group, but a leading/trailing
+        // one is dropped so the group still begins on its true column (Figma trims a
+        // node's leading whitespace).
+        const styleAttrs = (run) => {
+            const a = [`fill="${run.fill}"`];
+            if (run.weight !== 400)
+                a.push(`font-weight="${run.weight}"`);
+            if (run.italic)
+                a.push('font-style="italic"');
+            if (run.decoration) {
+                // A non-single style or a distinct underline color needs the CSS
+                // longhands (the `text-decoration` shorthand attribute can't carry
+                // them). Plain single underline / strike stay on the simple, widely
+                // supported presentation attribute.
+                const styleKey = run.underlineStyle ? CSS_UNDERLINE_STYLE[run.underlineStyle] : undefined;
+                if (styleKey || run.underlineColor) {
+                    const parts = [`text-decoration-line:${run.decoration}`];
+                    if (styleKey)
+                        parts.push(`text-decoration-style:${styleKey}`);
+                    if (run.underlineColor)
+                        parts.push(`text-decoration-color:${run.underlineColor}`);
+                    a.push(`style="${parts.join(';')}"`);
+                }
+                else {
+                    a.push(`text-decoration="${run.decoration}"`);
+                }
+            }
+            if (run.opacity !== 1)
+                a.push(`fill-opacity="${run.opacity}"`);
+            return a;
+        };
+        const isStandalone = (run) => run.wide || run.block || run.box || !!run.bg;
+        const isBlankRun = (run) => run.text.trim() === '';
+        // The font *face* Figma resolves for a run. Figma's SVG import assigns ONE
+        // fontName (family + weight + italic) per <text> node — it honours per-<tspan>
+        // `fill` (so colour mixes inside one node) but IGNORES per-<tspan> weight and
+        // style, so a mixed-weight line collapses to a single weight. The family is
+        // global here, so weight+italic is the whole key; a change in it must split
+        // into a new pinned <text> (see the grouping loop), while colour/decoration
+        // stay as <tspan>s within one node.
+        const fontFace = (run) => `${run.weight}|${run.italic ? 'i' : ''}`;
+        // Emit a standalone run (border / wide glyph / selection bar) as its own
+        // column-pinned <text>, its end pinned to its true column with textLength so
+        // it can't ride the substitute font's advance and drift the frame.
+        const emitStandalone = (run) => {
+            const text = run.wide ? run.text : run.text.replace(/ +$/, '');
+            if (text.trim() === '')
+                return;
+            const widthCols = run.widthCols - (run.text.length - text.length);
+            const attrs = [
+                `x="${x(run.startCol)}"`,
+                `y="${baseline(y)}"`,
+                ...styleAttrs(run),
+                `textLength="${+(widthCols * cellW).toFixed(2)}"`,
+                `lengthAdjust="${run.wide ? 'spacingAndGlyphs' : 'spacing'}"`,
+            ];
+            textLines.push(`<text ${attrs.join(' ')}>${escapeXml(text)}</text>`);
+        };
+        // Emit a contiguous group as one <text>, coalescing adjacent same-style runs
+        // into a single tspan (so a uniform sentence is one plain <text>, and a
+        // multi-colour line is one <text> with a tspan per colour). textLength pins
+        // the group's end to its column span for renderers that honour it (Chrome,
+        // the still/MP4 rasteriser); Figma ignores it but flows the tspans, which is
+        // what keeps the colour boundaries seamless there.
+        const emitGroup = (group) => {
+            const segs = [];
+            for (const run of group) {
+                const attrs = styleAttrs(run);
+                const key = attrs.join(' ');
+                const last = segs[segs.length - 1];
+                if (last && last.key === key) {
+                    last.text += run.text;
+                    last.cols += run.widthCols;
+                }
+                else {
+                    segs.push({ attrs, key, text: run.text, cols: run.widthCols });
+                }
+            }
+            // Rebalance whitespace at <tspan> boundaries. Figma preserves a trailing
+            // space on a tspan (verified) but TRIMS a leading or pure-whitespace one —
+            // so a single space that lands at the START of a tspan vanishes there. This
+            // bites the leading-icon rows: a coloured bullet "●", a "$" prompt, or a
+            // "·" separator is its own colour, the following space is the default
+            // colour, and the body is yet another colour, so the space becomes a
+            // standalone `<tspan> </tspan>` that Figma drops ("●No copilot…"). Move each
+            // segment's leading whitespace onto the previous segment's trailing edge,
+            // where Figma keeps it; spaces draw nothing so the colour they carry is
+            // irrelevant, and the concatenated text (and textLength) is unchanged, so
+            // Chrome/raster render identically. When removing a differently-styled space
+            // makes two same-style segments adjacent (e.g. a grey path, a default-colour
+            // space, then a grey "[⎇ main]"), re-coalesce them into one tspan so the
+            // output stays minimal.
+            const balanced = [];
+            for (const seg of segs) {
+                const lead = seg.text.length - seg.text.replace(/^ +/, '').length;
+                if (lead > 0 && balanced.length > 0) {
+                    const prev = balanced[balanced.length - 1];
+                    prev.text += seg.text.slice(0, lead);
+                    prev.cols += lead;
+                    seg.text = seg.text.slice(lead);
+                    seg.cols -= lead;
+                }
+                if (seg.text.length === 0)
+                    continue;
+                const prev = balanced[balanced.length - 1];
+                if (prev && prev.key === seg.key) {
+                    prev.text += seg.text;
+                    prev.cols += seg.cols;
+                }
+                else {
+                    balanced.push(seg);
+                }
+            }
+            segs.length = 0;
+            segs.push(...balanced);
+            if (segs.length === 0)
+                return;
+            // Trailing spaces draw nothing and Figma trims them; drop them from the
+            // last segment so they don't pad textLength.
+            const last = segs[segs.length - 1];
+            const trimmed = last.text.replace(/ +$/, '');
+            last.cols -= last.text.length - trimmed.length;
+            last.text = trimmed;
+            if (last.text === '')
+                segs.pop();
+            if (segs.length === 0)
+                return;
+            // Figma trims a text node's LEADING whitespace, so the first glyph must own
+            // the pin column. A group that began right after a weight split can start on
+            // the separating space (it took the new weight); drop that leading space and
+            // advance the pin. The empty columns are reclaimed by this `x` pin, and
+            // textLength shrinks to match, so Chrome/raster stay pixel-identical.
+            let pinCol = group[0].startCol;
+            const lead0 = segs[0].text.length - segs[0].text.replace(/^ +/, '').length;
+            if (lead0 > 0) {
+                segs[0].text = segs[0].text.slice(lead0);
+                segs[0].cols -= lead0;
+                pinCol += lead0;
+                if (segs[0].text === '') {
+                    segs.shift();
+                    if (segs.length === 0)
+                        return;
+                }
+            }
+            const totalCols = segs.reduce((n, s) => n + s.cols, 0);
+            const head = [
+                `x="${x(pinCol)}"`,
+                `y="${baseline(y)}"`,
+                `textLength="${+(totalCols * cellW).toFixed(2)}"`,
+                `lengthAdjust="spacing"`,
+            ];
+            if (segs.length === 1) {
+                const attrs = [head[0], head[1], ...segs[0].attrs, head[2], head[3]];
+                textLines.push(`<text ${attrs.join(' ')}>${escapeXml(segs[0].text)}</text>`);
+            }
+            else {
+                const body = segs
+                    .map((s) => `<tspan ${s.attrs.join(' ')}>${escapeXml(s.text)}</tspan>`)
+                    .join('');
+                textLines.push(`<text ${[`fill="${group[0].fill}"`, ...head].join(' ')}>${body}</text>`);
+            }
+        };
+        for (let i = 0; i < runs.length;) {
+            const run = runs[i];
+            if (!run.visible || run.block) {
+                i++;
+                continue;
+            }
+            if (isStandalone(run)) {
+                emitStandalone(run);
+                i++;
+                continue;
+            }
+            if (isBlankRun(run)) {
+                // A separator / indent / 2+-space gap between groups: carries no glyph,
+                // and the next group pins itself, so drop it.
+                i++;
+                continue;
+            }
+            // Start a contiguous group at this glyph run and pull in the following
+            // flow runs (more glyphs, and the single spaces between them) until a
+            // standalone glyph, a 2+-space gap, a weight/italic change, or the end of
+            // the row. A weight/italic change must break the group because Figma can't
+            // render mixed weight inside one <text> (see `fontFace`); the single space
+            // at such a boundary is weight-neutral and rides along, its column reclaimed
+            // by the next group's `x` pin.
+            const group = [run];
+            const groupFace = fontFace(run);
+            i++;
+            while (i < runs.length) {
+                const cur = runs[i];
+                if (!cur.visible || cur.block || isStandalone(cur))
+                    break;
+                if (isBlankRun(cur) && cur.widthCols >= 2)
+                    break;
+                if (!isBlankRun(cur) && fontFace(cur) !== groupFace)
+                    break;
+                group.push(cur);
+                i++;
+            }
+            while (group.length && isBlankRun(group[group.length - 1]))
+                group.pop();
+            if (group.length)
+                emitGroup(group);
+        }
+    });
+    const cy = barH / 2;
+    // The typing cursor: a solid foreground block at the caret cell, drawn on top
+    // of the row's text so it reads as a real block caret.
+    const cursorRects = cursor
+        ? blockRectsFor('\u2588', cursor.col, cursor.row, theme.foreground, 1)
+        : [];
+    // Window controls: macOS traffic lights (left) or Windows caption buttons (right).
+    // Traffic-light geometry measured off a real macOS Tahoe Terminal and scaled to
+    // the 40px bar: Ø18 lights, 29px center-to-center, first light inset 20px,
+    // vertically centered (cy). Decoupled from content padding so they hug the corner.
+    const lightR = 9;
+    const lightGap = 29;
+    const lightInset = 20;
+    // macOS traffic-light fills. On an inactive (unfocused) window macOS drops the
+    // red/yellow/green and draws all three as the same flat grey (#464a4c,
+    // measured off a real Terminal screenshot).
+    const macLights = opts.chromeStyle === 'mac-inactive'
+        ? ['#464a4c', '#464a4c', '#464a4c']
+        : ['#ff5f57', '#febc2e', '#28c840'];
+    // Windows 11 title bar (Figma "SVG Import Diagnostic" nodes 52:22797 active /
+    // 52:22744 inactive): #202020 fill, rgba(117,117,117,0.4) border, white title
+    // + caption glyphs. An inactive (unfocused) window dims the title and glyphs to
+    // 36% white; the fill and border are unchanged.
+    const winInactive = opts.chromeStyle === 'windows-inactive';
+    const winFg = '#ffffff';
+    const winOpacity = winInactive ? 0.36 : 1;
+    const controls = !opts.chrome
+        ? ''
+        : isWindows
+            ? winCaptionButtons(width, cy, winFg, winOpacity)
+            : macLights
+                .map((c, i) => `<circle cx="${lightInset + i * lightGap}" cy="${cy}" r="${lightR}" fill="${c}"/>`)
+                .join('');
+    // macOS centers the title; Windows left-aligns it where the app name sits.
+    const titleEl = !opts.chrome
+        ? ''
+        : isWindows
+            ? `<text x="${opts.padding}" y="${cy + 4}" text-anchor="start" ` +
+                `font-family="'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif" font-size="12" ` +
+                `fill="${winFg}" fill-opacity="${winOpacity}">${escapeXml(opts.title)}</text>`
+            : `<text x="${width / 2}" y="${cy + 4}" text-anchor="middle" ` +
+                `font-family="-apple-system, 'Segoe UI', sans-serif" font-size="13" ` +
+                `fill="${theme.foreground}" fill-opacity="0.65">${escapeXml(opts.title)}</text>`;
+    // Windows chrome uses the Figma title-bar fill (#202020); macOS keeps the
+    // Primer muted token.
+    const chromeFill = isWindows ? '#202020' : theme.chrome;
+    const header = opts.chrome
+        ? `<path d="${roundedTopRect(width, barH, opts.radius)}" fill="${chromeFill}"/>` +
+            controls +
+            titleEl
+        : '';
+    const defs = opts.fontFace
+        ? [`<defs><style type="text/css"><![CDATA[${opts.fontFace}]]></style></defs>`]
+        : [];
+    const frameRect = `x="0.5" y="0.5" width="${width - 1}" height="${height - 1}" rx="${opts.radius}"`;
+    // Windows 11 frames the whole window in a subtle rgba(117,117,117,0.4) border
+    // (Figma); macOS keeps the Primer border token.
+    const frameBorder = isWindows ? '#757575' : theme.border;
+    const frameBorderOpacity = isWindows ? 0.4 : 1;
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ` +
+            `viewBox="0 0 ${width} ${height}" font-family="${escapeXml(opts.fontFamily)}" ` +
+            `font-size="${opts.fontSize}">`,
+        ...defs,
+        // Background fill only. The 1px frame stroke is emitted LAST (below) so it
+        // wraps the whole window — chrome bar included — instead of being painted
+        // over by the chrome fill.
+        `<rect ${frameRect} fill="${theme.background}"/>`,
+        header,
+        `<g xml:space="preserve">`,
+        ...bgRects,
+        ...blockRects,
+        ...textLines,
+        ...cursorRects,
+        `</g>`,
+        `<rect ${frameRect} fill="none" stroke="${frameBorder}" stroke-opacity="${frameBorderOpacity}" stroke-width="1"/>`,
+        `</svg>`,
+        '',
+    ].join('\n');
+}