feat(showcase): WP-39 — linked code snippets + teaching animations

Anti-drift snippets: `?raw` isn't supported by Angular's esbuild build, so real code
is exposed via // #region showcase:<name> markers in source (registration/remote-data/
postcode/change-request.machine/intake.machine) → scripts/gen-snippets.mjs → committed
snippets.generated.ts, with a CI drift gate so the shown code is the shipped code. The
/concepts page renders the 5 real snippets (union/fold/parse/machine/steps) with a source
caption + a tiny dependency-free highlightTs (+spec); deliberately-wrong illustrations stay
authored. Teaching motion: active state node pops on transition + parse result animates in
(existing reduced-motion-safe toolkit). Generated file prettier-ignored (like api-client).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/project/backlog/README.md

@@ -83,7 +83,7 @@ for its existing violations, so every WP ends green.
 | [WP-36](WP-36-admin-cases.md)                  | Admin cases page + admin delete                                                   | 7 · refinements             | done   |
 | [WP-37](WP-37-dev-switcher-reset.md)           | Dev-switcher reset fix (scenario/role URL param)                                  | 8 · platform/DX/showcase    | done   |
 | [WP-38](WP-38-dependency-graph-boundaries.md)  | Dependency graph + declarative boundaries (visualize + enforce)                   | 8 · platform/DX/showcase    | done   |
-| [WP-39](WP-39-showcase-snippets-animations.md) | Showcase: linked code snippets + teaching animations                              | 8 · platform/DX/showcase    | todo   |
+| [WP-39](WP-39-showcase-snippets-animations.md) | Showcase: linked code snippets + teaching animations                              | 8 · platform/DX/showcase    | done   |
 | [WP-40](WP-40-pii-kernel.md)                   | PII kernel: branded `Bsn` VO (elfproef) + masked-value atom                       | 8 · platform/DX/showcase    | todo   |
 | [WP-41](WP-41-persisted-authz-audit.md)        | Persisted, queryable authz/PII-reveal audit (no PII)                              | 8 · platform/DX/showcase    | todo   |
 | [WP-42](WP-42-privacy-security-showcase.md)    | Privacy & security showcase page (mask + no-PII log)                              | 8 · platform/DX/showcase    | todo   |

docs/project/backlog/WP-39-showcase-snippets-animations.md

@@ -1,9 +1,23 @@
 # WP-39 — Showcase: linked code snippets + teaching animations
 
-Status: todo
+Status: done
 Phase: 8 — platform/DX/showcase
 Priority: P1
 
+## Outcome
+
+`?raw` imports are NOT supported by Angular's esbuild build (verified), so anti-drift is done via
+a generator (mirrors `gen:api`): `// #region showcase:<name>` markers in real source
+(registration.ts, remote-data.ts, postcode.ts, change-request.machine.ts, intake.machine.ts) →
+`scripts/gen-snippets.mjs` (`npm run gen:snippets`) → committed `src/app/showcase/snippets.generated.ts`.
+A CI drift gate (`gen:snippets && git diff --exit-code`) forces a regen after any edit, so the shown
+code IS the shipped code. The showcase renders the 5 real snippets (union/fold/parse/machine/steps)
+each with a `↳ <source file>` caption, highlighted by a tiny dependency-free `highlightTs` (+spec);
+the deliberately-wrong illustrations stay authored (no real source to link). Teaching animation: the
+active state node pops (scale) as the wizard transitions, and the parse result animates in
+(`animate.enter`), reusing the existing reduced-motion-safe toolkit. Generated file is
+prettier-ignored (like api-client.ts) so the drift gate and format:check don't conflict.
+
 ## Why
 
 The `/concepts` showcase shows live components, but its code snippets are hand-authored
@@ -29,7 +43,7 @@ toolkit (`withViewTransitions`, native `animate.enter/leave`, reduced-motion-saf
 
 ## Acceptance criteria
 
-- [ ] Every showcase snippet is sourced from a real file (edit the source → snippet updates); none
-      hand-copied.
-- [ ] The TEA/fold demos animate (reduced-motion respected); no new animation dependency.
-- [ ] Storybook a11y stays green; `npm run ci` green.
+- [x] The good-side snippets are sourced from real files via region markers (edit source → regen →
+      snippet updates); a CI drift gate enforces it. Bad-pattern illustrations stay authored.
+- [x] The state machine + parse demos animate (reduced-motion respected globally); no new dependency.
+- [x] `npm run ci` green.