@cueplusplus/ui 0.13.0

package/dist/instruments/two-step-button.js

@@ -0,0 +1,166 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/two-step-button.tsx
+/**
+* The armed confirm button's fill.
+*
+* Both tones now take the ink their own theme authors against them —
+* `danger-fg` on the red, `warn-fg` on the amber — which is the same shape
+* `Button`'s `danger` variant and `RevertDock`'s confirm paint on the red, and
+* the only place in the package the amber's ink is spent.
+*
+* Both replaced literals, and both literals were wrong in the same way. The
+* red's `text-white` measured 2.99:1 on cue's dark block, which is the default
+* theme. The amber's `text-black` was the better guess of the two — an amber is
+* usually light — but "usually" is not a measurement: it fell to 3.58:1 on
+* requestport's light amber, 3.74:1 on dusk's and 4.22:1 on cue's own, because
+* a light theme darkens its amber to clear the paper and a darkened amber wants
+* paper back. Neither pairing could be fixed by choosing a better literal:
+* which ink a tone can carry is a property of that tone, so each theme derives
+* one. Both tokens clear 4.5:1 on all twenty shipped blocks, and
+* `test/destructive-ink.test.ts` measures this string rather than trusting it.
+*
+* Both tokens are spelled without their prefix on purpose. `tokensUsed` in the
+* package manifest is scanned out of the source text, *comments included*, so a
+* `--cue-…` written in prose is published as a token this component resolves
+* whether or not any class string resolves one. Spelling the amber's ink that
+* way while the palette still had none would have published a token that did
+* not exist; spelling it that way now would still put the claim in the wrong
+* place. The class strings below are where this component names its tokens.
+*/
+const CONFIRM_TONES = {
+	danger: "border-transparent bg-danger text-danger-fg hover:opacity-90",
+	warn: "border-transparent bg-warn text-warn-fg hover:opacity-90"
+};
+/** The idle trigger: outline only, so a destructive action is never the loudest thing on screen. */
+const IDLE_TONES = {
+	danger: "border-danger/40 text-danger hover:border-danger hover:bg-danger/10",
+	warn: "border-warn/40 text-warn hover:border-warn hover:bg-warn/10"
+};
+/** ms the armed state survives without input before it gives up. */
+const DEFAULT_TIMEOUT_MS = 4e3;
+/**
+* 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>
+*/
+const TwoStepButton = React.forwardRef(function TwoStepButton({ className, onConfirm, children, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", timeout = DEFAULT_TIMEOUT_MS, onArmedChange, size, disabled, ...buttonProps }, ref) {
+	const [armed, setArmed] = React.useState(false);
+	const triggerRef = React.useRef(null);
+	const cancelRef = React.useRef(null);
+	const groupRef = React.useRef(null);
+	const timerRef = React.useRef(void 0);
+	const restoreFocusRef = React.useRef(false);
+	const setTriggerRef = React.useCallback((element) => {
+		triggerRef.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref !== null) ref.current = element;
+	}, [ref]);
+	const clearTimer = React.useCallback(() => {
+		if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+		timerRef.current = void 0;
+	}, []);
+	React.useEffect(() => clearTimer, [clearTimer]);
+	const disarm = React.useCallback((restoreFocus) => {
+		clearTimer();
+		restoreFocusRef.current = restoreFocus;
+		setArmed(false);
+		onArmedChange?.(false);
+	}, [clearTimer, onArmedChange]);
+	const arm = React.useCallback(() => {
+		setArmed(true);
+		onArmedChange?.(true);
+		if (timeout > 0) {
+			clearTimer();
+			timerRef.current = setTimeout(() => {
+				timerRef.current = void 0;
+				disarm(true);
+			}, timeout);
+		}
+	}, [
+		clearTimer,
+		disarm,
+		onArmedChange,
+		timeout
+	]);
+	React.useEffect(() => {
+		if (armed) {
+			cancelRef.current?.focus();
+			return;
+		}
+		if (!restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		triggerRef.current?.focus();
+	}, [armed]);
+	if (!armed) return /* @__PURE__ */ jsx(Button, {
+		ref: setTriggerRef,
+		variant: "outline",
+		size,
+		disabled,
+		"data-slot": "two-step-button",
+		"data-tone": tone,
+		"data-armed": "false",
+		className: cn(IDLE_TONES[tone], className),
+		onClick: arm,
+		...buttonProps,
+		children
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		ref: groupRef,
+		"data-slot": "two-step-button-armed",
+		"data-tone": tone,
+		className: "inline-flex items-center gap-(--cue-space-2)",
+		onKeyDown: (event) => {
+			if (event.key !== "Escape") return;
+			event.stopPropagation();
+			disarm(true);
+		},
+		onBlur: (event) => {
+			const next = event.relatedTarget;
+			if (next !== null && groupRef.current?.contains(next) === true) return;
+			disarm(false);
+		},
+		children: [/* @__PURE__ */ jsx(Button, {
+			ref: cancelRef,
+			variant: "ghost",
+			size,
+			"data-slot": "two-step-button-cancel",
+			onClick: () => disarm(true),
+			children: cancelLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size,
+			"data-slot": "two-step-button-confirm",
+			className: cn(CONFIRM_TONES[tone], className),
+			onClick: () => {
+				disarm(true);
+				onConfirm();
+			},
+			...buttonProps,
+			children: confirmLabel
+		})]
+	});
+});
+//#endregion
+export { TwoStepButton };

package/dist/instruments/usage-chart.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+//#region src/instruments/usage-chart.d.ts
+/** One sample: a timestamp in ms, and a percentage. */
+interface UsageChartPoint {
+  /** Epoch ms. Non-finite and non-positive timestamps are dropped. */
+  t: number;
+  /** Percentage of the ceiling. Clamped to 0–100 on the way in. */
+  v: number;
+}
+/** Stroke colour, in the shared status vocabulary. */
+type UsageChartTone = "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+interface UsageChartProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The series. Sorted and cleaned internally; order in is not order out. */
+  points: readonly UsageChartPoint[];
+  /** Stroke tone. Defaults to `"accent"`. */
+  tone?: UsageChartTone;
+  /** Plot height in px at the 16px root. Defaults to `120`. */
+  height?: number;
+  /** Break the line when consecutive samples are further apart than this, in ms. */
+  gapMs?: number;
+  /** Draw a dashed rule at this percentage — where throttling starts, say. */
+  threshold?: number;
+  /** The accessible name. Name the series; the shape is not self-describing. */
+  label?: string;
+  /** What to say when there is nothing to plot. Defaults to `"No data yet"`. */
+  emptyLabel?: string;
+  /** Format a sample's timestamp for the tooltip. Defaults to a short local date-time. */
+  formatTimestamp?: (t: number) => string;
+  /** Format a sample's value for the tooltip. Defaults to `"87%"`. */
+  formatValue?: (v: number) => string;
+}
+/**
+ * A quota trace: where you sit against the ceiling, over time.
+ *
+ * Dependency-free inline SVG — a charting library is a large price for one
+ * line and five gridlines, and none of them draws the three things that make
+ * this chart honest:
+ *
+ * 1. **The y axis is always 0–100.** A quota chart auto-scaled to its own range
+ *    makes a flat 3% look identical to a flat 95%. The ceiling is the reading,
+ *    so the ceiling is always drawn.
+ * 2. **Gaps are gaps.** When the sweep does not run, the line breaks. Joining
+ *    across a hole invents data — and worse, invents a *smooth* trend across
+ *    exactly the window nothing is known about. The area fill stops at the
+ *    break for the same reason.
+ * 3. **Out-of-range values are clamped, not plotted.** Upstream numbers are
+ *    reverse-engineered and can be anything; 140% should read as a flat line on
+ *    the ceiling, not as a path drawn over the axis labels.
+ *
+ * @example
+ * <UsageChart label="API requests" points={series} threshold={80} tone="warn" />
+ */
+declare const UsageChart: React.ForwardRefExoticComponent<UsageChartProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone };

package/dist/instruments/usage-chart.js

@@ -0,0 +1,235 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { toRem } from "./_rem.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/usage-chart.tsx
+const TONE_CLASSES = {
+	accent: "text-accent",
+	ok: "text-ok",
+	busy: "text-busy",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+/**
+* Fixed viewBox width. The SVG stretches to its container, so the internal
+* width can be a constant and the path maths stays integer-friendly.
+*/
+const VIEW_WIDTH = 600;
+/** Room for the axis labels, in viewBox units, without a layout pass. */
+const PAD = {
+	top: 6,
+	right: 4,
+	bottom: 14,
+	left: 22
+};
+/** The horizontal rules. 0 and 100 are the ceiling and the floor; the rest are guides. */
+const GRID_LINES = [
+	0,
+	25,
+	50,
+	75,
+	100
+];
+/** Default plot height in px at the 16px root. */
+const DEFAULT_HEIGHT_PX = 120;
+/** Default hole width before the line breaks: one missed quarter-hourly sweep. */
+const DEFAULT_GAP_MS = 9e5;
+/** Axis label size, in viewBox units — not a token, because the viewBox is not in rem. */
+const AXIS_FONT_SIZE = 8;
+/** Sorted, finite samples split into runs no wider than `gapMs`. */
+function segment(points, gapMs) {
+	const clean = points.filter((point) => Number.isFinite(point.t) && Number.isFinite(point.v) && point.t >= 0).sort((a, b) => a.t - b.t);
+	if (clean.length === 0) return [];
+	const runs = [];
+	let run = [clean[0]];
+	for (let index = 1; index < clean.length; index += 1) {
+		const point = clean[index];
+		const previous = clean[index - 1];
+		if (point.t - previous.t > gapMs) {
+			runs.push(run);
+			run = [];
+		}
+		run.push(point);
+	}
+	runs.push(run);
+	return runs;
+}
+/**
+* A quota trace: where you sit against the ceiling, over time.
+*
+* Dependency-free inline SVG — a charting library is a large price for one
+* line and five gridlines, and none of them draws the three things that make
+* this chart honest:
+*
+* 1. **The y axis is always 0–100.** A quota chart auto-scaled to its own range
+*    makes a flat 3% look identical to a flat 95%. The ceiling is the reading,
+*    so the ceiling is always drawn.
+* 2. **Gaps are gaps.** When the sweep does not run, the line breaks. Joining
+*    across a hole invents data — and worse, invents a *smooth* trend across
+*    exactly the window nothing is known about. The area fill stops at the
+*    break for the same reason.
+* 3. **Out-of-range values are clamped, not plotted.** Upstream numbers are
+*    reverse-engineered and can be anything; 140% should read as a flat line on
+*    the ceiling, not as a path drawn over the axis labels.
+*
+* @example
+* <UsageChart label="API requests" points={series} threshold={80} tone="warn" />
+*/
+const UsageChart = React.forwardRef(function UsageChart({ className, points, tone = "accent", height = DEFAULT_HEIGHT_PX, gapMs = DEFAULT_GAP_MS, threshold, label, emptyLabel = "No data yet", formatTimestamp, formatValue = (value) => `${Math.round(value)}%`, ...elementProps }, ref) {
+	const gradientId = React.useId();
+	const [hover, setHover] = React.useState(null);
+	const segments = React.useMemo(() => segment(points, gapMs), [points, gapMs]);
+	const plotWidth = VIEW_WIDTH - PAD.left - PAD.right;
+	const plotHeight = height - PAD.top - PAD.bottom;
+	const floor = PAD.top + plotHeight;
+	const all = React.useMemo(() => segments.flat(), [segments]);
+	const first = all[0];
+	const last = all[all.length - 1];
+	const start = first?.t ?? 0;
+	const span = Math.max(1, (last?.t ?? start + 1) - start);
+	const round = (value) => Math.round(value * 100) / 100;
+	const x = (t) => round(PAD.left + (t - start) / span * plotWidth);
+	const y = (value) => round(PAD.top + (1 - Math.min(100, Math.max(0, value)) / 100) * plotHeight);
+	if (segments.length === 0) return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "usage-chart",
+		"data-empty": "true",
+		className: cn("flex items-center justify-center font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+		style: { height: toRem(height) },
+		...elementProps,
+		children: emptyLabel
+	});
+	const linePath = (run) => run.map((point, index) => `${index === 0 ? "M" : "L"}${x(point.t).toFixed(1)},${y(point.v).toFixed(1)}`).join(" ");
+	const areaPath = (run) => `${linePath(run)} L${x(run[run.length - 1].t).toFixed(1)},${floor.toFixed(1)} L${x(run[0].t).toFixed(1)},${floor.toFixed(1)} Z`;
+	const onMove = (event) => {
+		const box = event.currentTarget.getBoundingClientRect();
+		if (box.width === 0) return;
+		const viewX = (event.clientX - box.left) / box.width * VIEW_WIDTH;
+		const t = start + (viewX - PAD.left) / plotWidth * span;
+		let nearest = all[0];
+		for (const point of all) if (Math.abs(point.t - t) < Math.abs(nearest.t - t)) nearest = point;
+		setHover({
+			x: viewX,
+			point: nearest
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "usage-chart",
+		className: cn("relative min-w-0", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			role: "img",
+			"aria-label": label ?? "Usage over time",
+			"data-tone": tone,
+			viewBox: `0 0 ${VIEW_WIDTH} ${height}`,
+			preserveAspectRatio: "none",
+			className: cn("block w-full", TONE_CLASSES[tone]),
+			style: { height: toRem(height) },
+			onMouseMove: onMove,
+			onMouseLeave: () => setHover(null),
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id: gradientId,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "currentColor",
+						stopOpacity: "0.22"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "currentColor",
+						stopOpacity: "0"
+					})]
+				}) }),
+				/* @__PURE__ */ jsx("g", {
+					className: "text-border",
+					children: GRID_LINES.map((value) => /* @__PURE__ */ jsx("line", {
+						"data-slot": "usage-chart-grid",
+						x1: PAD.left,
+						x2: VIEW_WIDTH - PAD.right,
+						y1: y(value),
+						y2: y(value),
+						stroke: "currentColor",
+						strokeWidth: "0.5",
+						opacity: value === 0 || value === 100 ? .9 : .45
+					}, value))
+				}),
+				/* @__PURE__ */ jsx("g", {
+					className: "fill-fg-subtle font-mono",
+					children: GRID_LINES.map((value) => /* @__PURE__ */ jsx("text", {
+						"data-slot": "usage-chart-axis",
+						x: PAD.left - 4,
+						y: y(value) + 3,
+						textAnchor: "end",
+						fontSize: AXIS_FONT_SIZE,
+						children: value
+					}, value))
+				}),
+				threshold === void 0 ? null : /* @__PURE__ */ jsx("line", {
+					"data-slot": "usage-chart-threshold",
+					className: "text-danger",
+					x1: PAD.left,
+					x2: VIEW_WIDTH - PAD.right,
+					y1: y(threshold),
+					y2: y(threshold),
+					stroke: "currentColor",
+					strokeWidth: "0.75",
+					strokeDasharray: "3 3",
+					opacity: "0.7"
+				}),
+				segments.map((run, index) => /* @__PURE__ */ jsxs("g", { children: [run.length > 1 ? /* @__PURE__ */ jsx("path", {
+					"data-slot": "usage-chart-area",
+					d: areaPath(run),
+					fill: `url(#${gradientId})`
+				}) : null, /* @__PURE__ */ jsx("path", {
+					"data-slot": "usage-chart-line",
+					d: linePath(run),
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.25",
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					vectorEffect: "non-scaling-stroke"
+				})] }, index)),
+				hover === null ? null : /* @__PURE__ */ jsxs("g", {
+					pointerEvents: "none",
+					children: [/* @__PURE__ */ jsx("line", {
+						"data-slot": "usage-chart-crosshair",
+						className: "text-fg",
+						x1: x(hover.point.t),
+						x2: x(hover.point.t),
+						y1: PAD.top,
+						y2: floor,
+						stroke: "currentColor",
+						strokeWidth: "0.5",
+						opacity: "0.5"
+					}), /* @__PURE__ */ jsx("circle", {
+						"data-slot": "usage-chart-marker",
+						cx: x(hover.point.t),
+						cy: y(hover.point.v),
+						r: "2.5",
+						fill: "currentColor"
+					})]
+				})
+			]
+		}), hover === null ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "usage-chart-tooltip",
+			className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-3) py-(--cue-space-1) font-mono text-(length:--cue-text-label) tabular-nums text-fg",
+			style: { left: `${Math.min(88, Math.max(2, hover.x / VIEW_WIDTH * 100))}%` },
+			children: `${formatValue(hover.point.v)} · ${formatTimestamp === void 0 ? new Date(hover.point.t).toLocaleString(void 0, {
+				month: "short",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit"
+			}) : formatTimestamp(hover.point.t)}`
+		})]
+	});
+});
+//#endregion
+export { UsageChart };

