@radicool/throughline 0.14.0 → 0.16.0

package/README.md

@@ -205,7 +205,8 @@ Future improvements and planned capabilities. Have a request? **[Open an issue](
 - **Expanded component starters** — a larger foundational kit out of the box.
 - **Richer status & auditing** — more from `/design-system-status`, including drift detection between Figma and code.
 - **Built-in accessibility checks** — automatic a11y validation when tokens and components are created, so modes can't be built with poor color contrast and components can't ship with accessibility gaps. Catches issues at creation time rather than in review.
-- **One library, many platforms** — support a single Figma token library that syncs to multiple platforms at once (React, Android, iOS), with a component lifecycle flexible enough to target per platform — every platform, or native-only components that don't need a React counterpart.
+- **Token fan-out to more platforms** — the DTCG token source is platform-neutral, and web targets are in daily use. Native targets are **validated per build, not assumed** — iOS/Swift is a curated adapter whose Style Dictionary configuration ships as tested code, and Android/Kotlin uses the same configuration through the Tier 2 protocol — `tokens:validate-output` checks generated native output against its source, because the stock transforms have been measured emitting wrong-but-compiling values.
+- **Native component code generation** — producing a SwiftUI view or a Compose composable the way Storybook components are produced for React. This does not exist yet; it is a separate, larger effort than token fan-out, and the two were previously described as one roadmap item.
 
 Versioning follows [Semantic Versioning](https://semver.org). The current version lives in [`.claude-plugin/plugin.json`](.claude-plugin/plugin.json); every release is recorded in [`CHANGELOG.md`](CHANGELOG.md).
 

package/adapters/codex/AGENTS.md

@@ -4,18 +4,18 @@ ThroughLine builds a design system end to end. Load the matching prompt for the
 
 ## ThroughLine skills
 
-- `component-builder` — Build a foundational set of Figma components — buttons, inputs, cards, badges, chips, modals, and more — as properly structured components with variant matrices (types, sizes, states) and icon/component/content slots, bound to the design system's tokens and styles. → load `prompts/component-builder.md`.
+- `component-builder` — Build Figma components — buttons, inputs, cards, badges, chips, modals, and more — with variant matrices (types, sizes, states) and icon/component/content slots bound to the design system's tokens and styles. → load `prompts/component-builder.md`.
 - `component-pipeline` — Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. → load `prompts/component-pipeline.md`.
-- `design-system-audit` — Measure a pre-existing design system before retrofitting it onto tokens — size the code-side color surface and inventory the existing Figma file with verified per-class reads, then compute how semantic the system already is so the retrofit is right-sized. → load `prompts/design-system-audit.md`.
+- `design-system-audit` — Measure a pre-existing design system before retrofitting it onto tokens, so the retrofit is right-sized. → load `prompts/design-system-audit.md`.
 - `figma-environment-setup` — Set up the local working folder and connect Codex to Figma so the design-system skills can read and write variables, styles, and components. → load `prompts/figma-environment-setup.md`.
-- `icon-system-builder` — Build an icon system in Figma — a dedicated "Icons" page populated with the user's chosen icon library (Lucide, Material, or custom SVGs) as well-named, scalable components — using the fastest, most-automated mechanism per library (for Lucide, batch-fetching the curated subset's official SVGs from the source repo and componentizing them hands-off; for Material, the official community file or importer plugin) rather than hand-generating icons or making the user copy components by hand. → load `prompts/icon-system-builder.md`.
-- `repository-builder` — Graduate the local design-system folder into a real monorepo — a pnpm + Turborepo workspace with packages for tokens and UI components and room for apps — and walk the user from a plain folder to local git to a GitHub remote with PRs and CI. → load `prompts/repository-builder.md`.
-- `retrofit-planner` — Orchestrate a full brownfield design-system retrofit end to end — audit, refine variables in place, rebind components, sync, capture a Chromatic baseline, retrofit the code with dual output, adopt existing documentation then fill gaps, then remove the old tokens only after a zero-reference grep — with a human confirmation gate between every phase. → load `prompts/retrofit-planner.md`.
-- `storybook-chromatic-builder` — Stand up Storybook in the monorepo, build code components matching the Figma design system (consuming the synced tokens and implementing the captured slot contracts), generate stories for every component, set up Chromatic for visual regression testing, and wire Code Connect when the user's Figma plan supports it. → load `prompts/storybook-chromatic-builder.md`.
-- `token-builder` — Build a two-tier (primitive + semantic) design token system as Figma variables — color ramps, spacing, type scale, radius, shadows — with light/dark or brand modes. → load `prompts/token-builder.md`.
-- `token-crosswalk-builder` — Build the brownfield token crosswalk — a persistent three-way map between each new token, the old Figma variable, and the old code identifier(s) — as crosswalk.json, then install the vetted validator/reverse-index scripts into the monorepo and wire the tokens:validate CI gate. → load `prompts/token-crosswalk-builder.md`.
-- `token-sheet-builder` — Build a beautiful, on-brand "Foundations" page in Figma that visually documents every variable collection and style — color ramps with swatches, the type scale, spacing, radius, shadows/elevations — with swatches live-bound to the actual variables where Figma allows. → load `prompts/token-sheet-builder.md`.
-- `token-sync-layer` — Sync Figma design variables into code-ready token files by extracting them to DTCG-format JSON, running them through Style Dictionary, and emitting framework-specific outputs via per-platform adapters (shadcn/Tailwind, MUI, vanilla CSS, iOS Swift, Android Kotlin, or custom). → load `prompts/token-sync-layer.md`.
+- `icon-system-builder` — Build an icon system in Figma — a dedicated "Icons" page of well-named, scalable icon components from Lucide, Tabler, Phosphor, Material, or custom SVGs. → load `prompts/icon-system-builder.md`.
+- `repository-builder` — Graduate the local design-system folder into a real monorepo — a pnpm + Turborepo workspace with packages for tokens and UI components — and walk the user from a plain folder to local git to a GitHub remote with PRs and CI. → load `prompts/repository-builder.md`.
+- `retrofit-planner` — Orchestrate a full brownfield design-system retrofit end to end — audit, refine, rebind, sync, baseline, code, docs, cleanup — with a human confirmation gate between every phase. → load `prompts/retrofit-planner.md`.
+- `storybook-chromatic-builder` — Stand up Storybook in the monorepo, build code components matching the Figma design system, generate stories for every component, set up Chromatic for visual regression testing, and wire Code Connect when the user's Figma plan supports it. → load `prompts/storybook-chromatic-builder.md`.
+- `token-builder` — Build a two-tier (primitive + semantic) design token system as Figma variables — color ramps, spacing, type scale, radius, shadows — with light/dark or brand modes, using one collection per category per tier. → load `prompts/token-builder.md`.
+- `token-crosswalk-builder` — Build the brownfield token crosswalk — a persistent three-way map between each new token, the old Figma variable, and the old code identifier(s) — then wire the tokens:validate CI gate. → load `prompts/token-crosswalk-builder.md`.
+- `token-sheet-builder` — Build an on-brand "Foundations" page in Figma that visually documents every variable collection and style — color ramps with swatches, the type scale, spacing, radius, shadows/elevations. → load `prompts/token-sheet-builder.md`.
+- `token-sync-layer` — Sync Figma design variables into code-ready token files via DTCG JSON and Style Dictionary, emitting framework-specific outputs (shadcn/Tailwind, MUI, vanilla CSS, iOS Swift, Android Kotlin, or custom), and set up the reusable "sync figma tokens" command. → load `prompts/token-sync-layer.md`.
 
 ## ThroughLine commands
 

package/adapters/codex/prompts/component-builder.md

@@ -236,7 +236,9 @@ Read `.throughline/references/component-doc-schema.md` for the exact JSON
 schema, the fingerprint algorithm, and the projection contract.
 
 **Run the generation pipeline (each layer only fills what it legitimately knows;
-stamp `provenance` per block):**
+stamp `provenance` per block):** all authored prose follows
+`.throughline/references/doc-writing-standard.md` — its plain
+reference register, not this skill's guide voice.
 
 0. **Ingest existing docs — brownfield only, runs first.** If docs already exist
    for this component (code JSDoc/MDX/README, or a populated Figma component
@@ -255,32 +257,74 @@ stamp `provenance` per block):**
    accessibility idiom to the target framework (the same field you read for variant
    vocabulary). Provenance `framework`.
 4. **Interview for the non-inferable.** Ask the user for brand/product-specific
-   do's & don'ts and intent. Provenance `user`. **Show the whole drafted record and
-   get explicit approval before writing anything** — layers 1–4 only fill blocks the
-   ingest step did not, and an `imported`/`user` block is never overwritten.
+   do's & don'ts and intent. Provenance `user`. Write the draft to
+   `design-system/docs/components/<Name>.doc.json`, run
+   `node .throughline/scripts/docs-lint.mjs design-system/docs/components/<Name>.doc.json`,
+   and fix the warnings it raises. Do not raise a separate confirmation for
+   a warning on an `imported`/`user` block: draft the rewrite and carry it
+   into the approval gate below, shown as before/after and labelled with the
+   block's provenance. **Show the whole drafted record and get explicit
+   approval before projecting it anywhere** (Figma description, doc card,
+   manifest) — one approval covers the whole record. Blocks the user did not
+   clear keep their existing text; blocks the user did clear are stamped
+   `imported+user` so a later run neither re-asks nor rewrites them.
 
 **Write the record and project it:**
 
 - Write `design-system/docs/components/<Name>.doc.json` (JSON; required fields
   `name`, `summary`, `description`).
 - **Figma component description.** Set the component's native `description` field
-  (via `figma_set_description`) to a compact markdown rendering — summary,
-  when-to-use/not, do's/don'ts, and the a11y summary — and append a fingerprint
-  marker line `<!-- tl:doc <fp> -->` (this is the surface Dev Mode and Code Connect
-  read).
-- **Doc card body.** Extend the existing doc card (name/short-desc/status/date, per
-  `.throughline/references/figma-component-standards.md`) with a usage body:
-  when-to-use, do's/don'ts, an a11y line, and a variant/state legend — all
-  token-bound (no hardcoded hex/px). Add a metadata text node named
-  `Doc Fingerprint` holding `<fp>`.
+  (via `figma_set_description`) from this exact template — this is the surface
+  Dev Mode and Code Connect read, and it must be reproducible byte-for-byte by
+  any agent from the same record:
+
+  ```
+  <summary>
+
+  **When to use**
+  - <whenToUse[n]>
+
+  **When not to use**
+  - <whenNotToUse[n]>
+
+  **Do**
+  - <dos[n]>
+
+  **Don't**
+  - <donts[n]>
+
+  **Accessibility**
+  - <accessibility.keyboard[n]>
+  - <accessibility.notes[n]>
+
+  <!-- tl:doc <fp> -->
+  ```
+
+  Rules: every line is a record string **verbatim** — no re-wording, no added
+  connectives, no sentences that appear nowhere in the record. A block whose
+  source array is empty is omitted along with its bold label. The **Accessibility**
+  label is omitted only when both `accessibility.keyboard` and `accessibility.notes`
+  are empty; when one is empty its bullets are simply absent and the label stays.
+  Sections are separated by exactly one blank line, and the fingerprint marker is
+  always last.
+- **Doc card body.** Render the card's `Usage` band with the canonical builder
+  snippet in `.throughline/references/doc-card-builder.md` (via
+  `figma_execute` with an explicit `timeout`, one card per call): fill the
+  RECORD/CANONICAL_FP slots, resolve the nine required semantic variables and
+  the `Body/Default` text style per that file's call contract, run it, and
+  verify the returned summary (`rowsRendered`, `blocksCreated`, `cardWidth`) —
+  not a screenshot. The builder creates the `Doc Fingerprint` node itself and
+  is the only thing that may build the usage body — never hand-assemble it.
 - Compute `<fp>` as the canonical fingerprint defined in the schema reference
   (sha256 of the projected record without `provenance`, first 16 hex chars).
 
 **Update the manifest (fields this skill owns):** set
 `components.meta[<Name>].doc` to `{ path, fingerprint: <fp>, surfaces: {
 figmaDescription: { src: <fp>, render: <hash of the description text> }, docCard: {
-src: <fp>, render: <hash of the card body content> } } }`. The code surfaces
-(`storybookMdx`) are added later by `storybook-chromatic-builder`.
+src: <fp>, render: <summary.renderHash>, renderer: <summary.rendererVersion> } } }`
+— the docCard entry is stamped from the builder's returned summary, never by
+re-reading the card. The code surfaces (`storybookMdx`) are added later by
+`storybook-chromatic-builder`.
 
 Run the standard doc-card visual-validation + post-build audit
 (`.throughline/references/figma-component-standards.md`) after enriching

package/adapters/codex/prompts/document-component.md

@@ -8,17 +8,49 @@ Ask which component to document (e.g. "Button"), then:
    the `component-builder` prompt's *Author the documentation record* step —
    ingest any existing docs first (brownfield), then infer → enrich (from
    `.throughline/references/component-doc-archetypes.md`) → specialize →
-   interview. The user approves the drafted record; `imported`/`user` blocks are
-   never overwritten.
+   interview. Authored prose follows
+   `.throughline/references/doc-writing-standard.md`. Set `updatedAt` to
+   today's date (ISO, `YYYY-MM-DD`) whenever the record is written or rewritten —
+   it is a projected field and the doc card's header renders it. Once the record is
+   written, run `node .throughline/scripts/docs-lint.mjs
+   design-system/docs/components/<Name>.doc.json` and fix its warnings. Do not
+   raise a separate confirmation for a warning on an `imported`/`user` block:
+   draft the rewrite and carry it into the approval gate below, shown as
+   before/after and labelled with the block's provenance, so one approval covers
+   the whole record. The user approves the drafted record before anything is
+   projected (Figma description, doc card, manifest). Blocks the user did not
+   clear keep their existing text; blocks the user did clear are stamped
+   `imported+user` so a later run neither re-asks nor rewrites them.
 2. **Project it.** Write `design-system/docs/components/<Name>.doc.json`, set the
-   Figma component `description`, enrich the doc card, and (if the repo/code side
-   exists) render MDX/JSDoc and run `docs:digest` per the
-   `storybook-chromatic-builder` render step.
-3. **Reconcile drift.** Run `docs:check`. For each drifted surface, offer a per-item
-   choice — **re-render** (canonical wins) or **pull-back** (fold the surface edit
-   into the record) — and land the result as a reviewable change. On a brownfield
-   component's first pass, adopt existing content (`provenance: imported`) rather
-   than overwriting it.
+   Figma component `description`, rebuild the doc card's `Usage` band with the
+   canonical builder (`.throughline/references/doc-card-builder.md` —
+   verify its returned summary and stamp `surfaces.docCard.{src,render,renderer}`
+   from it), and (if the repo/code side exists) render MDX/JSDoc and run
+   `docs:digest` per the `storybook-chromatic-builder` render step.
+3. **Reconcile drift.** Before trusting `docs:check`, confirm the repo's copy of
+   the doc scripts is current: compare `DOC_CARD_RENDERER_VERSION` in the repo's
+   `scripts/lib/doc-card-plan.mjs` against the same constant in
+   `.throughline/scripts/lib/doc-card-plan.mjs`. If the repo file is
+   missing, or its version is lower, `docs:check` is reading stale rules and its
+   "no drift" is meaningless — say so plainly, and offer to refresh the repo's
+   doc scripts from the plugin copy. Refresh the whole set and re-check the npm
+   registrations, both per **Documentation scripts — install as a set** in
+   `.throughline/scripts/README.md` — a refreshed file whose script was
+   never registered is the same failure in a new place. Run `docs:check` (with the
+   refreshed scripts, if any). For each drifted surface, offer a per-item
+   choice — **re-render** (canonical wins) or **pull-back**
+   (fold the surface edit into the record) — and land the result as a reviewable
+   change. On a brownfield component's first pass, adopt existing content
+   (`provenance: imported`) rather than overwriting it.
+   `docs:check` may also report `layout-upgrade-available` (informational, never
+   failing): the card's layout predates the current builder. Offer to re-render
+   the `Usage` band now — rebuild happens on this touch, never unprompted.
+4. **Close the flow.** Hand back in the four-beat guide voice from
+   `.throughline/references/guide-voice.md`: the outcome, what you set
+   aside and why, one recommended next step, and at most one light alternative.
+   Read existing state to name what is actually outstanding rather than guessing —
+   a component at `status: "draft"` with no code surface in `meta[name].doc.surfaces`
+   means the code side is deferred. Do not close with a grid of co-equal options.
 
 See `.throughline/references/component-doc-schema.md` for the record schema,
 fingerprint contract, and projection mapping. If a component was never built in

package/adapters/codex/prompts/storybook-chromatic-builder.md

@@ -27,15 +27,16 @@ system). Wire it to consume `packages/tokens` output so stories render with the
 real design tokens (import the generated CSS/theme). Checkpoint: confirm
 Storybook runs and shows the token-themed canvas.
 
-Install the documentation scripts alongside the token scripts (copy from the
-plugin's `scripts/` — `build-docs-digest.mjs`, `docs-check.mjs`, and
-`lib/doc-record.mjs` — into the repo and register npm scripts):
-
-- `"docs:digest": "node scripts/build-docs-digest.mjs"`
-- `"docs:check": "node scripts/docs-check.mjs"`
+Install the documentation scripts alongside the token scripts: copy the five
+files and register the three npm scripts listed under **Documentation scripts —
+install as a set** in `.throughline/scripts/README.md`. That table is
+the single source of truth for what a consuming repo gets; do not restate the
+list here.
 
 These are the documentation analog of `tokens:validate`; see
-`.throughline/scripts/README.md`.
+`.throughline/scripts/README.md`. This copy is setup, not a forever-fork:
+`/document-component` re-checks these files' freshness on every run and refreshes
+them from the plugin when it has moved on.
 
 **pnpm build-script allowlist (first-run gotcha).** On pnpm workspaces, the
 `@storybook/react-vite` install pulls `esbuild`, whose postinstall is blocked by
@@ -159,6 +160,43 @@ Configure Chromatic to snapshot everything (do **not** set `onlyChanged`), and
 verify a token-only PR re-snapshots all stories — they should flip orange against
 the green baseline.
 
+### Usage & cost guardrails
+
+The full-snapshot default above is the right call for catching regressions, and it
+is also the **maximum-usage** choice: every story, every run. Chromatic bills per
+snapshot, so name this cost shape to the user when you set Chromatic up, and put the
+guardrails in *before* the first big token PR, not after the bill.
+
+What Chromatic actually offers (re-verify the live numbers at
+`chromatic.com/pricing` — they drift):
+
+- **Free plan (~5,000 snapshots/month):** testing **auto-pauses** when the ceiling
+  is hit. No surprise bill, but visual-regression coverage silently *stops* until
+  the monthly reset or an upgrade. For a full-suite design system that ceiling
+  arrives fast — treat a *paused* build as a red flag, not a passing one.
+- **Paid plans: no hard spending cap.** Overage snapshots auto-bill at month-end.
+  The only native guardrail is **usage alerts** — an email when consumption crosses
+  a threshold you set (e.g. 90%).
+
+The math, so the user sizes the plan honestly: **snapshots ≈ stories × modes ×
+builds.** One `/sync-figma-tokens` PR re-snapshots the *entire* suite × every mode
+in a single build — e.g. 40 components × 2 modes = 80 snapshots per build, and a
+handful of token PRs plus daily `main` builds clears a free tier in a week.
+
+So the guardrails, all of them user-controlled (Chromatic will not cap you):
+
+1. **Set usage alerts** at ~80% on a paid plan so the bill cannot sneak up. On the
+   free plan, make sure the user knows testing *pauses* at the ceiling.
+2. **Scope the CI trigger.** Run Chromatic on **pull requests and `main` only** —
+   never on every branch push — path-filter out docs-only changes, and keep it to
+   one Chromatic build per commit (no duplicate runs).
+3. **Size the plan to the math** before the first token PR. A large story count is
+   also the *only* reason to revisit TurboSnap (see above), and even then treat
+   every token change as a full run.
+
+Do not silently pick a plan or leave the trigger wide open. Name the tradeoff and
+let the user choose with the numbers in front of them.
+
 ## Step 5 — Code Connect (plan-gated, skip gracefully)
 
 Code Connect ties Figma components to their code counterparts so Figma's dev
@@ -234,8 +272,10 @@ the `figma_execute` scripting gotchas — `getNodeByIdAsync` and an explicit
   re-render the affected surfaces so `docs:check` stays green.
 - If Figma is connected (per `figma.mechanism`), open the component's doc card and
   update the `Status Label` text to `stable`, re-bind the `Status` chip fill to
-  the **success** semantic color variable (mode-aware, not a hardcoded hex), and
-  set `Last Updated` to today's date — then screenshot to confirm the chip
+  the **success** semantic color variable (mode-aware, not a hardcoded hex), then
+  re-run the canonical doc-card builder against the same card to refresh the
+  header date from the `record.updatedAt` already set above (it locates the date
+  node under either header shape) — then screenshot to confirm the chip
   recolored and the date changed.
 - If Figma isn't connected, still update the manifest and tell the user the card
   will reconcile next Figma session (or offer to reconnect and fix it now).
@@ -296,6 +336,9 @@ that may not exist.
 - Never rely on TurboSnap (`onlyChanged: true`) for a token-driven design system
   — its incremental model keeps missing global token changes. Default to full
   snapshots (every story, every run); revisit only at large story counts.
+- Never leave Chromatic's cost shape unspoken or the CI trigger wide open — there
+  is no hard spend cap on paid plans, so set usage alerts, run it on PRs + `main`
+  only, and size the plan to stories × modes × builds before the first token PR.
 - Never use the sequential model for story-gen — parallelize via subagents.
 - Never capture the Chromatic baseline *after* a code retrofit — baseline before, so
   intended drift-fixes are distinguishable from regressions.

package/adapters/codex/prompts/token-crosswalk-builder.md

@@ -65,6 +65,8 @@ Copy these from `.throughline/scripts/` into the user's repo **verbatim**
 (they are zero-dependency and version with the user's repo so their CI can run them):
 
 - `lib/crosswalk.mjs` → `packages/tokens/scripts/lib/crosswalk.mjs`
+- `lib/dtcg.mjs` → `packages/tokens/scripts/lib/dtcg.mjs` (required by
+  `validate-crosswalk.mjs` — copying the validator without it breaks the gate at import)
 - `validate-crosswalk.mjs` → `packages/tokens/scripts/validate-crosswalk.mjs`
 - `build-reverse-index.mjs` → `packages/tokens/scripts/build-reverse-index.mjs`
 - `guard-token-removal.mjs` → `packages/tokens/scripts/guard-token-removal.mjs`

package/adapters/codex/prompts/token-sync-layer.md

@@ -44,8 +44,8 @@ Ask which platform(s) the user is building for. Read
 - **Curated (Tier 1):** `shadcn`, `tailwind`, `mui`, `vanilla-css`, `ios-swift`.
   Vetted presets — high confidence.
 - **Generated (Tier 2):** any other framework (Ant Design, Chakra, HeroUI,
-  Android/Kotlin, Flutter, etc.). The skill generates an adapter and verifies it
-  against a real component before trusting it.
+  Android/Kotlin, Flutter, etc.). The skill generates an adapter and
+  verifies it against a real component before trusting it.
 
 **Always tell the user which tier they're on.** If they name a curated one, say
 it'll be solid. If they name anything else, be honest: "That's not one I have a
@@ -139,11 +139,53 @@ register the platform, transform group, format, and `outputReferences`
 flattens). Web adapters emit `:root`/`.dark` (or `[data-theme]`); the shadcn
 adapter also emits a Tailwind preset.
 
+**Native targets import the shipped configuration; they do not transcribe it.**
+Copy `.throughline/scripts/lib/sd-native.mjs` into
+`packages/tokens/scripts/lib/` (see Step 4) and call it. The stock `ios-swift`
+and `compose` transform groups emit every `px`-authored dimension at ×16 its
+value — valid, compiling, silently wrong — and mishandle `color-mix()` and
+dual-node DTCG the same way. Never build a native platform from a stock
+`transformGroup`.
+
+```js
+import StyleDictionary from 'style-dictionary';
+import { registerNativeTransforms, nativePlatform, nativeSources }
+  from './scripts/lib/sd-native.mjs';
+
+registerNativeTransforms(StyleDictionary);
+
+for (const mode of MODES) {                     // e.g. ['light', 'dark']
+  const sd = new StyleDictionary({
+    source: nativeSources(sourcesFor(mode)),    // guards against a mode collapse
+    preprocessors: ['dtcg/resolve-dual-node'],
+    platforms: {
+      ios: nativePlatform({ platform: 'ios-swift', buildPath: `ios/${mode}/` }),
+      // android also requires packageName:
+      // android: nativePlatform({ platform: 'android-kotlin',
+      //   buildPath: `android/${mode}/`, packageName: 'com.example.tokens' }),
+    },
+  });
+  await sd.buildAllPlatforms();
+}
+```
+
+**One build per mode combination, and never a glob.** Style Dictionary dedupes
+by dot-path, so a single build over the whole token directory collapses light
+and dark into whichever file sorted last, silently dropping a mode. Passing each
+mode's sources through `nativeSources` turns that into a thrown error naming the
+colliding paths. The `dtcg/resolve-dual-node` preprocessor throws too, on its
+own collision: a dual node's hoisted child renamed to a camel-joined name that
+an existing sibling or an earlier hoist in the same pass already has. Then run
+`tokens:validate-output` against each generated file with that same source
+list. See `.throughline/references/native-adapter-config.md`.
+
 **Execution model — subagent dispatch with model routing.** Generating each
 platform's output is independent and verifiable. If your host supports subagent
 dispatch, dispatch **one `code-executor` per adapter** — each produces its
-platform's files and verifies them (the config builds, the expected files
-appear, references resolve for web / flatten for native) — then a **`reviewer`**
+platform's files and verifies them (for web: the config builds, the expected
+files appear, references resolve; for native: `tokens:validate-output` passes —
+"the config builds" is not verification, it is the condition under which all
+four known native failure modes ship silently) — then a **`reviewer`**
 to check each before combining. Choose each subagent's model from its role tier
 per `.throughline/references/agent-routing.md` (`code-executor` → fast,
 `reviewer` → balanced), and only dispatch once each adapter's spec is complete
@@ -159,6 +201,24 @@ as **build artifacts** — regenerated every sync, never hand-edited. Wire
 `packages/tokens/package.json` to export them so the UI package, Storybook, and
 any future app consume them.
 
+**Install the native token toolkit — all four files, as a set.** Copy
+`.throughline/scripts/validate-token-output.mjs` into
+`packages/tokens/scripts/`, and
+`.throughline/scripts/lib/dtcg.mjs`,
+`.throughline/scripts/lib/native-literal.mjs`, and
+`.throughline/scripts/lib/sd-native.mjs` into
+`packages/tokens/scripts/lib/`. `sd-native.mjs` and the validator both import
+`dtcg.mjs` and `native-literal.mjs`, so copying any of them without the others
+breaks at import. Then register the gate so it stays live on every future sync:
+
+```json
+"tokens:validate-output": "node scripts/validate-token-output.mjs --min-match 1"
+```
+
+Invoke it once per native output file, passing the same `--source` list that
+file's build used. `--min-match 1` is what makes it a gate: the flag defaults to
+`0.5`, so without it a 60% match rate exits `0`.
+
 ## Step 4.5 — Icon code sync (install check + custom SVGR)
 
 Icons reach code differently from tokens, so handle them here if the system has

package/adapters/cursor/.cursor/commands/document-component.md

@@ -8,17 +8,49 @@ Ask which component to document (e.g. "Button"), then:
    the `component-builder` rule's *Author the documentation record* step —
    ingest any existing docs first (brownfield), then infer → enrich (from
    `.throughline/references/component-doc-archetypes.md`) → specialize →
-   interview. The user approves the drafted record; `imported`/`user` blocks are
-   never overwritten.
+   interview. Authored prose follows
+   `.throughline/references/doc-writing-standard.md`. Set `updatedAt` to
+   today's date (ISO, `YYYY-MM-DD`) whenever the record is written or rewritten —
+   it is a projected field and the doc card's header renders it. Once the record is
+   written, run `node .throughline/scripts/docs-lint.mjs
+   design-system/docs/components/<Name>.doc.json` and fix its warnings. Do not
+   raise a separate confirmation for a warning on an `imported`/`user` block:
+   draft the rewrite and carry it into the approval gate below, shown as
+   before/after and labelled with the block's provenance, so one approval covers
+   the whole record. The user approves the drafted record before anything is
+   projected (Figma description, doc card, manifest). Blocks the user did not
+   clear keep their existing text; blocks the user did clear are stamped
+   `imported+user` so a later run neither re-asks nor rewrites them.
 2. **Project it.** Write `design-system/docs/components/<Name>.doc.json`, set the
-   Figma component `description`, enrich the doc card, and (if the repo/code side
-   exists) render MDX/JSDoc and run `docs:digest` per the
-   `storybook-chromatic-builder` render step.
-3. **Reconcile drift.** Run `docs:check`. For each drifted surface, offer a per-item
-   choice — **re-render** (canonical wins) or **pull-back** (fold the surface edit
-   into the record) — and land the result as a reviewable change. On a brownfield
-   component's first pass, adopt existing content (`provenance: imported`) rather
-   than overwriting it.
+   Figma component `description`, rebuild the doc card's `Usage` band with the
+   canonical builder (`.throughline/references/doc-card-builder.md` —
+   verify its returned summary and stamp `surfaces.docCard.{src,render,renderer}`
+   from it), and (if the repo/code side exists) render MDX/JSDoc and run
+   `docs:digest` per the `storybook-chromatic-builder` render step.
+3. **Reconcile drift.** Before trusting `docs:check`, confirm the repo's copy of
+   the doc scripts is current: compare `DOC_CARD_RENDERER_VERSION` in the repo's
+   `scripts/lib/doc-card-plan.mjs` against the same constant in
+   `.throughline/scripts/lib/doc-card-plan.mjs`. If the repo file is
+   missing, or its version is lower, `docs:check` is reading stale rules and its
+   "no drift" is meaningless — say so plainly, and offer to refresh the repo's
+   doc scripts from the plugin copy. Refresh the whole set and re-check the npm
+   registrations, both per **Documentation scripts — install as a set** in
+   `.throughline/scripts/README.md` — a refreshed file whose script was
+   never registered is the same failure in a new place. Run `docs:check` (with the
+   refreshed scripts, if any). For each drifted surface, offer a per-item
+   choice — **re-render** (canonical wins) or **pull-back**
+   (fold the surface edit into the record) — and land the result as a reviewable
+   change. On a brownfield component's first pass, adopt existing content
+   (`provenance: imported`) rather than overwriting it.
+   `docs:check` may also report `layout-upgrade-available` (informational, never
+   failing): the card's layout predates the current builder. Offer to re-render
+   the `Usage` band now — rebuild happens on this touch, never unprompted.
+4. **Close the flow.** Hand back in the four-beat guide voice from
+   `.throughline/references/guide-voice.md`: the outcome, what you set
+   aside and why, one recommended next step, and at most one light alternative.
+   Read existing state to name what is actually outstanding rather than guessing —
+   a component at `status: "draft"` with no code surface in `meta[name].doc.surfaces`
+   means the code side is deferred. Do not close with a grid of co-equal options.
 
 See `.throughline/references/component-doc-schema.md` for the record schema,
 fingerprint contract, and projection mapping. If a component was never built in

package/adapters/cursor/.cursor/rules/component-builder.mdc

@@ -1,5 +1,5 @@
 ---
-description: "Build a foundational set of Figma components — buttons, inputs, cards, badges, chips, modals, and more — as properly structured components with variant matrices (types, sizes, states) and icon/component/content slots, bound to the design system's tokens and styles. Use this when the user wants to create components, build a component library, make buttons/inputs/cards/etc. in Figma, or set up the foundational UI kit. Also trigger after tokens and icons exist, when the user is ready to build actual UI components. Make sure to use this whenever someone wants real, variant-rich components in their Figma design system, not just tokens."
+description: "Build Figma components — buttons, inputs, cards, badges, chips, modals, and more — with variant matrices (types, sizes, states) and icon/component/content slots bound to the design system's tokens and styles. Use this when the user wants to create components, build a component library, make buttons/inputs/cards/etc. in Figma, or set up the foundational UI kit. Also trigger after tokens and icons exist, when the user is ready to build actual UI components."
 alwaysApply: false
 ---
 # Component builder
@@ -240,7 +240,9 @@ Read `.throughline/references/component-doc-schema.md` for the exact JSON
 schema, the fingerprint algorithm, and the projection contract.
 
 **Run the generation pipeline (each layer only fills what it legitimately knows;
-stamp `provenance` per block):**
+stamp `provenance` per block):** all authored prose follows
+`.throughline/references/doc-writing-standard.md` — its plain
+reference register, not this skill's guide voice.
 
 0. **Ingest existing docs — brownfield only, runs first.** If docs already exist
    for this component (code JSDoc/MDX/README, or a populated Figma component
@@ -259,32 +261,74 @@ stamp `provenance` per block):**
    accessibility idiom to the target framework (the same field you read for variant
    vocabulary). Provenance `framework`.
 4. **Interview for the non-inferable.** Ask the user for brand/product-specific
-   do's & don'ts and intent. Provenance `user`. **Show the whole drafted record and
-   get explicit approval before writing anything** — layers 1–4 only fill blocks the
-   ingest step did not, and an `imported`/`user` block is never overwritten.
+   do's & don'ts and intent. Provenance `user`. Write the draft to
+   `design-system/docs/components/<Name>.doc.json`, run
+   `node .throughline/scripts/docs-lint.mjs design-system/docs/components/<Name>.doc.json`,
+   and fix the warnings it raises. Do not raise a separate confirmation for
+   a warning on an `imported`/`user` block: draft the rewrite and carry it
+   into the approval gate below, shown as before/after and labelled with the
+   block's provenance. **Show the whole drafted record and get explicit
+   approval before projecting it anywhere** (Figma description, doc card,
+   manifest) — one approval covers the whole record. Blocks the user did not
+   clear keep their existing text; blocks the user did clear are stamped
+   `imported+user` so a later run neither re-asks nor rewrites them.
 
 **Write the record and project it:**
 
 - Write `design-system/docs/components/<Name>.doc.json` (JSON; required fields
   `name`, `summary`, `description`).
 - **Figma component description.** Set the component's native `description` field
-  (via `figma_set_description`) to a compact markdown rendering — summary,
-  when-to-use/not, do's/don'ts, and the a11y summary — and append a fingerprint
-  marker line `<!-- tl:doc <fp> -->` (this is the surface Dev Mode and Code Connect
-  read).
-- **Doc card body.** Extend the existing doc card (name/short-desc/status/date, per
-  `.throughline/references/figma-component-standards.md`) with a usage body:
-  when-to-use, do's/don'ts, an a11y line, and a variant/state legend — all
-  token-bound (no hardcoded hex/px). Add a metadata text node named
-  `Doc Fingerprint` holding `<fp>`.
+  (via `figma_set_description`) from this exact template — this is the surface
+  Dev Mode and Code Connect read, and it must be reproducible byte-for-byte by
+  any agent from the same record:
+
+  ```
+  <summary>
+
+  **When to use**
+  - <whenToUse[n]>
+
+  **When not to use**
+  - <whenNotToUse[n]>
+
+  **Do**
+  - <dos[n]>
+
+  **Don't**
+  - <donts[n]>
+
+  **Accessibility**
+  - <accessibility.keyboard[n]>
+  - <accessibility.notes[n]>
+
+  <!-- tl:doc <fp> -->
+  ```
+
+  Rules: every line is a record string **verbatim** — no re-wording, no added
+  connectives, no sentences that appear nowhere in the record. A block whose
+  source array is empty is omitted along with its bold label. The **Accessibility**
+  label is omitted only when both `accessibility.keyboard` and `accessibility.notes`
+  are empty; when one is empty its bullets are simply absent and the label stays.
+  Sections are separated by exactly one blank line, and the fingerprint marker is
+  always last.
+- **Doc card body.** Render the card's `Usage` band with the canonical builder
+  snippet in `.throughline/references/doc-card-builder.md` (via
+  `figma_execute` with an explicit `timeout`, one card per call): fill the
+  RECORD/CANONICAL_FP slots, resolve the nine required semantic variables and
+  the `Body/Default` text style per that file's call contract, run it, and
+  verify the returned summary (`rowsRendered`, `blocksCreated`, `cardWidth`) —
+  not a screenshot. The builder creates the `Doc Fingerprint` node itself and
+  is the only thing that may build the usage body — never hand-assemble it.
 - Compute `<fp>` as the canonical fingerprint defined in the schema reference
   (sha256 of the projected record without `provenance`, first 16 hex chars).
 
 **Update the manifest (fields this skill owns):** set
 `components.meta[<Name>].doc` to `{ path, fingerprint: <fp>, surfaces: {
 figmaDescription: { src: <fp>, render: <hash of the description text> }, docCard: {
-src: <fp>, render: <hash of the card body content> } } }`. The code surfaces
-(`storybookMdx`) are added later by `storybook-chromatic-builder`.
+src: <fp>, render: <summary.renderHash>, renderer: <summary.rendererVersion> } } }`
+— the docCard entry is stamped from the builder's returned summary, never by
+re-reading the card. The code surfaces (`storybookMdx`) are added later by
+`storybook-chromatic-builder`.
 
 Run the standard doc-card visual-validation + post-build audit
 (`.throughline/references/figma-component-standards.md`) after enriching

