@nurix/etna 0.19.11 → 0.19.12

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.

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

@@ -0,0 +1,62 @@
+---
+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"
+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**.
+
+## 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. |
+
+Every part emits `data-slot="statistics-…"` for styling and testing hooks.
+
+## 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` |
+| 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 |
+
+## Keyboard behavior
+
+- A stat card is mostly static content; its interactive elements — header actions, the footer link, a clickable card — join the tab order in reading order (header action → door), **Enter** activates.
+- The hover bridge is a pointer-only *enhancement*: the resting value is always the correct headline without any pointer, so keyboard and touch users lose nothing; point inspection falls to the embedded chart's own keyboard/tooltip behavior.
+- An actions menu follows menu semantics: Enter/Space opens, arrows move, Escape closes to the trigger.
+- Animated values render as real formatted text (static until the animation element registers), so the accessible name is always the current number — no aria gymnastics required.
+- **cmdk path**: none — tiles are destinations for the palette ("Go to revenue"), not hosts of it.
+
+## 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.
+
+## 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.
+
+- **`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: 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

@@ -0,0 +1,65 @@
+---
+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"
+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.
+
+## 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`. |
+| 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. |
+| 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. |
+| Identity | `Avatar` (optional) | Only when the shell has no sidebar user footer — one identity home per shell, never two. |
+
+## The eight states
+
+State is mostly per-control; the bar itself is stable chrome.
+
+| State | Spec | Token roles |
+| --- | --- | --- |
+| 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` |
+| 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) |
+| 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) |
+
+## Keyboard behavior
+
+- **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.
+- **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.
+
+## Token reach
+
+- `background` — the bar surface (with optional alpha for the glass treatment). The bar sits on the content canvas: it never consumes the `sidebar-*` roles.
+- `border` — the bottom hairline and the vertical separator.
+- `foreground` / `muted-foreground` — current crumb vs ancestors; icon default strength.
+- `accent` / `accent-foreground` — icon-button hover/pressed fills.
+- `ring` — focus rings.
+- `popover` / `popover-foreground` — overflow and ellipsis dropdowns.
+- `primary` — at most one primary CTA, only when the screen genuinely has a single dominant action.
+- Status roles (`warning`, `destructive`, `success`) — only for the attached environment banner and transient confirmations; never as bar decoration.
+
+## 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.
+
+- **`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: native`** — this recipe is the build spec: a sticky 48–56px flex row with the slot order above, a real `<nav aria-label="Breadcrumb">` trail with `aria-current="page"` on the last segment, a search affordance wired to the stack's palette (or a plain search route) showing its shortcut, and the state/keyboard/token contracts implemented with the incumbent stack's own primitives.

package/data/harnesses/code/skills/design/data/color/accent-presets.md

@@ -0,0 +1,90 @@
+---
+id: accent-presets
+class: a2
+sourced: 2026-07-12
+source: "v1 design-skill asset, imported outright (v1 data/combinations/accent-presets.md); per-step contrast grades recomputed at admission, not carried from the source"
+license: open
+feel: "twelve pre-vetted accent voltages — from emerald operator-default to zinc/stone mono restraint — each graded step by step against light and dark"
+---
+Load when an accent is being chosen or overridden. One accent by default; a second
+only when the active identity genuinely calls for it — status hues (emerald / amber /
+rose / violet / zinc as semantics) don't count against that budget, they are semantic,
+not decorative. In dark themes the accent's 600 step keeps its OKLCH as the action
+fill (lightening it washes it out); accent-tinted surfaces pair a dark neutral surface
+with the 300 step as text. `amber` and `orange` never carry body text on dark
+backgrounds below the 700 step — the grades below say exactly where each step stops
+being text-safe.
+
+Neutral-temperature fit (from v1, unchanged): cool-slate neutrals clash with amber and
+orange (fits: indigo, blue, sky, violet, teal); true gray takes anything (best:
+emerald, indigo, violet, sky, pink); warm neutrals clash with sky and blue (fits:
+emerald, teal, amber, orange, stone, rose). By use case: emerald is the operator
+default; indigo/sky for CRM and support; teal/blue for clinical calm; amber/orange
+for logistics and field energy; violet/blue for engineering; zinc/stone for the
+no-accent mono registers.
+
+```yaml values
+reference-surfaces: { light: "oklch(0.97 0 0)", dark: "oklch(0.141 0 0)" }   # v1 neutral-50 / neutral-950
+grades: { aaa: ">= 7:1 body text", aa: ">= 4.5:1 body/large text", a: ">= 3:1 UI elements only", x: "< 3:1 — decorative only" }
+steps: [50, 100, 300, 500, 600, 700, 900]
+emerald:
+  use: "status-rich CRM; active emphasis (v1 default accent)"
+  scale: [oklch(0.97 0.02 165), oklch(0.93 0.06 165), oklch(0.80 0.13 165), oklch(0.69 0.18 165), oklch(0.60 0.18 165), oklch(0.50 0.18 165), oklch(0.30 0.18 165)]
+  on-light: [x, x, x, x, a, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aaa, aa, a, x]
+indigo:
+  use: "generic SaaS; trust-building"
+  scale: [oklch(0.97 0.02 270), oklch(0.93 0.06 270), oklch(0.78 0.13 270), oklch(0.55 0.20 270), oklch(0.47 0.20 270), oklch(0.39 0.20 270), oklch(0.25 0.18 270)]
+  on-light: [x, x, x, aa, aa, aaa, aaa]
+  on-dark: [aaa, aaa, aaa, a, x, x, x]
+violet:
+  use: "power tools; technical UIs"
+  scale: [oklch(0.97 0.02 295), oklch(0.93 0.06 295), oklch(0.78 0.13 295), oklch(0.55 0.22 295), oklch(0.48 0.22 295), oklch(0.40 0.22 295), oklch(0.25 0.20 295)]
+  on-light: [x, x, x, aa, aa, aaa, aaa]
+  on-dark: [aaa, aaa, aaa, a, x, x, x]
+rose:
+  use: "critical workflows; alert-prone domains"
+  scale: [oklch(0.97 0.02 15), oklch(0.93 0.06 15), oklch(0.78 0.13 15), oklch(0.62 0.22 15), oklch(0.55 0.22 15), oklch(0.45 0.22 15), oklch(0.30 0.20 15)]
+  on-light: [x, x, x, a, aa, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aa, a, x, x]
+amber:
+  use: "warehouses; logistics; energy"
+  scale: [oklch(0.97 0.04 100), oklch(0.94 0.09 95), oklch(0.84 0.14 90), oklch(0.78 0.16 80), oklch(0.70 0.17 75), oklch(0.60 0.17 70), oklch(0.40 0.16 65)]
+  on-light: [x, x, x, x, x, a, aaa]
+  on-dark: [aaa, aaa, aaa, aaa, aaa, aa, x]
+teal:
+  use: "healthcare; calm clinical UIs"
+  scale: [oklch(0.97 0.02 195), oklch(0.93 0.06 195), oklch(0.78 0.12 195), oklch(0.60 0.13 195), oklch(0.52 0.13 195), oklch(0.43 0.13 195), oklch(0.28 0.12 195)]
+  on-light: [x, x, x, a, a, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aa, a, x, x]
+sky:
+  use: "customer support; conversational"
+  scale: [oklch(0.97 0.02 225), oklch(0.93 0.06 225), oklch(0.80 0.13 225), oklch(0.68 0.15 225), oklch(0.58 0.16 225), oklch(0.48 0.17 225), oklch(0.30 0.16 225)]
+  on-light: [x, x, x, x, a, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aaa, aa, a, x]
+blue:
+  use: "traditional enterprise"
+  scale: [oklch(0.97 0.02 245), oklch(0.93 0.06 245), oklch(0.78 0.13 245), oklch(0.55 0.20 245), oklch(0.47 0.20 245), oklch(0.39 0.20 245), oklch(0.25 0.18 245)]
+  on-light: [x, x, x, a, aa, aaa, aaa]
+  on-dark: [aaa, aaa, aaa, a, a, x, x]
+pink:
+  use: "brand-driven; younger ops teams"
+  scale: [oklch(0.97 0.02 0), oklch(0.93 0.06 0), oklch(0.80 0.15 0), oklch(0.67 0.22 0), oklch(0.58 0.22 0), oklch(0.48 0.22 0), oklch(0.30 0.20 0)]
+  on-light: [x, x, x, a, a, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aa, a, x, x]
+orange:
+  use: "high-energy; field service"
+  scale: [oklch(0.97 0.04 50), oklch(0.93 0.09 50), oklch(0.82 0.15 50), oklch(0.70 0.19 50), oklch(0.62 0.19 50), oklch(0.52 0.19 50), oklch(0.32 0.17 50)]
+  on-light: [x, x, x, x, a, aa, aaa]
+  on-dark: [aaa, aaa, aaa, aa, aa, a, x]
+zinc:
+  use: "plain / cron registers; deliberately no accent (mono)"
+  scale: [oklch(0.97 0 0), oklch(0.93 0 0), oklch(0.80 0 0), oklch(0.55 0 0), oklch(0.44 0 0), oklch(0.37 0 0), oklch(0.20 0 0)]
+  on-light: [x, x, x, a, aaa, aaa, aaa]
+  on-dark: [aaa, aaa, aaa, a, x, x, x]
+stone:
+  use: "plain register with warm neutrals (warm mono)"
+  scale: [oklch(0.97 0.005 80), oklch(0.93 0.006 80), oklch(0.80 0.008 80), oklch(0.55 0.012 80), oklch(0.44 0.013 80), oklch(0.37 0.014 80), oklch(0.20 0.016 80)]
+  on-light: [x, x, x, a, aaa, aaa, aaa]
+  on-dark: [aaa, aaa, aaa, a, x, x, x]
+```

package/data/harnesses/code/skills/design/data/color/aesop-earth-mute.md

@@ -0,0 +1,91 @@
+---
+id: aesop-earth-mute
+class: a2
+sourced: 2026-07-12
+source: "Distilled from Aesop's brand identity (brandcolorcode.com/aesop; cross-checked color.adobe.com/Aesop-brand-earth-mute) — muted earthy monochrome"
+license: open
+feel: "understated earthy olive-beige monochrome — intellectual, unbranded luxury that whispers instead of shouts"
+---
+The most restrained chroma in the set (accent tops out at 0.06–0.07). Background hue
+is pinned just past 100° specifically to escape flat AI-tan territory — the anti-cream
+band ends at hue 100 — while keeping the earthy, olive-leaning premium feel; the whole
+light theme sits lower in lightness than any other entry, like unbleached paper.
+Neutrals carry 0.015–0.028 chroma toward hue 95–110; the authored dark is a deep
+olive-umber ladder, hue held.
+
+```yaml values
+light:
+  background: oklch(0.88 0.025 110)
+  foreground: oklch(0.26 0.02 90)
+  card: oklch(0.902 0.02 108)
+  card-foreground: oklch(0.26 0.02 90)
+  popover: oklch(0.922 0.015 105)
+  popover-foreground: oklch(0.26 0.02 90)
+  primary: oklch(0.45 0.06 105)
+  primary-foreground: oklch(0.985 0.008 105)
+  secondary: oklch(0.838 0.026 102)
+  secondary-foreground: oklch(0.3 0.028 92)
+  muted: oklch(0.848 0.024 105)
+  muted-foreground: oklch(0.38 0.025 95)
+  accent: oklch(0.856 0.035 105)
+  accent-foreground: oklch(0.28 0.045 100)
+  destructive: oklch(0.5 0.15 30)
+  destructive-foreground: oklch(0.985 0.008 30)
+  success: oklch(0.55 0.09 140)
+  warning: oklch(0.72 0.1 80)
+  border: oklch(0.775 0.028 102)
+  input: oklch(0.775 0.028 102)
+  ring: oklch(0.45 0.06 105)
+  surface-raised: oklch(0.888 0.023 108)
+  surface-overlay: oklch(0.922 0.015 105)
+  chart-1: oklch(0.5 0.07 105)
+  chart-2: oklch(0.58 0.08 60)
+  chart-3: oklch(0.55 0.07 140)
+  chart-4: oklch(0.52 0.09 35)
+  chart-5: oklch(0.5 0.05 260)
+  sidebar: oklch(0.864 0.023 106)
+  sidebar-foreground: oklch(0.28 0.022 92)
+  sidebar-primary: oklch(0.45 0.06 105)
+  sidebar-primary-foreground: oklch(0.985 0.008 105)
+  sidebar-accent: oklch(0.842 0.03 104)
+  sidebar-accent-foreground: oklch(0.27 0.042 100)
+  sidebar-border: oklch(0.762 0.026 102)
+  sidebar-ring: oklch(0.45 0.06 105)
+dark:
+  background: oklch(0.22 0.02 95)
+  foreground: oklch(0.9 0.015 90)
+  card: oklch(0.25 0.02 104)
+  card-foreground: oklch(0.9 0.015 90)
+  popover: oklch(0.32 0.022 104)
+  popover-foreground: oklch(0.9 0.015 90)
+  primary: oklch(0.65 0.07 100)
+  primary-foreground: oklch(0.18 0.03 105)
+  secondary: oklch(0.3 0.022 104)
+  secondary-foreground: oklch(0.88 0.012 104)
+  muted: oklch(0.29 0.022 104)
+  muted-foreground: oklch(0.7 0.015 104)
+  accent: oklch(0.34 0.045 105)
+  accent-foreground: oklch(0.87 0.06 105)
+  destructive: oklch(0.57 0.135 30)
+  destructive-foreground: oklch(0.985 0.008 30)
+  success: oklch(0.61 0.08 140)
+  warning: oklch(0.74 0.09 80)
+  border: oklch(0.325 0.022 104)
+  input: oklch(0.325 0.022 104)
+  ring: oklch(0.65 0.07 100)
+  surface-raised: oklch(0.27 0.02 104)
+  surface-overlay: oklch(0.32 0.022 104)
+  chart-1: oklch(0.6 0.063 105)
+  chart-2: oklch(0.68 0.072 60)
+  chart-3: oklch(0.65 0.063 140)
+  chart-4: oklch(0.62 0.081 35)
+  chart-5: oklch(0.6 0.045 260)
+  sidebar: oklch(0.195 0.02 104)
+  sidebar-foreground: oklch(0.88 0.012 104)
+  sidebar-primary: oklch(0.65 0.07 100)
+  sidebar-primary-foreground: oklch(0.18 0.03 105)
+  sidebar-accent: oklch(0.265 0.03 105)
+  sidebar-accent-foreground: oklch(0.9 0.02 105)
+  sidebar-border: oklch(0.28 0.022 104)
+  sidebar-ring: oklch(0.65 0.07 100)
+```

package/data/harnesses/code/skills/design/data/color/arc-peach-play.md

@@ -0,0 +1,90 @@
+---
+id: arc-peach-play
+class: a2
+sourced: 2026-07-12
+source: "Distilled from Arc browser's theme palette (arc.net/colors.html, cross-referenced via devslovecoffee.com) — warm cream/peach with coral foreground"
+license: open
+feel: "playful peachy cream with a coral-orange accent — a browser that wants design itself to feel human"
+---
+Warmer and more saturated than the Notion/Claude entries, pinned just below the
+anti-cream hue floor (background hue 32, under the 40° band edge) so the peach stays
+legibly a color, not a neutral. Fits playful, personality-forward consumer tools.
+Neutrals carry 0.02–0.042 chroma toward hue 28–35; the authored dark is a warm
+plum-brown ladder, never black.
+
+```yaml values
+light:
+  background: oklch(0.93 0.035 32)
+  foreground: oklch(0.26 0.03 25)
+  card: oklch(0.952 0.028 32)
+  card-foreground: oklch(0.26 0.03 25)
+  popover: oklch(0.966 0.02 32)
+  popover-foreground: oklch(0.26 0.03 25)
+  primary: oklch(0.65 0.19 35)
+  primary-foreground: oklch(0.18 0.03 35)
+  secondary: oklch(0.892 0.04 32)
+  secondary-foreground: oklch(0.3 0.04 28)
+  muted: oklch(0.902 0.037 32)
+  muted-foreground: oklch(0.42 0.035 28)
+  accent: oklch(0.912 0.055 35)
+  accent-foreground: oklch(0.32 0.105 35)
+  destructive: oklch(0.55 0.22 20)
+  destructive-foreground: oklch(0.985 0.008 20)
+  success: oklch(0.62 0.14 145)
+  warning: oklch(0.8 0.15 85)
+  border: oklch(0.838 0.042 32)
+  input: oklch(0.838 0.042 32)
+  ring: oklch(0.65 0.19 35)
+  surface-raised: oklch(0.94 0.032 32)
+  surface-overlay: oklch(0.966 0.02 32)
+  chart-1: oklch(0.65 0.19 35)
+  chart-2: oklch(0.58 0.15 300)
+  chart-3: oklch(0.65 0.12 200)
+  chart-4: oklch(0.62 0.14 145)
+  chart-5: oklch(0.78 0.13 85)
+  sidebar: oklch(0.916 0.038 32)
+  sidebar-foreground: oklch(0.3 0.03 28)
+  sidebar-primary: oklch(0.65 0.19 35)
+  sidebar-primary-foreground: oklch(0.18 0.03 35)
+  sidebar-accent: oklch(0.895 0.05 35)
+  sidebar-accent-foreground: oklch(0.3 0.09 35)
+  sidebar-border: oklch(0.828 0.04 32)
+  sidebar-ring: oklch(0.65 0.19 35)
+dark:
+  background: oklch(0.21 0.025 30)
+  foreground: oklch(0.95 0.015 35)
+  card: oklch(0.24 0.025 32)
+  card-foreground: oklch(0.95 0.015 35)
+  popover: oklch(0.31 0.028 32)
+  popover-foreground: oklch(0.95 0.015 35)
+  primary: oklch(0.7 0.17 35)
+  primary-foreground: oklch(0.18 0.03 35)
+  secondary: oklch(0.29 0.029 32)
+  secondary-foreground: oklch(0.88 0.014 32)
+  muted: oklch(0.28 0.029 32)
+  muted-foreground: oklch(0.7 0.015 32)
+  accent: oklch(0.33 0.045 35)
+  accent-foreground: oklch(0.87 0.06 35)
+  destructive: oklch(0.62 0.205 20)
+  destructive-foreground: oklch(0.18 0.03 20)
+  success: oklch(0.68 0.13 145)
+  warning: oklch(0.82 0.14 85)
+  border: oklch(0.315 0.03 32)
+  input: oklch(0.315 0.03 32)
+  ring: oklch(0.7 0.17 35)
+  surface-raised: oklch(0.26 0.025 32)
+  surface-overlay: oklch(0.31 0.028 32)
+  chart-1: oklch(0.75 0.171 35)
+  chart-2: oklch(0.68 0.135 300)
+  chart-3: oklch(0.75 0.108 200)
+  chart-4: oklch(0.72 0.126 145)
+  chart-5: oklch(0.85 0.117 85)
+  sidebar: oklch(0.185 0.025 32)
+  sidebar-foreground: oklch(0.88 0.014 32)
+  sidebar-primary: oklch(0.7 0.17 35)
+  sidebar-primary-foreground: oklch(0.18 0.03 35)
+  sidebar-accent: oklch(0.255 0.03 35)
+  sidebar-accent-foreground: oklch(0.9 0.02 35)
+  sidebar-border: oklch(0.27 0.029 32)
+  sidebar-ring: oklch(0.7 0.17 35)
+```