@cueplusplus/ui 0.13.0

package/dist/chrome/app-shell.js

@@ -0,0 +1,266 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { MenuGlyph } from "./_glyphs.js";
+import { Sidebar } from "../layout/sidebar.js";
+import { CrossGlyph } from "../overlays/_glyphs.js";
+import { Drawer } from "../overlays/drawer.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/app-shell.tsx
+const AppShellContext = React.createContext({
+	navOpen: false,
+	setNavOpen: () => {},
+	rail: false,
+	setRail: () => {}
+});
+/**
+* The navigation column's current width, written once on the frame and read by
+* everything that has to line up with it.
+*
+* The prototype this came from put it best: collapsing the rail rewrites one
+* length, and the bar's header cell and the column move together because
+* neither of them holds a length of its own. A custom property rather than two
+* inline widths because the two boxes are on opposite sides of the tree — the
+* cell is a child of the bar, above `AppShell.Body`, and the column is inside
+* it — and because it is then also the handle a consumer's own CSS aligns to.
+*
+* {@link AppShellBar} spells the name a second time, in a Tailwind utility,
+* because the scanner reads class strings and not constants. The two spellings
+* move together, and the shell's own suite fails if they stop matching.
+*/
+const NAV_WIDTH_PROPERTY = "--cue-nav-width";
+/** What a box that spans the navigation column sets its width to. */
+const NAV_WIDTH_VALUE = `var(${NAV_WIDTH_PROPERTY})`;
+/**
+* The console frame: title bar, navigation, work area, status bar — one
+* viewport tall, with exactly one thing scrolling.
+*
+* Every console screen in this system is the same five parts in the same
+* arrangement, and the value here is not the parts (they already exist as
+* `TitleBar`, `Sidebar`, `Toolbar` and `StatusBar`) but the arithmetic between
+* them: `h-dvh` on the frame rather than `min-h-dvh`, an unbroken `min-h-0`
+* chain from the frame down to the scroller, `min-w-0` on the content column,
+* and a scroller that is not the document. Get one of those wrong and the
+* status bar leaves the screen or the navigation column gets shoved off the
+* side; the shell exists so no page has to get them right again.
+*
+* The bars are ordinary children — `TitleBar` and `StatusBar` are already
+* `shrink-0` and need no wrapper — so a shell reads as the page's outline. The
+* one bar the shell does own is {@link AppShellBar}, and it owns it for one
+* reason: it is divided by the navigation column, which means it has to be
+* measured from the same length the column is.
+*
+* That length is `--cue-nav-width`, written on the frame. `rail` rewrites it,
+* `data-rail` announces it, and the column and the header cell over it move
+* together because neither holds a width of its own. Persistence and the
+* toggle are the caller's — see {@link AppShellRootProps.rail}.
+*
+* This is also the only component in the library with a viewport breakpoint:
+* below `md` the navigation column becomes a drawer and a trigger appears in
+* the bar. See {@link AppShellSidebar} for the ruling.
+*
+* @example
+* <AppShell.Root>
+*   <TitleBar center="main-stage.cue" actions={<Chip tone="ok">live</Chip>}>
+*     <AppShell.NavTrigger />
+*     <Eyebrow>CUE++</Eyebrow>
+*   </TitleBar>
+*   <AppShell.Body>
+*     <AppShell.Sidebar aria-label="Console" drawerTitle="Console">
+*       <Sidebar.Section label="Show">
+*         <Sidebar.Item icon={List} active>Cues</Sidebar.Item>
+*       </Sidebar.Section>
+*     </AppShell.Sidebar>
+*     <AppShell.Content>
+*       <Toolbar.Root aria-label="Playback"><Toolbar.Button icon={Play}>Go</Toolbar.Button></Toolbar.Root>
+*       <AppShell.Scroller><Panel>…</Panel></AppShell.Scroller>
+*     </AppShell.Content>
+*     <AppShell.Aside aria-label="Inspector">…</AppShell.Aside>
+*   </AppShell.Body>
+*   <StatusBar><StatusBar.Item tone="ok">Art-Net</StatusBar.Item></StatusBar>
+* </AppShell.Root>
+*/
+const AppShell = {
+	Root: React.forwardRef(function AppShellRoot({ className, navOpen: navOpenProp, defaultNavOpen = false, onNavOpenChange, rail: railProp, defaultRail = false, onRailChange, navWidth = "14rem", railWidth = "3.5rem", style, ...elementProps }, ref) {
+		const [uncontrolled, setUncontrolled] = React.useState(defaultNavOpen);
+		const navOpen = navOpenProp ?? uncontrolled;
+		const setNavOpen = React.useCallback((open) => {
+			if (navOpenProp === void 0) setUncontrolled(open);
+			onNavOpenChange?.(open);
+		}, [navOpenProp, onNavOpenChange]);
+		const [uncontrolledRail, setUncontrolledRail] = React.useState(defaultRail);
+		const rail = railProp ?? uncontrolledRail;
+		const setRail = React.useCallback((next) => {
+			if (railProp === void 0) setUncontrolledRail(next);
+			onRailChange?.(next);
+		}, [railProp, onRailChange]);
+		const context = React.useMemo(() => ({
+			navOpen,
+			setNavOpen,
+			rail,
+			setRail
+		}), [
+			navOpen,
+			setNavOpen,
+			rail,
+			setRail
+		]);
+		return /* @__PURE__ */ jsx(AppShellContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-slot": "app-shell",
+				"data-rail": rail ? "" : void 0,
+				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", className),
+				style: {
+					[NAV_WIDTH_PROPERTY]: rail ? railWidth : navWidth,
+					...style
+				},
+				...elementProps
+			})
+		});
+	}),
+	Bar: React.forwardRef(function AppShellBar({ className, brand, brandClassName, platformDrag = false, center, actions, children, ...elementProps }, ref) {
+		const dragProps = platformDrag ? { "data-tauri-drag-region": "" } : void 0;
+		const dragClasses = platformDrag ? DRAG_CLASSES : void 0;
+		const clusterClasses = cn("flex min-w-0 items-center gap-(--cue-space-3)", platformDrag ? NO_DRAG_CLASSES : "grow");
+		return /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "app-shell-bar",
+			...dragProps,
+			className: cn("relative flex h-(--cue-chrome-titlebar) w-full shrink-0 items-stretch border-b border-border bg-surface-1", dragClasses, platformDrag ? "select-none" : void 0, className),
+			...elementProps,
+			children: [
+				brand === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "app-shell-brand",
+					...dragProps,
+					className: cn("flex w-auto min-w-0 shrink-0 items-center gap-(--cue-space-3) border-r border-border px-(--cue-pad-row-x) transition-[width] duration-150 ease-out md:w-(--cue-nav-width) motion-reduce:transition-none", dragClasses, brandClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-brand-content",
+						className: clusterClasses,
+						children: brand
+					})
+				}),
+				center === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "app-shell-bar-center",
+					className: "pointer-events-none absolute top-1/2 left-1/2 max-w-[50%] -translate-x-1/2 -translate-y-1/2 truncate font-mono text-(length:--cue-text-label) text-fg-muted",
+					children: center
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "app-shell-bar-rest",
+					...dragProps,
+					className: cn("flex min-w-0 flex-1 items-center gap-(--cue-space-3) px-(--cue-pad-row-x)", dragClasses),
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-bar-leading",
+						className: clusterClasses,
+						children
+					}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-bar-actions",
+						className: cn(clusterClasses, "grow-0 shrink-0", platformDrag ? "ms-auto" : void 0),
+						children: actions
+					})]
+				})
+			]
+		});
+	}),
+	Body: React.forwardRef(function AppShellBody({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "app-shell-body",
+			className: cn("flex min-h-0 min-w-0 flex-1", className),
+			...elementProps
+		});
+	}),
+	Sidebar: React.forwardRef(function AppShellSidebar({ className, drawerClassName, drawerTitle = "Navigation", closeLabel = "Close navigation", collapsible = true, landmark = "navigation", "aria-label": ariaLabel = "Navigation", collapsed, defaultCollapsed, onCollapsedChange, width, collapsedWidth, children, ...sidebarProps }, ref) {
+		const { navOpen, setNavOpen, rail, setRail } = React.useContext(AppShellContext);
+		const DrawerLandmark = landmark === "complementary" ? "aside" : "nav";
+		const railed = collapsed === void 0 && defaultCollapsed === void 0;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Sidebar.Root, {
+			ref,
+			"data-slot": "app-shell-sidebar",
+			"aria-label": ariaLabel,
+			landmark,
+			className: cn("hidden md:flex", className),
+			collapsed: railed ? rail : collapsed,
+			defaultCollapsed,
+			onCollapsedChange: railed ? (next) => {
+				onCollapsedChange?.(next);
+				setRail(next);
+			} : onCollapsedChange,
+			width: width ?? (railed ? NAV_WIDTH_VALUE : void 0),
+			collapsedWidth: collapsedWidth ?? (railed ? NAV_WIDTH_VALUE : void 0),
+			...sidebarProps,
+			children: [children, collapsible ? /* @__PURE__ */ jsx(Sidebar.Rail, {}) : null]
+		}), /* @__PURE__ */ jsx(Drawer.Root, {
+			swipeDirection: "left",
+			open: navOpen,
+			onOpenChange: setNavOpen,
+			children: /* @__PURE__ */ jsxs(Drawer.Content, {
+				grabHandle: false,
+				className: cn("w-[min(18rem,calc(100vw-3rem))]", drawerClassName),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center justify-between gap-(--cue-space-3)",
+					children: [/* @__PURE__ */ jsx(Drawer.Title, { children: drawerTitle }), /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": closeLabel,
+						icon: CrossGlyph,
+						size: "sm"
+					}) })]
+				}), /* @__PURE__ */ jsx(DrawerLandmark, {
+					"data-slot": "app-shell-nav-drawer",
+					"aria-label": ariaLabel,
+					className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto",
+					children
+				})]
+			})
+		})] });
+	}),
+	NavTrigger: React.forwardRef(function AppShellNavTrigger({ className, label = "Open navigation", icon = MenuGlyph, size = "md", onClick, ...elementProps }, ref) {
+		const { navOpen, setNavOpen } = React.useContext(AppShellContext);
+		return /* @__PURE__ */ jsx(IconButton, {
+			ref,
+			"data-slot": "app-shell-nav-trigger",
+			"aria-label": label,
+			"aria-expanded": navOpen,
+			icon,
+			size,
+			className: cn("shrink-0 md:hidden", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) setNavOpen(true);
+			},
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function AppShellContent({ className, main = true, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(main ? "main" : "div", {
+			ref,
+			"data-slot": "app-shell-content",
+			className: cn("flex min-h-0 min-w-0 flex-1 flex-col", className),
+			...elementProps
+		});
+	}),
+	Scroller: React.forwardRef(function AppShellScroller({ className, padded = true, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "app-shell-scroller",
+			className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", padded ? "p-(--cue-space-5)" : null, className),
+			...elementProps
+		});
+	}),
+	Aside: React.forwardRef(function AppShellAside({ className, width = "18rem", style, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("aside", {
+			ref,
+			"data-slot": "app-shell-aside",
+			className: cn("flex shrink-0 flex-col gap-(--cue-space-4) overflow-y-auto border-l border-border bg-surface-1 p-(--cue-space-4)", className),
+			style: {
+				width,
+				...style
+			},
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { AppShell };

package/dist/chrome/band.d.ts

@@ -0,0 +1,106 @@
+import { ContainerWidth } from "../layout/container.js";
+import * as React from "react";
+//#region src/chrome/band.d.ts
+/** How a band separates itself from the section above it. */
+type BandSeparation = "rule" | "ground" | "bleed" | "none";
+/**
+ * Which measure a band's column takes: `Container`'s four fixed rungs, plus
+ * `"prose"` — the reading measure a style set owns.
+ *
+ * `"prose"` is the default and is the only one of the five that moves with
+ * `[data-style]`: 68ch with no set and under `console`, 74ch under `editorial`,
+ * 60ch under `marketing`. The four rungs are fixed aliases and a band that
+ * names one has opted out of the axis for its measure — which is the right
+ * answer for a band holding a `Bento` or a device frame, and the wrong one for
+ * a band holding a paragraph.
+ */
+type BandWidth = ContainerWidth | "prose";
+interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
+  /**
+   * How this band separates itself from the one above it. Defaults to `"rule"`.
+   *
+   * - **`"rule"`** — a line at the top edge, `--cue-band-rule` wide, in
+   *   `border-border`. What `Footer` has always drawn.
+   * - **`"ground"`** — a ground, `--cue-band-ground`, edge to edge. The one
+   *   value that touches colour, and it resolves through the single carve-out
+   *   the token layer allows a style set.
+   * - **`"bleed"`** — neither, and **no column**: the children run the band's
+   *   full width with no measure and no gutters. The separation is the change
+   *   of scale, which is what a full-width image or strip does. `width` has
+   *   nothing to apply to and is ignored.
+   * - **`"none"`** — neither, column kept. Sections separate by rhythm alone,
+   *   which is `--cue-band-y` and is what `editorial` leads with.
+   *
+   * **What a style set makes each of these do, because two of them can come out
+   * to nothing and there is no way for this component to warn you.** The values
+   * are the token layer's; `packages/ui/test/chrome/band.test.tsx` holds this
+   * table to `packages/tokens/dist/axes.css`, so it cannot quietly stop being
+   * true.
+   *
+   * | set | `"rule"` draws | `"ground"` paints |
+   * |---|---|---|
+   * | *(no set)* and `console` | 1px | nothing — the ground is `transparent` |
+   * | `editorial` | a 0.5px hairline, **which Chromium paints at 1px at every DPR**; only retina WebKit draws it thinner | nothing — `transparent` |
+   * | `marketing` | **nothing — the rule is `0px`** | `--cue-surface-1` |
+   *
+   * Read the diagonal: `"ground"` is the marketing separation and `"rule"` is
+   * everyone else's. A band that wants to separate under *every* set separates
+   * by rhythm, which every set has.
+   */
+  separation?: BandSeparation;
+  /** Which measure the band's centred column takes. Defaults to `"prose"`. */
+  width?: BandWidth;
+  /** Extra classes for the centred column. Ignored when `separation` is `"bleed"`. */
+  columnClassName?: string;
+  /** The band's contents. */
+  children?: React.ReactNode;
+}
+/**
+ * A full-bleed horizontal section: the page's rhythm, its separation, and a
+ * column at the measure.
+ *
+ * This is `Footer`'s recipe with the footer taken out of it — a `w-full`
+ * element, a rule running edge to edge, and a centred `Container` inside so the
+ * line reaches the window while the words stop at the measure. `Footer` is
+ * built on this rather than beside it; the recipe exists once.
+ *
+ * Every dimension it spends belongs to the style axis, so the same markup
+ * composes differently under `[data-style]` without a prop changing: the
+ * vertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled
+ * under `editorial`, trebled under `marketing`), the column is
+ * `--cue-measure-prose` unless `width` names a fixed rung, and the rule and the
+ * ground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own
+ * documentation before choosing one, because two of the four can come out to
+ * nothing and they do not vanish symmetrically: `--cue-band-ground` is
+ * `transparent` on `:root` and on two of the three sets, so a `"ground"` paints
+ * nothing in three of the four states a page can be in, while `--cue-band-rule`
+ * is `0px` under `marketing` alone. Both are deliberate and nothing warns.
+ *
+ * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
+ * at the element that declares it.** A `<Density>` island nested inside a
+ * styled page moves every `--cue-space-*` and the band rhythm does **not**
+ * follow it — the island inherits the rhythm already resolved above. Restate
+ * the set on the island (`<Density density="compact" styleSet="editorial">`) to
+ * re-resolve it against that island's rung. Likewise a nested `[data-theme]`
+ * under a marketing band paints the **outer** theme's `--cue-surface-1` through
+ * an already-resolved `--cue-band-ground`.
+ *
+ * It renders a `<section>`, which is not a landmark until it has an accessible
+ * name — so a band with a heading should carry `aria-labelledby` pointing at
+ * it, and a band without one costs the document nothing.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Band aria-labelledby="pitch">
+ *   <h2 id="pitch">One import</h2>
+ *   <p>Everything on one token layer.</p>
+ * </Band>
+ * @example
+ * <Band separation="ground" width="broad">
+ *   <Bento.Root cols={3}>{tiles}</Bento.Root>
+ * </Band>
+ */
+declare const Band: React.ForwardRefExoticComponent<BandProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Band, BandProps, BandSeparation, BandWidth };

package/dist/chrome/band.js

@@ -0,0 +1,97 @@
+import { cn } from "../lib/cn.js";
+import { Container } from "../layout/container.js";
+import { bandClasses } from "./_band.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/band.tsx
+/**
+* What each separation adds to the frame `bandClasses` draws, and the two
+* `--cue-*` names that live in this file rather than in the chassis beside it.
+*
+* `_band.ts` holds only what `Footer` can also render — the rhythm and the
+* rule — because docgen's token scanner reads a chassis file whole and cannot
+* see that `Footer` calls `bandClasses` with the literal `"rule"`. The ground
+* is reachable only from `<Band separation="ground">`, so it is written here,
+* next to the prop whose value selects it. `_band.ts`'s own docblock carries
+* the argument.
+*
+* `rule`'s entry is the colour and not the width: the width is
+* `--cue-band-rule` and belongs to the chassis, and both elements name
+* `border-border` in their own class list rather than inheriting it from the
+* other.
+*/
+const SEPARATION_PAINT = {
+	rule: "border-border",
+	ground: "bg-(--cue-band-ground)",
+	bleed: null,
+	none: null
+};
+/**
+* A full-bleed horizontal section: the page's rhythm, its separation, and a
+* column at the measure.
+*
+* This is `Footer`'s recipe with the footer taken out of it — a `w-full`
+* element, a rule running edge to edge, and a centred `Container` inside so the
+* line reaches the window while the words stop at the measure. `Footer` is
+* built on this rather than beside it; the recipe exists once.
+*
+* Every dimension it spends belongs to the style axis, so the same markup
+* composes differently under `[data-style]` without a prop changing: the
+* vertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled
+* under `editorial`, trebled under `marketing`), the column is
+* `--cue-measure-prose` unless `width` names a fixed rung, and the rule and the
+* ground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own
+* documentation before choosing one, because two of the four can come out to
+* nothing and they do not vanish symmetrically: `--cue-band-ground` is
+* `transparent` on `:root` and on two of the three sets, so a `"ground"` paints
+* nothing in three of the four states a page can be in, while `--cue-band-rule`
+* is `0px` under `marketing` alone. Both are deliberate and nothing warns.
+*
+* **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
+* at the element that declares it.** A `<Density>` island nested inside a
+* styled page moves every `--cue-space-*` and the band rhythm does **not**
+* follow it — the island inherits the rhythm already resolved above. Restate
+* the set on the island (`<Density density="compact" styleSet="editorial">`) to
+* re-resolve it against that island's rung. Likewise a nested `[data-theme]`
+* under a marketing band paints the **outer** theme's `--cue-surface-1` through
+* an already-resolved `--cue-band-ground`.
+*
+* It renders a `<section>`, which is not a landmark until it has an accessible
+* name — so a band with a heading should carry `aria-labelledby` pointing at
+* it, and a band without one costs the document nothing.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Band aria-labelledby="pitch">
+*   <h2 id="pitch">One import</h2>
+*   <p>Everything on one token layer.</p>
+* </Band>
+* @example
+* <Band separation="ground" width="broad">
+*   <Bento.Root cols={3}>{tiles}</Bento.Root>
+* </Band>
+*/
+const Band = React.forwardRef(function Band({ className, columnClassName, separation = "rule", width = "prose", children, ...elementProps }, ref) {
+	const column = width === "prose" ? {
+		width: "full",
+		className: "max-w-(--cue-measure-prose)"
+	} : {
+		width,
+		className: null
+	};
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "band",
+		"data-separation": separation,
+		className: cn(bandClasses(separation), SEPARATION_PAINT[separation], className),
+		...elementProps,
+		children: separation === "bleed" ? children : /* @__PURE__ */ jsx(Container, {
+			width: column.width,
+			className: cn(column.className, columnClassName),
+			children
+		})
+	});
+});
+//#endregion
+export { Band };

package/dist/chrome/empty-state.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+//#region src/chrome/empty-state.d.ts
+interface EmptyStateProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** What is missing. One short line: "No cues yet". */
+  title: React.ReactNode;
+  /** How to fix it. One sentence, muted. */
+  hint?: React.ReactNode;
+  /** The way out — normally a single `Button`. */
+  action?: React.ReactNode;
+  /** Optional glyph above the title (e.g. a lucide icon), drawn `aria-hidden`. */
+  icon?: React.ElementType;
+  /** Extra content between the hint and the action — rarely needed. */
+  children?: React.ReactNode;
+}
+/**
+ * The "there is nothing here" panel body.
+ *
+ * Centred and quiet: an empty state is a report, not an alarm, so it uses the
+ * muted ramp throughout and gets its emphasis from position rather than colour.
+ * The icon is decorative — the title carries the meaning, so a screen reader
+ * hears one sentence instead of a shrug emoji.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Panel>
+ *   <EmptyState
+ *     icon={ListX}
+ *     title="No cues yet"
+ *     hint="Record one from the live look, or import a show file."
+ *     action={<Button variant="primary">Record cue</Button>}
+ *   />
+ * </Panel>
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { EmptyState, EmptyStateProps };

package/dist/chrome/empty-state.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/empty-state.tsx
+/**
+* The "there is nothing here" panel body.
+*
+* Centred and quiet: an empty state is a report, not an alarm, so it uses the
+* muted ramp throughout and gets its emphasis from position rather than colour.
+* The icon is decorative — the title carries the meaning, so a screen reader
+* hears one sentence instead of a shrug emoji.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Panel>
+*   <EmptyState
+*     icon={ListX}
+*     title="No cues yet"
+*     hint="Record one from the live look, or import a show file."
+*     action={<Button variant="primary">Record cue</Button>}
+*   />
+* </Panel>
+*/
+const EmptyState = React.forwardRef(function EmptyState({ className, title, hint, action, icon: Icon, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "empty-state",
+		className: cn("flex flex-col items-center justify-center gap-(--cue-space-3) px-(--cue-space-6) py-(--cue-space-7) text-center font-mono", className),
+		...elementProps,
+		children: [
+			Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				"data-slot": "empty-state-icon",
+				className: "size-(--cue-space-7) shrink-0 text-fg-subtle"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "empty-state-title",
+				className: "text-(length:--cue-text-emphasis) text-fg",
+				children: title
+			}),
+			hint === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "empty-state-hint",
+				className: "max-w-[36ch] text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
+				children: hint
+			}),
+			children,
+			action === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "empty-state-action",
+				className: "pt-(--cue-space-2)",
+				children: action
+			})
+		]
+	});
+});
+//#endregion
+export { EmptyState };

