@cueplusplus/ui 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @cueplusplus/ui
 
+## 0.7.0
+
+### Minor Changes
+
+- 1217d75: `Table.GroupRow` takes `headingLevel` (`2`–`6`), which makes the divider's label
+  slot a real heading element instead of a `<span>` — so a grouped table joins the
+  page's heading outline without nesting an `<h2>` inside a `<span>`, which is what
+  passing a heading as `label` had to do. It defaults to no heading, so every
+  existing divider is unchanged.
+
+  The row-activation reading is now public: `activateRowFromClick` and
+  `activateRowFromKeyDown` are exported from `@cueplusplus/ui`, so a `Table.Row` —
+  which owns its own activation — or any other element a console makes into a row
+  runs the same decision `DataRow.Root` runs, instead of a second copy of it.
+
+### Patch Changes
+
+- @cueplusplus/tokens@0.7.0
+
+## 0.6.0
+
+### Minor Changes
+
+- bf116b5: `AppShell.Bar` gains the desktop drag contract `TitleBar` already had, plus a truly bar-centred `center` slot and a trailing `actions` cluster, so a Tauri or Electron console spends one chrome row on window furniture instead of two.
+
+  `StatusBar.Item` gains `interactive`, `prominence` and `render`, so a reading can become a real button or link with hover, press and inset keyboard-focus states, and the new `StatusBar.Group` fuses adjacent items into one compact control. The published manifest now lists `StatusBar.Item` and `StatusBar.Group` with their props, so a props table or lookup tool reads them the way it already reads `AppShell`'s parts.
+
+  ## Migrating
+
+  Nothing to change. Both additions are opt-in: without `platformDrag`, `center` or `actions` the bar emits no drag attributes at all, and a `StatusBar.Item` with none of the new props is the same inert `<div>` with the same classes it always was.
+
+  Two shapes moved underneath, in case your own CSS reaches into them. `AppShell.Bar` now wraps its brand, its leading children and its actions in `[data-slot="app-shell-brand-content"]`, `[data-slot="app-shell-bar-leading"]` and `[data-slot="app-shell-bar-actions"]` respectively — each a `<div>` laid out as a flex row with the bar's own gap, so the rhythm is unchanged and `brandClassName` still lands on the cell. Under `platformDrag` those clusters take their content's width rather than filling their cell, which is what leaves the bar's dead space to the window manager; an `ms-auto` that needs to reach the cell's rim belongs on a box inside the cluster there. And `StatusBar`'s root is now `overflow-x-clip`: the bar has always promised to be one row tall, and now it keeps that promise when it is overfilled.
+
+- fb20c71: Dense data surfaces: `DataRow` is the shared row anatomy (marker, label, description, tags, figure and an action track hidden until hover, focus or selection, with a touch fallback and no reflow when it appears); `Ledger` groups rows under sticky tier headings and gutter slugs with no disclosure semantics; `DataTree` draws the same rows as a hierarchy under `role="tree"` with the APG keyboard map and CSS depth guides; and `Table` gains `Table.GroupRow` (a `<th scope="rowgroup">` divider so a grouped list stays one table with its columns named once), `sticky` on `Table.Head`, and `interactive`/`selected` on `Table.Row`. Existing tables are untouched: every addition is opt-in.
+
+### Patch Changes
+
+- 778374d: The keyboard focus ring is now visible in the luma, venu and hivehub light
+  themes. Each set `--cue-focus` to its brand accent, and on paper that accent
+  read as low as 2.45:1 against the recessed fill a focused field paints it
+  over — under the 3:1 WCAG 1.4.11 asks of a focus indicator. Each light block
+  now carries its own focus colour: the same accent hue, stepped down in
+  lightness until it clears every surface a field can sit on. `--cue-accent` is
+  unchanged, so no button, chip or link moves.
+- 013960d: Form controls now show one quiet focus signal instead of two. A focused field strengthens its rim by one rung (`--cue-border` → `--cue-border-strong`) and draws a single 2px ring in the theme's own `--cue-focus`, pulled flush against the rim rather than floating outside it on a gap. Grouped controls — `InputGroup`, `SearchInput`, `Combobox`, `MultiSelect`, `Autocomplete`, `TagsInput`, `NumberField`, `ScrubInput`, `Composer`, `MusicalTimeInput` and the segmented date and time fields — strengthen their rim for any focus inside but wait for a keyboard-visible descendant before drawing the ring, so a mouse click no longer lights the whole cluster up. An invalid field stays red while it is focused: because a flush ring is drawn over the rim it hugs, the ring itself turns `--cue-danger` rather than leaving a border nobody can see underneath it — so focus keeps its own indicator and invalid keeps its colour, on the plain controls and on the grouped ones alike.
+
+  ## Migrating
+
+  No API changed, and no consumer edit is required. Anyone who added local overrides to mute the old accent-rim-plus-outer-ring treatment can delete them: the defaults are now the quiet version, and a local override will fight the theme's focus colour rather than help it.
+
+- Updated dependencies [778374d]
+  - @cueplusplus/tokens@0.6.0
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/chrome/_drag.js

