style(runner): unify editor shell and panels on the design's type/grid scales

[sl01k]

Summary

A design-alignment pass over the runner's authoring shell and both drawers, built against the Sandbox Figma (48:6560 light / 31:6438 dark) and the docs assistant on handsontable.com/docs.

Typography & spacing

• One type scale in theme.type — base 12/20, small 10/20, row 12/16, label 10/20 + 0.8px tracking — replacing ~50 ad-hoc sizes (13/12.5/14/15/17…). Sidebar rows raised to 12px by decision; category labels stay 10.
• 4px grid discipline (8px rhythm) across the shell and app pages; geometry-locked exceptions documented inline.

Editor

• Fira Code 12/20 (bundled via @fontsource/fira-code), 16px inset, chromeless right-aligned gutter at 40% ink, editorBg token over githubDark's #0d1117 (Prec.high — the theme prop outranks plain extensions).
• The Mod-F search panel restyled to the shell idiom (the stock CM panel shipped UA-grey gradients).

Drawers

• Full height, slide-in from the right, docs-assistant chrome and shadow. Known trade-off: with a drawer open the top-bar triggers sit under it (same trade the docs panel makes); they stay keyboard-reachable.
• Ask AI: welcome + framed suggestion grid, accent user bubble with tail, flush composer with ↑ send, centered disclaimer.
• Style: 24px inset alignment, Theme Builder row layout (label + ⓘ tooltip left, control right), floating pickers with Common/Pick-color tabs and collapsible swatch groups, muted-track segmented controllers, framed component list shared with the chat suggestions, dismissible intro notice, brand chip leading the primary ramp (Generate button removed — the chip's onChange already regenerates), AI tab on the chat composer.

Classes over inline styles

• Drawer registers its stylesheet through the new installCss; panel rules live in src/panels.css on --hot-* tokens (font stacks exposed as --hot-font-*). The ADR-0026 inline-background-vs-hover trap disappears where classes took over.

E2E

Updated where intent changed: keyboard activation for panel switching under full-height drawers, transparent composer measured against the surface behind it, edit box / token rows located by class and data-token instead of inline-style sniffing.

Test plan

• pnpm typecheck (editor-shell, authoring)
• pnpm e2e e2e/panels.spec.ts e2e/style-panel.spec.ts e2e/style-apply.spec.ts — 32 passed, 14 skipped (gated suites)
• Visual pass in light and dark: editor, search panel, both drawers, all four Style tabs

🤖 Generated with Claude Code

---

Note

^{Cursor Bugbot is generating a summary for commit d87d40a. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit d87d40a. Configure here.}

[cursor]

AI tab hides theme wiring warning

Medium Severity

The AI tab replaces the whole drawer footer with the composer, so the unlinked-theme warning (applied && !applied.linked) never mounts there. AI styling still writes the module through apply, including on examples the panel cannot wire. The preview stays on the stock theme with no on-tab explanation, which reads as the assistant doing nothing.

Additional Locations (1)

• runner/apps/authoring/src/StylePanel.tsx#L601-L610

 

^{Reviewed by Cursor Bugbot for commit d87d40a. Configure here.}