@nurix/etna 0.19.51 → 0.19.53

package/data/harnesses/code/skills/design/data/blueprints/settings.md

@@ -0,0 +1,38 @@
+---
+id: settings
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from GitHub repository settings, Slack admin console, Stripe Dashboard settings, Salesforce Setup Quick Find, common SaaS account-settings patterns"
+license: open
+---
+Composition shapes for the settings archetype — configuration surfaces organized by scope, subject, and risk. The size and depth of the settings surface picks the shape.
+
+## Shape: Left Category Nav + Detail Pane
+Regions: left navigation (fixed width, expandable category tree) / detail pane (remaining width, shows the form or table for the selected category only).
+The eye lands on: the highlighted item in the left nav, then the pane's section heading.
+When to use: settings span many unrelated categories that users navigate between rather than read straight through.
+Seen in: GitHub repository settings, Slack's admin console left-nav category tree.
+
+## Shape: Top Tab Strip Sections
+Regions: horizontal tab strip (top, full-width, a handful of top-level categories) / one scrollable panel per tab filling the rest of the page.
+The eye lands on: the active tab label.
+When to use: the number of top-level categories is small enough to stay visible at once without a side nav's real estate cost.
+Seen in: Stripe Dashboard settings, split into Personal / Account / Product tabs.
+
+## Shape: Search-Driven Settings
+Regions: a quick-find search box (top, prominent) over an otherwise large, unbrowsed index of setting pages / results filter the index live as the user types.
+The eye lands on: the search box itself before any content.
+When to use: the settings surface is too large or too deep to browse by category reliably, and users usually know the setting's name.
+Seen in: Salesforce's Setup home with Quick Find search over the full Setup/Object Manager index.
+
+## Shape: Long Scrolling Anchored Page
+Regions: a single continuous page (full-width, no separate nav pane or tabs) with settings grouped into vertically stacked sections / optional anchor links jump to a section.
+The eye lands on: whichever section heading is nearest the top of the current scroll position.
+When to use: the total settings surface is modest enough that scrolling beats clicking between categories.
+Seen in: common single-page "Account settings" patterns across SaaS admin surfaces (the pattern GitHub and Stripe both fall back to for smaller settings areas nested inside their larger nav/tab shells).
+
+## Shape: Master-Detail Settings List
+Regions: a table of configuration records (full-width or left-majority — API keys, webhooks, members, roles) with an "add" action above it / clicking a row opens that record's own edit form, inline or in a panel.
+The eye lands on: the most recently created or most active row in the table.
+When to use: the "setting" is really a collection of independent records (keys, integrations, members) rather than a single configuration object.
+Seen in: Stripe's API keys and webhooks pages, GitHub's collaborators and webhooks settings pages.

package/data/harnesses/code/skills/design/data/charts/census.csv

