@cueplusplus/ui 0.5.0 → 0.6.0

package/dist/instruments/table.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/table.tsx
 /**
 * A named horizontal viewport for a table wider than its container.
@@ -20,6 +20,108 @@ const TableScrollRegion = React.forwardRef(function TableScrollRegion({ classNam
 	});
 });
 /**
+* The table frame. Owns the type, the collapse and the numeric alignment rule.
+*
+* `data-numeric` is the contract, not a prop: the alignment and
+* `tabular-nums` live in one descendant selector here, so a hand-written
+* `<td data-numeric>` inside a data-driven body lines up exactly like a
+* `<Table.Cell numeric>`. Figures that do not share a column width are
+* unreadable as a column, which is the whole point of a table.
+*/
+const TableRoot = React.forwardRef(function TableRoot({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("table", {
+		ref,
+		"data-slot": "table",
+		className: cn("w-full border-collapse font-mono text-(length:--cue-text-ui) text-fg", "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
+		...elementProps
+	});
+});
+/** The header band. Sticky-able by the caller; sized by the row padding tokens. */
+const TableHeader = React.forwardRef(function TableHeader({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		"data-slot": "table-header",
+		className,
+		...elementProps
+	});
+});
+/** The data band. */
+const TableBody = React.forwardRef(function TableBody({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		"data-slot": "table-body",
+		className,
+		...elementProps
+	});
+});
+/**
+* One row, separated by a hairline underneath — dropped on the last row so the
+* table never draws a rule against the panel rim it sits in. In a `<thead>` the
+* "last row" is the header row itself, so the header's own bottom border (on
+* the cells) is the only rule there and the two can never stack into 2px.
+*
+* Every row carries the `group/data-row` name unconditionally. It paints
+* nothing by itself, and it is what lets a `DataRow.Actions` cluster inside a
+* `Table.Cell` reveal on hover, on focus and on selection with no second
+* implementation of that idiom for the table — the whole point of the three
+* idioms sharing one row anatomy.
+*
+* **The focus half of that reveal is the caller's to supply here.** A `<tr>` is
+* not focusable and this component does not make it one — a tab stop on every
+* row of a long table is a tab stop a keyboard user has to walk past hundreds
+* of times, which is the reason `Ledger` rows opt in individually. So the
+* reveal-on-focus only happens if the row *contains* something focusable
+* outside the hidden track: a link on the row's name, a checkbox in the leading
+* cell, any real control. Without one, `:focus-within` can never fire — content
+* inside a `visibility: hidden` subtree cannot be focused, so the track cannot
+* bootstrap its own reveal — and a hidden action cluster is then reachable by
+* pointer only, which is a WCAG 2.1.1 failure the screen gives no sign of. A
+* table whose only per-row controls live in a hidden track wants either a
+* focusable cell beside it or an always-visible cluster.
+*
+* The selected tint is the row's, not the cell's: a `background` on the `<tr>`
+* shows through every cell in it, so the fill cannot end up ragged where one
+* cell sets a ground of its own.
+*/
+const TableRow = React.forwardRef(function TableRow({ className, interactive = false, selected = false, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"data-slot": "table-row",
+		"data-selected": selected ? "" : void 0,
+		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer hover:bg-(--cue-row-hover)" : null, className),
+		...elementProps
+	});
+});
+/**
+* A column heading: the same mono uppercase label as `SectionHeader` and
+* `Eyebrow`, on the raised surface so the band reads as chrome rather than as
+* the first row of data.
+*
+* **Sticky swaps the bottom border for an inset shadow.** `Table.Root` collapses
+* its borders, and a collapsed border belongs to the table's shared grid rather
+* than to the cell — so when a cell detaches to stay at the top of the scroll
+* container, its rule stays behind with the rows and the stuck band appears to
+* lose its edge. An inset `box-shadow` is a paint effect on the cell itself, so
+* it travels with it. The alternative — putting the whole table on
+* `border-separate` — would change the geometry of every table in the library
+* to fix one that scrolls.
+*
+* The opaque `bg-surface-1` is not decoration either: a transparent sticky cell
+* is a sticky cell you read the rows through. A caller who wants the header on
+* the page's own ground can pass `className="bg-bg"` — what it must not pass is
+* nothing.
+*/
+const TableHead = React.forwardRef(function TableHead({ className, numeric = false, sticky = false, scope = "col", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		scope,
+		"data-slot": "table-head",
+		"data-numeric": numeric ? "" : void 0,
+		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		...elementProps
+	});
+});
+/**
 * The canonical console table: hairlines, mono figures, no zebra striping.
 *
 * Semantic `<table>` markup throughout — a grid of divs loses row/column
@@ -30,6 +132,14 @@ const TableScrollRegion = React.forwardRef(function TableScrollRegion({ classNam
 * Static markup — no `"use client"`. Compose it with `Panel` for the rim.
 * Use {@link TableScrollRegion} only when the table can exceed its container.
 *
+* For a grouped list, the table stays *one* table: `Table.Head sticky` docks the
+* column names, and one `Table.Body` per group opens with a `Table.GroupRow`
+* divider — so the columns are named once and scan straight through every group
+* boundary. Rows may hold `DataRow` slots, and `DataRow.Actions` reveals inside
+* a cell on hover and on selection exactly as it does in a `Ledger` row — on
+* focus too, once the row holds something focusable outside the track, which a
+* `<tr>` never is by itself. See {@link TableRowProps.interactive}.
+*
 * @example
 * <Table.Root>
 *   <Table.Header>
@@ -47,48 +157,32 @@ const TableScrollRegion = React.forwardRef(function TableScrollRegion({ classNam
 * </Table.Root>
 */
 const Table = {
-	Root: React.forwardRef(function TableRoot({ className, ...elementProps }, ref) {
-		return /* @__PURE__ */ jsx("table", {
-			ref,
-			"data-slot": "table",
-			className: cn("w-full border-collapse font-mono text-(length:--cue-text-ui) text-fg", "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
-			...elementProps
-		});
-	}),
-	Header: React.forwardRef(function TableHeader({ className, ...elementProps }, ref) {
-		return /* @__PURE__ */ jsx("thead", {
-			ref,
-			"data-slot": "table-header",
-			className,
-			...elementProps
-		});
-	}),
-	Body: React.forwardRef(function TableBody({ className, ...elementProps }, ref) {
-		return /* @__PURE__ */ jsx("tbody", {
-			ref,
-			"data-slot": "table-body",
-			className,
-			...elementProps
-		});
-	}),
-	Row: React.forwardRef(function TableRow({ className, ...elementProps }, ref) {
+	Root: TableRoot,
+	Header: TableHeader,
+	Body: TableBody,
+	Row: TableRow,
+	GroupRow: React.forwardRef(function TableGroupRow({ className, span, label, count, sticky = false, ...elementProps }, ref) {
 		return /* @__PURE__ */ jsx("tr", {
 			ref,
-			"data-slot": "table-row",
-			className: cn("border-b border-border last:border-b-0", className),
-			...elementProps
-		});
-	}),
-	Head: React.forwardRef(function TableHead({ className, numeric = false, scope = "col", ...elementProps }, ref) {
-		return /* @__PURE__ */ jsx("th", {
-			ref,
-			scope,
-			"data-slot": "table-head",
-			"data-numeric": numeric ? "" : void 0,
-			className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", className),
-			...elementProps
+			"data-slot": "table-group-row",
+			...elementProps,
+			children: /* @__PURE__ */ jsxs("th", {
+				colSpan: span,
+				scope: "rowgroup",
+				"data-slot": "table-group-cell",
+				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "table-group-label",
+					children: label
+				}), count === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "table-group-count",
+					className: "ml-(--cue-space-2) tabular-nums",
+					children: count
+				})]
+			})
 		});
 	}),
+	Head: TableHead,
 	Cell: React.forwardRef(function TableCell({ className, numeric = false, ...elementProps }, ref) {
 		return /* @__PURE__ */ jsx("td", {
 			ref,

package/dist/theming/_presets.js

@@ -263,7 +263,7 @@ const THEME_PRESETS = {
 			"info": "#1a75d2",
 			"stream": "hsl(212 78% 42%)",
 			"selection": "#cce0ff",
-			"focus": "#e06510",
+			"focus": "#c75600",
 			"data-ground": "#000000",
 			"scrim": "rgba(0,0,0,0.35)"
 		},
@@ -322,7 +322,7 @@ const THEME_PRESETS = {
 			"info": "#2f6fd0",
 			"stream": "hsl(221 78% 45%)",
 			"selection": "rgba(224,101,16,0.15)",
-			"focus": "#e06510",
+			"focus": "#c75600",
 			"data-ground": "#000000",
 			"scrim": "rgba(15,23,42,0.45)"
 		},
@@ -440,7 +440,7 @@ const THEME_PRESETS = {
 			"info": "#1a75d2",
 			"stream": "#0f6ac4",
 			"selection": "rgba(184,134,47,0.20)",
-			"focus": "#b8862f",
+			"focus": "#9f6e08",
 			"data-ground": "#000000",
 			"scrim": "rgba(0,0,0,0.55)"
 		},

package/manifest/components/app-shell.json

@@ -88,7 +88,7 @@
     {
       "name": "Bar",
       "usage": "AppShell.Bar",
-      "description": "The bar across the top of the frame, divided by the navigation column: a\nheader cell exactly the column's width, and the rest of the bar beside it.\n\n`TitleBar` and `AppBar` span the whole frame and know nothing about the\ncolumn under them, which is right for a document and wrong for a console\nthat has an app mark over its navigation: two boxes that are meant to read\nas one column have to be measured from one length, or they drift the first\ntime the column changes width. This is the bar that is measured that way. It\nreads `--cue-nav-width` from {@link AppShellRoot}, so railing the console\nmoves the cell and the column together with nothing to keep in sync.\n\nBelow `md` the cell takes its content's width instead. That is the same\ndecision the column and the drawer trigger already make and not a third one:\nbelow the breakpoint the column is not in the layout, and a cell aligned to\na column that is not there is 14rem of a 390px bar walled off for nothing.\n\nA `<div>` rather than a `<header>`, like `TitleBar` beside it: a console\nframe that also carries an `AppBar` would otherwise have two `banner`\nlandmarks, and a page that wants one can say `role=\"banner\"` here.",
+      "description": "The bar across the top of the frame, divided by the navigation column: a\nheader cell exactly the column's width, and the rest of the bar beside it.\n\n`TitleBar` and `AppBar` span the whole frame and know nothing about the\ncolumn under them, which is right for a document and wrong for a console\nthat has an app mark over its navigation: two boxes that are meant to read\nas one column have to be measured from one length, or they drift the first\ntime the column changes width. This is the bar that is measured that way. It\nreads `--cue-nav-width` from {@link AppShellRoot}, so railing the console\nmoves the cell and the column together with nothing to keep in sync.\n\nBelow `md` the cell takes its content's width instead. That is the same\ndecision the column and the drawer trigger already make and not a third one:\nbelow the breakpoint the column is not in the layout, and a cell aligned to\na column that is not there is 14rem of a 390px bar walled off for nothing.\n\nA `<div>` rather than a `<header>`, like `TitleBar` beside it: a console\nframe that also carries an `AppBar` would otherwise have two `banner`\nlandmarks, and a page that wants one can say `role=\"banner\"` here.\n\n**It is also the desktop app's one chrome row.** `platformDrag` gives it the\ndrag contract `TitleBar` has always had, and `center` and `actions` give it\nthe two slots that made a second stacked bar necessary — so a Tauri or\nElectron window spends one `--cue-chrome-titlebar` on furniture instead of\ntwo. See {@link AppShellBarProps.platformDrag} for why the attribute lands on\nthree surfaces rather than one.\n\nThe bar is always three nested clusters — brand content, leading children,\ntrailing actions — whether or not it is draggable. One shape, not two: the\ndrag mode is then a class on a box that already exists rather than a\ndifferent tree, and a caller's own CSS cannot be right in a browser and wrong\nin a shell. In an ordinary web shell each cluster grows into the space its\ncell gives it, so an `ms-auto` on a brand control still reaches the cell's\ntrailing edge exactly as it did before the clusters existed; under\n`platformDrag` the clusters shrink to their content instead, so that the\nslack stays on the attributed cell and the window can be dragged by it.",
       "props": [
         {
           "name": "brand",
@@ -102,7 +102,28 @@
           "type": "string",
           "required": false,
           "defaultValue": null,
-          "description": "Extra classes for the header cell."
+          "description": "Extra classes for the header cell — the bordered box that spans the\nnavigation column, not the row of brand content inside it. Anything about\nthe cell's width, rim or gutter belongs here; anything about how the mark\nand its controls sit belongs on the nodes passed as `brand`."
+        },
+        {
+          "name": "platformDrag",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Make the bar's dead space a window drag handle. Defaults to `false`.\n\nThis is the same contract {@link TitleBar } has always offered, on the bar\na console with a navigation column actually uses — a desktop app should\nnot need a `TitleBar` *and* an `AppShell.Bar` stacked on top of each other\nto get one draggable row, which is two chrome rungs of a small window\nspent on furniture.\n\nEvery structural surface is attributed and every interactive cluster is\ncarved back out, because the two shells this ships into fail in opposite\ndirections. Tauri matches the *exact* element under the cursor, so the\nbrand cell and the rest cell carry the attribute themselves — a click on\nthe cell's own dead space targets the cell, never the root beneath it, and\na bar that only attributed its root would be draggable nowhere. Electron\nbuilds a geometric mask from painted boxes instead and excludes nothing on\nits own, so the brand content, the leading children and `actions` each sit\nin a cluster marked `app-region: no-drag` — without it a button that merely\noverlaps the bar stops receiving clicks at all. See `./_drag.ts`.\n\n**It changes how the clusters are sized, and that is a trade.** Off, each\ncluster grows into its cell, so a caller's own `ms-auto` reaches the cell's\ntrailing rim. On, the clusters take their content's width and `actions` is\npushed over with `ms-auto` instead, because a cluster that fills its cell\nis a `no-drag` rectangle painted over every dead pixel the cell just\nattributed — the bar would be draggable nowhere but its paddings and its\none gap. The dead area belongs to the window in drag mode, and a caller who\nneeds content to reach the rim there should say so on a box of their own\ninside the cluster.\n\n`select-none` comes with it: dragging a window and selecting the text you\nstarted the drag on are the same gesture, and the shell wins.\n\nNot wired here: double-click-to-maximise. Tauri's injected script already\ndoes it for any drag region, macOS's cancel-by-dragging-away included.\nElectron does not, and an Electron app has to listen for `dblclick` and\ntoggle the window itself. Which of those an app is, is not something a\nlayout component can know."
+        },
+        {
+          "name": "center",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "A title centred on the **bar**, not between the cells beside it.\n\nAbsolutely positioned against the bar's own box, so it stays put when a\nbutton appears in `actions` or the column rails — the whole reason a\ndocument name in desktop chrome is not just another flex child.\n`pointer-events-none` so the dead space around a short title still drags,\nwhich is also what makes it click through to the drag surface underneath\nin Tauri, whose hit-testing is the browser's own.\n\nInert by construction. Anything the reader has to click belongs in\n`actions` or in `children`, where it can be carved out of the drag region."
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The trailing cluster: connection state, a run indicator, an overflow menu.\n\nPinned to the bar's trailing edge and never squeezed, so it reads as window\nfurniture rather than the end of a sentence. `children` keeps flowing into\nthe same cell ahead of it, which is what lets an existing web-shell caller\npass free-form content and gain a cluster without rearranging anything."
         }
       ],
       "typeReferences": [
@@ -289,13 +310,16 @@
     "--cue-chrome-titlebar",
     "--cue-control-md",
     "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
     "--cue-icon-md",
     "--cue-nav-width",
     "--cue-pad-row-x",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
-    "--cue-surface-1"
+    "--cue-surface-1",
+    "--cue-text-label"
   ],
   "summary": "The console frame: title bar, navigation, work area and status bar, one viewport tall with exactly one thing scrolling.",
   "examples": [
@@ -329,6 +353,11 @@
       "code": "<span className=\"group-data-[rail]/app-shell:hidden\">CUE++</span>",
       "language": "tsx"
     },
+    {
+      "title": "The desktop shape: one chrome row",
+      "code": "<AppShell.Bar\n  platformDrag\n  center=\"main-stage.cue\"\n  brand={<><AppShell.NavTrigger /><Eyebrow>cue++</Eyebrow></>}\n  actions={<><Chip tone=\"ok\">live</Chip><IconButton aria-label=\"Preview\" icon={Monitor} size=\"sm\" /></>}\n>\n  <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n</AppShell.Bar>",
+      "language": "tsx"
+    },
     {
       "title": "Where the footer goes",
       "code": "<AppShell.Content>\n  <AppShell.Scroller className=\"flex flex-col\">\n    <div className=\"flex-1\">{children}</div>\n    <Footer meta={…}>…</Footer>\n  </AppShell.Scroller>\n</AppShell.Content>",
@@ -366,7 +395,9 @@
     "Reaching for a viewport variant of your own because the shell has one. The `md` switch is licensed for navigation shape and nothing else; everything else in this system is intrinsically responsive.",
     "Hard-coding the navigation column's width somewhere else in the frame — a header cell, a toolbar offset, a sticky rule. Read `--cue-nav-width` instead, or the two drift the first time the column rails.",
     "Railing a column of items with no icons. At 3.5rem the label goes `sr-only` and the icon is all that is left; without one the reader gets an empty strip. `AppShell.Sidebar` takes `collapsible={false}` for exactly that column.",
-    "Ending the page with a `Footer` after `AppShell.Body`. A footer belongs to the content column — the last child of `AppShell.Scroller` — or it stretches under the navigation and pretends to be part of the frame."
+    "Ending the page with a `Footer` after `AppShell.Body`. A footer belongs to the content column — the last child of `AppShell.Scroller` — or it stretches under the navigation and pretends to be part of the frame.",
+    "Stacking a `TitleBar` above an `AppShell.Bar` in a desktop app to get a drag region. `AppShell.Bar platformDrag` is the same contract on the bar you already have, and two chrome rungs of a small window is a lot to spend on furniture.",
+    "Putting something clickable in `AppShell.Bar`'s `center`. It is `pointer-events-none` so the dead space around a short title still drags — an interactive centre belongs in `actions` or in `children`, where it is carved out of the drag region."
   ],
   "specimens": [
     {
@@ -378,6 +409,16 @@
       "code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border\">\n  {/* `h-[26rem]` overrides the shell's own `h-dvh`, and `main={false}`\n   * keeps it from emitting a second `<main>` inside the page already\n   * wrapping this corpus. Both are what embedding a whole-screen\n   * component in a bench costs. */}\n  <AppShell.Root className=\"h-[26rem]\" rail={rail} onRailChange={setRail}>\n    {/* The toggle is rendered here rather than by the shell: where the\n     * control lives is a decision about this bar, and persisting what\n     * it sets is a decision about hydration. Both are the caller's. */}\n    <AppShell.Bar\n      brand={\n        <>\n          <AppShell.NavTrigger />\n          <Eyebrow className=\"group-data-[rail]/app-shell:hidden\">CUE++</Eyebrow>\n          <IconButton\n            icon={PanelLeft}\n            size=\"sm\"\n            aria-label={rail ? \"Expand the sidebar\" : \"Collapse the sidebar\"}\n            aria-pressed={rail}\n            className=\"ms-auto\"\n            onClick={() => setRail(!rail)}\n          />\n        </>\n      }\n    >\n      <span className=\"font-mono text-(length:--cue-text-label) text-fg-muted\">\n        main-stage.cue\n      </span>\n      <Chip tone=\"ok\" className=\"ms-auto\">\n        live\n      </Chip>\n    </AppShell.Bar>\n\n    <AppShell.Body>\n      <AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n        <Sidebar.Section label=\"Show\">\n          <Sidebar.Item icon={List} active>\n            Cues\n          </Sidebar.Item>\n          <Sidebar.Item icon={Lightbulb} badge={<Chip>48</Chip>}>\n            Fixtures\n          </Sidebar.Item>\n        </Sidebar.Section>\n      </AppShell.Sidebar>\n\n      <AppShell.Content main={false}>\n        <Toolbar.Root aria-label=\"Cue list\">\n          <Toolbar.Button icon={Plus}>Add cue</Toolbar.Button>\n          <Toolbar.Separator />\n          <Toolbar.Button icon={Monitor}>Live</Toolbar.Button>\n        </Toolbar.Root>\n\n        <AppShell.Scroller>\n          <Panel>\n            <PanelHeader title=\"Cue stack\" actions={<Chip tone=\"ok\">live</Chip>} />\n            {CUES.map((cue) => (\n              <Row key={cue.id}>\n                <span className=\"w-[2rem] shrink-0 font-mono tabular-nums\">{cue.id}</span>\n                <span className=\"flex-1 truncate\">{cue.label}</span>\n                <span className=\"font-mono tabular-nums text-fg-muted\">{cue.time}</span>\n              </Row>\n            ))}\n          </Panel>\n        </AppShell.Scroller>\n      </AppShell.Content>\n\n      <AppShell.Aside aria-label=\"Inspector\" width=\"11rem\">\n        <SectionHeader label=\"Selected\" />\n        <p className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">\n          Its own scroller, so reading it never moves the work area.\n        </p>\n      </AppShell.Aside>\n    </AppShell.Body>\n\n    <StatusBar>\n      <StatusBar.Item tone=\"ok\">Art-Net</StatusBar.Item>\n      <StatusBar.Item push>Cue 4</StatusBar.Item>\n    </StatusBar>\n  </AppShell.Root>\n</div>",
       "note": "The console frame, and the arithmetic that holds it up: one viewport tall, an unbroken min-h-0 chain, and exactly one thing scrolling. AppShell.Bar divides the bar at the navigation column, so the mark over the column and the column itself are one box measured from one length. Boxed to 26rem here — a bench has no viewport to give it.",
       "interaction": "the button beside the mark rails the column to 3.5rem of icons, and the header cell over it narrows with it — one --cue-nav-width, rewritten once. The 4px strip on the column's edge does the same. Below 48rem the column is not rendered at all and the trigger opens the same navigation as a drawer."
+    },
+    {
+      "title": "AppShell.Bar",
+      "group": "chrome",
+      "components": [
+        "AppShell"
+      ],
+      "code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border\">\n  <AppShell.Root className=\"h-auto\">\n    <AppShell.Bar\n      platformDrag\n      center=\"main-stage.cue\"\n      brand={\n        <>\n          <AppShell.NavTrigger />\n          <Eyebrow>cue++</Eyebrow>\n        </>\n      }\n      actions={\n        <>\n          <Chip tone=\"ok\">live</Chip>\n          <IconButton aria-label=\"Preview\" icon={Monitor} size=\"sm\" />\n        </>\n      }\n    >\n      <Toolbar.Root aria-label=\"Playback\" className=\"border-0 bg-transparent px-0\">\n        <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n        <Toolbar.Button icon={Eye}>Blind</Toolbar.Button>\n      </Toolbar.Root>\n    </AppShell.Bar>\n  </AppShell.Root>\n</div>",
+      "note": "The same bar a console uses, given the desktop app's three extra slots: platformDrag hands every dead pixel to the window manager, center pins the document name to the middle of the bar rather than the middle of the space left over, and actions holds the trailing cluster. One chrome row instead of a TitleBar with a Toolbar stacked under it.",
+      "interaction": "the drag region is inert in a browser — there is no window to move — and live in Tauri and Electron, where it is also carved back out around the mark, the leading controls and the actions, so every one of them still takes its click. Double-click-to-maximise is Tauri's for free and the app's own work in Electron."
     }
   ]
 }

package/manifest/components/autocomplete.json

@@ -144,6 +144,7 @@
     "--cue-accent-soft",
     "--cue-border",
     "--cue-border-overlay",
+    "--cue-border-strong",
     "--cue-chip-h",
     "--cue-control-lg",
     "--cue-control-md",
@@ -152,6 +153,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-radius-control",

package/manifest/components/color-field.json

@@ -34,12 +34,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-1",

package/manifest/components/color-picker.json

@@ -130,12 +130,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-2",

package/manifest/components/combobox.json

@@ -144,6 +144,7 @@
     "--cue-accent-soft",
     "--cue-border",
     "--cue-border-overlay",
+    "--cue-border-strong",
     "--cue-chip-h",
     "--cue-control-lg",
     "--cue-control-md",
@@ -152,6 +153,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",

package/manifest/components/composer.json

@@ -130,12 +130,14 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-2",

package/manifest/components/data-row.json

@@ -0,0 +1,203 @@
+{
+  "name": "DataRow",
+  "slug": "data-row",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The dense interactive row, as one anatomy three surfaces share.\n\n`Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row\nmodel, and this is the model: a marker, a label, a description, tags, a\nfigure, and a trailing action cluster that is only there when you are looking\nat the row. Composing them yourself — rather than passing a `columns` array —\nis what keeps the primitive domain-neutral: a corpus of skills and a rig of\nfixtures need the same six slots and completely different columns.\n\nThe slots are thin: each is a `<span>` with a `data-slot`, the type and\ntruncation rule for its column, and nothing else. They may be used inside a\n`DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same\n`group/data-row` name, so `DataRow.Actions` reveals in the table idiom\nwithout a second implementation.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Marker",
+    "Label",
+    "Description",
+    "Tags",
+    "Meta",
+    "Actions"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "DataRow.Root",
+      "description": "The row itself: a grid line of slots, hairline-separated from its neighbours.\n\nNot a `<button>`, which is the one decision everything else here follows\nfrom. A dense row carries its own controls — a copy button, a menu trigger, a\nlink to the thing it names — and no button may contain them. So the row is a\n`<div>` that earns its keyboard behaviour explicitly:\n`tabIndex`, Enter/Space, and a click reading that leaves nested controls and\nmodifier-clicked links alone (see `activateRowFromClick` in `_data-row.ts`).\n\nGeometry comes from the density row tokens and the column tracks from\n`--cue-data-row-cols`, which the caller sets — see `DATA_ROW_COLUMNS`. The\ncount of children must equal the count of tracks at every width: a template\none track short is exactly how the trailing action cluster ends up wrapped\nonto a phantom second row.\n\n**Tightening the controls inside a row** is a scoped custom-property retune,\nnot a prop. `IconButton`, `CopyButton` and `Avatar` at `size=\"sm\"` read\n`--cue-control-sm`, and `Chip` reads `--cue-chip-h`; redeclaring those two on\na wrapper around the list — `<div className=\"[--cue-control-sm:1.25rem] [--cue-chip-h:1rem]\">` —\nshrinks every control inside it and nothing outside it. A class on the button\ncannot do this: `size-control-sm` is a utility, and utilities are not shadowed\nby a rule with a longer selector. Custom properties inherit, which is what\nmakes them the only lever that reaches inside a component you did not write.",
+      "props": [
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The row responds to a pointer and to the keyboard: hover wash, `cursor`,\nan inset focus ring and a tab stop. Defaults to `false`."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Draw the row as picked out of the list. Defaults to `false`.\n\nSets `data-selected`, which is also what the hover-revealed action track and\nthe accent tint key off — so a `<tr data-selected>` in the table idiom gets\nexactly the same treatment without going through this component."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Grey the row out and stop it responding to anything. Defaults to `false`."
+        },
+        {
+          "name": "onActivate",
+          "type": "(() => void)",
+          "required": false,
+          "defaultValue": null,
+          "description": "What \"open this row\" means — a drawer, a detail pane, a route."
+        },
+        {
+          "name": "disclosure",
+          "type": "DataRowDisclosure",
+          "required": false,
+          "defaultValue": null,
+          "description": "Expose the row as a disclosure: `data-expanded` always, `aria-expanded`\nwhen the row has a `role` that can carry it, and `aria-controls` when the\ndisclosed element is on the page.\n\n**`aria-expanded` is gated on the role, because on a bare `<div>` it is\nworse than nothing.** A role-less div maps to `generic`, which supports\nonly the global attributes — so the state is dropped outright by Blink,\nWebKit and Gecko alike (verified through Chromium's own accessibility\ntree), announces nothing, and adds a critical `aria-allowed-attr` finding\nto any axe run over the console that used it. `role` passes straight\nthrough as a div prop, so a row that genuinely is a disclosure says which\nkind it is — `role=\"button\"` for a row that opens a drawer, `role=\"row\"`\ninside a grid — and gets the attribute with it. Everything else gets\n`data-expanded`, which styles and tests exactly as well and promises\nnothing to a screen reader.\n\nThe row is still not given a widget role on its own account: a\n`role=\"button\"` row could not legally hold the buttons and links these rows\nexist to contain, and that judgement belongs to the caller who knows what\ntheir row does. Where the disclosure has to be bulletproof for assistive\ntechnology, reach for `DataTree` (real `treeitem` expansion) or a\n`Table.GroupRow` with a real toggle button in it."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Marker",
+      "usage": "DataRow.Marker",
+      "description": "The leading mark: a tick, a status dot, a kind glyph. Never the label.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    },
+    {
+      "name": "Label",
+      "usage": "DataRow.Label",
+      "description": "The primary column: what the row *is*.\n\n`min-w-0 truncate` rather than a wrap, because a dense list is scanned down a\ncolumn: one row that grew to two lines breaks the scan for every row after it.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    },
+    {
+      "name": "Description",
+      "usage": "DataRow.Description",
+      "description": "The secondary column: the sentence under the name, one line, muted.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    },
+    {
+      "name": "Tags",
+      "usage": "DataRow.Tags",
+      "description": "A run of `Chip`s or other marks, kept on one line and allowed to clip.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    },
+    {
+      "name": "Meta",
+      "usage": "DataRow.Meta",
+      "description": "The figure column: a count, a version, a duration.\n\n`tabular-nums` for the same reason every other figure in this library is set\nthat way — a changing digit must not shift the column under the reader.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    },
+    {
+      "name": "Actions",
+      "usage": "DataRow.Actions",
+      "description": "The trailing controls, revealed on hover, on focus and on selection.\n\nThree mechanisms, each guarding a specific failure:\n\n- **`invisible`, not `hidden`.** `visibility` keeps the cluster's box, so the\n  track it sits in is the same width at rest as it is revealed and nothing\n  in the row moves when the pointer arrives. `display: none` frees the space\n  and every column to its left slides on hover.\n- **`focus-within` reveals it too, and the row's own focus is what triggers\n  it.** `:focus-within` matches the element that *has* focus as well as one\n  that contains it, and that ordering is what keeps these controls reachable\n  at all: content inside a `visibility: hidden` subtree is not focusable, so\n  Tab could never enter a track that only appeared once something inside it\n  was focused. The row takes focus, the track appears, and Tab walks into it.\n  (Which is also why an interactive row is the shape to use when the row has\n  actions: on a static row nothing takes focus first.)\n- **`@media (hover: none)` shows it outright.** On a touch screen there is no\n  hover to reveal anything with, so the cluster is simply always there. This\n  is the `hover: none` query rather than `pointer: coarse` on purpose: what\n  the reveal depends on is hovering, not the pointer's precision, and a\n  trackpad-and-touchscreen laptop has both.\n\n**The host has to supply the focus, and not every host does.** Because the\ntrack cannot be entered until something outside it takes focus, a row with no\nfocusable element outside the cluster puts these controls beyond a keyboard\nuser entirely — visible to a mouse, unreachable by Tab, WCAG 2.1.1. An\ninteractive `DataRow.Root` and a `DataTree` `treeitem` are focusable rows and\nsatisfy this on their own; a `<tr>` is not, so a `Table.Row` holding this\ncluster needs a real focusable element of its own in another cell — the row's\nname as a link is the usual one, and `Table.Row`'s own note says so too.\n\n`data-stop` is the row's opt-out marker: a click anywhere inside this cluster\nnever opens the row (see `activateRowFromClick` in `_data-row.ts`).",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"span\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-chip-h",
+    "--cue-control-sm",
+    "--cue-data-row-cols",
+    "--cue-data-tree-indent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-hair",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-row-hover",
+    "--cue-space-1",
+    "--cue-space-3",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "The dense list row: six slots, a hover-revealed action track, and columns the caller declares.",
+  "examples": [
+    {
+      "title": "Declaring the tracks",
+      "code": "<Ledger.Root className=\"[--cue-data-row-cols:1.5rem_minmax(8rem,1fr)_6rem_auto]\">\n  <DataRow.Root interactive onActivate={() => open(device)}>\n    <DataRow.Marker>\n      <StatusDot tone=\"ok\" />\n    </DataRow.Marker>\n    <DataRow.Label>{device.name}</DataRow.Label>\n    <DataRow.Meta>{device.latency}</DataRow.Meta>\n    <DataRow.Actions>\n      <CopyButton value={device.id} size=\"sm\" className=\"w-control-sm px-0\" />\n      <IconButton icon={MoreVertical} size=\"sm\" aria-label={`Actions for ${device.name}`} />\n    </DataRow.Actions>\n  </DataRow.Root>\n</Ledger.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "The container, named",
+      "code": "<Ledger.Root className=\"patch [container-name:patch]\">…</Ledger.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "corpus.css",
+      "code": "@container patch (max-width: 46rem) {\n  .patch [data-slot=\"data-row\"] {\n    --cue-data-row-cols: 1.5rem minmax(8rem, 1fr) auto;\n  }\n  .patch [data-slot=\"data-row-description\"] {\n    display: none;\n  }\n}",
+      "language": "css"
+    },
+    {
+      "title": "A density island for the list, not for the app",
+      "code": "<div className=\"[--cue-chip-h:1rem] [--cue-control-sm:1.25rem]\">\n  <Ledger.Root>…</Ledger.Root>\n</div>",
+      "language": "tsx"
+    },
+    {
+      "title": "Usage",
+      "code": "<DataRow.Root interactive onActivate={() => open(skill)}>\n  <DataRow.Marker><StatusDot tone=\"ok\" /></DataRow.Marker>\n  <DataRow.Label>{skill.name}</DataRow.Label>\n  <DataRow.Meta>{skill.installs}</DataRow.Meta>\n</DataRow.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/data-row",
+  "mdUrl": "/docs/components/data-row.md",
+  "jsonUrl": "/r/components/data-row.json",
+  "whenToUse": [
+    "A list of hundreds of records that is scanned down a column and opened one at a time — a corpus, a patch, a run log.",
+    "Any row that has to look identical in a `Ledger`, a grouped `Table` and a `DataTree`, because all three draw this anatomy."
+  ],
+  "whenNotToUse": [
+    "A panel's label-and-value lines. Use `Row`, which is a real `<button>` when it acts and needs no column tracks.",
+    "One object's fields. Use `DescriptionList`.",
+    "A row whose only job is to run one action. Use a `Button` — this row exists because rows contain controls, and a row that has just one should be the control."
+  ],
+  "commonMistakes": [
+    "Rendering more children than the tracks in `--cue-data-row-cols`. The extra child wraps onto a phantom second row, which is what the count rule exists to prevent.",
+    "Shedding a column by branching `className` in JSX. A utility outranks the `@container` rule meant to hide it, so the child survives while the template loses its track — declare the shed child's `display` in the stylesheet that changes the template.",
+    "Putting a `@container` rule's subject on `Ledger.Root` itself. It is the size container, and nothing is its own container — that rule never matches, while the `display: none` rule on the slots inside does, so the row sheds a child and keeps its track. Target a descendant: `.patch [data-slot=\"data-row\"]`.",
+    "Shrinking the controls inside rows with `h-5 w-5` on each button. Redeclare `--cue-control-sm` and `--cue-chip-h` on a wrapper instead; custom properties inherit and reach inside components you did not write.",
+    "Wrapping the row in a `<button>` or giving it `role=\"button\"` to get keyboard behaviour. It already has Enter and Space, and a button may not contain the row's own buttons and links."
+  ],
+  "specimens": [
+    {
+      "title": "DataRow",
+      "group": "instruments",
+      "components": [
+        "DataRow"
+      ],
+      "code": "<Panel className={`w-full ${PATCH_TRACKS}`}>\n  {PATCH_DEVICES.slice(0, 3).map((device, index) => (\n    <DataRow.Root key={device.id} interactive selected={index === 1}>\n      <PatchRowSlots device={device} />\n    </DataRow.Root>\n  ))}\n  <DataRow.Root disabled>\n    <PatchRowSlots device={{ ...PATCH_DEVICES[4], name: \"Offline monitor\" }} />\n  </DataRow.Root>\n</Panel>",
+      "note": "The row anatomy on its own: a marker, a name, a sentence, a figure and a trailing action track. The column tracks are the caller's, set as `--cue-data-row-cols` — the primitive never knows the dataset.",
+      "interaction": "hover, focus-within and selection each reveal the action track; it is hidden with `visibility`, so revealing it moves nothing else in the row. On a touch screen it is simply always there."
+    }
+  ]
+}