Fix duplicate orientation canvas in StrictMode

[imrishabh18]

Summary

• clean up each orientation-cube effect using the exact canvas and animation frame created by that effect instance
• stop resolving effect-owned resources through mutable React refs during cleanup
• add a Strict Mode regression test that fails with two canvases before the fix and passes with one after it

Root cause

OrientationCubeCanvas appends its canvas imperatively in a passive effect. During React 19 Strict Mode's effect replay, React clears the DOM ref before running the passive-effect cleanup. The cleanup guarded removal with containerRef.current, which was therefore null, so the old canvas stayed attached. When setup replayed, it appended a second canvas to the same 120×120 container. Normal document flow pushed the real orientation cube down by 120px while the orphan appeared as the broken-looking box in Runframe.

The cleanup now closes over the exact canvas, renderer, scene, camera, and animation frame created by the effect. canvas.remove() no longer depends on ref timing and runs before Three.js resource disposal.

Validation

• bun test tests/orientation-cube-strict-mode.test.tsx tests/manifold-board-textures-strict-mode.test.tsx
• bunx tsc --noEmit
• bun run build
• linked the built package into Runframe with its iframe Strict Mode unchanged; the orientation container contains one canvas and the stray box is gone

The repository's full test run still reports the same three unrelated failures on main in preprocess-circuit-json.test.ts and outline-bounds.test.ts.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
3d-viewer	Ready	Preview, Comment	Jul 24, 2026 10:41pm

[tscircuitbot]

---

Thank you for your contribution! 🎉

PR Rating: ⭐⭐
Impact: Minor

Track your contributions and see the leaderboard at: tscircuit Contribution Tracker

---