sheleg-design-skill 1.52.0 → 1.54.0

package/CHANGELOG.md

@@ -6,6 +6,105 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.54.0] - 2026-08-29
+
+### The thirty-eighth pack — the terrain is mapped
+
+**`surveyor`**, extracted from an AI-visibility tracker's front page and named per
+ADR-0001 for the register it encodes: a page that sells a survey of terrain the
+buyer cannot see — contour lines for texture, counted stat slabs for readings, and
+the product appearing only as flat portraits.
+
+### Added
+
+- `styles/surveyor.md` — widened, all thirteen headings; `Themes: light only`;
+  `Rank: unordered — 3 status role(s)`, and the missing warn is a stated decision
+  rather than a gap: the authored palette ships no amber, and one invented from the
+  WordPress vendor presets would be the exact rule-7 trap. Two forks written from
+  both sides: against `test-drive` (a flat portrait against a running machine on
+  the same warm paper) and against `showroom` (a field survey pinned flat against
+  one lit museum specimen).
+- `styles/tokens/surveyor.css` — the authored layer dug out of a WordPress site:
+  SE Ranking's own `se-uikit` tokens verified against the render, with the vendor
+  preset `:root` (a full palette that paints nothing) left behind. The corrections
+  climb the reference's own ladder: its CTA label measures `#ffffff` on `#0d9488`
+  at 3.74:1, so the hover step `#0a7269` becomes the text-bearing `--action` and
+  the brand teal keeps large-only jobs; the pink that answers (`#ff91da`, 1.84:1)
+  gains a speaking step `--pink-deep` `#a83f88` at 5.32:1. The page's elevation
+  model is recorded as measured: box-shadow none everywhere except the nav after
+  it detaches on scroll.
+- `kits/surveyor/` — the six-name spine plus `StatSlab`, `Delta`, `Portrait`,
+  `TintPanel`, `Closer`, `Dialogue`, `Pulse`, `Field`, `NavBar`, `Empty`. The
+  contour terrain ships as a CSS technique (`repeating-radial-gradient` rings)
+  over the three measured line inks, because a PNG asset cannot live in a token
+  layer.
+- `test/scenarios.md` T36 — `surveyor` against `test-drive`, the warm-paper
+  analytics-landing fork, with its negative branch per standing instruction 4.
+- ADR-0001 gains its fifteenth application: `surveyor`, with `contour`, `atlas`,
+  `heatmap`/`benchmark` and `field-survey` weighed and rejected.
+
+### Changed
+
+- `test-drive` and `showroom` each gain the reciprocal fork clause naming
+  `surveyor`.
+- Counted claims moved with the tree: thirty-eight packs and kits across
+  `SKILL.md`, the index (six core / thirty-two widened), `SURFACE_COMPOSITION.md`
+  (the accent is `--accent` in 35 of the 38; twenty-five layers carry a
+  non-text role), `FIGMA_BRIDGE.md` (twelve of the thirty-eight ship a twin),
+  the template's theme split (12/17/9), README, DOCMAP, both installers and all
+  three manifests.
+
+## [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-eight 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,8 @@ 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) |
+| `surveyor` | peach paper where **an unseen terrain is mapped** — fine contour lines as the one texture, flat white and tinted cards with no shadow anywhere, a teal whose text-bearing steps are the reference's own hover ladder, a pink that answers but may not speak, and the product appearing only as flat portraits | **visibility, monitoring and benchmark tools** — AI-search and SEO trackers, share-of-voice and brand-listening platforms sold to marketing teams (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 +178,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-eight 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 +249,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-eight 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 +299,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-eight
 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-eight 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,14 @@ ${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),
+                       surveyor (peach paper mapping unseen terrain in
+                       contour lines, flat shadowless cards, a teal that
+                       states and a pink that answers, and the product
+                       shown only as portraits),
                        babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +

package/cursor/rules/sheleg-design.mdc

@@ -125,6 +125,19 @@ 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;
+surveyor — warm peach paper where an unseen terrain is mapped: fine contour lines as
+the single texture, flat white and tinted cards with no shadow anywhere but the
+detached nav, one teal whose text-bearing steps climb the reference's own hover
+ladder, a pink that answers but may not speak, TT Fors at a 600 ceiling with tabular
+numerals, and the product shown only as flat portraits, for visibility, monitoring
+and benchmark tools sold to marketing teams;
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/surveyor/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/surveyor",
+  "globalName": "ShelegSurveyor",
+  "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/surveyor/.design-sync/conventions.md

@@ -0,0 +1,35 @@
+# Surveyor — conventions for a design agent
+
+This kit is the built form of the Surveyor style pack. Read these before generating
+anything with it; they are the pack's bans, stated where a design tool will see them.
+
+## Colour
+
+- **The teal is a ladder and the roles are shifted one step down**: `--action`
+  (#0a7269) carries every word and text-bearing fill; `--accent` (#0d9488) is
+  large-only — stat figures, marks, the Q glyph. White body copy on #0d9488 (3.74:1)
+  is the reference's recorded failure; do not restore it.
+- **The pink never speaks at `--pink`** (1.84:1 on the field): glyphs, series and
+  tints only. A pink word is `--pink-deep`.
+- **Tense as tint**: mint = shipping, pink = coming. Swapping them lies.
+- **Three statuses, no warn** — an amber here would be an invented value.
+
+## Geometry
+
+- Controls 10px, cards 24px, panels 32px, badges 6px, pill 99px. The corpus's 20
+  and 12 are nested instances (24−4, 20−8), never free values.
+- Nothing is bolder than 600, and the heading tracking RELAXES at narrow widths.
+
+## Elevation
+
+- Flat. White/mint/pink tints on peach are the whole depth. The one shadow is the
+  detached nav's, toggled on scroll.
+
+## Proof
+
+- The product appears as `Portrait` — a flat still. No browser chrome, no
+  spotlight, no animation inside the image.
+
+## Motion
+
+- One 0.2s clock and one pulse ring. Nothing moves, lifts, scales or scrolls.

package/kits/surveyor/README.md

@@ -0,0 +1,33 @@
+# @sheleg-design/surveyor
+
+The React reference kit for the **Surveyor** style pack — warm peach paper where an
+unseen terrain is mapped: contour lines for texture, flat portraits for proof, a teal
+that states and a pink that answers.
+
+The pack document is the source of truth for every value here:
+`plugins/sheleg-design/skills/sheleg-design/styles/surveyor.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: `Button`,
+`Card`, `Chip`, `Stat`, `Heading`, `Rule`.
+
+**The signature**: `StatSlab` (the counted reading in the working hue), `Delta` (a
+reading's movement, arrow included), `Portrait` (the flat still), `TintPanel` (tense
+as tint), `Closer` (the one dark slab — the signature element), `Dialogue` (the
+teal-Q/pink-A pair), `Pulse` (the one loop), `Field`, `NavBar`, `Empty`.
+
+## The three rules a generator loses first
+
+1. The page is flat: no shadow on anything but the detached nav, and elevation is a
+   tint. A `shadow-md` is a foreign object.
+2. The teal ladder is shifted for AA: `--action` `#0a7269` writes and fills;
+   `--accent` `#0d9488` is large-only (`#ffffff` on it is 3.74:1).
+3. The pink answers, it does not speak: `--pink` for glyphs and tints beside
+   readable ink, `--pink-deep` when pink must carry a word.

package/kits/surveyor/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/surveyor",
+  "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/surveyor/src/Button.md

@@ -0,0 +1,17 @@
+---
+category: Actions
+---
+
+One height (`--control-h`, 48px: 12×24 padding on 16px/500) at `--r-control`, and a
+fill that only ever changes colour — no shadow, no scale, no travel. `primary` rests
+on `--action` (the reference's own hover step, promoted for AA: `#ffffff` on
+`#0a7269` is 5.79:1) and hovers to `--action-hover`. `secondary` is the measured
+outline: transparent on the field with a 1px `--ink` border. `ghost` tints `--mint`
+on hover. Disabled keeps the reference's own literal pair.
+
+Focus is the pack's correction: the fill step **and** a 2px `--focus-color` outline.
+
+```tsx
+<Button>Start free trial</Button>
+<Button variant="secondary">Book a demo</Button>
+```

package/kits/surveyor/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={['sv-btn', `sv-btn--${variant}`, `sv-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/surveyor/src/Card.md

@@ -0,0 +1,11 @@
+---
+category: Surfaces
+---
+
+A card is `--surface` at `--r-card` (24px) with 24px padding and **nothing else** —
+no border, no shadow, no hover. Elevation on this page is a tint, and the one drop
+shadow belongs to the detached nav.
+
+```tsx
+<Card title="Business owners">…</Card>
+```

package/kits/surveyor/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={['sv-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="sv-card__head">
+          {title !== undefined && <h3 className="sv-card__title">{title}</h3>}
+          {meta !== undefined && <span className="sv-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="sv-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/surveyor/src/Chip.md

@@ -0,0 +1,11 @@
+---
+category: Data
+---
+
+A 6px-radius badge in a tense tint: default is `--mint` with `--action` text
+("Coming soon" ships mint in the reference), `accent` is `--pink-wash` with
+`--pink-deep`. A chip never carries a status alone — `Delta` does states.
+
+```tsx
+<Chip>Coming soon</Chip>
+```

package/kits/surveyor/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={[
+        'sv-chip',
+        `sv-chip--${tone}`,
+        selected ? 'sv-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/surveyor/src/Closer.md

@@ -0,0 +1,14 @@
+---
+category: Signature
+---
+
+**The signature element.** The page's only dark object: an `--accent` slab at
+`--r-panel` with two white contour origins bleeding off its edges, a white heading
+(3.74:1 — legal at heading sizes only, which is why `support` renders at the
+24px question size and never body), and one white outline control. One per page;
+a second closer has spent the device twice and broken it both times.
+
+```tsx
+<Closer title="Need a custom plan?" support="Contact our team."
+  action={<Button variant="secondary">Book a demo</Button>} />
+```

package/kits/surveyor/src/Closer.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface CloserProps {
+  /** The heading — white on the brand teal is legal at heading sizes only. */
+  title: string;
+  /** One line of support copy, kept at heading scale. */
+  support?: string;
+  /** One white outline control. */
+  action: ReactNode;
+  className?: string;
+}
+
+export function Closer({ title, support, action, className }: CloserProps) {
+  return (
+    <section className={['sv-closer', className].filter(Boolean).join(' ')}>
+      <h2 className="sv-closer__title">{title}</h2>
+      {support !== undefined && <p className="sv-closer__support">{support}</p>}
+      <span className="sv-closer__action">{action}</span>
+    </section>
+  );
+}

package/kits/surveyor/src/Delta.md

@@ -0,0 +1,12 @@
+---
+category: Signature
+---
+
+A reading's movement: number first, arrow second, hue third. Rising takes the
+action family; falling takes `--pink-deep` — the *speaking* pink at 5.32:1, never
+the glyph pink. The arrow ships inside the component because status is never
+colour alone.
+
+```tsx
+<Delta direction="down">1,3</Delta>
+```

package/kits/surveyor/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={['sv-delta', `sv-delta--${direction}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+      <span aria-hidden="true" className="sv-delta__arrow">
+        {direction === 'up' ? '\u2191' : '\u2193'}
+      </span>
+    </span>
+  );
+}

package/kits/surveyor/src/Dialogue.md

@@ -0,0 +1,11 @@
+---
+category: Signature
+---
+
+The two voices: a teal Q glyph beside the question, a pink A glyph beside the
+answer. The glyphs carry the voice; the words stay in ink — `--pink` measures
+1.84:1 on the field, which is exactly why the glyph is never the only carrier.
+
+```tsx
+<Dialogue question="Which AI systems does it monitor?">ChatGPT, Gemini…</Dialogue>
+```

package/kits/surveyor/src/Dialogue.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface DialogueProps {
+  /** The teal Q glyph and the question. */
+  question: string;
+  /** The pink A glyph and the answer body. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function Dialogue({ question, children, className }: DialogueProps) {
+  return (
+    <div className={['sv-dialogue', className].filter(Boolean).join(' ')}>
+      <div className="sv-dialogue__q">
+        <span className="sv-dialogue__glyph sv-dialogue__glyph--q" aria-hidden="true">Q</span>
+        <h3 className="sv-dialogue__question">{question}</h3>
+      </div>
+      <div className="sv-dialogue__a">
+        <span className="sv-dialogue__glyph sv-dialogue__glyph--a" aria-hidden="true">A</span>
+        <div className="sv-dialogue__answer">{children}</div>
+      </div>
+    </div>
+  );
+}

package/kits/surveyor/src/Empty.md

@@ -0,0 +1,13 @@
+---
+category: Surfaces
+---
+
+On a page whose subject is coverage, an empty state is a **reading of zero** —
+write it as a reading ("No mentions yet in this engine"), not an apology. A
+`--surface` card, one 16px/500 line, one sentence in `--ink-body`, one outline
+control.
+
+```tsx
+<Empty title="No mentions yet in this engine"
+  hint="Add prompts to start the survey." action={<Button variant="secondary">Add prompts</Button>} />
+```

package/kits/surveyor/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={['sv-empty', className].filter(Boolean).join(' ')}>
+      <span className="sv-empty__title">{title}</span>
+      {hint !== undefined && <span className="sv-empty__hint">{hint}</span>}
+      {action !== undefined && <span className="sv-empty__action">{action}</span>}
+    </div>
+  );
+}

package/kits/surveyor/src/Field.md

@@ -0,0 +1,12 @@
+---
+category: Actions
+---
+
+The landing ships no visible form, so the field is the pack's decision derived
+from the control geometry: `--control-h` on `--surface`, 1px `--line` border,
+`--r-control`, placeholder in `--ink-faint`. Invalid moves the border to
+`--danger` **and** writes the message in it.
+
+```tsx
+<Field label="Work email" placeholder="you@company.com" />
+```

package/kits/surveyor/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={['sv-field', className].filter(Boolean).join(' ')}>
+      {label !== undefined && <span className="sv-field__label">{label}</span>}
+      <input
+        className={['sv-field__input', invalid ? 'sv-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="sv-field__message">{message}</span>
+      )}
+    </label>
+  );
+}