package/dist/layout/_collapse.js

@@ -0,0 +1,46 @@
+//#region src/layout/_collapse.ts
+/**
+* The one disclosure recipe, shared by `Accordion` and `Collapsible`.
+*
+* Both wrap a Base UI primitive that speaks the same state vocabulary
+* (`data-panel-open` on the trigger, a measured `--*-panel-height` on the
+* panel), so the skin is written once here rather than twice — a change to how
+* a section opens is then a one-line change, and the tests can assert the same
+* recipe on both.
+*
+* @internal Not part of the public API.
+*/
+/**
+* The summary row: one rung of the density control ladder, mono, padded to the
+* same gutters as a `Row` so a stack of sections lines up with a stack of rows.
+*
+* `focus-visible:outline-solid` re-declares the outline style the sibling
+* `outline-none` switched off — see the note on `buttonChassis`. The ring is
+* inset (`-outline-offset-2`) because sections live inside `overflow-hidden`
+* panels, where an outset ring on the first row would be clipped by the rim.
+*/
+const collapseTriggerClasses = "group/collapse flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left font-mono text-(length:--cue-text-ui) text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/** The label between the summary row's gutters — truncates, never wraps. */
+const collapseLabelClasses = "min-w-0 flex-1 truncate";
+/**
+* The caret at the end of a summary row. Rotation is driven off the trigger's
+* own `data-panel-open`, so nothing in React has to know the section is open.
+*/
+const collapseCaretClasses = "size-icon-sm shrink-0 text-fg-subtle transition-transform duration-150 ease-out group-data-[panel-open]/collapse:rotate-90 motion-reduce:transition-none";
+/**
+* Enter/exit for a panel, animated from the height Base UI measures for us.
+*
+* The animating element carries no padding on purpose: padding is part of the
+* box's height, so it would be counted into the `0 → measured` transition and
+* make the panel jump at both ends. The body lives one element in — see
+* {@link collapsePanelBodyClasses}.
+*/
+const PANEL_MOTION = "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
+/** {@link PANEL_MOTION} against the accordion's measured height. */
+const accordionPanelClasses = `${PANEL_MOTION} h-(--accordion-panel-height)`;
+/** {@link PANEL_MOTION} against the collapsible's measured height. */
+const collapsiblePanelClasses = `${PANEL_MOTION} h-(--collapsible-panel-height)`;
+/** The padded body inside a panel: aligned to the summary row's gutters. */
+const collapsePanelBodyClasses = "px-(--cue-pad-row-x) pt-(--cue-space-1) pb-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+//#endregion
+export { accordionPanelClasses, collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses };

package/dist/layout/_glyphs.js

@@ -0,0 +1,45 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/_glyphs.tsx
+/**
+* Shared layout glyphs.
+*
+* Drawn inline rather than pulled from `lucide-react` for the same reason as
+* `chrome/_glyphs.tsx` and `overlays/_glyphs.tsx`: a caret on an accordion row
+* and a chevron on a pager should not put an icon dependency on the render path
+* of every page, and hand-set strokes stay hairline-thin at the 8–12px sizes
+* console density asks for. `currentColor` everywhere — the tone comes from the
+* parent.
+*
+* @internal Not part of the public API.
+*/
+/** A right-pointing chevron. Rotate it 90° to point down. */
+function ChevronRightGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+/** A left-pointing chevron. */
+function ChevronLeftGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m10 3-5 5 5 5" })
+	});
+}
+//#endregion
+export { ChevronLeftGlyph, ChevronRightGlyph };

package/dist/layout/_ground.d.ts

@@ -0,0 +1,22 @@
+//#region src/layout/_ground.d.ts
+/**
+ * The three grounds a stage or a canvas may paint, and the classes for each.
+ *
+ * One table and not two, because `Preview`'s stage and `Frames.Root`'s canvas
+ * take the same three members and a second copy would be the one that drifted.
+ * Static literals, because Tailwind scans source text and never a computed
+ * string.
+ *
+ * `dots` is written as three classes in exactly the order `STAGE_CLASS` carried
+ * them before this table existed — `bg-surface-1`, then the radial gradient,
+ * then its size. `cn` is `twMerge(clsx(...))`, which keeps the order it is
+ * given, so composing head + ground + tail reproduces today's string token for
+ * token. `preview.test.tsx`'s byte gate is what holds that.
+ *
+ * @internal Not part of the public API. The type is re-exported from
+ * `./preview`, which is where §4.1 of the showroom spec declares it.
+ */
+/** The stage's ground, in the settings popover's own words. */
+type PreviewGround = "plain" | "dots" | "none";
+//#endregion
+export { PreviewGround };

