@cueplusplus/ui 0.5.0 → 0.7.0

package/manifest/components/table.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": false,
-  "description": "The canonical console table: hairlines, mono figures, no zebra striping.\n\nSemantic `<table>` markup throughout — a grid of divs loses row/column\nannouncement, and a console table is exactly the place a screen reader user\nneeds it. Zebra rows are deliberately absent: at console density the stripes\nare thicker than the data.\n\nStatic markup — no `\"use client\"`. Compose it with `Panel` for the rim.\nUse {@link TableScrollRegion} only when the table can exceed its container.",
+  "description": "The canonical console table: hairlines, mono figures, no zebra striping.\n\nSemantic `<table>` markup throughout — a grid of divs loses row/column\nannouncement, and a console table is exactly the place a screen reader user\nneeds it. Zebra rows are deliberately absent: at console density the stripes\nare thicker than the data.\n\nStatic markup — no `\"use client\"`. Compose it with `Panel` for the rim.\nUse {@link TableScrollRegion} only when the table can exceed its container.\n\nFor a grouped list, the table stays *one* table: `Table.Head sticky` docks the\ncolumn names, and one `Table.Body` per group opens with a `Table.GroupRow`\ndivider — so the columns are named once and scan straight through every group\nboundary. Rows may hold `DataRow` slots, and `DataRow.Actions` reveals inside\na cell on hover and on selection exactly as it does in a `Ledger` row — on\nfocus too, once the row holds something focusable outside the track, which a\n`<tr>` never is by itself. See {@link TableRowProps.interactive}.",
   "props": [],
   "typeReferences": [],
   "subcomponents": [
@@ -13,6 +13,7 @@
     "Header",
     "Body",
     "Row",
+    "GroupRow",
     "Head",
     "Cell",
     "Caption"
@@ -48,16 +49,83 @@
     {
       "name": "Row",
       "usage": "Table.Row",
-      "description": "One row, separated by a hairline underneath — dropped on the last row so the\ntable never draws a rule against the panel rim it sits in. In a `<thead>` the\n\"last row\" is the header row itself, so the header's own bottom border (on\nthe cells) is the only rule there and the two can never stack into 2px.",
-      "props": [],
+      "description": "One row, separated by a hairline underneath — dropped on the last row so the\ntable never draws a rule against the panel rim it sits in. In a `<thead>` the\n\"last row\" is the header row itself, so the header's own bottom border (on\nthe cells) is the only rule there and the two can never stack into 2px.\n\nEvery row carries the `group/data-row` name unconditionally. It paints\nnothing by itself, and it is what lets a `DataRow.Actions` cluster inside a\n`Table.Cell` reveal on hover, on focus and on selection with no second\nimplementation of that idiom for the table — the whole point of the three\nidioms sharing one row anatomy.\n\n**The focus half of that reveal is the caller's to supply here.** A `<tr>` is\nnot focusable and this component does not make it one — a tab stop on every\nrow of a long table is a tab stop a keyboard user has to walk past hundreds\nof times, which is the reason `Ledger` rows opt in individually. So the\nreveal-on-focus only happens if the row *contains* something focusable\noutside the hidden track: a link on the row's name, a checkbox in the leading\ncell, any real control. Without one, `:focus-within` can never fire — content\ninside a `visibility: hidden` subtree cannot be focused, so the track cannot\nbootstrap its own reveal — and a hidden action cluster is then reachable by\npointer only, which is a WCAG 2.1.1 failure the screen gives no sign of. A\ntable whose only per-row controls live in a hidden track wants either a\nfocusable cell beside it or an always-visible cluster.\n\nA caller who instead makes the *row* focusable — a `tabIndex` plus\n{@link activateRowFromClick } and {@link activateRowFromKeyDown }, which is the\nshape a row that opens a drawer takes — gets the focus ring from\n{@link TableRowProps.interactive} and needs to draw nothing of its own.\n\nThe selected tint is the row's, not the cell's: a `background` on the `<tr>`\nshows through every cell in it, so the fill cannot end up ragged where one\ncell sets a ground of its own.",
+      "props": [
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The row responds to a pointer and to focus: the row-hover wash, a pointer\ncursor across the whole row, and an inset focus ring. Defaults to `false`.\n\nOpt-in rather than automatic, because a table of figures nobody can click\nthat lit up under the pointer would be promising an interaction it does not\nhave. Wiring the row up to actually do something — a click handler, a\nkeyboard path to the same thing — stays the caller's job; this is the paint.\n\n**The focus ring ships with it, because the caller's half is what makes the\nrow focusable.** A `<tr>` cannot take focus on its own, so the moment a\ncaller gives one a `tabIndex` to run\n{@link activateRowFromKeyDown } against, a keyboard user can reach and\nactivate a row that shows nothing — a WCAG 2.4.7 failure the pointer user\nnever sees. The ring is *inset* (`-outline-offset-2`), the same ruling as\n`Row` and `DataRow.Root`: these tables live in clipped panes and scroll\nregions, where an outset ring on the first or last row is cut off by the\npane's own rim. `outline-solid` rides along with every `outline-<n>` here\nbecause Tailwind v4 leaves `--tw-outline-style` unset otherwise and the\nring never paints — `test/focus-ring.test.ts` is what keeps the pair\ntogether."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Draw the row as picked out of the table. Defaults to `false`.\n\nSets `data-selected`, which is what the tint and the hover-revealed\n`DataRow.Actions` inside the row both key off — so a hand-written\n`<tr data-selected>` in a data-driven body gets exactly the same treatment."
+        }
+      ],
       "typeReferences": [
         "React.ComponentPropsWithoutRef<\"tr\">"
       ]
     },
+    {
+      "name": "GroupRow",
+      "usage": "Table.GroupRow",
+      "description": "A group divider inside one continuous table.\n\nThe whole point is that it is *inside*: a grouped list drawn as one table per\ngroup names its columns once per group, so a reader scanning a column\ntop-to-bottom crosses a fresh header band at every boundary and a screen\nreader announces four tables where there is one dataset. So the table stays\none `<table>` with one `<thead>`, and each group is its own `<tbody>` — which\nis valid HTML, keeps the group's rows together, and gives the divider a row\ngroup to be the header of.\n\nThat last part is why the cell is a `<th scope=\"rowgroup\">` rather than a\nstyled `<td>`: `rowgroup` scope is exactly the statement \"this heading names\nthe rows of this `<tbody>`\", and it leaves the column headers' associations\nuntouched. A `<td colSpan>` divider is invisible to assistive technology as a\nheading, and a `<th scope=\"col\">` one would quietly re-scope the columns.\n\nNo `aria-expanded` here, and no toggle: groups in a table divide, they do not\nfold. A hierarchy that folds is `DataTree`, whose treeitem rows own their own\nexpansion — and if a table genuinely needs to fold rows, the pattern is a real\n`<button aria-expanded aria-controls>` inside this cell, never the row itself.\n\nThe divider can also be a real heading — see {@link * TableGroupRowProps.headingLevel}, which is how a page whose heading outline\nhas to survive a switch between the ledger, table and tree idioms keeps the\nsame `h2`/`h3` structure in all three.",
+      "props": [
+        {
+          "name": "span",
+          "type": "number",
+          "required": true,
+          "defaultValue": null,
+          "description": "How many columns the divider spans. Required: it must equal the table's\ncolumn count, or the group's cell stops covering the row and the columns\nbelow it shift by one."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "defaultValue": null,
+          "description": "What the group is called."
+        },
+        {
+          "name": "headingLevel",
+          "type": "4 | 2 | 3 | 5 | 6",
+          "required": false,
+          "defaultValue": null,
+          "description": "Make the label slot a real heading element. Defaults to `undefined` — no\nheading, and the label stays the `<span>` it has always been.\n\n**Set this rather than passing a heading as `label`.** The label slot wraps\nwhatever it is given, so an `<h2>` handed in as `label` lands *inside* a\n`<span>` — which renders, and exposes the heading, and does not validate: a\n`<span>` is phrasing content and may not contain a heading. With this prop\nthe wrapper *is* the heading (`<h2 data-slot=\"table-group-label\">`), so\nthere is nothing to nest.\n\nA heading inside a `<th>` is valid — `<th>` takes flow content — and it is\nuseful: a screen-reader user navigates a long grouped table by heading, and\nwithout one the group names are reachable only by walking the rows. The\n`scope=\"rowgroup\"` association is untouched either way; this adds the\ndivider to the document outline, it does not change what the cell heads.\n\nLevels run `2`–`6` because the outline has to describe the real nesting of\nthe page the table sits in, not the table's own idea of itself — the same\nruling as {@link LedgerTierProps.headingLevel }. There is no `1`: a group\ndivider is never the title of the document."
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "required": false,
+          "defaultValue": null,
+          "description": "How many rows the group holds, printed beside its name."
+        },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dock the divider under the header band while the group's rows scroll past.\nDefaults to `false`.\n\nThe offset is the custom property `--cue-table-group-top` (default `0`):\nhow far down the divider docks is the rendered height of the sticky header\nabove it, which depends on the density and type the caller configured. Set\nit on the table — `className=\"[--cue-table-group-top:2rem]\"` — rather than\nmeasuring at runtime."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Classes for the divider's *cell*, not its row.\n\nThe `<tr>` paints nothing — the ground, the type and the sticky offset all\nlive on the `<th>` that spans it, and a background on the row would sit\nbehind the cell's own. Every other prop, and the ref, go to the row."
+        }
+      ],
+      "typeReferences": [
+        "Omit<React.ComponentPropsWithoutRef<\"tr\">, \"children\">"
+      ]
+    },
     {
       "name": "Head",
       "usage": "Table.Head",
-      "description": "A column heading: the same mono uppercase label as `SectionHeader` and\n`Eyebrow`, on the raised surface so the band reads as chrome rather than as\nthe first row of data.",
+      "description": "A column heading: the same mono uppercase label as `SectionHeader` and\n`Eyebrow`, on the raised surface so the band reads as chrome rather than as\nthe first row of data.\n\n**Sticky swaps the bottom border for an inset shadow.** `Table.Root` collapses\nits borders, and a collapsed border belongs to the table's shared grid rather\nthan to the cell — so when a cell detaches to stay at the top of the scroll\ncontainer, its rule stays behind with the rows and the stuck band appears to\nlose its edge. An inset `box-shadow` is a paint effect on the cell itself, so\nit travels with it. The alternative — putting the whole table on\n`border-separate` — would change the geometry of every table in the library\nto fix one that scrolls.\n\nThe opaque `bg-surface-1` is not decoration either: a transparent sticky cell\nis a sticky cell you read the rows through. A caller who wants the header on\nthe page's own ground can pass `className=\"bg-bg\"` — what it must not pass is\nnothing.",
       "props": [
         {
           "name": "numeric",
@@ -65,6 +133,13 @@
           "required": false,
           "defaultValue": "false",
           "description": "Right-align this column and set it in tabular figures."
+        },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dock the header band to the top of the scroll container while the rows\nscroll under it. Defaults to `false`.\n\nSet it on the cells, not on the `<tr>`: sticky on a table row is honoured\ninconsistently across engines, and the cell is the reliable baseline\neverywhere."
         }
       ],
       "typeReferences": [
@@ -102,19 +177,30 @@
   "defaultVariants": {},
   "tokensUsed": [
     "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-bg",
     "--cue-border",
     "--cue-fg",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-hair-strong",
     "--cue-pad-row-x",
     "--cue-pad-row-y",
+    "--cue-row-hover",
+    "--cue-space-2",
     "--cue-space-3",
     "--cue-surface-1",
+    "--cue-table-group-top",
     "--cue-text-label",
     "--cue-text-ui"
   ],
   "summary": "The semantic table: mono uppercase headers, hairline rows, tabular numerals.",
   "examples": [
+    {
+      "title": "A grouped table whose groups are h3s",
+      "code": "{groups.map((group) => (\n  <Table.Body key={group.id}>\n    <Table.GroupRow span={2} headingLevel={3} label={group.label} count={group.rows.length} />\n    {group.rows.map((device) => (\n      <Table.Row key={device.id}>\n        <Table.Cell>{device.name}</Table.Cell>\n        <Table.Cell numeric>{device.latency}</Table.Cell>\n      </Table.Row>\n    ))}\n  </Table.Body>\n))}",
+      "language": "tsx"
+    },
     {
       "title": "Usage",
       "code": "<Table.Root>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Fixture</Table.Head>\n      <Table.Head numeric>Address</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Par 64</Table.Cell>\n      <Table.Cell numeric>001</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>",
@@ -137,7 +223,9 @@
   ],
   "commonMistakes": [
     "Leaving out `Table.Caption`, which is what names the table for a screen reader.",
-    "Wrapping cells in a `Row`. The table has its own row part."
+    "Wrapping cells in a `Row`. The table has its own row part.",
+    "Giving a row a `tabIndex` to make it activatable and then drawing no focus indicator. `Table.Row interactive` ships the inset focus ring along with the hover wash, so mark the row `interactive` rather than hand-rolling `focus-visible` classes on it.",
+    "Passing an `<h2>` as `Table.GroupRow`'s `label` to get a heading. The label slot wraps what it is given, so the heading lands inside a `<span>` — which renders, and does not validate. Set `headingLevel` and the wrapper becomes the heading."
   ],
   "specimens": [
     {
@@ -150,6 +238,26 @@
       "code": "<Panel className=\"w-full\">\n  <TableScrollRegion aria-label=\"Cue list table\">\n    <Table.Root>\n      <Table.Caption>Cue list</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.Head numeric>#</Table.Head>\n          <Table.Head>Label</Table.Head>\n          <Table.Head numeric>Fade</Table.Head>\n          <Table.Head>Follow</Table.Head>\n          <Table.Head numeric>Level</Table.Head>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {CUES.map((cue) => (\n          <Table.Row key={cue.id}>\n            <Table.Cell numeric>{cue.id}</Table.Cell>\n            <Table.Cell>{cue.label}</Table.Cell>\n            <Table.Cell numeric>{cue.time}</Table.Cell>\n            <Table.Cell>{cue.follow}</Table.Cell>\n            <Table.Cell numeric>{cue.level}%</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  </TableScrollRegion>\n</Panel>",
       "note": "The canonical console table inside its named horizontal scroll region: hairline rows, mono headers, and `numeric` cells that are right-aligned and tabular.",
       "interaction": "the scroll region is keyboard-focusable. Sorting, filtering and paging come from the DataTable recipe below."
+    },
+    {
+      "title": "Table — grouped",
+      "group": "instruments",
+      "components": [
+        "Table"
+      ],
+      "code": "<Panel className=\"w-full\">\n  <div className=\"max-h-[18rem] overflow-y-auto [--cue-table-group-top:1.75rem]\">\n    <Table.Root>\n      <Table.Caption>Patch, one table, two row groups.</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.Head sticky>Device</Table.Head>\n          <Table.Head sticky>Detail</Table.Head>\n          <Table.Head sticky numeric>\n            Latency\n          </Table.Head>\n          <Table.Head sticky className=\"sr-only\">\n            Actions\n          </Table.Head>\n        </Table.Row>\n      </Table.Header>\n      {PATCH_GROUPS.map((group) => (\n        <Table.Body key={group.id}>\n          <Table.GroupRow\n            span={4}\n            label={group.label}\n            count={group.rows.length}\n            sticky\n          />\n          {group.rows.map((device) => (\n            <Table.Row key={device.id} interactive>\n              {/* The name is a link, and that is load-bearing rather\n                  than decorative. A `<tr>` is not focusable, so\n                  without a real control somewhere outside the hidden\n                  action track nothing in the row can take focus,\n                  `:focus-within` never fires, and the Copy and\n                  Actions buttons are reachable by pointer only —\n                  visible to a mouse user, invisible to Tab. The\n                  ledger and the tree get this for free because their\n                  rows are focusable themselves; the table has to be\n                  given it. */}\n              <Table.Cell>\n                <Link href={`#patch-${device.id}`}>{device.name}</Link>\n              </Table.Cell>\n              <Table.Cell className=\"text-fg-muted\">{device.detail}</Table.Cell>\n              <Table.Cell numeric>{device.latency}</Table.Cell>\n              {/* The action column's width is a sum of the tokens it\n                  holds — two small controls, the gap between them and\n                  the cell's own padding on each side — so it stays\n                  right whatever the density does to any of them. */}\n              <Table.Cell className=\"w-[calc(2_*_var(--cue-control-sm)_+_var(--cue-space-1)_+_2_*_var(--cue-pad-row-x))]\">\n                <DataRow.Actions>\n                  <CopyButton\n                    value={device.id}\n                    size=\"sm\"\n                    className=\"w-control-sm px-0\"\n                  />\n                  <IconButton\n                    icon={MoreVertical}\n                    size=\"sm\"\n                    aria-label={`Actions for ${device.name}`}\n                  />\n                </DataRow.Actions>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      ))}\n    </Table.Root>\n  </div>\n</Panel>",
+      "note": "The same rows as one continuous table: `Table.Head sticky` docks the column names, and one `Table.Body` per group opens with a `Table.GroupRow` divider — a `th` with `scope='rowgroup'`, so the columns are named once and scan straight through every boundary.",
+      "interaction": "rows marked `interactive` take the row-hover wash across the whole row; `selected` tints it and reveals the action track. Tab reaches each row through its name link, which is what lets `:focus-within` reveal the track at all — a `tr` cannot take focus, so a table row whose only controls are in the hidden cluster would be pointer-only."
+    },
+    {
+      "title": "Table — group dividers as headings",
+      "group": "instruments",
+      "components": [
+        "Table"
+      ],
+      "code": "<Panel className=\"w-full\">\n  <Table.Root>\n    <Table.Caption>Patch, grouped into the page's outline.</Table.Caption>\n    <Table.Header>\n      <Table.Row>\n        <Table.Head>Device</Table.Head>\n        <Table.Head numeric>Latency</Table.Head>\n      </Table.Row>\n    </Table.Header>\n    {PATCH_GROUPS.map((group) => (\n      <Table.Body key={group.id}>\n        <Table.GroupRow\n          span={2}\n          headingLevel={3}\n          label={group.label}\n          count={group.rows.length}\n        />\n        {group.rows.map((device) => (\n          <Table.Row key={device.id}>\n            <Table.Cell>{device.name}</Table.Cell>\n            <Table.Cell numeric>{device.latency}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    ))}\n  </Table.Root>\n</Panel>",
+      "note": "`headingLevel` makes the divider's label slot a real `h3` instead of a `span`, so a grouped table joins the page's heading outline and a screen-reader user can jump between groups by heading. It is the prop to reach for rather than passing an `<h3>` as `label`: the label slot wraps what it is given, so a heading handed in that way lands inside a `<span>`, which may not contain one. The heading sits in the same `<th scope='rowgroup'>` as before — valid, because a `<th>` takes flow content — and wears the same type as the span form, so the level is in the outline and never in the design.",
+      "interaction": "none. Navigate by heading in a screen reader to hear the group names as an outline."
     }
   ]
 }

package/manifest/components/tags-input.json

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

package/manifest/components/textarea.json

@@ -32,12 +32,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-3",
@@ -69,7 +71,7 @@
       ],
       "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-3\">\n  <Textarea aria-label=\"Cue notes\" rows={3} defaultValue={\"House to half.\\nHold for VO.\"} />\n  <Textarea aria-label=\"Empty notes\" rows={3} placeholder=\"Notes for the operator\" />\n  <Textarea aria-label=\"Disabled notes\" rows={3} defaultValue=\"Read-only\" disabled />\n</div>",
       "note": "The same chassis, grown to a block.",
-      "interaction": "same rim and ring as Input."
+      "interaction": "same rim and ring as Input: one flush focus-colour ring, no outer halo."
     }
   ],
   "todo": true

package/manifest/components/time-field.json

@@ -35,12 +35,14 @@
     "--cue-accent",
     "--cue-accent-fg",
     "--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/title-bar.json

@@ -12,7 +12,7 @@
       "type": "boolean",
       "required": false,
       "defaultValue": "false",
-      "description": "Make the bar a window drag handle.\n\nEmits `data-tauri-drag-region` (Tauri reads the attribute) *and* the\n`app-region: drag` CSS property (Electron and Chromium read that), because\nthe same component ships into both shells and neither one recognises the\nother's contract. The interactive clusters are carved back out with\n`app-region: no-drag`, or the buttons in the bar would only ever move the\nwindow instead of firing."
+      "description": "Make the bar a window drag handle.\n\nEmits `data-tauri-drag-region` (Tauri reads the attribute) *and* the\n`app-region: drag` CSS property (Electron and Chromium read that), because\nthe same component ships into both shells and neither one recognises the\nother's contract. The interactive clusters are carved back out with\n`app-region: no-drag`, or the buttons in the bar would only ever move the\nwindow instead of firing. Both halves of that contract live in\n`./_drag.ts`, which `AppShell.Bar` emits from as well — the two bars are\ndraggable the same way or they are not draggable the same way.\n\nDouble-click-to-maximise is not wired here. Tauri's own injected script\nalready provides it on any drag region, cancel-by-dragging-away on macOS\nincluded; Electron provides nothing, and an Electron app has to listen for\n`dblclick` and toggle the window itself. Neither is a decision a component\nin a design system can make on the window's behalf.\n\nDefaults to `false`."
     },
     {
       "name": "center",

package/manifest/components/toggle-group.json

@@ -60,12 +60,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/toggle.json

@@ -60,6 +60,7 @@
     "--cue-accent",
     "--cue-accent-soft",
     "--cue-border",
+    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
@@ -67,6 +68,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "library": "@cueplusplus/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "cue",
@@ -29,7 +29,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "6836c983064e9e35eb26caff3366f2b19e19233646c3ffe47bca084b121b3e9b"
+    "sha256": "6672f3007cb48503b465985501b881b7d5144816bc716d4350e7d9bd7b7c566e"
   },
   "systemApis": [
     {
@@ -303,7 +303,7 @@
       "mdUrl": "/docs/components/composer.md",
       "jsonUrl": "/r/components/composer.json",
       "path": "./components/composer.json",
-      "sha256": "cd6b79f2a23c7ec973d5e22a3ab01ea82d813495ac26e52354a2c3aa3435a78e"
+      "sha256": "623c6c99e1a4890d582e5bb2f3c1fbf6ec42fcb8383e51cad360ac935d875a88"
     },
     {
       "name": "DelegationCard",
@@ -368,7 +368,7 @@
       "mdUrl": "/docs/components/app-shell.md",
       "jsonUrl": "/r/components/app-shell.json",
       "path": "./components/app-shell.json",
-      "sha256": "bbf75533291274d02f1815b2e7b8b325febc009557c524376b71ccf67f282eba"
+      "sha256": "5ac38bfecf8b97b77fa5692d84e2dd4eab3a46a1e3e42578ea17fbc7c3fa7ccc"
     },
     {
       "name": "EmptyState",
@@ -544,13 +544,13 @@
       "slug": "status-bar",
       "group": "chrome",
       "importPath": "@cueplusplus/ui",
-      "summary": "The quiet strip along the bottom of a window.",
-      "status": "todo-docs",
+      "summary": "The quiet strip along the bottom of a window: readings by default, controls where the reading is worth clicking.",
+      "status": "stable",
       "url": "/docs/components/status-bar",
       "mdUrl": "/docs/components/status-bar.md",
       "jsonUrl": "/r/components/status-bar.json",
       "path": "./components/status-bar.json",
-      "sha256": "d729d1e5de4a80e5e2075453bc540b3857b3f02b1d564442d58f2e6fcbefebc0"
+      "sha256": "c38c69a055f044328a1d40e0f9cf6f0cc6635a648a2cf0f7f9ed719423e60653"
     },
     {
       "name": "Tabs",
@@ -576,7 +576,7 @@
       "mdUrl": "/docs/components/title-bar.md",
       "jsonUrl": "/r/components/title-bar.json",
       "path": "./components/title-bar.json",
-      "sha256": "f664e5beaff9318cbe78f6a09a9e897f1329a1d17c1efae141640b9222d6c615"
+      "sha256": "f32f134785d92bc35a6184f30495329b315f9329fe3c9331fbce0fc3415b1a61"
     },
     {
       "name": "Toolbar",
@@ -641,7 +641,7 @@
       "mdUrl": "/docs/components/color-field.md",
       "jsonUrl": "/r/components/color-field.json",
       "path": "./components/color-field.json",
-      "sha256": "86ed08ae41e70abf87e1d679d850f6b4596450b7b495911d5fcb2a25967b9644"
+      "sha256": "1bc8a5cd4904e5a6ae383e9252ecfee51cb0e895db185af05f66b56660045749"
     },
     {
       "name": "ColorPicker",
@@ -654,7 +654,7 @@
       "mdUrl": "/docs/components/color-picker.md",
       "jsonUrl": "/r/components/color-picker.json",
       "path": "./components/color-picker.json",
-      "sha256": "4e70121389acccc23a68df2e14892f3c22bb7dff0df845740fcdbe180f2ac771"
+      "sha256": "948344684ed4f1c869d67347e77dd6353373db63f250b1fe9b8c1a9f2300f53b"
     },
     {
       "name": "ColorSlider",
@@ -784,7 +784,7 @@
       "mdUrl": "/docs/components/date-field.md",
       "jsonUrl": "/r/components/date-field.json",
       "path": "./components/date-field.json",
-      "sha256": "250d6c1815cae1660bf10bc8c76c9157854abff5ecc7dc3f82413ac48c68a950"
+      "sha256": "8b27007d07f8d8b9383a1454032d80ca9b5b066fca55f2fbfeed559c7270b1d4"
     },
     {
       "name": "DatePicker",
@@ -797,7 +797,7 @@
       "mdUrl": "/docs/components/date-picker.md",
       "jsonUrl": "/r/components/date-picker.json",
       "path": "./components/date-picker.json",
-      "sha256": "afce0ceaa0e3df02731c2ecd2db2a92a2785bbff1d790e8700ba3192ef145db4"
+      "sha256": "0956a1fbb0c6704b81d03617ecce78b61338c3683e7ebe1f2cc08cc9b45f77dc"
     },
     {
       "name": "DateRangePicker",
@@ -810,7 +810,7 @@
       "mdUrl": "/docs/components/date-range-picker.md",
       "jsonUrl": "/r/components/date-range-picker.json",
       "path": "./components/date-range-picker.json",
-      "sha256": "18322058c069f18a98d289be0492700a46b391818543a31af9a60bbcd20e58a8"
+      "sha256": "f4462db91f5beb8240d76e20c87989e1109f950ad00369a12a0470871890ff1f"
     },
     {
       "name": "TimeField",
@@ -823,7 +823,7 @@
       "mdUrl": "/docs/components/time-field.md",
       "jsonUrl": "/r/components/time-field.json",
       "path": "./components/time-field.json",
-      "sha256": "804e1c46696baed0689e0aabdbedbaf2d8e0958d78c4d39e8e254ba709993b6a"
+      "sha256": "f47da2f4616ca30765cde2779a3ebb3cdb5271d65b7d27c0c6f951902ec9b4c6"
     },
     {
       "name": "ChannelMatrix",
@@ -2929,7 +2929,7 @@
       "mdUrl": "/docs/components/autocomplete.md",
       "jsonUrl": "/r/components/autocomplete.json",
       "path": "./components/autocomplete.json",
-      "sha256": "f92500062e1d5f35b88e0a8d743f56f7624cb3ddb9917e058565ef076482c573"
+      "sha256": "ea4bae3ea2882d400feb446c1b3b5da9ef65746fdcf746e0c7151ab660587e2a"
     },
     {
       "name": "ButtonGroup",
@@ -2981,7 +2981,7 @@
       "mdUrl": "/docs/components/combobox.md",
       "jsonUrl": "/r/components/combobox.json",
       "path": "./components/combobox.json",
-      "sha256": "2473819b0a3e68845cea78345fb20668d98593d067d87327f10828b17803d986"
+      "sha256": "f2a675181d222c35fbab5584629f1635863ec27ccd90930b23288250c03d6021"
     },
     {
       "name": "EnvVarInput",
@@ -2994,7 +2994,7 @@
       "mdUrl": "/docs/components/env-var-input.md",
       "jsonUrl": "/r/components/env-var-input.json",
       "path": "./components/env-var-input.json",
-      "sha256": "75d21eb0ddd90a77a92b2d88ad447a01b2455aabd367044bc9965cec5a96ab2d"
+      "sha256": "92d5cc93d0ec6d36b485e3d4c118f0c805f620accb17f506d34c1a451e59bdd7"
     },
     {
       "name": "Field",
@@ -3072,7 +3072,7 @@
       "mdUrl": "/docs/components/input.md",
       "jsonUrl": "/r/components/input.json",
       "path": "./components/input.json",
-      "sha256": "70cf627df733c15f0729431e1809d81cd81aec14e013bc6bed852d06f7e6c777"
+      "sha256": "7731053809b13c537a42bde4cbb356ed7cd839a1630262e8bfecf4be38b90d21"
     },
     {
       "name": "InputGroup",
@@ -3085,7 +3085,7 @@
       "mdUrl": "/docs/components/input-group.md",
       "jsonUrl": "/r/components/input-group.json",
       "path": "./components/input-group.json",
-      "sha256": "63244ca5ef6493f5a854ca210327681355b37ab143b3f154ed22e3bb38472853"
+      "sha256": "e349576731ad72f2a60892eb37df2bc451e63be404e08656c4a61cd61ace3e8d"
     },
     {
       "name": "MultiSelect",
@@ -3098,7 +3098,7 @@
       "mdUrl": "/docs/components/multi-select.md",
       "jsonUrl": "/r/components/multi-select.json",
       "path": "./components/multi-select.json",
-      "sha256": "de04f17b173eb2ab4413b23a705c3fa36e3af06145a5302ec830b56e74e8fb93"
+      "sha256": "272814fcd0984c97896635b34c47151a9bf189345de0c3b116768a025fb636b5"
     },
     {
       "name": "NumberField",
@@ -3111,7 +3111,7 @@
       "mdUrl": "/docs/components/number-field.md",
       "jsonUrl": "/r/components/number-field.json",
       "path": "./components/number-field.json",
-      "sha256": "fae91aab74e82bba4728c56d2824810ae2269d095da1d14c9a07123c3e75af12"
+      "sha256": "a475135cc03488bbe5b70188b0b992596b2eff69720245d9e8d679fd571c0196"
     },
     {
       "name": "OTPField",
@@ -3124,7 +3124,7 @@
       "mdUrl": "/docs/components/otp-field.md",
       "jsonUrl": "/r/components/otp-field.json",
       "path": "./components/otp-field.json",
-      "sha256": "66df23bc408cbf14e32c9a8b86cbd51bbf4af4dcf1580d32f9586fb53b26c0f5"
+      "sha256": "d8e1868d8ab9082abf894c1dfb1efb2c4c5826011949453ae77c7ca8985fcdd0"
     },
     {
       "name": "PasswordInput",
@@ -3137,7 +3137,7 @@
       "mdUrl": "/docs/components/password-input.md",
       "jsonUrl": "/r/components/password-input.json",
       "path": "./components/password-input.json",
-      "sha256": "d5e3b06f972a8861eb97638e3121da9b9c047d1045c9b3295519f07eea176bd1"
+      "sha256": "8d103f07b5b04db5c7b0c3eadedaba6b1fe4fd20ce19404906ed4161ba07ba9b"
     },
     {
       "name": "Radio",
@@ -3189,7 +3189,7 @@
       "mdUrl": "/docs/components/scrub-input.md",
       "jsonUrl": "/r/components/scrub-input.json",
       "path": "./components/scrub-input.json",
-      "sha256": "9cad5bb1635640db6d42a2526782aa3c67493789518d36ef674a7f2426b63a3c"
+      "sha256": "9267ef1f1662b1b727f92b14d848b76eea83c5532396fada5636d510f0afc6b7"
     },
     {
       "name": "SearchInput",
@@ -3202,7 +3202,7 @@
       "mdUrl": "/docs/components/search-input.md",
       "jsonUrl": "/r/components/search-input.json",
       "path": "./components/search-input.json",
-      "sha256": "845c791e8e421e00c3dc5f649ae24d1cf8363a88153648d44fee724e5a49f99f"
+      "sha256": "f16f2996ee7aab2ea26cc18a51b1a557c691c71200485488b1eb4a0a3f66a9ec"
     },
     {
       "name": "Select",
@@ -3215,7 +3215,7 @@
       "mdUrl": "/docs/components/select.md",
       "jsonUrl": "/r/components/select.json",
       "path": "./components/select.json",
-      "sha256": "d7a580b81ac52f5d152eb1bbe436994540f9444fde54ee8fc54fef0d7e660189"
+      "sha256": "0d8c07afb4a31810fc2ed2f71c54410d6ab71be1a6ede22ef89cbc585295280e"
     },
     {
       "name": "Slider",
@@ -3254,7 +3254,7 @@
       "mdUrl": "/docs/components/tags-input.md",
       "jsonUrl": "/r/components/tags-input.json",
       "path": "./components/tags-input.json",
-      "sha256": "84dc92b1e08e604e47d53a729c5b0f0da7ee66e84beb00ea568ac65ae739a7a4"
+      "sha256": "20601065198f7d1bca6ccd8c8b3755026d91813a221b80e7890474c4a25ffcf3"
     },
     {
       "name": "Textarea",
@@ -3267,7 +3267,7 @@
       "mdUrl": "/docs/components/textarea.md",
       "jsonUrl": "/r/components/textarea.json",
       "path": "./components/textarea.json",
-      "sha256": "f4a1bf66af3ca9861de843efcec07f86d9c646f850a4ef1d6c6b92e974c1c15b"
+      "sha256": "f4257e5c1373fbeee9f6318b8d876c667ddf4091ff8d30c4bcedf68ba1374d54"
     },
     {
       "name": "Toggle",
@@ -3280,7 +3280,7 @@
       "mdUrl": "/docs/components/toggle.md",
       "jsonUrl": "/r/components/toggle.json",
       "path": "./components/toggle.json",
-      "sha256": "68325d1f2f139d360008fbcb07b6375fc7999322694d7c37dee3a29cef832c19"
+      "sha256": "96cd056624eda0716275bb1f38d8ae9275b805df44232bd75e59a22b9167b538"
     },
     {
       "name": "ToggleGroup",
@@ -3293,7 +3293,7 @@
       "mdUrl": "/docs/components/toggle-group.md",
       "jsonUrl": "/r/components/toggle-group.json",
       "path": "./components/toggle-group.json",
-      "sha256": "a786ebfcb986782d408821e738f607ed38428daeab3695b01ce8b996f53b763e"
+      "sha256": "5d7b3e75bef4c67ced26f9442cd4ded01a1388536779f6de6a694a40324e958d"
     },
     {
       "name": "AudienceIcon",
@@ -3451,6 +3451,19 @@
       "path": "./components/copy-button.json",
       "sha256": "6221a1a4515991c7b83a87e16d26ec0b71698889129d5324b66f2f34c743c79c"
     },
+    {
+      "name": "DataRow",
+      "slug": "data-row",
+      "group": "instruments",
+      "importPath": "@cueplusplus/ui",
+      "summary": "The dense list row: six slots, a hover-revealed action track, and columns the caller declares.",
+      "status": "stable",
+      "url": "/docs/components/data-row",
+      "mdUrl": "/docs/components/data-row.md",
+      "jsonUrl": "/r/components/data-row.json",
+      "path": "./components/data-row.json",
+      "sha256": "2d9d18bea0dfbd9ae65527639e1a2238a5de80aa82fe69ae4f3ff18f1c296c65"
+    },
     {
       "name": "DataTablePagination",
       "slug": "data-table-pagination",
@@ -3477,6 +3490,19 @@
       "path": "./components/data-table-toolbar.json",
       "sha256": "9b463d77c030e3aab10758f97d0aac791f989666eb4f66f12e30effc420a776d"
     },
+    {
+      "name": "DataTree",
+      "slug": "data-tree",
+      "group": "instruments",
+      "importPath": "@cueplusplus/ui",
+      "summary": "A hierarchy of multi-column rows under real `role=\"tree\"` semantics, with CSS depth guides.",
+      "status": "stable",
+      "url": "/docs/components/data-tree",
+      "mdUrl": "/docs/components/data-tree.md",
+      "jsonUrl": "/r/components/data-tree.json",
+      "path": "./components/data-tree.json",
+      "sha256": "33244c5faf277716152a605c28726b0be0fb110f1bafa8b0b84f8a00a9315b55"
+    },
     {
       "name": "GroupBar",
       "slug": "group-bar",
@@ -3490,6 +3516,19 @@
       "path": "./components/group-bar.json",
       "sha256": "2b8155fc7b46836f3f0a25cb8a023da7228c124d5f5b209ae8136fd575aeb3f6"
     },
+    {
+      "name": "Ledger",
+      "slug": "ledger",
+      "group": "instruments",
+      "importPath": "@cueplusplus/ui",
+      "summary": "Grouped dense rows under sticky tier headings and gutter slugs, with no disclosure anywhere.",
+      "status": "stable",
+      "url": "/docs/components/ledger",
+      "mdUrl": "/docs/components/ledger.md",
+      "jsonUrl": "/r/components/ledger.json",
+      "path": "./components/ledger.json",
+      "sha256": "129b47da8898b856d150ae7c6901e1e5340cabacd15457b860aa03e80139c388"
+    },
     {
       "name": "LogViewer",
       "slug": "log-viewer",
@@ -3592,7 +3631,7 @@
       "mdUrl": "/docs/components/table.md",
       "jsonUrl": "/r/components/table.json",
       "path": "./components/table.json",
-      "sha256": "ac8adb61bd9de2e96a88cdf18e57d72a2f1d998f147fae69d045d48a363dd09a"
+      "sha256": "b4e6132a0cae4618117d374b3f9e0d5496d1b92128a1295d70337637261ad30d"
     },
     {
       "name": "TableScrollRegion",
@@ -3605,7 +3644,7 @@
       "mdUrl": "/docs/components/table-scroll-region.md",
       "jsonUrl": "/r/components/table-scroll-region.json",
       "path": "./components/table-scroll-region.json",
-      "sha256": "731161fd205e0ba36c8cb23f3008ee6a37633232657a70f5b6af02e5db5f3a5a"
+      "sha256": "fd8777365fd35362ea273a1bf17ccd028f56c9f9d7c18d211f0587514c9a9f8c"
     },
     {
       "name": "TerminalFrame",
@@ -3878,7 +3917,7 @@
       "mdUrl": "/docs/components/musical-time-input.md",
       "jsonUrl": "/r/components/musical-time-input.json",
       "path": "./components/musical-time-input.json",
-      "sha256": "165526c38500f36f64bbed3ed16e45cb2a5b8c9d6651a98e52b5e4e648eb89d6"
+      "sha256": "3a7282c75cb40530a1ff7d5742b24b810cd833810b9f2032c9c3a4d65538f077"
     },
     {
       "name": "PianoKeyboard",