fancy-ui-svelte 0.9.0 → 0.10.0

package/dist/fancy-ui/terminal-block/TerminalBlock.svelte

@@ -0,0 +1,263 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	/**
+	 * Props for TerminalBlock
+	 */
+	export interface TerminalBlockProps {
+		/** Everything the command has printed so far, not the latest chunk. Reassign as lines arrive. */
+		output: string;
+		/** The command that produced the output, shown on the first line after the prompt glyph. */
+		command?: string;
+		/** Prompt glyph in front of the command. */
+		prompt?: string;
+		/** Whether the command is still running. Shows the cursor and keeps the view pinned. */
+		running?: boolean;
+		/** Exit status. Anything other than null or undefined ends the run and shows the footer. */
+		exitCode?: number | null;
+		/** How long the run took, shown next to the exit status. */
+		durationMs?: number;
+		/** Read the SGR subset and colour the output. False renders the same text, unstyled. */
+		ansi?: boolean;
+		/** Height at which the output starts scrolling. */
+		maxHeight?: string;
+		/** Title bar above the output — window dots, a file name, a copy button. */
+		header?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** The root element */
+		ref?: HTMLDivElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { autoscroll } from "../_internals/autoscroll.js";
+	import { parseAnsi, type AnsiSegment } from "./ansi.js";
+
+	let {
+		output,
+		command,
+		prompt = "$",
+		running = false,
+		exitCode = null,
+		durationMs,
+		ansi = true,
+		maxHeight = "20rem",
+		header,
+		class: className,
+		ref = $bindable(null),
+	}: TerminalBlockProps = $props();
+
+	/**
+	 * The palette a consumer overrides by setting `--ft-terminal-*` anywhere above
+	 * the block. Each entry is the readable-on-dark version of its colour, which
+	 * is also why the bright SGR codes fold onto the same eight values.
+	 */
+	const FALLBACK: Record<string, string> = {
+		"--ft-terminal-black": "oklch(0.44 0.01 260)",
+		"--ft-terminal-red": "oklch(0.7 0.18 22)",
+		"--ft-terminal-green": "oklch(0.78 0.17 150)",
+		"--ft-terminal-yellow": "oklch(0.85 0.15 90)",
+		"--ft-terminal-blue": "oklch(0.74 0.13 250)",
+		"--ft-terminal-magenta": "oklch(0.74 0.18 330)",
+		"--ft-terminal-cyan": "oklch(0.82 0.11 200)",
+		"--ft-terminal-white": "oklch(0.95 0.005 260)",
+	};
+
+	const finished = $derived(exitCode !== null && exitCode !== undefined);
+	const ok = $derived(exitCode === 0);
+	const duration = $derived(formatDuration(durationMs));
+
+	const rows = $derived.by(() => {
+		const lines = toRows(output, ansi);
+		// A stream that has printed nothing yet still needs a line to put the
+		// cursor on; a finished one should not end on a blank line just because
+		// its last write ended in a newline.
+		if (lines.length === 0) return running ? [[]] : [];
+		const last = lines[lines.length - 1];
+		if (!running && lines.length > 1 && last.length === 0) lines.pop();
+		return lines;
+	});
+
+	/**
+	 * Parse once over the whole stream, then cut the segments at the newlines:
+	 * a colour opened on one line and closed three lines later stays in effect
+	 * for the lines in between, the way a terminal would show it.
+	 */
+	function toRows(src: string, styled: boolean): AnsiSegment[][] {
+		if (src === "") return [];
+		// CRLF becomes one newline; a lone CR is dropped rather than rewinding
+		// the line, so a progress bar collapses instead of exploding into rows.
+		const normalized = src.replace(/\r\n/g, "\n").replace(/\r/g, "");
+		const lines: AnsiSegment[][] = [[]];
+		for (const segment of parseAnsi(normalized)) {
+			const parts = segment.text.split("\n");
+			for (let i = 0; i < parts.length; i++) {
+				if (i > 0) lines.push([]);
+				if (parts[i] === "") continue;
+				lines[lines.length - 1].push({
+					text: parts[i],
+					bold: styled && segment.bold,
+					fg: styled ? segment.fg : null,
+				});
+			}
+		}
+		return lines;
+	}
+
+	function colour(fg: string | null): string | undefined {
+		if (fg === null) return undefined;
+		return `var(${fg}, ${FALLBACK[fg] ?? "inherit"})`;
+	}
+
+	/**
+	 * Command durations live in the sub-second range often enough that a
+	 * stopwatch reading of "0s" would be the wrong answer most of the time.
+	 */
+	function formatDuration(ms: number | undefined): string | null {
+		if (ms === undefined || !Number.isFinite(ms) || ms < 0) return null;
+		if (ms < 1000) return `${Math.round(ms)}ms`;
+		if (ms < 60_000) {
+			// Rounded to a tenth first: a value that rounds up to a full 60.0s has
+			// to fall through to the minute form rather than print a second count
+			// that does not exist.
+			const deciseconds = Math.round(ms / 100);
+			if (deciseconds < 600) return `${(deciseconds / 10).toFixed(1)}s`;
+		}
+		// Rounding to whole seconds before splitting means the carry happens on its
+		// own: rounding each unit separately is what produced "1m 60s".
+		const totalSeconds = Math.round(ms / 1000);
+		const minutes = Math.floor(totalSeconds / 60);
+		const seconds = totalSeconds % 60;
+		return `${minutes}m ${seconds < 10 ? "0" : ""}${seconds}s`;
+	}
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("ft-terminal overflow-hidden rounded-lg font-mono text-sm", className)}
+>
+	{#if header}
+		<div class="ft-rule flex items-center gap-2 border-b px-4 py-2">{@render header()}</div>
+	{/if}
+
+	<div
+		role="log"
+		class="overflow-y-auto px-4 py-3 leading-relaxed"
+		style:max-height={maxHeight}
+		use:autoscroll={{ enabled: running, pinOnConnect: true }}
+	>
+		{#if command}
+			<div class="ft-line flex gap-2">
+				<span class="ft-prompt shrink-0 select-none" aria-hidden="true">{prompt}</span>
+				<span class="ft-wrap">{command}</span>
+			</div>
+		{/if}
+		{#each rows as segments, row (row)}
+			<div class="ft-line ft-wrap">
+				{#each segments as segment, i (i)}<span
+						class:ft-bold={segment.bold}
+						style:color={colour(segment.fg)}>{segment.text}</span
+					>{/each}{#if running && row === rows.length - 1}<span class="ft-cursor" aria-hidden="true"
+						>▊</span
+					>{/if}
+			</div>
+		{/each}
+	</div>
+
+	{#if finished}
+		<div
+			role="status"
+			class="ft-rule ft-status flex items-center gap-2 border-t px-4 py-2 text-xs"
+			class:ft-ok={ok}
+		>
+			<span aria-hidden="true">{ok ? "✓" : "✗"}</span>
+			<span>exited {exitCode}</span>
+			{#if duration}
+				<span class="ft-muted ml-auto tabular-nums">{duration}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/*
+	 * A terminal is dark in a light page too, so the surface is its own colour
+	 * rather than the theme's. Everything inside inherits from it — including
+	 * `color-scheme`, which is declared dark for exactly that reason: the shared
+	 * `--ft-status-*` fallbacks are `light-dark()` pairs, and on this surface the
+	 * dark half is the legible one whatever the page around it is doing.
+	 */
+	.ft-terminal {
+		color-scheme: dark;
+		background-color: var(--ft-terminal-bg, oklch(0.18 0.02 260));
+		color: var(--ft-terminal-fg, oklch(0.92 0.01 260));
+	}
+
+	.ft-rule {
+		border-color: color-mix(in oklab, currentColor 16%, transparent);
+	}
+
+	.ft-prompt {
+		color: var(--ft-terminal-green, oklch(0.78 0.17 150));
+	}
+
+	/* Output is preformatted, but a long line wraps rather than scrolling sideways. */
+	.ft-wrap {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+
+	/* Keeps a blank line the height of a written one. Matches leading-relaxed. */
+	.ft-line {
+		min-height: 1.625em;
+	}
+
+	.ft-bold {
+		font-weight: 700;
+	}
+
+	.ft-cursor {
+		display: inline-block;
+		opacity: 0.85;
+	}
+
+	/*
+	 * The exit verdict is a status, not terminal output: it reads off the
+	 * `--ft-status-*` vocabulary this component family shares rather than the ANSI
+	 * palette above, so a run that failed here looks like a failure everywhere else.
+	 */
+	.ft-status {
+		color: var(--ft-status-error, light-dark(oklch(0.5 0.19 25), oklch(0.7 0.18 25)));
+	}
+
+	.ft-status.ft-ok {
+		color: var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145)));
+	}
+
+	.ft-muted {
+		color: var(--ft-terminal-fg, oklch(0.92 0.01 260));
+		opacity: 0.55;
+	}
+
+	/*
+	 * The cursor is a steady block first and a blinking one second: reduced
+	 * motion still gets the "this is still running" signal, without the blink.
+	 */
+	@media (prefers-reduced-motion: no-preference) {
+		.ft-cursor {
+			animation: ft-terminal-cursor 1.1s step-end infinite;
+		}
+
+		@keyframes ft-terminal-cursor {
+			0%,
+			100% {
+				opacity: 0.85;
+			}
+			50% {
+				opacity: 0;
+			}
+		}
+	}
+</style>

package/dist/fancy-ui/terminal-block/TerminalBlock.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+/**
+ * Props for TerminalBlock
+ */
+export interface TerminalBlockProps {
+    /** Everything the command has printed so far, not the latest chunk. Reassign as lines arrive. */
+    output: string;
+    /** The command that produced the output, shown on the first line after the prompt glyph. */
+    command?: string;
+    /** Prompt glyph in front of the command. */
+    prompt?: string;
+    /** Whether the command is still running. Shows the cursor and keeps the view pinned. */
+    running?: boolean;
+    /** Exit status. Anything other than null or undefined ends the run and shows the footer. */
+    exitCode?: number | null;
+    /** How long the run took, shown next to the exit status. */
+    durationMs?: number;
+    /** Read the SGR subset and colour the output. False renders the same text, unstyled. */
+    ansi?: boolean;
+    /** Height at which the output starts scrolling. */
+    maxHeight?: string;
+    /** Title bar above the output — window dots, a file name, a copy button. */
+    header?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+    /** The root element */
+    ref?: HTMLDivElement | null;
+}
+declare const TerminalBlock: import("svelte").Component<TerminalBlockProps, {}, "ref">;
+type TerminalBlock = ReturnType<typeof TerminalBlock>;
+export default TerminalBlock;

package/dist/fancy-ui/terminal-block/TerminalBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/terminal-block/TerminalBlock.test.js

@@ -0,0 +1,197 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import TerminalBlock from "./TerminalBlock.svelte";
+const ESC = "\u001b";
+function root(container) {
+    return container.firstElementChild;
+}
+function log(container) {
+    return container.querySelector('[role="log"]');
+}
+/** The output rows, in order, excluding the command line. */
+function rows(container) {
+    return Array.from(log(container).querySelectorAll(".ft-line")).filter((el) => !el.classList.contains("flex"));
+}
+function textOf(container) {
+    return rows(container).map((el) => el.textContent ?? "");
+}
+describe("TerminalBlock", () => {
+    afterEach(cleanup);
+    it("renders the command after the prompt glyph", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "", command: "pnpm build", prompt: ">" },
+        });
+        const commandLine = log(container).querySelector(".flex");
+        expect(commandLine.textContent).toContain(">");
+        expect(commandLine.textContent).toContain("pnpm build");
+        expect(commandLine.querySelector(".ft-prompt")?.getAttribute("aria-hidden")).toBe("true");
+    });
+    it("renders no command line at all when no command is given", () => {
+        const { container } = render(TerminalBlock, { props: { output: "done" } });
+        expect(log(container).querySelector(".ft-prompt")).toBeNull();
+    });
+    it("renders one row per line of output", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "added 214 packages\naudited 215 packages\nfound 0 vulnerabilities" },
+        });
+        expect(textOf(container)).toEqual([
+            "added 214 packages",
+            "audited 215 packages",
+            "found 0 vulnerabilities",
+        ]);
+    });
+    it("appends rows as the output grows, keeping the ones already there", async () => {
+        const { container, rerender } = render(TerminalBlock, {
+            props: { output: "resolving…", running: true },
+        });
+        expect(textOf(container)).toEqual(["resolving…▊"]);
+        await rerender({ output: "resolving…\nfetching…\n", running: true });
+        // The trailing newline leaves an empty row for the cursor to sit on,
+        // exactly where a terminal would put it.
+        expect(textOf(container)).toEqual(["resolving…", "fetching…", "▊"]);
+    });
+    it("drops the trailing blank row once the run is over", async () => {
+        const { container, rerender } = render(TerminalBlock, {
+            props: { output: "building\n", running: true },
+        });
+        expect(textOf(container)).toHaveLength(2);
+        await rerender({ output: "building\n", running: false, exitCode: 0 });
+        expect(textOf(container)).toEqual(["building"]);
+    });
+    it("colours a segment through the CSS variable for its ANSI code", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: `${ESC}[32m✓ ok${ESC}[0m done` },
+        });
+        const spans = rows(container)[0].querySelectorAll("span");
+        expect(spans[0].getAttribute("style")).toContain("var(--ft-terminal-green");
+        expect(spans[0].textContent).toBe("✓ ok");
+        expect(spans[1].getAttribute("style")).toBeNull();
+        expect(spans[1].textContent).toBe(" done");
+    });
+    it("marks a bold segment without touching its colour", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: `${ESC}[1;31mERR!${ESC}[0m` },
+        });
+        const span = rows(container)[0].querySelector("span");
+        expect(span.classList.contains("ft-bold")).toBe(true);
+        expect(span.getAttribute("style")).toContain("var(--ft-terminal-red");
+    });
+    it("joins the segments of a line with no whitespace of its own", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: `${ESC}[32mA${ESC}[0mB${ESC}[33mC` },
+        });
+        expect(rows(container)[0].textContent).toBe("ABC");
+    });
+    it("keeps a colour open across the lines it spans", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: `${ESC}[33mfirst\nsecond${ESC}[0m` },
+        });
+        const [one, two] = rows(container);
+        expect(one.querySelector("span").getAttribute("style")).toContain("--ft-terminal-yellow");
+        expect(two.querySelector("span").getAttribute("style")).toContain("--ft-terminal-yellow");
+    });
+    it("still strips escapes when ansi is false, but paints nothing", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: `${ESC}[1;32mpassed${ESC}[0m`, ansi: false },
+        });
+        const span = rows(container)[0].querySelector("span");
+        expect(span.textContent).toBe("passed");
+        expect(span.getAttribute("style")).toBeNull();
+        expect(span.classList.contains("ft-bold")).toBe(false);
+    });
+    it("shows the block cursor on the last row only while running", async () => {
+        const { container, rerender } = render(TerminalBlock, {
+            props: { output: "step one\nstep two", running: true },
+        });
+        expect(container.querySelectorAll(".ft-cursor")).toHaveLength(1);
+        expect(rows(container)[1].textContent).toBe("step two▊");
+        await rerender({ output: "step one\nstep two", running: false });
+        expect(container.querySelector(".ft-cursor")).toBeNull();
+    });
+    it("gives an empty running stream a row for the cursor to sit on", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "", command: "pnpm test", running: true },
+        });
+        expect(container.querySelectorAll(".ft-cursor")).toHaveLength(1);
+    });
+    it("shows no footer until an exit code arrives", async () => {
+        const { container, rerender } = render(TerminalBlock, {
+            props: { output: "working", running: true },
+        });
+        expect(container.querySelector('[role="status"]')).toBeNull();
+        await rerender({ output: "working", running: false, exitCode: 0, durationMs: 1240 });
+        const footer = container.querySelector('[role="status"]');
+        expect(footer.textContent).toContain("✓");
+        expect(footer.textContent).toContain("exited 0");
+        expect(footer.textContent).toContain("1.2s");
+        expect(footer.classList.contains("ft-ok")).toBe(true);
+    });
+    it("marks a non-zero exit as a failure", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "boom", exitCode: 1, durationMs: 340 },
+        });
+        const footer = container.querySelector('[role="status"]');
+        expect(footer.textContent).toContain("✗");
+        expect(footer.textContent).toContain("exited 1");
+        expect(footer.textContent).toContain("340ms");
+        expect(footer.classList.contains("ft-ok")).toBe(false);
+    });
+    it("leaves the duration out when it is absent or nonsense", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "x", exitCode: 0, durationMs: Number.NaN },
+        });
+        expect(container.querySelector(".ft-muted")).toBeNull();
+    });
+    it("scrolls the output region at the height it was given, as a log", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "a", maxHeight: "8rem" },
+        });
+        expect(log(container).style.maxHeight).toBe("8rem");
+        expect(log(container).className).toContain("overflow-y-auto");
+    });
+    it("renders the header snippet above the output", () => {
+        const { container } = render(TerminalBlock, {
+            props: {
+                output: "a",
+                header: createRawSnippet(() => ({ render: () => "<span>build.log</span>" })),
+            },
+        });
+        expect(root(container).textContent).toContain("build.log");
+        expect(container.querySelector(".ft-rule")).not.toBeNull();
+    });
+    it("merges custom classes onto the root alongside the base ones", () => {
+        const { container } = render(TerminalBlock, {
+            props: { output: "a", class: "my-block" },
+        });
+        expect(root(container).className).toContain("my-block");
+        expect(root(container).className).toContain("font-mono");
+    });
+    it.each([
+        [59_999, "1m 00s"],
+        [119_999, "2m 00s"],
+        [3_599_999, "60m 00s"],
+    ])("carries a rounded %ims into the next minute", (durationMs, expected) => {
+        // Rounding each unit on its own produced counts that do not exist: "60.0s",
+        // "1m 60s", "59m 60s".
+        const { container } = render(TerminalBlock, {
+            props: { output: "x", exitCode: 0, durationMs },
+        });
+        expect(container.querySelector(".ft-muted")?.textContent).toContain(expected);
+    });
+    it("pins an already-running transcript that mounts overflowing", () => {
+        // jsdom lays nothing out, so the container has to be told it overflows.
+        const original = Object.getOwnPropertyDescriptor(Element.prototype, "scrollHeight");
+        Object.defineProperty(Element.prototype, "scrollHeight", { configurable: true, value: 1000 });
+        try {
+            const { container } = render(TerminalBlock, {
+                props: { output: "line\n".repeat(50), running: true },
+            });
+            expect(log(container).scrollTop).toBe(1000);
+        }
+        finally {
+            if (original)
+                Object.defineProperty(Element.prototype, "scrollHeight", original);
+        }
+    });
+});

package/dist/fancy-ui/terminal-block/ansi.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A deliberately small ANSI reader for terminal output surfaces.
+ *
+ * It produces an array of styled segments, never a string of HTML: the renderer
+ * walks the segments with plain Svelte markup, so escape sequences can only ever
+ * become styling or nothing at all — never markup.
+ *
+ * Supported: SGR reset (`0`), bold (`1`), and the eight foreground colours in
+ * both their normal (`30`–`37`) and bright (`90`–`97`) ranges, alone or
+ * compounded (`ESC[1;32m`). Everything else — cursor moves, erase sequences,
+ * OSC titles, background colours, 256/truecolour, unknown SGR parameters — is
+ * stripped without leaving a trace in the text.
+ *
+ * Every entry point is total: it returns a value for any input, including a
+ * half-written escape sequence at the end of a stream.
+ */
+/** A run of text sharing one set of attributes. */
+export interface AnsiSegment {
+    /** The text itself, with every escape sequence already removed. */
+    text: string;
+    /** Whether SGR bold is in effect for this run. */
+    bold: boolean;
+    /** Name of the CSS custom property holding the colour, or null for the default. */
+    fg: string | null;
+}
+/** The eight colour names the SGR foreground codes map onto. */
+export declare const ANSI_COLORS: readonly ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white"];
+export type AnsiColor = (typeof ANSI_COLORS)[number];
+/** Split a chunk of terminal output into styled runs. Never throws. */
+export declare function parseAnsi(src: string): AnsiSegment[];

