@nurix/etna 0.19.11 → 0.19.13

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

@@ -0,0 +1,82 @@
+# Motion Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Animation primitives built on the `motion` library (`motion-primitives/*`) plus a small `animate-ui/*` layer. Compose sparingly — decorative and low-frequency surfaces only; never on data or on actions users repeat dozens of times a day. Import each from its own subpath, e.g. `import { AnimatedGroup } from "@nurix/components/motion-primitives/animated-group"`.
+
+## Animated numbers
+
+Tick-up numerals that render as plain text until JS is ready (no layout shift, no flash of `0`).
+
+- `motion-primitives/animated-number` — `AnimatedNumber`: spring-interpolated count-up; `value`, `springOptions`, `as` (element/component, default `span`)
+- `motion-primitives/sliding-number` — `SlidingNumber`: per-digit slot-machine roll; `value`, `padStart`, `decimalSeparator`
+
+```tsx
+<AnimatedNumber value={total} springOptions={{ bounce: 0.2 }} />
+```
+
+## Stagger entrance
+
+- `motion-primitives/animated-group` — `AnimatedGroup`: staggers children in on mount/update. **Props:** `preset` [fade|slide|scale|blur|blur-slide|zoom|flip|bounce|rotate|swing], `variants` (`{ container, item }`, overrides preset), `as`/`asChild`
+
+```tsx
+<AnimatedGroup preset="blur-slide">
+  {items.map((item) => <Card key={item.id}>{item.label}</Card>)}
+</AnimatedGroup>
+```
+
+## Text effects
+
+Per-character/word/line text animation — low-frequency surfaces only (empty states, onboarding, marketing-adjacent copy).
+
+- `motion-primitives/text-effect` — `TextEffect`: staggered reveal; `per` [word|char|line], `preset` [blur|fade-in-blur|scale|fade|slide], `delay`, `trigger`, `onAnimationComplete`
+- `motion-primitives/text-morph` — `TextMorph`: morphs character-by-character between successive `children` string values; `as`, `variants`, `transition`
+- `motion-primitives/text-scramble` — `TextScramble`: scrambles through random characters before resolving; `duration`, `speed`, `characterSet`, `trigger`, `onScrambleComplete`
+- `motion-primitives/text-shimmer` — `TextShimmer`: looping gradient shimmer across the text; `duration`, `spread`
+
+## Morphing overlays
+
+Trigger element morphs its own bounds into the overlay (shared-layout, not a fade) — interruptible mid-animation.
+
+- `motion-primitives/morphing-dialog` — `MorphingDialog` (root) + `MorphingDialogTrigger`, `MorphingDialogContainer` (portal), `MorphingDialogContent`, `MorphingDialogTitle`, `MorphingDialogSubtitle`, `MorphingDialogDescription` (`disableLayoutAnimation`), `MorphingDialogImage`, `MorphingDialogClose`; root takes `transition`
+- `motion-primitives/morphing-popover` — `MorphingPopover` (`defaultOpen`/`open`/`onOpenChange`, `variants`) + `MorphingPopoverTrigger`, `MorphingPopoverContent`
+
+```tsx
+<MorphingDialog>
+  <MorphingDialogTrigger>
+    <img src={thumb} alt="" />
+  </MorphingDialogTrigger>
+  <MorphingDialogContainer>
+    <MorphingDialogContent>
+      <MorphingDialogImage src={fullSize} alt="" />
+    </MorphingDialogContent>
+  </MorphingDialogContainer>
+</MorphingDialog>
+```
+
+## Panel transitions
+
+Crossfade/slide between sibling panels, or a height-animated reveal. Distinct from the plain shadcn `accordion`/`tabs` subpaths in [layout.md](layout.md)/[navigation.md](navigation.md) — these are the animated variants.
+
+- `motion-primitives/transition-panel` — `TransitionPanel`: crossfades between `children[activeIndex]`; `variants` (`{ enter, center, exit }`), `transition`
+- `motion-primitives/disclosure` — `Disclosure` (root, `open`/`onOpenChange`) + `DisclosureTrigger`, `DisclosureContent`; `useDisclosure()` for custom triggers
+- `motion-primitives/accordion` — animated `Accordion` (root, `expandedValue`/`onValueChange`, single-expand) + `AccordionItem`, `AccordionTrigger`, `AccordionContent`; `useAccordion()`
+- `animate-ui/components/animate/tabs` — animated `Tabs`: sliding active-tab highlight over the primitive below; `variant` [solid|underline], `size` [sm|md|lg]
+
+## Decorative effects
+
+Pointer-tracked washes and ambient loops — decorative chrome only, never load-bearing content.
+
+- `motion-primitives/spotlight` — `Spotlight`: cursor-following radial glow inside a `position: relative` parent; `size`, `springOptions`
+- `motion-primitives/glow-effect` — `GlowEffect`: animated multi-color glow; `mode` [rotate|pulse|breathe|colorShift|flowHorizontal|static], `colors`, `blur` (preset or px number), `duration`, `scale`
+- `motion-primitives/animated-background` — `AnimatedBackground`: sliding highlight that tracks the active/hovered child (each child needs a `data-id`); `defaultValue`, `onValueChange`, `enableHover`
+- `motion-primitives/infinite-slider` — `InfiniteSlider`: seamless looping marquee; `gap`, `speed`, `speedOnHover`, `direction` [horizontal|vertical], `reverse`
+- `animate-ui/primitives/effects/highlight` — `Highlight`: the sliding-highlight primitive underneath `AnimatedBackground`/animated `Tabs`; `mode` [children|parent], `value`/`defaultValue`/`onValueChange` (controlled or uncontrolled), `hover`, `click`, `transition`, `exitDelay`
+
+## Dynamic toolbar
+
+- `motion-primitives/toolbar-dynamic` — `ToolbarDynamic`: toolbar that expands to a contextual search input; `expandedWidth`, `collapsedWidth`, `placeholder`, `transition`. Ships `ToolbarButton` for the collapsed action icons.
+
+---
+
+Two further `animate-ui` subpaths are low-level primitives consumed internally rather than composed directly: `animate-ui/primitives/animate/slot` (an `asChild`-merging `Slot`, the plumbing behind the animated `Tabs`) and `animate-ui/primitives/effects/theme-toggler` (the directional-wipe primitive behind the `theme-toggler` component in [media.md](media.md)).

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

