@cueplusplus/ui 0.13.0

package/dist/chrome/footer.d.ts

@@ -0,0 +1,88 @@
+import { ContainerWidth } from "../layout/container.js";
+import * as React from "react";
+//#region src/chrome/footer.d.ts
+interface FooterProps extends React.ComponentPropsWithoutRef<"footer"> {
+  /**
+   * Which measure the footer's column takes. Defaults to `"broad"`.
+   *
+   * The same four rungs `Container` and `PageShell` offer, so a footer lines up
+   * with the page above it by naming the same width — `broad` rather than
+   * `narrow` by default because a footer is usually the widest thing on a page,
+   * and a row of columns inside a 42rem reading measure is four squeezed lists.
+   */
+  width?: ContainerWidth;
+  /**
+   * The fine print, under a hairline of its own: copyright, a licence, a build
+   * number.
+   *
+   * A slot rather than a component, because that row is a sentence and a couple
+   * of links — but it is a *separated* sentence, and hand-rolling the rule and
+   * the space above it in every app is exactly the kind of repetition this
+   * component exists to end.
+   */
+  meta?: React.ReactNode;
+  /** Extra classes for the centred column inside the landmark. */
+  columnClassName?: string;
+  /** The footer's body — normally a `Grid` of `Stack`s of `Link`s. */
+  children?: React.ReactNode;
+}
+/**
+ * The `contentinfo` landmark at the bottom of a document: a hairline, a
+ * measure, and room for whatever a page ends with.
+ *
+ * Deliberately **not** a link-list component. A "complex footer" in this system
+ * is `Grid` + `Stack` + `Link` inside this one — components that already exist
+ * and already carry the density ladder — and a `Grid` with `minItemWidth` fills
+ * the row with as many columns as fit, so the footer is responsive without a
+ * breakpoint and without a prop for how many columns to draw. What is left over
+ * is what a footer actually needs and nothing else has: the landmark, the rule
+ * that separates it from the page, the measure that lines it up with the page,
+ * and the second rule above the fine print.
+ *
+ * The band is full-bleed and the column inside it is centred, which is why the
+ * hairline runs edge to edge while the links stop at the measure. The column is
+ * set in the bar's register — mono, at the UI size — because a footer is
+ * furniture. It paints no ground of its own: a footer is the end of the page,
+ * not a bar, and the seam is the hairline. Give it `className="bg-surface-1"`
+ * where a distinct band is wanted.
+ *
+ * Inside `AppShell` this is a child of `AppShell.Scroller`, at the end of the
+ * content column — so it scrolls with the page and its full bleed is the
+ * content column's width, not the window's. A footer placed *beside* the
+ * navigation column instead (after `AppShell.Body`) runs under the navigation
+ * and reads as chrome it is not. It coexists with `StatusBar`, which is the
+ * opposite object: a strip of the frame, always on screen, never scrolled.
+ *
+ * Under the skin this **is** `Band`'s recipe — `separation="rule"`, spent
+ * through `bandClasses` rather than through `<Band>` itself, because `Band`
+ * renders a `<section>` and this has to render the `<footer>` that makes it the
+ * `contentinfo` landmark. The two dimensions that recipe carries are the
+ * rhythm and the rule, and both are the style axis's now, the same as any other
+ * band: see `separation`'s table on `Band` for what each `[data-style]` set
+ * makes them paint. With no set active nothing changes from what this component
+ * always rendered. It does **not** reach `Band`'s other two style-owned
+ * spends — the ground and the reading measure — because `separation` is the
+ * literal `"rule"` here and `width` is a `ContainerWidth`; `_band.ts`'s
+ * docblock says why that is a fact about the published manifest and not only
+ * about the markup.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Footer meta={<><span>© 2026 CUE++</span><Link href="/legal">Legal</Link></>}>
+ *   <Grid minItemWidth="12rem" gap={5}>
+ *     <Stack gap={2}>
+ *       <Eyebrow>Docs</Eyebrow>
+ *       <Link href="/docs">Getting started</Link>
+ *       <Link href="/docs/theming">Theming</Link>
+ *     </Stack>
+ *     <Stack gap={2}>
+ *       <Eyebrow>Surfaces</Eyebrow>
+ *       <Link href="/kitchen-sink">Kitchen sink</Link>
+ *     </Stack>
+ *   </Grid>
+ * </Footer>
+ */
+declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Footer, FooterProps };

package/dist/chrome/footer.js

@@ -0,0 +1,83 @@
+import { cn } from "../lib/cn.js";
+import { Container } from "../layout/container.js";
+import { bandClasses } from "./_band.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/footer.tsx
+/**
+* The `contentinfo` landmark at the bottom of a document: a hairline, a
+* measure, and room for whatever a page ends with.
+*
+* Deliberately **not** a link-list component. A "complex footer" in this system
+* is `Grid` + `Stack` + `Link` inside this one — components that already exist
+* and already carry the density ladder — and a `Grid` with `minItemWidth` fills
+* the row with as many columns as fit, so the footer is responsive without a
+* breakpoint and without a prop for how many columns to draw. What is left over
+* is what a footer actually needs and nothing else has: the landmark, the rule
+* that separates it from the page, the measure that lines it up with the page,
+* and the second rule above the fine print.
+*
+* The band is full-bleed and the column inside it is centred, which is why the
+* hairline runs edge to edge while the links stop at the measure. The column is
+* set in the bar's register — mono, at the UI size — because a footer is
+* furniture. It paints no ground of its own: a footer is the end of the page,
+* not a bar, and the seam is the hairline. Give it `className="bg-surface-1"`
+* where a distinct band is wanted.
+*
+* Inside `AppShell` this is a child of `AppShell.Scroller`, at the end of the
+* content column — so it scrolls with the page and its full bleed is the
+* content column's width, not the window's. A footer placed *beside* the
+* navigation column instead (after `AppShell.Body`) runs under the navigation
+* and reads as chrome it is not. It coexists with `StatusBar`, which is the
+* opposite object: a strip of the frame, always on screen, never scrolled.
+*
+* Under the skin this **is** `Band`'s recipe — `separation="rule"`, spent
+* through `bandClasses` rather than through `<Band>` itself, because `Band`
+* renders a `<section>` and this has to render the `<footer>` that makes it the
+* `contentinfo` landmark. The two dimensions that recipe carries are the
+* rhythm and the rule, and both are the style axis's now, the same as any other
+* band: see `separation`'s table on `Band` for what each `[data-style]` set
+* makes them paint. With no set active nothing changes from what this component
+* always rendered. It does **not** reach `Band`'s other two style-owned
+* spends — the ground and the reading measure — because `separation` is the
+* literal `"rule"` here and `width` is a `ContainerWidth`; `_band.ts`'s
+* docblock says why that is a fact about the published manifest and not only
+* about the markup.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Footer meta={<><span>© 2026 CUE++</span><Link href="/legal">Legal</Link></>}>
+*   <Grid minItemWidth="12rem" gap={5}>
+*     <Stack gap={2}>
+*       <Eyebrow>Docs</Eyebrow>
+*       <Link href="/docs">Getting started</Link>
+*       <Link href="/docs/theming">Theming</Link>
+*     </Stack>
+*     <Stack gap={2}>
+*       <Eyebrow>Surfaces</Eyebrow>
+*       <Link href="/kitchen-sink">Kitchen sink</Link>
+*     </Stack>
+*   </Grid>
+* </Footer>
+*/
+const Footer = React.forwardRef(function Footer({ className, columnClassName, width = "broad", meta, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("footer", {
+		ref,
+		"data-slot": "footer",
+		"data-separation": "rule",
+		className: cn(bandClasses("rule"), "border-border", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsxs(Container, {
+			width,
+			className: cn("flex flex-col gap-(--cue-space-6) font-mono text-(length:--cue-text-ui)", columnClassName),
+			children: [children, meta === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "footer-meta",
+				className: "flex flex-wrap items-center justify-between gap-(--cue-space-3) border-t border-border pt-(--cue-space-5) font-mono text-(length:--cue-text-label) text-fg-subtle",
+				children: meta
+			})]
+		})
+	});
+});
+//#endregion
+export { Footer };

package/dist/chrome/index.d.ts

@@ -0,0 +1,24 @@
+import { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { BarOverflow } from "./_edge-scroller.js";
+import { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree } from "./_tree.js";
+import { AppBar, AppBarActionsProps, AppBarBrandProps, AppBarLinkProps, AppBarNavProps, AppBarRegister, AppBarRootProps, AppBarSeparatorProps } from "./app-bar.js";
+import { AppShell, AppShellAsideProps, AppShellBarProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./app-shell.js";
+import { Band, BandProps, BandSeparation, BandWidth } from "./band.js";
+import { EmptyState, EmptyStateProps } from "./empty-state.js";
+import { Eyebrow, EyebrowProps } from "./eyebrow.js";
+import { Footer, FooterProps } from "./footer.js";
+import { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps } from "./inspector.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 { StatusBarProminence } from "./_status-bar.js";
+import { StatusBar, StatusBarGroupProps, 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 { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, 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 StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, 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,22 @@
+import { TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { TREE_GUIDE_GLYPHS, flattenTree } from "./_tree.js";
+import { AppBar } from "./app-bar.js";
+import { AppShell } from "./app-shell.js";
+import { Band } from "./band.js";
+import { EmptyState } from "./empty-state.js";
+import { Eyebrow } from "./eyebrow.js";
+import { Footer } from "./footer.js";
+import { SectionHeader } from "./section-header.js";
+import { Inspector } from "./inspector.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 { 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 { AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Inspector, 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/inspector.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+//#region src/chrome/inspector.d.ts
+interface InspectorRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The sections, then the footer. */
+  children?: React.ReactNode;
+}
+interface InspectorSectionProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The section's title — "Variants", "Stage". Drawn by a `SectionHeader` and read as the group's name. */
+  label: string;
+  /** The section's rows. */
+  children?: React.ReactNode;
+}
+interface InspectorRowProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * What the control sets — "Size", "Theme". Drawn before it, and read as its
+   * name: a `<label>` for it when `htmlFor` is given, and otherwise laid on
+   * the control as `aria-label`, unless the control already names itself.
+   */
+  label: string;
+  /** The control's `id`, when it takes one: the label then becomes a `<label>` for it. */
+  htmlFor?: string;
+  /** The control — one element, any of the library's own. A row names a single control. */
+  children?: React.ReactNode;
+}
+interface InspectorFooterProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** A quiet line on the left: which preset this is, or that none matches. */
+  note?: React.ReactNode;
+  /** The footer's one action, on the right — by convention a small `Button`. */
+  action?: React.ReactNode;
+}
+/**
+ * The shape a settings panel, a properties sidebar and a wrench menu share:
+ * titled sections of label-and-control rows, with a footer.
+ *
+ * Layout and nothing else — the controls are the library's own. A section is
+ * a group headed by a `SectionHeader`; a row is a label then its control, one
+ * column in a narrow container and two from 18rem; the footer holds a quiet
+ * note and one action.
+ *
+ * **Static markup — no hooks, no `"use client"`**, so a server page can draw
+ * one. Labels are strings for the same reason: a row with no `htmlFor` lays its
+ * label on its control as `aria-label`, rather than pointing at an id nobody
+ * has generated. The row itself carries no role.
+ *
+ * @example
+ * <Inspector.Root>
+ *   <Inspector.Section label="Variants">
+ *     <Inspector.Row label="Size"><SegmentedControl items={sizes} /></Inspector.Row>
+ *     <Inspector.Row label="Label" htmlFor="label"><Input id="label" /></Inspector.Row>
+ *   </Inspector.Section>
+ *   <Inspector.Footer note="preset · button-hero" action={<Button size="sm">Reset</Button>} />
+ * </Inspector.Root>
+ */
+declare const Inspector: {
+  Root: React.ForwardRefExoticComponent<InspectorRootProps & React.RefAttributes<HTMLDivElement>>;
+  Section: React.ForwardRefExoticComponent<InspectorSectionProps & React.RefAttributes<HTMLDivElement>>;
+  Row: React.ForwardRefExoticComponent<InspectorRowProps & React.RefAttributes<HTMLDivElement>>;
+  Footer: React.ForwardRefExoticComponent<InspectorFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Inspector, InspectorFooterProps, InspectorRootProps, InspectorRowProps, InspectorSectionProps };

package/dist/chrome/inspector.js

@@ -0,0 +1,121 @@
+import { cn } from "../lib/cn.js";
+import { SectionHeader } from "./section-header.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/inspector.tsx
+/** A size container, so a row's two columns depend on the inspector's width and not the page's. */
+const ROOT_CLASS = "@container flex min-w-0 flex-col";
+const SECTION_CLASS = "flex flex-col gap-(--cue-space-3) border-t border-border px-(--cue-space-4) py-(--cue-space-3) first:border-t-0";
+/** Static literals: Tailwind scans source text, not computed strings. */
+const ROW_CLASS = "grid grid-cols-1 gap-(--cue-space-2) @min-[18rem]:grid-cols-[6rem_minmax(0,1fr)] @min-[18rem]:items-center";
+const LABEL_CLASS = "text-(length:--cue-text-ui) text-fg-muted";
+const FOOTER_CLASS = "flex items-center justify-between gap-(--cue-space-3) border-t border-border px-(--cue-space-4) py-(--cue-space-3)";
+const NOTE_CLASS = "min-w-0 truncate font-mono text-(length:--cue-text-label) text-fg-subtle";
+/** `ms-auto` so a lone action still sits at the end edge: `space-between` alone puts a single flex child at the start. */
+const FOOTER_ACTION_CLASS = "ms-auto";
+/**
+* A row's words, laid on its control as the control's own name.
+*
+* A row with no `htmlFor` has no id to point a `<label>` at, and generating one
+* would take `useId` — a hook, and with it this module's place in a server
+* component. So the control is cloned with `aria-label={label}`: cloning is not
+* a hook, which is why `Bento.Tile` clones its `render` link the same way. A
+* control that already names itself keeps its name. Anything that is not one
+* element — text, a list, a fragment — is left as it is, because an
+* `aria-label` on a fragment is an attribute on nothing.
+*
+* The row itself carries no role. A `SegmentedControl` is already a group, and
+* a row that named itself a group with the same words would be two groups with
+* one name, announced twice.
+*/
+function nameControl(control, label) {
+	if (!React.isValidElement(control) || control.type === React.Fragment) return control;
+	if (control.props["aria-label"] !== void 0 || control.props["aria-labelledby"] !== void 0) return control;
+	return React.cloneElement(control, { "aria-label": label });
+}
+/**
+* The shape a settings panel, a properties sidebar and a wrench menu share:
+* titled sections of label-and-control rows, with a footer.
+*
+* Layout and nothing else — the controls are the library's own. A section is
+* a group headed by a `SectionHeader`; a row is a label then its control, one
+* column in a narrow container and two from 18rem; the footer holds a quiet
+* note and one action.
+*
+* **Static markup — no hooks, no `"use client"`**, so a server page can draw
+* one. Labels are strings for the same reason: a row with no `htmlFor` lays its
+* label on its control as `aria-label`, rather than pointing at an id nobody
+* has generated. The row itself carries no role.
+*
+* @example
+* <Inspector.Root>
+*   <Inspector.Section label="Variants">
+*     <Inspector.Row label="Size"><SegmentedControl items={sizes} /></Inspector.Row>
+*     <Inspector.Row label="Label" htmlFor="label"><Input id="label" /></Inspector.Row>
+*   </Inspector.Section>
+*   <Inspector.Footer note="preset · button-hero" action={<Button size="sm">Reset</Button>} />
+* </Inspector.Root>
+*/
+const Inspector = {
+	Root: React.forwardRef(function InspectorRoot({ className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector",
+			className: cn(ROOT_CLASS, className),
+			children
+		});
+	}),
+	Section: React.forwardRef(function InspectorSection({ label, className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			role: "group",
+			"aria-label": label,
+			"data-slot": "inspector-section",
+			className: cn(SECTION_CLASS, className),
+			children: [/* @__PURE__ */ jsx(SectionHeader, { label }), children]
+		});
+	}),
+	Row: React.forwardRef(function InspectorRow({ label, htmlFor, className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector-row",
+			className: cn(ROW_CLASS, className),
+			children: [htmlFor === void 0 ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-row-label",
+				className: LABEL_CLASS,
+				children: label
+			}) : /* @__PURE__ */ jsx("label", {
+				"data-slot": "inspector-row-label",
+				htmlFor,
+				className: LABEL_CLASS,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "inspector-row-control",
+				className: "min-w-0",
+				children: htmlFor === void 0 ? nameControl(children, label) : children
+			})]
+		});
+	}),
+	Footer: React.forwardRef(function InspectorFooter({ note, action, className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "inspector-footer",
+			className: cn(FOOTER_CLASS, className),
+			children: [note === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-footer-note",
+				className: NOTE_CLASS,
+				children: note
+			}), action === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "inspector-footer-action",
+				className: FOOTER_ACTION_CLASS,
+				children: action
+			})]
+		});
+	})
+};
+//#endregion
+export { Inspector };

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

package/dist/chrome/navigation-menu.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { CaretDownGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.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-(--cue-leading-ui) 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" | "broad" | "full";
+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 };