package/dist/chrome/eyebrow.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+//#region src/chrome/eyebrow.d.ts
+interface EyebrowProps extends React.ComponentPropsWithoutRef<"span"> {
+  /**
+   * Print the `//` motif ahead of the label. Defaults to `true` — the slashes
+   * are the brand mark of this system, and an eyebrow without them is just
+   * small uppercase text. Pass `false` for a plain kicker.
+   */
+  slashes?: boolean;
+}
+/**
+ * The small accent kicker that sits above a title: `// PATCH`.
+ *
+ * Mono, uppercase and widely tracked, in the theme's accent — the one place
+ * where the accent is used for pure typography rather than for a control. The
+ * slashes are marked `aria-hidden` and `select-none`, so a screen reader reads
+ * "patch" and a copy-paste of the page does not carry punctuation that was only
+ * ever decoration.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Eyebrow>Patch</Eyebrow>
+ * @example
+ * <Eyebrow slashes={false}>Beta</Eyebrow>
+ */
+declare const Eyebrow: React.ForwardRefExoticComponent<EyebrowProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Eyebrow, EyebrowProps };

package/dist/chrome/eyebrow.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/eyebrow.tsx
+/**
+* The small accent kicker that sits above a title: `// PATCH`.
+*
+* Mono, uppercase and widely tracked, in the theme's accent — the one place
+* where the accent is used for pure typography rather than for a control. The
+* slashes are marked `aria-hidden` and `select-none`, so a screen reader reads
+* "patch" and a copy-paste of the page does not carry punctuation that was only
+* ever decoration.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Eyebrow>Patch</Eyebrow>
+* @example
+* <Eyebrow slashes={false}>Beta</Eyebrow>
+*/
+const Eyebrow = React.forwardRef(function Eyebrow({ className, slashes = true, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "eyebrow",
+		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.2em] text-accent uppercase", className),
+		...elementProps,
+		children: [slashes ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "eyebrow-glyph",
+			"aria-hidden": "true",
+			className: "select-none",
+			children: "//"
+		}) : null, children]
+	});
+});
+//#endregion
+export { Eyebrow };