@cueplusplus/ui 0.3.0 → 0.6.0

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

@@ -8,6 +8,115 @@ interface AppShellRootProps extends React.ComponentPropsWithoutRef<"div"> {
   defaultNavOpen?: boolean;
   /** Called with the next open state whenever the drawer is opened or dismissed. */
   onNavOpenChange?: (open: boolean) => void;
+  /**
+   * Whether the navigation column is collapsed to an icon rail, when
+   * controlled. Pass with `onRailChange`. Defaults to expanded.
+   *
+   * It is the column's own collapse, owned one level up. Collapsing is a
+   * property of the column, but the header cell over it is a child of the bar
+   * — a different branch of the tree — and a length only one of them knows is
+   * a length they will eventually disagree about. So the frame holds the
+   * state, stamps `data-rail` on itself for anything that has to answer to it,
+   * and hands it down to `Sidebar.Root` as its controlled `collapsed`.
+   *
+   * **Persistence is the caller's.** A rail is set once and expected to be
+   * remembered, and where it is remembered — `localStorage`, a cookie the
+   * server can read before first paint, a user record — is a decision about
+   * hydration and privacy that a layout component has no business making.
+   */
+  rail?: boolean;
+  /** Initial rail state when uncontrolled. Defaults to `false`. */
+  defaultRail?: boolean;
+  /** Called with the next rail state whenever the column is collapsed or expanded. */
+  onRailChange?: (rail: boolean) => void;
+  /** Width of the navigation column while expanded. Any CSS length. Defaults to `"14rem"`. */
+  navWidth?: string;
+  /**
+   * Width of the navigation column while railed. Any CSS length. Defaults to
+   * `"3.5rem"` — a `--cue-icon-md` glyph centred in a `--cue-control-md` row,
+   * with a gutter either side that still reads as a column rather than a strip.
+   */
+  railWidth?: string;
+}
+interface AppShellBarProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * The header cell over the navigation column: the app mark, and whatever
+   * control rails it.
+   *
+   * Omit it and the bar is one undivided strip — no empty bordered cell, which
+   * is worse than no cell.
+   */
+  brand?: React.ReactNode;
+  /**
+   * Extra classes for the header cell — the bordered box that spans the
+   * navigation column, not the row of brand content inside it. Anything about
+   * the cell's width, rim or gutter belongs here; anything about how the mark
+   * and its controls sit belongs on the nodes passed as `brand`.
+   */
+  brandClassName?: string;
+  /**
+   * Make the bar's dead space a window drag handle. Defaults to `false`.
+   *
+   * This is the same contract {@link TitleBar} has always offered, on the bar
+   * a console with a navigation column actually uses — a desktop app should
+   * not need a `TitleBar` *and* an `AppShell.Bar` stacked on top of each other
+   * to get one draggable row, which is two chrome rungs of a small window
+   * spent on furniture.
+   *
+   * Every structural surface is attributed and every interactive cluster is
+   * carved back out, because the two shells this ships into fail in opposite
+   * directions. Tauri matches the *exact* element under the cursor, so the
+   * brand cell and the rest cell carry the attribute themselves — a click on
+   * the cell's own dead space targets the cell, never the root beneath it, and
+   * a bar that only attributed its root would be draggable nowhere. Electron
+   * builds a geometric mask from painted boxes instead and excludes nothing on
+   * its own, so the brand content, the leading children and `actions` each sit
+   * in a cluster marked `app-region: no-drag` — without it a button that merely
+   * overlaps the bar stops receiving clicks at all. See `./_drag.ts`.
+   *
+   * **It changes how the clusters are sized, and that is a trade.** Off, each
+   * cluster grows into its cell, so a caller's own `ms-auto` reaches the cell's
+   * trailing rim. On, the clusters take their content's width and `actions` is
+   * pushed over with `ms-auto` instead, because a cluster that fills its cell
+   * is a `no-drag` rectangle painted over every dead pixel the cell just
+   * attributed — the bar would be draggable nowhere but its paddings and its
+   * one gap. The dead area belongs to the window in drag mode, and a caller who
+   * needs content to reach the rim there should say so on a box of their own
+   * inside the cluster.
+   *
+   * `select-none` comes with it: dragging a window and selecting the text you
+   * started the drag on are the same gesture, and the shell wins.
+   *
+   * Not wired here: double-click-to-maximise. Tauri's injected script already
+   * does it for any drag region, macOS's cancel-by-dragging-away included.
+   * Electron does not, and an Electron app has to listen for `dblclick` and
+   * toggle the window itself. Which of those an app is, is not something a
+   * layout component can know.
+   */
+  platformDrag?: boolean;
+  /**
+   * A title centred on the **bar**, not between the cells beside it.
+   *
+   * Absolutely positioned against the bar's own box, so it stays put when a
+   * button appears in `actions` or the column rails — the whole reason a
+   * document name in desktop chrome is not just another flex child.
+   * `pointer-events-none` so the dead space around a short title still drags,
+   * which is also what makes it click through to the drag surface underneath
+   * in Tauri, whose hit-testing is the browser's own.
+   *
+   * Inert by construction. Anything the reader has to click belongs in
+   * `actions` or in `children`, where it can be carved out of the drag region.
+   */
+  center?: React.ReactNode;
+  /**
+   * The trailing cluster: connection state, a run indicator, an overflow menu.
+   *
+   * Pinned to the bar's trailing edge and never squeezed, so it reads as window
+   * furniture rather than the end of a sentence. `children` keeps flowing into
+   * the same cell ahead of it, which is what lets an existing web-shell caller
+   * pass free-form content and gain a cluster without rearranging anything.
+   */
+  actions?: React.ReactNode;
 }
 type AppShellBodyProps = React.ComponentPropsWithoutRef<"div">;
 interface AppShellSidebarProps extends SidebarRootProps {
@@ -85,7 +194,15 @@ interface AppShellAsideProps extends React.ComponentPropsWithoutRef<"aside"> {
  * 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.
+ * `shrink-0` and need no wrapper — so a shell reads as the page's outline. The
+ * one bar the shell does own is {@link AppShellBar}, and it owns it for one
+ * reason: it is divided by the navigation column, which means it has to be
+ * measured from the same length the column is.
+ *
+ * That length is `--cue-nav-width`, written on the frame. `rail` rewrites it,
+ * `data-rail` announces it, and the column and the header cell over it move
+ * together because neither holds a width of its own. Persistence and the
+ * toggle are the caller's — see {@link AppShellRootProps.rail}.
  *
  * 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
@@ -114,6 +231,7 @@ interface AppShellAsideProps extends React.ComponentPropsWithoutRef<"aside"> {
  */
 declare const AppShell: {
   Root: React.ForwardRefExoticComponent<AppShellRootProps & React.RefAttributes<HTMLDivElement>>;
+  Bar: React.ForwardRefExoticComponent<AppShellBarProps & React.RefAttributes<HTMLDivElement>>;
   Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Sidebar: React.ForwardRefExoticComponent<AppShellSidebarProps & React.RefAttributes<HTMLElement>>;
   NavTrigger: React.ForwardRefExoticComponent<AppShellNavTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -122,4 +240,4 @@ declare const AppShell: {
   Aside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
 };
 //#endregion
-export { AppShell, AppShellAsideProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps };
+export { AppShell, AppShellAsideProps, AppShellBarProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps };

package/dist/chrome/app-shell.js

@@ -5,14 +5,35 @@ 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 { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.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: () => {}
+	setNavOpen: () => {},
+	rail: false,
+	setRail: () => {}
 });
 /**
+* The navigation column's current width, written once on the frame and read by
+* everything that has to line up with it.
+*
+* The prototype this came from put it best: collapsing the rail rewrites one
+* length, and the bar's header cell and the column move together because
+* neither of them holds a length of its own. A custom property rather than two
+* inline widths because the two boxes are on opposite sides of the tree — the
+* cell is a child of the bar, above `AppShell.Body`, and the column is inside
+* it — and because it is then also the handle a consumer's own CSS aligns to.
+*
+* {@link AppShellBar} spells the name a second time, in a Tailwind utility,
+* because the scanner reads class strings and not constants. The two spellings
+* move together, and the shell's own suite fails if they stop matching.
+*/
+const NAV_WIDTH_PROPERTY = "--cue-nav-width";
+/** What a box that spans the navigation column sets its width to. */
+const NAV_WIDTH_VALUE = `var(${NAV_WIDTH_PROPERTY})`;
+/**
 * The console frame: title bar, navigation, work area, status bar — one
 * viewport tall, with exactly one thing scrolling.
 *
@@ -26,7 +47,15 @@ const AppShellContext = React.createContext({
 * 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.
+* `shrink-0` and need no wrapper — so a shell reads as the page's outline. The
+* one bar the shell does own is {@link AppShellBar}, and it owns it for one
+* reason: it is divided by the navigation column, which means it has to be
+* measured from the same length the column is.
+*
+* That length is `--cue-nav-width`, written on the frame. `rail` rewrites it,
+* `data-rail` announces it, and the column and the header cell over it move
+* together because neither holds a width of its own. Persistence and the
+* toggle are the caller's — see {@link AppShellRootProps.rail}.
 *
 * 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
@@ -54,27 +83,88 @@ const AppShellContext = React.createContext({
 * </AppShell.Root>
 */
 const AppShell = {
-	Root: React.forwardRef(function AppShellRoot({ className, navOpen: navOpenProp, defaultNavOpen = false, onNavOpenChange, ...elementProps }, ref) {
+	Root: React.forwardRef(function AppShellRoot({ className, navOpen: navOpenProp, defaultNavOpen = false, onNavOpenChange, rail: railProp, defaultRail = false, onRailChange, navWidth = "14rem", railWidth = "3.5rem", style, ...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 [uncontrolledRail, setUncontrolledRail] = React.useState(defaultRail);
+		const rail = railProp ?? uncontrolledRail;
+		const setRail = React.useCallback((next) => {
+			if (railProp === void 0) setUncontrolledRail(next);
+			onRailChange?.(next);
+		}, [railProp, onRailChange]);
 		const context = React.useMemo(() => ({
 			navOpen,
-			setNavOpen
-		}), [navOpen, setNavOpen]);
+			setNavOpen,
+			rail,
+			setRail
+		}), [
+			navOpen,
+			setNavOpen,
+			rail,
+			setRail
+		]);
 		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),
+				"data-rail": rail ? "" : void 0,
+				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", className),
+				style: {
+					[NAV_WIDTH_PROPERTY]: rail ? railWidth : navWidth,
+					...style
+				},
 				...elementProps
 			})
 		});
 	}),