@@ -0,0 +1,29 @@
+# Navigation Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Components: Breadcrumb, Menubar, Navbar, NavigationMenu, Pagination, Sidebar, SlideOutMenu, Tabs, VerticalIconBar
+
+Each imports from its own subpath, with compound members alongside, e.g. `import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nurix/components/tabs"`.
+
+## Sidebar
+
+App sidebar: full shadcn primitives plus an opinionated layer, all from the single `@nurix/components/sidebar` subpath.
+
+**Sub-components:** `SidebarProvider`, `Sidebar` (`side` [left|right], `variant` [sidebar|floating|inset], `collapsible` [offcanvas|icon|none]), `SidebarTrigger`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarRail`, `SidebarInset`, `useSidebar`. **Opinionated layer:** `Brand`, `Switcher` (`render` [simple|rich], `options`, `activeId`, `onSelect`), `ItemGroup` (`render` [list|tree|rich], `collapsible`, `compact`, `collapsedLabel` [hide|divider], `items`, `onItemClick`), `UserMenu`, `Callout`, `FileTree`, `SidebarCommandTrigger`.
+
+```tsx
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <SidebarHeader>
+      <Switcher options={workspaces} />
+    </SidebarHeader>
+    <SidebarContent>
+      <ItemGroup label="Platform" render="tree" items={items} />
+    </SidebarContent>
+    <SidebarFooter>
+      <UserMenu user={user} />
+    </SidebarFooter>
+  </Sidebar>
+</SidebarProvider>
+```

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

@@ -0,0 +1,72 @@
+# Overlay Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+## Dialog
+
+Modal dialog with configurable size, position, and variant.
+
+**Sub-components:** `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`
+
+**Content props:** `size` [sm|md|default|lg|xl|full], `position` [center|top|bottom], `variant` [default|danger], `dismissible` (default true; false when variant is danger), `showDividers`, `scrollable` (pins header/footer, scrolls body), `title`, `description`, `icon` (render a built-in header)
+
+**Header/Footer props:** `showDivider`
+
+```tsx
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Edit profile</Button>
+  </DialogTrigger>
+  <DialogContent size="lg">
+    <DialogHeader showDivider>
+      <DialogTitle>Edit Profile</DialogTitle>
+    </DialogHeader>
+    <DialogBody>
+      <Input value={name} onChange={(e) => setName(e.target.value)} />
+    </DialogBody>
+    <DialogFooter showDivider>
+      <Button onClick={handleSave}>Save</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Sheet
+
+Side panel overlay with header/body/footer layout.
+
+**Sub-components:** `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetBody`, `SheetFooter`, `SheetTitle`, `SheetDescription`, `SheetClose`
+
+**Content props:** `side` [top|right|bottom|left], `size` [sm|md|default|lg|xl|full] (left/right only; top/bottom span full width), `showCloseButton`, `showOverlay`
+
+**Header/Footer props:** `showDivider` **Body props:** `noPadding`
+
+```tsx
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Open</Button>
+  </SheetTrigger>
+  <SheetContent side="right" size="lg">
+    <SheetHeader showDivider>
+      <SheetTitle>Settings</SheetTitle>
+    </SheetHeader>
+    <SheetBody>
+      <Input value={name} onChange={(e) => setName(e.target.value)} />
+    </SheetBody>
+    <SheetFooter showDivider>
+      <Button onClick={handleSave}>Save</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+
+## Other Overlays
+
+Standard compound components following the Trigger/Content pattern; import each from its kebab-case subpath (e.g. `@nurix/components/popover`):
+
+- `Command` (`command`)
+- `ContextMenu` (`context-menu`)
+- `DropdownMenu` (`dropdown-menu`)
+- `HoverCard` (`hover-card`)
+- `Popover` (`popover`)
+- `Tooltip` (`tooltip`)

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

@@ -0,0 +1,40 @@
+# Setup & Configuration
+
+> Generated reference (regen-owned; see [index.md](index.md)). Loads only under `primitives: nurix` — this is the wiring a project needs before any `@nurix/components` import resolves.
+
+## Package
+
+`@nurix/components` — published to the public npm registry (`registry.npmjs.org`) under the restricted `@nurix` scope. Only `dist/` ships. Peer dependencies: `react ^19`, `react-dom ^19`. Source of truth: `github.com/nurixlabs/components`.
+
+## Installing
+
+The scope is restricted, so the consumer project needs an npm token with read access to `@nurix` in its `.npmrc`:
+
+```ini
+//registry.npmjs.org/:_authToken=${NPM_READ_TOKEN}
+```
+
+Then install with the project's package manager (detect from the lockfile): `npm install @nurix/components`.
+
+## Styles (required)
+
+In the consumer's CSS entry, after Tailwind v4:
+
+```css
+@import "tailwindcss";
+@import "@nurix/components/styles.css";
+```
+
+The shipped `styles.css` is **not** precompiled — it carries the design tokens, base layer, and an embedded `@source "./**/*.js"` directive, so the consumer's Tailwind v4 build scans the package's compiled JS and generates every utility class the components use. The project must have Tailwind v4 set up; it does **not** add its own `@source` for this package.
+
+The design skill's token artifact (CSS custom properties emitted from the project `design.md`) layers over these tokens — theme blocks carry specificity armor precisely so this package's `:root` block cannot defeat them.
+
+## Import pattern
+
+Use subpath imports — each published entry maps to one; never import from the root barrel in generated code:
+
+```tsx
+import { Button } from "@nurix/components/button";
+import { Cell } from "@nurix/components/cell";
+import { defineColumn } from "@nurix/components/table";
+```

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

@@ -0,0 +1,46 @@
+# Typography Components
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Import each from its kebab-case subpath, e.g. `import { Badge } from "@nurix/components/badge"`.
+
+## Text
+
+Inline editable text using native `contentEditable` — plain text that grows a focus border and becomes editable on click, no controlled-input plumbing required.
+
+**Props:** `value`, `defaultValue`, `placeholder`, `disabled`, `readOnly`, `onSave`, `validator`, `onValidationError`, `hideHoverEffect`
+
+Enter or blur commits via `onSave` (skipped if unchanged); Escape reverts to the pre-edit value. A `validator` regex blocks the commit and reports via `onValidationError` instead.
+
+```tsx
+<Text
+  defaultValue={title}
+  placeholder="Untitled"
+  onSave={saveTitle}
+  validator={/^.{1,80}$/}
+/>
+```
+
+## SecureText
+
+Masked display for sensitive values (passwords, API keys, card numbers) with an optional reveal toggle.
+
+**Props:** `value`, `revealable` (default true), `defaultRevealed`, `revealed`/`onRevealedChange` (controlled), `variant` [default|mono], `size` [sm|default|lg], `maskOptions` (`{ maskChar, unmaskedStart, unmaskedEnd, preserveSpacing, grouping, showLength }`)
+
+```tsx
+<SecureText
+  value={apiKey}
+  variant="mono"
+  maskOptions={{ unmaskedStart: 4, unmaskedEnd: 4, grouping: 4 }}
+/>
+```
+
+## Other Components
+
+- `badge` — `Badge`: `variant` [default|secondary|destructive|outline|ghost|link], `asChild`
+- `chip` — `Chip`: removable tag; `variant` [default|secondary|outline|muted], `size` [sm|default|lg], `onRemove`, `disabled`
+- `code` — `Code`: inline `<code>` or a `block` (renders `<pre>`); `variant` [default|ghost|muted], `size` [sm|default|lg], `block`
+- `kbd` — `Kbd`: keycap; `variant` [default|outline], `size` [sm|default|lg]
+- `label` — `Label`: Radix `Label.Root`, tracks a peer/group's `disabled` state automatically
+- `link` — `Link`: `variant` [default|muted|plain|underline], `size` [sm|default|lg], `asChild`, `external` (forces `target="_blank"` + a trailing icon; also auto-detects `target="_blank"`)
+- `markdown` — `Markdown`: GFM `react-markdown` + `remark-gfm` render with a full element map (headings, lists, code, blockquote, tables) styled on the library's own tokens — no `@tailwindcss/typography` plugin needed; safe to re-render incrementally while streaming. **Props:** `children` (markdown string), `className`

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

@@ -0,0 +1,37 @@
+# Utils
+
+> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
+
+Low-level utilities and shared types, each published as its own subpath under `@nurix/components/<subpath>`.
+
+## cn
+
+`cn(...inputs)` (from `utils`) — `clsx` + `tailwind-merge`; the class-merge used throughout the library. Same subpath also exports `isMobileDevice()` (UA-sniffing boolean, prefer `useIsMobile` in components).
+
+```tsx
+<div className={cn("rounded-md", isActive && "bg-primary", className)} />
+```
+
+## formatDate
+
+`formatDate(date, opts?)` (from `format`) — Intl-based date formatting; returns `""` on a missing/invalid input instead of throwing. Defaults to `{ month: "long", day: "numeric", year: "numeric" }`, overridable via `opts`.
+
+## generateId
+
+`generateId(prefixOrOptions?, options?)` (from `id`) — nanoid-based alphanumeric ID; `{ length = 12, separator = "_" }`. Accepts a prefix key as the first argument (prepended with `separator`) or an options object directly.
+
+## getErrorMessage
+
+`getErrorMessage(err)` (from `handle-error`) — normalizes an unknown error into a display string: joins `ZodError` issue messages with newlines, passes through a plain `Error.message`, else a generic fallback.
+
+## getStrictContext
+
+`getStrictContext<T>(name?)` (from `get-strict-context`) — returns a `[Provider, useSafeContext]` pair; the hook throws (`useContext must be used within <name>`) when read outside its `Provider`, instead of silently returning `undefined`.
+
+## composeRefs
+
+`composeRefs(...refs)` / `useComposedRefs(...refs)` (from `compose-refs`) — merges multiple callback refs and `RefObject`s (including React 19 ref-cleanup returns) into one callback ref.
+
+---
+
+Two further subpaths are non-UI escape hatches, not composable concepts: `types` (a barrel of public component prop types — `InputProps`, `SelectProps`, `CellProps`, …) and `node-catalog` (runtime node definitions for the NuStack Plan engine — data, not UI).

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

@@ -0,0 +1,38 @@
+---
+id: browse
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Salesforce list views, GitHub search/Explore, Retool templates, Zendesk views, Notion gallery view, Airtable interfaces, Linear command menu"
+license: open
+---
+Composition shapes for the browse archetype — unordered lookup across a record catalog. View-types (table, cards, board) are projections that may appear inside any shape.
+
+## Shape: Filter Rail Browse
+Regions: search/sort bar (full-width, top) / filter rail (left, fixed ~20%, checkboxes and facets) / result area (remaining ~80%, table or card grid) / optional saved-view tabs above the results.
+The eye lands on: the result count and the first few rows or cards immediately right of the rail.
+When to use: users know roughly what they want and need to narrow a large catalog by attributes before picking one.
+Seen in: Salesforce list views with filter tabs, GitHub code/issue search with its left filter sidebar, Retool admin-panel search-and-table patterns.
+
+## Shape: Topic Shelf Browse
+Regions: search bar (top, secondary) / stacked horizontal shelves (full-width, each a named topic or collection) / each shelf scrolls independently left-right.
+The eye lands on: the first shelf's title and its lead card — curation, not a filter control, drives attention.
+When to use: the goal is inspiration or discovery across a broad catalog rather than narrowing toward a known target.
+Seen in: GitHub Explore (Trending repositories, Topics, Collections), Retool's template gallery landing page.
+
+## Shape: Faceted Table Browse
+Regions: saved-view tab strip (top, full-width) / facet and group controls (top-right, compact) / dense table body (full-width, below) with grouped row headers.
+The eye lands on: the active view's name and its row count in the tab strip, then the grouped section headers.
+When to use: the same underlying record set is browsed through several standing, shareable slices rather than one ad hoc filter.
+Seen in: Salesforce list views (Table/Split/Kanban toggle on one saved view), Zendesk ticket views grouped and ordered by field.
+
+## Shape: Gallery Card Browse
+Regions: toolbar (top, thin) / uniform card grid (full-width, cover-forward cards with a small property strip beneath each) / no persistent side rail.
+The eye lands on: the cover or lead property of the first card, not on chrome or filters.
+When to use: the records are visually distinguishable (people, assets, campaigns) and recognition beats reading fields.
+Seen in: Notion gallery view, Airtable's gallery-style interface layouts.
+
+## Shape: Command-First Browse
+Regions: a single centered search/command input (top, dominant) that expands into a ranked result list beneath it as the user types / no visible content before a query.
+The eye lands on: the input caret, then the top-ranked result as it appears.
+When to use: the catalog is too large or too varied to shelf or facet usefully, and users already have a query in mind.
+Seen in: GitHub's global search entry point, Linear's Cmd+K command menu used as a navigation-and-discovery surface.

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

@@ -0,0 +1,38 @@
+---
+id: creation-flow
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Stripe Connect onboarding, Linear issue creation, GitHub new-repository page, Retool App IDE, Airtable Interface Designer, wizard-pattern references"
+license: open
+---
+Composition shapes for the creation-flow archetype — how a new object enters the system. The object's field count, orderedness, and context-sensitivity pick the shape.
+
+## Shape: Linear Stepper Wizard
+Regions: step rail (left or top, numbered, shows progress and lets users jump to completed steps) / one focused form panel per step (center, only the current step's fields are visible) / persistent progress indicator.
+The eye lands on: the current step's label, highlighted in the rail.
+When to use: creation requires many required fields best collected in a specific order, especially with validation or document upload between groups.
+Seen in: Stripe's hosted/embedded Connect account onboarding, generic SaaS setup wizards built around a stepper.
+
+## Shape: Slide-Over Quick Create
+Regions: a right-hand panel or modal (slides over the current screen, ~⅓–½ width) capturing a minimal field set / the underlying list or board stays visible and dimmed behind it.
+The eye lands on: the title/name field, auto-focused at the top of the slide-over.
+When to use: the object being created is simple enough not to need its own page, and preserving the user's current context matters more than a guided sequence.
+Seen in: Linear's issue-creation modal (triggered by `C` or `Cmd+K`, preserves a draft if dismissed).
+
+## Shape: Single-Page Form
+Regions: one dedicated page (full-width, no steps) with fields grouped into clearly labeled sections top to bottom / primary submit action at the bottom of the page.
+The eye lands on: the first required field at the top of the page (commonly a name field).
+When to use: the object has a small, fixed set of fields that don't benefit from being split across steps.
+Seen in: GitHub's "Create a new repository" page (name, description, visibility, template, initialization options all on one page).
+
+## Shape: Builder Canvas Creation
+Regions: component/element palette (left, narrow) / live authoring canvas (center, widest, shows the artifact being built and previewed simultaneously) / property inspector (right, contextual to whatever is selected).
+The eye lands on: whatever element on the canvas was most recently added or selected.
+When to use: the thing being created is itself a visual composition (an app, a page, an interface) rather than a record with fixed fields.
+Seen in: Retool's App IDE; Airtable's Interface Designer when building a new interface from scratch.
+
+## Shape: Guided Checklist Launcher
+Regions: a persistent checklist/progress tracker (top or side, shows completion percentage) / each checklist item expands into its own focused step or opens a separate flow / dismissible and resumable at any time.
+The eye lands on: the next incomplete checklist item, usually highlighted or bolded.
+When to use: setup spans many optional or asynchronous sub-tasks (some requiring external verification) that shouldn't block each other.
+Seen in: Stripe's embedded onboarding requirements flow, generic SaaS account-setup checklists.

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

@@ -0,0 +1,38 @@
+---
+id: dashboard
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Stripe Dashboard home, Datadog dashboards and Dependency Map Navigator, Airtable Interface Designer, network-operations-center layout conventions, BI single-metric report layouts"
+license: open
+---
+Composition shapes for the dashboard archetype — many signals summarized for scan or narrative. Which shape fits follows from whether the audience scans for anomalies or reads for a story.
+
+## Shape: KPI Strip + Chart Grid
+Regions: KPI strip (full-width, top, 4–6 tiles each with a value, delta, and inline sparkline) / flexible chart-and-table grid beneath, arranged in a 12-column layout.
+The eye lands on: the single largest number in the leftmost KPI tile.
+When to use: a general operator or executive audience needs the headline health of the business before anything else.
+Seen in: Stripe Dashboard's home page ("Your overview" widgets).
+
+## Shape: Dense Monitoring Grid
+Regions: named tabs (top, grouping widgets into sections) / a 12-column responsive grid packed edge-to-edge with many small, same-scale widgets (graphs, single-value tiles, status lists).
+The eye lands on: whichever widget is currently in an alert/error color state, not a fixed position.
+When to use: the goal is at-a-glance anomaly-spotting across many signals at once, not narrative or storytelling.
+Seen in: Datadog dashboards in high-density mode.
+
+## Shape: Freeform Canvas Dashboard
+Regions: an unconstrained drag-anywhere canvas mixing number tiles, charts, filtered record lists, and text blocks, each element independently sourced from a different underlying table.
+The eye lands on: whichever element the dashboard's author placed largest or first — no default focal convention.
+When to use: the dashboard's authors need full control over juxtaposing heterogeneous content (not just uniform charts) for a specific audience.
+Seen in: Airtable's Interface Designer dashboard layout.
+
+## Shape: Command-Center Split
+Regions: relationship/topology map or geographic overview (left or center, dominant, ~⅔) / live list or table of affected entities (right, ~⅓, sorted by severity, updates in real time).
+The eye lands on: whatever node or row is currently flagged in an alert color.
+When to use: operators must go from "something is wrong somewhere" to "which specific thing" without leaving one screen.
+Seen in: Datadog's Dependency Map Navigator; the video-wall convention of a dominant overview display paired with secondary alert panels used in network operations centers.
+
+## Shape: Narrative Single-Column Report
+Regions: one hero chart or metric (top, full-width) / supporting breakdown tables and secondary charts stacked below it in reading order / minimal or no side chrome.
+The eye lands on: the hero chart's headline trend line.
+When to use: the dashboard is meant to be read top-to-bottom like a report, telling one story, rather than scanned for many independent signals.
+Seen in: single-metric deep-dive report layouts common to BI tools built around one hero visualization followed by supporting cuts of the same data.

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

@@ -0,0 +1,38 @@
+---
+id: grid
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Airtable grid view and grouped views, Notion table side peek, Retool App IDE and admin templates, spreadsheet-style admin tables"
+license: open
+---
+Composition shapes for the grid archetype — many records edited or scanned across many fields at once, spreadsheet-fashion.
+
+## Shape: Frozen-Header Spreadsheet
+Regions: toolbar (top, view switch / row-height / filter controls) / grid body (full-width, first column(s) frozen while scrolling horizontally) / add-row affordance pinned to the bottom edge.
+The eye lands on: the frozen leftmost column, which anchors every row as the grid scrolls.
+When to use: users need to scan and bulk-edit many records across many fields the way they would in a spreadsheet.
+Seen in: Airtable grid view, Google-Sheets-style admin data tables.
+
+## Shape: Grid + Side Peek
+Regions: grid (majority of width, ~70–80%) / record detail panel (right, slides in on row selection, ~20–30%, doesn't navigate away from the grid).
+The eye lands on: the selected row's highlighted state in the grid, then the panel that opens beside it.
+When to use: editing one record's full detail is common but shouldn't cost the user their place in the larger table.
+Seen in: Airtable's expand-record-from-grid interaction, Notion's table view opening records in a side peek.
+
+## Shape: Grouped Grid with Subtotals
+Regions: grid body (full-width) organized into collapsible group bands, each with a header row carrying aggregate stats (count, sum, average) for that group.
+The eye lands on: the group header's aggregate figure, before any individual row.
+When to use: the grid's job is roll-up reporting on structured data, not just record-by-record editing.
+Seen in: Airtable's grouped grid view with per-group summary bars.
+
+## Shape: Builder Canvas Grid
+Regions: component palette (left, narrow, categorized list) / authoring canvas (center, widest, a 12-column grid used to place UI components rather than data rows) / inspector (right, contextual to the selected component).
+The eye lands on: the component currently selected on the canvas, highlighted against the grid.
+When to use: the "grid" is the structural device for assembling an interface or app, not for displaying records.
+Seen in: Retool's App IDE (canvas + component tree + Inspector panel).
+
+## Shape: Bulk-Action Grid
+Regions: search/filter bar (top) / grid with a persistent selection checkbox column (left edge) / sticky bulk-action toolbar that appears above the grid only once rows are selected.
+The eye lands on: the selection-count indicator in the bulk-action toolbar once it appears.
+When to use: the primary job is applying one action to many rows at once (delete, export, reassign), not editing cells individually.
+Seen in: Retool admin-panel table/search/form templates built for internal operators.

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

@@ -0,0 +1,38 @@
+---
+id: queue
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Zendesk Agent Workspace, Salesforce Split View, Intercom inbox, Superhuman Split Inbox, Gmail preview pane, Jira-style backlog tables"
+license: open
+---
+Composition shapes for the queue archetype — prioritized, claimable work processed toward empty. The list order is the product; view-types are projections.
+
+## Shape: Split Triage
+Regions: item list (left, ~⅓, one row per item, unread/priority state visible) / reading pane (right, ~⅔, shows the selected item in full) / action bar pinned to the reading pane's top edge.
+The eye lands on: the subject or title of the item open in the reading pane.
+When to use: operators process items one at a time but need the surrounding list visible to keep their place and jump ahead.
+Seen in: Gmail's preview-pane layout, Salesforce Split View, Intercom's conversation table with a preview panel.
+
+## Shape: Three-Column Context Triage
+Regions: ticket properties (left, narrow, editable fields) / conversation thread (center, widest, scrolls independently) / context panel (right, collapsible, customer/account data pulled from other systems).
+The eye lands on: the newest message in the center conversation thread.
+When to use: resolving one item requires both editing structured fields and reading unstructured context side by side.
+Seen in: Zendesk Agent Workspace's ticket interface.
+
+## Shape: Card-Stack Triage
+Regions: a single focal card (center, dominant, full item detail) with decision controls (approve/reject/skip) directly beneath it / no persistent list visible at all.
+The eye lands on: the one card currently in front of the operator.
+When to use: throughput and low cognitive load matter more than seeing what's next or re-ordering the queue.
+Seen in: moderation/review-queue patterns built around one-decision-at-a-time keyboard flows (the pattern Superhuman's and Zendesk's triage conventions both borrow from).
+
+## Shape: Grouped Table Queue
+Regions: standing view tabs (top, each a saved filter) / dense table (full-width, grouped by a status or priority field with collapsible group headers) / row click opens detail rather than a separate pane.
+The eye lands on: the group header counts, which signal where backlog is piling up.
+When to use: triage is about prioritizing across the whole backlog first, and deep work on one item happens after selection, not alongside it.
+Seen in: Zendesk's saved Views grouped and ordered by field, Jira-style backlog triage tables.
+
+## Shape: Zero-Chrome Queue
+Regions: a single wide column (full-width, no folders/menus/sidebar) listing items as compact single-line rows / a shortcuts overlay appears on demand rather than living in permanent chrome.
+The eye lands on: the top unprocessed row.
+When to use: expert operators triage at very high volume and any persistent chrome would slow them down.
+Seen in: Superhuman's Split Inbox list view.

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

@@ -0,0 +1,38 @@
+---
+id: record-detail
+class: d3
+sourced: 2026-07-12
+source: "design-skill-phase1 D3 sweep — distilled from Salesforce Lightning record pages, HubSpot record layout, Stripe customer detail, GitHub pull-request Files changed, Datadog Service Page"
+license: open
+---
+Composition shapes for the record-detail archetype — one entity, its fields, its history, and its relationships on a single page.
+
+## Shape: Highlights + Related Tabs
+Regions: highlights band (top, full-width, up to ~7 key fields drawn from a compact layout) / horizontal tab strip (below highlights) switching between Related, Details, and Activity panels beneath.
+The eye lands on: the first field in the highlights band (typically the record's name/status).
+When to use: one record has many categories of related information that don't need to be visible simultaneously.
+Seen in: Salesforce Lightning record pages (highlights panel driven by compact layout + related-list cards).
+
+## Shape: Three-Column CRM Record
+Regions: property sidebar (left, ~25%, "About" fields) / activity timeline (center, ~50%, chronological log) / associated-records rail (right, ~25%, previews of linked deals/tickets/companies).
+The eye lands on: the most recent entry at the top of the center timeline.
+When to use: the record's story (what happened, in order) matters as much as its current field values or its relationships.
+Seen in: HubSpot's contact/company/deal record layout.
+
+## Shape: Hero Header + Tab Strip
+Regions: hero header (top, full-width, entity name plus top-line stats) / horizontal tab strip immediately below (Payments / Subscriptions / Invoices / Events) / one table per tab filling the rest of the page.
+The eye lands on: the top-line stat in the hero header (balance, lifetime value, status).
+When to use: one entity has several large, independently-scrollable tables of history that shouldn't compete for space at once.
+Seen in: Stripe's customer detail page.
+
+## Shape: Conversation + Docked Panels
+Regions: resizable file/change tree (left, collapsible) / conversation or diff thread (center, dominant, scrolls independently) / docked overview and comments panels (right, toggled on demand, don't require navigating away).
+The eye lands on: the active file or comment thread being discussed in the center pane.
+When to use: reviewing a change requires holding structure (what changed), discussion (what people said), and description (why) in view together.
+Seen in: GitHub's redesigned pull request "Files changed" page.
+
+## Shape: Dependency-Map Record
+Regions: relationship graph/map (left or center, dominant canvas showing the entity's upstream/downstream connections) / metrics table (docked right or bottom, request/error/latency figures per connection).
+The eye lands on: the node representing the record itself, at the center of its dependency graph.
+When to use: the entity's identity is defined by its relationships to other entities, and those relationships are the diagnostic surface.
+Seen in: Datadog's Service Page (dependency map paired with a request/error-rate/latency table).

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/chart-styling/Readme.md

@@ -0,0 +1,33 @@
+---
+id: chart-styling-conventions
+class: a7
+sourced: 2026-07-12
+source: "Distilled from the A7 Phase-1 chart-styling sweep's cross-cutting tells (docs/research/design-skill-phase1/a7-chart-styling.md) — Datawrapper's gray-hierarchy and confetti-spaghetti posts, NYT/Economist chrome-restraint practice"
+license: open
+feel: "quiet chrome, loud data — the axis never competes with the series it's measuring"
+---
+Landing page for the A7 chart-styling database — one entry per named chrome + ramp recipe under `data/chart-styling/<id>.md`. Every entry specs axis/gridline/tooltip/legend chrome plus the three data ramps (categorical, sequential, diverging), and **every value is a token-role reference** (`chart-1`…`chart-5`, `muted`, `muted-foreground`, `border`, `surface-overlay`, `surface-raised`, `card`, `popover`, `success`, `destructive`, `warning`, `foreground`) — an entry never carries a color literal. The active identity package resolves the actual OKLCH/hex values; these recipes only say which role plays which chrome or ramp job. Chart *form* selection (bar vs. line vs. scatter) is a separate decision layer (B1) upstream of this one — A7 is styling only.
+
+## Cross-cutting tells (apply across every recipe below)
+
+- **Rainbow categorical soup** — too many saturated hues in one legend reads as "confetti spaghetti" (Datawrapper's term). Prefer running a family of related series in shades of two or three hues over reaching for a fifth or sixth chart token.
+- **Heavy black axes** — keep axis lines thin-to-absent; let the gridline (or the label alone) carry structure instead of a bold ruled line.
+- **Gridlines darker than data** — the three-tier gray hierarchy is a hard rule, not a preference: gridline contrast < label contrast < title contrast, always. A gridline that out-contrasts a data stroke has failed — lighten the gridline token, never darken the data.
+
+## Index
+
+| id | register | when to use |
+| --- | --- | --- |
+| `econ-red-rule-horizontal` | editorial, print/slide | single-message hero charts, one accent rule, everything else recedes |
+| `nyt-ghost-grid-direct-label` | editorial, narrative | line/area charts where the series shape is the story; direct end-of-line labels |
+| `ft-vocabulary-ranked-muted` | editorial/financial | a family of related chart types in one story needing shared chrome |
+| `plot-currentcolor-inherit` | embedded/inline | charts dropped into prose or docs, inheriting the page's ink color |
+| `datawrapper-tiered-gray-hierarchy` | editorial default | general-purpose; the three-gray-tier ordering rule |
+| `grafana-dark-threshold-bands` | ops/monitoring | dark-first always-on dashboards; threshold bands carry the alert signal |
+| `datadog-classic-six-aligned` | ops/monitoring | multi-panel monitoring grids needing consistent series identity |
+| `carbon-accessible-alert-semantic` | enterprise/accessibility | dense dashboards under a WCAG contrast mandate |
+| `carbon-monochrome-sequential-trend` | analytics | single-metric trend/heatmap charts, one hue's lightness ramp |
+| `shadcn-composable-css-vars` | product analytics | modern Recharts-via-shadcn UI, chart-N vars feed chrome directly |
+| `material-rounded-explicit-label` | consumer analytics | Material-flavored product, never color-alone encoding |
+| `saas-gradient-glow-area` | growth/marketing | usage charts, upgrade nudges — warmth over analytical density |
+| `financial-diverging-threshold-overlay` | finance/ops | P&L, budget-vs-actual, SLA burn-down — zero-baseline deviation reads |