@nurix/etna 0.20.37 → 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/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/scripts/README-validator.md

@@ -1,27 +1,39 @@
 # validate-design-md.mjs — the design.md system's validator + token emitter
 
-**CLI:** `node validate-design-md.mjs <file|folder> [--mode admission|build|ship] [--json] [--emit]`
+**CLI:** `node validate-design-md.mjs (<file|folder> | --project [dir]) [--mode admission|build|ship] [--json] [--emit] [--emit-personality] [--write] [--lib <folder>]`
 File mode validates one design.md. Folder mode validates every `.md` in the tree (skipping `SCHEMA.md`) plus `index.csv` integrity.
-`admission` and `build` run the same checks; `ship` adds the dmv-11 drift check against a `design.tokens.css` beside the input file.
+`--project [dir]` validates the project's own fork, located by the repo's shape: `packages/common/design.md` in a multi-package
+workspace, `src/common/design.md` in a single-package repo (`dir` defaults to the cwd; an absent file fails closed, naming the path).
+`admission` and `build` run the same checks; `ship` adds the dmv-11 drift check against a `design.tokens.css` beside the input file,
+and dmv-12's drift check against `personality.css`.
 `--json` prints `{file, fails:[{id,detail}], warns:[{id,detail}]}` (array in folder mode). Exit 0 on pass (warns allowed), 1 on any FAIL.
 
 **Emit:** `--emit` (single file) compiles the token artifact from the `yaml design-values` block to stdout — deterministic, byte-stable;
-redirect to `design.tokens.css`. Shape: `:root, :root[data-theme="light"]` + `:root[data-theme="dark"]` blocks (specificity armor, both
-0,2,0) carrying the 36 color roles as `--<role>`; the light block also carries `--font-display/sans/mono` (registered names quoted, with
-fallback stacks), `--text-<step>-size/-line/-weight` (+ `-family/-tracking/-features`), `--radius-*`, `--shadow-*`, `--duration-*`,
-`--ease-*`, and layout vars (`--space-base`, `--sidebar-width[-collapsed]`, `--topbar-height`, `--side-panel-width[-wide]`, `--content-max-width`).
+redirect to `design.tokens.css`, or add `--write` to write it beside the design.md. Shape: three blocks. A bare `:root` carries every
+theme-invariant token — `--font-display/sans/mono` (registered names quoted, with fallback stacks), the ramp as `--text-<step>` with
+`--line-height`/`--font-weight`/`--letter-spacing` sub-keys, `--radius-*`, `--shadow-*`, `--duration-*`, `--ease-*`, and layout vars
+(`--space-base`, `--sidebar-width[-collapsed]`, `--topbar-height`, `--side-panel-width[-wide]`, `--content-max-width`). Then
+`:root:not(.dark)` and `:root.dark` (specificity armor, both 0,2,0) carry the color roles as `--<role>`.
+`--emit-personality` (`primitives: nurix`) hands the design.md's `personality` traits to `@nurix/components`' own compiler
+(`compileToCss` from `@nurix/components/lib/personality`) and prints `personality.css`, or writes it with `--write`; `--lib <folder>`
+names where the library is installed when the resolver cannot tell. Any FAIL suppresses either artifact.
 
 **Fails (close the gate):** dmv-01 frontmatter strict, per-tier keys, id = filename · dmv-02 the 12 sections in order, non-empty,
 plus trailing design-values block · dmv-03 value block parses as YAML · dmv-04 coverage: 36 roles × both themes, ramp, register-scope,
 elevation, motion base, iconography, charts, layout · dmv-05 contrast on every declared pairing (body ≥ 4.5:1; primary/accent/
 destructive/sidebar-primary fills ≥ 3:1, warn under 4.5) · dmv-06 no image reference anywhere · dmv-07 index.csv ↔ files, both
 directions, no duplicates · dmv-08 registered font names + fallback stacks · dmv-09 no claude.md (any case) · dmv-10 project tier:
