@motion-proto/live-tokens 0.55.0 → 0.56.1

package/.claude/skills/live-tokens-generate-theme/SKILL.md

@@ -1,22 +1,24 @@
 ---
 name: live-tokens-generate-theme
-description: Generate a complete live-tokens color theme from a natural-language mood brief by choosing 10 OKLCH seeds and running the packaged generator, which enforces AA contrast automatically. Use when the user asks for a color theme, color scheme, or palette by mood, vibe, season, holiday, or hue — make me a bright and cheerful theme, give me a dark and moody night theme, a St. Patrick's Day theme with green and gold, a Christmas theme, a red-based theme, make it warmer, more contrast, a calmer palette. Changes color assignments only, never fonts. Not for editing a single token (use the editor) or building pages (see live-tokens-build-page).
+description: Generate a complete live-tokens theme (color, type, and geometry) from a natural-language mood brief. Chooses 10 OKLCH seeds and runs the packaged generator, which enforces AA contrast, then carries the same brief into a font pairing and a geometry through the sibling skills. Use whenever the user asks for a theme, a look, a vibe, a brand feel, a color scheme, or a palette, by mood, season, holiday, or hue, even if they only mention color: make me a bright and cheerful theme, a dark moody night theme, a St. Patrick's Day theme in green and gold, a Christmas look, something red-based, warmer, more contrast, calmer. Not for a single token (use the editor), for type alone (live-tokens-pair-fonts), or for geometry alone (live-tokens-adjust-geometry).
 ---
 
 # Generating a theme from a mood brief
 
-You translate the brief into 10 OKLCH seed colors plus a scheme; the CLI does everything else (curve assembly, AA contrast enforcement with auto-correction, writing the theme, opening it). Never hand-author theme JSON and never edit the data tree directly. Seeds in, valid theme out.
+A theme is three decisions made from one brief: color, type, and geometry. This skill owns the color decision directly and delegates the other two, so the whole look comes from the same reading of the brief. Never hand-author theme JSON and never edit the data tree directly.
 
 ## Workflow
 
-1. Translate the brief into a seed file using the framework below. Write it to a temp path (not the project tree), e.g. `/tmp/theme-brief.json`.
-2. Run `npx live-tokens generate-theme /tmp/theme-brief.json`. It writes `themes/<slug>.json`, opens that theme, and prints a contrast report card. Exit 1 means unmet floors.
-3. Read the report. Auto-corrections are fine (the engine adjusted text curves to hit the floors). Unmet floors mean the seeds themselves are unworkable; each failure line says which seed to adjust (usually raise the seed's lightness or cut chroma). Fix the brief and re-run — same name, same file, it overwrites.
-4. Tell the user to look at the running app. Offer refinements ("warmer", "more contrast", "less saturated") as seed adjustments to the same brief, re-run.
+1. Read the brief once and name its voice in a sentence: the mood, the hue family, the scheme, and the type and geometry that mood implies. Everything below keys off that sentence.
+2. Translate the brief into a seed file using the framework below. Write it to `scratch/theme-brief.json`.
+3. Run `npx live-tokens generate-theme scratch/theme-brief.json`. It writes `themes/<slug>.json`, opens that theme, and prints a contrast report. Auto-corrections are fine. Unmet floors (exit 1) mean the seeds themselves are unworkable; each failure line names the seed to change, usually by raising its lightness or cutting its chroma. Fix the brief and re-run; the same name overwrites. Regeneration replaces that theme's whole color state, including palette edits made in the editor since the last run, so say so once when iterating.
+4. Invoke **live-tokens-pair-fonts** with the same voice. Skip only when the user asked for colors specifically and said to leave the type alone.
+5. Invoke **live-tokens-adjust-geometry** with the geometry the voice implies (table below). Skip when the voice implies nothing about geometry.
+6. Tell the user to look at the running app, and that type and geometry sit in the unsaved buffer until they save the open theme. Offer refinements as edits to the same brief.
 
-Flags: `--dry-run` prints the report without writing; `--no-activate` writes the theme without opening it. Opening a theme never changes what the site ships: only Adopt, in the editor, does that.
+Order matters only for safety, and the order above is safe: the color generator carries the live buffers forward into the new theme file, so a color re-roll after fonts and geometry keeps both.
 
-Warn once per session when iterating: regeneration replaces the whole color state of that theme, including any manual palette tweaks made in the editor after the last generation.
+Flags: `--dry-run` prints the report without writing; `--no-activate` writes without opening. Opening a theme never changes what the site ships. Only Adopt, in the editor, does that.
 
 ## The brief
 
@@ -28,140 +30,119 @@ Warn once per session when iterating: regeneration replaces the whole color stat
     "Brand":     { "l": 0.62, "c": 0.17, "h": 145 },
     "Accent":    { "l": 0.80, "c": 0.15, "h": 95 },
     "Special":   { "l": 0.60, "c": 0.19, "h": 300 },
-    "Canvas":    { "l": 0.97, "c": 0.01, "h": 120 },
+    "Canvas":    { "l": 0.93, "c": 0.04, "h": 120 },
     "Neutral":   { "l": 0.55, "c": 0.012, "h": 140 },
     "Alternate": { "l": 0.58, "c": 0.009, "h": 60 },
     "Info":      { "l": 0.60, "c": 0.15, "h": 255 },
     "Success":   { "l": 0.60, "c": 0.16, "h": 150 },
     "Warning":   { "l": 0.75, "c": 0.15, "h": 85 },
     "Danger":    { "l": 0.58, "c": 0.20, "h": 25 }
-  },
-  "harmony": { "mode": "analogous" }
+  }
 }
 ```
 
-All 10 seeds are required. A seed may also be a `"#rrggbb"` hex string (converted for you). OKLCH: `l` 0–1 perceptual lightness, `c` chroma (0 grey, ~0.37 max), `h` hue degrees. `name` becomes the theme file slug, tidied to lowercase with hyphens and stripped of any leading underscore (those names are reserved); `"default"` is refused (protected package theme). `harmony` is an optional record of your reasoning; the seeds are ground truth. `canvasGradient` is an optional boolean — see "The canvas sky" below before setting it.
+All 10 seeds are required; a seed may also be a `"#rrggbb"` string. OKLCH: `l` is 0 to 1 lightness, `c` is chroma (0 grey, about 0.37 max), `h` is hue in degrees. `name` becomes the file slug; `"default"` is refused. `canvasGradient` is an optional boolean, see below.
 
-Roles: **Brand** is the dominant chromatic identity; **Accent** the supporting color; **Special** the rare expressive tertiary; **Canvas** is the page background verbatim; **Neutral** drives all neutral surfaces and body text; **Alternate** is the second near-grey family; the four status colors are conventional signals.
+Roles: **Brand** is the dominant chromatic identity; **Accent** the supporting color; **Special** the rare expressive tertiary; **Canvas** is the page background verbatim; **Neutral** drives neutral surfaces and body text; **Alternate** is the second near-grey family; the four statuses are conventional signals.
 
 ## Chroma budget: color is inversely proportional to area
 
 | Tier | Palettes | Chroma |
 |---|---|---|
-| Ground (~60% of every screen) | Canvas, Neutral, Alternate | C 0.005–0.03 |
-| Dominant chromatic (~30%) | Brand | C 0.10–0.20 |
-| Garnish (~10%) | Accent, Special | may exceed Brand; at most one at full saturation |
-| Conditional | Info, Success, Warning, Danger | C 0.12–0.19 |
+| Ground (about 60% of every screen) | Canvas, Neutral, Alternate | C 0.005 to 0.03 |
+| Dominant chromatic (about 30%) | Brand | C 0.10 to 0.20 |
+| Garnish (about 10%) | Accent, Special | may exceed Brand; at most one at full saturation |
+| Conditional | Info, Success, Warning, Danger | C 0.12 to 0.19 |
 
-A good theme reads as 3–4 hue families on screen, never 10. Neutral and Alternate stay near-grey, tinted toward the theme (Neutral near Brand's hue; Alternate offset +15–60° or as a warm/cool counterpoint), never pure C = 0.
+A good theme reads as 3 or 4 hue families on screen, never 10. Neutral and Alternate stay near-grey but tinted toward the theme (Neutral near Brand's hue; Alternate offset 15 to 60 degrees, or a warm/cool counterpoint), never pure C = 0.
 
 ## Per-role bands
 
 | Seed | Light scheme | Dark scheme | Hue |
 |---|---|---|---|
-| Canvas | L 0.92–0.98, C 0.02–0.06 (see below) | L 0.15–0.28, C 0.01–0.05 | brand hue or its harmony slot |
-| Neutral / Alternate | L ≈ 0.55, C 0.008–0.02 | same | see chroma budget |
-| Brand | L 0.45–0.62, C 0.12–0.20 | L 0.70–0.83, C cut by ~⅓ | the brief's identity hue |
-| Accent | harmony slot, or ΔL ≥ 0.25 from Brand when the mode collapses hue distance | lighten/desaturate like Brand | harmony slot |
-| Special | most expressive; default = Brand hue +60° at ~65% of Brand's C | same transform | harmony slot |
-| Info | shared status L (0.55–0.65 light) | lighten like Brand | H 230–260 |
-| Success | shared status L | same | H 140–155 |
-| Warning | L ≥ 0.75 (vivid yellow must be light) | same | H 70–90 |
-| Danger | shared status L, C 0.15–0.20 | same | H 20–30 |
-
-- **The canvas carries the theme's identity — commit to it.** The page background is the largest area on screen and the strongest differentiator between themes; a timid canvas makes every theme look the same. Below C ≈ 0.015 at L ≥ 0.95 a tint is imperceptible: that near-white is a deliberate choice for clean/minimal briefs, never the default. Three escalating levels of commitment, matched to the brief:
-  1. *Tinted paper* (most UI briefs): a tint you can actually see — C 0.02–0.06, dropping L to 0.92–0.95 where the hue needs room.
-  2. *Colored ground* (expressive briefs): L 0.85–0.92 at C 0.05–0.10 — the page is unmistakably mint, parchment, sky.
-  3. *Full-color ground* (holiday and statement briefs): the canvas IS the theme color — a red Christmas page (0.40–0.48, C 0.12–0.16, H 25) with green and gold on it, an orange Halloween page. Keep canvas L ≤ ~0.48 or ≥ ~0.85 so text has somewhere to go; the contrast gate enforces legibility either way. A saturated background is a legitimate choice, not something to correct.
-- **Gamut note for light canvases**: blue tints cap very low at high L (H 264 at L 0.95 barely reaches C 0.03) — for a blue-leaning canvas, lower L instead of fighting the ceiling; yellow/green/cream hues tint generously at high L.
-- **When generating a set of themes, make the canvases pairwise distinct.** Any two Canvas seeds should differ noticeably in hue (at visible chroma) or in L. Two light themes both near (0.97, 0.01, anything) read as the same theme with different buttons. Dark canvases differentiate the same way: deep indigo, plum, and near-black violet are three different nights.
-- **Dark scheme is a transform, not just a dark Canvas**: every chromatic seed lightens to L ≈ 0.75–0.85 and drops about a third of its chroma. Saturated color vibrates on dark grounds.
-- **Equal lightness = equal weight**: give the four statuses one shared L; do the same for Brand vs Accent when they should balance.
-- Status hues never rotate with the harmony; only their L/C adapt to the mood.
+| Canvas | L 0.92 to 0.98, C 0.02 to 0.06 | L 0.15 to 0.28, C 0.01 to 0.05 | Brand's hue or its harmony slot |
+| Neutral, Alternate | L about 0.55, C 0.008 to 0.02 | same | per the chroma budget |
+| Brand | L 0.45 to 0.62, C 0.12 to 0.20 | L 0.70 to 0.83, C cut by a third | the brief's identity hue |
+| Accent | harmony slot, or at least 0.25 L from Brand when the mode collapses hue distance | lighten and desaturate like Brand | harmony slot |
+| Special | most expressive; default Brand hue +60 at about 65% of Brand's C | same transform | harmony slot |
+| Info | shared status L (0.55 to 0.65 light) | lighten like Brand | H 230 to 260 |
+| Success | shared status L | same | H 140 to 155 |
+| Warning | L 0.75 or higher (vivid yellow must be light) | same | H 70 to 90 |
+| Danger | shared status L, C 0.15 to 0.20 | same | H 20 to 30 |
+
+**The canvas carries the theme's identity, so commit to it.** The page background is the largest area on screen and the strongest difference between themes; a timid canvas makes every theme look the same. Below C 0.015 at L 0.95 a tint is imperceptible, which makes near-white a deliberate choice for clean or minimal briefs and never the default. Three levels of commitment:
+
+1. *Tinted paper* (most UI briefs): C 0.02 to 0.06, with L down to 0.92 where the hue needs room.
+2. *Colored ground* (expressive briefs): L 0.85 to 0.92 at C 0.05 to 0.10. The page is unmistakably mint, parchment, sky.
+3. *Full-color ground* (holiday and statement briefs): the canvas is the theme color, like a red Christmas page with green and gold on it. Keep canvas L at or below 0.48 or at or above 0.85 so text has somewhere to go; the contrast gate enforces legibility either way.
+
+Also:
+
+- Blue tints cap very low at high L (H 264 at L 0.95 barely reaches C 0.03): lower L for a blue canvas rather than fighting the ceiling. Yellow, green, and cream tint generously at high L.
+- When generating a set of themes, make the canvases pairwise distinct in hue or in L. Two light themes both near (0.97, 0.01) read as one theme with different buttons.
+- A dark scheme is a transform, not just a dark canvas: every chromatic seed lightens to L 0.75 to 0.85 and drops about a third of its chroma, because saturated color vibrates on dark grounds.
+- Equal lightness reads as equal weight: give the four statuses one shared L, and do the same for Brand and Accent when they should balance.
+- Status hues never rotate with the harmony; only their L and C adapt to the mood.
 
 ## Mood dials
 
-Empirically: pleasantness rises with lightness (strongly) and saturation (weakly); energy/arousal rises with saturation; drama/dominance rises with dark + saturated.
+Pleasantness rises with lightness (strongly) and saturation (weakly); energy rises with saturation; drama rises with dark plus saturated.
 
 | Brief says | Dials |
 |---|---|
-| cheerful, bright, playful | light scheme; Brand/Accent L 0.7–0.9, C 0.15–0.22; warm hues 40–140 (yellow is the strongest joy hue) |
-| calm, serene, soft | light scheme; C 0.03–0.08 on everything chromatic; cool hues 140–260 |
-| energetic, bold | C ≥ 0.18 at L 0.55–0.65; red/orange/magenta |
-| dark, moody, dramatic, luxurious | dark scheme; Canvas L 0.15–0.25; purple, deep blue, crimson; keep working accents light per the dark transform, reserve dark-saturated color for one or two moments |
-| professional, trustworthy | blue 230–265, C 0.08–0.15; everything else muted |
-| warm / cool | hues 20–110 (plus pink 290–360) / hues 140–290 |
+| cheerful, bright, playful | light; Brand and Accent L 0.7 to 0.9, C 0.15 to 0.22; warm hues 40 to 140 (yellow is the strongest joy hue) |
+| calm, serene, soft | light; C 0.03 to 0.08 on everything chromatic; cool hues 140 to 260 |
+| energetic, bold | C 0.18 or more at L 0.55 to 0.65; red, orange, magenta |
+| dark, moody, dramatic, luxurious | dark; Canvas L 0.15 to 0.25; purple, deep blue, crimson; working accents stay light per the dark transform, with dark saturated color saved for one or two moments |
+| professional, trustworthy | blue 230 to 265, C 0.08 to 0.15; everything else muted |
+| warm / cool | hues 20 to 110 plus pink 290 to 360 / hues 140 to 290 |
 
-Avoid mid-lightness yellow-green (H 100–120 at L 0.5–0.7, C ≈ 0.1) unless the brief asks for olive/toxic.
+Avoid mid-lightness yellow-green (H 100 to 120 at L 0.5 to 0.7, C about 0.1) unless the brief asks for olive or toxic.
 
-## Gamut guardrails (don't request impossible seeds)
+## Gamut guardrails
 
-- Dark saturated yellow does not exist: H 90 at L 0.4 caps at C ≈ 0.08 and reads olive. Vivid yellow needs L ≥ 0.8. Brown = dark low-chroma orange.
-- Vivid light blue does not exist: H 264 at L 0.9 caps at C ≈ 0.05. Rich blue lives at L 0.40–0.55.
-- Teal/sky cap at C ≈ 0.15; a "vivid teal" is C 0.13–0.15.
-- Peak chroma anchors: red H20 C 0.25 @ L 0.63; orange H60 C 0.18 @ L 0.76; yellow H90 C 0.18 @ L 0.86; green H140 C 0.28 @ L 0.88; blue H264 C 0.28 @ L 0.50; magenta H320 C 0.31 @ L 0.65.
+The engine clamps to gamut regardless; these keep your intent achievable rather than silently muted.
 
-The engine gamut-clamps regardless; these rules keep your *intent* achievable rather than silently muted.
+- Dark saturated yellow does not exist: H 90 at L 0.4 caps at C 0.08 and reads olive. Vivid yellow needs L 0.8 or more. Brown is dark low-chroma orange.
+- Vivid light blue does not exist: H 264 at L 0.9 caps at C 0.05. Rich blue lives at L 0.40 to 0.55.
+- Teal and sky cap at C 0.15.
+- Peak chroma anchors: red H20 C 0.25 at L 0.63; orange H60 C 0.18 at L 0.76; yellow H90 C 0.18 at L 0.86; green H140 C 0.28 at L 0.88; blue H264 C 0.28 at L 0.50; magenta H320 C 0.31 at L 0.65.
 
-## Choosing the harmony mode
+## Harmony
 
-Modes and hue offsets from Brand: complementary +180; split-complementary +150/+210; triadic +120/+240; tetradic +60/+180/+240; square +90 steps; compound +30/+180/+210; analogous ±30; monochromatic same hue.
+Hue offsets from Brand: complementary +180; split-complementary +150/+210; triadic +120/+240; tetradic +60/+180/+240; square +90 steps; compound +30/+180/+210; analogous plus or minus 30; monochromatic same hue.
 
-- Vague or single-adjective brief → monochromatic or analogous; differentiate Accent from Brand by L/C, not hue. Polished-UI default: Accent = Brand's hue at ~45% chroma, Special = +60° at ~65% chroma.
-- Brief names two colors → measure their hue gap and pick the matching mode (green + gold ≈ 60–90° → analogous/compound).
-- Drama or maximum contrast → complementary/triadic/tetradic; then never pair max-chroma text with a near-black ground; tone one side down.
+- A vague or single-adjective brief takes monochromatic or analogous, with Accent separated from Brand by L and C rather than hue. The polished-UI default: Accent at Brand's hue and about 45% of its chroma, Special at +60 and about 65%.
+- A brief naming two colors: measure their hue gap and pick the matching mode (green plus gold is 60 to 90 degrees, so analogous or compound).
+- Drama or maximum contrast: complementary, triadic, or tetradic, and then tone one side down, since max-chroma text on a near-black ground vibrates.
 
-## The canvas sky (optional page-background gradient)
+## Canvas sky and shadows
 
-The brief may set `"canvasGradient": true` to render the page background as a
-vertical gradient built from the Canvas ramp. The engine picks the stops itself
-(two ramp steps from the Canvas anchor on the scheme's safe side), so the
-choice you make is only *whether*, never *how*.
+`"canvasGradient": true` renders the page background as a vertical gradient from the Canvas ramp. Default off. Turn it on only when the brief evokes atmosphere (sky, night, dusk, glow, underwater) or asks for a gradient outright; keep it off for crisp, flat, minimal, or corporate briefs and whenever in doubt, because a sky on every theme stops meaning anything. It needs a committed canvas (level 2 or 3); at the ramp edge the engine skips it and says so. Say why you enabled it in one line.
 
-Default **off**. Turn it on only when the brief evokes atmosphere: sky, night,
-dusk, dawn, sunset, glow, candlelight, underwater, depth — or when the user
-asks for a gradient outright. Keep it off for crisp, clean, flat, minimal, or
-corporate briefs, and whenever in doubt. Most themes should not have one; a sky
-that appears on every generated theme stops meaning anything. When you enable
-it, say why in one sentence when reporting back ("night brief → canvas sky").
+Shadow opacity derives from Canvas lightness and re-derives on every run, so there is nothing to choose. When shadows read heavy or muddy, raise the Canvas seed's L.
 
-A sky needs a committed canvas: when the Canvas seed anchors at the ramp edge
-(near-white light canvas, near-black dark one) there is no room on the safe
-side and the engine skips the sky, saying so in the report. An atmospheric
-brief that wants one should already be at canvas commitment level 2–3.
+## Named themes
 
-## Shadow weight follows the canvas
+A holiday or season brief is a statement brief: commitment level 2 or 3, with the named color on the ground rather than only on the buttons. Read `references/named-themes.md` for the OKLCH anchors of Christmas, Halloween, St. Patrick's, Ocean, Sunset, Autumn, and Spring before seeding one.
 
-The engine sets the opacity of the `--shadow-*` scale from the Canvas seed's
-lightness and carries each shadow's geometry and color through untouched. A
-near-black shadow at 0.9 opacity is what a dark ground needs to show any
-shadow at all, and it punches a hole in paper, so opacity holds at 0.9 up to
-canvas L 0.5 and eases to 0.2 by L 0.9. There is nothing to choose: the report
-prints the derived value, and every regeneration re-derives it, so a brief
-iterated from a light canvas to a dark one gets its weight back.
+## Geometry from the voice
 
-When the user says the shadows read heavy, muddy, or dirty, the canvas is the
-lever. Raise the Canvas seed's lightness and the shadows lighten with it. A
-one-off override lives in the editor's Shadows tab and survives regeneration
-in everything except opacity.
+The geometry lives in radius, padding, gap, and border width, and `live-tokens-adjust-geometry` knows the mechanics. Hand it the intent:
 
-## Named themes (canonical OKLCH anchors)
-
-Holiday briefs are statement briefs — default to commitment level 2–3 above, not cream. The named colors go on the *ground*, not just the buttons.
-
-- **Christmas**: red (0.53, 0.21, 22) + green (0.46, 0.11, 155) + gold (0.77, 0.14, 91). Strongest form: a full red canvas (0.42, 0.14, 25) with green Brand and gold Accent on it (dark scheme). Softer form: evergreen canvas (0.35, 0.07, 160) or deep cream (0.95, 0.04, 85). Never a 50/50 red-green split — one owns the ground, the other highlights.
-- **Halloween**: pumpkin (0.70, 0.20, 46) + purple (0.51, 0.21, 313) + poison green (0.73, 0.20, 137). Strongest form: an orange canvas (0.45, 0.13, 55) with violet and poison-green accents; alternative: near-black violet canvas with pumpkin Brand. Dark scheme either way.
-- **St. Patrick's**: green (0.51, 0.13, 152) Brand, gold Accent, white/beige neutrals.
-- **Ocean**: deep blue (0.35, 0.08, 237) vs aqua (0.78, 0.12, 214); H 180–240.
-- **Sunset**: hues 90 → 320 through red, L falling 0.85 → 0.40.
-- **Autumn / Fall**: leaves and dry grass — canvas warm tan/parchment (0.87, 0.06, 80), rust Brand (0.55, 0.15, 40), golden Accent (0.75, 0.15, 85), moss/olive Special (0.55, 0.10, 120), warm brown neutrals H 50–70. Deep red H 25 welcome. **Spring**: pastels L 0.85–0.95, C 0.04–0.10, greens 130–150 / pinks 0–20, mint canvas.
+| Voice | Geometry |
+|---|---|
+| playful, friendly, soft | rounder, a step airier; pill buttons when the brief is warm |
+| luxurious, elegant, editorial | sharper corners, airier padding, thin borders |
+| technical, dense, systematic | tighter spacing, small radius, square corners on containers |
+| calm, minimal | leave geometry alone unless the brief says otherwise |
 
-## Scope
+## What each step writes
 
-Fonts are never touched (they carry forward from the live look, as do component aliases and shadow geometry; shadow opacity is derived, see above). Swatch gradients (`--gradient-1..4`) carry forward when user-tuned; if they are absent or still stock, the engine rebuilds them from the new theme's families — you never author them. Radius is out of scope for generation. Shipping the theme stays a human action: Adopt, in the editor.
+Color writes `themes/<slug>.json` and opens it. Type and geometry write the unsaved buffers, which the page already runs. One Save in the editor keeps all three; Adopt ships them. Component aliases and gradients carry forward from the live look into a generated theme; user-tuned gradients survive, stock ones rebuild from the new families.
 
 ## Verify
 
-- The CLI exits 0 and the report card shows every check ✓ (auto-corrected is fine).
-- The app (dev server running) shows the new theme after a reload; the editor's Theme panel names it.
-- If the user wants the previous look back, the CLI output names the theme that was open; load it from the Theme panel.
+- The color CLI exits 0 with every check passing (auto-corrected is fine), and the two sibling skills report what they changed.
+- The app (dev server running) shows the whole look after a reload, and the editor's Theme panel names the theme.
+- To return to the previous look, load the theme the CLI output named from the Theme panel; that discards the buffers too.

package/.claude/skills/live-tokens-generate-theme/references/named-themes.md

@@ -0,0 +1,18 @@
+# Named themes: canonical OKLCH anchors
+
+Read this when the brief names a holiday, a season, or a natural scene. These
+are starting points, not seeds to copy: apply the chroma budget, per-role bands,
+and canvas commitment rules from SKILL.md on top of them.
+
+Holiday briefs are statement briefs. Default to canvas commitment level 2 or 3,
+never cream, and put the named color on the ground, not only on the buttons.
+
+| Brief | Anchors (L, C, H) | Strongest form |
+|---|---|---|
+| Christmas | red (0.53, 0.21, 22), green (0.46, 0.11, 155), gold (0.77, 0.14, 91) | red canvas (0.42, 0.14, 25), green Brand, gold Accent, dark scheme. Softer: evergreen canvas (0.35, 0.07, 160) or deep cream (0.95, 0.04, 85). One of red or green owns the ground; never a 50/50 split. |
+| Halloween | pumpkin (0.70, 0.20, 46), purple (0.51, 0.21, 313), poison green (0.73, 0.20, 137) | orange canvas (0.45, 0.13, 55) with violet and poison-green accents, or near-black violet canvas with pumpkin Brand. Dark scheme either way. |
+| St. Patrick's | green (0.51, 0.13, 152) | green Brand, gold Accent, white or beige neutrals. |
+| Ocean | deep blue (0.35, 0.08, 237), aqua (0.78, 0.12, 214) | hues held to 180 to 240. |
+| Sunset | hues 90 to 320 through red | L falls 0.85 to 0.40 across the sweep. |
+| Autumn | parchment canvas (0.87, 0.06, 80), rust Brand (0.55, 0.15, 40), gold Accent (0.75, 0.15, 85), moss Special (0.55, 0.10, 120) | warm brown neutrals H 50 to 70; deep red H 25 welcome. |
+| Spring | pastels L 0.85 to 0.95, C 0.04 to 0.10 | greens 130 to 150, pinks 0 to 20, mint canvas. |

package/.claude/skills/live-tokens-pair-fonts/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: live-tokens-pair-fonts
+description: Choose and apply a Google Fonts pairing for a live-tokens theme by binding families to the --font-display, --font-sans, --font-serif and --font-mono stacks. Use whenever the user asks to pair fonts, pick a typeface, change or set the fonts, or describes type by voice: give me a font pairing, what font should the headings use, make the type more editorial, friendlier, more technical, more elegant, a serif for headings, a display font for this theme, less generic type, match the fonts to the theme. Also invoked by live-tokens-generate-theme for the type half of a whole look. Changes type only, never color. Not for a single token (use the editor) or for color (see live-tokens-generate-theme).
+---
+
+# Pairing fonts for a theme
+
+You choose the families; the CLI verifies each against Google Fonts, builds the URL from the weights the family actually has, and writes the result into the unsaved buffer. Never hand-author font JSON and never edit the data tree directly. Google Fonts is the pool because it is freely licensable and loads by URL; other sources go in by hand through the editor's Project fonts section.
+
+## Workflow
+
+1. Choose the pairing with the framework below and write a brief to `scratch/font-brief.json`.
+2. Run `npx live-tokens set-fonts scratch/font-brief.json`. It prints each stack that moved, each family's real weights and URL, and the weights your typography tokens ask for that the family lacks.
+3. Read the report. A weight gap is a quality note: name it and offer an alternative only if it matters (a body face without 400 or 700 matters; a display face without 300 does not). A family not on Google Fonts fails the run; fix the spelling and re-run.
+4. Tell the user to reload and look, and that the edit is unsaved until they save the open theme.
+
+State your reasoning when you propose the pairing: each face's form model and the matrix verdict, in one sentence, so the user can argue with the argument rather than only the result.
+
+Flags: `--dry-run` reports without writing. `--no-verify` skips the network and requires an explicit URL per family; use it only offline with a URL in hand.
+
+## The brief
+
+```json
+{ "display": "Fraunces", "body": "Nunito Sans" }
+```
+
+Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif` and `mono` exist when a theme needs them. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
+
+## Choose the body face first
+
+The body face is the anchor. It carries most of the words, and text faces survive small sizes where display faces do not. Pick it against the brief, then pick the display face against it. A body face must have regular, bold, and italic; low to moderate stroke contrast; open apertures; and a large x-height. A face failing any of these is a display face whatever its name says. Single-weight families are fine for `display` and disqualifying for `body`.
+
+## The font matrix: the decision rule
+
+Classify each candidate on two layers. The **skeleton** is its form model; the **flesh** is its stroke contrast and serif treatment.
+
+| Form model | Construction | Reads as |
+|---|---|---|
+| **Dynamic** | diagonal stress, open apertures, written origin | open, warm, humane, timeless |
+| **Rational** | vertical stress, closed apertures, drawn not written | orderly, reserved, elegant, authoritative |
+| **Geometric** | monolinear, circle-and-line | technical, modern, systematic, sober |
+
+- **Same skeleton, different flesh: reliable.** Helvetica and Bodoni are both rational, one a linear sans and one a contrasting serif.
+- **Same flesh, different skeleton: the failure case.** The two look alike on the surface and fight underneath. This is why two arbitrary sans-serifs so often clash.
+- **Far apart on both: works, deliberately.** An unmistakable difference reads as a decision.
+
+Many faces sit between columns. When one straddles, say so and lean on the voice table and the x-height check instead.
+
+## Voice
+
+| Brief says | Type voice |
+|---|---|
+| editorial, literary, considered | dynamic serif display over a humanist sans body |
+| elegant, luxurious, formal | rational high-contrast serif display; keep the body quiet |
+| friendly, warm, approachable | dynamic sans on both sides, or a soft serif display |
+| technical, systematic, precise | geometric or neo-grotesque sans; a mono for code |
+| playful, informal | an expressive display face over a plain workhorse body |
+| serious, institutional, trustworthy | rational sans body, rational serif display |
+| quiet, minimal, unbranded | one superfamily across both slots |
+
+Match the type to the same brief the color came from. A warm autumn palette under a cold geometric sans reads as two projects.
+
+## Shortcuts
+
+These find an adequate pairing fast and skip the reasoning; use them when the brief is vague or the type should stay quiet.
+
+- **A superfamily.** Google Fonts families with both sans and serif siblings: Alegreya, Ancizar, IBM Plex, Inria, Merriweather, Noto, PT, Roboto, Source.
+- **One family across weights.**
+- **Same designer or foundry.**
+- **Serif display over sans body** when nothing else decides it.
+
+## Watch for
+
+- **x-height parity.** Both faces are set from one size scale, so a small-x-height display face over a large-x-height body face gives a heading that looks weaker than its own body text. This is the one visual check that matters on screen; make it on the rendered page.
+- **Print faces at small sizes.** Delicate serifs and high stroke contrast turn to mud below 16px.
+- **Every family is a request.** Two is the target; three needs a reason.
+- **Sets of themes:** no two share a display face or a body face.
+
+## Scope
+
+Type only. Color, component aliases, shape, and the type scale are untouched: `set-fonts` moves families between stacks and nothing else, writing only the unsaved colors-and-type buffer. Save the theme to keep it, Adopt to ship it.
+
+## Verify
+
+- The CLI exits 0 and names each stack that moved, before and after.
+- Each URL reflects the family's real weights: a range for a variable family, an enumeration for a static one, a bare URL for a single-weight face.
+- The app shows the new type after a reload, and the editor's Fonts section lists both families with their fallbacks intact.
+- To revert, run the inverse brief, or load the open theme again to discard the buffer.