@@ -0,0 +1,58 @@
+id,family,min_measures,max_measures,min_dims,max_dims,requires_flags,excludes_flags,viewport_min,notes
+bar,bar,1,1,1,1,,,mobile,zero-anchored value axis; one value per category; comfort cap 12 categories (K2)
+grouped-bar,bar,1,1,2,2,,,tablet,series cap 4 (K7); cross-group comparison of non-adjacent bars is hard
+stacked-bar,bar,1,1,2,2,parts-form-whole,negative-values,mobile,additive parts of one total; totals cap 10 (K4); middle segments lack a shared baseline
+diverging-bar,bar,1,1,1,2,negative-values,,mobile,meaningful zero or midpoint; Likert and population pyramid fold here
+lollipop,bar,1,1,1,1,,,mobile,less ink than a bar; right when values are large and similar
+dot-plot,bar,1,2,1,1,,mixed-units,mobile,common scale required; the no-zero-baseline escape
+dumbbell,bar,2,2,1,1,,mixed-units,mobile,exactly two points per category; start and end must share a unit
+pictogram,bar,1,1,1,1,whole-units,negative-values,tablet,one icon equals k units; stated unit scale; decorative
+line-basic,line,1,1,1,1,temporal|ordered-progression,,mobile,one series over ordered axis
+line-multi,line,1,1,2,2,temporal|ordered-progression,,mobile,series cap 6 (K3); beyond cap facet into small multiples
+line-with-target,line,2,2,1,1,temporal|ordered-progression|target-exists,mixed-units,mobile,series + target band
+area,line,1,1,1,1,temporal,negative-values|irregular-temporal,mobile,zero baseline; magnitude emphasis
+stacked-area,line,1,1,2,2,temporal|parts-form-whole,negative-values|irregular-temporal,tablet,additive parts over time; middle-layer trends unreadable
+streamgraph,line,1,1,2,2,temporal,negative-values|irregular-temporal,desktop,pattern only; wants many smooth series; no precise reading
+slope,line,1,1,2,2,temporal|ordered-progression,,mobile,exactly 2 or 3 x positions; rank-change emphasis
+bump,line,1,1,2,2,temporal|ordered-progression,,tablet,plots rank not value; series cap 12
+sparkline,line,1,1,1,1,temporal,,mobile,inline miniature; needs an adjacent number for scale
+pie,part-to-whole,1,1,1,1,parts-form-whole,temporal|negative-values,desktop,max 6 slices
+waffle,part-to-whole,1,1,1,1,parts-form-whole,negative-values,tablet,10x10 grid (K8); whole-cell rounding drops sub-1% parts
+treemap,part-to-whole,1,1,1,2,parts-form-whole,negative-values,tablet,children sum to parents; a flat one-level list degenerates fine
+sunburst,part-to-whole,1,1,0,2,tree|parts-form-whole,negative-values,desktop,hierarchy on concentric rings; outer-ring distortion caveat
+marimekko,part-to-whole,1,2,2,2,parts-form-whole,negative-values|mixed-units,desktop,two area dimensions; expert audiences
+funnel,part-to-whole,1,1,1,1,ordered-progression,negative-values,mobile,genuine ordered pipeline only; typically monotone decreasing
+histogram,distribution,1,1,0,1,raw-observations,,mobile,bins derived not supplied; never category-value pairs
+density,distribution,1,1,0,1,raw-observations,,tablet,KDE; bandwidth can oversmooth; needs large n
+box-plot,distribution,1,1,0,1,raw-observations,,mobile,five-number summary; hides multimodality
+violin,distribution,1,1,0,1,raw-observations,,tablet,mirrored KDE; needs enough n per group
+strip-plot,distribution,1,1,0,1,raw-observations,,mobile,every point drawn; jitter for ties; moderate n
+scatter,correlation,2,2,0,1,,,mobile,point-level rows; overplotting escape to hexbin at scale (K5)
+bubble,correlation,3,3,0,1,,,tablet,size maps to area never radius; size measure non-negative
+hexbin,correlation,2,2,0,1,raw-observations,,tablet,the overplotting escape; binned 2D density
+splom,correlation,3,8,0,1,raw-observations,,desktop,pairwise panels grow O(k^2); variable cap 8 (K9)
+parallel-coordinates,correlation,3,12,0,1,,,desktop,axes normalized individually; axis order changes visible structure
+radar,correlation,3,8,0,1,,mixed-units,tablet,shared or normalized axes; spurious area reading; entity cap 3
+ordered-bar,ranking,1,1,1,1,,,mobile,sorted by value not label; inherits bar constraints (K2)
+pareto,ranking,1,1,1,1,parts-form-whole,negative-values,desktop,descending bars + cumulative percent line; additive counts only
+sankey,flow,1,1,2,2,edges|ordered-progression,negative-values,desktop,conservation reads best; no cycles; stage-ordered nodes
+chord,flow,1,1,2,2,edges|matrix,negative-values,desktop,pairwise flows; dense matrices become ribbon spaghetti
+waterfall,flow,1,1,1,1,ordered-progression,,tablet,ordered decomposition start to end; signed contributions welcome
+network-graph,network,0,1,2,2,edges,,desktop,visible-node cap ~300 (K10); beyond that use an adjacency matrix
+tree-diagram,network,0,1,0,2,tree,,tablet,parent-child hierarchy; dendrogram adds merge height
+choropleth,geo,1,1,1,1,geo,no-color-encoding,tablet,rates never raw totals
+symbol-map,geo,1,1,1,1,geo,negative-values,tablet,totals; size to area; complement of choropleth
+flow-map,geo,0,1,2,2,geo,,desktop,origin-destination movement across geography
+point-map,geo,0,0,1,2,geo,,mobile,position only; no value encoding
+gantt,temporal-event,0,1,1,2,interval,,desktop,true start AND end per row
+event-timeline,temporal-event,0,0,1,2,temporal,,mobile,point events not intervals; labels not measures; optional track dimension
+calendar-heatmap,temporal-event,1,1,1,1,temporal,no-color-encoding,tablet,daily grain on a calendar grid; pattern over precision
+kpi-card,kpi,1,2,0,0,,,mobile,needs comparison context; delta or target welcome
+gauge,kpi,1,1,0,0,target-exists,,tablet,defined domain required; space-hungry; decorative
+progress-bar,kpi,1,1,0,0,target-exists,negative-values,mobile,one part-versus-whole fact; meaningless without a goal
+bullet,kpi,1,2,0,1,target-exists,mixed-units,mobile,target marker + qualitative bands; compact gauge replacement
+heatmap,matrix,1,1,2,2,,no-color-encoding,tablet,one value per cell; aggregate first; replaces spaghetti lines at high series counts
+table,table,0,99,0,99,,,mobile,universal fallback; exact values over comparison
+table-hybrid,table,1,99,0,99,,,tablet,data bars; cell heat; inline sparklines; the bridge leaf
+candlestick,specialized,4,4,1,1,temporal,irregular-temporal,desktop,strict OHLC tuple per period
+error-bands,specialized,1,3,0,2,uncertainty,,mobile,composite overlay; attaches to line or bar or scatter; never standalone

