@cueplusplus/ui 0.1.0 → 0.2.0

package/dist/chrome/app-shell.js

@@ -0,0 +1,167 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { MenuGlyph } from "./_glyphs.js";
+import { Sidebar } from "../layout/sidebar.js";
+import { CrossGlyph } from "../overlays/_glyphs.js";
+import { Drawer } from "../overlays/drawer.js";
+import { IconButton } from "../primitives/icon-button.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/app-shell.tsx
+const AppShellContext = React.createContext({
+	navOpen: false,
+	setNavOpen: () => {}
+});
+/**
+* The console frame: title bar, navigation, work area, status bar — one
+* viewport tall, with exactly one thing scrolling.
+*
+* Every console screen in this system is the same five parts in the same
+* arrangement, and the value here is not the parts (they already exist as
+* `TitleBar`, `Sidebar`, `Toolbar` and `StatusBar`) but the arithmetic between
+* them: `h-dvh` on the frame rather than `min-h-dvh`, an unbroken `min-h-0`
+* chain from the frame down to the scroller, `min-w-0` on the content column,
+* and a scroller that is not the document. Get one of those wrong and the
+* status bar leaves the screen or the navigation column gets shoved off the
+* side; the shell exists so no page has to get them right again.
+*
+* The bars are ordinary children — `TitleBar` and `StatusBar` are already
+* `shrink-0` and need no wrapper — so a shell reads as the page's outline.
+*
+* This is also the only component in the library with a viewport breakpoint:
+* below `md` the navigation column becomes a drawer and a trigger appears in
+* the bar. See {@link AppShellSidebar} for the ruling.
+*
+* @example
+* <AppShell.Root>
+*   <TitleBar center="main-stage.cue" actions={<Chip tone="ok">live</Chip>}>
+*     <AppShell.NavTrigger />
+*     <Eyebrow>CUE++</Eyebrow>
+*   </TitleBar>
+*   <AppShell.Body>
+*     <AppShell.Sidebar aria-label="Console" drawerTitle="Console">
+*       <Sidebar.Section label="Show">
+*         <Sidebar.Item icon={List} active>Cues</Sidebar.Item>
+*       </Sidebar.Section>
+*     </AppShell.Sidebar>
+*     <AppShell.Content>
+*       <Toolbar.Root aria-label="Playback"><Toolbar.Button icon={Play}>Go</Toolbar.Button></Toolbar.Root>
+*       <AppShell.Scroller><Panel>…</Panel></AppShell.Scroller>
+*     </AppShell.Content>
+*     <AppShell.Aside aria-label="Inspector">…</AppShell.Aside>
+*   </AppShell.Body>
+*   <StatusBar><StatusBar.Item tone="ok">Art-Net</StatusBar.Item></StatusBar>
+* </AppShell.Root>
+*/
+const AppShell = {
+	Root: React.forwardRef(function AppShellRoot({ className, navOpen: navOpenProp, defaultNavOpen = false, onNavOpenChange, ...elementProps }, ref) {
+		const [uncontrolled, setUncontrolled] = React.useState(defaultNavOpen);
+		const navOpen = navOpenProp ?? uncontrolled;
+		const setNavOpen = React.useCallback((open) => {
+			if (navOpenProp === void 0) setUncontrolled(open);
+			onNavOpenChange?.(open);
+		}, [navOpenProp, onNavOpenChange]);
+		const context = React.useMemo(() => ({
+			navOpen,
+			setNavOpen
+		}), [navOpen, setNavOpen]);
+		return /* @__PURE__ */ jsx(AppShellContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-slot": "app-shell",
+				className: cn("relative flex h-dvh flex-col overflow-clip bg-bg text-fg", className),
+				...elementProps
+			})
+		});
+	}),
+	Body: React.forwardRef(function AppShellBody({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "app-shell-body",
+			className: cn("flex min-h-0 min-w-0 flex-1", className),
+			...elementProps
+		});
+	}),
+	Sidebar: React.forwardRef(function AppShellSidebar({ className, drawerClassName, drawerTitle = "Navigation", closeLabel = "Close navigation", collapsible = true, landmark = "navigation", "aria-label": ariaLabel = "Navigation", children, ...sidebarProps }, ref) {
+		const { navOpen, setNavOpen } = React.useContext(AppShellContext);
+		const DrawerLandmark = landmark === "complementary" ? "aside" : "nav";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Sidebar.Root, {
+			ref,
+			"data-slot": "app-shell-sidebar",
+			"aria-label": ariaLabel,
+			landmark,
+			className: cn("hidden md:flex", className),
+			...sidebarProps,
+			children: [children, collapsible ? /* @__PURE__ */ jsx(Sidebar.Rail, {}) : null]
+		}), /* @__PURE__ */ jsx(Drawer.Root, {
+			swipeDirection: "left",
+			open: navOpen,
+			onOpenChange: setNavOpen,
+			children: /* @__PURE__ */ jsxs(Drawer.Content, {
+				grabHandle: false,
+				className: cn("w-[min(18rem,calc(100vw-3rem))]", drawerClassName),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center justify-between gap-(--cue-space-3)",
+					children: [/* @__PURE__ */ jsx(Drawer.Title, { children: drawerTitle }), /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": closeLabel,
+						icon: CrossGlyph,
+						size: "sm"
+					}) })]
+				}), /* @__PURE__ */ jsx(DrawerLandmark, {
+					"data-slot": "app-shell-nav-drawer",
+					"aria-label": ariaLabel,
+					className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto",
+					children
+				})]
+			})
+		})] });
+	}),
+	NavTrigger: React.forwardRef(function AppShellNavTrigger({ className, label = "Open navigation", icon = MenuGlyph, size = "md", onClick, ...elementProps }, ref) {
+		const { navOpen, setNavOpen } = React.useContext(AppShellContext);
+		return /* @__PURE__ */ jsx(IconButton, {
+			ref,
+			"data-slot": "app-shell-nav-trigger",
+			"aria-label": label,
+			"aria-expanded": navOpen,
+			icon,
+			size,
+			className: cn("shrink-0 md:hidden", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) setNavOpen(true);
+			},
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function AppShellContent({ className, main = true, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(main ? "main" : "div", {
+			ref,
+			"data-slot": "app-shell-content",
+			className: cn("flex min-h-0 min-w-0 flex-1 flex-col", className),
+			...elementProps
+		});
+	}),
+	Scroller: React.forwardRef(function AppShellScroller({ className, padded = true, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "app-shell-scroller",
+			className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", padded ? "p-(--cue-space-5)" : null, className),
+			...elementProps
+		});
+	}),
+	Aside: React.forwardRef(function AppShellAside({ className, width = "18rem", style, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("aside", {
+			ref,
+			"data-slot": "app-shell-aside",
+			className: cn("flex shrink-0 flex-col gap-(--cue-space-4) overflow-y-auto border-l border-border bg-surface-1 p-(--cue-space-4)", className),
+			style: {
+				width,
+				...style
+			},
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { AppShell };

package/dist/chrome/footer.d.ts

@@ -0,0 +1,75 @@
+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.
+ *
+ * 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,68 @@
+import { cn } from "../lib/cn.js";
+import { Container } from "../layout/container.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.
+*
+* 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",
+		className: cn("w-full border-t border-border", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsxs(Container, {
+			width,
+			className: cn("flex flex-col gap-(--cue-space-6) py-(--cue-space-7) 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

@@ -1,7 +1,11 @@
 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, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./app-shell.js";
 import { EmptyState, EmptyStateProps } from "./empty-state.js";
 import { Eyebrow, EyebrowProps } from "./eyebrow.js";
+import { Footer, FooterProps } from "./footer.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";
@@ -14,4 +18,4 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 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 };
+export { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, 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

@@ -1,7 +1,10 @@
 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 { EmptyState } from "./empty-state.js";
 import { Eyebrow } from "./eyebrow.js";
+import { Footer } from "./footer.js";
 import { NavigationMenu } from "./navigation-menu.js";
 import { PageShell } from "./page-shell.js";
 import { Panel, PanelHeader } from "./panel.js";
@@ -14,4 +17,4 @@ 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 };
+export { AppBar, AppShell, EmptyState, Eyebrow, Footer, 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.js

@@ -1,8 +1,8 @@
 "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 { CaretDownGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";

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

@@ -1,7 +1,7 @@
 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";
+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;

package/dist/chrome/page-shell.js

@@ -3,14 +3,24 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/page-shell.tsx
 /**
-* Two measures, not a scale. `narrow` (42rem) is a reading column — settings,
-* forms, prose. `wide` (54rem) is a working column — tables and panel grids.
-* Anything that wants the full viewport is not a page shell; it is a console
-* layout and should own its own frame.
+* Four measures, not a scale — and the same four `Container` offers.
+*
+* `narrow` (42rem) is a reading column: settings, forms, prose. `wide` (54rem)
+* is a working column: tables and panel grids. `broad` (84rem) is the
+* application measure — a two-column documentation page, a page whose body is a
+* device frame — and it exists because both of this repo's own hard-coded
+* `max-w-[84rem]` overrides were asking for it. `full` caps nothing, for a page
+* whose body sets its own width.
+*
+* `full` is still a page shell, not a console layout: it keeps the gutters and
+* the standard page header. A screen that wants the *viewport* — one frame tall,
+* with its own scroller — is `AppShell`, not this.
 */
 const WIDTHS = {
 	narrow: "max-w-[42rem]",
-	wide: "max-w-[54rem]"
+	wide: "max-w-[54rem]",
+	broad: "max-w-[84rem]",
+	full: ""
 };
 /**
 * A centred content column with a standard page header.

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

@@ -1,3 +1,4 @@
+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
@@ -29,6 +30,24 @@ interface SegmentedControlProps extends Omit<ToggleGroup.Props<string>, "value"
   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.

package/dist/chrome/segmented-control.js

@@ -1,5 +1,7 @@
 "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";
@@ -40,9 +42,12 @@ const ITEM_CLASSES = "inline-flex shrink-0 cursor-pointer select-none items-cent
 *   items={[{ value: "beams", label: "Beams" }, { value: "patch", label: "Patch" }]}
 * />
 */
-const SegmentedControl = React.forwardRef(function SegmentedControl({ items, value: valueProp, defaultValue, onValueChange, size = "md", className, itemClassName, ...groupProps }, ref) {
+const 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;
@@ -50,26 +55,40 @@ const SegmentedControl = React.forwardRef(function SegmentedControl({ items, val
 		onValueChange?.(next);
 	};
 	const iconSize = size === "sm" ? "size-icon-sm" : "size-icon-md";
-	return /* @__PURE__ */ jsx(ToggleGroup, {
-		ref,
-		value: value === void 0 ? [] : [value],
-		onValueChange: handleValueChange,
-		"data-slot": "segmented-control",
-		className: cn("inline-flex items-center gap-(--cue-space-1) rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-1)", className),
-		...groupProps,
-		children: items.map((item) => {
-			const Icon = item.icon;
-			return /* @__PURE__ */ jsxs(Toggle, {
-				value: item.value,
-				disabled: item.disabled,
-				"data-slot": "segmented-control-item",
-				className: cn(ITEM_CLASSES, ITEM_SIZES[size], itemClassName),
-				children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
-					"aria-hidden": "true",
-					className: cn("shrink-0", iconSize)
-				}), item.label]
-			}, item.value);
-		})
+	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

package/dist/chrome/tabs.js

@@ -1,7 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
-import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.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";
@@ -52,8 +51,6 @@ const TabsPanel = React.forwardRef(function TabsPanel({ className, ...elementPro
 		...elementProps
 	});
 });
-/** Page the strip by most of a screenful, keeping a sliver of context. */
-const NUDGE_FRACTION = .7;
 /**
 * A {@link TabsList} that scrolls when its tabs do not fit, and says so.
 *
@@ -75,75 +72,34 @@ const NUDGE_FRACTION = .7;
 * </Tabs.Root>
 */
 const ScrollableTabsList = React.forwardRef(function ScrollableTabsList({ className, containerClassName, activeValue, children, ...listProps }, ref) {
-	const scrollerRef = React.useRef(null);
-	const [edges, setEdges] = React.useState({
-		start: false,
-		end: false
-	});
-	const sync = React.useCallback(() => {
-		const el = scrollerRef.current;
-		if (el === null) return;
-		setEdges(computeScrollEdges(el.scrollLeft, el.scrollWidth, el.clientWidth));
-	}, []);
-	React.useEffect(() => {
-		const el = scrollerRef.current;
-		if (el === null) return;
-		sync();
-		el.addEventListener("scroll", sync, { passive: true });
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => sync());
-		observer?.observe(el);
-		if (el.firstElementChild !== null) observer?.observe(el.firstElementChild);
-		return () => {
-			el.removeEventListener("scroll", sync);
-			observer?.disconnect();
-		};
-	}, [sync]);
+	const scroll = useEdgeScroll();
 	React.useEffect(() => {
-		scrollerRef.current?.querySelector("[data-slot='tabs-tab'][data-active]")?.scrollIntoView?.({
+		scroll.ref.current?.querySelector("[data-slot='tabs-tab'][data-active]")?.scrollIntoView?.({
 			block: "nearest",
 			inline: "nearest"
 		});
 	}, [activeValue]);
-	const nudge = (direction) => {
-		const el = scrollerRef.current;
-		el?.scrollBy?.({
-			left: direction * el.clientWidth * NUDGE_FRACTION,
-			behavior: "smooth"
-		});
-	};
-	const mask = edgeFadeMask(edges);
-	const chevronClasses = "absolute inset-y-0 z-10 flex w-(--cue-space-5) cursor-pointer items-center justify-center bg-surface-2 text-fg-muted outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tabs-scroll-frame",
 		className: cn("relative min-w-0", containerClassName),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: scrollerRef,
-				"data-slot": "tabs-scroller",
-				className: "overflow-x-auto [mask-image:var(--cue-tabs-fade)] [-webkit-mask-image:var(--cue-tabs-fade)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-				style: mask === void 0 ? void 0 : { "--cue-tabs-fade": mask },
-				children: /* @__PURE__ */ jsx(TabsList, {
-					ref,
-					className: cn("w-max", className),
-					...listProps,
-					children
-				})
-			}),
-			edges.start ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Show earlier tabs",
-				onClick: () => nudge(-1),
-				className: cn(chevronClasses, "left-0"),
-				children: /* @__PURE__ */ jsx(ChevronLeftGlyph, { className: "size-icon-sm" })
-			}) : null,
-			edges.end ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "Show later tabs",
-				onClick: () => nudge(1),
-				className: cn(chevronClasses, "right-0"),
-				children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: "size-icon-sm" })
-			}) : null
-		]
+		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"
+		})]
 	});
 });
 /**