package/.claude/skills/live-tokens-pick-component/SKILL.md

@@ -11,7 +11,7 @@ For composing a page once you've picked components, see [[live-tokens-build-page
 
 ## Catalogue
 
-Action: `Button`, `IconButton`. Input: `Input`. Selection: `SegmentedControl`, `TabBar`, `RadioButton`, `MenuSelect`, `Toggle`. Containers: `Card`, `CollapsibleSection`, `Dialog`. Messaging: `Callout`, `Notification`, `Tooltip`, `Badge`, `CornerBadge`. Display: `Table`, `Image`, `ImageLightbox`, `ProgressBar`, `SectionDivider`, `SideNavigation`, `CodeSnippet`.
+Action: `Button`, `IconButton`, `InlineEditActions`. Input: `Input`. Selection: `SegmentedControl`, `TabBar`, `RadioButton`, `MenuSelect`, `Toggle`. Containers: `Card`, `CollapsibleSection`, `Dialog`, `Panel`. Messaging: `Callout`, `Notification`, `Tooltip`, `Badge`, `CornerBadge`. Display: `Table`, `Image`, `ImageLightbox`, `ProgressBar`, `SectionDivider`, `SideNavigation`, `CodeSnippet`.
 
 `CodeSnippet` is for a single-line command or value the user is meant to copy and paste back into a terminal (install commands, generated keys, ids). Click-to-copy with a brief "Copied" popover. Use it whenever your page asks the reader to *run* something, rather than just *read* it.
 