package/data/harnesses/code/skills/design/data/checklists/browse.md

@@ -0,0 +1,21 @@
+---
+id: browse
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (page archetypes, table mechanics, state matrix chapters)"
+license: open
+---
+Positive obligations for a browse surface — what every good instance has, each checkable from a rendered screen.
+
+- A visible result count adjacent to the search/filter controls that reflects the active filter set ("1–50 of 1,204").
+- Every active filter rendered as a dismissible chip or token near the results, so the current slice is readable at a glance.
+- A search or quick-filter input whose placeholder names what is searchable ("Search by name, email, or ID…").
+- Saved or standing views surfaced as named tabs or a view switcher, with the active view visibly marked.
+- Real pagination or an explicit total with position — never an unbounded, unlabeled scroll.
+- Sort state visible on the sorted column or control (direction indicator on the header).
+- Status values rendered as colored chips or badges, one distinct color per state, consistent everywhere the status appears.
+- Table columns aligned by type: numbers right-aligned in tabular figures, text left-aligned, dates in one consistent format.
+- Each result row or card leads with the record's human identity (name/title), not its internal ID.
+- Row or card hover affordance: a background shift, revealed actions, or both, on every result.
+- A designed zero-results state that names the active filters and offers a one-click clear-filters action.
+- A designed true-empty state (no records exist yet) distinct from zero-results, with a path to create or import.

package/data/harnesses/code/skills/design/data/checklists/creation-flow.md

@@ -0,0 +1,20 @@
+---
+id: creation-flow
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (creation-path catalog, modes, state matrix chapters)"
+license: open
+---
+Positive obligations for a creation-flow surface — what every good instance has, each checkable from a rendered screen.
+
+- The first input focused on entry (visible focus ring), with field order matching reading order.
+- Required and optional fields visibly distinguished — one convention, applied to every field.
+- A progress indicator whenever the flow has steps: current step named, completed steps visually distinct, completed steps re-enterable.
+- Fields grouped into labeled sections rather than one undifferentiated column.
+- Sensible defaults pre-filled wherever one exists (owner = current user, date = today, visible and editable).
+- Inline validation rendered beside the offending field, with a message that names the fix ("Must be a work email"), not just an error color.
+- The primary action labeled verb + object ("Create ticket", "Invite member") — never a bare "Submit".
+- A visible cancel or close path, with draft preservation signaled when the flow is dismissed mid-entry.
+- On failed submit, an error summary that names each problem and points (link or scroll) to its field.
+- Helper text under any field whose format or effect isn't self-evident.
+- Success hands the user the created object: navigation to it or a named link, with confirmation copy naming what was created.

package/data/harnesses/code/skills/design/data/checklists/dashboard.md