@@ -0,0 +1,59 @@
+//#region src/chrome/_drag.ts
+/**
+* The desktop drag contract, in one place because two bars now emit it.
+*
+* A window has exactly one way to be dragged by its chrome, and this library
+* ships into two shells that disagree about what that way is:
+*
+* - **Tauri** listens for `mousedown` and walks the event's `composedPath()`,
+*   looking for `data-tauri-drag-region`. The bare form of the attribute means
+*   *this element and only this element* — the innermost element under the
+*   cursor has to be the attributed one — so a container carrying it does not
+*   hand the behaviour to its children. It also excludes anything that reads as
+*   a control (`a`, `button`, `input`, `select`, `textarea`, `label`,
+*   `summary`, `[contenteditable]`, `[tabindex]`, and the button/link/menuitem
+*   ARIA roles) for free, without being asked.
+* - **Electron and Chromium** read the `app-region` CSS property and build a
+*   *geometric* hit-test mask from it, below the DOM's pointer-event model
+*   entirely: every painted pixel of a `drag` box drags, minus the pixels a
+*   `no-drag` box covers. It knows nothing about ancestry and excludes nothing
+*   on its own — every interactive descendant has to opt out by name.
+*
+* The two mechanisms fail in opposite directions, so the contract a shared
+* component can honour is the union of both: **attribute every structural
+* surface, carve every interactive cluster.** A bar that only attributes its
+* root is undraggable in Tauri wherever a cell covers the root; a bar that only
+* drags and never carves is a bar whose buttons move the window in Electron.
+*
+* Both spellings of the CSS property are emitted. `app-region` is the current
+* canonical name in Electron's own documentation; `-webkit-app-region` is the
+* legacy alias older Chromium builds still want, and neither shell minds
+* reading a property it already understands twice.
+*
+* These are class strings rather than a `<div>` of their own on purpose: the
+* surfaces that have to carry them — {@link TitleBar}'s root,
+* `AppShell.Bar`'s root, its brand cell, its rest cell — already exist for
+* layout reasons, and wrapping each one in a drag element would put a box in
+* the flex arithmetic that is there for nothing but a CSS property.
+*/
+/**
+* Make a painted surface a window drag handle.
+*
+* Pair it with a bare `data-tauri-drag-region` attribute on the same element —
+* the CSS half is Electron's and the attribute half is Tauri's, and an element
+* with only one of them is draggable in only one shell.
+*/
+const DRAG_CLASSES = "[app-region:drag] [-webkit-app-region:drag]";
+/**
+* Carve an interactive cluster back out of the surrounding drag region.
+*
+* Required for Electron, where a button that merely overlaps a drag box stops
+* receiving clicks at all; harmless in Tauri, which had already excluded a
+* real `<button>` on its own. Anything custom enough that Tauri's tag/role
+* heuristic would miss it — an icon "button" built from a `<div>`, a bespoke
+* menu trigger — additionally wants `data-tauri-drag-region="false"`, which is
+* the caller's to add on the control itself.
+*/
+const NO_DRAG_CLASSES = "[app-region:no-drag] [-webkit-app-region:no-drag]";
+//#endregion
+export { DRAG_CLASSES, NO_DRAG_CLASSES };

