@cueplusplus/ui 0.13.0

package/dist/instruments/table.js

@@ -0,0 +1,237 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/table.tsx
+/**
+* A named horizontal viewport for a table wider than its container.
+*
+* The region is independently keyboard-focusable so keyboard users can reach
+* native horizontal scrolling. It adds no table semantics of its own; place a
+* compound {@link Table} inside it and keep the table's caption.
+*/
+const TableScrollRegion = React.forwardRef(function TableScrollRegion({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...elementProps,
+		role: "region",
+		tabIndex: 0,
+		"data-slot": "table-scroll-region",
+		className: cn("overflow-x-auto outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", className)
+	});
+});
+/**
+* The table frame. Owns the type, the collapse and the numeric alignment rule.
+*
+* `data-numeric` is the contract, not a prop: the alignment and
+* `tabular-nums` live in one descendant selector here, so a hand-written
+* `<td data-numeric>` inside a data-driven body lines up exactly like a
+* `<Table.Cell numeric>`. Figures that do not share a column width are
+* unreadable as a column, which is the whole point of a table.
+*/
+const TableRoot = React.forwardRef(function TableRoot({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("table", {
+		ref,
+		"data-slot": "table",
+		className: cn("w-full border-collapse font-mono text-(length:--cue-text-ui) text-fg", "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
+		...elementProps
+	});
+});
+/** The header band. Sticky-able by the caller; sized by the row padding tokens. */
+const TableHeader = React.forwardRef(function TableHeader({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		"data-slot": "table-header",
+		className,
+		...elementProps
+	});
+});
+/** The data band. */
+const TableBody = React.forwardRef(function TableBody({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		"data-slot": "table-body",
+		className,
+		...elementProps
+	});
+});
+/**
+* One row, separated by a hairline underneath — dropped on the last row so the
+* table never draws a rule against the panel rim it sits in. In a `<thead>` the
+* "last row" is the header row itself, so the header's own bottom border (on
+* the cells) is the only rule there and the two can never stack into 2px.
+*
+* Every row carries the `group/data-row` name unconditionally. It paints
+* nothing by itself, and it is what lets a `DataRow.Actions` cluster inside a
+* `Table.Cell` reveal on hover, on focus and on selection with no second
+* implementation of that idiom for the table — the whole point of the three
+* idioms sharing one row anatomy.
+*
+* **The focus half of that reveal is the caller's to supply here.** A `<tr>` is
+* not focusable and this component does not make it one — a tab stop on every
+* row of a long table is a tab stop a keyboard user has to walk past hundreds
+* of times, which is the reason `Ledger` rows opt in individually. So the
+* reveal-on-focus only happens if the row *contains* something focusable
+* outside the hidden track: a link on the row's name, a checkbox in the leading
+* cell, any real control. Without one, `:focus-within` can never fire — content
+* inside a `visibility: hidden` subtree cannot be focused, so the track cannot
+* bootstrap its own reveal — and a hidden action cluster is then reachable by
+* pointer only, which is a WCAG 2.1.1 failure the screen gives no sign of. A
+* table whose only per-row controls live in a hidden track wants either a
+* focusable cell beside it or an always-visible cluster.
+*
+* A caller who instead makes the *row* focusable — a `tabIndex` plus
+* {@link activateRowFromClick} and {@link activateRowFromKeyDown}, which is the
+* shape a row that opens a drawer takes — gets the focus ring from
+* {@link TableRowProps.interactive} and needs to draw nothing of its own.
+*
+* The selected tint is the row's, not the cell's: a `background` on the `<tr>`
+* shows through every cell in it, so the fill cannot end up ragged where one
+* cell sets a ground of its own.
+*/
+const TableRow = React.forwardRef(function TableRow({ className, interactive = false, selected = false, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"data-slot": "table-row",
+		"data-selected": selected ? "" : void 0,
+		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent" : null, className),
+		...elementProps
+	});
+});
+/**
+* A column heading: the same mono uppercase label as `SectionHeader` and
+* `Eyebrow`, on the raised surface so the band reads as chrome rather than as
+* the first row of data.
+*
+* **Sticky swaps the bottom border for an inset shadow.** `Table.Root` collapses
+* its borders, and a collapsed border belongs to the table's shared grid rather
+* than to the cell — so when a cell detaches to stay at the top of the scroll
+* container, its rule stays behind with the rows and the stuck band appears to
+* lose its edge. An inset `box-shadow` is a paint effect on the cell itself, so
+* it travels with it. The alternative — putting the whole table on
+* `border-separate` — would change the geometry of every table in the library
+* to fix one that scrolls.
+*
+* The opaque `bg-surface-1` is not decoration either: a transparent sticky cell
+* is a sticky cell you read the rows through. A caller who wants the header on
+* the page's own ground can pass `className="bg-bg"` — what it must not pass is
+* nothing.
+*/
+const TableHead = React.forwardRef(function TableHead({ className, numeric = false, sticky = false, scope = "col", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		scope,
+		"data-slot": "table-head",
+		"data-numeric": numeric ? "" : void 0,
+		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		...elementProps
+	});
+});
+/** `headingLevel` as a tag name, so the outline is real elements, not roles. */
+const headingTag = (level) => `h${level}`;
+/**
+* The label slot's own treatment, worn by the `<span>` and by every heading
+* level alike — which is the point: the two forms have to be indistinguishable.
+*
+* Everything here is a no-op on a `<span>` and a correction on a heading, and
+* each of the four exists because a UA stylesheet sets it on `<h2>`–`<h6>`:
+*
+* - `inline` — headings are `display: block`, and a block label would push the
+*   count onto a second line. This is the one that breaks the layout outright.
+* - `text-[length:inherit]` — `<h2>` is `1.5em` and `<h6>` is `0.67em`, so
+*   without this the divider's type would change with the level it was given,
+*   which is a heading level leaking into the visual design.
+* - `font-normal` — headings come bold, and a bold micro-label in a dense list
+*   reads as a second kind of emphasis (the same ruling as `Ledger`'s heading).
+* - `m-0` — headings carry a block margin that would thicken the divider row.
+*
+* Preflight already does the middle two for consumers who import it, but the
+* library does not assume the consumer's reset: the divider has to look the
+* same either way. Tracking, case and colour are *not* restated — no UA rule
+* touches them, so they inherit from the `<th>` that owns the recipe, and a
+* second copy of a treatment is exactly how two surfaces drift apart.
+*/
+const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-normal";
+/**
+* The canonical console table: hairlines, mono figures, no zebra striping.
+*
+* Semantic `<table>` markup throughout — a grid of divs loses row/column
+* announcement, and a console table is exactly the place a screen reader user
+* needs it. Zebra rows are deliberately absent: at console density the stripes
+* are thicker than the data.
+*
+* Static markup — no `"use client"`. Compose it with `Panel` for the rim.
+* Use {@link TableScrollRegion} only when the table can exceed its container.
+*
+* For a grouped list, the table stays *one* table: `Table.Head sticky` docks the
+* column names, and one `Table.Body` per group opens with a `Table.GroupRow`
+* divider — so the columns are named once and scan straight through every group
+* boundary. Rows may hold `DataRow` slots, and `DataRow.Actions` reveals inside
+* a cell on hover and on selection exactly as it does in a `Ledger` row — on
+* focus too, once the row holds something focusable outside the track, which a
+* `<tr>` never is by itself. See {@link TableRowProps.interactive}.
+*
+* @example
+* <Table.Root>
+*   <Table.Header>
+*     <Table.Row>
+*       <Table.Head>Fixture</Table.Head>
+*       <Table.Head numeric>Address</Table.Head>
+*     </Table.Row>
+*   </Table.Header>
+*   <Table.Body>
+*     <Table.Row>
+*       <Table.Cell>Par 64</Table.Cell>
+*       <Table.Cell numeric>001</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+* </Table.Root>
+*/
+const Table = {
+	Root: TableRoot,
+	Header: TableHeader,
+	Body: TableBody,
+	Row: TableRow,
+	GroupRow: React.forwardRef(function TableGroupRow({ className, span, label, count, headingLevel, sticky = false, ...elementProps }, ref) {
+		const Label = headingLevel === void 0 ? "span" : headingTag(headingLevel);
+		return /* @__PURE__ */ jsx("tr", {
+			ref,
+			"data-slot": "table-group-row",
+			...elementProps,
+			children: /* @__PURE__ */ jsxs("th", {
+				colSpan: span,
+				scope: "rowgroup",
+				"data-slot": "table-group-cell",
+				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				children: [/* @__PURE__ */ jsx(Label, {
+					"data-slot": "table-group-label",
+					className: TABLE_GROUP_LABEL,
+					children: label
+				}), count === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "table-group-count",
+					className: "ml-(--cue-space-2) tabular-nums",
+					children: count
+				})]
+			})
+		});
+	}),
+	Head: TableHead,
+	Cell: React.forwardRef(function TableCell({ className, numeric = false, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("td", {
+			ref,
+			"data-slot": "table-cell",
+			"data-numeric": numeric ? "" : void 0,
+			className: cn("px-(--cue-pad-row-x) py-(--cue-pad-row-y) align-middle", className),
+			...elementProps
+		});
+	}),
+	Caption: React.forwardRef(function TableCaption({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("caption", {
+			ref,
+			"data-slot": "table-caption",
+			className: cn("caption-bottom pt-(--cue-space-3) text-left font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Table, TableScrollRegion };

package/dist/instruments/terminal-frame.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+//#region src/instruments/terminal-frame.d.ts
+/** Ink for one transcript line, in the shared status vocabulary. */
+type TerminalLineTone = "neutral" | "accent" | "ok" | "warn" | "danger" | "info";
+/** One line of a transcript. A bare string is output; `command` makes it a prompt line. */
+interface TerminalLine {
+  /** The text of the line, verbatim. */
+  text: string;
+  /** Prefix it with the prompt glyph — this line is something the user typed. */
+  command?: boolean;
+  /** Ink for the line. Defaults to `"neutral"`. */
+  tone?: TerminalLineTone;
+}
+/** Shorthand: a bare string is an output line with no tone. */
+type TerminalFrameLine = string | TerminalLine;
+/** One beat of a simulated session: type a command, spin, print the result. */
+interface TerminalStep {
+  /** Typed one character at a time at the prompt. */
+  command?: string;
+  /** Label shown next to a spinner once the command "runs". */
+  pending?: string;
+  /** How long the spinner runs, in ms. Defaults to `900`. */
+  pendingMs?: number;
+  /** Printed all at once when the step finishes. */
+  output?: readonly TerminalFrameLine[];
+}
+/** A scripted session for {@link TerminalFrameProps.simulate}. */
+interface TerminalScript {
+  /** The beats, in order. */
+  steps: readonly TerminalStep[];
+  /** Nominal ms per keystroke, jittered 0.6×–1.6×. Defaults to `55`. */
+  keystrokeMs?: number;
+  /** Seed for the keystroke jitter. The same seed always plays the same way. Defaults to `1`. */
+  seed?: number;
+  /** Pause after a command lands and after its output prints, in ms. Defaults to `600`. */
+  holdMs?: number;
+}
+interface TerminalFrameProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> {
+  /** Name above the transcript — a log file, a host, a task. */
+  title?: React.ReactNode;
+  /** Static transcript. Rendered as a preamble when `simulate` is also set. */
+  lines?: readonly TerminalFrameLine[];
+  /** The prompt glyph in front of a command line. Defaults to `"$"`. */
+  prompt?: string;
+  /** Show a `CopyButton` in the title bar for the commands in the transcript. */
+  copy?: boolean;
+  /** What the copy button puts on the clipboard. Defaults to the command lines, one per line. */
+  copyValue?: string;
+  /**
+   * Play the transcript out as a typed session.
+   *
+   * Pass a stable reference (a module constant, or memoised) — the player
+   * restarts whenever this prop changes identity. Under
+   * `prefers-reduced-motion` the finished transcript renders instantly and no
+   * timer is ever scheduled.
+   */
+  simulate?: TerminalScript;
+  /** Fixed body height in px at the 16px root. Leave unset to grow with the content. */
+  height?: number;
+  /** Extra content under the transcript — an input row, a hint strip. */
+  children?: React.ReactNode;
+}
+/**
+ * A recessed terminal: mono, `$`-prefixed commands, optional typed playback.
+ *
+ * Recessed rather than raised — `bg-sunken` sits the transcript *into* the page
+ * the way a real console does (the snuffle convention, where the terminal
+ * surface is the only thing darker than the background).
+ *
+ * The `simulate` player is deliberately not a GIF or a video: it is text, so it
+ * copies, it scales with the type ramp, it re-themes, and it costs nothing to
+ * load. Keystrokes are jittered from a seed so a marketing screenshot is
+ * reproducible, and the whole animation is replaced by its final frame under
+ * `prefers-reduced-motion` — with no timers scheduled at all, rather than an
+ * animation that runs invisibly.
+ *
+ * @example
+ * <TerminalFrame
+ *   title="install"
+ *   copy
+ *   lines={[{ text: "pnpm add @cueplusplus/ui", command: true }, "+ 1 package"]}
+ * />
+ * @example
+ * const SCRIPT = { steps: [{ command: "cue build", pending: "compiling", output: ["12 cues"] }] };
+ * <TerminalFrame simulate={SCRIPT} />
+ */
+declare const TerminalFrame: React.ForwardRefExoticComponent<TerminalFrameProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep };

package/dist/instruments/terminal-frame.js

@@ -0,0 +1,256 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { CopyButton } from "./copy-button.js";
+import { toRem } from "./_rem.js";
+import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/terminal-frame.tsx
+const LINE_TONES = {
+	neutral: "text-fg-muted",
+	accent: "text-accent",
+	ok: "text-ok",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+/** The braille spinner every CLI in the portfolio uses. */
+const SPINNER_GLYPHS = [
+	"⠋",
+	"⠙",
+	"⠹",
+	"⠸",
+	"⠼",
+	"⠴",
+	"⠦",
+	"⠧",
+	"⠇",
+	"⠏"
+];
+const SPINNER_MS = 80;
+const DEFAULT_KEYSTROKE_MS = 55;
+const DEFAULT_HOLD_MS = 600;
+const DEFAULT_PENDING_MS = 900;
+const DEFAULT_SEED = 1;
+const IDLE = {
+	lines: [],
+	typing: null,
+	spinner: null,
+	done: true
+};
+/** Normalise the shorthand so the renderer only ever sees one shape. */
+function toLine(line) {
+	return typeof line === "string" ? { text: line } : line;
+}
+/** Every line a script ends on — what reduced motion renders straight away. */
+function finalLines(script) {
+	return script.steps.flatMap((step) => [...step.command === void 0 ? [] : [{
+		text: step.command,
+		command: true
+	}], ...(step.output ?? []).map(toLine)]);
+}
+/**
+* A recessed terminal: mono, `$`-prefixed commands, optional typed playback.
+*
+* Recessed rather than raised — `bg-sunken` sits the transcript *into* the page
+* the way a real console does (the snuffle convention, where the terminal
+* surface is the only thing darker than the background).
+*
+* The `simulate` player is deliberately not a GIF or a video: it is text, so it
+* copies, it scales with the type ramp, it re-themes, and it costs nothing to
+* load. Keystrokes are jittered from a seed so a marketing screenshot is
+* reproducible, and the whole animation is replaced by its final frame under
+* `prefers-reduced-motion` — with no timers scheduled at all, rather than an
+* animation that runs invisibly.
+*
+* @example
+* <TerminalFrame
+*   title="install"
+*   copy
+*   lines={[{ text: "pnpm add @cueplusplus/ui", command: true }, "+ 1 package"]}
+* />
+* @example
+* const SCRIPT = { steps: [{ command: "cue build", pending: "compiling", output: ["12 cues"] }] };
+* <TerminalFrame simulate={SCRIPT} />
+*/
+const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title, lines, prompt = "$", copy = false, copyValue, simulate, height, children, ...elementProps }, ref) {
+	const reduced = usePrefersReducedMotion();
+	const [transcript, setTranscript] = React.useState(IDLE);
+	React.useEffect(() => {
+		if (simulate === void 0) {
+			setTranscript(IDLE);
+			return;
+		}
+		if (reduced) {
+			setTranscript({
+				lines: finalLines(simulate),
+				typing: null,
+				spinner: null,
+				done: true
+			});
+			return;
+		}
+		let cancelled = false;
+		let timer;
+		const sleep = (ms) => new Promise((resolve) => {
+			timer = setTimeout(resolve, ms);
+		});
+		const random = mulberry32(simulate.seed ?? DEFAULT_SEED);
+		const keystrokeMs = simulate.keystrokeMs ?? DEFAULT_KEYSTROKE_MS;
+		const holdMs = simulate.holdMs ?? DEFAULT_HOLD_MS;
+		const printed = [];
+		setTranscript({
+			lines: [],
+			typing: null,
+			spinner: null,
+			done: false
+		});
+		(async () => {
+			for (const step of simulate.steps) {
+				if (step.command !== void 0) {
+					for (let index = 1; index <= step.command.length; index += 1) {
+						await sleep(keystrokeMs * (.6 + random()));
+						if (cancelled) return;
+						setTranscript({
+							lines: [...printed],
+							typing: step.command.slice(0, index),
+							spinner: null,
+							done: false
+						});
+					}
+					await sleep(holdMs);
+					if (cancelled) return;
+					printed.push({
+						text: step.command,
+						command: true
+					});
+					setTranscript({
+						lines: [...printed],
+						typing: null,
+						spinner: null,
+						done: false
+					});
+				}
+				if (step.pending !== void 0) {
+					const frames = Math.max(1, Math.round((step.pendingMs ?? DEFAULT_PENDING_MS) / SPINNER_MS));
+					for (let index = 0; index < frames; index += 1) {
+						setTranscript({
+							lines: [...printed],
+							typing: null,
+							spinner: {
+								label: step.pending,
+								index
+							},
+							done: false
+						});
+						await sleep(SPINNER_MS);
+						if (cancelled) return;
+					}
+				}
+				for (const line of step.output ?? []) printed.push(toLine(line));
+				setTranscript({
+					lines: [...printed],
+					typing: null,
+					spinner: null,
+					done: false
+				});
+				await sleep(holdMs);
+				if (cancelled) return;
+			}
+			setTranscript({
+				lines: [...printed],
+				typing: null,
+				spinner: null,
+				done: true
+			});
+		})();
+		return () => {
+			cancelled = true;
+			if (timer !== void 0) clearTimeout(timer);
+		};
+	}, [reduced, simulate]);
+	const preamble = (lines ?? []).map(toLine);
+	const rendered = [...preamble, ...transcript.lines];
+	const commands = [...preamble, ...simulate === void 0 ? [] : finalLines(simulate)].filter((line) => line.command === true);
+	const clipboard = copyValue ?? commands.map((line) => line.text).join("\n");
+	const simulating = simulate !== void 0 && !transcript.done;
+	const promptGlyph = /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "terminal-frame-prompt",
+		className: "mr-(--cue-space-3) shrink-0 text-accent select-none",
+		children: prompt
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "terminal-frame",
+		"data-simulating": simulate === void 0 ? void 0 : String(simulating),
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-sunken font-mono text-(length:--cue-text-ui) text-fg-muted", className),
+		...elementProps,
+		children: [title === void 0 && !copy ? null : /* @__PURE__ */ jsxs("div", {
+			"data-slot": "terminal-frame-bar",
+			className: "flex h-control-md shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x)",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "terminal-frame-title",
+				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+				children: title
+			}), copy ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "terminal-frame-copy",
+				"data-value": clipboard,
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx(CopyButton, {
+					value: clipboard,
+					variant: "ghost",
+					size: "sm"
+				})
+			}) : null]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "terminal-frame-body",
+			className: "min-w-0 flex-1 overflow-auto p-(--cue-space-5) leading-(--cue-leading-ui) whitespace-pre-wrap",
+			style: height === void 0 ? void 0 : { height: toRem(height) },
+			children: [
+				rendered.map((line, index) => /* @__PURE__ */ jsxs("div", {
+					"data-slot": "terminal-frame-line",
+					"data-command": line.command === true ? "" : void 0,
+					className: cn("flex min-w-0", LINE_TONES[line.tone ?? "neutral"]),
+					children: [line.command === true ? promptGlyph : null, /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 break-all",
+						children: line.text
+					})]
+				}, index)),
+				transcript.typing === null ? null : /* @__PURE__ */ jsxs("div", {
+					"data-slot": "terminal-frame-line",
+					"data-typing": "",
+					className: "flex min-w-0 text-fg",
+					children: [
+						promptGlyph,
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 break-all",
+							children: transcript.typing
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "animate-pulse motion-reduce:animate-none",
+							children: "▍"
+						})
+					]
+				}),
+				transcript.spinner === null ? null : /* @__PURE__ */ jsxs("div", {
+					"data-slot": "terminal-frame-line",
+					"data-pending": "",
+					className: "flex min-w-0 text-fg-subtle",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "mr-(--cue-space-3) shrink-0 text-accent",
+						children: SPINNER_GLYPHS[transcript.spinner.index % SPINNER_GLYPHS.length]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 break-all",
+						children: transcript.spinner.label
+					})]
+				}),
+				children
+			]
+		})]
+	});
+});
+//#endregion
+export { TerminalFrame };

