fix duplicate 3D orientation canvas in iframe

[imrishabh18]

Summary

• render the standalone iframe entrypoint without React Strict Mode
• prevent the 3D viewer's imperative orientation-canvas effect from being replayed in production
• remove the stray broken-looking canvas and keep the view cube in its intended top-left position

Root cause

The standalone iframe entrypoint wrapped IframeApp in React.StrictMode. Strict Mode replays effects, while @tscircuit/3d-viewer creates its orientation canvas imperatively. In the iframe build this left two 120×120 canvases in the orientation-control container: a stale canvas at the top and the real view cube pushed down by 120px.

The production iframe does not need Strict Mode, so mounting IframeApp once avoids replaying this imperative integration.

Validation

• bun test — 34 tests passed
• bun run format:check
• bun run build:iframe
• browser verification against example09-iframe.fixture.tsx: orientation container changed from two canvases to one, and the stray box disappeared

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
runframe	Ready	Preview, Comment	Jul 24, 2026 10:26pm

[imrishabh18]

Superseded by the root-cause fix in tscircuit/3d-viewer#958.

React 19 Strict Mode clears the orientation component's DOM ref before passive-effect cleanup. OrientationCubeCanvas used that mutable ref to remove its imperatively appended canvas, so cleanup silently skipped removal and the replay appended a duplicate. The 3D Viewer fix closes over and removes the exact effect-owned canvas, keeping Runframe's Strict Mode coverage intact.