sheleg-design-skill 1.51.1 → 1.53.0

package/CHANGELOG.md

@@ -6,6 +6,148 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.53.0] - 2026-08-27
+
+### The thirty-seventh pack — the visitor is handed the keys
+
+**`test-drive`**, extracted from a revenue-analytics product's front page and named per
+ADR-0001 for the register it encodes: a page that sells by handing over the running
+product — the set piece is the live app inside drawn browser chrome, and a founder's
+hand (a script face, a yellow marker, a drawn arrow) annotates the tour.
+
+### Added
+
+- `styles/test-drive.md` — widened, all thirteen headings; `Themes: light + dark — a
+  full theme twin`; three forks written from both sides: against `datasheet` (whose
+  live instrument reads *the visitor*, where this one hands over *the product's own
+  workspace*), against `showroom` (a still exhibit against a running machine), and
+  against `scoreboard` (one public total against a dashboard's vital signs on the
+  same warm paper and orange-red family).
+- `styles/tokens/test-drive.css` — measured off the render, not the stylesheet, and
+  the reference is the trap the skeleton's rule 7 describes: its DaisyUI theme
+  declares a teal accent that paints **nothing** (the area-weighted census found it
+  on zero elements), so the acting coral is the brand and the teal ships nowhere.
+  The coral splits into two tokens because the reference's own CTA fails AA —
+  `#ffffff` on `#e16540` is 3.42:1 — so `--accent` lights, fills and blinks while
+  `--action` `#c04a28` carries every body-size word at 4.94:1 under white. The lit
+  control recipe (contact shadow, hue ring, glow, inner bevel) is read byte-for-byte
+  out of the reference's authored `.btn-primary`/`.btn-simple` classes, in both
+  themes. The machine ladder (`--machine-*`, `#101010`–`#202020`) is quarantined and
+  ignores the theme.
+- `kits/test-drive/` — the six-name spine plus `DemoFrame`, `Annotation`, `Marker`,
+  `Delta`, `Machine`+`Caret`, `ThinkingDots`, `Field`, `NavBar`, `Empty`. Rendered at
+  1440, 768 and an emulated 390 before shipping (CONTRIBUTING step 8): the render
+  caught the nav computing 66px against a stated 65 (a content-box border), the link
+  row overflowing a 390px page at 428px, and the touch floor missing — all three
+  fixed pre-tag. The stat row is a container (`container-type: inline-size`),
+  stepping 2 → 4 → 7 columns by its own width.
+- `test/scenarios.md` T35 — `test-drive` against `datasheet`, the live-instrument
+  fork, with its negative branch per standing instruction 4.
+- ADR-0001 gains its fourteenth application: `test-drive`, with `showfloor`,
+  `sandbox`, `marginalia` and `demo-day` weighed and rejected on the ADR's own
+  criteria.
+
+### Changed
+
+- `datasheet`, `showroom`, `scoreboard` — each gains the reciprocal fork clause
+  naming `test-drive`.
+- Counted claims moved with the tree: thirty-seven packs and kits across `SKILL.md`,
+  the index, `SURFACE_COMPOSITION.md` (the accent is `--accent` in 34 of the 37),
+  `FIGMA_BRIDGE.md` (twelve of the thirty-seven ship a twin), `MOBILE_SURFACES.md`,
+  `DESIGN_SYNC_BRIDGE.md`, the template's theme split (12/16/9), README, DOCMAP,
+  both installers and all three manifests.
+
+## [1.52.0] - 2026-08-27
+
+### The front door is the designs
+
+Opening the published catalogue used to mean reading three tiles and clicking one before
+seeing a single pack. It now opens **on the packs**, behind a tab strip of three real
+screens: **Designs** (the front door, and it is the gallery), **Audit** and **Method** —
+the prose that used to occupy the index. `packs.html` stays as a canonical alias for the
+URL the gallery lived at, because two URLs serving one gallery is duplicate content.
+
+The tabs are links to pages rather than panels toggled in one document, and that is the
+SEO decision, not a shortcut: one URL per screen, every screen fully in the HTML, nothing
+behind a click a crawler has to execute. `rel="prefetch"` buys the tab feel back.
+
+### What the SEO pass changed
+
+- **Structured data, with one publisher everybody points at.** A `CollectionPage` whose
+  `mainEntity` is an `ItemList` of all thirty-six packs, each with its own anchor
+  (`/#pack-<name>`), so an answer engine can lift the list without running the filter JS;
+  a `SoftwareApplication` on Method; `BreadcrumbList` on both sub-pages; and an
+  `Organization` node referenced by `@id` from every page. The family site shipped the
+  opposite of that for two releases — a publisher node nothing pointed at.
+- **A `404.html`**, a three-URL sitemap that lists only indexable screens, `llms.txt`
+  rewritten for the new shape, and `max-image-preview:large`, `color-scheme`,
+  `theme-color`, `og:site_name` and `og:locale` on every page.
+- **Two defects the pass found in the old pages:** `method.html` was emitting its
+  canonical and description **twice** (the shared `HEAD` and `page_meta` both fired), and
+  the published dark-field count was **wrong** — `gallery.py` could not parse
+  `oklch()`, so `briefing-room`'s near-black field read as light and the site, its
+  `llms.txt` and its gallery all said five dark packs where six ship.
+
+### `deskmate`, corrected by its own audit
+
+A blind read of the pack (T34a, which also routed correctly and rejected `tenor` on the
+quoted clause) found nine defects. The important one is a colour pairing no gate can see:
+`--surface` stays white on the dusk surface while `--ink` inverts to white, so **a card
+that painted its heading in `--ink` painted white on white** inside an inverted section.
+The pack now ships `--on-surface` and `--on-surface-soft` — words on a card take those,
+words on the field take `--ink` — and the kit consumes them.
+
+Also fixed: the focus ring shipped derived-only, so a browser without `color-mix()` got
+**no ring at all** (literal first now, derived inside `@supports`, the mechanism
+`showroom` established); the slab's inset was 40px in the pack and 80px in the token
+layer; the gutter ramp stated four steps and shipped two tokens; the measure stated in
+prose (62ch/68ch) had no token; the entrance duration's two measurements (0.64s declared,
+0.7s computed) were never reconciled; "the smallest radius that ships" and "every control
+is 56px" were both contradicted by the pack's own body; and the provenance promise was
+broader than the layer delivers.
+
+One finding was rejected: `deskmate` is absent from `MOTION_DOCTRINE.md`'s ceiling
+passage, and that passage is a named selection whose home the gate declares to be the
+pack's own Register.
+
+### `onionskin` gets the same focus-ring guard
+
+The audit that read `deskmate` measured the whole library for the same shape: three
+packs derive a focus ring, and only `showroom` guarded it. `onionskin`'s ring was
+`color-mix()`-only, so a browser without `color-mix()` painted **no ring at all** — the
+one degradation both packs say they may not ship. The literal now sits in `:root` and the
+derived form in an `@supports` block; no computed value changed, and its kit's token
+block was resynced with it.
+
+### A count nothing could check, and now can
+
+`SURFACE_COMPOSITION.md` claimed `--accent` in **twenty-nine** of the packs at a true
+**thirty-three**, and named two of the three packs that call the accent something else —
+omitting `babylove` entirely, so a reader following that sentence would look for a token
+that pack does not have. `validate_counted_claims` cannot read a count whose noun is
+"packs that declare a token", so `validate_token_population_counts` now derives both that
+figure and the `@role non-text:` population from the token layers, and refuses a pack
+that declares neither an `--accent` nor an `@role accent:` marker. The same sweep found
+`SKILL.md` still saying "the twenty-nine".
+
+### The scenario that produced all of this, and the half of it that did not run
+
+`T34` is the behavioural scenario shipped with `deskmate`, and 1.52.0 is the first
+release where one of these branches was actually run rather than filed. **`T34a`
+passed**: it routed to the pack, quoted the deciding clause, rejected `tenor` on the
+clause that rules it out, and stayed inside the bundle directory. It then did the half
+these scenarios have always asked for and never exercised — read the chosen pack in full
+and report defects with quotes — and returned nine, eight of which are fixed above.
+
+**`T34b`, the negative branch, terminated on an account spend limit before reporting a
+verdict, and is not counted as a result.** A positive-only pass cannot detect the failure
+that branch exists to detect. `test/scenarios.md` records both outcomes.
+
+### Ratchets
+
+`validate.py` 5047 → 5060, `validate_palette.py` 3013 → 3023, `computed_at_least`
+686 → 691. Thirteen of the first delta are the new gate.
+
 ## [1.51.1] - 2026-08-27
 
 ### `deskmate`, the thirty-sixth pack — a colleague, quoted

package/README.md

@@ -31,7 +31,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **thirty-six locked style
+decides whether to animate before it decides how, and **thirty-seven locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -76,6 +76,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `rimlight` | a white field with a cool grey act separator and one near-black act, a grotesque for every sentence and a **monospace for every piece of chrome**, square on 84% of its elements, tracked negative at every size and with **no bold anywhere** — and an elevation made of **coloured light**: a sixteen-layer rig, six layers lit and ten held at alpha 0, thrown from below-left onto one control per viewport | **a studio's own front door and the pages that sell what it makes** — design and engineering agencies, product studios, service and case-study pages (standalone) |
 | `onionskin` | a white technical sheet at **96.5% zero radius** — the squarest page in the library — where **two bases do all the work and everything quiet is one of them at an alpha**: text dims through the ink, structure through a navy that is never a word, so there is no grey ramp at all. A dot grid, dashed hairlines, three faces with one job each, and an **11px working size** | **developer and AI infrastructure whose front page is a working document** — memory and context engines, retrieval services, agent runtimes, evaluation and observability surfaces (standalone) |
 | `deskmate` | a warm beige working day lit from **one source above the top edge** — every gradient origin in the reference sits at or above `y=0` — where a single four-stop ramp (peach, lilac, violet, deep navy) washes the field, fills a panel and fills one word of a heading, and everything a hand touches is a 56px pill against 32px slabs | **products sold as a colleague rather than a tool** — AI employees and chat-native agents, assistants living in Slack or Teams, delegation and approval surfaces (standalone) |
+| `test-drive` | warm paper and white cards where **the live product runs inside drawn browser chrome** — traffic-light dots, a real address, the engine on — one coral in two tokens (the brand hue lights, fills and blinks; a darker step carries every body-size word), every control lit by a four-layer shadow in its own hue, a handwritten face and a yellow marker annotating from the margin | **self-serve SaaS sold by handing over the running product** — analytics, dashboards, developer tools with a visible console, indie SaaS (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
@@ -176,7 +177,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The thirty-six style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-seven style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
@@ -247,7 +248,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all thirty-six kits, so switching packs swaps identity rather than API,
+identical in all thirty-seven kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -297,7 +298,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all thirty-six
+installers and `diff -r`s the result against the source, then builds all thirty-seven
 kits.
 
 `test/scenarios.md` (T1–T34) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              thirty-six style packs — instrument-console (dark console),
+  styles/              thirty-seven style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), patchbay (dark live
@@ -250,6 +250,10 @@ ${c("bold", "What it installs")}
                        size), deskmate (warm beige lit from above the top
                        edge, one four-stop ramp, 56px pills against 32px
                        slabs, and a framed transcript as the set piece),
+                       test-drive (warm paper where the live product runs
+                       inside drawn browser chrome, controls lit by a
+                       four-layer shadow in their own hue, and a
+                       handwritten hand annotating the tour),
                        babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +

package/cursor/rules/sheleg-design.mdc

@@ -125,6 +125,13 @@ slabs, elevation is a field step with two shadows on the whole page, and the set
 piece is a framed transcript whose quoted chat client keeps its own face and colours
 under a --quoted-* namespace, for products sold as a colleague rather than a tool:
 AI employees and chat-native agents);
+test-drive — warm paper and white cards where the set piece is the live product
+running inside drawn browser chrome with traffic-light dots, one coral in two tokens
+(the brand hue lights, fills and blinks; a darker step carries every body-size word),
+every control lit by a four-layer shadow in its own hue, a handwritten face and a
+yellow marker annotating from the margin, machine surfaces quarantined in their own
+dark ladder that ignores the theme, for self-serve SaaS sold by handing over the
+running product;
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/deskmate/src/styles.css

@@ -58,6 +58,13 @@
      rules and it bars, and an icon that must be READ takes --ink-soft instead. */
   --ink-faint: #9693a3;
   --on-ink: #ffffff; /* 17.36:1 on --ink */
+  /* THE RULE THIS PACK CANNOT BE READ WITHOUT: --ink is for words on --bg, and
+     --on-surface is for words on --surface. On the light field the two are the same
+     value and the distinction looks decorative. On the dusk surface it is the whole
+     difference: --surface stays white there, measured, so a card that paints its text
+     in --ink paints white on white. Every component that sits on a card takes these. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   /* ---- The accent: it writes, it fills, and it needed no correction ---- */
   /* MEASURED. #6e47ff is the reference's purple-500 and its only functional accent:
@@ -121,9 +128,18 @@
   /* MEASURED — `ring-3` is 3px, and the ring's alpha IS its specification: 50% behind
      a control, 40% behind a field. Composited over white #ffffff the ring is
      #b6a3ff at 2.17:1, which is why the control's own border moves colour in the
-     same state. */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+     same state.
+
+     THE LITERAL IS HERE AND THE DERIVED FORM IS IN THE `@supports` BLOCK AT THE END OF
+     THIS FILE, and the order is not a style preference. A custom property accepts
+     almost any token sequence, so `--focus-ring: color-mix(…)` parses even where
+     `color-mix()` is unsupported and wins the cascade; the invalidity surfaces only
+     where it is substituted, as invalid-at-computed-value-time, and by then the literal
+     is gone and `var(--focus-ring)` resolves to `unset` — an INVISIBLE FOCUS RING, on
+     the one degradation this pack says it may not ship. `showroom` is the worked
+     example this copies. */
+  --focus-ring: 0 0 0 3px rgba(110, 71, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(110, 71, 255, 0.4);
 
   /* ---- Radii: a pill for the hand, a slab for the eye ----------------- */
   /* MEASURED at 1440: 977 of 1,191 visible elements compute 0px, 52 take the 32px
@@ -160,14 +176,20 @@
   --space-28: 112px; /* MEASURED — the section's own vertical rhythm */
 
   --page-max: 90rem; /* 1440px — MEASURED */
-  --gutter: 20px; /* MEASURED — and it steps 40, 56, 80 outward */
-  --gutter-wide: 80px; /* MEASURED at 1440 */
+  /* MEASURED, and the ramp ships as four tokens rather than as a sentence: the page's
+     gutter steps 20 → 40 → 56 → 80 across the reference's own breakpoints, and a step a
+     consumer cannot reach through a variable is a step the pack did not ship. */
+  --gutter: 20px;
+  --gutter-2: 40px; /* from 40rem */
+  --gutter-3: 56px; /* from 48rem */
+  --gutter-wide: 80px; /* from 64rem, and the value at 1440 */
   --control-h: 56px; /* MEASURED — the button and the field are the same height */
   --control-h-sm: 40px; /* MEASURED — the navigation's own pair, and see --tap-min */
   --control-px: 40px; /* MEASURED — 24px on the small size */
   /* The navigation slab is not a control and does not take a control's height:
-     MEASURED at 65px with a 30px bottom radius at 1440, and 57px at the narrow
-     width, inset 80px from each side of the page and 12px below 40rem. */
+     MEASURED at 65px with a 30px bottom radius at 1440 and 57px at the narrow width,
+     inset 40px from each side of the viewport and 12px below 40rem. That inset is the
+     SLAB's, and it is not the page's gutter — the gutter is 80px at the same width. */
   --slab-h: 65px;
   --slab-h-sm: 57px;
   --r-slab: 30px;
@@ -204,6 +226,13 @@
   --t-display-mid: 4.5rem; /* 72px from 40rem */
   --t-display-sm: 4rem; /* 64px below 40rem */
 
+  /* The reference holds its lede in a grid column and sets `max-width: none` on both
+     the headline and the paragraph, so these two are a PACK DECISION rather than a
+     measurement: the measure the reference implies, stated in `ch` so it survives the
+     face substitution below. */
+  --measure-lede: 62ch;
+  --measure-body: 68ch;
+
   --lh-display: 1.1; /* MEASURED — 88px on 80px */
   --lh-body: 1.4; /* MEASURED — 22.4px on 16px */
   --lh-ui: 1.5;
@@ -230,7 +259,12 @@
   --dur-fast: 0.15s; /* a colour, a border or an opacity */
   --dur-base: 0.2s; /* MEASURED — 23 elements */
   --dur-slow: 0.3s; /* MEASURED — 9 elements, a disclosure opening */
-  --dur-enter: 0.64s; /* MEASURED — the reference's own enter-duration token */
+  /* MEASURED, and the two halves of the measurement disagree by 60ms: the reference
+     DECLARES `--enter-duration` as .6s, .64s and .68s across three sections, while the
+     transition on the 19 entering elements COMPUTES 0.7s. The pack ships the declared
+     middle value, because that is the number the reference's own author chose and the
+     0.7s is one section's instance of it. */
+  --dur-enter: 0.64s;
   --stagger: 60ms; /* MEASURED — its enter-delay steps 0, 40, 60, 80, 120ms */
   --enter-y: 16px; /* MEASURED — the entrance travels 8px or 16px, never further */
 
@@ -294,6 +328,10 @@
      a muted icon here anyway, because its role is set by the light block. */
   --ink-faint: #9693a3;
   --on-ink: #150079;
+  /* A card on this surface stays WHITE — that is the measurement — so these two do NOT
+     invert with the field. They are the light block's values, and that is the point. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   --accent: #d2c6ff; /* 10.14:1 on --bg — SELECTED, the reference's own on-dusk eyebrow */
   --on-accent: #150079; /* 10.14:1 on --accent */
@@ -307,8 +345,12 @@
   --hairline-quiet: color-mix(in srgb, #ffffff 15%, var(--bg));
 
   --focus-color: #bcaaff; /* 7.90:1 on --bg, over the 3:1 mark floor */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, #8b6cff 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, #8b6cff 40%, transparent);
+  /* MEASURED — the reference's on-dusk focus outline is its purple-400, and it is a
+     token here so the ring below derives from something rather than from a loose hex.
+     Literal first, derived in the `@supports` block, for the reason stated above. */
+  --focus-ring-base: #8b6cff;
+  --focus-ring: 0 0 0 3px rgba(139, 108, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(139, 108, 255, 0.4);
   --gradient-word-fallback: #d2c6ff; /* 10.14:1 on --bg */
 
   /* DERIVED, and remapped rather than inherited: the light set measures 2.6-4.1:1 on
@@ -343,6 +385,22 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived
+   form tracks the accent — change `--accent` and the ring follows — which is what a
+   literal cannot do; the literal exists so that a browser without `color-mix()` still
+   paints a ring at all. Both fields get one. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+  }
+
+  [data-surface="dusk"] {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 40%, transparent);
+  }
+}
+
 /* Body copy here is weight 500 on 146 nodes, and an unset `font-weight` gives 400 —
    one step light across the whole page. The UA's own 700 for `strong` and `b` is a
    step the other way and lands on the display's heading weight, so emphasis is pinned
@@ -367,10 +425,15 @@ b {
 /* PAGE — the page's own gutter, on the element a consumer never nests: a
    container query here would ask a component's box how wide the page is. */
 @media (min-width: 40rem) {
-  .dm-page { padding-inline: var(--space-10); }
+  .dm-page { padding-inline: var(--gutter-2); }
 }
-/* PAGE — same rule, the wide step. */
-@media (min-width: 80rem) {
+/* PAGE — the middle step. */
+@media (min-width: 48rem) {
+  .dm-page { padding-inline: var(--gutter-3); }
+}
+
+/* PAGE — the wide step, and the value measured at 1440. */
+@media (min-width: 64rem) {
   .dm-page { padding-inline: var(--gutter-wide); }
 }
 
@@ -486,15 +549,15 @@ b {
   font-size: var(--t-h3);
   font-weight: var(--weight-strong);
   letter-spacing: var(--track-display);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
 .dm-card__meta {
   font-size: var(--t-sm);
-  color: var(--ink-soft);
+  color: var(--on-surface-soft);
 }
 
-.dm-card__body { color: var(--ink-soft); font-size: var(--t-body); line-height: var(--lh-body); }
+.dm-card__body { color: var(--on-surface-soft); font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure-body); }
 
 /* ---- Chip ------------------------------------------------------------ */
 .dm-chip {
@@ -508,7 +571,7 @@ b {
   background-color: var(--surface);
   font-size: var(--t-sm);
   font-weight: var(--weight-body);
-  color: var(--ink);
+  color: var(--on-surface);
   transition: border-color var(--dur-fast) var(--ease);
 }
 
@@ -617,7 +680,7 @@ b {
   margin-bottom: var(--space-2);
   font-size: var(--t-body);
   font-weight: var(--weight-body);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
 .dm-field__input {
@@ -632,11 +695,11 @@ b {
   font-family: var(--font-body);
   font-size: var(--t-body);
   font-weight: var(--weight-regular);
-  color: var(--ink);
+  color: var(--on-surface);
   transition: border-color var(--dur-fast) var(--ease);
 }
 
-.dm-field__input::placeholder { color: var(--ink-soft); }
+.dm-field__input::placeholder { color: var(--on-surface-soft); }
 
 .dm-field__input:focus-visible {
   outline: none;
@@ -665,7 +728,7 @@ b {
   font-size: var(--t-sm);
 }
 
-.dm-slab__brand { color: var(--ink); font-weight: var(--weight-strong); }
+.dm-slab__brand { color: var(--on-surface); font-weight: var(--weight-strong); }
 .dm-slab__nav { display: flex; gap: var(--space-2); margin-inline-end: auto; }
 
 .dm-slab__nav a {
@@ -674,7 +737,7 @@ b {
   min-height: var(--tap-min);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--r-pill);
-  color: var(--ink);
+  color: var(--on-surface);
   text-decoration: none;
   transition: background-color var(--dur-fast) var(--ease);
 }
@@ -791,10 +854,10 @@ b {
   font-size: var(--t-h3);
   font-weight: var(--weight-strong);
   letter-spacing: var(--track-display);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
-.dm-qcard__body { color: var(--ink-soft); font-size: var(--t-body); line-height: var(--lh-body); }
+.dm-qcard__body { color: var(--on-surface-soft); font-size: var(--t-body); line-height: var(--lh-body); }
 
 /* The card's halves answer to the CARD's box, not to the screen: at 34rem of
    container the artefact sits beside the sentence instead of under it. */
@@ -812,8 +875,8 @@ b {
   text-align: center;
 }
 
-.dm-empty__title { margin: 0; font-size: var(--t-body); font-weight: var(--weight-body); color: var(--ink); }
-.dm-empty__detail { margin: var(--space-2) 0 0; font-size: var(--t-body); color: var(--ink-soft); }
+.dm-empty__title { margin: 0; font-size: var(--t-body); font-weight: var(--weight-body); color: var(--on-surface); }
+.dm-empty__detail { margin: var(--space-2) 0 0; font-size: var(--t-body); color: var(--on-surface-soft); }
 .dm-empty__action { margin-top: var(--space-6); }
 
 /* ---- Skeleton -------------------------------------------------------- */

package/kits/onionskin/src/styles.css

@@ -108,8 +108,15 @@
   --shadow-hair: 0 1px 0 0 color-mix(in srgb, var(--ink) 6%, transparent); /* MEASURED */
   --shadow-lift: 0 32px 64px -24px color-mix(in srgb, var(--ink) 28%, transparent); /* MEASURED — once */
 
-  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
-                0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent); /* MEASURED */
+  /* MEASURED, and declared LITERAL FIRST with the derived form in the `@supports` block
+     at the end of this file. The order is the guard, not a style: a custom property
+     accepts almost any token sequence, so a `color-mix()` value parses even where
+     `color-mix()` is unsupported and wins the cascade; it fails only at substitution, by
+     which point the literal is gone and `var(--focus-ring)` resolves to `unset` — an
+     invisible focus ring. Added 1.52.0; `showroom` is the pack that established the
+     mechanism and `deskmate` carries the same guard. */
+  --focus-ring: 0 0 0 4px rgba(5, 98, 239, 0.1),
+                0 4px 10px -3px rgba(5, 98, 239, 0.45);
   --focus-w: 2px;
   --focus-offset: 2px;
   --focus-color: var(--accent); /* 5.25:1 on --bg, over the 3:1 mark floor */
@@ -262,6 +269,16 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived form
+   tracks `--accent`; the literal exists so a browser without `color-mix()` still paints a
+   ring at all. The dark band inherits this ring, and its lighter accent with it. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
+                  0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent);
+  }
+}
+
 /* The pack bans bold, and a ban the UA overrides is not a ban: `strong` and `b` are 700
    by default in every browser. 500 is the heaviest weight this page spends at scale, so
    emphasis here is the medium weight — or, better, the mono. */

package/kits/test-drive/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/test-drive",
+  "globalName": "ShelegTestDrive",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": [
+    "guidelines/*.md"
+  ]
+}

package/kits/test-drive/.design-sync/conventions.md

@@ -0,0 +1,40 @@
+# Test-drive — conventions for a design agent
+
+This kit is the built form of the Test-drive style pack. Read these before generating
+anything with it; they are the pack's bans, stated where a design tool will see them.
+
+## Colour
+
+- **One coral, two tokens.** `--accent` (#e16540) lights controls, fills bars and
+  blinks carets; it carries text only at display sizes. Every body-size coral word is
+  `--action` (#c04a28). Swapping them ships the reference's own AA failure.
+- **The declared teal is dead.** The reference's theme names an accent it never
+  paints; nothing here may resurrect it.
+- **Money is coral, traffic is blue** (`--chart-money`, `--chart-traffic`), and the
+  blue never carries a word.
+- **Status is never colour alone** — a state takes the word or the glyph beside it;
+  `Delta` ships the arrow for exactly this reason.
+
+## Geometry
+
+- A control is 8px (`--r-control`), a card 16px (`--r-card`), the frame 20.8px
+  (`--r-frame`), the badge a pill. The frame's window is concentric:
+  `calc(var(--r-frame) - var(--frame-inset))`.
+- The nav is 65px, static, unfrosted, in the field's own colour.
+
+## Elevation
+
+- A card is ringed (`--ring-card`); a control is lit (`--lit-action` /
+  `--lit-quiet`); the frame gets the one big drop (`--shadow-frame`). There is no
+  fourth shadow.
+
+## The machine
+
+- Terminal, CLI and agent surfaces take `--machine-*` and ignore the theme. Their
+  tokens never reach a card, and the caret never leaves them.
+
+## Motion
+
+- 0.2s for anything a pointer caused; press scales to 0.95 over 0.15s; demos narrate
+  themselves on double-digit clocks. Nothing is scroll-driven. Under reduced motion a
+  demo shows its final frame, not its hidden first one.

package/kits/test-drive/README.md

@@ -0,0 +1,34 @@
+# @sheleg-design/test-drive
+
+The React reference kit for the **Test-drive** style pack — warm paper and white cards
+where the set piece is the live product running inside drawn browser chrome, and a
+founder's hand annotates the tour.
+
+The pack document is the source of truth for every value here:
+`plugins/sheleg-design/skills/sheleg-design/styles/test-drive.md`. This kit is what
+those values look like when they are built, and `src/styles.css` opens with the pack's
+token layer copied byte for byte — never transcribed.
+
+```bash
+npm install && npm run build   # tsc only; there is no bundler in this kit
+```
+
+## What ships
+
+**The spine**, identical in name, props and types across every SHELEG kit, so switching
+packs swaps identity rather than API: `Button`, `Card`, `Chip`, `Stat`, `Heading`,
+`Rule`.
+
+**The signature**, this pack's own: `DemoFrame` (the browser chrome around a running
+interior — the signature element), `Annotation` (the hand), `Marker` (the
+highlighter), `Delta` (a vital sign's movement), `Machine` + `Caret` (the quarantined
+terminal), `ThinkingDots` (the machine's loader), `Field` (and the `td-join` pair),
+`NavBar`, `Empty`.
+
+## The three rules a generator loses first
+
+1. The coral splits: `--accent` lights, fills and blinks; `--action` carries every
+   body-size word. `#ffffff` on `#e16540` is 3.42:1 — that is why both exist.
+2. The lit shadow belongs to controls; a card takes `--ring-card` and nothing else.
+3. The `DemoFrame` interior runs. A screenshot inside the chrome is `showroom`'s
+   exhibit, not this pack's proof.

package/kits/test-drive/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/test-drive",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/react": "^18.3.0"
+  }
+}

package/kits/test-drive/src/Annotation.md

@@ -0,0 +1,13 @@
+---
+category: Signature
+---
+
+The founder's hand: `--font-hand` (Fuzzy Bubbles) at `--t-label`, in `--ink-mute` or
+— for an offer — `--action`. It annotates from the margin, always beside or above the
+thing it points at. It never announces: no headings, no controls, no body copy in the
+hand.
+
+```tsx
+<Annotation>Interactive demo</Annotation>
+<Annotation tone="accent">2 months free</Annotation>
+```