package/dist/instruments/two-step-button.d.ts

@@ -0,0 +1,47 @@
+import { ButtonProps } from "../primitives/button.js";
+import * as React from "react";
+//#region src/instruments/two-step-button.d.ts
+/** Which end of the warning scale this action sits at. */
+type TwoStepTone = "danger" | "warn";
+interface TwoStepButtonProps extends Omit<ButtonProps, "onClick" | "variant" | "onConfirm" | "children"> {
+  /** Fired once, when the *second* press lands. */
+  onConfirm: () => void;
+  /** The idle label — name the action, not the button ("Delete rig", not "Delete"). */
+  children: React.ReactNode;
+  /** Label on the armed half. Defaults to `"Confirm"`. */
+  confirmLabel?: React.ReactNode;
+  /** Label on the escape hatch. Defaults to `"Cancel"`. */
+  cancelLabel?: React.ReactNode;
+  /** How severe this is. Defaults to `"danger"`. */
+  tone?: TwoStepTone;
+  /** ms before an untouched armed state disarms itself. `0` disables. Defaults to `4000`. */
+  timeout?: number;
+  /** Called with the new armed state on every arm and disarm. */
+  onArmedChange?: (armed: boolean) => void;
+}
+/**
+ * Arm, then confirm: a destructive action that takes two deliberate presses.
+ *
+ * The most-reused interaction in the portfolio (fifteen call sites, three
+ * hand-rolled implementations) and the right shape for a destructive action
+ * that is *routine* — deleting a cue, clearing a patch. A modal
+ * `AlertDialog` is the right shape for a rare and expensive one; putting a
+ * dialog in front of an action people take twenty times an hour just teaches
+ * them to dismiss dialogs.
+ *
+ * Four ways out, because an armed button left lying around is a trap: Cancel,
+ * Escape, moving focus away, and a timeout. Focus lands on **Cancel** when the
+ * pair arms, never on the destructive half — the same ruling as a destructive
+ * dialog's default button, and it means a stuck Enter key cannot walk through
+ * both steps.
+ *
+ * @example
+ * <TwoStepButton onConfirm={() => deleteRig(id)}>Delete rig</TwoStepButton>
+ * @example
+ * <TwoStepButton tone="warn" timeout={0} confirmLabel="Reset it" onConfirm={reset}>
+ *   Reset patch
+ * </TwoStepButton>
+ */
+declare const TwoStepButton: React.ForwardRefExoticComponent<TwoStepButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { TwoStepButton, TwoStepButtonProps, TwoStepTone };