@cueplusplus/ui 0.13.0

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

@@ -0,0 +1,77 @@
+import { BarOverflow } from "./_edge-scroller.js";
+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;
+  /**
+   * What the control does when its segments do not fit. Defaults to `"scroll"`.
+   *
+   * The same behaviour `Toolbar` has, from the same module, for the same
+   * reason: a switcher with five segments in a page header's actions slot runs
+   * off a phone-width screen, and wrapping it would turn a one-rung control
+   * into a two-row block that no longer reads as one switch. `"scroll"` keeps
+   * the rim and the height, scrolls the segments inside them, fades the
+   * overflowing edge and offers a pager chevron there.
+   *
+   * `"clip"` is the old behaviour, for a control already inside something that
+   * scrolls.
+   */
+  overflow?: BarOverflow;
+  /** Accessible name for the chevron that reveals segments off the leading edge. */
+  previousLabel?: string;
+  /** Accessible name for the chevron that reveals segments off the trailing edge. */
+  nextLabel?: 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,95 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.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, overflow = "scroll", previousLabel = "Show earlier segments", nextLabel = "Show later segments", ...groupProps }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const value = valueProp ?? uncontrolledValue;
+	const scrolls = overflow === "scroll";
+	const scroll = useEdgeScroll(scrolls);
+	const groupRef = useComposedRefs(ref, scroll.ref);
+	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__ */ jsxs("div", {
+		"data-slot": "segmented-control-frame",
+		className: cn("relative inline-flex max-w-full min-w-0 shrink-0 items-center rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-1)", className),
+		children: [/* @__PURE__ */ jsx(ToggleGroup, {
+			ref: groupRef,
+			value: value === void 0 ? [] : [value],
+			onValueChange: handleValueChange,
+			"data-slot": "segmented-control",
+			className: cn("inline-flex min-w-0 items-center gap-(--cue-space-1)", scrolls ? EDGE_SCROLLER_CLASSES : null),
+			...groupProps,
+			style: {
+				...groupProps.style,
+				...scroll.style
+			},
+			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);
+			})
+		}), /* @__PURE__ */ jsx(EdgeChevrons, {
+			edges: scroll.edges,
+			onNudge: scroll.nudge,
+			previousLabel,
+			nextLabel,
+			className: "rounded-(--radius-control) bg-surface-1"
+		})]
+	});
+});
+//#endregion
+export { SegmentedControl };

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

@@ -0,0 +1,129 @@
+import { StatusBarProminence } from "./_status-bar.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#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;
+  /**
+   * Make the item a real control: a `<button type="button">` with hover, press
+   * and keyboard-focus feedback. Defaults to `false`.
+   *
+   * A native button, not a `<div>` with an `onClick` — keyboard order is DOM
+   * order, `Enter` and `Space` work because the platform makes them work, and
+   * assistive technology is told what the thing is by the element rather than
+   * by a role attribute that has to be kept honest by hand.
+   *
+   * **An icon-only interactive item needs an `aria-label`.** There is no text
+   * for a screen reader to read and the icon is drawn `aria-hidden`, so without
+   * one the control announces as "button" and nothing else.
+   */
+  interactive?: boolean;
+  /**
+   * How loudly the item states itself. Defaults to `"quiet"`.
+   *
+   * `quiet` is a reading: tone ink on the bar's own ground. `filled` is a chip
+   * — a full-height tone wash behind tone ink — for the small set of states
+   * that earn a colour of their own: a warning, an error, the remote you are
+   * attached to. It is loud deliberately, and a bar of five filled items is a
+   * bar nobody reads.
+   */
+  prominence?: StatusBarProminence;
+  /**
+   * Replace the rendered element (Base UI render prop) — `render={<a href="…" />}`
+   * for a status item that navigates.
+   *
+   * Implies {@link StatusBarItemProps.interactive}: whatever is rendered gets
+   * the control chassis, because an element a reader can click has to look like
+   * one whether it is a button or a link.
+   */
+  render?: useRender.RenderProp;
+  /**
+   * Grey the control out, take it out of the pointer's reach and announce it as
+   * disabled. Defaults to `false`. Ignored by a static item, which is a reading
+   * and not a control.
+   *
+   * Honoured whatever {@link StatusBarItemProps.render} renders, but by two
+   * routes: the `disabled` attribute where it means something — the default
+   * `<button>`, a form control, a component that takes a `disabled` prop of its
+   * own — and `aria-disabled` plus `data-disabled` everywhere, which is all an
+   * anchor gets. There is no such thing as a disabled link; a link that should
+   * not be followed should not be a link, and this states the intent rather
+   * than pretending to enforce it.
+   */
+  disabled?: boolean;
+}
+interface StatusBarGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Start the trailing cluster at this group: pushes it and everything after it
+   * to the far edge, exactly as `push` does on a single item.
+   */
+  push?: boolean;
+  /**
+   * What the cluster is called. Optional, and worth giving whenever the members
+   * only make sense together — "Repository", "Connection" — because a `group`
+   * with no name is a landmark a screen reader reads straight past.
+   */
+  "aria-label"?: string;
+}
+/**
+ * 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`, and the
+ * bar clips rather than wrapping — one rung of the frame, always, whatever it
+ * is asked to hold.
+ *
+ * Items come in two kinds and the difference is deliberate. A plain
+ * `StatusBar.Item` is a **reading**: a `<div>`, inert by construction, with no
+ * hover, no focus and nothing to click — which is what most of a status bar is.
+ * `interactive` (or a `render`) makes one a **control**, and only then does it
+ * grow the button chassis, the full-height hover fill and the inset focus ring.
+ * `StatusBar.Group` fuses adjacent items into one segmented control.
+ *
+ * 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"`. A bar of readings renders on the server
+ * and ships no JavaScript at all; the interactive item is the one part that
+ * crosses the boundary, and it crosses it alone (`./_status-bar-item.tsx`).
+ *
+ * @example
+ * <StatusBar>
+ *   <StatusBar.Item icon={Plug} tone="ok">Art-Net connected</StatusBar.Item>
+ *   <StatusBar.Item push>512 channels</StatusBar.Item>
+ * </StatusBar>
+ * @example
+ * // The VS Code shape: a clickable cluster left, a loud state right.
+ * <StatusBar>
+ *   <StatusBar.Group aria-label="Repository">
+ *     <StatusBar.Item interactive icon={GitBranch}>main</StatusBar.Item>
+ *     <StatusBar.Item interactive icon={ArrowUp}>2</StatusBar.Item>
+ *   </StatusBar.Group>
+ *   <StatusBar.Item push interactive prominence="filled" tone="danger">3 faults</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<HTMLElement>>;
+  Group: React.ForwardRefExoticComponent<StatusBarGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { StatusBar, StatusBarGroupProps, StatusBarItemProps, type StatusBarProminence, StatusBarProps, StatusBarTone };

package/dist/chrome/status-bar.js

@@ -0,0 +1,120 @@
+import { cn } from "../lib/cn.js";
+import { STATUS_BAR_GROUP_CLASSES, statusBarItemClasses } from "./_status-bar.js";
+import { StatusBarInteractiveItem } from "./_status-bar-item.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/status-bar.tsx
+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) overflow-x-clip 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 — or, given
+* `interactive`, one control in it.
+*/
+const StatusBarItem = React.forwardRef(function StatusBarItem({ className, tone = "neutral", push = false, icon: Icon, interactive = false, prominence = "quiet", render, disabled, children, ...elementProps }, ref) {
+	if (interactive || render !== void 0) return /* @__PURE__ */ jsx(StatusBarInteractiveItem, {
+		ref,
+		tone,
+		prominence,
+		className,
+		push,
+		icon: Icon,
+		render,
+		disabled,
+		elementProps,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "status-bar-item",
+		className: cn(statusBarItemClasses({
+			tone,
+			prominence
+		}), 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]
+	});
+});
+/**
+* Items that belong to each other, one pixel apart.
+*
+* The bar spaces its readings at `--cue-space-4` because they are unrelated
+* facts. A branch name and its ahead/behind count are not unrelated facts; they
+* are one control that happens to have two halves, and the gap between them is
+* what says so. This is VS Code's `compact` mechanic — the seam collapses, and
+* hovering either half grounds both while the half under the cursor goes one
+* rung further — expressed as a wrapper rather than as an id-reference between
+* two items, because a design system's items do not have ids to point at.
+*
+* A `role="group"` rather than nothing: the members are announced as a set, and
+* the DOM order they are announced in is the order they are read in. Give it an
+* `aria-label` when the members only make sense together.
+*
+* @example
+* <StatusBar.Group aria-label="Repository">
+*   <StatusBar.Item interactive icon={GitBranch}>main</StatusBar.Item>
+*   <StatusBar.Item interactive icon={ArrowUp}>2</StatusBar.Item>
+* </StatusBar.Group>
+*/
+const StatusBarGroup = React.forwardRef(function StatusBarGroup({ className, push = false, role = "group", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "status-bar-group",
+		role,
+		className: cn(STATUS_BAR_GROUP_CLASSES, push ? "ml-auto" : void 0, className),
+		...elementProps
+	});
+});
+/**
+* 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`, and the
+* bar clips rather than wrapping — one rung of the frame, always, whatever it
+* is asked to hold.
+*
+* Items come in two kinds and the difference is deliberate. A plain
+* `StatusBar.Item` is a **reading**: a `<div>`, inert by construction, with no
+* hover, no focus and nothing to click — which is what most of a status bar is.
+* `interactive` (or a `render`) makes one a **control**, and only then does it
+* grow the button chassis, the full-height hover fill and the inset focus ring.
+* `StatusBar.Group` fuses adjacent items into one segmented control.
+*
+* 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"`. A bar of readings renders on the server
+* and ships no JavaScript at all; the interactive item is the one part that
+* crosses the boundary, and it crosses it alone (`./_status-bar-item.tsx`).
+*
+* @example
+* <StatusBar>
+*   <StatusBar.Item icon={Plug} tone="ok">Art-Net connected</StatusBar.Item>
+*   <StatusBar.Item push>512 channels</StatusBar.Item>
+* </StatusBar>
+* @example
+* // The VS Code shape: a clickable cluster left, a loud state right.
+* <StatusBar>
+*   <StatusBar.Group aria-label="Repository">
+*     <StatusBar.Item interactive icon={GitBranch}>main</StatusBar.Item>
+*     <StatusBar.Item interactive icon={ArrowUp}>2</StatusBar.Item>
+*   </StatusBar.Group>
+*   <StatusBar.Item push interactive prominence="filled" tone="danger">3 faults</StatusBar.Item>
+* </StatusBar>
+*/
+const StatusBar = Object.assign(StatusBarRoot, {
+	Item: StatusBarItem,
+	Group: StatusBarGroup
+});
+//#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,132 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.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
+	});
+});
+/**
+* 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 scroll = useEdgeScroll();
+	React.useEffect(() => {
+		scroll.ref.current?.querySelector("[data-slot='tabs-tab'][data-active]")?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [activeValue]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tabs-scroll-frame",
+		className: cn("relative min-w-0", containerClassName),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroll.ref,
+			"data-slot": "tabs-scroller",
+			className: EDGE_SCROLLER_CLASSES,
+			style: scroll.style,
+			children: /* @__PURE__ */ jsx(TabsList, {
+				ref,
+				className: cn("w-max", className),
+				...listProps,
+				children
+			})
+		}), /* @__PURE__ */ jsx(EdgeChevrons, {
+			edges: scroll.edges,
+			onNudge: scroll.nudge,
+			previousLabel: "Show earlier tabs",
+			nextLabel: "Show later tabs",
+			className: "bg-surface-2"
+		})]
+	});
+});
+/**
+* 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 };