package/dist/fancy-ui/terminal-block/ansi.js

@@ -0,0 +1,163 @@
+/**
+ * A deliberately small ANSI reader for terminal output surfaces.
+ *
+ * It produces an array of styled segments, never a string of HTML: the renderer
+ * walks the segments with plain Svelte markup, so escape sequences can only ever
+ * become styling or nothing at all — never markup.
+ *
+ * Supported: SGR reset (`0`), bold (`1`), and the eight foreground colours in
+ * both their normal (`30`–`37`) and bright (`90`–`97`) ranges, alone or
+ * compounded (`ESC[1;32m`). Everything else — cursor moves, erase sequences,
+ * OSC titles, background colours, 256/truecolour, unknown SGR parameters — is
+ * stripped without leaving a trace in the text.
+ *
+ * Every entry point is total: it returns a value for any input, including a
+ * half-written escape sequence at the end of a stream.
+ */
+/** The eight colour names the SGR foreground codes map onto. */
+export const ANSI_COLORS = [
+    "black",
+    "red",
+    "green",
+    "yellow",
+    "blue",
+    "magenta",
+    "cyan",
+    "white",
+];
+const ESC = "\u001b";
+const BEL = "\u0007";
+/** CSI parameter bytes, per ECMA-48: `0-9 : ; < = > ?`. */
+const PARAM_MIN = 0x30;
+const PARAM_MAX = 0x3f;
+/** CSI/escape intermediate bytes: space through `/`. */
+const INTERMEDIATE_MIN = 0x20;
+const INTERMEDIATE_MAX = 0x2f;
+/**
+ * Bright codes reuse the same eight variables rather than doubling the palette:
+ * on a dark surface the "normal" set is already the readable one.
+ */
+function fgVar(code) {
+    if (code >= 30 && code <= 37)
+        return `--ft-terminal-${ANSI_COLORS[code - 30]}`;
+    if (code >= 90 && code <= 97)
+        return `--ft-terminal-${ANSI_COLORS[code - 90]}`;
+    return null;
+}
+function applySgr(params, state) {
+    const parts = params.split(";");
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        // An omitted parameter means 0, so `ESC[m` and `ESC[;32m` both behave.
+        const code = part === "" ? 0 : Number(part);
+        if (!Number.isInteger(code))
+            continue;
+        if (code === 0) {
+            state.bold = false;
+            state.fg = null;
+            continue;
+        }
+        if (code === 1) {
+            state.bold = true;
+            continue;
+        }
+        // An extended colour carries its value in the parameters that follow it —
+        // `38;5;n` or `38;2;r;g;b` — and those are data, not codes: the 31 in
+        // `38;5;31` is a palette index, not "red". Both forms are dropped either
+        // way; taking the whole run at once is what stops the payload being read
+        // back out as styling. A truncated run consumes only what is there, since
+        // the loop bound catches an index past the end.
+        if (code === 38 || code === 48) {
+            i += parts[i + 1] === "5" ? 2 : parts[i + 1] === "2" ? 4 : 1;
+            continue;
+        }
+        const colour = fgVar(code);
+        if (colour !== null)
+            state.fg = colour;
+    }
+}
+/** Split a chunk of terminal output into styled runs. Never throws. */
+export function parseAnsi(src) {
+    if (typeof src !== "string" || src.length === 0)
+        return [];
+    // Most lines of output carry no styling at all.
+    if (!src.includes(ESC))
+        return [{ text: src, bold: false, fg: null }];
+    const out = [];
+    const state = { bold: false, fg: null };
+    let buf = "";
+    let i = 0;
+    function flush() {
+        if (buf === "")
+            return;
+        // A stripped sequence (a cursor move mid-line, say) splits the buffer
+        // without changing the attributes; those two runs are one run.
+        const last = out[out.length - 1];
+        if (last !== undefined && last.bold === state.bold && last.fg === state.fg) {
+            last.text += buf;
+        }
+        else {
+            out.push({ text: buf, bold: state.bold, fg: state.fg });
+        }
+        buf = "";
+    }
+    while (i < src.length) {
+        if (src[i] !== ESC) {
+            buf += src[i];
+            i += 1;
+            continue;
+        }
+        flush();
+        const next = src[i + 1];
+        if (next === "[") {
+            // CSI: parameter bytes, then intermediates, then exactly one final byte.
+            let j = i + 2;
+            while (j < src.length && src.charCodeAt(j) >= PARAM_MIN && src.charCodeAt(j) <= PARAM_MAX) {
+                j += 1;
+            }
+            const params = src.slice(i + 2, j);
+            while (j < src.length &&
+                src.charCodeAt(j) >= INTERMEDIATE_MIN &&
+                src.charCodeAt(j) <= INTERMEDIATE_MAX) {
+                j += 1;
+            }
+            // Truncated mid-sequence: the rest of the stream is escape, not text.
+            if (j >= src.length)
+                break;
+            if (src[j] === "m")
+                applySgr(params, state);
+            i = j + 1;
+            continue;
+        }
+        if (next === "]") {
+            // OSC: a string terminated by BEL or ST, or by the end of the stream.
+            let j = i + 2;
+            while (j < src.length) {
+                if (src[j] === BEL) {
+                    j += 1;
+                    break;
+                }
+                if (src[j] === ESC && src[j + 1] === "\\") {
+                    j += 2;
+                    break;
+                }
+                j += 1;
+            }
+            i = j;
+            continue;
+        }
+        // A lone ESC at the very end has nothing left to introduce.
+        if (next === undefined)
+            break;
+        // Two- and three-byte escapes: optional intermediates, then one final byte.
+        let j = i + 1;
+        while (j < src.length &&
+            src.charCodeAt(j) >= INTERMEDIATE_MIN &&
+            src.charCodeAt(j) <= INTERMEDIATE_MAX) {
+            j += 1;
+        }
+        i = j < src.length ? j + 1 : src.length;
+    }
+    flush();
+    return out;
+}