@nurix/etna 0.19.41 → 0.19.43

package/data/harnesses/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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/apollo/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 |

package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-accessible-alert-semantic.md

@@ -0,0 +1,19 @@
+---
+id: carbon-accessible-alert-semantic
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Carbon Design System's data-visualization color-palettes page and its accessibility Medium write-up — WCAG 3.5:1 categorical contrast, fixed alert semantics"
+license: open
+feel: "WCAG-contrast categorical rotation plus fixed alert semantics — red/orange/yellow/green always mean the same severity"
+---
+Use for dense enterprise dashboards under an accessibility mandate. The categorical sequence is curated for maximum contrast between *neighbors*, not picked for hue variety — and alert colors are never repurposed for plain categorical use. Avoid a gradient standing in for a sequential ramp; use the dedicated sequential pair instead.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 11px, WCAG AA contrast minimum", ticks: minimal }
+gridlines: { direction: both, stroke: border, style: solid }
+tooltip: { surface: card, numerals: sans, border: border }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: surface-raised, to: chart-1 }
+diverging: { negative: destructive, mid: muted, positive: success }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/carbon-monochrome-sequential-trend.md

@@ -0,0 +1,19 @@
+---
+id: carbon-monochrome-sequential-trend
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Carbon Design System's monochromatic-palette guidance for relationship/trend charts"
+license: open
+feel: "single-hue lightness ramp for one series over time — depth of one color doing the work, no categorical distraction"
+---
+Use for single-metric trend charts, heatmap cells, or relationship charts where only magnitude matters. Avoid introducing a second hue even for a comparison band — step lightness/opacity of the same chart token instead of reaching for chart-2. Primarily a sequential recipe; the diverging slot below is rarely invoked in practice.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 10px sans", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: card, numerals: mono, border: border }
+legend: { position: none, style: swatch }
+categorical: [chart-1, muted, muted, muted, muted]
+sequential: { from: surface-raised, to: chart-1 }
+diverging: { negative: muted, mid: border, positive: chart-1 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/datadog-classic-six-aligned.md

@@ -0,0 +1,19 @@
+---
+id: datadog-classic-six-aligned
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Datadog's 'Selecting the right colors for your graphs' doc and effective-dashboards guidelines — Classic 6-color rotation, aligned x-axes"
+license: open
+feel: "six-color classic rotation with x-axes locked across every panel — the legend shows up only when there's room"
+---
+Use for multi-panel monitoring grids where series identity must stay recognizable panel-to-panel. Keep a fixed categorical count before repeating (Datadog's own is 6; an identity package with 5 chart tokens should cycle back to chart-1 for the 6th series, not introduce a 6th ad hoc hue). Never let one panel show a legend while its row neighbor hides one — it breaks x-axis alignment.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 9-10px, aligned across all panels in a row", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: popover, numerals: mono, border: border }
+legend: { position: right, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: muted, to: chart-2 }
+diverging: { negative: chart-4, mid: muted, positive: chart-3 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/datawrapper-tiered-gray-hierarchy.md

@@ -0,0 +1,19 @@
+---
+id: datawrapper-tiered-gray-hierarchy
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Datawrapper Academy's chart-customization articles and its 'colors for data vis style guides' post — the three-gray-tier rule"
+license: open
+feel: "three deliberate grays — gridline lightest, label mid, title darkest — hierarchy reads before you even look at the data"
+---
+General-purpose editorial default. The reusable insight is the *order*, not any single value: gridline contrast < label contrast < title contrast, always. Hard rule baked in — a gridline must never out-contrast a data stroke; if it does, lighten the gridline token, don't darken the data.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 10px sans, mid gray tier", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: card, numerals: sans, border: border }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: surface-raised, to: chart-1 }
+diverging: { negative: chart-4, mid: muted, positive: chart-2 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/econ-red-rule-horizontal.md

@@ -0,0 +1,19 @@
+---
+id: econ-red-rule-horizontal
+class: a7
+sourced: 2026-07-12
+source: "Distilled from The Economist's chart style guide PDF (v1.2) and Fountn's summary — horizontal-only gridlines, right-side labels, top accent rule"
+license: open
+feel: "one loud accent rule over quiet gray charts — one chart, one message, everything else recedes"
+---
+Use for single-message editorial charts (reports, decks, one-pagers) where a single series or moment must land instantly. Light theme, low density, print/slide scale — the top rule is a masthead device, not a repeatable UI motif, so reserve it for hero charts, not dashboard grids.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 11px right-aligned y-axis, no vertical axis line drawn", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: card, numerals: sans, border: none }
+legend: { position: inline, style: line }
+categorical: [chart-1, muted, muted, muted, muted]
+sequential: { from: muted, to: chart-1 }
+diverging: { negative: chart-4, mid: muted, positive: chart-1 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/financial-diverging-threshold-overlay.md

@@ -0,0 +1,19 @@
+---
+id: financial-diverging-threshold-overlay
+class: a7
+sourced: 2026-07-12
+source: "Distilled by combining FT's deviation-chart form (Visual Vocabulary), Grafana's threshold-band rendering, and Datadog's cool/warm diverging guidance for a finance/trading-ops use case"
+license: open
+feel: "diverging above/below-baseline color with a threshold-band overlay — reads deviation at a glance, dense enough for a trading-floor wall"
+---
+Use for finance/ops hybrids: P&L, budget-vs-actual, SLA burn-down — anywhere a zero-baseline or target line matters more than the raw series. Tooltip numerals are always monospace/tabular so figures align column-to-column across rows; the baseline gridline is dashed and visually distinct from the regular gridline set.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 10px mono, tabular-nums", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: dashed }
+tooltip: { surface: popover, numerals: mono, border: border }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: muted, to: chart-2 }
+diverging: { negative: destructive, mid: border, positive: success }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/ft-vocabulary-ranked-muted.md

@@ -0,0 +1,19 @@
+---
+id: ft-vocabulary-ranked-muted
+class: a7
+sourced: 2026-07-12
+source: "Distilled from FT's Visual Vocabulary poster/site (chart-doctor README, ft-interactive.github.io) — one shared chrome recipe across a chart family in a story"
+license: open
+feel: "consistent, muted chrome built to repeat across a whole family of ranking/deviation/correlation charts in one piece"
+---
+Use when a single story needs several related chart types (ranking, deviation, correlation) to feel like one system rather than one-offs — the win is chrome consistency across the set, not any single chart's flourish. Works for both editorial and financial-story contexts.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 11px, left-aligned tick labels", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: card, numerals: mono, border: border }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: surface-raised, to: chart-1 }
+diverging: { negative: chart-4, mid: muted, positive: chart-2 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/grafana-dark-threshold-bands.md

@@ -0,0 +1,19 @@
+---
+id: grafana-dark-threshold-bands
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Grafana's threshold-configuration docs and internal theme style guide — dark-first monitoring canvas, colored threshold bands/lines"
+license: open
+feel: "dark-first monitoring wall where colored threshold bands do the alerting instead of the gridlines"
+---
+Use for always-on ops dashboards viewed for hours at a stretch. The default 3-step threshold model (calm base, escalation step, critical step) should carry the alert signal; gridlines stay dense but low-contrast on the dark surface so they never compete with a threshold color for attention.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 10px mono for numeric ticks", ticks: minimal }
+gridlines: { direction: both, stroke: border, style: dashed }
+tooltip: { surface: popover, numerals: mono, border: border }
+legend: { position: right, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: success, to: destructive }
+diverging: { negative: destructive, mid: warning, positive: success }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/material-rounded-explicit-label.md

@@ -0,0 +1,19 @@
+---
+id: material-rounded-explicit-label
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Material Design's data-visualization accessibility blog post and its M2 data-visualization communication guidance — rounded bar terminals, never color-alone encoding"
+license: open
+feel: "rounded bar terminals and always-explicit labels — meaning never depends on color perception alone"
+---
+Use for consumer-facing analytics in a Material-flavored product. Every legend swatch, axis, and mark gets a paired text label so meaning survives color-blindness or grayscale printing; series spacing runs tighter than a stock default for a friendlier, less clinical density. Good playful-SaaS anchor alongside the shadcn and gradient-area candidates.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 12px, always paired with a text label near the mark", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: card, numerals: sans, border: none }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: surface-raised, to: chart-1 }
+diverging: { negative: destructive, mid: muted, positive: success }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/nyt-ghost-grid-direct-label.md

@@ -0,0 +1,19 @@
+---
+id: nyt-ghost-grid-direct-label
+class: a7
+sourced: 2026-07-12
+source: "Distilled from storytellingwithdata's NYT-graphics analysis and an NYT-in-Keynote design breakdown — near-invisible gridlines, direct end-of-line labeling"
+license: open
+feel: "chrome so quiet it disappears — labels sit at the line's end instead of a legend box"
+---
+Use for narrative line/area charts where the story is the shape of the series, not the axis. Direct-label every series at its terminus rather than building a legend; keep at most two hero hues, everything else recedes to neutral so the reader never round-trips to a key.
+
+```yaml values
+axes: { stroke: border, labels: "muted-foreground, 10-11px sans, no bold weight", ticks: minimal }
+gridlines: { direction: horizontal, stroke: border, style: solid }
+tooltip: { surface: popover, numerals: sans, border: none }
+legend: { position: inline, style: line }
+categorical: [chart-1, chart-2, muted, muted, muted]
+sequential: { from: muted, to: chart-2 }
+diverging: { negative: chart-4, mid: border, positive: chart-2 }
+```

package/data/harnesses/apollo/skills/design/data/chart-styling/plot-currentcolor-inherit.md

@@ -0,0 +1,19 @@
+---
+id: plot-currentcolor-inherit
+class: a7
+sourced: 2026-07-12
+source: "Distilled from Observable Plot's axis and grid mark docs — currentColor inheritance, 0.1 default gridline opacity, tabular-nums ticks"
+license: open
+feel: "chrome that vanishes into whatever text color already surrounds it — the leanest possible embedded-chart default"
+---
+Use for charts embedded inline in prose, notebooks, or docs, where the chart should inherit the surrounding page's ink color rather than carry its own theme. The distinctive move: gridlines aren't a separate lighter token, they're the same ink at ~10% opacity — worth noting for identity packages that only expose discrete token roles rather than an opacity primitive.
+
+```yaml values
+axes: { stroke: foreground, labels: "foreground via currentColor inheritance, tabular-nums for quantitative ticks", ticks: on }
+gridlines: { direction: both, stroke: foreground, style: solid }
+tooltip: { surface: popover, numerals: mono, border: border }
+legend: { position: top, style: swatch }
+categorical: [chart-1, chart-2, chart-3, chart-4, chart-5]
+sequential: { from: muted, to: chart-1 }
+diverging: { negative: chart-4, mid: border, positive: chart-2 }
+```