docs(backlog): add Phase 8 — platform/DX/showcase (WP-37..46)
New phase from the 5-item analysis: linked showcase snippets + animations, runnable scaffolding generators (pages/wizards/context/SSP), dependency graph + declarative boundaries, PII hardening (branded Bsn VO + masked-value atom + persisted no-PII audit) doubling as a privacy showcase, and Vitest coverage. Goal: both a teaching showcase and a production starter template. Sequenced with priorities + dependencies in the README. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
# WP-39 — Showcase: linked code snippets + teaching animations
|
||||
|
||||
Status: todo
|
||||
Phase: 8 — platform/DX/showcase
|
||||
Priority: P1
|
||||
|
||||
## Why
|
||||
|
||||
The `/concepts` showcase shows live components, but its code snippets are hand-authored
|
||||
`innerHTML` strings with manual highlighting — they drift from the real code. And the animation
|
||||
toolkit (`withViewTransitions`, native `animate.enter/leave`, reduced-motion-safe keyframes in
|
||||
`styles.scss`) is proven in dashboard/upload but unused for teaching motion.
|
||||
|
||||
## Decisions
|
||||
|
||||
- **Anti-drift snippets:** load _real_ source excerpts via Vite `?raw` imports with `// #region name`
|
||||
markers + a tiny pure extractor; render with lightweight highlighting. No more `innerHTML` literals.
|
||||
- On the Storybook/MDX side, use `<Source>`/Canvas "show code" consistently (extend beyond the
|
||||
current 4 of 14 pages).
|
||||
- **Reuse** the existing motion toolkit (no new animation lib): `animate.enter/leave` on the
|
||||
fold/union demos + a "step through `reduce`" animation for the TEA loop; keep reduced-motion-safe.
|
||||
|
||||
## Files
|
||||
|
||||
- `src/app/showcase/concepts.page.ts` — replace `innerHTML` snippets with `?raw`+region excerpts;
|
||||
apply animations.
|
||||
- New tiny extractor util (pure) + spec (region slicing).
|
||||
- `src/docs/machines.mdx`, `fp-in-ui.mdx`, `remote-data.mdx` — reference the live linked snippets.
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user