package/dist/chrome/_status-bar-item.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { statusBarItemClasses } from "./_status-bar.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/chrome/_status-bar-item.tsx
+/**
+* The elements for which `disabled` is a real HTML attribute.
+*
+* Everything else — an anchor above all — has to be told it is inert some other
+* way. Setting `disabled` on an `<a>` produces a stray attribute the parser
+* keeps and nothing reads: not a validity error, but not a disabled link
+* either, because there is no such thing.
+*/
+const DISABLEABLE_TAGS = /* @__PURE__ */ new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset",
+	"optgroup"
+]);
+/**
+* Whether `disabled` can be handed to whatever this renders as.
+*
+* A `render` that is a component rather than an intrinsic tag decides for
+* itself — Base UI's own triggers take a `disabled` prop, and refusing to pass
+* it would break the composition this prop exists for — so only a string tag
+* outside the set above is refused.
+*/
+function takesDisabledAttribute(render) {
+	if (render === void 0) return true;
+	if (!React.isValidElement(render)) return true;
+	return typeof render.type !== "string" || DISABLEABLE_TAGS.has(render.type);
+}
+/**
+* A status-bar item that is a real control: a `<button>`, or whatever `render`
+* replaces it with.
+*
+* `type="button"` is supplied only when this renders its own `<button>`. A
+* `render={<a href="…" />}` must not be handed a `type`, which on an anchor is
+* a MIME hint and not a submit-behaviour switch — the same rule
+* {@link IconButton} follows, and for the same reason.
+*
+* `disabled` is honoured on every interactive shape, by two routes. The
+* attribute itself goes only where it means something ({@link DISABLEABLE_TAGS},
+* plus any component `render`, which takes its own `disabled` prop); the state
+* is stated everywhere with `aria-disabled` and `data-disabled`, which is what
+* an anchor gets instead. `data-disabled` is not decoration — it is what greys
+* the item out and lifts it out of the pointer's reach in `_status-bar.ts`,
+* since `:disabled` never matches an `<a>`. The gap this closes was a
+* `render={<button/>} disabled` that shipped enabled, clickable and undimmed.
+*/
+const StatusBarInteractiveItem = React.forwardRef(function StatusBarInteractiveItem({ tone, prominence, className, push, icon: Icon, render, disabled, children, elementProps }, ref) {
+	const tagProps = {
+		...render === void 0 ? { type: "button" } : {},
+		...disabled === true && takesDisabledAttribute(render) ? { disabled: true } : {},
+		...disabled === true ? {
+			"aria-disabled": true,
+			"data-disabled": ""
+		} : {}
+	};
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "button",
+		props: {
+			"data-slot": "status-bar-item",
+			...tagProps,
+			...elementProps,
+			className: cn(statusBarItemClasses({
+				tone,
+				interactive: true,
+				prominence
+			}), push ? "ml-auto" : void 0, className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: "size-icon-sm shrink-0"
+			}), children] })
+		}
+	});
+});
+//#endregion
+export { StatusBarInteractiveItem };

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

@@ -0,0 +1,15 @@
+import "./status-bar.js";
+//#region src/chrome/_status-bar.d.ts
+/**
+ * How loudly a status-bar item states itself.
+ *
+ * `quiet` is a reading — tone-coloured ink on the bar's own ground, which is
+ * what a status bar is for. `filled` is a chip: a full-height tone wash behind
+ * tone ink, for the handful of states VS Code reserves its coloured categories
+ * for (a warning, an error, the remote you are attached to). It is loud on
+ * purpose and it is meant to be rare; a bar of five filled items is a bar
+ * nobody reads.
+ */
+type StatusBarProminence = "quiet" | "filled";
+//#endregion
+export { StatusBarProminence };

package/dist/chrome/_status-bar.js

@@ -0,0 +1,171 @@
+import { cn } from "../lib/cn.js";
+//#region src/chrome/_status-bar.ts
+/**
+* The class half of `StatusBar` (see `./status-bar.tsx`).
+*
+* It lives on its own for the same reason `forms/_chassis.ts` does — the item's
+* appearance is a pure function of three enumerated inputs and nothing else —
+* and for one reason `_chassis.ts` does not have: a status bar is two kinds of
+* thing wearing one skin. A static reading is markup, and markup is the whole
+* point of `StatusBar` being renderable from a server component with no
+* JavaScript at all. An *interactive* item is a control, and a control needs
+* the render prop, which needs a hook, which needs `"use client"`. Putting the
+* shared class strings here lets the static half stay static and the
+* interactive half cross the boundary alone (`./_status-bar-item.tsx`), instead
+* of the whole bar crossing it because one of its items might be a button.
+*
+* Everything below is token-backed and enumerated per tone. Nothing is derived
+* at runtime from a tone name, because a class string assembled from a template
+* literal is a class string Tailwind's scanner never sees.
+*/
+/** Ink for each tone; `neutral` inherits the bar's own subtle grey. */
+const ITEM_TONES = {
+	neutral: "",
+	accent: "text-accent",
+	ok: "text-ok",
+	busy: "text-busy",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+/**
+* Every item, static or not: one line, never wrapping, never growing the bar.
+*
+* This exact string is what a plain `<StatusBar.Item>` rendered before any of
+* the interactive vocabulary existed, and it still is — the appearance function
+* adds to it and never rewrites it, so a console that upgrades sees the same
+* readouts it had.
+*/
+const ITEM_BASE = "inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2) whitespace-nowrap";
+/**
+* What an item gains when it becomes a real control.
+*
+* The reset first: a `<button>` arrives with a border, a ground, a gutter and a
+* font of the user agent's choosing, and none of them belong in a 24px strip.
+* `text-(length:--cue-text-label)` and `font-mono` are re-declared rather than
+* inherited for the same reason — form controls do not inherit type.
+*
+* `h-full` is the VS Code reading of a status item and the one that makes hover
+* legible: the fill is the height of the bar, not the height of the words, so a
+* pointer anywhere in the strip is over the target rather than beside it.
+*
+* The focus ring is inset (`-outline-offset-1`). An outset ring on a bar this
+* low paints across the item's neighbours and the hairline above them, which
+* reads as the whole bar being focused rather than one reading in it.
+*
+* The disabled treatment is declared twice, once for `:disabled` and once for
+* `[data-disabled]`. An item that a `render` prop turned into an anchor can
+* never match `:disabled` — the pseudo-class is defined on form controls — so
+* without the data twin a disabled link would read as perfectly live.
+*/
+const INTERACTIVE_CHASSIS = "h-full cursor-pointer border-0 bg-transparent py-0 font-mono text-(length:--cue-text-label) outline-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none";
+/**
+* A quiet control's gutter, and the negative margin that pays for it.
+*
+* The bar sets `gap-(--cue-space-4)` between items. Padding an item to give its
+* hover fill somewhere to live would push its text `--cue-space-2` further from
+* its neighbour, so the same length is taken straight back off the margin: the
+* words stay exactly where a static reading's words would be, and the fill
+* bleeds halfway into the gap either side. VS Code does the identical trick
+* with a 5px label padding inside a 3px item margin.
+*/
+const QUIET_GEOMETRY = "px-(--cue-space-2) -mx-(--cue-space-2)";
+/**
+* A filled item's gutter. Wider, and with no negative margin at all.
+*
+* A filled item is a chip rather than a reading, and a chip whose ground bleeds
+* into the gap on both sides has no gap left to be a chip in. VS Code makes the
+* same split — its coloured items take the wider 8px padding while a plain one
+* keeps 5px — so this is the next space token up and the margin stays put.
+*/
+const FILLED_GEOMETRY = "h-full px-(--cue-space-3)";
+/**
+* The ground a `quiet` control paints, hovered, pressed, and as a member of a
+* hovered {@link STATUS_BAR_GROUP_CLASSES cluster}.
+*
+* Three rungs of one ladder: the bar sits on `surface-1`, a hovered item lifts
+* to `surface-2`, a pressed one to `surface-3`. The cluster rule is the VS Code
+* pairing exactly — hovering any segment grounds every segment at the ordinary
+* hover rung, and the segment actually under the cursor goes one rung further,
+* so a two-item group reads as one control without hiding which half is live.
+* The compound `group-hover/status-group:hover:` outranks the plain `hover:` on
+* specificity rather than on source order, so which of them wins is decided by
+* the cascade and not by how Tailwind happened to sort that day.
+*/
+const QUIET_GROUNDS = "hover:bg-surface-2 active:bg-surface-3 group-hover/status-group:bg-surface-2 group-hover/status-group:hover:bg-surface-3";
+/**
+* The fill a `filled` item paints, per tone.
+*
+* `bg-<tone>/10` is the tinted-`Chip` recipe, deliberately: "warn" has to be
+* the same wash in the status bar that it is on the chip that raised it. The
+* derived `--cue-<tone>-soft` properties are not used here because only
+* `accent-soft` is bridged into Tailwind's colour namespace — `bg-warn-soft`
+* compiles to nothing at all — while the alpha modifier reaches every tone and
+* lands on the same 10–12% wash the token was derived at.
+*/
+const FILLED_TONES = {
+	neutral: "bg-surface-2 text-fg",
+	accent: "bg-accent/10",
+	ok: "bg-ok/10",
+	busy: "bg-busy/10",
+	warn: "bg-warn/10",
+	danger: "bg-danger/10",
+	info: "bg-info/10"
+};
+/**
+* Where a filled control's fill steps to under the pointer, per tone.
+*
+* The tint deepens rather than being swapped for a grey: a warning that turns
+* neutral on hover has stopped warning at the exact moment somebody reached for
+* it. `/20` is `Chip`'s own interactive step, and `/30` is one further for the
+* press. Neutral has only the surface ladder to climb and its top rung is
+* `surface-3`, so hover and press share it.
+*/
+const FILLED_GROUNDS = {
+	neutral: "hover:bg-surface-3 active:bg-surface-3",
+	accent: "hover:bg-accent/20 active:bg-accent/30",
+	ok: "hover:bg-ok/20 active:bg-ok/30",
+	busy: "hover:bg-busy/20 active:bg-busy/30",
+	warn: "hover:bg-warn/20 active:bg-warn/30",
+	danger: "hover:bg-danger/20 active:bg-danger/30",
+	info: "hover:bg-info/20 active:bg-info/30"
+};
+/**
+* The compact-adjacency cluster: children one pixel apart, whatever the bar's
+* own gap is.
+*
+* `gap-px` is the seam. `*:mx-0` is what makes the seam survive an interactive
+* member, whose `-mx-(--cue-space-2)` would otherwise pull its neighbours a
+* whole space token *over* it — the negative margin exists to bleed a lone
+* item's fill into the bar's gap, and inside a cluster there is no gap to bleed
+* into. It lands on the group because that is where the decision is: these are
+* segments of one control, not readings that happen to be adjacent.
+*
+* `group/status-group` is the handle the members' cluster-hover rules read, and
+* it is left on the element whether or not any member is interactive so a
+* consumer can hang `group-hover/status-group:` rules of their own on it.
+*/
+const STATUS_BAR_GROUP_CLASSES = "group/status-group flex h-full min-w-0 shrink-0 items-center gap-px *:mx-0";
+/**
+* Every class a status-bar item wears, from the three things that vary.
+*
+* One function rather than a class per shape, because the shapes multiply:
+* seven tones times two prominences times interactive-or-not is 28 items, and
+* 28 hand-written strings drift. Ordering is load-bearing — the merge is
+* last-one-wins, so the reset comes before the gutter that overrides it and the
+* tone comes after the `text-inherit` that would otherwise flatten it.
+*
+* @param appearance - Tone, interactivity and prominence; every field optional.
+* @returns The merged class string, with no duplicate or cancelled utilities.
+* @example
+* statusBarItemClasses({}) // exactly the static item's own chassis
+* @example
+* statusBarItemClasses({ tone: "danger", interactive: true, prominence: "filled" })
+*/
+function statusBarItemClasses(appearance) {
+	const { tone = "neutral", interactive = false, prominence = "quiet" } = appearance;
+	const filled = prominence === "filled";
+	return cn(ITEM_BASE, interactive ? INTERACTIVE_CHASSIS : void 0, interactive && tone === "neutral" ? "text-inherit" : void 0, interactive && !filled ? QUIET_GEOMETRY : void 0, filled ? FILLED_GEOMETRY : void 0, ITEM_TONES[tone], filled ? FILLED_TONES[tone] : void 0, interactive && !filled ? QUIET_GROUNDS : void 0, interactive && filled ? FILLED_GROUNDS[tone] : void 0);
+}
+//#endregion
+export { ITEM_BASE, STATUS_BAR_GROUP_CLASSES, statusBarItemClasses };

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

@@ -47,8 +47,76 @@ interface AppShellBarProps extends React.ComponentPropsWithoutRef<"div"> {
    * is worse than no cell.
    */
   brand?: React.ReactNode;
-  /** Extra classes for the header cell. */
+  /**
+   * 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 {

package/dist/chrome/app-shell.js

@@ -5,6 +5,7 @@ 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
@@ -121,21 +122,47 @@ const AppShell = {
 			})
 		});
 	}),
-	Bar: React.forwardRef(function AppShellBar({ className, brand, brandClassName, children, ...elementProps }, ref) {
+	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",
-			className: cn("flex h-(--cue-chrome-titlebar) w-full shrink-0 items-stretch border-b border-border bg-surface-1", className),
+			...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",
-				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", brandClassName),
-				children: brand
-			}), /* @__PURE__ */ jsx("div", {
-				"data-slot": "app-shell-bar-rest",
-				className: "flex min-w-0 flex-1 items-center gap-(--cue-space-3) px-(--cue-pad-row-x)",
-				children
-			})]
+			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) {

package/dist/chrome/index.d.ts

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