[Task] Data Modules + Design Token Extraction

[conorluddy]

Context

Part of #8 (Web Components Migration).

The current index.html has all data structures and CSS inlined. These need to be extracted into ES modules and CSS files that components will import. This runs in parallel with #9 (Store + Logic) — neither depends on the other.

Scope

Create:

• src/data.js — SLIDER_DEFINITIONS, PRESETS, TAB_GROUPS, COST_WEIGHTS, COST_LABELS
• src/flags.js — FLAG_REGISTRY, CATEGORIES, SLIDER_CONTROLLED_FLAGS (computed Set)
• src/styles/tokens.css — CSS custom properties (design tokens)
• src/styles/shared.css — Shared component patterns (card, button, badge, toggle, input)
• src/styles/shared.js — Exports Constructable Stylesheets

Read (reference only):

• index.html lines 25-180 (all CSS)
• index.html lines 1126-1446 (FLAG_REGISTRY, CATEGORIES, loadVersion)
• index.html lines 1449-1536 (SLIDER_DEFINITIONS, PRESETS, TAB_GROUPS, SLIDER_CONTROLLED_FLAGS)

Current State

• SLIDER_DEFINITIONS (line 1449): 4 slider configs with positions mapping to flags + costWeights
• PRESETS (line 1491): 4 built-in presets with slider positions + extra flags
• TAB_GROUPS (line 1518): 7 category tab definitions
• CATEGORIES (line 1397): 17 category definitions with labels + hasUsageFlags
• FLAG_REGISTRY (line 1126): ~226 flag objects (inline data from version 2.1.109)
• SLIDER_CONTROLLED_FLAGS (line 1529): Set computed from SLIDER_DEFINITIONS
• CSS: ~180 lines of custom properties + component styles in <style> block

Target State

• src/data.js: Named exports for SLIDER_DEFINITIONS, PRESETS, TAB_GROUPS, COST_WEIGHTS, COST_LABELS. Verbatim lift — no logic changes.
• src/flags.js: Named exports for FLAG_REGISTRY (mutable — replaced on version change), CATEGORIES, SLIDER_CONTROLLED_FLAGS (computed once from SLIDER_DEFINITIONS import). Also exports loadVersion(version) function that fetches from flags/{version}.json and replaces the registry.
• src/styles/tokens.css: All :root custom properties + light mode overrides. Uses @layer tokens.
• src/styles/shared.css: Component patterns extracted from current <style> — .card, .btn, .badge, .toggle, .input, .flag-row, etc. Uses @layer components.
• src/styles/shared.js: Creates CSSStyleSheet objects via new CSSStyleSheet() + replaceSync(). Exports tokenSheet and sharedSheet for components to adopt.

Implementation Hints

• SLIDER_CONTROLLED_FLAGS should be computed on module load: iterate SLIDER_DEFINITIONS positions, collect all flag keys into a Set
• loadVersion() should update both FLAG_REGISTRY and CATEGORIES — consider exporting a function that returns the current values so consumers always get the latest
• For Constructable Stylesheets, import CSS as text using a raw fetch or inline the CSS as template literals in shared.js. Since there's no bundler, the simplest approach is to use fetch() for the CSS files and replaceSync() the content — but that's async. Alternative: embed CSS as tagged template literals directly in shared.js for synchronous availability.
• CSS @layer ordering: define @layer tokens, base, components, overrides; in tokens.css
• Consider CSS light-dark() for the theme tokens (can be done in Polish issue #XX, but structuring tokens.css to support it now is free)

Dependencies

None — this is a foundation issue. Runs in parallel with #9.

Definition of Done

• src/data.js exports all 5 data structures
• src/flags.js exports FLAG_REGISTRY, CATEGORIES, SLIDER_CONTROLLED_FLAGS, loadVersion()
• src/styles/tokens.css contains all design tokens with @layer tokens
• src/styles/shared.css contains shared component patterns with @layer components
• src/styles/shared.js exports tokenSheet and sharedSheet as CSSStyleSheet objects
• All imports use file extensions (.js)
• Data structures are identical to current inlined versions (diff-verifiable)

Verification

1. Import data.js in a test file, verify SLIDER_DEFINITIONS.thinking.positions.length === 5
2. Import flags.js, verify FLAG_REGISTRY.length matches current count (~226)
3. Import shared.js, verify tokenSheet instanceof CSSStyleSheet
4. Create a test element with Shadow DOM, adopt the sheets, verify styles apply