package/dist/layout/_ground.js

@@ -0,0 +1,9 @@
+//#region src/layout/_ground.ts
+/** What each ground paints. `"none"` paints nothing, so whatever is behind shows through. */
+const GROUND_CLASSES = {
+	plain: "bg-surface-1",
+	dots: "bg-surface-1 bg-[radial-gradient(circle,var(--cue-hair-strong)_1px,transparent_1.3px)] bg-[length:14px_14px]",
+	none: ""
+};
+//#endregion
+export { GROUND_CLASSES };

package/dist/layout/accordion.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/layout/accordion.d.ts
+interface AccordionRootProps extends Omit<Accordion.Root.Props, "className"> {
+  /** Extra classes for the accordion frame. */
+  className?: string;
+}
+interface AccordionItemProps extends Omit<Accordion.Item.Props, "className"> {
+  /** Extra classes for the section. */
+  className?: string;
+}
+interface AccordionHeaderProps extends Omit<Accordion.Header.Props, "className"> {
+  /** Extra classes for the heading. */
+  className?: string;
+}
+interface AccordionTriggerProps extends Omit<Accordion.Trigger.Props, "className"> {
+  /** Extra classes for the summary row. */
+  className?: string;
+}
+interface AccordionPanelProps extends Omit<Accordion.Panel.Props, "className"> {
+  /** Extra classes for the animating box. Padding belongs on `bodyClassName`. */
+  className?: string;
+  /** Extra classes for the padded body inside it. */
+  bodyClassName?: string;
+}
+/**
+ * A stack of sections, one (or several) open at a time.
+ *
+ * Wraps Base UI's `Accordion`, so the disclosure ARIA, keyboard handling and
+ * open-state bookkeeping are the primitive's. This layer adds the console skin:
+ * hairline separation, mono summary rows on the control ladder, and a height
+ * transition that respects `prefers-reduced-motion`.
+ *
+ * @example
+ * <Accordion.Root>
+ *   <Accordion.Item value="routing">
+ *     <Accordion.Header><Accordion.Trigger>routing</Accordion.Trigger></Accordion.Header>
+ *     <Accordion.Panel>…</Accordion.Panel>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ * @example
+ * <Accordion.Root multiple defaultValue={["routing"]}>…</Accordion.Root>
+ */
+declare const Accordion$1: {
+  Root: React.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Item: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Header: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Trigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Panel: React.ForwardRefExoticComponent<Omit<AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps };