@cueplusplus/ui 0.1.0

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

package/dist/chrome/segmented-control.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/chrome/segmented-control.d.ts
+/** The rung of the density control ladder a segmented control sits on. */
+type SegmentedControlSize = "sm" | "md" | "lg";
+/** One segment of a {@link SegmentedControl}. */
+interface SegmentedControlItem {
+  /** The value reported when this segment is picked. Must be unique. */
+  value: string;
+  /** What the segment says. Keep it to one word where possible. */
+  label: React.ReactNode;
+  /** Optional leading icon (e.g. a lucide icon), drawn `aria-hidden`. */
+  icon?: React.ElementType;
+  /** Grey this segment out and make it unpickable. */
+  disabled?: boolean;
+}
+interface SegmentedControlProps extends Omit<ToggleGroup.Props<string>, "value" | "defaultValue" | "onValueChange" | "multiple" | "className" | "children"> {
+  /** The segments, in display order. */
+  items: readonly SegmentedControlItem[];
+  /** The picked value when controlled. Pass with `onValueChange`. */
+  value?: string;
+  /** The initially picked value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the newly picked value. Never called with `undefined`. */
+  onValueChange?: (value: string) => void;
+  /** Which rung of the control ladder to sit on. Defaults to `"md"`. */
+  size?: SegmentedControlSize;
+  /** Extra classes for the group frame. */
+  className?: string;
+  /** Extra classes for every segment. */
+  itemClassName?: string;
+}
+/**
+ * A one-of-N switch drawn as a row of segments: the console's view picker.
+ *
+ * Built on Base UI's `ToggleGroup`, so arrow-key roving focus and the
+ * pressed-state ARIA come from the primitive. Two rules are added on top:
+ *
+ * 1. **It cannot be emptied.** A toggle group lets you unpress the pressed
+ *    item; a segmented control is a choice between N things, so clicking the
+ *    active segment is a no-op rather than a way to end up with nothing
+ *    selected. This is why the underlying group is always controlled here, even
+ *    when the wrapper is not.
+ * 2. **The active segment is tinted, not filled** — see {@link ITEM_CLASSES}.
+ *
+ * Give the group an `aria-label`: on its own it is an unnamed group of buttons.
+ *
+ * @example
+ * <SegmentedControl
+ *   aria-label="View"
+ *   value={view}
+ *   onValueChange={setView}
+ *   items={[{ value: "beams", label: "Beams" }, { value: "patch", label: "Patch" }]}
+ * />
+ */
+declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize };

package/dist/chrome/segmented-control.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/chrome/segmented-control.tsx
+const ITEM_SIZES = {
+	sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
+	md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
+	lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
+};
+/**
+* The pressed segment is marked with `accent-soft` and accent ink — never a
+* solid accent fill. A solid bar inside a small control reads as a second,
+* louder button and drowns the labels around it (the luma defect ruling); the
+* soft tint says "this one" at exactly the volume a view switcher deserves.
+*/
+const ITEM_CLASSES = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) font-mono text-fg-muted transition-colors duration-150 outline-none hover:text-fg data-[pressed]:bg-accent-soft data-[pressed]:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/**
+* A one-of-N switch drawn as a row of segments: the console's view picker.
+*
+* Built on Base UI's `ToggleGroup`, so arrow-key roving focus and the
+* pressed-state ARIA come from the primitive. Two rules are added on top:
+*
+* 1. **It cannot be emptied.** A toggle group lets you unpress the pressed
+*    item; a segmented control is a choice between N things, so clicking the
+*    active segment is a no-op rather than a way to end up with nothing
+*    selected. This is why the underlying group is always controlled here, even
+*    when the wrapper is not.
+* 2. **The active segment is tinted, not filled** — see {@link ITEM_CLASSES}.
+*
+* Give the group an `aria-label`: on its own it is an unnamed group of buttons.
+*
+* @example
+* <SegmentedControl
+*   aria-label="View"
+*   value={view}
+*   onValueChange={setView}
+*   items={[{ value: "beams", label: "Beams" }, { value: "patch", label: "Patch" }]}
+* />
+*/
+const SegmentedControl = React.forwardRef(function SegmentedControl({ items, value: valueProp, defaultValue, onValueChange, size = "md", className, itemClassName, ...groupProps }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const value = valueProp ?? uncontrolledValue;
+	const handleValueChange = (groupValue) => {
+		const next = groupValue[0];
+		if (next === void 0 || next === value) return;
+		if (valueProp === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
+	};
+	const iconSize = size === "sm" ? "size-icon-sm" : "size-icon-md";
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		ref,
+		value: value === void 0 ? [] : [value],
+		onValueChange: handleValueChange,
+		"data-slot": "segmented-control",
+		className: cn("inline-flex items-center gap-(--cue-space-1) rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-1)", className),
+		...groupProps,
+		children: items.map((item) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsxs(Toggle, {
+				value: item.value,
+				disabled: item.disabled,
+				"data-slot": "segmented-control-item",
+				className: cn(ITEM_CLASSES, ITEM_SIZES[size], itemClassName),
+				children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					className: cn("shrink-0", iconSize)
+				}), item.label]
+			}, item.value);
+		})
+	});
+});
+//#endregion
+export { SegmentedControl };

package/dist/chrome/status-bar.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+//#region src/chrome/status-bar.d.ts
+/**
+ * Ink for a status-bar item. `neutral` inherits the bar's own subtle grey; the
+ * rest are the shared status vocabulary, so "3 faults" in the status bar is the
+ * same red as the danger `Chip` that raised it.
+ */
+type StatusBarTone = "neutral" | "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+/** Props for {@link StatusBar}: the native `<div>` surface plus `className`. */
+type StatusBarProps = React.ComponentPropsWithoutRef<"div">;
+interface StatusBarItemProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Ink for this item. Defaults to the bar's own subtle grey. */
+  tone?: StatusBarTone;
+  /**
+   * Start the trailing cluster here: pushes this item and everything after it
+   * to the far edge. Cheaper and more robust than a spacer element, which a
+   * caller has to remember to keep in the right place.
+   */
+  push?: boolean;
+  /** Optional leading icon (e.g. a lucide icon), drawn `aria-hidden`. */
+  icon?: React.ElementType;
+}
+/**
+ * The quiet strip along the bottom of a window.
+ *
+ * The smallest type in the system in the subtlest ink: a status bar is read
+ * when you go looking for it and ignored otherwise, so it must never compete
+ * with the work above it. Height comes from `--cue-chrome-statusbar`.
+ *
+ * Not a live region — a status bar changes constantly (frame counters, DMX
+ * output), and announcing every change would make the app unusable with a
+ * screen reader. Put anything that genuinely must be announced in a `Toast`.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <StatusBar>
+ *   <StatusBar.Item icon={Plug} tone="ok">Art-Net connected</StatusBar.Item>
+ *   <StatusBar.Item push>512 channels</StatusBar.Item>
+ * </StatusBar>
+ */
+declare const StatusBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+  Item: React.ForwardRefExoticComponent<StatusBarItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { StatusBar, StatusBarItemProps, StatusBarProps, StatusBarTone };

package/dist/chrome/status-bar.js

@@ -0,0 +1,56 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/status-bar.tsx
+const ITEM_TONES = {
+	neutral: "",
+	accent: "text-accent",
+	ok: "text-ok",
+	busy: "text-busy",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+const StatusBarRoot = React.forwardRef(function StatusBar({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "status-bar",
+		className: cn("flex h-(--cue-chrome-statusbar) w-full shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+		...elementProps
+	});
+});
+/** One reading in the bar: a mode, a count, a connection state. */
+const StatusBarItem = React.forwardRef(function StatusBarItem({ className, tone = "neutral", push = false, icon: Icon, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "status-bar-item",
+		className: cn("inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2) whitespace-nowrap", ITEM_TONES[tone], push ? "ml-auto" : void 0, className),
+		...elementProps,
+		children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-icon-sm shrink-0"
+		}), children]
+	});
+});
+/**
+* The quiet strip along the bottom of a window.
+*
+* The smallest type in the system in the subtlest ink: a status bar is read
+* when you go looking for it and ignored otherwise, so it must never compete
+* with the work above it. Height comes from `--cue-chrome-statusbar`.
+*
+* Not a live region — a status bar changes constantly (frame counters, DMX
+* output), and announcing every change would make the app unusable with a
+* screen reader. Put anything that genuinely must be announced in a `Toast`.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <StatusBar>
+*   <StatusBar.Item icon={Plug} tone="ok">Art-Net connected</StatusBar.Item>
+*   <StatusBar.Item push>512 channels</StatusBar.Item>
+* </StatusBar>
+*/
+const StatusBar = Object.assign(StatusBarRoot, { Item: StatusBarItem });
+//#endregion
+export { StatusBar };

package/dist/chrome/tabs.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/chrome/tabs.d.ts
+interface TabsRootProps extends Omit<Tabs.Root.Props, "className"> {
+  /** Extra classes for the tabs frame. */
+  className?: string;
+}
+interface TabsListProps extends Omit<Tabs.List.Props, "className"> {
+  /** Extra classes for the strip. */
+  className?: string;
+}
+interface TabsTabProps extends Omit<Tabs.Tab.Props, "className"> {
+  /** Extra classes for the tab button. */
+  className?: string;
+}
+interface TabsPanelProps extends Omit<Tabs.Panel.Props, "className"> {
+  /** Extra classes for the panel. */
+  className?: string;
+}
+interface ScrollableTabsListProps extends TabsListProps {
+  /**
+   * Classes for the outer frame (background, rim). It spans the full width even
+   * while the strip inside it is scrolled.
+   */
+  containerClassName?: string;
+  /**
+   * The active tab's value. When it changes, that tab is scrolled into view — a
+   * tab selected in code (a deep link, a keyboard shortcut) can be off-screen.
+   */
+  activeValue?: Tabs.Tab.Value;
+}
+/**
+ * A {@link TabsList} that scrolls when its tabs do not fit, and says so.
+ *
+ * Use instead of `Tabs.List` wherever the tab count can outgrow the container:
+ * a plain flex row silently clips its labels ("SETTINGS" rendering as "INGS"),
+ * which reads as a layout bug rather than as "scroll me".
+ *
+ * The affordance is two things, and it needs both. The mask fades the content
+ * at whichever edge still hides tabs; the chevron buttons are the visible half,
+ * because what sits at an overflowing edge is usually the gap *between* two
+ * tabs and fading empty space produces nothing anyone can see. The chevrons
+ * double as the control for anyone without a horizontal-scroll device.
+ *
+ * @example
+ * <Tabs.Root defaultValue={view}>
+ *   <ScrollableTabsList activeValue={view}>
+ *     {views.map((v) => <Tabs.Tab key={v} value={v}>{v}</Tabs.Tab>)}
+ *   </ScrollableTabsList>
+ * </Tabs.Root>
+ */
+declare const ScrollableTabsList: React.ForwardRefExoticComponent<Omit<ScrollableTabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One surface, several views.
+ *
+ * Wraps Base UI's `Tabs`, so roving focus, `aria-controls` wiring and
+ * activation semantics are the primitive's. This layer adds the console skin:
+ * a hairline strip, mono labels and an accent underline for the active tab.
+ *
+ * Reach for {@link ScrollableTabsList} instead of `Tabs.List` when the number of
+ * tabs is data-driven and can outgrow its container.
+ *
+ * @example
+ * <Tabs.Root defaultValue="patch">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="patch">Patch</Tabs.Tab>
+ *     <Tabs.Tab value="cues">Cues</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="patch">…</Tabs.Panel>
+ *   <Tabs.Panel value="cues">…</Tabs.Panel>
+ * </Tabs.Root>
+ */
+declare const Tabs$1: {
+  Root: React.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  List: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Tab: React.ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Panel: React.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ScrollableTabsList, ScrollableTabsListProps, Tabs$1 as Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps };

package/dist/chrome/tabs.js

@@ -0,0 +1,176 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/chrome/tabs.tsx
+/** Groups a tab list with its panels and owns the selected value. */
+const TabsRoot = React.forwardRef(function TabsRoot({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		ref,
+		"data-slot": "tabs",
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-4) data-[orientation=vertical]:flex-row", className),
+		...elementProps
+	});
+});
+/**
+* The strip of tabs, hung off a hairline.
+*
+* The rule belongs to the list rather than to the active tab so it spans the
+* full width even when the tabs do not — which is what makes the selected tab's
+* accent underline read as a mark *on* a rule rather than as a floating dash.
+*/
+const TabsList = React.forwardRef(function TabsList({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		ref,
+		"data-slot": "tabs-list",
+		className: cn("relative flex items-center gap-(--cue-space-1) border-b border-border data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r", className),
+		...elementProps
+	});
+});
+/**
+* One tab. Selected state is an accent underline sitting on the list's rule —
+* never a filled pill, which at console density turns a row of four tabs into a
+* row of four buttons and loses the "one surface, several views" reading.
+*/
+const TabsTab = React.forwardRef(function TabsTab({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		ref,
+		"data-slot": "tabs-tab",
+		className: cn("relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-t-(--radius-control) px-(--cue-space-4) font-mono text-(length:--cue-text-ui) whitespace-nowrap 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-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", "data-[active]:text-accent data-[active]:after:bg-accent", className),
+		...elementProps
+	});
+});
+/** The body shown for the matching tab. Focusable, so keyboard users land in it. */
+const TabsPanel = React.forwardRef(function TabsPanel({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		ref,
+		"data-slot": "tabs-panel",
+		className: cn("min-w-0 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+		...elementProps
+	});
+});
+/** Page the strip by most of a screenful, keeping a sliver of context. */
+const NUDGE_FRACTION = .7;
+/**
+* A {@link TabsList} that scrolls when its tabs do not fit, and says so.
+*
+* Use instead of `Tabs.List` wherever the tab count can outgrow the container:
+* a plain flex row silently clips its labels ("SETTINGS" rendering as "INGS"),
+* which reads as a layout bug rather than as "scroll me".
+*
+* The affordance is two things, and it needs both. The mask fades the content
+* at whichever edge still hides tabs; the chevron buttons are the visible half,
+* because what sits at an overflowing edge is usually the gap *between* two
+* tabs and fading empty space produces nothing anyone can see. The chevrons
+* double as the control for anyone without a horizontal-scroll device.
+*
+* @example
+* <Tabs.Root defaultValue={view}>
+*   <ScrollableTabsList activeValue={view}>
+*     {views.map((v) => <Tabs.Tab key={v} value={v}>{v}</Tabs.Tab>)}
+*   </ScrollableTabsList>
+* </Tabs.Root>
+*/
+const ScrollableTabsList = React.forwardRef(function ScrollableTabsList({ className, containerClassName, activeValue, children, ...listProps }, ref) {
+	const scrollerRef = React.useRef(null);
+	const [edges, setEdges] = React.useState({
+		start: false,
+		end: false
+	});
+	const sync = React.useCallback(() => {
+		const el = scrollerRef.current;
+		if (el === null) return;
+		setEdges(computeScrollEdges(el.scrollLeft, el.scrollWidth, el.clientWidth));
+	}, []);
+	React.useEffect(() => {
+		const el = scrollerRef.current;
+		if (el === null) return;
+		sync();
+		el.addEventListener("scroll", sync, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => sync());
+		observer?.observe(el);
+		if (el.firstElementChild !== null) observer?.observe(el.firstElementChild);
+		return () => {
+			el.removeEventListener("scroll", sync);
+			observer?.disconnect();
+		};
+	}, [sync]);
+	React.useEffect(() => {
+		scrollerRef.current?.querySelector("[data-slot='tabs-tab'][data-active]")?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [activeValue]);
+	const nudge = (direction) => {
+		const el = scrollerRef.current;
+		el?.scrollBy?.({
+			left: direction * el.clientWidth * NUDGE_FRACTION,
+			behavior: "smooth"
+		});
+	};
+	const mask = edgeFadeMask(edges);
+	const chevronClasses = "absolute inset-y-0 z-10 flex w-(--cue-space-5) cursor-pointer items-center justify-center bg-surface-2 text-fg-muted outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tabs-scroll-frame",
+		className: cn("relative min-w-0", containerClassName),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollerRef,
+				"data-slot": "tabs-scroller",
+				className: "overflow-x-auto [mask-image:var(--cue-tabs-fade)] [-webkit-mask-image:var(--cue-tabs-fade)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				style: mask === void 0 ? void 0 : { "--cue-tabs-fade": mask },
+				children: /* @__PURE__ */ jsx(TabsList, {
+					ref,
+					className: cn("w-max", className),
+					...listProps,
+					children
+				})
+			}),
+			edges.start ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Show earlier tabs",
+				onClick: () => nudge(-1),
+				className: cn(chevronClasses, "left-0"),
+				children: /* @__PURE__ */ jsx(ChevronLeftGlyph, { className: "size-icon-sm" })
+			}) : null,
+			edges.end ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Show later tabs",
+				onClick: () => nudge(1),
+				className: cn(chevronClasses, "right-0"),
+				children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: "size-icon-sm" })
+			}) : null
+		]
+	});
+});
+/**
+* One surface, several views.
+*
+* Wraps Base UI's `Tabs`, so roving focus, `aria-controls` wiring and
+* activation semantics are the primitive's. This layer adds the console skin:
+* a hairline strip, mono labels and an accent underline for the active tab.
+*
+* Reach for {@link ScrollableTabsList} instead of `Tabs.List` when the number of
+* tabs is data-driven and can outgrow its container.
+*
+* @example
+* <Tabs.Root defaultValue="patch">
+*   <Tabs.List>
+*     <Tabs.Tab value="patch">Patch</Tabs.Tab>
+*     <Tabs.Tab value="cues">Cues</Tabs.Tab>
+*   </Tabs.List>
+*   <Tabs.Panel value="patch">…</Tabs.Panel>
+*   <Tabs.Panel value="cues">…</Tabs.Panel>
+* </Tabs.Root>
+*/
+const Tabs$1 = {
+	Root: TabsRoot,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel
+};
+//#endregion
+export { ScrollableTabsList, Tabs$1 as Tabs };

package/dist/chrome/title-bar.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+//#region src/chrome/title-bar.d.ts
+interface TitleBarProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Make the bar a window drag handle.
+   *
+   * Emits `data-tauri-drag-region` (Tauri reads the attribute) *and* the
+   * `app-region: drag` CSS property (Electron and Chromium read that), because
+   * the same component ships into both shells and neither one recognises the
+   * other's contract. The interactive clusters are carved back out with
+   * `app-region: no-drag`, or the buttons in the bar would only ever move the
+   * window instead of firing.
+   */
+  platformDrag?: boolean;
+  /**
+   * Centre slot: the document name. Absolutely centred on the *bar*, not
+   * between the two clusters, so it does not shift sideways when a button
+   * appears on one side. `pointer-events-none`, so the dead space around a
+   * short title stays draggable.
+   */
+  center?: React.ReactNode;
+  /** Trailing slot: window controls, connection state, an overflow menu. */
+  actions?: React.ReactNode;
+  /** Leading slot: the app mark, a back button, the file menu. */
+  children?: React.ReactNode;
+}
+/**
+ * The window's own bar: app mark left, document name centred, controls right.
+ *
+ * @example
+ * <TitleBar platformDrag center="untitled.cue" actions={<WindowControls />}>
+ *   <Eyebrow>CUE++</Eyebrow>
+ * </TitleBar>
+ */
+declare const TitleBar: React.ForwardRefExoticComponent<TitleBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TitleBar, TitleBarProps };