+	Bar: React.forwardRef(function AppShellBar({ className, brand, brandClassName, platformDrag = false, center, actions, children, ...elementProps }, ref) {
+		const dragProps = platformDrag ? { "data-tauri-drag-region": "" } : void 0;
+		const dragClasses = platformDrag ? DRAG_CLASSES : void 0;
+		const clusterClasses = cn("flex min-w-0 items-center gap-(--cue-space-3)", platformDrag ? NO_DRAG_CLASSES : "grow");
+		return /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "app-shell-bar",
+			...dragProps,
+			className: cn("relative flex h-(--cue-chrome-titlebar) w-full shrink-0 items-stretch border-b border-border bg-surface-1", dragClasses, platformDrag ? "select-none" : void 0, className),
+			...elementProps,
+			children: [
+				brand === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "app-shell-brand",
+					...dragProps,
+					className: cn("flex w-auto min-w-0 shrink-0 items-center gap-(--cue-space-3) border-r border-border px-(--cue-pad-row-x) transition-[width] duration-150 ease-out md:w-(--cue-nav-width) motion-reduce:transition-none", dragClasses, brandClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-brand-content",
+						className: clusterClasses,
+						children: brand
+					})
+				}),
+				center === void 0 ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "app-shell-bar-center",
+					className: "pointer-events-none absolute top-1/2 left-1/2 max-w-[50%] -translate-x-1/2 -translate-y-1/2 truncate font-mono text-(length:--cue-text-label) text-fg-muted",
+					children: center
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "app-shell-bar-rest",
+					...dragProps,
+					className: cn("flex min-w-0 flex-1 items-center gap-(--cue-space-3) px-(--cue-pad-row-x)", dragClasses),
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-bar-leading",
+						className: clusterClasses,
+						children
+					}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "app-shell-bar-actions",
+						className: cn(clusterClasses, "grow-0 shrink-0", platformDrag ? "ms-auto" : void 0),
+						children: actions
+					})]
+				})
+			]
+		});
+	}),
 	Body: React.forwardRef(function AppShellBody({ className, ...elementProps }, ref) {
 		return /* @__PURE__ */ jsx("div", {
 			ref,
@@ -83,15 +173,24 @@ const AppShell = {
 			...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);
+	Sidebar: React.forwardRef(function AppShellSidebar({ className, drawerClassName, drawerTitle = "Navigation", closeLabel = "Close navigation", collapsible = true, landmark = "navigation", "aria-label": ariaLabel = "Navigation", collapsed, defaultCollapsed, onCollapsedChange, width, collapsedWidth, children, ...sidebarProps }, ref) {
+		const { navOpen, setNavOpen, rail, setRail } = React.useContext(AppShellContext);
 		const DrawerLandmark = landmark === "complementary" ? "aside" : "nav";
+		const railed = collapsed === void 0 && defaultCollapsed === void 0;
 		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),
+			collapsed: railed ? rail : collapsed,
+			defaultCollapsed,
+			onCollapsedChange: railed ? (next) => {
+				onCollapsedChange?.(next);
+				setRail(next);
+			} : onCollapsedChange,
+			width: width ?? (railed ? NAV_WIDTH_VALUE : void 0),
+			collapsedWidth: collapsedWidth ?? (railed ? NAV_WIDTH_VALUE : void 0),
 			...sidebarProps,
 			children: [children, collapsible ? /* @__PURE__ */ jsx(Sidebar.Rail, {}) : null]
 		}), /* @__PURE__ */ jsx(Drawer.Root, {

package/dist/chrome/index.d.ts

@@ -2,7 +2,7 @@ import { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_t
 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 { AppShell, AppShellAsideProps, AppShellBarProps, 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";
@@ -13,9 +13,10 @@ 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 { 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 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 };
+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, 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 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/status-bar.d.ts

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

package/dist/chrome/status-bar.js

@@ -1,30 +1,41 @@
 import { cn } from "../lib/cn.js";
+import { STATUS_BAR_GROUP_CLASSES, statusBarItemClasses } from "./_status-bar.js";
+import { StatusBarInteractiveItem } from "./_status-bar-item.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/status-bar.tsx
-const ITEM_TONES = {
-	neutral: "",
-	accent: "text-accent",
-	ok: "text-ok",
-	busy: "text-busy",
-	warn: "text-warn",
-	danger: "text-danger",
-	info: "text-info"
-};
 const StatusBarRoot = React.forwardRef(function StatusBar({ className, ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "status-bar",
-		className: cn("flex h-(--cue-chrome-statusbar) w-full shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+		className: cn("flex h-(--cue-chrome-statusbar) w-full shrink-0 items-center gap-(--cue-space-4) overflow-x-clip border-t border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-subtle", className),
 		...elementProps
 	});
 });
-/** One reading in the bar: a mode, a count, a connection state. */
-const StatusBarItem = React.forwardRef(function StatusBarItem({ className, tone = "neutral", push = false, icon: Icon, children, ...elementProps }, ref) {
+/**
+* One reading in the bar: a mode, a count, a connection state — or, given
+* `interactive`, one control in it.
+*/
+const StatusBarItem = React.forwardRef(function StatusBarItem({ className, tone = "neutral", push = false, icon: Icon, interactive = false, prominence = "quiet", render, disabled, children, ...elementProps }, ref) {
+	if (interactive || render !== void 0) return /* @__PURE__ */ jsx(StatusBarInteractiveItem, {
+		ref,
+		tone,
+		prominence,
+		className,
+		push,
+		icon: Icon,
+		render,
+		disabled,
+		elementProps,
+		children
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "status-bar-item",
-		className: cn("inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2) whitespace-nowrap", ITEM_TONES[tone], push ? "ml-auto" : void 0, className),
+		className: cn(statusBarItemClasses({
+			tone,
+			prominence
+		}), push ? "ml-auto" : void 0, className),
 		...elementProps,
 		children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
@@ -33,24 +44,77 @@ const StatusBarItem = React.forwardRef(function StatusBarItem({ className, tone
 	});
 });
 /**
+* Items that belong to each other, one pixel apart.
+*
+* The bar spaces its readings at `--cue-space-4` because they are unrelated
+* facts. A branch name and its ahead/behind count are not unrelated facts; they
+* are one control that happens to have two halves, and the gap between them is
+* what says so. This is VS Code's `compact` mechanic — the seam collapses, and
+* hovering either half grounds both while the half under the cursor goes one
+* rung further — expressed as a wrapper rather than as an id-reference between
+* two items, because a design system's items do not have ids to point at.
+*
+* A `role="group"` rather than nothing: the members are announced as a set, and
+* the DOM order they are announced in is the order they are read in. Give it an
+* `aria-label` when the members only make sense together.
+*
+* @example
+* <StatusBar.Group aria-label="Repository">
+*   <StatusBar.Item interactive icon={GitBranch}>main</StatusBar.Item>
+*   <StatusBar.Item interactive icon={ArrowUp}>2</StatusBar.Item>
+* </StatusBar.Group>
+*/
+const StatusBarGroup = React.forwardRef(function StatusBarGroup({ className, push = false, role = "group", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "status-bar-group",
+		role,
+		className: cn(STATUS_BAR_GROUP_CLASSES, push ? "ml-auto" : void 0, className),
+		...elementProps
+	});
+});
+/**
 * The quiet strip along the bottom of a window.
 *
 * The smallest type in the system in the subtlest ink: a status bar is read
 * when you go looking for it and ignored otherwise, so it must never compete
-* with the work above it. Height comes from `--cue-chrome-statusbar`.
+* with the work above it. Height comes from `--cue-chrome-statusbar`, and the
+* bar clips rather than wrapping — one rung of the frame, always, whatever it
+* is asked to hold.
+*
+* Items come in two kinds and the difference is deliberate. A plain
+* `StatusBar.Item` is a **reading**: a `<div>`, inert by construction, with no
+* hover, no focus and nothing to click — which is what most of a status bar is.
+* `interactive` (or a `render`) makes one a **control**, and only then does it
+* grow the button chassis, the full-height hover fill and the inset focus ring.
+* `StatusBar.Group` fuses adjacent items into one segmented control.
 *
 * Not a live region — a status bar changes constantly (frame counters, DMX
 * output), and announcing every change would make the app unusable with a
 * screen reader. Put anything that genuinely must be announced in a `Toast`.
 *
-* Static markup — no `"use client"`.
+* Static markup — no `"use client"`. A bar of readings renders on the server
+* and ships no JavaScript at all; the interactive item is the one part that
+* crosses the boundary, and it crosses it alone (`./_status-bar-item.tsx`).
 *
 * @example
 * <StatusBar>
 *   <StatusBar.Item icon={Plug} tone="ok">Art-Net connected</StatusBar.Item>
 *   <StatusBar.Item push>512 channels</StatusBar.Item>
 * </StatusBar>
+* @example
+* // The VS Code shape: a clickable cluster left, a loud state right.
+* <StatusBar>
+*   <StatusBar.Group aria-label="Repository">
+*     <StatusBar.Item interactive icon={GitBranch}>main</StatusBar.Item>
+*     <StatusBar.Item interactive icon={ArrowUp}>2</StatusBar.Item>
+*   </StatusBar.Group>
+*   <StatusBar.Item push interactive prominence="filled" tone="danger">3 faults</StatusBar.Item>
+* </StatusBar>
 */
-const StatusBar = Object.assign(StatusBarRoot, { Item: StatusBarItem });
+const StatusBar = Object.assign(StatusBarRoot, {
+	Item: StatusBarItem,
+	Group: StatusBarGroup
+});
 //#endregion
 export { StatusBar };

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

@@ -9,7 +9,17 @@ interface TitleBarProps extends React.ComponentPropsWithoutRef<"div"> {
    * the same component ships into both shells and neither one recognises the
    * other's contract. The interactive clusters are carved back out with
    * `app-region: no-drag`, or the buttons in the bar would only ever move the
-   * window instead of firing.
+   * window instead of firing. Both halves of that contract live in
+   * `./_drag.ts`, which `AppShell.Bar` emits from as well — the two bars are
+   * draggable the same way or they are not draggable the same way.
+   *
+   * Double-click-to-maximise is not wired here. Tauri's own injected script
+   * already provides it on any drag region, cancel-by-dragging-away on macOS
+   * included; Electron provides nothing, and an Electron app has to listen for
+   * `dblclick` and toggle the window itself. Neither is a decision a component
+   * in a design system can make on the window's behalf.
+   *
+   * Defaults to `false`.
    */
   platformDrag?: boolean;
   /**

package/dist/chrome/title-bar.js

@@ -1,11 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/title-bar.tsx
-/** `app-region` needs the unprefixed and the WebKit form to cover both shells. */
-const DRAG_CLASSES = "[app-region:drag] [-webkit-app-region:drag]";
-const NO_DRAG_CLASSES = "[app-region:no-drag] [-webkit-app-region:no-drag]";
 /**
 * The window's own bar: app mark left, document name centred, controls right.
 *

package/dist/configurator/_export.js

@@ -14,13 +14,14 @@ const SURFACE_ANCHORS = [
 	"surface-2",
 	"surface-3"
 ];
-/** The status tones, as `ThemeAnchors.status` spells them. */
+/** The status tones and the live hue, as `ThemeAnchors.status` spells them. */
 const STATUS_ANCHORS = [
 	"ok",
 	"busy",
 	"warn",
 	"danger",
-	"info"
+	"info",
+	"stream"
 ];
 /** `--cue-font-mono` → the `fonts.mono` key `ThemeAnchors` uses. */
 const FONT_ANCHORS = {