@cueplusplus/ui 0.1.0

package/dist/chrome/_glyphs.js

@@ -0,0 +1,101 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/_glyphs.tsx
+/**
+* Shared chrome glyphs.
+*
+* Drawn inline rather than pulled from `lucide-react` for the same reason as
+* `overlays/_glyphs.tsx`: a disclosure triangle and a pair of chevrons should
+* not put an icon dependency on the render path of every collapsible section,
+* and hand-set strokes stay hairline-thin at the 8–12px sizes console density
+* asks for. `currentColor` everywhere — the tone comes from the parent.
+*
+* @internal Not part of the public API.
+*/
+/** A right-pointing chevron. Rotate it 90° to point down. */
+function ChevronRightGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+/** A left-pointing chevron. */
+function ChevronLeftGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m10 3-5 5 5 5" })
+	});
+}
+/** A solid down caret — the "this opens a panel" mark on a navigation trigger. */
+function CaretDownGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M11.5 6.5h-7L8 11z" })
+	});
+}
+/** An open eye: the node is drawn normally. */
+function EyeGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "2"
+		})]
+	});
+}
+/** A dashed outline: the node is drawn, but ghosted and out of the way. */
+function GhostGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeDasharray: "2 2",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M4 13V6.5a4 4 0 0 1 8 0V13l-2-1.25L8 13l-2-1.25z" })
+	});
+}
+/** The eye with a stroke through it: the node is not drawn at all. */
+function EyeOffGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M6.2 4A6.5 6.5 0 0 1 8 3.5C12 3.5 14.5 8 14.5 8a12 12 0 0 1-2.3 2.7M9.8 12a6.5 6.5 0 0 1-1.8.5C4 12.5 1.5 8 1.5 8A12 12 0 0 1 4.4 4.8" }), /* @__PURE__ */ jsx("path", { d: "m2.5 2.5 11 11" })]
+	});
+}
+//#endregion
+export { CaretDownGlyph, ChevronLeftGlyph, ChevronRightGlyph, EyeGlyph, EyeOffGlyph, GhostGlyph };

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

@@ -0,0 +1,62 @@
+//#region src/chrome/_tabs-scroll.d.ts
+/**
+ * Pure geometry for {@link ScrollableTabsList} (see `./tabs.tsx`).
+ *
+ * A separate module from the component on purpose. These are plain functions
+ * over numbers — testable without a DOM, reusable by anything else that needs a
+ * scroll-edge affordance — and keeping them out of the component file means the
+ * component file can stay `"use client"` while this one has no directive at
+ * all. (It is also what makes React Fast Refresh work on the component: a file
+ * that exports both a component and non-component values gets a full reload
+ * instead of a hot swap.)
+ */
+/** How far the fade reaches in from an overflowing edge, in px. */
+declare const TAB_FADE_PX = 24;
+/** Which edges of a horizontal scroller still hide content. */
+interface ScrollEdges {
+  /** More content exists before the visible window (to the left in LTR). */
+  start: boolean;
+  /** More content exists after the visible window (to the right in LTR). */
+  end: boolean;
+}
+/**
+ * Work out which edges of a horizontal scroller still hide content.
+ *
+ * The 1px tolerances are load-bearing, not defensive padding: fractional layout
+ * widths leave `scrollLeft` a sub-pixel short of `scrollWidth - clientWidth` at
+ * a hard scroll end, so an exact comparison pins the end indicator ON forever
+ * with nothing left to reveal — at which point it means the opposite of what it
+ * says. The `max <= 1` guard is the same story for a strip that very nearly
+ * fits.
+ *
+ * @param scrollLeft The scroller's current horizontal offset.
+ * @param scrollWidth The full width of the scrolled content.
+ * @param clientWidth The width of the visible window.
+ * @returns Which edges still have content beyond them.
+ * @example
+ * computeScrollEdges(0, 600, 200); // { start: false, end: true }
+ */
+declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollEdges;
+/**
+ * A CSS mask that fades a strip's CONTENT out at its overflowing edges.
+ *
+ * Deliberately a mask rather than the usual gradient overlay. A tab strip sits
+ * on whatever surface the caller put it on — a panel, a toolbar, the page — so
+ * an overlay would have to re-create that background as an opaque colour and
+ * would drift the moment the theme changed. Masking fades the content itself
+ * and lets whatever is behind show through, so it matches by construction in
+ * all eight themes and both modes.
+ *
+ * This softens the cut; it is NOT the whole affordance. What sits at an
+ * overflowing edge is often the gap between two tabs, and fading empty space is
+ * invisible — hence the chevron buttons in the component.
+ *
+ * @param edges Which edges overflow, from {@link computeScrollEdges}.
+ * @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+ * @returns A `linear-gradient(...)` value, or `undefined` when nothing
+ * overflows — no mask property at all, rather than a fully opaque one, so the
+ * common case creates no compositing layer.
+ */
+declare function edgeFadeMask(edges: ScrollEdges, fadePx?: number): string | undefined;
+//#endregion
+export { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/_tabs-scroll.js

@@ -0,0 +1,68 @@
+//#region src/chrome/_tabs-scroll.ts
+/**
+* Pure geometry for {@link ScrollableTabsList} (see `./tabs.tsx`).
+*
+* A separate module from the component on purpose. These are plain functions
+* over numbers — testable without a DOM, reusable by anything else that needs a
+* scroll-edge affordance — and keeping them out of the component file means the
+* component file can stay `"use client"` while this one has no directive at
+* all. (It is also what makes React Fast Refresh work on the component: a file
+* that exports both a component and non-component values gets a full reload
+* instead of a hot swap.)
+*/
+/** How far the fade reaches in from an overflowing edge, in px. */
+const TAB_FADE_PX = 24;
+/**
+* Work out which edges of a horizontal scroller still hide content.
+*
+* The 1px tolerances are load-bearing, not defensive padding: fractional layout
+* widths leave `scrollLeft` a sub-pixel short of `scrollWidth - clientWidth` at
+* a hard scroll end, so an exact comparison pins the end indicator ON forever
+* with nothing left to reveal — at which point it means the opposite of what it
+* says. The `max <= 1` guard is the same story for a strip that very nearly
+* fits.
+*
+* @param scrollLeft The scroller's current horizontal offset.
+* @param scrollWidth The full width of the scrolled content.
+* @param clientWidth The width of the visible window.
+* @returns Which edges still have content beyond them.
+* @example
+* computeScrollEdges(0, 600, 200); // { start: false, end: true }
+*/
+function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
+	const max = scrollWidth - clientWidth;
+	if (max <= 1) return {
+		start: false,
+		end: false
+	};
+	return {
+		start: scrollLeft > 1,
+		end: scrollLeft < max - 1
+	};
+}
+/**
+* A CSS mask that fades a strip's CONTENT out at its overflowing edges.
+*
+* Deliberately a mask rather than the usual gradient overlay. A tab strip sits
+* on whatever surface the caller put it on — a panel, a toolbar, the page — so
+* an overlay would have to re-create that background as an opaque colour and
+* would drift the moment the theme changed. Masking fades the content itself
+* and lets whatever is behind show through, so it matches by construction in
+* all eight themes and both modes.
+*
+* This softens the cut; it is NOT the whole affordance. What sits at an
+* overflowing edge is often the gap between two tabs, and fading empty space is
+* invisible — hence the chevron buttons in the component.
+*
+* @param edges Which edges overflow, from {@link computeScrollEdges}.
+* @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+* @returns A `linear-gradient(...)` value, or `undefined` when nothing
+* overflows — no mask property at all, rather than a fully opaque one, so the
+* common case creates no compositing layer.
+*/
+function edgeFadeMask(edges, fadePx = 24) {
+	if (!edges.start && !edges.end) return void 0;
+	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${fadePx}px` : "black 0px"}, ${edges.end ? `black calc(100% - ${fadePx}px), transparent 100%` : "black 100%"})`;
+}
+//#endregion
+export { TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/_tree.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+//#region src/chrome/_tree.d.ts
+/**
+ * The pure half of {@link Tree} (see `./tree.tsx`).
+ *
+ * A tree is two separate problems: working out which rows are visible and how
+ * they connect, and painting them. The first one is plain data — no DOM, no
+ * refs, no React — so it lives here where it can be unit-tested directly and
+ * reused by anything else that needs an outline (a virtualized variant, in
+ * particular, needs exactly this list and nothing else).
+ */
+/** One node of the outline. */
+interface TreeItem {
+  /** Stable identity: what selection, expansion and focus are keyed on. */
+  id: string;
+  /** What the row reads as. Kept a node so a call site can mark part of it up. */
+  label: React.ReactNode;
+  /** Optional leading icon component, drawn `aria-hidden`. */
+  icon?: React.ElementType;
+  /** Nested nodes. An empty array still makes the row a parent (an empty folder). */
+  children?: readonly TreeItem[];
+  /** Trailing slot: a count, a `Chip`, a `StatusDot`. */
+  badge?: React.ReactNode;
+  /** Grey the row out; it stays reachable by keyboard but cannot be selected. */
+  disabled?: boolean;
+}
+/**
+ * One column of the indent gutter.
+ *
+ * - `line` — an ancestor at this depth still has siblings below, so its
+ *   through-line continues past this row.
+ * - `space` — that ancestor was the last of its set; the column is now blank.
+ * - `branch` / `last` — the row's own elbow, forked or terminal.
+ */
+type TreeGuide = "line" | "space" | "branch" | "last";
+/** The box-drawing column each guide paints, one mono character wide. */
+declare const TREE_GUIDE_GLYPHS: Record<TreeGuide, string>;
+/** A visible row: the item plus everything the DOM row needs to know about it. */
+interface TreeRow {
+  /** The node this row draws. */
+  item: TreeItem;
+  /** Depth from the roots; `0` for a root. */
+  level: number;
+  /** The id of the row's parent, or `null` at the root. */
+  parentId: string | null;
+  /** Whether the node declares children at all — what `aria-expanded` hangs on. */
+  hasChildren: boolean;
+  /** Whether those children are currently shown. */
+  expanded: boolean;
+  /** 1-based position among its siblings (`aria-posinset`). */
+  position: number;
+  /** How many siblings there are in total (`aria-setsize`). */
+  setSize: number;
+  /** One column per level: ancestor through-lines, then this row's elbow. */
+  guides: TreeGuide[];
+}
+/**
+ * Walk the tree depth-first and return only the rows the expansion state
+ * reveals.
+ *
+ * The result is deliberately flat. A flat list is what the ARIA tree pattern
+ * wants anyway — `aria-level` / `aria-posinset` / `aria-setsize` carry the
+ * structure, no `role="group"` wrappers needed — and it is what makes roving
+ * tabindex ("the next visible row") a single array index instead of a recursive
+ * search.
+ *
+ * @param items The roots, in display order.
+ * @param expanded Ids whose children are currently shown.
+ * @returns Visible rows, top to bottom.
+ * @example
+ * flattenTree(items, new Set(["house"])).map((row) => row.item.id);
+ */
+declare function flattenTree(items: readonly TreeItem[], expanded: ReadonlySet<string>): TreeRow[];
+//#endregion
+export { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree };

package/dist/chrome/_tree.js

@@ -0,0 +1,49 @@
+//#region src/chrome/_tree.ts
+/** The box-drawing column each guide paints, one mono character wide. */
+const TREE_GUIDE_GLYPHS = {
+	line: "│",
+	space: " ",
+	branch: "├",
+	last: "└"
+};
+/**
+* Walk the tree depth-first and return only the rows the expansion state
+* reveals.
+*
+* The result is deliberately flat. A flat list is what the ARIA tree pattern
+* wants anyway — `aria-level` / `aria-posinset` / `aria-setsize` carry the
+* structure, no `role="group"` wrappers needed — and it is what makes roving
+* tabindex ("the next visible row") a single array index instead of a recursive
+* search.
+*
+* @param items The roots, in display order.
+* @param expanded Ids whose children are currently shown.
+* @returns Visible rows, top to bottom.
+* @example
+* flattenTree(items, new Set(["house"])).map((row) => row.item.id);
+*/
+function flattenTree(items, expanded) {
+	const rows = [];
+	const walk = (siblings, level, parentId, ancestorLines) => {
+		siblings.forEach((item, index) => {
+			const isLast = index === siblings.length - 1;
+			const hasChildren = item.children !== void 0;
+			const isExpanded = hasChildren && expanded.has(item.id);
+			rows.push({
+				item,
+				level,
+				parentId,
+				hasChildren,
+				expanded: isExpanded,
+				position: index + 1,
+				setSize: siblings.length,
+				guides: level === 0 ? [] : [...ancestorLines.slice(1).map((continues) => continues ? "line" : "space"), isLast ? "last" : "branch"]
+			});
+			if (isExpanded && item.children !== void 0) walk(item.children, level + 1, item.id, [...ancestorLines, !isLast]);
+		});
+	};
+	walk(items, 0, null, []);
+	return rows;
+}
+//#endregion
+export { TREE_GUIDE_GLYPHS, flattenTree };

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

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

package/dist/chrome/empty-state.js

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

package/dist/chrome/eyebrow.d.ts

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

package/dist/chrome/eyebrow.js

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

package/dist/chrome/index.d.ts

@@ -0,0 +1,17 @@
+import { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree } from "./_tree.js";
+import { EmptyState, EmptyStateProps } from "./empty-state.js";
+import { Eyebrow, EyebrowProps } from "./eyebrow.js";
+import { NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps } from "./navigation-menu.js";
+import { PageShell, PageShellProps, PageWidth } from "./page-shell.js";
+import { Panel, PanelHeader, PanelHeaderProps, PanelProps } from "./panel.js";
+import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./row.js";
+import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./scroll-area.js";
+import { SectionHeader, SectionHeaderProps } from "./section-header.js";
+import { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize } from "./segmented-control.js";
+import { StatusBar, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./status-bar.js";
+import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./tabs.js";
+import { TitleBar, TitleBarProps } from "./title-bar.js";
+import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./tree.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./toolbar.js";
+export { EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarItemProps, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/index.js

@@ -0,0 +1,17 @@
+import { TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { TREE_GUIDE_GLYPHS, flattenTree } from "./_tree.js";
+import { EmptyState } from "./empty-state.js";
+import { Eyebrow } from "./eyebrow.js";
+import { NavigationMenu } from "./navigation-menu.js";
+import { PageShell } from "./page-shell.js";
+import { Panel, PanelHeader } from "./panel.js";
+import { Row, SeamList, rowVariants } from "./row.js";
+import { ScrollArea } from "./scroll-area.js";
+import { SectionHeader } from "./section-header.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { StatusBar } from "./status-bar.js";
+import { ScrollableTabsList, Tabs } from "./tabs.js";
+import { TitleBar } from "./title-bar.js";
+import { Tree, TreeVisibilityToggle } from "./tree.js";
+import { Toolbar } from "./toolbar.js";
+export { EmptyState, Eyebrow, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/navigation-menu.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+//#region src/chrome/navigation-menu.d.ts
+interface NavigationMenuRootProps extends Omit<NavigationMenu.Root.Props, "className"> {
+  /** Extra classes for the `<nav>`. */
+  className?: string;
+}
+interface NavigationMenuListProps extends Omit<NavigationMenu.List.Props, "className"> {
+  /** Extra classes for the strip of items. */
+  className?: string;
+}
+interface NavigationMenuItemProps extends NavigationMenu.Item.Props {}
+interface NavigationMenuTriggerProps extends Omit<NavigationMenu.Trigger.Props, "className"> {
+  /** Extra classes for the trigger. */
+  className?: string;
+  /** Draw the caret that says a panel opens below. Defaults to `true`. */
+  caret?: boolean;
+}
+interface NavigationMenuContentProps extends Omit<NavigationMenu.Content.Props, "className"> {
+  /** Extra classes for the panel body. */
+  className?: string;
+}
+interface NavigationMenuLinkProps extends Omit<NavigationMenu.Link.Props, "className"> {
+  /** Extra classes for the link row. */
+  className?: string;
+  /** Supporting line under the label. */
+  description?: React.ReactNode;
+  /** Mark this link as the current destination. */
+  active?: boolean;
+}
+interface NavigationMenuViewportProps extends Omit<NavigationMenu.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the positioner that places the popup. */
+  positionerClassName?: string;
+  /** Gap in px between the strip and the popup. Defaults to `4`. */
+  sideOffset?: NavigationMenu.Positioner.Props["sideOffset"];
+  /** Alignment along the bottom of the active trigger. Defaults to `"start"`. */
+  align?: NavigationMenu.Positioner.Props["align"];
+}
+/**
+ * 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>
+ */
+declare const NavigationMenu$1: {
+  Root: React.ForwardRefExoticComponent<Omit<NavigationMenuRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
+  List: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+  Item: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+  Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Link: React.ForwardRefExoticComponent<Omit<NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+  Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { NavigationMenu$1 as NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps };