@nurix/etna 0.19.11 → 0.19.12

package/data/harnesses/code/skills/design/components/index.md

@@ -0,0 +1,143 @@
+# Component catalog — the fused index
+
+> **Generated folder — never hand-edit.** Everything under `skills/design/components/` is emitted by the components-repo regen instruction set (`docs/architecture/skills/case-studies/components-regen-spec.md`, run against the `@nurix/components` library checkout). Regeneration may reshape any file beneath this one; the design skill's only seam with this folder is this index.
+
+**Load contract.** This index loads in **both** positions of the project's `primitives` switch (`design.md`, `primitives: nurix | native`) — it is how the skill knows what chrome *exists* to compose with. The per-category deep references beside it ([inputs](inputs.md), [overlays](overlays.md), [collections](collections.md), [navigation](navigation.md), [layout](layout.md), [feedback](feedback.md), [charts](charts.md), [typography](typography.md), [media](media.md), [motion](motion.md), [hooks](hooks.md), [utils](utils.md), plus [setup](setup.md) for install/Tailwind wiring) load **only under `primitives: nurix`**, and only when that category is touched.
+
+**The ratchet.** Deep references bind only when `@nurix/components` is actually importable in the target project: the intake probe defaults the switch, the recorded `primitives:` line is the authority. Under `nurix`, a row binds to its **nurix** column and the category reference supplies the API. Under `native`, the per-category references never load; a row binds to its **shadcn** column (when the project uses shadcn/ui) or to the **fallback** column — a semantic-HTML/behavior spec the model implements with the incumbent stack.
+
+Columns: `concept` (the composable idea) · `category` (which deep reference covers it) · `nurix` (symbols + `@nurix/components/<subpath>`; empty = the library has no primitive for this concept) · `shadcn` (shadcn/ui equivalent; `—` = none) · `fallback` (plain spec, always present).
+
+```csv
+concept,category,nurix,shadcn,fallback
+button,inputs,Button (button),Button,"native <button>, variants via class, focus-visible ring"
+text-input,inputs,"Input (input) — onSave commit, regex validator",Input,"<input type=text>, commit on blur/Enter"
+number-input,inputs,"NumberInput (number-input) — min/max/step",—,"<input inputmode=numeric>, clamp on commit, Escape reverts"
+textarea,inputs,"Textarea (textarea) — Cmd/Ctrl+Enter commits",Textarea,"<textarea>, blur commits, Escape resets draft"
+checkbox,inputs,Checkbox (checkbox),Checkbox,"<input type=checkbox> + label, indeterminate via JS"
+switch,inputs,Switch (switch),Switch,"role=switch button, aria-checked, Space toggles"
+radio-group,inputs,"RadioGroup + card/segmented variants (radio-group)",RadioGroup,"fieldset of <input type=radio>, arrow-key roving focus"
+select,inputs,"Select — searchable, multi, async (select)","Select; Combobox (Popover + Command)","<select> or listbox popover, typeahead, option objects not raw values"
+native-select,inputs,"Select* Radix family (native-select)",Select,"plain <select> behind a styled trigger"
+date-picker,inputs,DatePicker (date-picker),Date Picker (Calendar + Popover),"<input type=date> or calendar popover, ISO value"
+date-range-picker,inputs,"DateRangePicker — presets sidebar (date-range-picker)",—,"two bound date inputs, partial selection reverts on close"
+calendar,inputs,"Calendar (calendar) — react-day-picker",Calendar,"month grid <table>, arrow-key day navigation"
+slider,inputs,Slider (slider),Slider,"<input type=range> with visible value readout"
+rating,inputs,Rating (rating),—,"radio group of icon buttons, half-step optional"
+toggle,inputs,"Toggle · ToggleGroup (toggle, toggle-group)","Toggle, Toggle Group","aria-pressed buttons, single or multiple selection"
+otp-input,inputs,InputOTP (input-otp),Input OTP,"segmented one-char inputs, paste distributes across slots"
+icon-picker,inputs,"IconPicker · Icon (icon-picker)",—,"searchable icon grid in a popover, categorized"
+file-upload,inputs,MediaFilePicker (media-file-picker),—,"<input type=file> + drop zone, previews, size and count caps"
+form-field,inputs,"Cell — label/content/helper/error slots (cell)",Form + FormField (react-hook-form),"label + control + helper in one block, error slot below control"
+form-validation,inputs,,Form (react-hook-form),"form element with submit-time validation and inline field errors"
+rich-text-editor,inputs,,—,"@tiptap/react editor with toolbar and markdown shortcuts"
+code-editor,inputs,,—,"@monaco-editor/react, mono, optional read-only diff mode"
+modal-dialog,overlays,Dialog (dialog),Dialog,"<dialog> or fixed layer, focus trap, ESC closes, header→body→footer"
+confirm-dialog,overlays,"Dialog variant=danger — non-dismissible (dialog)",Alert Dialog,"modal with explicit confirm/cancel, no outside-click dismiss"
+side-panel,overlays,Sheet (sheet),Sheet,"fixed aside, focus-trapped, ESC closes, interruptible slide"
+bottom-drawer,overlays,Sheet side=bottom (sheet),Drawer (vaul),"fixed bottom panel spanning full width"
+command-palette,overlays,Command (command),Command (cmdk),"filtered list in a dialog, ⌘K opens, arrow-key + Enter"
+dropdown-menu,overlays,DropdownMenu (dropdown-menu),Dropdown Menu,"role=menu under a trigger, arrow-key nav, outside click closes"
+context-menu,overlays,ContextMenu (context-menu),Context Menu,"right-click menu at pointer position"
+popover,overlays,Popover (popover),Popover,"anchored floating panel, dismiss on outside/ESC"
+hover-card,overlays,HoverCard (hover-card),Hover Card,"preview panel on hover intent, delayed open/close"
+tooltip,overlays,Tooltip (tooltip),Tooltip,"short hint on hover/focus, never load-bearing content"
+data-table,collections,"Table + defineColumn (table)","<Table> + TanStack Table","semantic <table>, sticky header, tabular-nums, real pagination, status chips"
+table-primitives,collections,UiTable* family (ui-table),Table,"bare styled <table>/<thead>/<tbody> parts"
+list,collections,"List + ListToolbar + ListPagination (list)",—,"<ul> of rows with toolbar and pager"
+record-header,collections,"Header — config-driven (header)",—,"page-top block: breadcrumbs, title, status bar, actions"
+page-header-stats,collections,"PageHeader — Stat/Crumb/BackLink (page-header)",—,"title row + KPI strip + back link"
+gantt-timeline,collections,GanttChart (activity-timeline),—,"time-scaled task rows, date axis, horizontal scroll"
+changes-feed,collections,ChangesList (changes-list),—,"grouped change-history feed, entity + operation labels"
+message-thread,collections,"Message family + MessageScroller (message, message-scroller)",—,"scrolling feed pinned to bottom, jump-to-new button"
+chat-bubble,collections,BubbleGroup + Bubble (bubble),—,"aligned bubble rows with reactions row"
+attachment,collections,Attachment family (attachment),—,"file card: media, title, actions, error state, dashed idle border"
+thread-marker,collections,"Marker — separator/border variants (marker)",—,"inline separator row with icon and label"
+json-viewer,collections,,—,"react18-json-view collapsible tree, mono"
+virtualized-list,collections,,—,"react-window fixed-row virtualization for 1k+ rows"
+kanban-board,collections,,—,"flex columns of cards, @dnd-kit drag between columns, per-column count"
+event-calendar,collections,,—,"month/week grid of events, today marker, overflow +N"
+description-list,collections,,—,"<dl> two-column key/value grid, tabular values"
+filter-toolbar,collections,,—,"row of faceted filter chips + clear-all + result count"
+vertical-timeline,collections,,—,"ordered event list with time rail and node markers"
+sidebar,navigation,"Sidebar family + Brand/Switcher/ItemGroup/UserMenu/Callout (sidebar)",Sidebar,"fixed <nav>: brand + icon sections + badges + user footer, collapsible to icons"
+file-tree,navigation,FileTree (sidebar),—,"nested tree with disclosure carets, keyboard nav"
+breadcrumb,navigation,Breadcrumb (breadcrumb),Breadcrumb,"<nav aria-label=breadcrumb>, current page unlinked"
+tabs,navigation,Tabs (tabs),Tabs,"role=tablist, arrow-key switching, one panel per tab"
+pagination,navigation,Pagination (pagination),Pagination,"page buttons + prev/next, aria-current on active page"
+navbar,navigation,Navbar (navbar),—,"horizontal top <nav> with links and actions"
+navigation-menu,navigation,NavigationMenu (navigation-menu),Navigation Menu,"top-level nav with flyout panels"
+menubar,navigation,Menubar (menubar),Menubar,"desktop-app menu strip with full keyboard model"
+slide-out-menu,navigation,SlideOutMenu (slide-out-menu),—,"off-canvas nav panel for narrow viewports"
+icon-rail,navigation,VerticalIconBar (vertical-icon-bar),—,"narrow vertical icon strip with tooltips"
+stepper,navigation,,—,"ordered steps with done/current/todo states, aria-current=step"
+alert,feedback,Alert (alert),Alert,"role=alert block, tone via border + icon"
+empty-state,feedback,EmptyState (empty-state),Empty,"icon + heading + motivation line + primary action"
+error-boundary,feedback,ErrorBoundary (error-boundary),—,"React boundary rendering a retry block"
+not-found,feedback,NotFound (not-found),—,"404 block with a way back"
+skeleton,feedback,Skeleton (skeleton),Skeleton,"pulsing placeholder matching the final layout"
+loader,feedback,Loader (loader),Spinner,"centered spinner with optional label"
+text-spinner,feedback,"Braille (braille) · spinner frames (inline-spinner)",—,"animated unicode frames inline with text"
+progress,feedback,Progress (progress),Progress,"role=progressbar with aria-valuenow"
+toast,feedback,Toaster (sonner),Sonner,"stacked corner notifications, auto-dismiss, action slot"
+typing-indicator,feedback,TypingIndicator (typing-indicator),—,"three-dot pulse row"
+sparkline,charts,"Spark — line|bar|pie (spark) · Sparkline (sparkline)",—,"inline no-axis SVG mark, token or self-contained color"
+inline-bar,charts,BarGraph (bar-graph),—,"compact bar SVG with skeleton, token colors"
+inline-line,charts,LineGraph (line-graph),—,"compact line SVG with skeleton"
+pie-donut,charts,"PieGraph — pie|half-pie|doughnut|half-doughnut (pie-graph)",—,"SVG arcs, max ~6 slices, center slot in doughnut"
+segmented-progress,charts,ProgressBar (progress-bar),—,"stacked horizontal segments with legend"
+area-chart,charts,"AreaChart + Area/RangeArea marks (charts)",Chart (recharts),"axes + gridlines + filled series + tooltip"
+bar-chart,charts,"BarChart + ParetoLine, BarSort, stack modes (charts)",Chart (recharts),"grouped/stacked bars, value labels opt-in"
+line-chart,charts,"LineChart + projection/reference overlays (charts)",Chart (recharts),"multi-series lines, reference lines, brush"
+scatter-chart,charts,ScatterChart + Scatter (charts),—,"x/y point field, hover ring, box select"
+composed-chart,charts,ComposedChart (charts),—,"mixed marks over one shared scale pair"
+histogram,charts,Histogram + computeHistogramBins (charts),—,"binned bars over a continuous axis"
+bullet-chart,charts,"Bullet (gauge; also charts)",—,"measure bar + target tick + zone bands"
+funnel,charts,"Funnel + FunnelTooltip/FunnelLegend (funnel)",—,"ordered stage bands, percent-of-previous labels"
+gauge,charts,"Gauge — arc or notch track, zones, target (gauge)",—,"value arc with threshold zones and center readout"
+contribution-heatmap,charts,Heatmap + chrome (heatmap),—,"calendar cell grid with level legend"
+matrix-heatmap,charts,MatrixHeatmap + legend/tooltip (heatmap),—,"x-by-y cell matrix on the tokenized ramp"
+radar,charts,Radar (radar),—,"spider axes with series polygons"
+ring,charts,Ring (ring),—,"segmented circular progress with center info"
+chart-chrome,charts,"ChartEmpty · ChartHoverCard · ChartLegend (chart-primitives)",—,"shared empty/tooltip/legend chrome for inline charts"
+card,layout,Card family (card),Card,"bordered section: header, content, footer"
+stat-card,layout,Statistics family (statistics),—,"number + comparison + trend + state + door, composable regions"
+accordion,layout,Accordion (accordion),Accordion,"stacked disclosure sections, single or multiple open"
+collapsible,layout,"Collapsible (collapsible) · CollapsiblePanel (collapsible-panel)",Collapsible,"button-controlled region with hidden state"
+split-panes,layout,ResizablePanelGroup (resizable),Resizable,"draggable divider panes, keyboard resize"
+scroll-area,layout,ScrollArea (scroll-area),Scroll Area,"styled overflow container, visible-on-hover scrollbar"
+separator,layout,"Separator (separator) · SeparatorWithText (separator-with-text)",Separator,"<hr>/role=separator, optional centered label"
+aspect-ratio,layout,AspectRatio (aspect-ratio),Aspect Ratio,"CSS aspect-ratio box"
+carousel,layout,Carousel (carousel),Carousel,"scroll-snap track with prev/next controls"
+bento-grid,layout,BentoGrid + BentoCard (bento-grid),—,"asymmetric feature grid with spanning cells"
+editable-card,layout,EditableCard (editable-card),—,"card with edit-in-place body and commit footer"
+drag-reorder,layout,Sortable family (sortable),—,"dnd-kit list reorder, keyboard sortable, drag overlay ghost"
+text,typography,Text (text),Typography,"semantic p/span with size and weight scale"
+badge,typography,Badge (badge),Badge,"small status pill, tokenized tone"
+chip,typography,"Chip (chip) · Option display (select)",—,"removable tag, optional color dot"
+code,typography,Code (code),—,"inline <code>, mono"
+kbd,typography,Kbd (kbd),Kbd,"<kbd> keycap"
+label,typography,Label (label),Label,"<label for> bound to a control"
+link,typography,Link (link),—,"<a> with underline discipline"
+secure-text,typography,SecureText (secure-text),—,"masked value with reveal toggle, mono"
+markdown,typography,Markdown (markdown),—,"react-markdown rendering with typographic defaults"
+avatar,media,Avatar (avatar),Avatar,"image with initials fallback, round"
+copy-button,media,CopyButton (copy-button),—,"clipboard write with copied-state swap"
+icon,media,"IconRenderer (icon-renderer) + icons-data (icons-data)",—,"lucide icon by name, consistent stroke and size grid"
+voice-waveform,media,"LiveWaveform (live-waveform) · MicIcon (mic-icon)",—,"animated level bars from mic input"
+brand-logo,media,"NurixLogo — color|monochrome (nurix-logo)",—,"inline SVG wordmark sized by height"
+shine-border,media,ShineBorder (shine-border),—,"animated gradient border wrapper, decorative"
+theme-toggle,media,ThemeToggler (theme-toggler),—,"light/dark switch writing data-theme"
+view-switcher,media,ViewSwitcher (view-switcher),—,"segmented control switching view-type projections"
+animated-number,motion,"AnimatedNumber (animated-number) · SlidingNumber (motion-primitives/sliding-number)",—,"tick-up numerals, renders plain text until JS ready"
+stagger-entrance,motion,AnimatedGroup (motion-primitives/animated-group),—,"staggered child arrival, identity moments only, never on 100×/day actions"
+text-effects,motion,"TextEffect · TextMorph · TextScramble · TextShimmer (motion-primitives/*)",—,"per-character text animation, low-frequency surfaces only"
+morphing-overlay,motion,"MorphingDialog · MorphingPopover (motion-primitives/*)",—,"trigger morphs into overlay, interruptible"
+panel-transitions,motion,"TransitionPanel · Disclosure · motion Accordion (motion-primitives/*) · animated Tabs (animate-ui)",—,"crossfade/slide between sibling panels, height-animated reveal, interruptible"
+decorative-effects,motion,"Spotlight · GlowEffect · AnimatedBackground · InfiniteSlider · Highlight (motion-primitives/*, animate-ui/*)",—,"pointer-tracked washes and loops, decorative only, never on data"
+dynamic-toolbar,motion,ToolbarDynamic (motion-primitives/toolbar-dynamic),—,"toolbar expanding to contextual actions"
+utility-hooks,hooks,"useClickOutside · useFileUpload · useMediaQuery · useIsMobile (hooks/*)",—,"outside-click, file-upload state, matchMedia boolean, <768px boolean"
+class-merge,utils,cn (utils),cn,"clsx + tailwind-merge"
+formatting-utils,utils,"formatDate (format) · generateId (id) · getErrorMessage (handle-error)",—,"Intl date formatting, nanoid ids, error-to-message normalization"
+composition-utils,utils,"getStrictContext (get-strict-context) · composeRefs (compose-refs)",—,"throwing Provider/hook pair, ref composition"
+```

