tegwick
552d8fe926
Extend make adapt-lit beyond tokens: parse src/elements/*.js, compare each IR component contract against its <wn-*> element, and emit per-component drift reports + a machine roll-up (adapters/lit/drift/), with write-once stubs (adapters/lit/stubs/) for genuinely new components. Never overwrites hand-authored sources. - Severity split: actionable drift (prop-missing, attribute-mismatch, variant-axis-missing, tag-mismatch) gates with exit 3; non-portable + prop-extra are informational (the IR carries React style/onClick; Lit is richer than the minimal designbook) and don't gate. - Current state: 7 ok, 3 actionable drift for human triage — PipelineStrip (wn-pipeline-strip vs hand-authored wn-pipeline rename), PageHeader (actions is a slot, not a prop), Sidebar (IR 'current' axis absent on the element). - _report.json reuses generatedAt/irRef when drift is unchanged (no git churn). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lit reference adapter
Projects the technology-neutral IR (ir/) onto the Lit stack. This is the
reference adapter — the contract every stack adapter implements lives in
adapters/ADAPTER_CONTRACT.md.
Run it with make adapt-lit (adapters/lit/adapt.mjs).
What it does
Per the contract, an adapter is scaffold + drift-detect, never a rewrite:
| Concern | Behaviour | Status |
|---|---|---|
| Tokens | Fully generated from ir/tokens.json into the :root block of src/styles/colors_and_type.css, between @generated tokens markers. Deterministic — re-running with an unchanged IR is a byte-identical no-op. The hand-authored type/utility CSS after the block is preserved. |
done (T06) |
| New component | Generate a <wn-*> Lit stub from the IR contract's prop→attribute map + a behaviour TODO. |
T07 |
| Changed component | Emit a drift report (adapters/lit/drift/<Name>.md) — never overwrite the hand-authored element. |
T07 |
Directionality
One-way: React → ir/ → Lit. This adapter is downstream of the IR; it never
writes back to ir/ or to the React designbook. A change to the shared language is
made in Claude Design and re-propagated (make designbook-pull && make ir && make adapt-lit). See .claude/rules/designbook-propagation.md.
Token regeneration is a visual change
Because tokens are fully generated, regenerating them can change rendered appearance when the canonical React designbook has moved (e.g. a font-stack or colour change). That makes the Playwright baselines diverge by design — it is a human review point, not an error:
make adapt-lit # regenerates tokens
pnpm test:visual # will fail where appearance changed
# review the change, then if correct:
pnpm test:visual:update # accept new baselines
Never run test:visual:update to silence a token change without reviewing it — that
defeats the parity gate (T08).
Exit codes
0 ok · 2 usage/config · 3 drift detected · 4 parity failure · 5 internal.