@cueplusplus/ui 0.13.0

package/dist/chrome/page-shell.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/page-shell.tsx
+/**
+* Four measures, not a scale — and the same four `Container` offers.
+*
+* `narrow` (42rem) is a reading column: settings, forms, prose. `wide` (54rem)
+* is a working column: tables and panel grids. `broad` (84rem) is the
+* application measure — a two-column documentation page, a page whose body is a
+* device frame — and it exists because both of this repo's own hard-coded
+* `max-w-[84rem]` overrides were asking for it. `full` caps nothing, for a page
+* whose body sets its own width.
+*
+* `full` is still a page shell, not a console layout: it keeps the gutters and
+* the standard page header. A screen that wants the *viewport* — one frame tall,
+* with its own scroller — is `AppShell`, not this.
+*/
+const WIDTHS = {
+	narrow: "max-w-(--cue-measure-narrow)",
+	wide: "max-w-(--cue-measure-wide)",
+	broad: "max-w-(--cue-measure-broad)",
+	full: ""
+};
+/**
+* A centred content column with a standard page header.
+*
+* The header is emitted only when something fills it, so a shell used purely
+* for its measure adds no empty box and no stray vertical rhythm.
+*
+* Renders a plain `<div>` rather than a `<main>`: a page can hold more than one
+* shell (a split view), and only one element per document may be `<main>`. Wrap
+* it yourself where the semantics apply.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <PageShell title="Patch" subtitle="512 channels" eyebrow={<Eyebrow>Console</Eyebrow>}>
+*   <Panel>…</Panel>
+* </PageShell>
+*/
+const PageShell = React.forwardRef(function PageShell({ className, width = "narrow", title, subtitle, eyebrow, actions, children, ...elementProps }, ref) {
+	const hasHeader = title !== void 0 || subtitle !== void 0 || eyebrow !== void 0 || actions !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "page-shell",
+		className: cn("mx-auto flex w-full flex-col gap-(--cue-space-6) px-(--cue-space-6) py-(--cue-space-7)", WIDTHS[width], className),
+		...elementProps,
+		children: [hasHeader ? /* @__PURE__ */ jsxs("header", {
+			"data-slot": "page-shell-header",
+			className: "flex items-start justify-between gap-(--cue-space-4)",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-(--cue-space-2)",
+				children: [
+					eyebrow,
+					title === void 0 ? null : /* @__PURE__ */ jsx("h1", {
+						"data-slot": "page-shell-title",
+						className: "font-mono text-(length:--cue-text-title) font-medium text-fg",
+						children: title
+					}),
+					subtitle === void 0 ? null : /* @__PURE__ */ jsx("p", {
+						"data-slot": "page-shell-subtitle",
+						className: "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
+						children: subtitle
+					})
+				]
+			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "page-shell-actions",
+				className: "flex shrink-0 items-center gap-(--cue-space-2)",
+				children: actions
+			})]
+		}) : null, children]
+	});
+});
+//#endregion
+export { PageShell };

package/dist/chrome/panel.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+//#region src/chrome/panel.d.ts
+/** Props for {@link Panel}: the native `<div>` surface plus `className`. */
+type PanelProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * The universal container: one hairline rim, one raised surface, one radius.
+ *
+ * Everything in a console lives in a panel — a cue list, a patch table, a
+ * settings group — so the shape is defined once here rather than re-typed as
+ * four utilities at every call site. `overflow-hidden` is part of the recipe,
+ * not an extra: it clips the first and last `Row`'s square edges back to the
+ * panel's radius, which is what makes a stack of hairline rows read as one
+ * object.
+ *
+ * Deliberately flat: no shadow. In this system only a floating surface (a
+ * dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Panel>
+ *   <PanelHeader title="Cue stack" actions={<IconButton aria-label="Add" icon={Plus} />} />
+ *   <Row>Cue 1</Row>
+ *   <Row>Cue 2</Row>
+ * </Panel>
+ */
+declare const Panel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface PanelHeaderProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /**
+   * The header's label. Rendered one type rung above body text — the panel's
+   * own name, not a page heading.
+   */
+  title?: React.ReactNode;
+  /**
+   * Right-hand slot: the controls that act on the whole panel (a menu, a
+   * refresh button, a count chip).
+   */
+  actions?: React.ReactNode;
+  /** Extra content in the leading cluster, after the title. */
+  children?: React.ReactNode;
+}
+/**
+ * The top bar of a {@link Panel}: title left, actions right, hairline under.
+ *
+ * Padded with the density row tokens rather than its own values, so the header
+ * lines up horizontally with the rows beneath it at every density level.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <PanelHeader title="Universes" actions={<Chip tone="ok">live</Chip>} />
+ */
+declare const PanelHeader: React.ForwardRefExoticComponent<PanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Panel, PanelHeader, PanelHeaderProps, PanelProps };