package/adapters/cursor/.cursor/rules/component-pipeline.mdc

@@ -1,5 +1,5 @@
 ---
-description: "Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. This is an orchestrator that sequences the component-builder, token-sync-layer, and storybook-chromatic-builder skills with a human confirmation between each stage. Use this when the user wants to add a new component to an existing design system, ship a component end-to-end, or run the full new-component flow. Also trigger on \"/new-component\" or when someone says they want one component built all the way through to code. Make sure to use this when the design system foundations already exist and the user wants to add one more component through the whole pipeline."
+description: "Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. Orchestrates component-builder, token-sync-layer, and storybook-chromatic-builder with a human confirmation between each stage. Use this when the user wants to add a new component to an existing design system, ship a component end-to-end, or run the full new-component flow. Also trigger on \"/new-component\" or when someone wants one component built all the way through to code."
 alwaysApply: false
 ---
 # Component pipeline (orchestrator)

package/adapters/cursor/.cursor/rules/design-system-audit.mdc

@@ -1,5 +1,5 @@
 ---
-description: "Measure a pre-existing design system before retrofitting it onto tokens — size the code-side color surface and inventory the existing Figma file with verified per-class reads, then compute how semantic the system already is so the retrofit is right-sized. This is a PROCESS skill and the brownfield front door. Use this when retrofitting a design system onto a mature codebase and an already-populated Figma file, when the user wants to audit an existing system, size a retrofit, count existing tokens/variables/bindings, or figure out how much work a migration is. Also trigger when figma-environment-setup detects a brownfield situation (existing repo or populated Figma file), before any building. Make sure to use this whenever someone is converging two mature, drifted artifacts rather than building greenfield."
+description: "Measure a pre-existing design system before retrofitting it onto tokens, so the retrofit is right-sized. This is a PROCESS skill and the brownfield front door. Use this when retrofitting a design system onto a mature codebase and an already-populated Figma file, when the user wants to audit an existing system, size a retrofit, count existing tokens/variables/bindings, or figure out how much work a migration is. Also trigger when figma-environment-setup detects a brownfield situation (existing repo or populated Figma file), before any building."
 alwaysApply: false
 ---
 # Design-system audit (brownfield front door)