@@ -0,0 +1,21 @@
+---
+id: dashboard
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (dashboards chapter: every tile is number + comparison + trend + state + door)"
+license: open
+---
+Positive obligations for a dashboard surface — what every good instance has, each checkable from a rendered screen.
+
+- Every KPI tile carries all five parts: the number, a comparison (vs. prior period or target), a trend (sparkline or delta), a state (good/warn/bad treatment), and a door (a click-through to the detail behind it).
+- Numbers formatted for scanning: tabular figures, thousands separators, units or currency attached, consistent decimal places across tiles.
+- Deltas signed and colored by meaning — down can be green when down is good — never colored by direction alone.
+- One time-range control visible and visibly applied to every widget it scopes ("Last 30 days" readable on the surface).
+- Every chart titled with the measure and dimension in plain words ("Revenue by region"), not an internal metric name.
+- Chart axes labeled or self-evident, with an honest baseline on value axes.
+- A legend wherever more than one series shares a plot, with legend colors matching the marks.
+- Data freshness stamped somewhere fixed ("Updated 4 min ago" / "As of 09:00").
+- Any metric in a breach or alert state visibly different at a glance — the surface points the eye at what's wrong.
+- Widgets aligned to a shared grid with consistent gutters; region edges line up across the page.
+- Each widget owning a designed loading state (skeleton in the widget's own footprint) and a designed empty state naming what's missing.
+- Every table or list widget cut to a readable size with a door to the full view ("View all 214").

package/data/harnesses/code/skills/design/data/checklists/grid.md

@@ -0,0 +1,21 @@
+---
+id: grid
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (table mechanics, container choice, state matrix chapters)"
+license: open
+---
+Positive obligations for a grid surface — what every good instance has, each checkable from a rendered screen.
+
+- An identity column (or columns) frozen against horizontal scroll, anchoring every row.
+- Column headers sticky against vertical scroll, so field names never leave the screen.
+- Cell rendering differentiated by type: numbers right-aligned in tabular figures, dates in one format, enums as chips, booleans as checks — never everything as plain left-aligned text.
+- A selection checkbox column with a select-all control in the header.
+- A bulk-action bar that appears with a visible selection count once rows are selected, naming the actions it applies.
+- An add-record affordance pinned to a fixed location (bottom edge or toolbar), visible without scrolling.
+- Group headers carrying aggregates (count, sum, or average) whenever grouping is active.
+- A visible cell focus state distinct from row hover, so the editing target is unambiguous.
+- A density or row-height control in the toolbar.
+- The total record count visible somewhere fixed (toolbar or footer).
+- Inline save-state feedback on edited cells: saving, saved, or error, each visually distinct.
+- A designed empty state for a grid with no rows, with a create or import path — never a bare header row over whitespace.

package/data/harnesses/code/skills/design/data/checklists/queue.md

@@ -0,0 +1,21 @@
+---
+id: queue
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (page archetypes, verbs, state matrix chapters)"
+license: open
+---
+Positive obligations for a queue surface — what every good instance has, each checkable from a rendered screen.
+
+- The queue's ordering key (priority, age, SLA) readable from the first screen — the operator can say why the top item is on top.
+- Claim/ownership state on every item: an assignee avatar or name, or an explicit unclaimed marker.
+- An aging or SLA indicator per item (time in queue, due-in countdown) whose color shifts as the deadline degrades.
+- Visible keyboard affordances for advancing: shortcut hints on the primary actions or a reachable shortcuts overlay (J/K-style next/previous).
+- Item counts visible per view or group, so backlog size is readable without scrolling.
+- Unprocessed items visually distinct from processed ones (weight, dot, or background — more than color alone).
+- The selected item highlighted in the list while its detail is open, so the operator keeps their place.
+- The primary triage verbs (resolve, approve, reassign, escalate) reachable from the item without leaving the queue — a pinned action bar, not a buried menu.
+- Item status rendered as a colored chip, consistent with the same status colors used elsewhere in the product.
+- Priority or escalation markers visually ranked — urgent reads heavier than high, high heavier than normal.
+- A designed queue-cleared state (celebratory or calm, but authored) distinct from a zero-results filter state.
+- A designed degraded state when items fail to load, with a retry affordance.

package/data/harnesses/code/skills/design/data/checklists/record-detail.md

@@ -0,0 +1,21 @@
+---
+id: record-detail
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (attributes/lifecycle/history, verbs, standard pages chapters)"
+license: open
+---
+Positive obligations for a record-detail surface — what every good instance has, each checkable from a rendered screen.
+
+- The record's human identity (name/title) and its lifecycle status both visible in the header without scrolling.
+- A highlights band carrying the 3–7 most-referenced fields at the top of the page.
+- The primary verbs for the record's current state rendered as visible buttons in the header — the top actions are not buried in an overflow menu.
+- An activity or history timeline where every entry carries an actor and a timestamp.
+- Related records surfaced (rail, tabs, or cards) with a count per relationship type.
+- A tab strip or section navigation when content exceeds one screen, with the active section visibly marked.
+- Every field value paired with a visible label — no orphan values the reader must guess at.
+- Empty fields rendered as a designed "not set" affordance (muted dash or add prompt), never blank space.
+- Editable fields showing an edit affordance on hover or focus.
+- Timestamps rendered consistently, with relative age ("2h ago") where recency drives decisions.
+- The status chip using the same color and label the collection view uses for that state.
+- A breadcrumb or back affordance naming the collection this record came from.

package/data/harnesses/code/skills/design/data/checklists/settings.md

@@ -0,0 +1,21 @@
+---
+id: settings
+class: e2
+sourced: 2026-07-12
+source: "derived from the D3 blueprint sweep + the b2b-ux-patterns distillation (settings chapter: scope → subject → risk)"
+license: open
+---
+Positive obligations for a settings surface — what every good instance has, each checkable from a rendered screen.
+
+- The scope visibly labeled on every page: whether these settings apply to the person, the workspace, or the organization.
+- A navigation surface (category nav, tab strip, or quick-find) with the active category visibly marked.
+- Every setting carrying a label and a one-line description of its effect — the control alone never has to explain itself.
+- Current values readable without entering an edit mode.
+- Save semantics explicit: a save bar that enables on change, or per-control auto-save with a visible saved confirmation — one convention for the whole surface.
+- Toggle and radio states distinguishable by more than color alone (position, label, or icon).
+- Risky settings preceded by a consequence note ("Applies to all 34 members") before the control.
+- Destructive actions isolated in a visually distinct danger zone, each gated by a confirmation that requires intent (typing the name, not just OK).
+- Collection-type settings (API keys, webhooks, members, roles) rendered as a table with a labeled add action and per-row management.
+- Secrets shown masked, with reveal and copy affordances.
+- A quick-find search over settings when the category list exceeds one viewport.
+- Settings the viewer cannot change shown disabled with a note naming who can — not silently hidden.

package/data/harnesses/code/skills/design/data/chrome/board-column.md

@@ -0,0 +1,68 @@
+---
+id: board-column
+class: d2
+sourced: 2026-07-12
+source: "spec authored from scratch — @nurix/components ships no board/kanban primitive; closest building blocks: Sortable (dnd-kit compound), Card, Badge, ScrollArea, Avatar, EmptyState — ~/dev/components"
+license: open
+---
+
+# Chrome recipe — board column
+
+> **Library gap.** `@nurix/components` has no board/kanban component (verified 2026-07-12: no kanban/board export; the docs note the name collision with Kibo UI's kanban-style "List" as a warning, not a feature). This recipe is therefore a from-scratch specification in both switch modes; under `nurix` it composes the library's `Sortable` drag-and-drop compound with `Card`/`Badge`/`ScrollArea`. Flagged as a curation candidate for library admission.
+
+One column of a kanban/work board: a workflow state rendered as a vertical lane of draggable cards with a counted header, an add affordance, and drop semantics. The board is a view-type projection of a queue — columns are states, cards are work items.
+
+## Anatomy
+
+| Slot | Spec | nurix building block |
+| --- | --- | --- |
+| Column shell | Fixed width (280–320px), full board height, vertical flex; a quiet wash distinguishing the lane from the canvas and from its cards; rounded per the package radius scale. | `div` + tokens |
+| Column header | Pinned: state dot or icon (the column's identity color), title, count badge (live: cards currently in the lane), optional WIP limit rendered as `count / limit`, trailing overflow menu (rename, set limit, collapse), optional collapse toggle. | `Badge`, `DropdownMenu` |
+| Card list | The only scrolling region — each column scrolls independently; consistent card gap from the spacing scale. | `ScrollArea` + `SortableContent` (dnd-kit `SortableContext`, `orientation="vertical"`) |
+| Card | The unit of drag: title (2-line clamp), meta row (assignee `Avatar`, due date, priority pill), optional label chips and a progress/checklist hint. Whole-card drag (`SortableItem asHandle`) or an explicit grip (`SortableItemHandle`) — with an explicit handle, the card body remains a plain click target for opening the record. | `Card` + `SortableItem` |
+| Drop indicator | An insertion line (or ghost slot) at the projected index while a drag is over the column. | dnd-kit collision feedback |
+| Drag overlay | The dragged card's floating preview, portaled above the board at overlay elevation, slightly scaled/tilted per the package's motion vocabulary; the origin card stays in place at reduced opacity. | `SortableOverlay` |
+| Footer | "+ Add card" ghost affordance pinned under the list; activating it opens an inline title input at the column tail. | `Button variant="ghost"` |
+| Empty slot | An empty column keeps a dashed placeholder slot so it remains an obvious drop target. | `EmptyState` (quiet) |
+
+Board-level contract the column participates in: `Sortable` root (`DndContext`) owns `value`/`onValueChange` and `onMove({ activeIndex, overIndex })`; state changes commit through the consumer's data layer — the column never owns item data.
+
+## The eight states
+
+| State | Spec | Token roles |
+| --- | --- | --- |
+| default | Lane on a low-alpha muted wash with a hairline edge; cards on the card surface with hairline borders; count badge quiet. | `muted` (wash), `card` + `card-foreground`, `border` |
+| hover | A hovered card lifts one step on the package elevation ramp; the add affordance and card grips sharpen from rest. | elevation system, `accent` |
+| focus | Focused card (or its handle) shows a focus-visible ring; the roving position is always visible. | `ring` |
+| active | Mid-drag: origin card at ~40–50% opacity in place; overlay elevated above everything; the hovered target column's wash intensifies and the drop indicator renders in the primary role at the exact insertion index. | `primary` (indicator), `accent` (target wash) |
+| disabled | WIP limit reached: the count reads `n / limit` in the warning role and the column rejects drops (indicator suppressed, "limit reached" hint). A locked/terminal column renders muted and non-droppable. | `warning`, reduced-alpha |
+| loading | Header renders immediately with title; 2–3 skeleton cards hold the lane's shape; counts appear only when true. | `muted` |
+| error / empty | Empty: the dashed drop slot plus a one-line hint — the lane never collapses to zero height. A failed move animates the card back to its origin and raises a toast; the board never shows a state the server rejected. | `muted-foreground`; `destructive` (failure toast) |
+| success | A completed drop settles with a brief interruptible settle animation; both columns' counts update in the same frame. A card entering a terminal "done" column may flash its status chip on the success role. | `success` status role (transient) |
+
+## Keyboard behavior
+
+Grounded in the shipped `Sortable`'s keyboard sensor and screen-reader announcements (grab / move / drop / cancel are announced):
+
+- **Tab** reaches each card (or its handle) in column order, then the column's add affordance and menu. Every card is focusable — the library note that `SortableItem` dropped its `tabIndex` fallback means the spec requires `asHandle` or an explicit focusable handle on every card; a pointer-only board is a defect.
+- **Enter / Space** on a focused card picks it up; **arrow up/down** moves it within the column; **arrow left/right** moves it to the adjacent column (same relative index, clamped); **Enter / Space** drops; **Escape** cancels and returns the card to its origin.
+- Each move is announced to assistive tech ("moved to Review, position 2 of 5"); drop and cancel are announced likewise.
+- **Enter** on the card body (when a separate handle exists) opens the record — typically in the side-panel recipe.
+- The add affordance opens an inline input: **Enter** commits the new card, **Escape** dismisses.
+- **cmdk path**: bulk and precise moves ("Move PROJ-142 to Done") belong in the command palette; the board's own keys cover local, one-card moves.
+
+## Token reach
+
+- `muted` — the lane wash (the column is a *region*, not a card: it stays one step quieter than its cards); `card` / `card-foreground` — the cards; `border` — lane and card hairlines.
+- `primary` — the drop indicator and the add affordance's hover emphasis; `ring` — focus; `accent` — hover fills and the active drop-target wash.
+- **Column identity colors** (the state dot, an optional header tint) resolve from `chart-1..5` or the status roles — a board with per-column hex literals re-skins wrong on package switch and renders light-in-dark; this is the token-reach report's target on this component.
+- Priority pills and label chips on cards consume status roles / `chart-1..5` exactly as in the data-table recipe — the same option object must render identically in both projections.
+- `warning` — WIP-limit breach; `destructive` — failed-move feedback; `success` — transient completion.
+- Overlay elevation comes from the package's shadow ramp (brand-tinted per the elevation doctrine), never an ad-hoc black shadow.
+
+## When to use / composition notes
+
+A board is the right projection when workflow state is the primary axis the operator thinks in and moving items between states is a frequent, deliberate act — triage, pipeline stages, content review. It is a projection of the queue/browse archetype, never an archetype itself: the same items must remain reachable as a table, and the switch between projections belongs to the page, not the component. Keep visible cards per column modest (order of tens; virtualize beyond) and card content to what the move decision needs — title, owner, urgency; everything else lives one click away in the side panel. Columns are few and stable (a board with twelve columns is a table wearing a costume); WIP limits are the one piece of process the chrome itself should enforce visibly.
+
+- **`primitives: nurix`** — composed (no single import; library gap flagged above): `import { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "@nurix/components/sortable"; import { Card } from "@nurix/components/card"; import { Badge } from "@nurix/components/badge"; import { ScrollArea } from "@nurix/components/scroll-area";` — `Sortable` supplies `value`/`onValueChange`, `orientation`, `onMove`, mouse/touch/keyboard sensors, and screen-reader announcements out of the box.
+- **`primitives: native`** — this recipe is the full build spec: fixed-width independently-scrolling lanes, drag-and-drop with the complete keyboard path and live announcements above (the stack's own dnd library or an existing design-system board), optimistic moves with revert-on-failure, WIP-limit rejection, and all column/priority color resolved from the token artifact.

package/data/harnesses/code/skills/design/data/chrome/data-table.md

@@ -0,0 +1,63 @@
+---
+id: data-table
+class: d2
+sourced: 2026-07-12
+source: "@nurix/components Table + defineColumn (on the UiTable primitive layer, @tanstack/react-table engine) — ~/dev/components"
+license: open
+---
+
+# Chrome recipe — data table
+
+The operator data table: column-definition-driven, read-only by default, with opt-in selection, sorting, pagination, density, borders, resize, and editable cells that write back through a single callback. Governing invariant: a zero-config `<Table data columns />` renders DOM equivalent to a hand-written semantic table — every feature is purely additive.
+
+## Anatomy
+
+| Slot | Library part | Spec |
+| --- | --- | --- |
+| Shells | `LoadingShell` → `FooterShell` → `AutoHeightShell` | Opt-in wrappers composed around the bare table, gated on `tableConfig` flags (`loading`, `pagination`, `autoHeight`). |
+| Header row | `ColumnHeader` | One cell per column; sortable columns (`display.sortable`, defaulted from type) render a sort dropdown when `tableConfig.sort` is on. `header: false` removes the row entirely. |
+| Selection column | id `__select__` | Prepended when `tableConfig.rowSelection`: tri-state header checkbox (page-scoped, indeterminate) + per-row checkboxes; selection accumulates across pages and emits `onSelect(selectedIds)`. |
+| Body rows | `UiTableRow` | Keyed by `row.id` (`TData extends { id: string }`); selected rows carry `data-state="selected"`. |
+| Cells | 13 renderers | Dispatched on the column `component`: `text`, `number`, `boolean`, `date`, `date-range`, `select`, `multiselect`, `slider`, `rating`, `status`, `priority`, `assignee`, `sparkline`. Each has a **display** variant (default — static, no popovers) and an **editable** variant (`editable: true`); a custom `cell(row)` function wins over everything. |
+| Column contract | `defineColumn({ slug, label, type, component?, editable?, hidden?, metadata?, display?, cell? })` | `type: "text" \| "number" \| "boolean" \| "date" \| "enum" \| "user"` drives the default component and sortability; enum-family options are `metadata.options: [{ value, label, color }]`; explicit `display.width` is honored independent of resize. |
+| Pagination footer | `TablePagination` | Controlled `{ current, size, total, onChange }`, 1-indexed; page numbers collapse with ellipses past seven pages. Sorting and pagination are always external — the table never owns that state. |
+| Config | `tableConfig` | `preset: "classic"` (comfortable density + pagination + full borders + muted header wash), `density: "compact" \| "comfortable" \| "spacious"`, `columnBorders`, `tableBorders`, `resize` (drag handles, 50px floor). |
+| Write-back | `onCellChange({ rowId, columnId, slug, value })` | Fires only from editable cells at each widget's natural commit; the table never mutates `data`. |
+
+## The eight states
+
+| State | Spec | Token roles |
+| --- | --- | --- |
+| default | Rows on the canvas with hairline row separators; header optionally on a low-alpha muted wash (classic preset); numerals tabular. | `background`/`card`, `border`, `muted` at low alpha, `foreground` |
+| hover | Row takes a quiet muted wash; sort triggers and checkboxes reveal on hover where hidden at rest. | `muted` |
+| focus | Focus-visible ring on each interactive control — checkboxes, sort triggers, editable widgets, pagination buttons. | `ring` |
+| active | Selected rows fill via `data-state="selected"`; checked boxes fill with the primary role; an open editable cell shows its live widget with ring emphasis; the sorted column's header shows direction. | `muted` (row), `primary` (checkbox), `ring` |
+| disabled | The default **is** read-only — display cells are static, not "disabled". Truly disabled controls (a locked toggle, a non-permitted action) render at ~50% opacity with no pointer events. | reduced-alpha foreground |
+| loading | `loading: true` overlays a centered spinner while retaining rendered rows beneath (no layout collapse); a first load with no data renders skeleton rows at the configured density. | `muted` (skeleton), `muted-foreground` (spinner) |
+| error / empty | Zero rows render an empty-state block in the body — message + optional action — never a bare void. Row-level degradation is expressed through status pills (e.g. a failed sync status) on status roles, and stale data through a caption, not through reddened rows. | `muted-foreground`; `destructive`/`warning` status roles |
+| success | A committed edit re-renders through parent state immediately (single source of truth); positive statuses render as status-role pills. Transient save confirmation belongs to a toast, not the grid. | `success` status role |
+
+## Keyboard behavior
+
+- **Tab** moves through interactive elements in DOM order: header checkbox → sort triggers → row checkboxes → editable widgets → pagination. Display cells are not focus stops.
+- **Enter/Space** toggles checkboxes and opens a sort dropdown; inside the dropdown, arrows move, Enter applies, **Escape** closes to the trigger. Up to 3 simultaneously sorted columns share one direction, FIFO-evicted.
+- **Editable commit semantics** (what fires `onCellChange`): text/number commit on **Enter or blur**, **Escape** reverts the uncommitted value; select/status/priority/assignee commit on selection; multiselect on popover close after a change; boolean on toggle; slider on release; rating on star activation; date on selection; date-range on full-range selection.
+- **Enum-family cells** open a searchable listbox (the compound Select): type to filter, arrows to move, Enter to select, Escape to close — the cmdk interaction grammar applied per-cell.
+- Pagination controls are plain buttons — Enter/Space activate; no custom arrow-key handling.
+
+## Token reach
+
+- `background` / `card` — the table surface; `border` — row separators, opt-in column/table borders, resize handles.
+- `foreground` / `muted-foreground` — cell text vs secondary text (dates, captions, empty state).
+- `muted` — hover wash, selected-row fill, classic header wash, skeletons.
+- `primary` — checkbox fills and the focused edit widget's emphasis; `ring` — focus.
+- **Status/enum pills** — the `metadata.options` `color` field is specified as a token role (status roles or `chart-1..5`), never a hex literal; the pill resolves its tint from the role so package switches re-skin every pill. A table whose status column embeds literals renders wrong in the other theme while every other check stays green — this is the token-reach report's primary target.
+- **Sparkline cells** — `metadata.sparklineColors` defaults must resolve to `chart-1..5`; a sparkline never carries a color literal.
+- Destructive row actions use `destructive`. Numeric cells render with tabular numerals.
+
+## When to use / composition notes
+
+The data table is the default projection for browse and queue archetypes — reach for it whenever rows are the unit of work and columns are attributes the operator scans, sorts, or edits in place. Real pagination and status chips are positive obligations for any believable table. Start read-only (the default) and make columns editable one at a time only where in-place editing is the actual workflow; keep sorting/pagination state in the page (the table is deliberately stateless about both) so URLs and refreshes preserve the operator's position. For bespoke markup the recipe's DOM contract is the semantic-table layer itself (`UiTable` under `nurix`), not a div grid.
+
+- **`primitives: nurix`** — `import { Table, defineColumn } from "@nurix/components/table";` (escape hatches: cell renderers like `StatusPill` are exported from the same subpath; the bare primitive layer is `@nurix/components/ui-table`).
+- **`primitives: native`** — this recipe is the build spec: a semantic `<table>` (never a div grid) with a sticky header, tabular numerals, externally controlled sort (max 3 columns) and 1-indexed pagination with ellipsis collapse, an opt-in checkbox selection column with a tri-state header, read-only-by-default cells with the commit/revert keyboard semantics above, and every status/spark color resolved from the token artifact.

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

@@ -0,0 +1,60 @@
+---
+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"
+license: open
+---
+
+# Chrome recipe — side panel
+
+The slide-in detail/edit panel: a modal surface anchored to a screen edge with a fixed header → scrollable body → pinned footer skeleton. Built on dialog semantics (focus trap, Escape, overlay), so it inherits correct modality for free.
+
+## Anatomy
+
+| 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`. |
+
+## 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 |
+| 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. | — |
+| 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` |
+| success | A committed save closes the panel and confirmation lands as a toast in the parent context; a multi-step flow may show transient inline success on the footer action before advancing. | `success` status role |
+
+## Keyboard behavior
+
+- Activating the trigger opens the panel; focus moves inside (first focusable element, else the close button).
+- **Tab / Shift+Tab** cycle within the panel only — a full focus trap; background content is inert (`aria-modal="true"`, `role="dialog"`, labeled by the title).
+- **Escape** closes and returns focus to the element that opened it. Overlay click does the same. If the body holds unsaved edits, close asks before discarding — Escape never silently destroys input.
+- **Enter** in a single-field form commits; the footer's primary action is the default submit.
+- **cmdk path**: a command-palette action that opens a record panel behaves exactly like a pointer trigger — the panel takes focus on open and restores it to the palette's invoking context on close.
+
+## Token reach
+
+- `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.
+- 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.
+
+- **`primitives: nurix`** — `import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";`
+- **`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

@@ -0,0 +1,78 @@
+---
+id: sidebar
+class: d2
+sourced: 2026-07-12
+source: "@nurix/components Sidebar + opinionated layer (Brand, Switcher, ItemGroup, UserMenu, Callout, FileTree, SidebarCommandTrigger) — ~/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.
+
+## Anatomy
+
+**Shell** (state + regions):
+
+| 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. |
+
+**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? }`).
+
+## The eight states
+
+| State | Spec | Token roles |
+| --- | --- | --- |
+| 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` |
+| 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` |
+| 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.
+- **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`.
+- **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.
+
+## Token reach
+
+The sidebar consumes the eight dedicated sidebar roles — the active package's emission must cover all eight in both themes:
+
+- `sidebar` — the rail/panel surface (distinct from content `background`).
+- `sidebar-foreground` — item and label text.
+- `sidebar-primary` / `sidebar-primary-foreground` — the brand logo tile and any primary emphasis.
+- `sidebar-accent` / `sidebar-accent-foreground` — hover, active, and open-menu fills.
+- `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.
+
+## 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.
+
+- **`primitives: nurix`** — `import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Brand, Switcher, ItemGroup, UserMenu, Callout, SidebarCommandTrigger } from "@nurix/components/sidebar";`
+- **`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.