package/data/harnesses/code/skills/design/components/inputs.md

@@ -0,0 +1,327 @@
+# Input Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+## Shared Props
+
+Enhanced form components support these props where applicable:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `any` | Controlled value |
+| `onChange` | `(value) => void` | Change handler (text inputs receive the event) |
+| `onSave` | `(value) => void` | Commit on blur/Enter/selection |
+| `disabled` | `boolean` | Prevents interaction |
+| `readOnly` | `boolean` | Display-only mode |
+| `inline` | `boolean` | Click-to-edit mode |
+
+## Cell
+
+Compound component for form field layout with label, content, and helpers.
+
+**Props:** `mode` [default|inline], `size` [sm|md|lg], `editable`, `labelPosition` [top|left], `disabled`
+
+**Sub-components:** `Cell.Label`, `Cell.Content`, `Cell.Prefix`, `Cell.Suffix`, `Cell.Stepper`, `Cell.Helper`, `Cell.Error`
+
+```tsx
+<Cell mode="default" labelPosition="top">
+  <Cell.Label>Email</Cell.Label>
+  <Cell.Content>
+    <Input value={email} onChange={(e) => setEmail(e.target.value)} />
+  </Cell.Content>
+  <Cell.Helper>We'll never share your email</Cell.Helper>
+</Cell>
+```
+
+## Input
+
+Text input with optional regex validation; commits on blur via `onSave`.
+
+**Props:** `onSave`, `validator`, `onValidationError`, `hideBorder`
+
+```tsx
+<Input
+  value={name}
+  onChange={(e) => setName(e.target.value)}
+  onSave={saveName}
+  placeholder="Enter name"
+/>
+```
+
+## NumberInput
+
+Numeric input with constraints; commits on blur/Enter, Escape reverts.
+
+**Props:** `min`, `max`, `step`, `allowDecimals`, `allowNegative`, `onSave`, `onValidationError`, `hideBorder`
+
+```tsx
+<NumberInput value={count} onSave={setCount} min={0} max={100} step={1} />
+```
+
+## Textarea
+
+Multi-line text input. Controlled when `value` is set; otherwise `defaultValue` seeds an internal draft and Escape resets it. Blur and Cmd/Ctrl+Enter commit via `onSave`.
+
+**Props:** `onSave`, `hideBorder`
+
+```tsx
+<Textarea
+  value={description}
+  onChange={(e) => setDescription(e.target.value)}
+  onSave={saveDescription}
+/>
+```
+
+## Checkbox
+
+Boolean toggle supporting both `value`/`onChange` and `checked`/`onCheckedChange` APIs.
+
+**Props:** `checked`, `onCheckedChange`, `value`, `onChange`, `indeterminate`
+
+```tsx
+<Checkbox checked={agreed} onCheckedChange={setAgreed} />
+```
+
+## Switch
+
+Toggle switch supporting both `value`/`onChange` and `checked`/`onCheckedChange` APIs.
+
+**Props:** `checked`, `onCheckedChange`, `value`, `onChange`, `size` [sm|default]
+
+```tsx
+<Switch checked={enabled} onCheckedChange={setEnabled} />
+```
+
+## Select
+
+Compound select with search, multi-select, and async loading. `onChange`/`onSave` receive the selected option object(s), not raw values.
+
+**Props:** `options`, `mode` [single|multi], `clearable`, `maxSelections`, `selectionIndicator` [checkbox|check-end|bg-only], `compact`, `loading`, `onSearch`, `onLoadMore`, `debounceMs`
+
+**Sub-components:** `Select.Trigger` (`display` [tags|comma|count]), `Select.Content` (`searchable`, `searchPlaceholder`, `showSelectAll`, `maxHeight`), `Select.Item`, `Select.Search`, `Select.Loading`, `Select.Empty`, `Select.SelectAll`
+
+```tsx
+<Select
+  options={statusOptions}
+  value={status}
+  onChange={(opt) => setStatus(opt?.value)}
+>
+  <Select.Trigger display="tags" />
+  <Select.Content searchable>
+    <Select.Item value="active">Active</Select.Item>
+  </Select.Content>
+</Select>
+```
+
+## Option
+
+Standalone option display chip (exported from the `select` subpath).
+
+**Props:** `variant` [text|pill|outline|ghost|soft], `color`, `prefix` ["dot"|ReactNode]
+
+```tsx
+<Option variant="pill" color="#ef4444" prefix="dot">
+  High Priority
+</Option>
+```
+
+## DatePicker
+
+Date selection with calendar popover; accepts `Date`, ISO string, or null values.
+
+**Props:** `onSave`, `inline`, `relativeFormat`, `formatPattern`, `showIcon`, `captionLayout` [label|dropdown|dropdown-months|dropdown-years], `buttonVariant`, `showOutsideDays`, `numberOfMonths`, `fromYear`, `toYear`, `fromDate`, `toDate`, `weekStartsOn`, `compact`
+
+```tsx
+<DatePicker
+  value={date}
+  onChange={setDate}
+  onSave={handleSave}
+  relativeFormat
+  placeholder="Pick a date"
+/>
+```
+
+## Slider
+
+Range input with optional value display.
+
+**Props:** `min`, `max`, `step`, `defaultValue`, `onSave`, `inline`, `showValue`, `showMinMax`, `formatValue`, `compact`
+
+```tsx
+<Slider
+  value={volume}
+  onChange={setVolume}
+  onSave={handleSave}
+  min={0}
+  max={100}
+/>
+```
+
+## Rating
+
+Icon-based rating input.
+
+**Props:** `maxRating`, `size`, `icon` [Star|Heart|ThumbsUp|Circle|Flame|Zap|Trophy|Diamond], `allowHalf`, `showValue`, `onSave`, `inline`, `compact`
+
+```tsx
+<Rating
+  value={rating}
+  onChange={setRating}
+  onSave={handleSave}
+  maxRating={5}
+  allowHalf
+/>
+```
+
+## Button
+
+Standard action button.
+
+**Props:** `variant` [default|destructive|outline|secondary|ghost|link], `size` [default|sm|lg|icon], `asChild`
+
+```tsx
+<Button variant="outline" size="sm">
+  Cancel
+</Button>
+```
+
+## Calendar
+
+Calendar grid built on `react-day-picker`; accepts all `DayPicker` props. Also exports `CalendarDayButton`.
+
+**Props:** `mode` [single|multiple|range], `selected`, `onSelect`, `captionLayout` [label|dropdown|dropdown-months|dropdown-years], `numberOfMonths`, `showOutsideDays`, `buttonVariant`
+
+```tsx
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  captionLayout="dropdown"
+/>
+```
+
+## DateRangePicker
+
+Date range selection with calendar popover and optional presets sidebar; `onSave` fires only when both ends are selected, and closing with a partial selection reverts.
+
+**Props:** `onSave`, `inline`, `showPresets`, `presets`, `relativeFormat`, `formatPattern`, `showIcon`, `captionLayout`, `numberOfMonths`, `fromDate`, `toDate`, `weekStartsOn`, `compact`
+
+```tsx
+<DateRangePicker
+  value={range}
+  onChange={setRange}
+  onSave={handleSave}
+  showPresets
+/>
+```
+
+## IconPicker
+
+Searchable Lucide icon picker popover; also exports `Icon` for rendering a picked icon by name.
+
+**Props:** `value`, `defaultValue`, `onValueChange`, `open`, `onOpenChange`, `searchable`, `searchPlaceholder`, `triggerPlaceholder`, `iconsList`, `categorized`, `modal`
+
+```tsx
+<IconPicker value={iconName} onValueChange={setIconName} />
+```
+
+## InputOTP
+
+One-time code input built on `input-otp`.
+
+**Props:** `maxLength`, `value`, `onChange`, `containerClassName`
+
+**Sub-components:** `InputOTPGroup`, `InputOTPSlot` (`index` required), `InputOTPSeparator`
+
+```tsx
+<InputOTP maxLength={4} value={code} onChange={setCode}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## MediaFilePicker
+
+File upload with drag-and-drop dialog and previews. `value` is `MediaFileOption` object(s): `{ value, label, type, previewUrl, size, file }`.
+
+**Props:** `mode` [single|multi], `maxFiles`, `maxFileSize`, `acceptedTypes`, `viewMode` [card|list], `display` [thumbnails|comma|tags], `renderPlainText`, `renderComponent`
+
+```tsx
+<MediaFilePicker value={files} onChange={setFiles} mode="multi" maxFiles={5} />
+```
+
+## NativeSelect
+
+Radix-based select primitive family on the `native-select` subpath (distinct from the compound `Select` above); exported symbols are named `Select*`.
+
+**Props:** `value`, `onValueChange`, `defaultValue`, `disabled` (root passes through all Radix Select props)
+
+**Sub-components:** `Select`, `SelectTrigger` (`size` [sm|default]), `SelectValue`, `SelectContent`, `SelectGroup`, `SelectLabel`, `SelectItem`
+
+```tsx
+<Select value={fruit} onValueChange={setFruit}>
+  <SelectTrigger>
+    <SelectValue placeholder="Pick one" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## RadioGroup
+
+Radix radio group with card and segmented-control variants.
+
+**Props:** `value`, `defaultValue`, `onValueChange`
+
+**Sub-components:** `RadioGroupItem`, `RadioGroupCard` (`variant` [card|list|chip]), `RadioGroupCardItem`, `RadioGroupLabel` (`clickable`), `RadioGroupDescription`, `RadioGroupItemHeader/Title/Subtitle/Description/Content/Indicator`, `RadioGroupSegmented`, `RadioGroupSegmentedItem` (`icon`)
+
+```tsx
+<RadioGroup value={plan} onValueChange={setPlan}>
+  <RadioGroupCard>
+    <RadioGroupItem value="free" />
+    <RadioGroupLabel clickable>Free</RadioGroupLabel>
+  </RadioGroupCard>
+  <RadioGroupCard>
+    <RadioGroupItem value="pro" />
+    <RadioGroupLabel clickable>Pro</RadioGroupLabel>
+  </RadioGroupCard>
+</RadioGroup>
+```
+
+## Toggle
+
+Pressed-state button supporting both `value`/`onChange` and `pressed`/`onPressedChange` APIs.
+
+**Props:** `pressed`, `onPressedChange`, `value`, `onChange`, `variant` [default|outline|primary], `size` [default|sm|lg], `density` [compact|comfortable|spacious]
+
+```tsx
+<Toggle pressed={isBold} onPressedChange={setIsBold} variant="outline">
+  B
+</Toggle>
+```
+
+## ToggleGroup
+
+Group of toggles with single or multiple selection; `variant`/`size`/`density` cascade to items.
+
+**Props:** `type` [single|multiple], `value`, `defaultValue`, `onValueChange`, `variant` [default|outline|primary], `size` [default|sm|lg], `density` [compact|comfortable|spacious]
+
+**Sub-components:** `ToggleGroupItem`
+
+```tsx
+<ToggleGroup
+  type="single"
+  value={align}
+  onValueChange={setAlign}
+  variant="outline"
+>
+  <ToggleGroupItem value="left">Left</ToggleGroupItem>
+  <ToggleGroupItem value="right">Right</ToggleGroupItem>
+</ToggleGroup>
+```

package/data/harnesses/code/skills/design/components/layout.md

@@ -0,0 +1,52 @@
+# Layout Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Content structure and containers. Import each from its own subpath, e.g. `import { Card, CardContent } from "@nurix/components/card";`.
+
+## Statistics
+
+Compound schema for dashboard stat / KPI cards — compose only the regions a card needs. Import from `@nurix/components/statistics`. Sub-components throw if rendered outside `<Statistics>`. The wrapper is `bare` (invisible — just a flex column) by default so consumers own its look; opt into a surface with `variant`.
+
+**Sub-components:** `StatisticsHeader`, `StatisticsIcon`, `StatisticsHeading`, `StatisticsTitle`, `StatisticsDescription`, `StatisticsActions`, `StatisticsSection`, `StatisticsMetric`, `StatisticsValue`, `StatisticsUnit`, `StatisticsTrend`, `StatisticsComparison`, `StatisticsGroup`, `StatisticsVisual`, `StatisticsGauge`, `StatisticsProgress`, `StatisticsSegmentedBar`, `StatisticsSparkline`, `StatisticsLegend`, `StatisticsLegendItem`, `StatisticsContent`, `StatisticsFooter`, `StatisticsCaption`, `StatisticsLink`
+
+**Statistics props:** `size` [sm|md|lg] (headline value scale), `variant` [bare|card|elevated|outline|soft|ghost] (default `bare` draws nothing; the rest add padding + surface), `accent` [none|primary|success|warning|danger|info], `gap` [none|sm|md|lg], `justify` [start|center|end|between|around|evenly], `comparisonLabel`
+**StatisticsTitle:** `size` [sm|md|lg], `align` [left|center|right]
+**StatisticsTrend:** `value:number`, `direction?` [up|down], `invert?` (flip color, keep arrow), `pill?`, `format?:(n)=>string`
+**StatisticsIcon:** `variant` [default|primary|success|warning|danger|info], `tone` [soft|solid|outline|plain], `size` [xs|sm|md|lg|xl|oversized] (oversized bleeds out the top-right corner — needs a clipping surface variant), `shape` [circle|rounded|square]
+**StatisticsGauge:** `value` (0–100), `sweep?` [180|270], `size?`, `thickness?`, `trackColor?`, `fillColor?` — renders children centered in the dial
+**StatisticsSection:** `gap`, `justify` — a vertical group; nest two (top + bottom) in a `justify="between"` card to pin clusters to the top and bottom. `StatisticsVisual` is a generic slot: drop in a built-in visual or any chart (`PieGraph`, `LineGraph`, `BarGraph`, `ProgressBar`).
+
+```tsx
+<Statistics variant="card" comparisonLabel="vs last week">
+  <StatisticsHeader>
+    <StatisticsHeading>
+      <StatisticsTitle>Revenue</StatisticsTitle>
+    </StatisticsHeading>
+    <StatisticsActions>
+      <StatisticsIcon variant="success">{/* icon */}</StatisticsIcon>
+    </StatisticsActions>
+  </StatisticsHeader>
+  <StatisticsMetric>
+    <StatisticsValue>$21,434</StatisticsValue>
+    <StatisticsTrend value={-12.2} invert pill />
+    <StatisticsComparison />
+  </StatisticsMetric>
+</Statistics>
+```
+
+## Other layout components
+
+- `accordion` — Accordion, AccordionItem, AccordionTrigger, AccordionContent
+- `aspect-ratio` — AspectRatio
+- `bento-grid` — BentoGrid, BentoCard
+- `card` — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, CardImage
+- `carousel` — Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
+- `collapsible` — Collapsible, CollapsibleTrigger, CollapsibleContent
+- `collapsible-panel` — CollapsiblePanel
+- `editable-card` — EditableCard, EditableCardHeader, EditableCardBody, EditableCardFooter
+- `resizable` — ResizablePanelGroup, ResizablePanel, ResizableHandle
+- `scroll-area` — ScrollArea, ScrollBar
+- `separator` — Separator
+- `separator-with-text` — SeparatorWithText
+- `sortable` — Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay

package/data/harnesses/code/skills/design/components/media.md

@@ -0,0 +1,66 @@
+# Media Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Icons, avatars, and media display; import each from its kebab-case subpath, e.g. `import { Avatar } from "@nurix/components/avatar"`.
+
+## Avatar
+
+Wraps `facehash` (deterministic identicon fallback) with default sizing.
+
+**Props:** `size` (number, default 32) — sets both `width`/`height` and drives the round mask
+
+**Sub-components:** `AvatarImage`, `AvatarFallback` (`colors` — palette forwarded to facehash for its generated background, defaults to a 10-color set)
+
+```tsx
+<Avatar size={40}>
+  <AvatarImage src="/photo.jpg" />
+  <AvatarFallback name="jane@example.com" />
+</Avatar>
+```
+
+## CopyButton
+
+Click-to-copy button with a check/copy icon swap.
+
+**Props:** `value`, `onCopy`, `copiedDuration` (ms before reverting, default 2000), `variant` [default|outline], `size` [sm|default|lg]
+
+```tsx
+<CopyButton value={apiKey} size="sm" />
+```
+
+## NurixLogo
+
+Official Nurix wordmark, inline SVG.
+
+**Props:** `type` [color|monochrome] (color = ink + blue X kicker; monochrome = every path in `color`, for dark/animated backdrops), `height` (number|string, sizes via intrinsic aspect ratio), `color` (ink, default `#222222`), `accentColor` (X-kicker, `type="color"` only, default `#4660EC`)
+
+```tsx
+<NurixLogo type="monochrome" color="currentColor" height={20} />
+```
+
+## ThemeToggler
+
+Light/dark toggle with a directional wipe reveal; cycles light → dark → system → light and persists to `localStorage`.
+
+**Props:** `style` [icon|text-icon|icon-text], `size` [sm|md|lg], `duration` (ms, default 700)
+
+```tsx
+<ThemeToggler style="icon-text" size="md" />
+```
+
+## ViewSwitcher
+
+Segmented control for switching a view-type projection (e.g. table/card), with an animated sliding background.
+
+**Props:** `value`/`onChange` (controlled), `defaultValue` (default `"table"`), `options` (`{ value, label, icon }[]`, defaults to Table/Card), `size` [sm|md|lg]
+
+```tsx
+<ViewSwitcher value={view} onChange={setView} size="sm" />
+```
+
+## Other Components
+
+- `icon-renderer` + `icons-data` — `IconRenderer`: `icon`/`family`/`size` [sm|md|lg|xl]/`color`; resolves a remote SVG (`https://static.amoga.io/fa/<family>/<icon>.svg`) tinted via CSS filter, with a built-in fallback icon on load error. `icons-data` exports `iconsData` — `{ name, categories, tags }[]` — for building icon pickers over the local Lucide set (distinct from the remote family above).
+- `live-waveform` + `mic-icon` — `LiveWaveform`: canvas mic-level visualizer; `active`, `processing`, `mode` [static|history|frequency], `barWidth`/`barGap`/`barRadius`/`barColor`, `sensitivity`, `onStreamReady`/`onStreamEnd`/`onError` (draft API — most props are untyped passthroughs). `MicIcon`: animated mic glyph with an imperative ref (`startAnimation`/`stopAnimation`); `size`, `duration`, `isAnimated`.
+- `shine-border` — `ShineBorder`: absolutely-positioned animated gradient border overlay (parent needs `position: relative`); `borderWidth`, `duration` (seconds), `shineColor` (string or array, cycled through a radial gradient sweep)