[bubulux]

Design track step D3 (#340) of the rewrite epic (#326): the designer's export (Graphite, round 2) adopted as a package and proven on a specimen app.

What changed

• packages/design (@openclapper/design):
  • tokens/tokens.json is the single token source. build-tokens.mjs generates src/tokens.css and src/tokens.ts (the phone's object), and a test fails when they are stale.
  • Fonts: Atkinson Next and Mono, woff2.
  • Icons: Tabler 3.51.0 glyphs and 8 custom film glyphs as a typed table. IconName is checked at compile time, and tabler() maps a name for the phone.
  • Marks and PNGs.
  • Every component, about 80 files in 13 groups, ported from React JSX to Preact + TypeScript one to one. Class names, markup and CSS are unchanged.
  • README.md and GUIDELINES.md come from the designer's docs, adjusted to the repo.
• apps/specimen (make specimen, port 5175): every foundation card and component group in Light and Dark, plus the three kits: assembled desktop, window templates and phone.
• Checks: typecheck.sh, build-check.sh and the root test script include both. CLAUDE.md map and docs/rewrite/README.md status updated.

Decisions

• Specimen app instead of restyling the live shell (owner, 2026-11-13). The old and new systems share 36 token names with different values, and the shell is wired into the current app. The current Studio is untouched; the real shell is rebuilt in the build epic.
• Text inputs: they listen to input, because Preact's onChange is the commit event. The components' own onChange(value) callbacks keep their names. A caller's raw onChange passed through to TextInput or TextArea fires on commit.
• No new dependencies. @tabler/icons-react-native is left for the phone port.
• Two card layout slips fixed in the specimen. Both are also in the export: the OS card's fixed row height and the taskbar box height.

Checked

• make check passes: lint, typecheck, tests, builds and the Expo export.
• Compared in the browser against the export, with matching results: forms, OS chrome, overlays, the desktop kit, the phone kit (list and camera) and Dark.
• Clicked through on the desktop kit: command palette (Ctrl+K, filters while typing), minimise and the Light/Dark toggle.

Not clicked through

• Window drag, snap and task view.
• Grips, chart tooltips and the Tree.
• The window templates kit, and most foundation cards beyond a load.

Open

• React Native components: src/phone/ has only web references.
• TTF fonts for the phone.

🤖 Generated with Claude Code