feat(viz): shared stack-and-heap views that draw any snapshot

[mnaimfaizy]

Summary

PR 4 of the ADR 0004 build plan. The Stack ↔ Heap story now renders through shared 2D and 3D views, and a Playground trace will use the same ones. The story itself is unchanged.

• Shared views. StackHeapView2D (src/shared/components/viz/stackheap/) and StackHeapView3D (src/shared/viz3d/stackheap/) take a placed snapshot, a focus list and a palette variant. StackHeap2D and StackHeap3D are now thin wrappers, and the story shell did not change.
• Beyond the story. Both views handle any heap grid and stack depth, the function and scope kinds, references that point back at a frame, dangling references, and a markUnreachable option. A grid prop pins the layout for a whole trace, so no cell shifts when a later step adds objects.
• Placement. placeSnapshot / placeTrace (src/shared/snapshot/placement.ts) give trace objects fixed cells: an id keeps its cell, and a freed cell is never reused. With the default of two columns they reproduce the cells the story's author chose.
• Theme. Label and text colours come from the palette instead of Tailwind classes. Dark secondary and muted text and two dark fills (object, array) are adjusted so every kind of text reaches 4.5:1 on every dark fill; a new test asserts it.
• 3D primitives. damp, UP, MONO, labelStyle, withAlpha, Label and RegionLabel live in src/shared/viz3d/primitives.

Checks

• npx tsc -b, npm run lint, npm run test:run (38 files, 398 tests) and npm run build pass.
• 2D identity: the geometry of all 10 beats (positions, sizes, path data, text, font sizes, stroke widths) was recorded on main and after this change; the two recordings are identical.
• 3D: the builder ran label-overlap.js on all 10 beats (ok at two viewer sizes) and an A/B of label positions against the previous renderer (within 1px). Beats 7 and 9 were viewed again after the final colour fixes and match the previous look.
• check-lazy-chunk.mjs: three.js is not in the entry graph.

Known gaps

• Not yet seen in dark in the app. Dark is covered by tests and by the 3D builder's temporary harness; no page uses it until the Playground lens lands.
• Dense 3D scenes. Beyond a 2×2 heap the 3D view switches to a wider cell pitch and tighter cards. A 3×3 heap with 5 frames passes the overlap check at 500px viewer height and above, and overlaps at 420px.
• Tall objects in 2D make their row taller; there is no "+N more" cap. Limits on how much is drawn come with the Playground lens.
• Git 3D renderers still carry their own copies of the primitives; they adopt the shared ones in a follow-up.
• frameActive is still unused in 2D, as before.

🤖 Generated with Claude Code