@@ -22,6 +22,7 @@ Both trigger an action and share the same six variants (primary, secondary, outl
 - `Button` carries a text label, optionally with a leading or trailing icon. Use it whenever the action needs a word to be unambiguous.
 - `IconButton` is icon-only and square. Use it for compact, space-constrained actions whose meaning is obvious from the glyph alone (toolbar controls, close/edit/delete affordances, card overflow menus). It has no text slot, so an `ariaLabel` is required for accessibility.
 - **Don't reach for `IconButton` when the icon's meaning isn't self-evident.** A labelled `Button` (or a `Button` with an icon) avoids the guessing game.
+- `InlineEditActions` is the confirm-and-cancel pair that follows an inline edit (rename a row, edit a value in place). Use it rather than two loose `IconButton`s so every inline edit on the page resolves the same way.
 
 ## Single-selection family: SegmentedControl vs TabBar vs RadioButton vs MenuSelect
 
@@ -46,9 +47,11 @@ All four pick one option from a set. The right one depends on **option count**,
 | `Card`                | Inline, always open | Default container for grouped content                       |
 | `CollapsibleSection`  | Inline, toggleable  | Progressive disclosure inside a longer page                 |
 | `Dialog`              | Modal, blocks page  | Confirmations, focused tasks the page can't continue around |
+| `Panel`               | Inline, fixed stage | A demo or preview surface whose height must not reflow     |
 
 - Default to `Card`. It's the workhorse.
 - Reach for `CollapsibleSection` only when the content is *legitimately secondary* (advanced users open it; most skip). Don't use collapse as a styling choice when the content matters.
+- `Panel` is a stage, not a content container. It pins its own height so what it shows can resize without moving the page, which is what a component preview or a live example needs and what article content does not. Content goes in `Card`.
 - **Don't use `Dialog` for routine forms.** Reach for it only when the page cannot meaningfully continue until the user decides (destructive confirmations, payment, sign-in). Routine forms go inline in a `Card`.
 
 ## Messaging family: Callout vs Notification vs Tooltip vs Badge

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # Changelog
 
+## 0.56.1 — Release fix
+
+### Fixed
+
+- **The 0.56.0 publish failed in CI and never reached npm.** `scripts/lib/presetFonts.mjs`
+  loaded the compiled font-pairing engine at import time, and a vitest suite
+  imports that module for its `PRESET_FONTS` table; CI runs the tests before
+  it builds the plugin. The engine now loads inside `stampPresetFonts`, the
+  one caller that needs it. Everything listed under 0.56.0 ships here.
+
+## 0.56.0 — Type is a first-class half of a theme
+
+### Added
+
+- **`live-tokens set-fonts` and the `live-tokens-pair-fonts` skill.** A theme's
+  type can now be chosen the way its color already could: describe the voice you
+  want and get a verified Google Fonts pairing bound to `--font-display`,
+  `--font-sans`, `--font-serif` and `--font-mono`. The skill carries the
+  reasoning (anchor on the body face, classify both candidates by form model,
+  apply the font matrix, gate every candidate on screen legibility); the CLI
+  does the verifying and the writing. Like `adjust`, it edits the unsaved
+  colors-and-type buffer, so a retype is an edit you keep by saving the open
+  theme. Color, component aliases, `tokens.css` and `fonts.css` are untouched.
+- **URLs are negotiated from the family's real weights, not guessed.** A 200
+  from the Google Fonts API never proved weight coverage: the API silently drops
+  enumerated weights a family lacks and only rejects a *range* its axis cannot
+  serve. `set-fonts` now takes a census from the returned CSS and builds the
+  narrowest URL that delivers everything the family has: a range for a variable
+  family, an enumeration for a static one, a bare URL for a single-weight
+  display face. It also reports the weights your typography tokens ask for and
+  the family does not have.
+- **`generate-theme` owns the whole look.** A theme is three decisions made
+  from one brief: color, type, and geometry. The skill reads the brief once,
+  names its voice, seeds the color, then invokes `live-tokens-pair-fonts` and
+  `live-tokens-adjust-geometry` with the same voice, so a moody night theme
+  arrives with type and corners to match rather than with the previous look's.
+  The three CLIs stay separate, so any one decision retunes without re-rolling
+  the others.
+
+### Changed (breaking)
+
+- **`live-tokens-adjust-shape-space` is now `live-tokens-adjust-geometry`.**
+  Same skill, same `adjust` verb; the name now matches the heading the token
+  suffix vocabulary already uses for radius, padding, gap, and border width.
+  Re-run `npx live-tokens setup-claude --force` to pick it up, then delete
+  `.claude/skills/live-tokens-adjust-shape-space/` by hand: `setup-claude`
+  never removes a directory, and the stale copy would keep triggering under
+  the old name.
+
+### Changed
+
+- **Skills are leaner and read the package instead of copying it.** The
+  create-component skill no longer inlines the shipped `Toggle` (the copy had
+  drifted 174 lines from its source); it points at the files in
+  `node_modules` and moves the linked-siblings, intrinsics, and fixed-overlay
+  material into reference files read on demand. The theme skill moved its
+  holiday anchors the same way. Every skill body is now under 250 lines.
+- **The picker catalogue lists `Panel` and `InlineEditActions`.** Both shipped
+  without an entry, so the picker could never recommend them.
+- **`npm run check:skills` gates the bundle.** It asserts the catalogue names
+  every shipped component, every reference file is pointed at and present,
+  every CLI verb a skill mentions exists, every skill has a sample prompt, and
+  no skill pastes a long file inline.
+
+### Fixed
+
+- **Adding a Google font by name in the editor no longer persists a dead URL.**
+  The by-name field built a `wght@100..900` range URL and never checked it, so
+  any family without that exact variable axis (every static family, every
+  single-weight display face) was saved with a URL the API answers 400 to. It
+  now runs the same negotiation `set-fonts` does, reports the family's real
+  weights, and fails loudly for a family that is not on Google Fonts.
+
+## 0.55.1 — The anchored step is the base color
+
+### Fixed
+
+- **Editing the anchored palette step edits the base color.** The anchor pins
+  the lightness, saturation and hue curves through one step, so that swatch was
+  already rendering the base color. Clicking it opened a per-step override,
+  which forked the two apart: the ramp moved, the family's base swatch and hex
+  did not, and the palette stopped passing through the base color the anchor
+  guarantees it passes through. That step now opens the base color itself. The
+  whole ramp re-derives, a bound harmony axis follows the hue, and the header
+  swatch moves with it. Both swatches carry the selection ring together and the
+  panel titles itself "Base Color > 500", so the pairing is stated rather than
+  inferred. An override left on the anchored step by an earlier build is cleared
+  when the step is opened, inside the edit session, so Cancel and undo both put
+  it back. Every other step keeps its own override, unchanged.
+
+### Changed
+
+- **The color editor docks under the row it edits.** It rendered at the bottom
+  of the family block, past the curve editors and the Text, Surfaces and Borders
+  section, far enough from the swatch that opened it to read as unrelated
+  chrome. It now opens directly beneath the ramp for a palette step, or beneath
+  the derived row that owns the step, with a caret on the step's own column. The
+  caret is placed on the grid rather than positioned, so it stays under its
+  swatch at any width. Showing and hiding use the disclosure motion the
+  expandable sections already use.
+
+- **Selection reads by weight.** The editor's chrome is greyscale by design, so
+  a selected swatch is marked by a heavy ring drawn inside it: a white band
+  between two dark keylines, which survives both ends of a ramp running white to
+  black where a single-tone ring disappears at one end. The ring is inset rather
+  than an outline, which would close the gutter between neighbouring swatches,
+  or a thicker border, which would resize the swatch inside its own grid.
+
 ## 0.55.0 — A focused palette arrives ready
 
 ### Changed

package/README.md

@@ -17,7 +17,7 @@ The editor is dev-only. Production builds get plain CSS variables and the compon
 - **Themes.** A theme is a whole look in one file: colors and type plus a config for every component, stored by value. Loading one changes a single pointer file, and nothing your site ships changes until you Adopt. Export a theme and import it into another project to restore the look in one step.
 - **Seven example looks.** Autumn, Halloween, Midnight Study, Ocean, Royal Velvet, Spring Meadow, and Sunset each ship as a full theme: colors, a Google Fonts pairing, and a shape personality of radius, padding, gap, and border-width aliases. They ship inside the package, so trying one needs no local files. Load Motion Proto to return to the default. Saving over a preset writes a local copy that shadows the shipped one; delete the copy and the shipped version returns.
 - **Vite plugin.** Hosts the `/api/live-tokens/{colors-and-type,component-configs,themes}/*` routes the editor reads and writes through. The single namespace keeps these routes clear of anything your app serves under `/api`.
-- **Claude Code skills.** Five bundled skills that drive the package from plain English. See [Claude Code skills](#claude-code-skills).
+- **Claude Code skills.** Six bundled skills that drive the package from plain English. See [Claude Code skills](#claude-code-skills).
 
 ## Install
 
@@ -267,13 +267,14 @@ npx @motion-proto/live-tokens <command>
 | `check-component <id>` | Validate a component's runtime, editor, and registration against the authoring contract. |
 | `generate-theme <brief.json> [--no-activate] [--dry-run] [--carry-from <name>]` | Build a full theme from a 10-seed OKLCH brief, enforce AA contrast, write `themes/<slug>.json`, and open it. |
 | `adjust <ops.json> [--dry-run]` | Move radius, padding, gap, and border-width aliases along their token scales. |
+| `set-fonts <brief.json> [--dry-run] [--no-verify]` | Bind Google Fonts families to the theme's font stacks, verified against the API. |
 | `migrate [--check] [--write] [--tokens <path>]` | Reconcile the project with the installed package: additive `tokens.css` migrations, the pre-0.48 data-tree move, and a report on source references to the routes that moved in 0.35.0. |
 
 Once installed in a project, the same commands are available as `npx live-tokens <command>`.
 
 ## Claude Code skills
 
-The package bundles five Claude Code skills. They encode the conventions this README cannot carry in full: which component fits a need, how a page is wired, what a valid theme looks like in OKLCH, and how shape and space move along the token scales. Each triggers from an ordinary request, so there are no slash commands to learn.
+The package bundles six Claude Code skills. They encode the conventions this README cannot carry in full: which component fits a need, how a page is wired, what a valid theme looks like in OKLCH, how two typefaces sit together, and how geometry moves along the token scales. Each triggers from an ordinary request, so there are no slash commands to learn.
 
 ### Install
 
@@ -303,13 +304,25 @@ The skill composes the page from shipped components, styles every value with `va
 
 Ask for a look: "a dark, moody night theme", "a St Patrick's Day theme in green and gold", "warmer", "more contrast", "calmer".
 
-The skill translates the brief into ten OKLCH seeds (Brand, Accent, Special, Canvas, Neutral, Alternate, Info, Success, Warning, Danger) plus a light or dark scheme, then runs `npx live-tokens generate-theme <brief.json>`. The CLI assembles the curves, enforces AA contrast on derived text tokens and auto-corrects where it can, writes `themes/<slug>.json`, opens it, and prints a contrast report. Exit 1 means the seeds themselves are unworkable, and each failure line names the seed to change.
+A theme is three decisions made from one brief: color, type, and geometry. The skill owns color and delegates the other two to `live-tokens-pair-fonts` and `live-tokens-adjust-geometry`, so the whole look comes from the same reading of the brief.
 
-Most of the skill is the judgment the generator cannot supply: a chroma budget scaled to how much screen area each palette covers, per-role lightness and hue bands for each scheme, gamut guardrails against impossible seeds, harmony modes, the optional canvas gradient, shadow weight for the canvas, and OKLCH anchors for named colors.
+For color it translates the brief into ten OKLCH seeds (Brand, Accent, Special, Canvas, Neutral, Alternate, Info, Success, Warning, Danger) plus a light or dark scheme, then runs `npx live-tokens generate-theme <brief.json>`. The CLI assembles the curves, enforces AA contrast on derived text tokens and auto-corrects where it can, writes `themes/<slug>.json`, opens it, and prints a contrast report. Exit 1 means the seeds themselves are unworkable, and each failure line names the seed to change.
 
-Scope: colors only. Fonts, gradients, and component aliases carry forward from the open theme, or from `--carry-from <name>`. `--dry-run` prints the report without writing; `--no-activate` writes without opening. Opening a theme never changes what your site ships; Adopt does. Regenerating replaces that theme's whole color state, including palette edits made in the editor since the last run.
+Most of the skill is the judgment the generator cannot supply: a chroma budget scaled to how much screen area each palette covers, per-role lightness and hue bands for each scheme, gamut guardrails against impossible seeds, harmony modes, the optional canvas gradient, and a voice-to-shape table for the shape step. OKLCH anchors for named holidays and seasons live in a reference file the skill reads on demand.
 
-### `live-tokens-adjust-shape-space`
+Color lands in the theme file; type and shape land in the unsaved buffers, and one Save keeps all three. `--dry-run` prints the report without writing; `--no-activate` writes without opening. Opening a theme never changes what your site ships; Adopt does. Regenerating replaces that theme's whole color state, including palette edits made in the editor since the last run, and carries the live buffers forward, so re-rolling color after setting fonts and shape keeps both.
+
+### `live-tokens-pair-fonts`
+
+Ask for type: "pair some fonts for this theme", "what font should the headings use?", "make the type more editorial", "something friendlier", "a serif for headings".
+
+The skill chooses the families and runs `npx live-tokens set-fonts <brief.json>`, which binds each one to `--font-display`, `--font-sans`, `--font-serif`, or `--font-mono`. Every family is checked against the Google Fonts API before it is written, and the URL is built from the weights that family actually has: a range for a variable font, an enumeration for a static one, a bare URL for a single-weight display face. The report names the weights your typography tokens ask for and the family does not carry.
+
+The judgment is the skill's half. It anchors on the body face, because that is most of the words on the page and text faces survive small sizes where display faces do not. It classifies both candidates by form model (dynamic, rational, geometric) and applies the font matrix: two faces sharing a skeleton under different surfaces pair reliably, two faces sharing a surface over different skeletons fight, and two faces far apart on both read as a decision. It also carries the screen test a body face has to pass, a voice table from brief to type, and the Google Fonts superfamilies for when the type should stay quiet.
+
+Scope: type only, and never color. Edits land in the colors-and-type `_working.json` buffer, so save the open theme to keep them. `--dry-run` reports without writing.
+
+### `live-tokens-adjust-geometry`
 
 Ask for shape or space: "make the buttons pill shaped", "sharper corners on the cards", "space it out", "tighter", "thinner borders".
 
@@ -323,7 +336,7 @@ Edits land in each affected component's `_working.json` buffer, which is what th
 
 Ask for something the catalogue lacks: "author a Rating component", "make my Chip component editable in the editor".
 
-The skill covers the four-step recipe: the runtime `.svelte` file with its `:global(:root)` token block, the editor `.svelte` file exporting `allTokens` and its variant groups, the `registerComponent()` call, and the catalogue entry that keeps `live-tokens-pick-component` current. It carries the naming scheme, the token suffix vocabulary, the state model (component states such as selected and disabled are separate from interaction states such as hover), linked siblings, the public-imports rule, and the shipped `Toggle` as a worked example from runtime file to registration.
+The skill covers the recipe: the runtime `.svelte` file with its `:global(:root)` token block, the editor `.svelte` file exporting `allTokens` and its variant groups, the `registerComponent()` call, and the catalogue entry that keeps `live-tokens-pick-component` current. It carries the naming scheme, the token suffix vocabulary, the state model (component states such as selected and disabled are separate from interaction states such as hover), and the public-imports rule, and points at the shipped `Toggle` in `node_modules` as the worked example. Linked siblings, intrinsics, and the fixed-overlay portal rule sit in reference files the skill reads only when a component needs them.
 
 Verify the result: