sheleg-design-skill 1.52.0 → 1.53.0

package/CHANGELOG.md

@@ -6,6 +6,57 @@ 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

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/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>
+```

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export interface AnnotationProps {
+  /** `accent` writes in --action; default writes in --ink-mute. */
+  tone?: 'mute' | 'accent';
+  children: ReactNode;
+  className?: string;
+}
+
+export function Annotation({ tone = 'mute', children, className }: AnnotationProps) {
+  return (
+    <span
+      className={['td-annotation', `td-annotation--${tone}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+Every control is an 8px-radius block at `--control-h` (48px) with `--control-px` of
+horizontal padding, 16px at `--weight-control`. `sm` is `--control-h-sm` (32px) — the
+nav's measured pair, and the reason `--tap-min` exists as a correction.
+
+`primary` fills with `--action`, labels in `--on-action` at 4.94:1 on `#c04a28`, and is
+lit by `--lit-action` — the four-layer coral recipe. Hover moves the fill to
+`--action-hover`, the resolved form of the reference's own
+`color-mix(in oklab, fill 90%, #000)`. `secondary` is `--surface` with a `--hairline`
+border and `--lit-quiet`; hover brightens the glow to `--lit-quiet-hover`, and the
+control itself does not move. `ghost` is transparent until hover fills it with
+`--hairline`.
+
+Press scales to `--press-scale` (0.95) over `--dur-press`. Focus is one mechanism: a
+`--focus-w` outline in `--focus-color` at `--focus-offset`.
+
+```tsx
+<Button>Add my website</Button>
+<Button variant="secondary" size="sm">Log in</Button>
+```

package/kits/test-drive/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — at most one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['td-btn', `td-btn--${variant}`, `td-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,14 @@
+---
+category: Surfaces
+---
+
+A card is `--surface` at `--r-card` with `--ring-card` — a 1px 6% ring plus a soft
+1–2px drop, no border property, and never the lit shadow, which belongs to controls.
+The title is `--t-h3` at `--weight-display`; meta sits right-aligned in `--ink-mute`.
+Body copy holds `--measure-body`.
+
+Cards do not hover, do not nest, and never paint a `--machine-*` token.
+
+```tsx
+<Card title="Web analytics" meta="live">…</Card>
+```

package/kits/test-drive/src/Card.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, an id, a timestamp. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['td-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="td-card__head">
+          {title !== undefined && <h3 className="td-card__title">{title}</h3>}
+          {meta !== undefined && <span className="td-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="td-card__body">{children}</div>
+    </section>
+  );
+}

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

@@ -0,0 +1,13 @@
+---
+category: Data
+---
+
+A pill at `--r-badge` on `--surface` with a `--hairline` border, `--t-label` at
+`--weight-control`. `accent` fills with `--accent-wash` and writes in `--action`;
+`selected` moves the border and label to `--action`. A chip never carries a status
+colour — states live in `Delta` and the word beside it.
+
+```tsx
+<Chip>codefa.st</Chip>
+<Chip tone="accent" selected>Last 30 days</Chip>
+```

package/kits/test-drive/src/Chip.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={[
+        'td-chip',
+        `td-chip--${tone}`,
+        selected ? 'td-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,11 @@
+---
+category: Signature
+---
+
+A vital-sign's movement: the number first, the arrow second, the hue third — `--good`
+up, `--danger` down, and never the colour alone, which is why the arrow ships inside
+the component. Sits in a `Stat`'s source slot.
+
+```tsx
+<Stat value="83%" label="Bounce rate" source={<Delta direction="up">1%</Delta>} />
+```

package/kits/test-drive/src/Delta.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface DeltaProps {
+  /** The arrow is the second encoding; the number beside it is the first. */
+  direction: 'up' | 'down';
+  children: ReactNode;
+  className?: string;
+}
+
+export function Delta({ direction, children, className }: DeltaProps) {
+  return (
+    <span
+      className={['td-delta', `td-delta--${direction}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+      <span aria-hidden="true" className="td-delta__arrow">
+        {direction === 'up' ? '\u2191' : '\u2193'}
+      </span>
+    </span>
+  );
+}

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

@@ -0,0 +1,19 @@
+---
+category: Signature
+---
+
+**The signature element.** Browser chrome at `--r-frame` in `--machine-chrome` — three
+traffic-light dots in the measured `--frame-dot-*` hues, the real address centered in
+`--on-machine` — around a running interior on `--surface`, with `--shadow-frame`
+under it. The window is concentric: `calc(var(--r-frame) - var(--frame-inset))`.
+
+The interior must run — an iframe of the live product, or a self-narrating demo built
+from `Machine`, `Caret` and `ThinkingDots`. A frozen screenshot inside this chrome is
+the one thing the pack bans outright. Anchor an `Annotation` outside the frame's top
+corner to say what the reader should notice.
+
+```tsx
+<DemoFrame url="https://datafa.st/codefa.st">
+  <iframe src="/demo" title="Live demo" />
+</DemoFrame>
+```

package/kits/test-drive/src/DemoFrame.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface DemoFrameProps {
+  /** The address shown in the chrome bar — a real one; the frame quotes a live app. */
+  url: string;
+  /** The running interior — an iframe, or a self-narrating demo. Never a still. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function DemoFrame({ url, children, className }: DemoFrameProps) {
+  return (
+    <figure className={['td-frame', className].filter(Boolean).join(' ')}>
+      <div className="td-frame__chrome">
+        <span className="td-frame__dots" aria-hidden="true">
+          <i className="td-frame__dot td-frame__dot--red" />
+          <i className="td-frame__dot td-frame__dot--amber" />
+          <i className="td-frame__dot td-frame__dot--green" />
+        </span>
+        <span className="td-frame__url">{url}</span>
+      </div>
+      <div className="td-frame__window">{children}</div>
+    </figure>
+  );
+}

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

@@ -0,0 +1,13 @@
+---
+category: Surfaces
+---
+
+An empty screen is a state, not an absence: a `--surface` card holding one 16px/500
+line, one sentence in `--ink-mute`, and one quiet control that starts the demo — this
+pack always has a demo to offer. A zero in a metric renders as a figure in its tile,
+the way the reference's dashboard ships "Online 0".
+
+```tsx
+<Empty title="No data yet" hint="Add your website to start the tour."
+  action={<Button variant="secondary">Try the live demo</Button>} />
+```

package/kits/test-drive/src/Empty.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface EmptyProps {
+  /** One line in --ink, 16px/500. */
+  title: string;
+  /** One sentence in --ink-mute. */
+  hint?: string;
+  /** One quiet control that starts the demo — this pack always has one to offer. */
+  action?: ReactNode;
+  className?: string;
+}
+
+export function Empty({ title, hint, action, className }: EmptyProps) {
+  return (
+    <div className={['td-empty', className].filter(Boolean).join(' ')}>
+      <span className="td-empty__title">{title}</span>
+      {hint !== undefined && <span className="td-empty__hint">{hint}</span>}
+      {action !== undefined && <span className="td-empty__action">{action}</span>}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+---
+category: Actions
+---
+
+A `--control-h` input on `--surface` with a `--hairline-strong` border at
+`--r-control`, placeholder in `--ink-mute`. Focus is the pack's one focus contract.
+Invalid moves the border to `--danger` **and** shows the message — never the colour
+alone.
+
+The hero's joined pair wraps a `Field` and a `Button` in `td-join`: one 8px outer
+radius, square seam edges — the measured shape of the reference's URL capture.
+
+```tsx
+<div className="td-join">
+  <Field placeholder="website.com" />
+  <Button>Add my website</Button>
+</div>
+```

package/kits/test-drive/src/Field.tsx

@@ -0,0 +1,38 @@
+export interface FieldProps {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  invalid?: boolean;
+  /** Shown under the field when invalid — the colour never carries the state alone. */
+  message?: string;
+  className?: string;
+}
+
+export function Field({
+  label,
+  placeholder,
+  value,
+  onChange,
+  invalid = false,
+  message,
+  className,
+}: FieldProps) {
+  return (
+    <label className={['td-field', className].filter(Boolean).join(' ')}>
+      {label !== undefined && <span className="td-field__label">{label}</span>}
+      <input
+        className={['td-field__input', invalid ? 'td-field__input--invalid' : undefined]
+          .filter(Boolean)
+          .join(' ')}
+        placeholder={placeholder}
+        value={value}
+        aria-invalid={invalid || undefined}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+      {invalid && message !== undefined && (
+        <span className="td-field__message">{message}</span>
+      )}
+    </label>
+  );
+}

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

@@ -0,0 +1,13 @@
+---
+category: Foundations
+---
+
+One face announces everything: DM Sans at `--weight-display` (800), tracked
+`--track-display` (−0.025em) at every display size. Level 1 is the display — 36px
+below 48rem, 60px from it, stepping rather than flowing, at `--lh-display` (1). Level
+2 steps 30 → 48; level 3 holds 36. The hand (`Annotation`) never takes a heading's
+job.
+
+```tsx
+<Heading level={1}>Revenue-first analytics</Heading>
+```

package/kits/test-drive/src/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = display (60px), 2 = section (48px), 3 = card head (36px). */
+  level?: 1 | 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Heading({ level = 2, children, className }: HeadingProps) {
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
+  return (
+    <Tag
+      className={['td-heading', `td-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}