package/adapters/cursor/.cursor/rules/figma-environment-setup.mdc

@@ -1,5 +1,5 @@
 ---
-description: "Set up the local working folder and connect Cursor to Figma so the design-system skills can read and write variables, styles, and components. This is a SETUP/PROCESS skill — it must run BEFORE brainstorming, not after it, because there is nothing to brainstorm until the environment exists. Invoke this skill immediately when the user wants to start, set up, or begin building a design system — phrases like 'let's setup my design system', 'let's get started', 'connect Figma', or 'build my design system' should all trigger this skill first, ahead of brainstorming. Also trigger when the user wants to fix a broken Figma connection, or mentions the Figma Console MCP, the desktop bridge plugin, or a Figma access token. It is the required foundation everything else depends on — always run it before any other design-system skill."
+description: "Set up the local working folder and connect Cursor to Figma so the design-system skills can read and write variables, styles, and components. Run this BEFORE brainstorming and before any other design-system skill. Invoke it immediately when the user wants to start, set up, or begin building a design system — phrases like 'let's setup my design system', 'let's get started', 'connect Figma', or 'build my design system' should all trigger this skill first, ahead of brainstorming. Also trigger when the user wants to fix a broken Figma connection, or mentions the Figma Console MCP, the desktop bridge plugin, or a Figma access token."
 alwaysApply: false
 ---
 # Figma environment setup