@cueplusplus/ui 0.1.0

package/dist/chrome/navigation-menu.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { CaretDownGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+/**
+* The marketing-shaped navigation header: a strip of words, each opening a panel
+* of destinations.
+*
+* Wraps Base UI's `NavigationMenu`, which is the right primitive because a
+* navigation menu is *not* a menu: its rows are links, not commands, so it must
+* not take `role="menu"` (which tells a screen reader to expect commands and
+* swallows the browser's own link affordances). Hover intent, the shared
+* resizing popup, focus handling and the landmark are all the primitive's.
+*
+* Reach for {@link Menubar} when the entries run commands, `Tabs` when they
+* switch a panel in place, and `Sidebar` when the console has more than about
+* six destinations.
+*
+* @example
+* <NavigationMenu.Root aria-label="Console">
+*   <NavigationMenu.List>
+*     <NavigationMenu.Item>
+*       <NavigationMenu.Trigger>Patch</NavigationMenu.Trigger>
+*       <NavigationMenu.Content>
+*         <NavigationMenu.Link href="/patch/fixtures" description="Everything addressed">
+*           Fixtures
+*         </NavigationMenu.Link>
+*       </NavigationMenu.Content>
+*     </NavigationMenu.Item>
+*   </NavigationMenu.List>
+*   <NavigationMenu.Viewport />
+* </NavigationMenu.Root>
+*/
+const NavigationMenu$1 = {
+	Root: React.forwardRef(function NavigationMenuRoot({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(NavigationMenu.Root, {
+			ref,
+			"data-slot": "navigation-menu",
+			className: cn("relative", className),
+			...elementProps
+		});
+	}),
+	List: React.forwardRef(function NavigationMenuList({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(NavigationMenu.List, {
+			ref,
+			"data-slot": "navigation-menu-list",
+			className: cn("flex items-center gap-(--cue-space-1)", className),
+			...elementProps
+		});
+	}),
+	Item: React.forwardRef(function NavigationMenuItem({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+			ref,
+			"data-slot": "navigation-menu-item",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Trigger: React.forwardRef(function NavigationMenuTrigger({ className, caret = true, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
+			ref,
+			"data-slot": "navigation-menu-trigger",
+			className: cn("inline-flex h-control-md cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg", className),
+			...elementProps,
+			children: [children, caret ? /* @__PURE__ */ jsx(NavigationMenu.Icon, {
+				className: "flex items-center transition-transform duration-150 data-[popup-open]:rotate-180 motion-reduce:transition-none",
+				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: "size-icon-sm text-fg-subtle" })
+			}) : null]
+		});
+	}),
+	Content: React.forwardRef(function NavigationMenuContent({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+			ref,
+			"data-slot": "navigation-menu-content",
+			className: cn("flex w-[min(20rem,calc(100vw-2rem))] flex-col gap-(--cue-space-1) p-(--cue-space-2)", className),
+			...elementProps
+		});
+	}),
+	Link: React.forwardRef(function NavigationMenuLink({ className, description, active, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(NavigationMenu.Link, {
+			ref,
+			"data-slot": "navigation-menu-link",
+			"data-active": active === true ? "" : void 0,
+			"aria-current": active === true ? "page" : void 0,
+			className: cn("flex cursor-pointer flex-col gap-(--cue-space-1) rounded-(--radius-control) px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[active]:text-accent", className),
+			...elementProps,
+			children: [/* @__PURE__ */ jsx("span", { children }), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-label) leading-relaxed text-fg-subtle",
+				children: description
+			})]
+		});
+	}),
+	Viewport: React.forwardRef(function NavigationMenuViewport({ className, positionerClassName, sideOffset = 4, align = "start", ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsx(NavigationMenu.Portal, {
+			...portalProps,
+			children: /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
+				className: cn(overlayPositionerClasses, "h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)", positionerClassName),
+				side: "bottom",
+				align,
+				sideOffset,
+				children: /* @__PURE__ */ jsx(NavigationMenu.Popup, {
+					ref,
+					"data-slot": "navigation-menu-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "relative h-(--popup-height) w-(--popup-width) overflow-hidden outline-none", className),
+					...popupProps,
+					children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
+						"data-slot": "navigation-menu-viewport",
+						className: "relative h-full w-full overflow-hidden"
+					})
+				})
+			})
+		});
+	})
+};
+//#endregion
+export { NavigationMenu$1 as NavigationMenu };

package/dist/chrome/page-shell.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+//#region src/chrome/page-shell.d.ts
+/** How wide the content column is allowed to get. */
+type PageWidth = "narrow" | "wide";
+interface PageShellProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** Which measure the content column takes. Defaults to `"narrow"`. */
+  width?: PageWidth;
+  /** The page heading. Rendered as the `<h1>`. */
+  title?: React.ReactNode;
+  /** One supporting line under the title. */
+  subtitle?: React.ReactNode;
+  /** Accent kicker above the title — normally an `<Eyebrow>`. */
+  eyebrow?: React.ReactNode;
+  /** Page-level actions, aligned with the title. */
+  actions?: React.ReactNode;
+  /** The page body. */
+  children?: React.ReactNode;
+}
+/**
+ * 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>
+ */
+declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PageShell, PageShellProps, PageWidth };

package/dist/chrome/page-shell.js

@@ -0,0 +1,66 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/page-shell.tsx
+/**
+* Two measures, not a scale. `narrow` (42rem) is a reading column — settings,
+* forms, prose. `wide` (54rem) is a working column — tables and panel grids.
+* Anything that wants the full viewport is not a page shell; it is a console
+* layout and should own its own frame.
+*/
+const WIDTHS = {
+	narrow: "max-w-[42rem]",
+	wide: "max-w-[54rem]"
+};
+/**
+* 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-relaxed 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 };