@cueplusplus/ui 0.1.0

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-relaxed 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/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 };

package/dist/layout/accordion.js

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { accordionPanelClasses, collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses } from "./_collapse.js";
+import { ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+/**
+* 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>
+*/
+const Accordion$1 = {
+	Root: React.forwardRef(function AccordionRoot({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Accordion.Root, {
+			ref,
+			"data-slot": "accordion",
+			className: cn("flex min-w-0 flex-col", className),
+			...elementProps
+		});
+	}),
+	Item: React.forwardRef(function AccordionItem({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Accordion.Item, {
+			ref,
+			"data-slot": "accordion-item",
+			className: cn("border-t border-border first:border-t-0", className),
+			...elementProps
+		});
+	}),
+	Header: React.forwardRef(function AccordionHeader({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Accordion.Header, {
+			ref,
+			"data-slot": "accordion-header",
+			className: cn("m-0 flex", className),
+			...elementProps
+		});
+	}),
+	Trigger: React.forwardRef(function AccordionTrigger({ className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			ref,
+			"data-slot": "accordion-trigger",
+			className: cn(collapseTriggerClasses, className),
+			...elementProps,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: collapseLabelClasses,
+				children
+			}), /* @__PURE__ */ jsx(ChevronRightGlyph, {
+				"data-slot": "accordion-caret",
+				className: collapseCaretClasses
+			})]
+		});
+	}),
+	Panel: React.forwardRef(function AccordionPanel({ className, bodyClassName, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Accordion.Panel, {
+			ref,
+			"data-slot": "accordion-panel",
+			className: cn(accordionPanelClasses, className),
+			...elementProps,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "accordion-panel-body",
+				className: cn(collapsePanelBodyClasses, bodyClassName),
+				children
+			})
+		});
+	})
+};
+//#endregion
+export { Accordion$1 as Accordion };

package/dist/layout/breadcrumb.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+//#region src/layout/breadcrumb.d.ts
+/** One crumb in the trail. */
+interface BreadcrumbItem {
+  /** What the crumb says. */
+  label: React.ReactNode;
+  /** Where it goes. Renders an `<a>`. */
+  href?: string;
+  /** What it does. Renders a `<button>` when there is no `href`. */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "children"> {
+  /** The trail, root first. The last entry is the current page. */
+  items: readonly BreadcrumbItem[];
+  /** What sits between crumbs. Defaults to `"/"`. */
+  separator?: React.ReactNode;
+  /** The nav's accessible name. Defaults to `"Breadcrumb"`. */
+  label?: string;
+}
+/**
+ * Where you are, and how to get back.
+ *
+ * The last crumb is never a link: it is the page you are on, marked
+ * `aria-current="page"` and set in full-strength ink so the trail has one
+ * visible end. Separators are `aria-hidden` — a screen reader announcing
+ * "console slash patch slash universe 1" is reading punctuation, not structure.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Breadcrumb items={[{ label: "Console", href: "/" }, { label: "Patch" }]} />
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Breadcrumb, BreadcrumbItem, BreadcrumbProps };

package/dist/layout/breadcrumb.js

@@ -0,0 +1,67 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/breadcrumb.tsx
+/**
+* A crumb that goes somewhere. Muted until hovered, never underlined — the
+* trail is navigation furniture and should not read as body-copy links.
+*/
+const CRUMB_LINK_CLASSES = "cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-label) text-fg-muted no-underline transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
+/**
+* Where you are, and how to get back.
+*
+* The last crumb is never a link: it is the page you are on, marked
+* `aria-current="page"` and set in full-strength ink so the trail has one
+* visible end. Separators are `aria-hidden` — a screen reader announcing
+* "console slash patch slash universe 1" is reading punctuation, not structure.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Breadcrumb items={[{ label: "Console", href: "/" }, { label: "Patch" }]} />
+*/
+const Breadcrumb = React.forwardRef(function Breadcrumb({ className, items, separator = "/", label = "Breadcrumb", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"data-slot": "breadcrumb",
+		"aria-label": label,
+		className: cn("min-w-0", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-2) p-0 font-mono text-(length:--cue-text-label) text-fg-muted",
+			children: items.map((item, index) => {
+				const last = index === items.length - 1;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-separator",
+					"aria-hidden": "true",
+					className: "text-fg-subtle select-none",
+					children: separator
+				}), /* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-item",
+					className: "min-w-0",
+					children: last ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "breadcrumb-current",
+						"aria-current": "page",
+						className: "truncate text-fg",
+						children: item.label
+					}) : item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
+						href: item.href,
+						onClick: item.onClick,
+						className: CRUMB_LINK_CLASSES,
+						children: item.label
+					}) : item.onClick !== void 0 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: item.onClick,
+						className: CRUMB_LINK_CLASSES,
+						children: item.label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: item.label
+					})
+				})] }, index);
+			})
+		})
+	});
+});
+//#endregion
+export { Breadcrumb };

package/dist/layout/card.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+//#region src/layout/card.d.ts
+interface CardRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Separate the card's sections with hairline seams instead of whitespace.
+   *
+   * The card is then filled with the border colour and its sections sit `1px`
+   * apart, each painting its own opaque ground — the same idiom as `SeamList`,
+   * where the gap *is* the rule and can never double up with a border.
+   */
+  seam?: boolean;
+}
+interface CardHeaderProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Right-hand slot: the controls that act on the whole card (a menu, a status
+   * chip, a count).
+   */
+  actions?: React.ReactNode;
+  /** The leading cluster — normally a {@link CardTitle} and a description. */
+  children?: React.ReactNode;
+}
+/** Props for {@link CardTitle}: the native `<h3>` surface plus `className`. */
+type CardTitleProps = React.ComponentPropsWithoutRef<"h3">;
+/** Props for {@link CardDescription}: the native `<p>` surface plus `className`. */
+type CardDescriptionProps = React.ComponentPropsWithoutRef<"p">;
+/** Props for {@link CardContent}: the native `<div>` surface plus `className`. */
+type CardContentProps = React.ComponentPropsWithoutRef<"div">;
+/** Props for {@link CardFooter}: the native `<div>` surface plus `className`. */
+type CardFooterProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * A padded container for one thing: a summary, a setting group, a preview.
+ *
+ * Every section paints its own `surface-1` ground, which is what lets the root
+ * switch to the seam idiom without any of the parts knowing.
+ *
+ * @example
+ * <Card.Root seam>
+ *   <Card.Header><Card.Title>Failover</Card.Title></Card.Header>
+ *   <Card.Content>…</Card.Content>
+ * </Card.Root>
+ */
+declare const Card: {
+  Root: React.ForwardRefExoticComponent<CardRootProps & React.RefAttributes<HTMLDivElement>>;
+  Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps };