@nurix/etna 0.20.36 → 0.20.38

package/data/harnesses/code/skills/design/data/chrome/side-panel.md

@@ -1,8 +1,8 @@
 ---
 id: side-panel
 class: d2
-sourced: 2026-07-12
-source: "@nurix/components Sheet (shadcn sheet on @radix-ui/react-dialog, extended with size variants + SheetBody) — ~/dev/components"
+sourced: 2026-10-07
+source: "@nurix/components Sheet (Base UI Dialog with a logical side, a size ladder and a header/body/footer skeleton) — ~/dev/components"
 license: open
 ---
 
@@ -14,23 +14,23 @@ The slide-in detail/edit panel: a modal surface anchored to a screen edge with a
 
 | Slot | Library part | Spec |
 | --- | --- | --- |
-| Root | `Sheet` | Open-state owner; controlled (`open`/`onOpenChange`) or uncontrolled via trigger. |
-| Trigger | `SheetTrigger` | Any element (`asChild`) that opens the panel — a table row's action, a card, a button. |
-| Overlay | `SheetOverlay` | Full-viewport scrim behind the panel; fades with open state; click closes. |
-| Panel | `SheetContent { side: "right" (default) \| "left" \| "top" \| "bottom", size: "sm" 320px \| "md" 384px \| "default" 480px \| "lg" 640px \| "xl" 800px \| "full", showCloseButton?, showOverlay? }` | Fixed to the chosen edge, full-height (left/right), hairline border on the attached edge, elevated shadow, vertical flex column. Below the small breakpoint it takes ~full width regardless of size. |
-| Header | `SheetHeader { showDivider? }` | Shrink-to-content top region: `SheetTitle` (the accessible name — a visually hidden fallback title exists, but a real one is the spec) + `SheetDescription` in muted text. |
-| Body | `SheetBody { noPadding? }` | `flex-1` scroll region — the only part that scrolls; long content never pushes the footer off-screen. |
-| Footer | `SheetFooter { showDivider? }` | Bottom-anchored action row (`mt-auto`): primary commit right, secondary/cancel beside it. |
-| Close | `SheetClose` + built-in ✕ | Corner close button (top-right, 70% opacity at rest) plus any element wrapped in `SheetClose`. |
+| Root | `Sheet { open?, defaultOpen?, onOpenChange?, modal?, dismissible?, intent?, labels? }` | Open-state owner; controlled (`open`/`onOpenChange`) or uncontrolled via trigger. `dismissible={false}` refuses Escape and the scrim; `intent="danger"` makes it an alert dialog. |
+| Trigger | `Sheet.Trigger` | Any element (`render`) that opens the panel — a table row's action, a card, a button. |
+| Overlay | drawn by `Sheet.Popup` (styled through `overlayClassName`) | Full-viewport scrim behind the panel; fades with open state; click closes. `<Sheet modal={false}>` draws none. |
+| Panel | `Sheet.Popup { side: "end" (default) \| "start" \| "top" \| "bottom", size: "xs" 288px \| "sm" 320px \| "default" 480px \| "lg" 640px \| "full", hasCloseButton? }` | Fixed to the chosen edge — `start`/`end` follow the writing direction — full-height (start/end), hairline border on the attached edge, elevated shadow, vertical flex column. `size` is the width of a start/end panel and the height cap of a top/bottom one. Below the small breakpoint a start/end panel takes three quarters of the width regardless of size. |
+| Header | `Sheet.Header { hasDivider? }` | Shrink-to-content top region: `Sheet.Title` (the accessible name — an untitled panel is named from `labels.title`, "Sheet" by default, so a real title is the spec) + `Sheet.Description` in muted text. |
+| Body | `Sheet.Body` | `flex-1` scroll region — the only part that scrolls; long content never pushes the footer off-screen. Its `className` styles the padded content box; `className="p-0"` drops the inset. |
+| Footer | `Sheet.Footer { hasDivider? }` | Bottom-anchored action row (`mt-auto`): primary commit right, secondary/cancel beside it. |
+| Close | `Sheet.Close` + built-in ✕ | Corner close button (ghost, icon-only, `xs`, top end corner, muted at rest), drawn while the panel is dismissible, plus any element rendered as `Sheet.Close`. |
 
 ## The eight states
 
 | State | Spec | Token roles |
 | --- | --- | --- |
 | default | Open at rest: panel on the base surface over the scrim; header/body/footer stacked; hairline dividers where opted in. | `background`, `border`, `foreground`, `muted-foreground` (description) |
-| hover | Corner close sharpens from 70% to full opacity; interior controls follow their own recipes. | control-level roles |
+| hover | Corner close takes the ghost button's hover wash; interior controls follow their own recipes. | control-level roles |
 | focus | Focus is trapped inside the open panel; the close button and every control show a focus-visible ring. | `ring` |
-| active | Open/closed is expressed as `data-state` driving the slide + fade transition. The library ships 500ms in / 300ms out; the A6 panel budget (200–280ms, interruptible) governs — the package motion base overrides the stock duration, and a non-interruptible slide is a bug, not a style. | — |
+| active | Open/closed is expressed as `data-open` / `data-closed`; the slide + fade is a tween on the slow motion step (300ms at the neutral pace) with the travel ease, and reduced motion drops the travel. The A6 panel budget (200–280ms, interruptible) governs — the package's `pace` brings the slow step inside it, and a non-interruptible slide is a bug, not a style. | — |
 | disabled | The commit action disables (~50% opacity, no pointer events) while the form is invalid or a save is in flight; the panel itself never disables — Escape and close always work. | reduced-alpha on controls |
 | loading | Record still resolving: header renders immediately with the known title, body shows skeleton blocks, footer actions disabled. The panel never opens empty-then-jumps. | `muted` (skeleton) |
 | error / empty | Save failure: inline error summary at the top of the body plus per-field errors — the panel stays open, input preserved. A missing record renders an empty state in the body with a close affordance. | `destructive`, `muted-foreground` |
@@ -49,12 +49,12 @@ The slide-in detail/edit panel: a modal surface anchored to a screen edge with a
 - `background` — the panel surface; `border` — the attached-edge hairline and the header/footer dividers.
 - `foreground` / `muted-foreground` — title / description and secondary text.
 - `ring` — the focus trap's visible rings, including the corner close.
-- Scrim: the library hardcodes `black/50` — as a specification the scrim derives from a token (an overlay role, or `foreground` at low alpha) so dark themes don't double-darken; the token-reach report flags a literal scrim.
+- Scrim: the library paints `--scrim` (black at 50% in both modes) — as a specification the scrim derives from that token, restated per mode by the package so dark themes don't double-darken; the token-reach report flags a literal scrim.
 - Footer actions consume the button recipe's roles (`primary`/`primary-foreground`, `secondary`, `destructive`); inline errors consume `destructive`; skeletons consume `muted`.
 
 ## When to use / composition notes
 
-The side panel is edit-in-context: opening a record's detail or a scoped form beside a table, board, or list without losing the operator's position — the list stays visible under the scrim and scroll position survives the round trip. It is the wrong container for destructive confirmation (centered dialog), for navigation (sidebar), and for content that deserves its own URL (a full page — if operators share links to it, it's a page). Pick `size` by content: `sm`/`md` for quick property edits, `default`/`lg` for record detail, `xl` for side-by-side comparison; nested panels are a smell — a second level of depth means the flow wants a page. Footer actions: one primary commit, right-aligned; cancel is quiet, never a second primary.
+The side panel is edit-in-context: opening a record's detail or a scoped form beside a table, board, or list without losing the operator's position — the list stays visible under the scrim and scroll position survives the round trip. It is the wrong container for destructive confirmation (centered dialog), for navigation (sidebar), and for content that deserves its own URL (a full page — if operators share links to it, it's a page). Pick `size` by content: `xs`/`sm` for quick property edits, `default`/`lg` for record detail, `lg` or a width class for side-by-side comparison; nested panels are a smell — a second level of depth means the flow wants a page. Footer actions: one primary commit, right-aligned; cancel is quiet, never a second primary.
 
-- **`primitives: nurix`** — `import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";`
+- **`primitives: nurix`** — `import { Sheet } from "@nurix/components/block/sheet";` — parts hang off the namespace: `Sheet.Trigger`, `Sheet.Popup`, `Sheet.Header`, `Sheet.Title`, `Sheet.Description`, `Sheet.Body`, `Sheet.Footer`, `Sheet.Close`.
 - **`primitives: native`** — this recipe is the build spec: a portal-rendered fixed aside on the chosen edge with the size ramp above, dialog semantics (`role="dialog"`, `aria-modal`, labeled by the title), a real focus trap with focus restore, Escape + overlay close, a fixed-header / scrollable-body / pinned-footer column, and an interruptible slide within the panel motion budget — implemented with the incumbent stack's own dialog/drawer primitive.

package/data/harnesses/code/skills/design/data/chrome/sidebar.md

@@ -1,14 +1,14 @@
 ---
 id: sidebar
 class: d2
-sourced: 2026-07-12
-source: "@nurix/components Sidebar + opinionated layer (Brand, Switcher, ItemGroup, UserMenu, Callout, FileTree, SidebarCommandTrigger) — ~/dev/components"
+sourced: 2026-10-07
+source: "@nurix/components Sidebar + opinionated layer (Brand, Switcher, ItemGroup, UserMenu, CommandTrigger) and the sidebar-callout-card composition — ~/dev/components"
 license: open
 ---
 
 # Chrome recipe — sidebar
 
-The complete app-nav sidebar: brand block, searchable sections, badged items, promo slot, user footer, icon-collapse rail. One import path (`@nurix/components/sidebar`) carries both the unstyled shell primitives and the opinionated content layer.
+The complete app-nav sidebar: brand block, searchable sections, badged items, promo slot, user footer, icon-collapse rail. One import path (`@nurix/components/block/sidebar`) carries both the unstyled shell primitives and the opinionated content layer, every part a member of the `Sidebar` namespace.
 
 ## Anatomy
 
@@ -16,24 +16,24 @@ The complete app-nav sidebar: brand block, searchable sections, badged items, pr
 
 | Slot | Library part | Spec |
 | --- | --- | --- |
-| Provider | `SidebarProvider` | Owns open/collapsed state; persists it in a cookie (`sidebar_state`, 7 days); registers the global toggle shortcut. |
-| Frame | `Sidebar` | `collapsible: "icon" \| "offcanvas" \| "none"`. Widths: 16rem expanded, 3rem icon rail, 18rem as a mobile drawer below the `md` breakpoint (mobile renders as an overlay sheet, not an inline column). |
-| Header | `SidebarHeader` | Pinned top region — hosts the brand block or switcher, and the search trigger. |
-| Content | `SidebarContent` | The scrollable middle — one or more item groups. |
-| Footer | `SidebarFooter` | Pinned bottom region — promo slot and/or user footer. |
-| Rail | `SidebarRail` | Thin edge hit-area that toggles collapse on click. |
-| Inset | `SidebarInset` | The main-content wrapper beside the sidebar. |
-| Trigger | `SidebarTrigger` | Icon button (lives in the topbar) toggling the same state. |
+| Provider | `Sidebar.Provider` | Owns open/collapsed state (`open` / `defaultOpen` / `onOpenChange`, plus the mobile drawer's `openMobile` trio) and registers the global toggle shortcut (`keyboardShortcut`, default `b`). It stores nothing: persistence is the caller's — read the store into `defaultOpen`, write it from `onOpenChange`. |
+| Frame | `Sidebar` | `collapsible: "offcanvas" (default) \| "icon" \| "none"`, `side: "start" \| "end"`. Widths: 16rem expanded, a 3rem icon rail at the regular density (the item height plus its inset, so it follows `density`), 18rem as a mobile drawer below the `md` breakpoint (mobile renders as an overlay sheet, not an inline column). |
+| Header | `Sidebar.Header` | Pinned top region — hosts the brand block or switcher, and the search trigger. |
+| Content | `Sidebar.Content` | The scrollable middle — one or more item groups. |
+| Footer | `Sidebar.Footer` | Pinned bottom region — promo slot and/or user footer. |
+| Rail | `Sidebar.Rail` | Thin edge hit-area that toggles collapse on click. |
+| Inset | `Sidebar.Inset` | The main-content wrapper beside the sidebar. |
+| Trigger | `Sidebar.Trigger` | Icon button (lives in the topbar) toggling the same state. |
 
 **Content layer** (each grounded in the shipped props):
 
-- **Brand block** — `Brand { logo, name, caption?, href? }`: a 32px logo tile filled with `sidebar-primary` / `sidebar-primary-foreground`, name (medium weight) over an optional caption. Collapses to logo-only in icon mode.
-- **Switcher** — `Switcher { render: "simple" | "rich", drop: "bottom" | "right", options, activeId, onSelect, addAction?, menuLabel? }`: header dropdown for team/workspace/version. Options carry `{ id, label, sublabel?, icon?, shortcut? }`; an optional add-action row sits under a separator.
-- **Search trigger** — `SidebarCommandTrigger { placeholder, shortcut }`: a ⌘K search chip pinned to 32px height; in icon mode it swaps to a matched-height icon button with a tooltip, so the rail never shifts on collapse.
-- **Sections** — `ItemGroup { label?, render: "list" | "tree" | "rich", collapsible?, defaultOpen?, showMore?, items, itemsCollapsible?, compact?, collapsedLabel: "hide" | "divider" }`. `list` = flat rows with optional inline collapsible submenu; `tree` = recursive chevron tree; `rich` = two-line rows (label + sublabel + trailing hint). `collapsedLabel: "divider"` keeps a 32px hairline footprint in icon mode so groups stay separated without rail shift. `compact` halves group padding and tightens item gap.
-- **Item** — `{ id, label, icon?, badge?, state?, emoji?, avatar?, sublabel?, trailing?, isActive?, href?, onClick?, children? }`: one leading decoration (icon, emoji, or avatar), the label, and a trailing badge/state pill rendered outside the button (`SidebarMenuBadge`). `children` makes it a branch.
-- **Promo slot** — `Callout { title, description?, action?, input?: { kind: "email" | "text", placeholder?, onSubmit? } }`: a bordered card on a low-alpha `sidebar-accent` wash with title, description, optional single input + full-width action button. Hidden entirely in icon mode.
-- **User footer** — `UserMenu { user: { name, email, avatar? }, menuItems? }`: avatar (initials fallback) + name/email + up-down chevron; opens a dropdown (right of the rail on desktop, below on mobile) with an identity header and action items (`{ id, label, icon?, shortcut?, destructive? }`).
+- **Brand block** — `Sidebar.Brand { logo, name, caption?, href? }`: a 32px logo tile filled with `sidebar-primary` / `sidebar-primary-foreground`, name (medium weight) over an optional caption. Collapses to logo-only in icon mode.
+- **Switcher** — `Sidebar.Switcher { variant: "simple" | "rich", side: "bottom" | "inline-end", options, value / defaultValue, onValueChange(id, details), addAction?, menuLabel? }`: header dropdown for team/workspace/version. Options carry `{ id, label, sublabel?, icon?, shortcut? }`; an optional add-action row sits under a separator.
+- **Search trigger** — `Sidebar.CommandTrigger { children, shortcut?, collapsedTooltip? }`: a ⌘K search chip, its text as children, pinned to the sidebar item height (32px at the regular density); in icon mode it swaps to a matched-height icon button with a tooltip, so the rail never shifts on collapse.
+- **Sections** — `Sidebar.ItemGroup { label?, variant: "list" | "tree" | "rich", isCollapsible?, open / defaultOpen / onOpenChange, onShowMore?, items, hasCollapsibleItems?, defaultExpandedIds?, collapsedLabel: "hide" | "divider", labels?, onItemClick? }`. `list` = flat rows with optional inline collapsible submenu; `tree` = recursive chevron tree (a file tree is this variant with folder and file icons); `rich` = two-line rows (label + sublabel + trailing hint). `collapsedLabel: "divider"` keeps a hairline footprint in icon mode so groups stay separated without rail shift. Group spacing follows the `density` trait; there is no per-group compact switch.
+- **Item** — `{ id, label, icon?, badge?, state?, emoji?, avatar?, sublabel?, trailing?, isActive?, disabled?, href?, onClick?, children? }`: one leading decoration (icon, emoji, or avatar), the label, and a trailing badge/state pill rendered outside the button (`Sidebar.MenuBadge`). `children` makes it a branch.
+- **Promo slot** — the `sidebar-callout-card` composition (no library member): a `Sidebar.Group` in the footer holding a bordered card with title, description, optional single `Input` + full-width `Button`. Hidden entirely in icon mode (`group-data-[collapsible=icon]:hidden`).
+- **User footer** — `Sidebar.UserMenu { user: { name, email, avatar? }, menuItems }`: avatar (initials fallback) + name/email + up-down chevron; opens a dropdown (beside the rail on desktop, below on mobile) with an identity header and the caller's action items (`{ id, label, icon?, shortcut?, onSelect?, intent?: "neutral" | "danger" }`) — `menuItems` is required; nothing is defaulted.
 
 ## The eight states
 
@@ -42,17 +42,17 @@ The complete app-nav sidebar: brand block, searchable sections, badged items, pr
 | default | Rows at rest: transparent fill, quiet text, 16px icons. | `sidebar` (surface), `sidebar-foreground` |
 | hover | Row fills; text sharpens. Group labels with collapse affordance show a pointer + chevron. | `sidebar-accent`, `sidebar-accent-foreground` |
 | focus | Focus-visible ring on the focused row/control; same fill as hover. Never suppressed. | `sidebar-ring` |
-| active | The current destination: persistent fill + medium weight, exposed via `data-active` / `aria-current`. Open branch parents show a rotated chevron; an open dropdown trigger holds the accent fill (`data-state="open"`). | `sidebar-accent`, `sidebar-accent-foreground` |
+| active | The current destination: persistent fill + medium weight, exposed via `data-active` / `aria-current`. Open branch parents show a rotated chevron; an open dropdown trigger holds the accent fill (`data-popup-open`). | `sidebar-accent`, `sidebar-accent-foreground` |
 | disabled | ~50% opacity, no pointer events, removed from tab order; label still legible. | `sidebar-foreground` at reduced alpha |
-| loading | `SidebarMenuSkeleton` rows — icon square + text bar shimmer — while nav data resolves; header and footer regions render immediately so the frame never jumps. | `muted` (skeleton), `sidebar-border` |
+| loading | `Sidebar.MenuSkeleton` rows — icon square + text bar shimmer — while nav data resolves; header and footer regions render immediately so the frame never jumps. | `muted` (skeleton), `sidebar-border` |
 | error / empty | A group with nothing to show renders a one-line hint in muted text or is omitted; the sidebar itself carries no error surface — failures belong to content. Attention counts ride item badges. | `muted-foreground`; `destructive` on alert badges |
 | success | No persistent success state; confirmation is expressed as badge-count change or a status-role pill on the relevant item. | status roles via badge |
 
 ## Keyboard behavior
 
-- **Cmd/Ctrl+B** toggles collapse globally (registered by `SidebarProvider`); `SidebarTrigger` and `SidebarRail` are the pointer equivalents.
+- **Cmd/Ctrl+B** toggles collapse globally (registered by `Sidebar.Provider`; `keyboardShortcut` rebinds it, `null` unbinds); `Sidebar.Trigger` and `Sidebar.Rail` are the pointer equivalents.
 - **Tab order**: header (brand/switcher → search trigger) → groups top-to-bottom, items in visual order → footer user menu. Items are real links or buttons — **Enter** activates, **Space** activates buttons.
-- **Branches**: Enter/Space on a collapsible parent toggles it; the chevron rotation mirrors `data-state`.
+- **Branches**: Enter/Space on a collapsible parent toggles it; the chevron rotation mirrors its open state.
 - **Dropdowns** (Switcher, UserMenu): Enter/Space opens; arrow keys move through options; Enter selects; **Escape** closes and returns focus to the trigger.
 - **cmdk path**: the search chip opens the command palette (⌘K); deep or infrequent destinations live in the palette — the sidebar carries the trigger, not a second search UI.
 - **Icon mode**: focus order is unchanged; each item surfaces its label as a tooltip on focus/hover so keyboard users are never navigating unlabeled glyphs.
@@ -68,11 +68,11 @@ The sidebar consumes the eight dedicated sidebar roles — the active package's
 - `sidebar-border` — hairlines: the panel edge, icon-mode group dividers.
 - `sidebar-ring` — focus rings.
 
-Secondary reach: the Callout uses `sidebar-border` + a low-alpha `sidebar-accent` wash + `muted-foreground`; dropdown menus render on `popover` / `popover-foreground`; destructive menu items use `destructive`; skeletons use `muted`. No color literal appears anywhere in the recipe — badge and state-pill colors resolve to status roles.
+Secondary reach: the footer callout card draws a `sidebar-border` frame with `muted-foreground` copy; dropdown menus render on `popover` / `popover-foreground`; danger menu items (`intent: "danger"`) use `destructive`; skeletons use `muted`. No color literal appears anywhere in the recipe — badge and state-pill colors resolve to status roles.
 
 ## When to use / composition notes
 
-The sidebar is the primary navigation for any operator shell with more than a handful of destinations; icon-collapse earns its place on dense screens where horizontal space is the scarce resource, and the cookie-persisted state means the user's choice survives reloads. Canonical composition: `Brand` **or** `Switcher` in the header (both only when the product truly has workspace switching), the search trigger under it, one to three `ItemGroup`s in the content (label them once there are two), and the footer stacking `Callout` (optional, promotional, dismissible by omission) above `UserMenu`. Icons on every item are a positive obligation — a bare, icon-less nav is a known judge complaint. Density: `compact` on data-heavy operator tools, default elsewhere.
+The sidebar is the primary navigation for any operator shell with more than a handful of destinations; icon-collapse earns its place on dense screens where horizontal space is the scarce resource, and persisting the open state (read into `defaultOpen`, written from `onOpenChange`) lets the user's choice survive reloads. Canonical composition: `Sidebar.Brand` **or** `Sidebar.Switcher` in the header (both only when the product truly has workspace switching), the search trigger under it, one to three `Sidebar.ItemGroup`s in the content (label them once there are two), and the footer stacking the callout card (optional, promotional, dismissible by omission) above `Sidebar.UserMenu`. Icons on every item are a positive obligation — a bare, icon-less nav is a known judge complaint. Density: the compact `density` trait on data-heavy operator tools, regular elsewhere.
 
-- **`primitives: nurix`** — `import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Brand, Switcher, ItemGroup, UserMenu, Callout, SidebarCommandTrigger } from "@nurix/components/sidebar";`
+- **`primitives: nurix`** — `import { Sidebar } from "@nurix/components/block/sidebar";` — every part hangs off the namespace: `Sidebar.Provider`, `Sidebar.Header`, `Sidebar.Content`, `Sidebar.Footer`, `Sidebar.Rail`, `Sidebar.Inset`, `Sidebar.Trigger`, `Sidebar.Brand`, `Sidebar.Switcher`, `Sidebar.ItemGroup`, `Sidebar.UserMenu`, `Sidebar.CommandTrigger`; the callout card composes `Sidebar.Group` with `Input` (`@nurix/components/element/input`) and `Button` (`@nurix/components/element/button`).
 - **`primitives: native`** — this recipe is the build spec: a fixed aside (256px expanded / 48px icon rail) with pinned header/footer and an independently scrolling middle, collapse state persisted (cookie or localStorage), a global Cmd/Ctrl+B toggle, an overlay drawer below 768px, tooltips on rail items, and the state/keyboard/token contracts above implemented with the incumbent stack's own nav primitives.

package/data/harnesses/code/skills/design/data/chrome/stat-cards.md

@@ -1,42 +1,42 @@
 ---
 id: stat-cards
 class: d2
-sourced: 2026-07-12
-source: "@nurix/components Statistics compound family (+ AnimatedNumber, useStatHoverBridge; visuals host Gauge/Spark/ProgressBar/ChartLegend) — ~/dev/components"
+sourced: 2026-10-07
+source: "@nurix/components — composed pattern: Card + Stat (+ AnimatedNumber, Chip trend; visuals Spark / Progress / Chart) — ~/dev/components"
 license: open
 ---
 
 # Chrome recipe — stat cards
 
-The stat-card family: one compound grammar for every KPI tile, gauge card, sparkline card, legend card, and list card. The root is a structural flex column providing shared context (`size`, `comparisonLabel`); ~two dozen dotted parts compose the regions. The card draws no chart geometry itself — the visual slot hosts a chart element. The dashboard-tile obligation applies to every instance: **number + comparison + trend + state + door**.
+The stat-card family: one composition grammar for every KPI tile, gauge card, sparkline card, legend card, and list card. In `@nurix/components` this is a **documented composition, not a single export** — a `Card` frame whose regions hold a `Stat` (or an `AnimatedNumber`), a trend `Chip`, a visual, and a footer. The card draws no chart geometry itself — the visual slot hosts a chart element. The dashboard-tile obligation applies to every instance: **number + comparison + trend + state + door**.
 
 ## Anatomy
 
 | Slot | Library part | Spec |
 | --- | --- | --- |
-| Root | `Statistics { size: "sm" \| "md" \| "lg", variant: "bare" \| "card" \| "elevated" \| "outline" \| "soft" \| "ghost", accent: "none" \| "primary" \| "success" \| "warning" \| "danger" \| "info", gap, justify, comparisonLabel }` | The surface. `bare` draws nothing (consumer owns the wrapper); the rest share `overflow-hidden rounded p-6` with their own background/border/shadow. `accent` draws a 4px left stripe. `size` scales the headline value and title through context. |
-| Section | `StatisticsSection` | Vertical region group for top/bottom cascades (`justify: "between"` pins one to each end). |
-| Header | `StatisticsHeader` → `StatisticsIcon { variant, tone: "soft" \| "solid" \| "outline" \| "plain", size (incl. "oversized"), shape }` + `StatisticsHeading` (`StatisticsTitle`, `StatisticsDescription`) + `StatisticsActions` | Icon/title block left, trailing actions (menu, info, tabs, date range) right. `oversized` icons bleed out the clipped top-right corner as a decorative watermark. |
-| Metric row | `StatisticsMetric` → `StatisticsValue { animated?, value, format, prefix, suffix }` + `StatisticsUnit` + `StatisticsTrend { value, direction?, invert?, pill?, format? }` + `StatisticsComparison` | Baseline-aligned: headline value (static, or digit-animated via NumberFlow with a formatted static first paint — SSR-safe), unit ("/ 5,000"), signed trend badge, comparison label (falls back to the card's `comparisonLabel`). |
-| Visual | `StatisticsVisual` (layout via `StatisticsGroup` horizontal/vertical) | Generic centered slot hosting `<Spark>`, `<Gauge>`, `<ProgressBar>`, `<ChartLegend>`, or any chart element. (Legacy `StatisticsGauge`/`Progress`/`SegmentedBar`/`Sparkline`/`Legend*` parts are deprecated thin wrappers over those same components.) |
-| Content | `StatisticsContent` | Escape hatch for list / table / paragraph cards. |
-| Footer | `StatisticsFooter` → `StatisticsCaption` + `StatisticsLink` | Freshness caption left ("Updated 2m ago" — the tile's *state*), link right (the tile's *door*). |
-| Hover bridge | `useStatHoverBridge()` | Headless hook lifting a hovered chart point into the header: hand its `onHoverChange` to the embedded graph, read `hover.value`/`hover.label` in the value/description with a resting fallback. |
+| Root | `Card` | The surface: ring edge, scaled radius, insets from the `--density-pad-*` tokens. No variant, size or accent props — depth rides `className` as `shadow-(--elevation-N)` (or `shadow-none`), and an accent stripe is a 4px inline-start border on a `--intent-*` or `primary` role, set through `className`. |
+| Section | flex column | Vertical region group for top/bottom cascades (`justify-between` pins one to each end). |
+| Header | `Card.Header` → `Card.Title` (`render={<h3 />}` picks the level) + `Card.Description` + `Card.Header.Action` | Icon/title block at the start, trailing actions (menu, info, tabs, date range) pinned to the header's end column. The icon is a child glyph tinted from a role. |
+| Metric row | `Stat { label, value, sub?, intent? }` or `AnimatedNumber { value, format?, trend?, fallback? }` + trend `Chip { intent }` | Baseline-aligned: headline value (a pre-formatted `Stat` string in the display face with tabular numerals, or a digit-rolling `AnimatedNumber` that paints formatted static text first — SSR-safe), unit ("/ 5,000") formatted into the string, signed trend chip, comparison line as `Stat`'s `sub`. |
+| Visual | `Card.Content` slot | Generic centered slot hosting `<Spark>` (an axis-less trend: `family` line, area, bar or pie), `<Progress>` (one current value: bar or `variant="circular"` ring), or `<Chart>` once a gauge, legend, axes or a tooltip enter (`family: "gauge"`, `"ring"`, `"progress"` and the series families). |
+| Content | `Card.Content` | Escape hatch for list / table / paragraph cards. |
+| Footer | `Card.Footer` → `Timestamp` caption + `Link` | Freshness caption at the start ("Updated 2m ago" — the tile's *state*, staleness from `useFreshness`), link at the end (the tile's *door*). A whole-tile door is `Stat`'s `href` / `onClick`. |
+| Hover bridge | caller state | No library hook: where the embedded `Chart` reports hover (`onHoverChange`, emitted by some renderers only), hold the hovered point in state and show it in the value/description with a resting fallback. `Spark` is decorative and reports nothing. |
 
-Every part emits `data-slot="statistics-…"` for styling and testing hooks.
+The parts emit `data-slot="card-…"` and `data-slot="stat-…"` for styling and testing hooks; `Stat` and `Chip` add `data-intent`.
 
 ## The eight states
 
 | State | Spec | Token roles |
 | --- | --- | --- |
-| default | Card variant on the card surface with a hairline border; value at display scale with tabular numerals; title strong, description muted. | `card` + `card-foreground`, `border`, `foreground`, `muted-foreground` |
-| hover | Elevated variants lift per the package's elevation ramp; with the hover bridge wired, hovering the embedded chart live-rewrites the value and description to the hovered point, reverting on leave. | elevation system; value stays `foreground` |
+| default | The card on the card surface with its hairline ring edge (`--edge-hairline`); value at display scale with tabular numerals; title strong, description muted. | `card` + `card-foreground`, `border`, `foreground`, `muted-foreground` |
+| hover | A clickable card raises one rung on the package's elevation ramp (`hover:shadow-(--elevation-3)`); a clickable `Stat` takes its hover wash; with the hover bridge wired, hovering the embedded chart live-rewrites the value and description to the hovered point, reverting on leave. | elevation system; value stays `foreground` |
 | focus | The door (footer link or whole-card link) and any header action are focus stops with visible rings. | `ring` |
 | active | A clickable card shows a pressed treatment; the accent stripe marks category or alert affiliation. | `accent` stripe via `primary`/status roles |
 | disabled | No permission for the metric: value masked (—), lock caption, non-interactive, ~50% presence — the tile keeps its footprint. | reduced-alpha, `muted-foreground` |
 | loading | Skeleton title bar + value block + visual area at the card's fixed height — the grid never reflows when data lands. | `muted` |
 | error / empty | Degraded: em-dash value + status-role caption ("stale as of 09:12") — never a fabricated number. Empty series: the visual slot shows a quiet hint, never a zeroed fake chart. | `warning` / `destructive` caption, `muted-foreground` |
-| success | Trend intent is the success surface: up = good on the success role, down = bad on `destructive`; `invert` flips the mapping for lower-is-better metrics (error rate, latency, churn); zero/no-direction = neutral muted. `pill` wraps it in a tinted badge. Exposed as `data-direction`. | `success` / `destructive` status roles |
+| success | Trend intent is the success surface: up = good on the success role, down = bad on `destructive`; the mapping inverts for lower-is-better metrics (error rate, latency, churn); zero/no-direction = neutral muted. The caller maps the sign to the trend `Chip`'s `intent` (`success`, `danger`, `neutral`), exposed as `data-intent`. | `success` / `destructive` status roles |
 
 ## Keyboard behavior
 
@@ -48,15 +48,15 @@ Every part emits `data-slot="statistics-…"` for styling and testing hooks.
 
 ## Token reach
 
-- `card` / `card-foreground` — surface and text; `border` — hairline (outline/card variants); `muted` / `muted-foreground` — description, captions, skeletons.
-- Accent stripe and `StatisticsIcon` variants — `primary` plus the status roles (`success`, `warning`, `destructive`/danger, `info`) at soft/solid/outline tones.
-- `StatisticsTrend` — **status roles only**. Known library deviation: the shipped component pins success intent to Tailwind `emerald-500` literals and has no success token; under `nurix` the trend/icon success tints are restyled in place to the package's `success` role (the no-jails law permits this; the token-reach report flags the literal), and under `native` the implementation uses status roles from the start.
-- Embedded visuals — `chart-1..5` for series color, chart chrome roles (`chart-grid`, `chart-tooltip-background/foreground`) for scaffolding; a spark/gauge/progress fill is never a hex literal. The default spark stroke (`var(--primary)`) already token-reaches.
-- The headline value inherits the type ramp's display size via the card `size`; mono/tabular figures come from the package's type roles, never a hardcoded family.
+- `card` / `card-foreground` — surface and text; `border` — the card's hairline ring edge; `muted` / `muted-foreground` — description, captions, skeletons.
+- Accent stripe and the header icon tint — `primary` plus the status roles (`success`, `warning`, `destructive`/danger, `info`) at soft/solid/outline strengths.
+- Trend chip and `Stat` value — **status roles only**: both paint from the `--intent-*` tokens through `intent`, which a package's `success` / `warning` / `info` roles feed; the token-reach report flags a literal trend colour.
+- Embedded visuals — `chart-1..5` for series color, chart chrome roles (`chart-grid`, `chart-tooltip-background/foreground`) for scaffolding; a spark/gauge/progress fill is never a hex literal. `Spark` paints in `currentColor` by default and takes `color="var(--chart-1)"` for a series role.
+- The headline value sits in the display face (`--font-display`) with tabular numerals; a hero size comes from the type ramp through `className`, and mono/tabular figures come from the package's type roles, never a hardcoded family.
 
 ## When to use / composition notes
 
-Stat cards are the dashboard's KPI strip (4–6 tiles full-width per the blueprint shapes) and the record header's vital signs; the same grammar scales from a bare number-plus-trend to a gauge card with a legend, so one card system covers the whole surface. Every tile carries all five obligations — a number without a comparison is decoration, a tile without a door is a dead end. Use `size` to build hierarchy (one `lg` hero metric, `md` support tiles) instead of ad-hoc font sizes; use `justify="between"` with two sections for cards whose visual anchors the bottom edge. Wire the hover bridge whenever a chart lives in the card — it is the cheapest "designed, not templated" signal in the set.
+Stat cards are the dashboard's KPI strip (4–6 tiles full-width per the blueprint shapes) and the record header's vital signs; the same grammar scales from a bare number-plus-trend to a gauge card with a legend, so one card system covers the whole surface. Every tile carries all five obligations — a number without a comparison is decoration, a tile without a door is a dead end. Build hierarchy from the type ramp (one hero metric a ramp step up, support tiles at the base) instead of ad-hoc font sizes; use `justify-between` with two sections for cards whose visual anchors the bottom edge. Wire the hover bridge whenever a hover-reporting chart lives in the card — it is the cheapest "designed, not templated" signal in the set. A bare row of KPIs with no card frame is `Stat`s on a `Row`.
 
-- **`primitives: nurix`** — `import { Statistics, StatisticsHeader, StatisticsIcon, StatisticsHeading, StatisticsTitle, StatisticsDescription, StatisticsActions, StatisticsMetric, StatisticsValue, StatisticsUnit, StatisticsTrend, StatisticsComparison, StatisticsVisual, StatisticsFooter, StatisticsCaption, StatisticsLink, useStatHoverBridge } from "@nurix/components/statistics";` (visuals: `@nurix/components/spark`, `/gauge`, `/progress-bar`; the animated number: `@nurix/components/animated-number`).
+- **`primitives: nurix`** — composed, e.g.: `import { Card } from "@nurix/components/block/card"; import { Stat } from "@nurix/components/element/stat"; import { Chip } from "@nurix/components/element/chip"; import { Timestamp } from "@nurix/components/element/timestamp"; import { Link } from "@nurix/components/element/link";` (visuals: `Spark` from `@nurix/components/element/spark`, `Progress` from `@nurix/components/element/progress`, `Chart` from `@nurix/components/block/chart`; the animated number: `AnimatedNumber` from `@nurix/components/element/animated-number`; staleness: `useFreshness` from `@nurix/components/hooks/use-freshness`). `element/spark`, `block/chart` and `element/animated-number` reach optional peer families (`spark`, `charts`, `animated-number`) the consumer installs.
 - **`primitives: native`** — this recipe is the build spec: a fixed-height card with header / baseline-aligned metric row / visual slot / footer regions, a display-scale tabular headline that is correct on first paint (animation optional and additive), a sign-driven trend badge with an invert switch on status roles, skeletons that hold the footprint, degraded states that never fabricate numbers, and all series color drawn from the token artifact's `chart-1..5`.

package/data/harnesses/code/skills/design/data/chrome/topbar.md

@@ -1,26 +1,26 @@
 ---
 id: topbar
 class: d2
-sourced: 2026-07-12
-source: "@nurix/components — composed pattern: SidebarTrigger + Separator + Breadcrumb family + CommandTrigger + Button (the library's site-header pattern; no single Topbar export) — ~/dev/components"
+sourced: 2026-10-07
+source: "@nurix/components — composed pattern: Sidebar.Trigger + Separator + Breadcrumb + Command.Trigger + Button (the library's site-header pattern; no single Topbar export) — ~/dev/components"
 license: open
 ---
 
 # Chrome recipe — topbar
 
-The app-shell top bar: the sticky row above the content pane carrying the sidebar toggle, the breadcrumb trail, global search, and screen-level actions. In `@nurix/components` this is a **documented composition, not a single export** — every shipped app-shell demo assembles it from `SidebarTrigger`, `Separator`, the `Breadcrumb` family, `CommandTrigger`, and `Button`. Page-level mastheads below it are separate components (`Header` at `@nurix/components/header` for config-driven record headers; `PageHeader` for list/detail mastheads with a stat ledger) and are not part of this recipe.
+The app-shell top bar: the sticky row above the content pane carrying the sidebar toggle, the breadcrumb trail, global search, and screen-level actions. In `@nurix/components` this is a **documented composition, not a single export** — every shipped app-shell demo assembles it from `Sidebar.Trigger`, `Separator`, `Breadcrumb`, `Command.Trigger`, and `Button`. Page-level headers below it are separate compositions (the library's masthead and record-card header recipes over `Block`, `Row`, `Breadcrumb`, `Stat` and `FieldGrid`) and are not part of this recipe.
 
 ## Anatomy
 
 | Slot | Library part | Spec |
 | --- | --- | --- |
 | Bar | flex row | Sticky (`top-0`), 48–56px tall, full width of the content pane, hairline bottom border. Optional glass treatment: `background` at ~95% alpha + backdrop blur. |
-| Sidebar toggle | `SidebarTrigger` | Leading icon button toggling the sidebar; reflects open state via `data-state`. |
+| Sidebar toggle | `Sidebar.Trigger` | Leading ghost icon-only button toggling the sidebar; reflects open state via `aria-expanded` (the sidebar frame carries `data-state="expanded" \| "collapsed"`). |
 | Divider | `Separator orientation="vertical"` | 16px vertical hairline between toggle and breadcrumbs. |
-| Breadcrumbs | `Breadcrumb` → `BreadcrumbList` / `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbSeparator` / `BreadcrumbPage` | The location trail. Ancestors are links; the last segment is `BreadcrumbPage` — plain text, `aria-current="page"`, never a link. Deep trails collapse middle segments into an ellipsis dropdown. |
+| Breadcrumbs | `Breadcrumb` → `Breadcrumb.Item` | The location trail. Ancestors are links (`href`, or a router link through `render`); the last `Breadcrumb.Item` is the current page — plain text, `aria-current="page"` and `data-active`, never a link. Deep trails fold the middle segments behind an ellipsis menu (`maxItems`). |
 | Spring | flex spacer | Pushes the trailing cluster right. |
-| Search slot | `CommandTrigger { placeholder, shortcut }` | A bordered search chip with placeholder text and a right-aligned `⌘K` kbd hint; opens the command palette. |
-| Actions | `Button` (ghost/icon), overflow `DropdownMenu` | At most 3 visible screen-level actions; further actions collapse into an overflow menu. Theme toggle sits here. |
+| Search slot | `Command.Trigger { children, shortcut? }` inside `Command.Dialog` | A bordered search chip with its text as children (default "Search") and a right-aligned `⌘K` / `Ctrl+K` kbd hint; opens the palette's `Command.Popup`. |
+| Actions | `Button variant="ghost" isIconOnly`, overflow `DropdownMenu` | At most 3 visible screen-level actions; further actions collapse into an overflow menu. Theme toggle sits here. |
 | Identity | `Avatar` (optional) | Only when the shell has no sidebar user footer — one identity home per shell, never two. |
 
 ## The eight states
@@ -32,9 +32,9 @@ State is mostly per-control; the bar itself is stable chrome.
 | default | Bar on the content canvas with a hairline base; breadcrumb ancestors quiet, current page at full strength. | `background`, `border`, `muted-foreground` (ancestors), `foreground` (current) |
 | hover | Breadcrumb links sharpen to full foreground; icon buttons gain an accent fill. | `foreground`, `accent` + `accent-foreground` |
 | focus | Focus-visible ring on every control — toggle, links, chip, buttons. | `ring` |
-| active | Sidebar toggle mirrors the open sidebar (`data-state`); the current crumb is the persistent active marker; a pressed action holds its pressed fill. | `foreground`, `accent` |
+| active | Sidebar toggle mirrors the open sidebar (`aria-expanded`); the current crumb is the persistent active marker; a pressed action holds its pressed fill. | `foreground`, `accent` |
 | disabled | Actions at ~50% opacity, no pointer events; breadcrumbs are never disabled. | reduced-alpha foreground |
-| loading | An in-flight screen action shows an inline spinner inside its own button. The bar never skeletons: breadcrumbs derive from the route and render immediately. | `muted-foreground` (spinner) |
+| loading | An in-flight screen action shows its spinner inside its own button (`Button loading`). The bar never skeletons: breadcrumbs derive from the route and render immediately. | `muted-foreground` (spinner) |
 | error / empty | An empty trail renders the page title as the single `BreadcrumbPage`. Errors surface as toasts or content-level states — the bar itself hosts none; a degraded-environment banner may attach *beneath* the bar on a status-role tint. | `warning` / `destructive` (banner only) |
 | success | Transient: an action button briefly swaps to a check, or a toast confirms; nothing persistent lives in the bar. | `success` status role (transient) |
 
@@ -42,7 +42,7 @@ State is mostly per-control; the bar itself is stable chrome.
 
 - **Tab order**: the bar follows the skip link and precedes the content pane — toggle → breadcrumb links → search chip → actions → identity. Plain sequential tabbing; no roving focus is needed at this control count.
 - **Enter** activates crumbs and buttons; **Space** activates buttons.
-- **Cmd/Ctrl+B** toggles the sidebar from anywhere (provider-owned); the `SidebarTrigger` is its visible affordance.
+- **Cmd/Ctrl+B** toggles the sidebar from anywhere (owned by `Sidebar.Provider`, rebound through `keyboardShortcut`); the `Sidebar.Trigger` is its visible affordance.
 - **cmdk path**: **⌘K / Ctrl+K** opens the command palette from anywhere; the search chip is the visible, clickable affordance and displays the shortcut as a kbd hint. Inside the palette: type to filter, arrows to move, Enter to run, Escape to close. Global navigation and infrequent actions belong in the palette, not as more topbar buttons.
 - Overflow menu: Enter/Space opens, arrows move, Escape closes and returns focus to the trigger.
 
@@ -59,7 +59,7 @@ State is mostly per-control; the bar itself is stable chrome.
 
 ## When to use / composition notes
 
-Every screen inside the shell gets the topbar; it is the constant that makes the sidebar collapsible (the toggle must survive collapse) and the command palette discoverable. Keep it thin — the topbar locates and searches; identity-weight content (record title, status, metadata, stats) belongs to the page masthead below it (`Header` / `PageHeader` under `nurix`), and datasets' own toolbars belong to their tables. The three-zone rhythm — locate left, search center-right, act right — is the invariant; what varies per product is only which trailing actions earn a permanent slot.
+Every screen inside the shell gets the topbar; it is the constant that makes the sidebar collapsible (the toggle must survive collapse) and the command palette discoverable. Keep it thin — the topbar locates and searches; identity-weight content (record title, status, metadata, stats) belongs to the page header below it (the masthead or record-card recipe under `nurix`), and datasets' own toolbars belong to their tables. The three-zone rhythm — locate left, search center-right, act right — is the invariant; what varies per product is only which trailing actions earn a permanent slot.
 
-- **`primitives: nurix`** — composed, e.g.: `import { SidebarTrigger } from "@nurix/components/sidebar"; import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@nurix/components/breadcrumb"; import { CommandTrigger } from "@nurix/components/command"; import { Separator } from "@nurix/components/separator"; import { Button } from "@nurix/components/button";`
+- **`primitives: nurix`** — composed, e.g.: `import { Sidebar } from "@nurix/components/block/sidebar"; import { Breadcrumb } from "@nurix/components/compound/breadcrumb"; import { Command } from "@nurix/components/compound/command"; import { Separator } from "@nurix/components/element/separator"; import { Button } from "@nurix/components/element/button"; import { DropdownMenu } from "@nurix/components/compound/dropdown-menu";` — parts hang off each namespace (`Sidebar.Trigger`, `Breadcrumb.Item`, `Command.Dialog` / `Command.Trigger` / `Command.Popup`, `DropdownMenu.Trigger` / `DropdownMenu.Popup`).
 - **`primitives: native`** — this recipe is the build spec: a sticky 48–56px flex row with the slot order above, a real `<nav aria-label="Breadcrumb">` trail with `aria-current="page"` on the last segment, a search affordance wired to the stack's palette (or a plain search route) showing its shortcut, and the state/keyboard/token contracts implemented with the incumbent stack's own primitives.

package/data/harnesses/code/skills/design/data/iconography.md

@@ -6,13 +6,13 @@ source: "distilled from the A5 iconography phase-1 research sweep — Lucide, Ta
 license: mixed — nine of the eleven conventions below are open (OSS icon sets under ISC/MIT/Apache-2.0); two are licensed (Linear, Stripe) because they describe a proprietary product's house convention rather than a redistributable asset — see the `license` line inside each convention's own values block
 feel: "the register this file spans: quiet neutral utility (Lucide, Tabler) through dense-precision (Radix), paired-weight (Heroicons), rounded-friendly and illustrative (Phosphor), mechanically variable (Material Symbols), rectilinear enterprise (Carbon), hand-tuned developer precision (Octicons), to near-monochrome restraint (Linear, Stripe) — pick the register the product needs, not just a glyph shape"
 ---
-A small conventions database, not a big catalog — eleven curated iconography conventions, each a coherent bundle of icon set, stroke/fill treatment, size grid, default color role, and type-pairing rule, because real products never choose these independently. The standing complaint every entry below answers is the same one: a bare, icon-less nav reads as unfinished; each convention states plainly where icons are obligatory (nav, status glyphs, empty states) versus optional (body copy, pure decoration).
+Eleven curated iconography conventions, each a coherent bundle of icon set, stroke/fill treatment, size grid, default color role, and type-pairing rule — real products never choose these independently. A bare, icon-less nav reads as unfinished, so each convention states where icons are obligatory (nav, status glyphs, empty states) versus optional (body copy, pure decoration).
 
 ## Convention: lucide-quiet-utility
 
 **Feel:** "quiet, neutral utility line-work — reads as structural chrome, not decoration"
 
-Lucide (ISC-licensed fork of Feather) is the default pick for stroke-based quiet utility icons in SaaS dashboards. Obligatory in nav rails, sidebar items, and empty-state graphics — the failure mode this convention guards against is exactly a bare, icon-less nav; optional inline in body copy or button labels where the text alone already carries the meaning.
+Lucide (ISC-licensed fork of Feather) is the default pick for stroke-based quiet utility icons in SaaS dashboards. Obligatory in nav rails, sidebar items, and empty-state graphics; optional inline in body copy or button labels where the text alone already carries the meaning.
 
 ```yaml values
 set: Lucide (ISC license)

package/data/harnesses/code/skills/design/references/compose.md

@@ -1,6 +1,6 @@
 # Step 4 — Compose: one mind, whole canvas
 
-Build the app — all surfaces in one continuous context, the chosen package's design.md in view throughout. This step is never decomposed into per-surface handoffs with frozen intermediate artifacts; the composing mind holds the whole canvas.
+Build the app — all surfaces in one continuous context, the chosen package's design.md in view throughout. **Never** decompose this step into per-surface handoffs with frozen intermediate artifacts; the composing mind holds the whole canvas.
 
 ## Chrome
 
@@ -9,7 +9,7 @@ Per the primitives switch recorded in the project's `design.md`:
 - **`nurix`** — compose chrome from `@nurix/components`. The chrome recipes (`data/chrome/` — read only the recipes for surfaces in the structure doc) carry composition, states, and when-to-use; the component dictionary (`components/`) carries props, imports, and usage across both provenances — consult the index for what exists, and open the touched category's API reference on need.
 - **`native`** — the recipes are *specifications*: anatomy, the eight states, keyboard behavior, token reach — implement them with the incumbent stack's own components. The index's shadcn/fallback columns carry the composition; category API references never load.
 
-Recipes are starting points, not jails: restyle or extend them in place when the package demands it.
+Recipes, generated files, and library compositions are starting points, not jails: restyle or extend them in place when the package demands it.
 
 ## Composition rules
 
@@ -18,24 +18,22 @@ Recipes are starting points, not jails: restyle or extend them in place when the
 - **Positive obligations apply** — load the surface's archetype checklist (`data/checklists/<archetype>.md`); the checklists are ceilings: a sidebar ships with brand block, icons, and user context; a dashboard tile ships with number + comparison + trend + state + door; every surface ships its state matrix.
 - **The register scope holds**: the display face never touches cells, buttons, labels, or form chrome; data numerals run the mono face with `tabular-nums`.
 - **Motion follows the package's §7** and the frequency law: actions performed 100+ times a day, and any keyboard-initiated action, get no animation, ever; panel/drawer motion is interruptible; entrances never `ease-in`.
-- **No ownership jails.** Any file may be edited at any time, including generated ones and library compositions.
-- **No paper-trail bureaucracy.** Decision-log lines only, through `record`; attention goes to pixels.
 - **A finishing pass with authority over everything is part of this step** — walk the whole canvas once at the end: rhythm, alignment, density, identity-consistency across surfaces, the one-accent discipline.
 
 ## Library reach — under `primitives: nurix`
 
 The library carries behavior stock shadcn does not, and each item below is reachable only when the composition routes to it; a hand-rolled equivalent is a defect, not a style choice.
 
-- **Density is the trait.** Control height and padding come from `personality.density` through `--density-control-*`; container padding and gaps on scanned surfaces (cards in a grid, list rows, panel bodies) read `--density-pad-xs|md|lg` and `--density-gap-md` — `p-(--density-pad-md)`, `gap-(--density-gap-md)` — so one trait re-spaces the product. A `p-3` on a data surface is the per-surface mood foundations forbid; structural spacing (a divider, an icon's optical nudge) stays literal.
+- **Density is the trait.** Control height and padding come from `personality.density` through `--density-control-*`; container padding and gaps on scanned surfaces (cards in a grid, list rows, panel bodies) read `--density-pad-xs|sm|md|lg` and `--density-gap-sm|md|lg` — `p-(--density-pad-md)`, `gap-(--density-gap-md)` — so one trait re-spaces the product. A `p-3` on a data surface is the per-surface mood foundations forbid; structural spacing (a divider, an icon's optical nudge) stays literal.
 - **Motion rides the seam.** A `transition-*` utility with no `duration-*` class inherits `--motion-duration-fast`, which `pace`, the reduced-motion block, and the inline clamp all reach; a `duration-200` opts that element out of all three. App-owned animation reads `var(--motion-duration-base)` and `var(--motion-ease-standard)`, never a literal; the library's `effect/*` primitives already read them, so an identity moment composes from those before a bespoke variant.
-- **Collections are inline.** Any container of repeated rows the operator scans — a table body, a list, a feed, a board column — carries `data-mode="inline"`: every DOM-descendant transition collapses to instant (portaled tooltips escape) while loaders keep breathing on the ambient duration. Only `<Cell mode="inline">` stamps it, on the cell alone; `block/table` and `block/list` stamp nothing on their containers, so the app stamps it on the collection — including ones built on those blocks.
-- **Every time on screen is `<Timestamp>`** (`element/timestamp`): `format="auto"` reads relative inside `thresholdMs` and absolute beyond it, the full absolute stamp sits on the native `title` by default, `live` ticks on one shared interval. A custom live label subscribes through `useNow` (`lib/time`) — one ticker per interval, never a timer per row.
-- **Typing is not saving.** Input (commits on blur), Textarea (blur, Cmd/Ctrl+Enter), NumberInput (blur, Enter, the steppers), Slider (release), Combobox (close), `DatePicker` and `DatePicker.Range` (the pick) carry `onChange` for the draft and `onSave` for the commit; `InlineEdit` carries `onSave` alone. Mutations wire to `onSave`; `onChange` never reaches the server. A form with a Save button is the one exception — a transaction the button commits whole.
-- **Remote and long option lists are the Combobox's** (`compound/combobox`): `onSearch` returns a page for a query (debounced by `debounceMs`), `onLoadMore` appends the next page, `maxSelections` caps a multi-select. A fetch-in-effect feeding a filtered `<Select>` is the pattern this replaces.
-- **Time-range filters are `DatePicker.Range` with `presets`** (`{ label, from, to }`; its preset column shows by default, `DatePicker`'s needs `showPresets`), `weekStartsOn` from the locale decision, `fromYear`/`toYear` where the domain bounds them; a single date in a table cell is `DatePicker` with `inline` and `compact`. A bespoke window picker is a defect.
-- **Uploads reject before they upload.** `FileUpload` (`compound/file-picker`) takes `accept`, `maxSize`, `maxFiles`, and `onFileValidate` (return the rejection message, or nothing to accept); a rejected file never enters the list and `onFileReject(file, message)` receives it. The dropzone only flashes an invalid border — the composition surfaces the message (a field error or a toast).
-- **Shell affordances come from `block/shell-affordances`**: `Freshness` for "as of" (`staleAfterMs`, `onRefresh`), `GateAffordance` for an action a gate blocks, `SystemBanner` for a system-wide notice. A bespoke freshness pill or banner is a defect.
-- **Status colour is the role.** The package's `success` / `warning` / `info` reach the library as `--tone-success|warning|info` (library fallbacks when undeclared): a status dot is `<Chip prefix="dot" color="var(--tone-success)">`, never a raw hue, and app utilities map onto the same roles (`--color-success: var(--success)` in the app's `@theme inline`), so a chart legend and a chip dot never disagree.
-- **Targets under 24px grow through `hit-area-*`** (`hit-area-2` adds 0.5rem of pointer box on every side; `hit-area-x-*` / `-y-*` / `-t-*` / `-b-*` / `-l-*` / `-r-*` where a neighbour would overlap) — the pointer box grows, the paint box does not. `hit-area-debug` shows the box while composing.
-- **Clipping is `clip`.** `clip` for one line, `clip-<n>` for n lines, `clip-fade` where prose is expected to overflow — each carries `min-width: 0` and `overflow-wrap: anywhere`, which Tailwind's `truncate` and `line-clamp-*` lack (the flex-child overflow bug those leave open).
-- **Type roles are utilities** — `text-display`, `text-title`, `text-h1`, `text-body`, `text-dense`, `text-meta`, … from the library's `@theme` — and `cn()` (tailwind-merge tables) classifies `text-<role>` as a colour: a role and a colour passed through `cn`, together or apart, keep only the later one. Keep both in a `className` string that never goes through `cn`, or put the colour on the parent.
+- **Collections are inline.** Any container of repeated rows the operator scans — a table body, a list, a feed, a board column — carries `data-mode="inline"`: every DOM-descendant transition collapses to instant (portaled tooltips escape) while loaders keep breathing on the ambient duration. `<Cell mode="inline">` stamps it on the cell and `block/list` on each of its rows; `block/table` stamps nothing on its container, so the app stamps it on the collection — a table, and every collection it builds itself.
+- **Every time on screen is `<Timestamp>`** (`element/timestamp`): it reads relative inside `relativeThreshold` and absolute beyond it (`format` takes the absolute label's Intl options), the full absolute stamp sits on the native `title` by default, and `isLive` (on by default) ticks on one shared interval. A custom live label subscribes through `useNow` (`lib/time`) — one ticker per interval, never a timer per row.
+- **Typing is not saving.** Input (Enter, blur), Textarea (blur, Cmd/Ctrl+Enter), NumberInput (blur, Enter, the steppers), Slider (release), Combobox (the pick; close for a multi-select), `DatePicker` and `DatePicker.Range` (the pick) carry `onValueChange(value, details)` for the draft and `onValueCommitted` for the commit, once per settled change; `InlineEdit` carries `onSave` alone. Mutations wire to `onValueCommitted`; `onValueChange` never reaches the server. A form with a Save button is the one exception — a transaction the button commits whole.
+- **Remote and long option lists are the Combobox's** (`compound/combobox`): hold the query with `searchValue` / `onSearchValueChange` (holding it turns the built-in filter off), pass the fetched rows as `options` with `loading`, page with `hasMore`, `loadingMore` and `onLoadMore()`, and cap a `multiple` select with `max`. Fetching and debouncing are the app's — `useSearchSource` (`hooks/use-search-source`) drops stale responses and debounces. A fetch-in-effect feeding a filtered `<Select>` is a defect.
+- **Time-range filters are `DatePicker.Range` with `presets`** (its preset column shows by default, `DatePicker`'s needs `hasPresets`), `weekStartsOn` from the locale decision, `min` / `max` where the domain bounds them; a single date in a table cell is a `DatePicker` with `variant="bare"` (a host such as `Cell` passes it). A non-required picker carries its own Clear; `required` removes it. A bespoke window picker is a defect.
+- **Uploads reject before they upload.** `FilePicker` (`compound/file-picker`) takes `accept`, `maxSize`, `maxFiles`, and `validate` (return the rejection message, or nothing to accept); a rejected file never enters the list and `onFileReject(file, message)` receives it. The dropzone only reads invalid for the dwell hold — the composition surfaces the message (a field error or a toast from `compound/toast`).
+- **Shell affordances are library compositions**: "as of" is `useFreshness({ fetchedAt, onRefresh, staleAfterMs })` (`hooks/use-freshness`) on the app's own `Button` beside a `Timestamp`; an action a gate blocks is an `Empty` (`compound/empty-state`) carrying the icon, the reason and the way out; a system-wide notice is `SystemBanner` (`element/system-banner`). A bespoke freshness timer or banner is a defect.
+- **Status colour is the role.** The package's `success` / `warning` / `info` reach the library as `--intent-success|warning|info`, and `destructive` as `--intent-danger` (library fallbacks when undeclared): status meaning is the `intent` prop (`neutral`, `info`, `success`, `warning`, `danger` — a status dot is `<Chip prefix="dot" intent="success">`, a destructive button `<Button intent="danger">`), never a raw hue and never `color`, which carries a stored data colour, and app utilities map onto the same roles (`--color-success: var(--success)` in the app's `@theme inline`), so a chart legend and a chip dot never disagree.
+- **Library controls carry the 24px pointer floor built in; an app-drawn target under 24px grows through `hit-area-*`** (`hit-area-2` adds 0.5rem of pointer box on every side; `hit-area-x-*` / `-y-*` / `-t-*` / `-b-*` / `-l-*` / `-r-*` where a neighbour would overlap) — the pointer box grows, the paint box does not. `hit-area-debug` shows the box while composing.
+- **Clipping is `clip`.** `clip` for one line, `clip-<n>` for n lines, `clip-fade` where prose is expected to overflow — `clip` and `clip-<n>` carry `min-width: 0`, and `clip-<n>` `overflow-wrap: anywhere`, which Tailwind's `truncate` and `line-clamp-*` lack (the flex-child overflow bug those leave open).
+- **Type roles are utilities** — `text-display`, `text-title`, `text-h1`, `text-body`, `text-dense`, `text-meta`, … from the library's `@theme` — and `cn()` (the `cn` package, on tailwind-merge's tables) classifies `text-<role>` as a colour: a role and a colour passed through `cn`, together or apart, keep only the later one. Keep both in a `className` string that never goes through `cn`, or put the colour on the parent.

package/data/harnesses/code/skills/design/references/emission.md

@@ -5,7 +5,7 @@ One source, two derivations: the project's `design.md` is canonical; the artifac
 | Artifact | Emit with | Carries | Compiled by |
 | --- | --- | --- | --- |
 | `design.tokens.css` | `node scripts/validate-design-md.mjs --project . --emit --write` | the color roles in both themes, the type ramp, elevation, the motion base, layout | the validator |
-| `personality.css` — `primitives: nurix` only | `node scripts/validate-design-md.mjs --project . --emit-personality --write` | the six traits compiled into the token families every `@nurix/components` component reads: `--density-*`, `--motion-duration-*`, `--radius-scale`, `--elevation-*`, `--texture-*`, `--accent`/`--ring` | `compileToCss` from `@nurix/components/lib/personality`, reached through the validator from the project's own install |
+| `personality.css` — `primitives: nurix` only | `node scripts/validate-design-md.mjs --project . --emit-personality --write` | the six traits compiled into the token families every `@nurix/components` component reads: `--density-*`, `--motion-duration-*` / `--motion-ease-*` / `--hold-dwell`, `--radius-scale` / `--radius-pill` / `--ring-width` / `--ring-offset` / `--edge-hairline` / `--edge-stroke`, `--elevation-*`, `--texture-*`, `--accent` / `--ring` | `compileToCss` from `@nurix/components/lib/personality`, reached through the validator from the project's own install |
 
 ## Coverage
 
@@ -19,15 +19,15 @@ One source, two derivations: the project's `design.md` is canonical; the artifac
 personality:
   density: compact      # compact | regular | airy — control height and padding, container padding, gaps
   pace: 0.3             # 0 still · 0.5 the library's neutral timing · 1 lively
-  edge: sharp           # sharp | regular | soft — the radius scale
+  edge: sharp           # sharp | regular | soft — the radius scale; sharp also thins ring, hairline and stroke, and squares pills
   depth: flat           # flat | layered | elevated — the elevation ladder
   texture: clean        # clean | grainy — grain opacity on effect surfaces
-  tone: neutral         # neutral | expressive — whether the accent re-anchors on the primary
+  accent: neutral       # neutral | expressive — whether the accent re-anchors on the primary
 ```
 
-- **§4–§7 are read into the traits, never into pixels.** A §6 of "flat, hairline-separated" is `depth: flat`; a §7 of "utilitarian, nothing animates twice a day" is `pace` at 0.2–0.35; an operator §4 is `density: compact`. Declare only what differs from neutral (regular · 0.5 · regular · layered · grainy · neutral). An absent block ships the library's defaults and the validator warns (`dmw-05`) — a project that never declared its feel is how these families go unused.
+- **§4–§7 are read into the traits, never into pixels.** A §6 of "flat, hairline-separated" is `depth: flat`; a §7 of "utilitarian, nothing animates twice a day" is `pace` at 0.2–0.35; an operator §4 is `density: compact`. Declare only what differs from neutral (regular · 0.5 · regular · layered · grainy · neutral). An absent block ships the library's defaults and the validator warns (`dmw-09`) — a project that never declared its feel is how these families go unused.
 - **`motion.duration` and `motion.easing` are the app's own vocabulary** (`--duration-panel`, `--ease-standard`, read by app-owned animation); the library's components never read them. `pace` is what retimes the library — and, through the library's default transition duration, every plain Tailwind `transition-*` utility in the app. State both from the same §7 reading.
-- **The block is closed-vocabulary and fails closed** (`dmv-12`): an unknown trait, an out-of-range pace, or a block under `primitives: native` (nothing there reads it) fails validation.
+- **The block is closed-vocabulary and fails closed** (`dmv-12`): an unknown trait (a `tone` key among them — the accent axis is `accent`, and the library's compiler rejects `tone`), an out-of-range pace, or a block under `primitives: native` (nothing there reads it) fails validation.
 - **The compiler is the project's own install.** `--emit-personality` resolves `@nurix/components` by walking up from the design.md, then one and two levels into the workspace (`packages/<app>`), because a pnpm root hoists nothing. Several installed versions is an ambiguity the app package resolves: `--project . --emit-personality --write --lib packages/<app>`. The artifact's header names the library version that compiled it, so a library upgrade re-emits by drift, never by hand.
 - **The artifact is committed, never injected.** `personality.css` is the product's artifact — inspectable, diffable, drift-checked at the ship gate — imported after the library's `styles.css` so its `:root` wins on order. `<PersonalityStyle>` from the same subpath serves a runtime switch (a density toggle, a preview) and never replaces the artifact.
 
@@ -38,7 +38,7 @@ Each prevents a known silent-failure class:
 - **Specificity armor.** Theme blocks are `:root:not(.dark)` and `:root.dark` — both specificity (0,2,0) — keyed on the `.dark` class the library compiles into its own stylesheet. A `data-theme` attribute keys none of the library's `dark:` variants, its theme toggle, or its toaster: an app on the attribute inverts its tokens and renders mixed library chrome.
 - **Theme-invariant tokens sit in a bare `:root`.** Only the colour roles are themed. Font stacks, the type ramp, radii, shadows, motion and layout emit into a bare `:root` block ahead of the two theme blocks. Behind `:root:not(.dark)` they match nothing once `.dark` is on the root, and every `font-size: var(--text-…)` collapses to an inherited 16px in dark mode while the colours still look right.
 - **The ramp emits Tailwind's composite sub-keys.** `--text-<step>` with `--line-height`, `--font-weight` and `--letter-spacing` sub-keys are exactly what the `text-<step>` utility applies. A `-size`/`-line`/`-weight` suffix form generates junk utilities and leaves `text-<step>` undefined. The `--font-feature-settings` and `--font-family` sub-keys are inert for the utility and are read through `var()`. The dense operator tier's steps are optional: absent steps emit nothing and warn once per package (`dmw-08`).
-- **The tone trio.** `success`, `warning`, and `info` reach the library as `--tone-success|warning|info` — what a status dot (`<Chip prefix="dot" color="var(--tone-success)">`) and the copy button's check read, falling back to the library's own hue when a role is absent. Declare all three, in both themes — a missing `info` (`dmw-06`) puts the library's blue beside the package's green and amber.
+- **The intent trio.** `success`, `warning`, and `info` reach the library as `--intent-success|warning|info` (and `destructive` as `--intent-danger`) — what a status dot (`<Chip prefix="dot" intent="success">`) and the copy button's check read, falling back to the library's own hue when a role is absent. Declare all three, in both themes — a missing `info` (`dmw-10`) puts the library's blue beside the package's green and amber.
 - **Font binding by derivation.** Font stacks bind to installed packages under **registered family names** (`"Inter Variable"`, not `"Inter"`), each with its declared fallback stack — otherwise the flagship font silently never renders. Install the font packages the design.md declares (e.g. Fontsource) and verify the name matches what the package registers. The library's `font-sans` / `font-mono` / `font-display` utilities compile to `inherit` on purpose (a ramp, never a face): the app declares its own theme keys in a plain `@theme` pointing at the emitted slots — `--font-body: var(--font-sans)`, `--font-heading: var(--font-display)`, `--font-code: var(--font-mono)` — and sets the ambient face on `body` in `@layer base`.
 - **Every authored token group reaches a named consumer.** An authored ramp with no emitter vanishes without a trace — wire each group (colors → theme classes/utilities, ramp → text styles, elevation → radius/shadow utilities, motion → duration/easing vars) and let the ship gate's reach check prove it. The personality families reach the library by construction; the app's `--duration-*` / `--ease-*` reach app-owned animation code, or they are unused.
 - **Compile the emitted CSS once per change** — a stray utility string inside a CSS comment can defeat a fully green byte-level check.

package/data/harnesses/code/skills/design/references/foundations.md

@@ -22,7 +22,7 @@ No database — three constraints, values yours: **categorical** series need dis
 
 ## Number, date, unit formatting
 
-Tabular figures in tables and KPIs; thousands separators; unit or currency attached to the number; consistent decimals per column; large values truncate meaningfully (`1.2M`, never `1,200,000` in a tile); timestamps show relative when recent and absolute on hover (under `nurix`, that is `<Timestamp format="auto">`, never a hand-rolled formatter); timezones explicit anywhere ambiguity costs money.
+Tabular figures in tables and KPIs; thousands separators; unit or currency attached to the number; consistent decimals per column; large values truncate meaningfully (`1.2M`, never `1,200,000` in a tile); timestamps show relative when recent and absolute on hover (under `nurix`, that is `<Timestamp>`, never a hand-rolled formatter); timezones explicit anywhere ambiguity costs money.
 
 ## Spacing & density
 
@@ -30,15 +30,15 @@ The 2/4/6/8 scale, period. Density is a per-project decision made once, not a pe
 
 ## Radius & stroke
 
-Radius is identity — sharp (0–2px), soft (4–6px), or round (10px+) — chosen by the package and applied consistently; mixing radii on one surface reads as templated. One border weight per surface; elevation *or* borders separate layers, never both at full strength.
+Radius is identity — sharp (0–2px), soft (4–6px), or round (10px+) — chosen by the package and applied consistently; mixing radii on one surface reads as templated. One border weight per surface; elevation *or* borders separate layers, never both at full strength. Under `nurix` both are the `edge` trait — the radius scale, `--radius-pill`, and the `--edge-hairline` / `--edge-stroke` weights — never per-surface literals.
 
 ## Loading, skeleton, progress
 
-Skeletons for layout-known loads, spinners only for unknowable ones, optimistic updates for high-frequency mutations with undo. Skeletons mirror the real layout's bones (no generic gray blocks). Nothing pulses faster than 1.2s; under `nurix` a status pulse is `<Chip prefix="dot" pulse>`, never `animate-pulse` (a hardcoded keyframe neither `pace` nor the inline clamp can reach), and loaders keep breathing inside inline collections by design.
+Skeletons for layout-known loads, spinners only for unknowable ones, optimistic updates for high-frequency mutations with undo. Skeletons mirror the real layout's bones (no generic gray blocks). Nothing pulses faster than 1.2s; under `nurix` a status pulse is `<Chip prefix="dot" isPulsing>`, never `animate-pulse` (a hardcoded keyframe neither `pace` nor the inline clamp can reach), and loaders keep breathing inside inline collections by design.
 
 ## Empty states
 
-The three empties (first-use, no-results, cleared-filter) each say what happened and what to do next, in the project voice. Art direction follows the package's restraint: an icon or nothing for dense tools; illustration only where the package's feel says warm. Never a bare "No data".
+The three empties (first-run, filtered-to-zero, failed-to-load) and a queue's cleared-empty each say what happened and what to do next, in the project voice. Art direction follows the package's restraint: an icon or nothing for dense tools; illustration only where the package's feel says warm. Never a bare "No data".
 
 ## Keyboard
 
@@ -54,4 +54,4 @@ Mono face with `tabular-nums`; a shiki theme paired to the package (dark identit
 
 ## Polish
 
-Focus rings on-brand (2px, offset, the accent — never browser default blue on a styled app); selection color derived from the accent at low alpha; scrollbars styled thin on dense panes; cursor changes only where affordance is real.
+Focus rings on-brand (a visible width, the accent — never browser default blue on a styled app; under `nurix` the library's `focus-ring`, sized by `--ring-width` / `--ring-offset` and coloured by `--ring`); selection color derived from the accent at low alpha; scrollbars styled thin on dense panes; cursor changes only where affordance is real.