ehoandClaude Opus 4.8
a828e604d1
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>
1.6 KiB
1.6 KiB
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
?rawimports with// #region namemarkers + a tiny pure extractor; render with lightweight highlighting. No moreinnerHTMLliterals. - 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/leaveon the fold/union demos + a "step throughreduce" animation for the TEA loop; keep reduced-motion-safe.
Files
src/app/showcase/concepts.page.ts— replaceinnerHTMLsnippets 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 cigreen.