-`primitives: nurix|native` + `source-package` · dmv-11 (ship) emitted artifact byte-matches recompilation.
+`primitives: nurix|native` + `source-package` · dmv-11 (ship) emitted artifact byte-matches recompilation · dmv-12 the
+`personality` block (`primitives: nurix` only) uses the six traits `density|pace|edge|depth|texture|accent` with their closed values
+(`pace` a number 0..1; a `tone` key fails naming `accent`, as the library's compiler rejects it), and under `--mode ship`
+`personality.css` byte-matches the recompiled artifact.
 
 **Warns (recorded, never close):** dmw-01 background in the anti-cream band (L 0.84–0.97, C < 0.06, hue 40–100) · dmw-02 neutral
 surfaces pure gray (C < 0.005) or over-tinted (C > 0.015) · dmw-03 untinted black shadow above 0.15 alpha · dmw-04 ease-in entrance
 or duration over its element-class budget · dmw-05 display face granted a data register · dmw-06 dark ladder steps < ~0.04 L or hue
-drift · dmw-07 accent chroma delta between themes > 0.06.
+drift · dmw-07 accent chroma delta between themes > 0.06 · dmw-08 the dense operator tier unadopted (`typography.ramp` omits the
+optional steps) · dmw-09 (`primitives: nurix`) no personality block, so the library's neutral traits ship · dmw-10 (`primitives: nurix`)
+the `info` role undeclared, so `--intent-info` falls back to the library's own hue.
 
 Stdlib-only: vendors its own YAML-subset parser and oklch → sRGB → WCAG-contrast math. The exact contrast pair table, thresholds,
 and emission order live in the script's header comment.

package/data/harnesses/code/skills/design/scripts/validate-design-md.mjs

@@ -62,13 +62,14 @@
 //   dmv-11  (--mode ship) drift: the token artifact recompiled from the design.md byte-matches the
 //           design.tokens.css beside it.
 //   dmv-12  the personality block (primitives: nurix): a mapping over the six closed-vocabulary traits
-//           density|pace|edge|depth|texture|tone (pace a number 0..1); absent under native. In --mode
+//           density|pace|edge|depth|texture|accent (pace a number 0..1; a `tone` key fails naming
+//           `accent`, as the library's compiler rejects it); absent under native. In --mode
 //           ship, personality.css beside the design.md byte-matches the recompiled artifact, and no
 //           personality.css exists without a block (a hand-authored layer).
 //
 // WARN checks (never close): dmw-01 anti-cream backgrounds · dmw-02 neutral tint · dmw-03 untinted shadows ·
-//   dmw-04 motion budgets · dmw-05 personality block absent on a nurix project (the library's neutral
-//   traits ship) · dmw-06 `info` role undeclared on a nurix project (--tone-info falls back to the
+//   dmw-04 motion budgets · dmw-09 personality block absent on a nurix project (the library's neutral
+//   traits ship) · dmw-10 `info` role undeclared on a nurix project (--intent-info falls back to the
 //   library's own hue).
 //
 // dmv-05 — the exact contrast pair table (both themes; WCAG 2.1 relative-luminance contrast; colors
@@ -106,6 +107,8 @@
 //   dmw-07  accent chroma delta between themes > 0.06 (identity likely not held across themes).
 //
 //   dmw-08  the dense operator tier is unadopted: typography.ramp omits optional steps (one warn per package).
+//   dmw-09  (primitives: nurix) no personality block — the library's neutral traits ship.
+//   dmw-10  (primitives: nurix) the `info` role undeclared — --intent-info falls back to the library's own hue.
 //
 // Emitted artifact shape (deterministic, byte-stable): THREE blocks. A bare `:root` carries every
 // theme-invariant group — --font-display/sans/mono (registered names quoted, fallback stacks appended),
@@ -148,18 +151,18 @@ const RAMP_STEPS_OPTIONAL = ["title", "h3", "prose", "control-lg", "dense", "con
 const RAMP_STEPS = [...RAMP_STEPS_REQUIRED, ...RAMP_STEPS_OPTIONAL];
 const FONT_SLOTS = ["display", "sans", "mono"];
 // Optional color roles: emitted only when declared (both themes or neither). `info` completes the
-// success/warning/info trio @nurix/components' status dots read through --tone-*.
+// success/warning/info trio @nurix/components' status dots read through --intent-*.
 const OPTIONAL_COLOR_ROLES = ["info"];
 // The personality block — six closed-vocabulary traits @nurix/components compiles into the token
 // families its components read (lib/personality). The library owns the vocabulary; this mirrors it.
-const PERSONALITY_ORDER = ["density", "pace", "edge", "depth", "texture", "tone"];
+const PERSONALITY_ORDER = ["density", "pace", "edge", "depth", "texture", "accent"];
 const PERSONALITY_TRAITS = {
     density: ["compact", "regular", "airy"],
     pace: null, // the one scalar: 0 still · 0.5 the library's neutral timing · 1 lively
     edge: ["sharp", "regular", "soft"],
     depth: ["flat", "layered", "elevated"],
     texture: ["clean", "grainy"],
-    tone: ["neutral", "expressive"],
+    accent: ["neutral", "expressive"],
 };
 const THEMES = ["light", "dark"];
 const TIERS = ["default", "variant", "brand", "project"];
@@ -750,13 +753,13 @@ function checkCoverage(values, report) {
     else if (layout.base == null) missing("layout.base");
 }
 
-// dmv-12 — the personality block, and the two nurix-project warns (dmw-05 block absent, dmw-06 info absent).
+// dmv-12 — the personality block, and the two nurix-project warns (dmw-09 block absent, dmw-10 info absent).
 function checkPersonality(front, values, report) {
     const isNurixProject = !!front && front.tier === "project" && front.primitives === "nurix";
     const p = values.personality;
     if (p === undefined) {
         if (isNurixProject) {
-            warn(report, "dmw-05", "personality block absent — @nurix/components ships its neutral traits (regular · pace 0.5 · regular · layered · grainy · neutral); declare the traits §4–§7 imply so density, motion, radius and depth reach the components");
+            warn(report, "dmw-09", "personality block absent — @nurix/components ships its neutral traits (regular · pace 0.5 · regular · layered · grainy · neutral); declare the traits §4–§7 imply so density, motion, radius and depth reach the components");
         }
     } else if (!isObj(p)) {
         fail(report, "dmv-12", "personality must be a mapping of traits");
@@ -765,7 +768,9 @@ function checkPersonality(front, values, report) {
             fail(report, "dmv-12", "personality is compiled by @nurix/components — under primitives: native nothing reads it; drop the block or switch primitives");
         }
         for (const [k, v] of Object.entries(p)) {
-            if (!(k in PERSONALITY_TRAITS)) {
+            if (k === "tone") {
+                fail(report, "dmv-12", `personality.tone is not a trait — the accent trait carries that axis (accent: ${PERSONALITY_TRAITS.accent.join("|")}); the library's compiler rejects tone`);
+            } else if (!(k in PERSONALITY_TRAITS)) {
                 fail(report, "dmv-12", `personality.${k} is not a trait (${PERSONALITY_ORDER.join("|")})`);
             } else if (k === "pace") {
                 const n = typeof v === "number" ? v : Number(v);
@@ -787,7 +792,7 @@ function checkPersonality(front, values, report) {
             const bad = THEMES.filter((t) => !parseColor(color[t][role]));
             if (bad.length) fail(report, "dmv-04", `color.${role} unparseable in ${bad.join(", ")}`);
         } else if (isNurixProject) {
-            warn(report, "dmw-06", `color.${role} undeclared — @nurix/components' --tone-${role} falls back to the library's own hue beside your success/warning; declare it in both themes`);
+            warn(report, "dmw-10", `color.${role} undeclared — @nurix/components' --intent-${role} falls back to the library's own hue beside your success/warning; declare it in both themes`);
         }
     }
 }

package/data/harnesses/delivery/harness.json

@@ -1,7 +1,7 @@
 {
   "harness": "delivery",
   "name": "delivery",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "files": [
     ".prettierignore",
     ".prettierrc.json",

package/data/harnesses/etna/harness.json

@@ -1,7 +1,7 @@
 {
   "harness": "etna",
   "name": "etna",
-  "version": "1.5.32",
+  "version": "1.5.33",
   "files": [
     ".prettierignore",
     ".prettierrc.json",
@@ -14,5 +14,5 @@
     "origin": "https://cdn.nustack.io",
     "track": "latest"
   },
-  "digest": "2e85809b94e3"
+  "digest": "8de8cea88938"
 }