package/dist/chrome/panel.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/chrome/panel.tsx
+/**
+* The universal container: one hairline rim, one raised surface, one radius.
+*
+* Everything in a console lives in a panel — a cue list, a patch table, a
+* settings group — so the shape is defined once here rather than re-typed as
+* four utilities at every call site. `overflow-hidden` is part of the recipe,
+* not an extra: it clips the first and last `Row`'s square edges back to the
+* panel's radius, which is what makes a stack of hairline rows read as one
+* object.
+*
+* Deliberately flat: no shadow. In this system only a floating surface (a
+* dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Panel>
+*   <PanelHeader title="Cue stack" actions={<IconButton aria-label="Add" icon={Plus} />} />
+*   <Row>Cue 1</Row>
+*   <Row>Cue 2</Row>
+* </Panel>
+*/
+const Panel = React.forwardRef(function Panel({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "panel",
+		className: cn("overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1", className),
+		...elementProps
+	});
+});
+/**
+* The top bar of a {@link Panel}: title left, actions right, hairline under.
+*
+* Padded with the density row tokens rather than its own values, so the header
+* lines up horizontally with the rows beneath it at every density level.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <PanelHeader title="Universes" actions={<Chip tone="ok">live</Chip>} />
+*/
+const PanelHeader = React.forwardRef(function PanelHeader({ className, title, actions, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "panel-header",
+		className: cn("flex items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-(--cue-space-3)",
+			children: [title === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "panel-header-title",
+				className: "truncate font-mono text-(length:--cue-text-emphasis) font-medium text-fg",
+				children: title
+			}), children]
+		}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "panel-header-actions",
+			className: "flex shrink-0 items-center gap-(--cue-space-2)",
+			children: actions
+		})]
+	});
+});
+//#endregion
+export { Panel, PanelHeader };

package/dist/chrome/row.d.ts

@@ -0,0 +1,82 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+//#region src/chrome/row.d.ts
+/**
+ * The list-row recipe, in both of the system's separator idioms.
+ *
+ * `seam: false` is the default hairline list: each row draws its own top
+ * border and the first one drops it, so a stack inside a `Panel` shows rules
+ * *between* rows and none against the panel rim.
+ *
+ * `seam: true` is the snuffle idiom: the rows sit on a `bg-border` ground with
+ * a 1px gap between them (see {@link SeamList}), and the gap *is* the rule.
+ * The row must then paint its own fill and draw no border at all, or the two
+ * separators double up into a 2px line.
+ *
+ * @example
+ * <li className={rowVariants({ interactive: true })} />
+ */
+declare const rowVariants: (props?: ({
+  seam?: boolean | null | undefined;
+  interactive?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+interface RowProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof rowVariants> {
+  /**
+   * Render as a `<button>` with hover feedback and a focus ring instead of a
+   * static `<div>`. Use for rows that select, open or toggle something.
+   */
+  interactive?: boolean;
+  /**
+   * Drop the hairline and paint the row's own fill, for use inside a
+   * {@link SeamList}. Without a `SeamList` parent the rows will simply touch.
+   */
+  seam?: boolean;
+  /** Disable the interactive form. Ignored when `interactive` is not set. */
+  disabled?: boolean;
+  /** Row content — normally a label, a spacer and a value or control. */
+  children?: React.ReactNode;
+}
+/**
+ * One row of a hairline list: the workhorse of every console panel.
+ *
+ * Static by default and a real `<button>` when `interactive` — never a `<div>`
+ * with an `onClick`, so keyboard users get it for free. Vertical rhythm comes
+ * from the density row-padding tokens, so the same list is 22px tall in
+ * ultra-compact and 34px tall in large without touching the markup.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Panel><Row>Channel 1<span className="ml-auto">255</span></Row></Panel>
+ * @example
+ * <SeamList>
+ *   <Row seam interactive onClick={select}>Cue 1</Row>
+ *   <Row seam interactive onClick={select}>Cue 2</Row>
+ * </SeamList>
+ */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLElement>>;
+/** Props for {@link SeamList}: the native `<div>` surface plus `className`. */
+type SeamListProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * A list whose separators are gaps, not borders.
+ *
+ * The container is filled with the border colour and its children are spaced
+ * `1px` apart; each child paints its own opaque fill, so what shows through the
+ * gap is a perfect hairline that can never double up with a row's own border or
+ * disagree with it at a rounded corner.
+ *
+ * Pair with `<Row seam>`. Use it where rows are cards in their own right (a
+ * cue list, a fixture list); use a plain `Panel` + `Row` where they are lines
+ * of one table.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <SeamList>
+ *   <Row seam>Cue 1</Row>
+ *   <Row seam>Cue 2</Row>
+ * </SeamList>
+ */
+declare const SeamList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Row, RowProps, SeamList, SeamListProps, rowVariants };

package/dist/chrome/row.js

@@ -0,0 +1,106 @@
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/row.tsx
+/**
+* The list-row recipe, in both of the system's separator idioms.
+*
+* `seam: false` is the default hairline list: each row draws its own top
+* border and the first one drops it, so a stack inside a `Panel` shows rules
+* *between* rows and none against the panel rim.
+*
+* `seam: true` is the snuffle idiom: the rows sit on a `bg-border` ground with
+* a 1px gap between them (see {@link SeamList}), and the gap *is* the rule.
+* The row must then paint its own fill and draw no border at all, or the two
+* separators double up into a 2px line.
+*
+* @example
+* <li className={rowVariants({ interactive: true })} />
+*/
+const rowVariants = cva("flex w-full items-center gap-(--cue-space-3) px-(--cue-pad-row-x) py-(--cue-pad-row-y) font-mono text-(length:--cue-text-ui) text-fg", {
+	variants: {
+		seam: {
+			true: "bg-bg",
+			false: "border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0"
+		},
+		interactive: {
+			true: "cursor-pointer text-left transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		seam: false,
+		interactive: false
+	}
+});
+/**
+* One row of a hairline list: the workhorse of every console panel.
+*
+* Static by default and a real `<button>` when `interactive` — never a `<div>`
+* with an `onClick`, so keyboard users get it for free. Vertical rhythm comes
+* from the density row-padding tokens, so the same list is 22px tall in
+* ultra-compact and 34px tall in large without touching the markup.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Panel><Row>Channel 1<span className="ml-auto">255</span></Row></Panel>
+* @example
+* <SeamList>
+*   <Row seam interactive onClick={select}>Cue 1</Row>
+*   <Row seam interactive onClick={select}>Cue 2</Row>
+* </SeamList>
+*/
+const Row = React.forwardRef(function Row({ className, seam, interactive = false, disabled, children, ...elementProps }, ref) {
+	const classes = cn(rowVariants({
+		seam,
+		interactive
+	}), className);
+	if (interactive) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		disabled,
+		"data-slot": "row",
+		className: classes,
+		...elementProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "row",
+		className: classes,
+		...elementProps,
+		children
+	});
+});
+/**
+* A list whose separators are gaps, not borders.
+*
+* The container is filled with the border colour and its children are spaced
+* `1px` apart; each child paints its own opaque fill, so what shows through the
+* gap is a perfect hairline that can never double up with a row's own border or
+* disagree with it at a rounded corner.
+*
+* Pair with `<Row seam>`. Use it where rows are cards in their own right (a
+* cue list, a fixture list); use a plain `Panel` + `Row` where they are lines
+* of one table.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <SeamList>
+*   <Row seam>Cue 1</Row>
+*   <Row seam>Cue 2</Row>
+* </SeamList>
+*/
+const SeamList = React.forwardRef(function SeamList({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "seam-list",
+		className: cn("flex flex-col gap-px overflow-hidden rounded-(--radius-surface) border border-border bg-border", className),
+		...elementProps
+	});
+});
+//#endregion
+export { Row, SeamList, rowVariants };

package/dist/chrome/scroll-area.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/chrome/scroll-area.d.ts
+/** Which axes get a styled scrollbar. */
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+interface ScrollAreaProps extends Omit<ScrollArea.Root.Props, "className"> {
+  /** Extra classes for the frame. Give it a height, or nothing will scroll. */
+  className?: string;
+  /** Extra classes for the scrolling viewport (padding belongs here). */
+  viewportClassName?: string;
+  /** Which axes may scroll. Defaults to `"vertical"`. */
+  orientation?: ScrollAreaOrientation;
+  /**
+   * Keep the scrollbar tracks mounted even when the content fits. Use for a
+   * panel whose content grows and shrinks, where a track appearing and
+   * disappearing would reflow everything beside it.
+   */
+  keepScrollbarsMounted?: boolean;
+  /** Ref to the scrolling element itself — for virtualizers and scroll restore. */
+  viewportRef?: React.Ref<HTMLDivElement>;
+  /** The scrolling content. */
+  children?: React.ReactNode;
+}
+/**
+ * A scrolling region with the system's own scrollbar instead of the platform's.
+ *
+ * Wraps Base UI's `ScrollArea`, which keeps native scrolling (and therefore
+ * native momentum, keyboard and trackpad behaviour) and only re-skins the bar.
+ * The frame must be given a bounded height by the caller — `h-full` inside a
+ * flex parent, or an explicit height — or there is nothing to scroll.
+ *
+ * @example
+ * <ScrollArea className="h-64" viewportClassName="p-(--cue-space-4)">
+ *   {cues.map((c) => <Row key={c.id}>{c.name}</Row>)}
+ * </ScrollArea>
+ */
+declare const ScrollArea$1: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollArea$1 as ScrollArea, ScrollAreaOrientation, ScrollAreaProps };

package/dist/chrome/scroll-area.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/chrome/scroll-area.tsx
+/**
+* The scrollbar is an overlay, not a gutter: it fades in while the pointer is
+* over the area or the content is moving, and takes no layout space either way.
+* A console packs panels edge to edge, and a permanent 12px trough on every one
+* of them is 12px of chrome per panel that says nothing.
+*/
+const SCROLLBAR_CLASSES = "flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none data-[orientation=horizontal]:h-(--cue-space-3) data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-(--cue-space-3)";
+/**
+* A scrolling region with the system's own scrollbar instead of the platform's.
+*
+* Wraps Base UI's `ScrollArea`, which keeps native scrolling (and therefore
+* native momentum, keyboard and trackpad behaviour) and only re-skins the bar.
+* The frame must be given a bounded height by the caller — `h-full` inside a
+* flex parent, or an explicit height — or there is nothing to scroll.
+*
+* @example
+* <ScrollArea className="h-64" viewportClassName="p-(--cue-space-4)">
+*   {cues.map((c) => <Row key={c.id}>{c.name}</Row>)}
+* </ScrollArea>
+*/
+const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewportClassName, orientation = "vertical", keepScrollbarsMounted = false, viewportRef, children, ...elementProps }, ref) {
+	const vertical = orientation === "vertical" || orientation === "both";
+	const horizontal = orientation === "horizontal" || orientation === "both";
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		ref,
+		"data-slot": "scroll-area",
+		className: cn("relative min-h-0", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				ref: viewportRef,
+				"data-slot": "scroll-area-viewport",
+				className: cn("size-full overscroll-contain outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", viewportClassName),
+				children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+					"data-slot": "scroll-area-content",
+					children
+				})
+			}),
+			vertical ? /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "vertical",
+				keepMounted: keepScrollbarsMounted,
+				"data-slot": "scroll-area-scrollbar",
+				className: SCROLLBAR_CLASSES,
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+					"data-slot": "scroll-area-thumb",
+					className: "w-full rounded-full bg-border-strong"
+				})
+			}) : null,
+			horizontal ? /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "horizontal",
+				keepMounted: keepScrollbarsMounted,
+				"data-slot": "scroll-area-scrollbar",
+				className: SCROLLBAR_CLASSES,
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+					"data-slot": "scroll-area-thumb",
+					className: "h-full rounded-full bg-border-strong"
+				})
+			}) : null,
+			vertical && horizontal ? /* @__PURE__ */ jsx(ScrollArea.Corner, { "data-slot": "scroll-area-corner" }) : null
+		]
+	});
+});
+//#endregion
+export { ScrollArea$1 as ScrollArea };

package/dist/chrome/section-header.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+//#region src/chrome/section-header.d.ts
+interface SectionHeaderProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onToggle"> {
+  /** The group's name. Rendered uppercase in the smallest mono label type. */
+  label: React.ReactNode;
+  /** Optional count shown after the label — how many things are in the group. */
+  count?: number;
+  /**
+   * Right-hand slot. Rendered *outside* the collapse toggle so clicking an
+   * action never folds the section shut under the user's cursor.
+   */
+  action?: React.ReactNode;
+  /** Turn the label into a disclosure button that shows and hides `children`. */
+  collapsible?: boolean;
+  /** Initial open state when uncontrolled. Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Open state when controlled. Pass with `onOpenChange`. */
+  open?: boolean;
+  /** Called with the next open state whenever the toggle is pressed. */
+  onOpenChange?: (open: boolean) => void;
+  /** The section body. Hidden while a collapsible section is closed. */
+  children?: React.ReactNode;
+}
+/**
+ * A faint label with a rule running off it — the heading for a group of rows.
+ *
+ * A label and a hairline, deliberately, not a bordered box: a heading that is
+ * itself a panel competes with the panels underneath it and reads as another
+ * object rather than as their title (the quotamate `AccountGroup` ruling). The
+ * rule is a `flex-1` block, so it always fills exactly the space the label and
+ * the count leave behind.
+ *
+ * @example
+ * <SectionHeader label="Universes" count={4} />
+ * @example
+ * <SectionHeader label="Scenes" collapsible action={<IconButton aria-label="Add" icon={Plus} />}>
+ *   <SeamList>{scenes.map((s) => <Row seam key={s.id}>{s.name}</Row>)}</SeamList>
+ * </SectionHeader>
+ */
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SectionHeader, SectionHeaderProps };

package/dist/chrome/section-header.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/section-header.tsx
+/**
+* A faint label with a rule running off it — the heading for a group of rows.
+*
+* A label and a hairline, deliberately, not a bordered box: a heading that is
+* itself a panel competes with the panels underneath it and reads as another
+* object rather than as their title (the quotamate `AccountGroup` ruling). The
+* rule is a `flex-1` block, so it always fills exactly the space the label and
+* the count leave behind.
+*
+* @example
+* <SectionHeader label="Universes" count={4} />
+* @example
+* <SectionHeader label="Scenes" collapsible action={<IconButton aria-label="Add" icon={Plus} />}>
+*   <SeamList>{scenes.map((s) => <Row seam key={s.id}>{s.name}</Row>)}</SeamList>
+* </SectionHeader>
+*/
+const SectionHeader = React.forwardRef(function SectionHeader({ className, label, count, action, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, children, ...elementProps }, ref) {
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+	const open = openProp ?? uncontrolledOpen;
+	const toggle = () => {
+		const next = !open;
+		if (openProp === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	};
+	const headContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		collapsible ? /* @__PURE__ */ jsx(ChevronRightGlyph, {
+			"data-slot": "section-header-chevron",
+			className: cn("size-icon-sm shrink-0 text-fg-subtle transition-transform duration-150 motion-reduce:transition-none", open ? "rotate-90" : "rotate-0")
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "section-header-label",
+			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+			children: label
+		}),
+		count === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "section-header-count",
+			className: "shrink-0 font-mono text-(length:--cue-text-label) tabular-nums text-fg-subtle",
+			children: count
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "section-header-rule",
+			"aria-hidden": "true",
+			className: "h-px min-w-(--cue-space-4) flex-1 bg-border"
+		})
+	] });
+	const headClasses = "flex min-w-0 flex-1 items-center gap-(--cue-space-3)";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "section-header",
+		className: cn("flex w-full flex-col gap-(--cue-space-3)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-(--cue-space-3)",
+			children: [collapsible ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": open,
+				onClick: toggle,
+				"data-slot": "section-header-toggle",
+				className: cn(headClasses, "cursor-pointer text-left outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent"),
+				children: headContent
+			}) : /* @__PURE__ */ jsx("div", {
+				className: headClasses,
+				children: headContent
+			}), action === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "section-header-action",
+				className: "flex shrink-0 items-center gap-(--cue-space-2)",
+				children: action
+			})]
+		}), children !== void 0 && (!collapsible || open) ? children : null]
+	});
+});
+//#endregion
+export { SectionHeader };