@tscircuit/3d-viewer 0.0.433 → 0.0.435

package/dist/index.js

@@ -14228,11 +14228,12 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState33, useCallback as useCallback20, useRef as useRef23, useEffect as useEffect39 } from "react";
+import { useState as useState34, useCallback as useCallback22, useRef as useRef24, useEffect as useEffect40, useMemo as useMemo26 } from "react";
+import * as THREE29 from "three";
 
 // src/CadViewerJscad.tsx
-import { su as su4 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo19 } from "react";
+import { su as su6 } from "@tscircuit/circuit-json-util";
+import { forwardRef as forwardRef3, useMemo as useMemo18 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su } from "@tscircuit/circuit-json-util";
@@ -28168,13 +28169,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo15, useRef as useRef6, useState as useState8 } from "react";
-import * as THREE14 from "three";
+import { forwardRef as forwardRef2, useEffect as useEffect16, useMemo as useMemo13, useState as useState9 } from "react";
+import * as THREE15 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.432",
+  version: "0.0.434",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28253,194 +28254,15 @@ var package_default = {
   }
 };
 
-// src/three-components/cube-with-labeled-sides.tsx
-import { useEffect as useEffect11, useMemo as useMemo9 } from "react";
-import * as THREE8 from "three";
-
-// src/react-three/Text.tsx
-import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
-import { Text as TroikaText } from "troika-three-text";
-var Text = ({
-  children,
-  parent,
-  position,
-  rotation: rotation2,
-  scale: scale2,
-  color,
-  fontSize,
-  anchorX,
-  anchorY,
-  depthOffset
-}) => {
-  const { rootObject } = useThree();
-  const mesh = useMemo8(() => {
-    const textMesh = new TroikaText();
-    textMesh.text = children;
-    if (position) textMesh.position.fromArray(position);
-    if (rotation2) textMesh.rotation.fromArray(rotation2);
-    if (scale2) textMesh.scale.fromArray(scale2);
-    textMesh.color = color || "white";
-    textMesh.fontSize = fontSize || 1;
-    textMesh.anchorX = anchorX || "center";
-    textMesh.anchorY = anchorY || "middle";
-    textMesh.depthOffset = depthOffset || 0;
-    textMesh.font = null;
-    textMesh.sync();
-    return textMesh;
-  }, [
-    children,
-    position,
-    rotation2,
-    scale2,
-    color,
-    fontSize,
-    anchorX,
-    anchorY,
-    depthOffset
-  ]);
-  useEffect10(() => {
-    const parentObject = parent || rootObject;
-    if (!parentObject || !mesh) return;
-    parentObject.add(mesh);
-    return () => {
-      parentObject.remove(mesh);
-      mesh.dispose();
-    };
-  }, [rootObject, parent, mesh]);
-  return null;
-};
-
-// src/three-components/cube-with-labeled-sides.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-if (typeof window !== "undefined") {
-  window.TSCI_MAIN_CAMERA_ROTATION = new THREE8.Euler(0, 0, 0);
-}
-function computePointInFront(rotationVector, distance2) {
-  const quaternion = new THREE8.Quaternion().setFromEuler(
-    new THREE8.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
-  );
-  const forwardVector = new THREE8.Vector3(0, 0, 1);
-  forwardVector.applyQuaternion(quaternion);
-  const result = forwardVector.multiplyScalar(distance2);
-  return result;
-}
-var CubeWithLabeledSides = ({}) => {
-  const { camera, scene } = useThree();
-  useEffect11(() => {
-    if (!scene) return;
-    const ambientLight = new THREE8.AmbientLight(16777215, Math.PI / 2);
-    scene.add(ambientLight);
-    return () => {
-      scene.remove(ambientLight);
-    };
-  }, [scene]);
-  useFrame(() => {
-    if (!camera) return;
-    const mainRot = window.TSCI_MAIN_CAMERA_ROTATION;
-    const cameraPosition = computePointInFront(mainRot, 2);
-    camera.position.copy(cameraPosition);
-    camera.lookAt(0, 0, 0);
-  });
-  const group = useMemo9(() => {
-    const g = new THREE8.Group();
-    g.rotation.fromArray([Math.PI / 2, 0, 0]);
-    const box = new THREE8.Mesh(
-      new THREE8.BoxGeometry(1, 1, 1),
-      new THREE8.MeshStandardMaterial({ color: "white" })
-    );
-    g.add(box);
-    const edges = new THREE8.LineSegments(
-      new THREE8.EdgesGeometry(new THREE8.BoxGeometry(1, 1, 1)),
-      new THREE8.LineBasicMaterial({ color: 0, linewidth: 2 })
-    );
-    g.add(edges);
-    return g;
-  }, []);
-  useEffect11(() => {
-    if (!scene) return;
-    scene.add(group);
-    return () => {
-      scene.remove(group);
-    };
-  }, [scene, group]);
-  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [0, 0, 0.51],
-        fontSize: 0.25,
-        color: "black",
-        children: "Front"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [0, 0, -0.51],
-        fontSize: 0.25,
-        color: "black",
-        rotation: [0, Math.PI, 0],
-        children: "Back"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [0.51, 0, 0],
-        fontSize: 0.25,
-        color: "black",
-        rotation: [0, Math.PI / 2, 0],
-        children: "Right"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [-0.51, 0, 0],
-        fontSize: 0.25,
-        color: "black",
-        rotation: [0, -Math.PI / 2, 0],
-        children: "Left"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [0, 0.51, 0],
-        fontSize: 0.25,
-        color: "black",
-        rotation: [-Math.PI / 2, 0, 0],
-        children: "Top"
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      Text,
-      {
-        parent: group,
-        position: [0, -0.51, 0],
-        fontSize: 0.25,
-        color: "black",
-        rotation: [Math.PI / 2, 0, 0],
-        children: "Bottom"
-      }
-    )
-  ] });
-};
-
 // src/react-three/Canvas.tsx
 import {
   useRef as useRef4,
-  useEffect as useEffect12,
-  useState as useState7,
-  useCallback as useCallback4,
+  useEffect as useEffect10,
+  useState as useState8,
+  useCallback as useCallback5,
   forwardRef,
   useImperativeHandle,
-  useMemo as useMemo10
+  useMemo as useMemo9
 } from "react";
 import * as THREE10 from "three";
 
@@ -28450,158 +28272,388 @@ function removeExistingCanvases(container) {
 }
 
 // src/react-three/configure-renderer.ts
-import * as THREE9 from "three";
+import * as THREE8 from "three";
 var configureRenderer = (renderer) => {
-  renderer.outputColorSpace = THREE9.SRGBColorSpace;
-  renderer.toneMapping = THREE9.ACESFilmicToneMapping;
+  renderer.outputColorSpace = THREE8.SRGBColorSpace;
+  renderer.toneMapping = THREE8.ACESFilmicToneMapping;
   renderer.toneMappingExposure = 1;
 };
 
-// src/react-three/Canvas.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Canvas = forwardRef(
-  ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
-    const mountRef = useRef4(null);
-    const [contextState, setContextState] = useState7(
-      null
-    );
-    const frameListeners = useRef4(
-      []
-    );
-    const onCreatedRef = useRef4(void 0);
-    onCreatedRef.current = onCreated;
-    const addFrameListener = useCallback4(
-      (listener) => {
-        frameListeners.current.push(listener);
-      },
-      []
-    );
-    const removeFrameListener = useCallback4(
-      (listener) => {
-        frameListeners.current = frameListeners.current.filter(
-          (l) => l !== listener
-        );
-      },
-      []
-    );
-    const scene = useMemo10(() => new THREE10.Scene(), []);
-    if (sceneProps?.up) {
-      scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
+// src/contexts/CameraControllerContext.tsx
+import {
+  createContext as createContext4,
+  useCallback as useCallback4,
+  useContext as useContext4,
+  useMemo as useMemo8,
+  useRef as useRef3,
+  useState as useState7
+} from "react";
+import * as THREE9 from "three";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CAMERA_KEY = "cadViewerCameraStateSession";
+var saveCameraToSession = (camera, controls) => {
+  try {
+    const savedCameraSession = {
+      position: camera.position.toArray(),
+      quaternion: camera.quaternion.toArray(),
+      up: camera.up.toArray(),
+      fov: camera.fov ?? 50,
+      target: controls.target.toArray()
+    };
+    sessionStorage.setItem(CAMERA_KEY, JSON.stringify(savedCameraSession));
+  } catch (err) {
+    console.warn("Failed to save camera:", err);
+  }
+};
+var loadCameraFromSession = (camera, controls) => {
+  try {
+    const raw = sessionStorage.getItem(CAMERA_KEY);
+    if (!raw) return false;
+    const state = JSON.parse(raw);
+    camera.position.fromArray(state.position);
+    camera.quaternion.fromArray(state.quaternion);
+    camera.up.fromArray(state.up);
+    if ("fov" in camera) {
+      const persp = camera;
+      persp.fov = state.fov;
+      persp.updateProjectionMatrix?.();
     }
-    const rootObject = useRef4(new THREE10.Object3D());
-    useImperativeHandle(ref, () => rootObject.current);
-    useEffect12(() => {
-      if (!mountRef.current) return;
-      removeExistingCanvases(mountRef.current);
-      const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
-      configureRenderer(renderer);
-      renderer.setSize(
-        mountRef.current.clientWidth,
-        mountRef.current.clientHeight
-      );
-      renderer.setPixelRatio(window.devicePixelRatio);
-      mountRef.current.appendChild(renderer.domElement);
-      const camera = new THREE10.PerspectiveCamera(
-        75,
-        mountRef.current.clientWidth / mountRef.current.clientHeight,
-        0.1,
-        1e3
-      );
-      if (cameraProps?.up) {
-        camera.up.set(cameraProps.up[0], cameraProps.up[1], cameraProps.up[2]);
-      }
-      if (cameraProps?.position) {
-        camera.position.set(
-          cameraProps.position[0],
-          cameraProps.position[1],
-          cameraProps.position[2]
-        );
-      }
-      camera.lookAt(0, 0, 0);
-      scene.add(rootObject.current);
-      window.__TSCIRCUIT_THREE_OBJECT = rootObject.current;
-      setContextState({
-        scene,
-        camera,
-        renderer,
-        rootObject: rootObject.current,
-        addFrameListener,
-        removeFrameListener
-      });
-      onCreatedRef.current?.({ camera, renderer });
-      let animationFrameId;
-      const clock = new THREE10.Clock();
-      const animate = () => {
-        const time = clock.getElapsedTime();
-        const delta = clock.getDelta();
-        frameListeners.current.forEach((listener) => listener(time, delta));
-        renderer.render(scene, camera);
-        animationFrameId = requestAnimationFrame(animate);
-      };
-      animate();
-      const handleResize = () => {
-        if (mountRef.current) {
-          camera.aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-          camera.updateProjectionMatrix();
-          renderer.setSize(
-            mountRef.current.clientWidth,
-            mountRef.current.clientHeight
-          );
-        }
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        cancelAnimationFrame(animationFrameId);
-        if (mountRef.current && renderer.domElement) {
-          mountRef.current.removeChild(renderer.domElement);
-        }
-        renderer.dispose();
-        scene.remove(rootObject.current);
-        if (window.__TSCIRCUIT_THREE_OBJECT === rootObject.current) {
-          window.__TSCIRCUIT_THREE_OBJECT = void 0;
-        }
-      };
-    }, [scene, addFrameListener, removeFrameListener]);
-    return /* @__PURE__ */ jsx11("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx11(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx11(HoverProvider, { children }) }) });
+    controls.target.fromArray(state.target);
+    controls.update();
+    camera.updateMatrixWorld();
+    return true;
+  } catch (err) {
+    console.warn("Failed to restore camera:", err);
+    return false;
   }
-);
-
-// src/react-three/OrbitControls.tsx
-import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
-import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-var OrbitControls = ({
-  autoRotate,
-  autoRotateSpeed,
-  onStart,
-  panSpeed,
-  rotateSpeed,
-  zoomSpeed,
-  enableDamping,
-  dampingFactor,
-  target,
-  onControlsChange
-}) => {
-  const { camera, renderer } = useThree();
-  const controls = useMemo11(() => {
-    if (!camera || !renderer) return null;
-    return new ThreeOrbitControls(camera, renderer.domElement);
-  }, [camera, renderer]);
-  useEffect13(() => {
-    onControlsChange?.(controls ?? null);
-    return () => onControlsChange?.(null);
-  }, [controls, onControlsChange]);
-  useEffect13(() => {
-    if (!controls) return;
-    const handleChange = () => {
-      onControlsChange?.(controls);
+};
+var CameraControllerContext = createContext4(void 0);
+var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition }) => {
+  const controlsRef = useRef3(null);
+  const mainCameraRef = useRef3(null);
+  const [controller, setController] = useState7(null);
+  const [cameraType, setCameraType] = useState7(
+    "perspective"
+  );
+  const [cameraPosition, setCameraPosition] = useState7(initialCameraPosition ?? null);
+  const [cameraRotation, setCameraRotation] = useState7(
+    new THREE9.Euler(0, 0, 0)
+  );
+  const baseDistance = useMemo8(() => {
+    const [x, y, z133] = initialCameraPosition ?? [5, -5, 5];
+    const distance2 = Math.hypot(
+      x - defaultTarget.x,
+      y - defaultTarget.y,
+      z133 - defaultTarget.z
+    );
+    return distance2 > 0 ? distance2 : 5;
+  }, [initialCameraPosition, defaultTarget]);
+  const getPresetConfig = useCallback4(
+    (preset) => {
+      const targetVector = [
+        defaultTarget.x,
+        defaultTarget.y,
+        defaultTarget.z
+      ];
+      const distance2 = baseDistance;
+      const heightOffset = distance2 * 0.3;
+      switch (preset) {
+        case "Top Center Angled": {
+          const angledOffset = distance2 / Math.sqrt(2);
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y - angledOffset,
+              defaultTarget.z + angledOffset
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        }
+        case "Top Down":
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y,
+              defaultTarget.z + distance2
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Top Left Corner":
+          return {
+            position: [
+              defaultTarget.x - distance2 * 0.6,
+              defaultTarget.y - distance2 * 0.6,
+              defaultTarget.z + distance2 * 0.6
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Top Right Corner":
+          return {
+            position: [
+              defaultTarget.x + distance2 * 0.6,
+              defaultTarget.y - distance2 * 0.6,
+              defaultTarget.z + distance2 * 0.6
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Left Sideview":
+          return {
+            position: [
+              defaultTarget.x - distance2,
+              defaultTarget.y,
+              defaultTarget.z
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Right Sideview":
+          return {
+            position: [
+              defaultTarget.x + distance2,
+              defaultTarget.y,
+              defaultTarget.z
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Front":
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y - distance2,
+              defaultTarget.z
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Custom":
+        default:
+          return null;
+      }
+    },
+    [baseDistance, defaultTarget]
+  );
+  const handleControlsChange = useCallback4(
+    (controls) => {
+      controlsRef.current = controls;
+    },
+    []
+  );
+  const cameraControllerContextValue = useMemo8(
+    () => ({
+      controlsRef,
+      mainCameraRef,
+      defaultTarget,
+      baseDistance,
+      controller,
+      setController,
+      getPresetConfig,
+      handleControlsChange,
+      cameraType,
+      setCameraType,
+      cameraPosition,
+      setCameraPosition,
+      cameraRotation,
+      setCameraRotation,
+      saveCameraToSession,
+      loadCameraFromSession
+    }),
+    [
+      defaultTarget,
+      baseDistance,
+      controller,
+      getPresetConfig,
+      handleControlsChange,
+      cameraType,
+      cameraPosition,
+      cameraRotation
+    ]
+  );
+  return /* @__PURE__ */ jsx10(CameraControllerContext.Provider, { value: cameraControllerContextValue, children });
+};
+var useCameraController = () => {
+  const context = useContext4(CameraControllerContext);
+  if (!context) {
+    throw new Error(
+      "useCameraController must be used within a CameraControllerProvider"
+    );
+  }
+  return context;
+};
+
+// src/react-three/Canvas.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Canvas = forwardRef(
+  ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
+    const { cameraType } = useCameraController();
+    const mountRef = useRef4(null);
+    const [contextState, setContextState] = useState8(
+      null
+    );
+    const frameListeners = useRef4(
+      []
+    );
+    const onCreatedRef = useRef4(void 0);
+    onCreatedRef.current = onCreated;
+    const savedCameraStateRef = useRef4(null);
+    const addFrameListener = useCallback5(
+      (listener) => {
+        frameListeners.current.push(listener);
+      },
+      []
+    );
+    const removeFrameListener = useCallback5(
+      (listener) => {
+        frameListeners.current = frameListeners.current.filter(
+          (l) => l !== listener
+        );
+      },
+      []
+    );
+    const scene = useMemo9(() => new THREE10.Scene(), []);
+    if (sceneProps?.up) {
+      scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
+    }
+    const rootObject = useRef4(new THREE10.Object3D());
+    useImperativeHandle(ref, () => rootObject.current);
+    useEffect10(() => {
+      if (!mountRef.current) return;
+      removeExistingCanvases(mountRef.current);
+      const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
+      configureRenderer(renderer);
+      renderer.setSize(
+        mountRef.current.clientWidth,
+        mountRef.current.clientHeight
+      );
+      renderer.setPixelRatio(window.devicePixelRatio);
+      mountRef.current.appendChild(renderer.domElement);
+      const aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
+      const camera = cameraType === "perspective" ? new THREE10.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE10.OrthographicCamera(
+        -10 * aspect,
+        10 * aspect,
+        10,
+        -10,
+        -1e3,
+        1e3
+      );
+      if (savedCameraStateRef.current) {
+        camera.position.copy(savedCameraStateRef.current.position);
+        camera.quaternion.copy(savedCameraStateRef.current.quaternion);
+        camera.up.copy(savedCameraStateRef.current.up);
+      } else {
+        if (cameraProps?.up) {
+          camera.up.set(cameraProps.up[0], cameraProps.up[1], cameraProps.up[2]);
+        }
+        if (cameraProps?.position) {
+          camera.position.set(
+            cameraProps.position[0],
+            cameraProps.position[1],
+            cameraProps.position[2]
+          );
+        }
+        camera.lookAt(0, 0, 0);
+      }
+      scene.add(rootObject.current);
+      window.__TSCIRCUIT_THREE_OBJECT = rootObject.current;
+      setContextState({
+        scene,
+        camera,
+        renderer,
+        rootObject: rootObject.current,
+        addFrameListener,
+        removeFrameListener
+      });
+      onCreatedRef.current?.({ camera, renderer });
+      let animationFrameId;
+      const clock = new THREE10.Clock();
+      const animate = () => {
+        const time = clock.getElapsedTime();
+        const delta = clock.getDelta();
+        frameListeners.current.forEach((listener) => listener(time, delta));
+        renderer.render(scene, camera);
+        animationFrameId = requestAnimationFrame(animate);
+      };
+      animate();
+      const handleResize = () => {
+        if (mountRef.current) {
+          const newAspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
+          if (camera instanceof THREE10.PerspectiveCamera) {
+            camera.aspect = newAspect;
+          } else if (camera instanceof THREE10.OrthographicCamera) {
+            camera.left = -10 * newAspect;
+            camera.right = 10 * newAspect;
+            camera.top = 10;
+            camera.bottom = -10;
+          }
+          camera.updateProjectionMatrix();
+          renderer.setSize(
+            mountRef.current.clientWidth,
+            mountRef.current.clientHeight
+          );
+        }
+      };
+      window.addEventListener("resize", handleResize);
+      return () => {
+        savedCameraStateRef.current = {
+          position: camera.position.clone(),
+          quaternion: camera.quaternion.clone(),
+          up: camera.up.clone()
+        };
+        window.removeEventListener("resize", handleResize);
+        cancelAnimationFrame(animationFrameId);
+        if (mountRef.current && renderer.domElement) {
+          mountRef.current.removeChild(renderer.domElement);
+        }
+        renderer.dispose();
+        scene.remove(rootObject.current);
+        if (window.__TSCIRCUIT_THREE_OBJECT === rootObject.current) {
+          window.__TSCIRCUIT_THREE_OBJECT = void 0;
+        }
+      };
+    }, [scene, addFrameListener, removeFrameListener, cameraType]);
+    return /* @__PURE__ */ jsx11("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx11(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx11(HoverProvider, { children }) }) });
+  }
+);
+
+// src/react-three/OrbitControls.tsx
+import { useEffect as useEffect11, useMemo as useMemo10 } from "react";
+import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+var OrbitControls = ({
+  autoRotate,
+  autoRotateSpeed,
+  onStart,
+  panSpeed,
+  rotateSpeed,
+  zoomSpeed,
+  enableDamping,
+  dampingFactor,
+  target,
+  onControlsChange
+}) => {
+  const { camera, renderer } = useThree();
+  const controls = useMemo10(() => {
+    if (!camera || !renderer) return null;
+    return new ThreeOrbitControls(camera, renderer.domElement);
+  }, [camera, renderer]);
+  useEffect11(() => {
+    onControlsChange?.(controls ?? null);
+    return () => onControlsChange?.(null);
+  }, [controls, onControlsChange]);
+  useEffect11(() => {
+    if (!controls) return;
+    const handleChange = () => {
+      onControlsChange?.(controls);
     };
     controls.addEventListener("change", handleChange);
     return () => {
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect13(() => {
+  useEffect11(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -28626,14 +28678,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect13(() => {
+  useEffect11(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect13(() => {
+  useEffect11(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -28646,7 +28698,7 @@ var OrbitControls = ({
 };
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo11 } from "react";
 import * as THREE11 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
@@ -28692,7 +28744,7 @@ var Grid = ({
 }) => {
   const { scene, camera } = useThree();
   const size5 = 1e3;
-  const gridMesh = useMemo12(() => {
+  const gridMesh = useMemo11(() => {
     const geometry = new THREE11.PlaneGeometry(size5, size5);
     geometry.rotateX(-Math.PI / 2);
     const material = new THREE11.ShaderMaterial({
@@ -28721,7 +28773,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect14(() => {
+  useEffect12(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -28738,21 +28790,21 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect15, useMemo as useMemo13 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
 import * as THREE12 from "three";
 var Lights = () => {
   const { scene } = useThree();
-  const ambientLight = useMemo13(
+  const ambientLight = useMemo12(
     () => new THREE12.AmbientLight(16777215, Math.PI / 2),
     []
   );
-  const pointLight = useMemo13(() => {
+  const pointLight = useMemo12(() => {
     const light = new THREE12.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
   }, []);
-  useEffect15(() => {
+  useEffect13(() => {
     if (!scene) return;
     scene.add(ambientLight);
     scene.add(pointLight);
@@ -28764,55 +28816,18 @@ var Lights = () => {
   return null;
 };
 
-// src/hooks/useSessionCamera.ts
-var CAMERA_KEY = "cadViewerCameraStateSession";
-var saveCameraToSession = (camera, controls) => {
-  try {
-    const savedCameraSession = {
-      position: camera.position.toArray(),
-      quaternion: camera.quaternion.toArray(),
-      up: camera.up.toArray(),
-      fov: camera.fov ?? 50,
-      target: controls.target.toArray()
-    };
-    sessionStorage.setItem(CAMERA_KEY, JSON.stringify(savedCameraSession));
-  } catch (err) {
-    console.warn("Failed to save camera:", err);
-  }
-};
-var loadCameraFromSession = (camera, controls) => {
-  try {
-    const raw = sessionStorage.getItem(CAMERA_KEY);
-    if (!raw) return false;
-    const state = JSON.parse(raw);
-    camera.position.fromArray(state.position);
-    camera.quaternion.fromArray(state.quaternion);
-    camera.up.fromArray(state.up);
-    if ("fov" in camera) {
-      const persp = camera;
-      persp.fov = state.fov;
-      persp.updateProjectionMatrix?.();
-    }
-    controls.target.fromArray(state.target);
-    controls.update();
-    camera.updateMatrixWorld();
-    return true;
-  } catch (err) {
-    console.warn("Failed to restore camera:", err);
-    return false;
-  }
-};
-
-// src/hooks/useCameraController.ts
-import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo14, useRef as useRef5 } from "react";
+// src/hooks/cameraAnimation.ts
+import { useCallback as useCallback6, useEffect as useEffect14, useRef as useRef5 } from "react";
 import * as THREE13 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-var CameraAnimator = ({
-  defaultTarget,
-  controlsRef,
-  onReady
-}) => {
-  const { camera } = useThree();
+var CameraAnimatorWithContext = () => {
+  const {
+    controlsRef,
+    mainCameraRef,
+    defaultTarget,
+    setController,
+    getPresetConfig
+  } = useCameraController();
   const animationRef = useRef5(null);
   const tempQuaternion = useRef5(new THREE13.Quaternion());
   const tempTarget = useRef5(new THREE13.Vector3());
@@ -28821,9 +28836,9 @@ var CameraAnimator = ({
   const tempRollTarget = useRef5(new THREE13.Quaternion());
   const baseOrientationHelper = useRef5(new THREE13.Object3D());
   const orientationHelper = useRef5(new THREE13.Object3D());
-  const animateTo = useCallback5(
+  const animateTo = useCallback6(
     ({ position, target, up, durationMs = 600 }) => {
-      if (!camera) return;
+      if (!mainCameraRef.current) return;
       const currentTarget = controlsRef.current?.target ?? defaultTarget;
       const toPosition = new THREE13.Vector3(
         position[0],
@@ -28837,8 +28852,8 @@ var CameraAnimator = ({
       toOrientationHelper.up.copy(resolvedUp);
       toOrientationHelper.lookAt(resolvedTarget);
       const toQuaternion = toOrientationHelper.quaternion.clone();
-      const fromQuaternion = camera.quaternion.clone();
-      const fromPosition = camera.position.clone();
+      const fromQuaternion = mainCameraRef.current.quaternion.clone();
+      const fromPosition = mainCameraRef.current.position.clone();
       const fromTarget = currentTarget.clone();
       const baseHelper = baseOrientationHelper.current;
       baseHelper.up.set(0, 0, 1);
@@ -28863,17 +28878,30 @@ var CameraAnimator = ({
         duration: durationMs
       };
     },
-    [camera, controlsRef, defaultTarget]
+    [mainCameraRef, controlsRef, defaultTarget]
   );
-  useEffect16(() => {
-    if (!onReady || !camera) return;
-    onReady({ animateTo });
+  const animateToPreset = useCallback6(
+    (preset) => {
+      if (preset === "Custom") return;
+      const config = getPresetConfig(preset);
+      if (!config) return;
+      animateTo(config);
+    },
+    [animateTo, getPresetConfig]
+  );
+  useEffect14(() => {
+    if (!mainCameraRef.current) return;
+    const controller = {
+      animateTo,
+      animateToPreset
+    };
+    setController(controller);
     return () => {
-      onReady(null);
+      setController(null);
     };
-  }, [animateTo, camera, onReady]);
+  }, [animateTo, animateToPreset, mainCameraRef, setController]);
   useFrame(() => {
-    if (!camera || !animationRef.current) return;
+    if (!mainCameraRef.current || !animationRef.current) return;
     const {
       fromPosition,
       toPosition,
@@ -28888,12 +28916,12 @@ var CameraAnimator = ({
     const elapsed = performance.now() - startTime;
     const progress = duration <= 0 ? 1 : Math.min(elapsed / duration, 1);
     const eased = easeInOutCubic(progress);
-    camera.position.lerpVectors(fromPosition, toPosition, eased);
+    mainCameraRef.current.position.lerpVectors(fromPosition, toPosition, eased);
     const nextTarget = tempTarget.current;
     nextTarget.copy(fromTarget).lerp(toTarget, eased);
     const baseHelper = baseOrientationHelper.current;
     baseHelper.up.set(0, 0, 1);
-    baseHelper.position.copy(camera.position);
+    baseHelper.position.copy(mainCameraRef.current.position);
     baseHelper.lookAt(nextTarget);
     const baseQuaternion = tempQuaternion.current;
     baseQuaternion.copy(baseHelper.quaternion);
@@ -28909,18 +28937,18 @@ var CameraAnimator = ({
     }
     rollTarget.normalize();
     interpolatedRoll.slerp(rollTarget, eased);
-    camera.quaternion.copy(baseQuaternion).multiply(interpolatedRoll).normalize();
+    mainCameraRef.current.quaternion.copy(baseQuaternion).multiply(interpolatedRoll).normalize();
     const upVector = tempUp.current;
-    upVector.set(0, 1, 0).applyQuaternion(camera.quaternion).normalize();
-    camera.up.copy(upVector);
+    upVector.set(0, 1, 0).applyQuaternion(mainCameraRef.current.quaternion).normalize();
+    mainCameraRef.current.up.copy(upVector);
     controlsRef.current?.target.copy(nextTarget);
-    camera.updateMatrixWorld();
+    mainCameraRef.current.updateMatrixWorld();
     controlsRef.current?.update();
     if (progress >= 1) {
-      camera.position.copy(toPosition);
-      camera.quaternion.copy(toQuaternion);
-      camera.up.set(0, 0, 1);
-      camera.updateMatrixWorld();
+      mainCameraRef.current.position.copy(toPosition);
+      mainCameraRef.current.quaternion.copy(toQuaternion);
+      mainCameraRef.current.up.set(0, 0, 1);
+      mainCameraRef.current.updateMatrixWorld();
       controlsRef.current?.target.copy(toTarget);
       controlsRef.current?.update();
       animationRef.current = null;
@@ -28928,154 +28956,216 @@ var CameraAnimator = ({
   });
   return null;
 };
-var useCameraController = ({
-  defaultTarget,
-  initialCameraPosition,
-  onCameraControllerReady
-}) => {
-  const controlsRef = useRef5(null);
-  const baseDistance = useMemo14(() => {
-    const [x, y, z133] = initialCameraPosition ?? [5, -5, 5];
-    const distance2 = Math.hypot(
-      x - defaultTarget.x,
-      y - defaultTarget.y,
-      z133 - defaultTarget.z
-    );
-    return distance2 > 0 ? distance2 : 5;
-  }, [initialCameraPosition, defaultTarget]);
-  const getPresetConfig = useCallback5(
-    (preset) => {
-      const targetVector = [
-        defaultTarget.x,
-        defaultTarget.y,
-        defaultTarget.z
-      ];
-      const distance2 = baseDistance;
-      const heightOffset = distance2 * 0.3;
-      switch (preset) {
-        case "Top Centered": {
-          const angledOffset = distance2 / Math.sqrt(2);
-          return {
-            position: [
-              defaultTarget.x,
-              defaultTarget.y - angledOffset,
-              defaultTarget.z + angledOffset
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
+
+// src/hooks/useCameraSession.ts
+import { useCallback as useCallback7, useRef as useRef6 } from "react";
+var useCameraSession = () => {
+  const { controlsRef } = useCameraController();
+  const cameraRef = useRef6(null);
+  const cameraRestoredRef = useRef6(false);
+  const saveTimeoutRef = useRef6(null);
+  const handleCameraCreated = useCallback7(
+    (camera) => {
+      cameraRef.current = camera;
+      if (!cameraRestoredRef.current && controlsRef.current) {
+        const restored = loadCameraFromSession(camera, controlsRef.current);
+        if (restored) {
+          cameraRestoredRef.current = true;
         }
-        case "Top Down":
-          return {
-            position: [
-              defaultTarget.x,
-              defaultTarget.y,
-              defaultTarget.z + distance2
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Top Left Corner":
-          return {
-            position: [
-              defaultTarget.x - distance2 * 0.6,
-              defaultTarget.y - distance2 * 0.6,
-              defaultTarget.z + distance2 * 0.6
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Top Right Corner":
-          return {
-            position: [
-              defaultTarget.x + distance2 * 0.6,
-              defaultTarget.y - distance2 * 0.6,
-              defaultTarget.z + distance2 * 0.6
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Left Sideview":
-          return {
-            position: [
-              defaultTarget.x - distance2,
-              defaultTarget.y,
-              defaultTarget.z + heightOffset
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Right Sideview":
-          return {
-            position: [
-              defaultTarget.x + distance2,
-              defaultTarget.y,
-              defaultTarget.z + heightOffset
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Front":
-          return {
-            position: [
-              defaultTarget.x,
-              defaultTarget.y - distance2,
-              defaultTarget.z + heightOffset
-            ],
-            target: targetVector,
-            up: [0, 0, 1]
-          };
-        case "Custom":
-        default:
-          return null;
       }
     },
-    [baseDistance, defaultTarget]
+    [controlsRef]
   );
-  const handleControllerReady = useCallback5(
-    (controller) => {
-      if (!onCameraControllerReady) return;
-      if (!controller) {
-        onCameraControllerReady(null);
+  const handleControlsChange = useCallback7(() => {
+    if (!cameraRef.current || !controlsRef.current) return;
+    if (!cameraRestoredRef.current) {
+      const restored = loadCameraFromSession(
+        cameraRef.current,
+        controlsRef.current
+      );
+      if (restored) {
+        cameraRestoredRef.current = true;
         return;
       }
-      const enhancedController = {
-        animateTo: controller.animateTo,
-        animateToPreset: (preset) => {
-          if (preset === "Custom") return;
-          const config = getPresetConfig(preset);
-          if (!config) return;
-          controller.animateTo(config);
-        }
-      };
-      onCameraControllerReady(enhancedController);
-    },
-    [getPresetConfig, onCameraControllerReady]
-  );
-  const handleControlsChange = useCallback5(
-    (controls) => {
-      controlsRef.current = controls;
-    },
-    []
+    }
+    clearTimeout(saveTimeoutRef.current);
+    saveTimeoutRef.current = setTimeout(() => {
+      if (cameraRef.current && controlsRef.current) {
+        saveCameraToSession(cameraRef.current, controlsRef.current);
+      }
+    }, 150);
+  }, [controlsRef]);
+  return {
+    handleCameraCreated,
+    handleControlsChange
+  };
+};
+
+// src/three-components/OrientationCubeCanvas.tsx
+import { useEffect as useEffect15, useRef as useRef7 } from "react";
+import * as THREE14 from "three";
+import { Text as TroikaText } from "troika-three-text";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function computePointInFront(rotationVector, distance2) {
+  const quaternion = new THREE14.Quaternion().setFromEuler(
+    new THREE14.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const cameraAnimatorProps = useMemo14(
-    () => ({
-      defaultTarget,
-      controlsRef,
-      onReady: handleControllerReady
-    }),
-    [defaultTarget, handleControllerReady]
+  const forwardVector = new THREE14.Vector3(0, 0, 1);
+  forwardVector.applyQuaternion(quaternion);
+  const result = forwardVector.multiplyScalar(distance2);
+  return result;
+}
+var OrientationCubeCanvas = () => {
+  const { mainCameraRef } = useCameraController();
+  const containerRef = useRef7(null);
+  const canvasRef = useRef7(null);
+  const rendererRef = useRef7(null);
+  const sceneRef = useRef7(null);
+  const cameraRef = useRef7(null);
+  const animationFrameRef = useRef7(null);
+  useEffect15(() => {
+    if (!containerRef.current) return;
+    const canvas = document.createElement("canvas");
+    canvasRef.current = canvas;
+    containerRef.current.appendChild(canvas);
+    const renderer = new THREE14.WebGLRenderer({
+      canvas,
+      antialias: true,
+      alpha: true
+    });
+    renderer.setSize(120, 120);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    rendererRef.current = renderer;
+    const scene = new THREE14.Scene();
+    sceneRef.current = scene;
+    const camera = new THREE14.PerspectiveCamera(75, 1, 0.1, 1e3);
+    camera.up.set(0, 0, 1);
+    cameraRef.current = camera;
+    const ambientLight = new THREE14.AmbientLight(16777215, Math.PI / 2);
+    scene.add(ambientLight);
+    const group = new THREE14.Group();
+    group.rotation.fromArray([Math.PI / 2, 0, 0]);
+    const cubeSize = 1;
+    const box = new THREE14.Mesh(
+      new THREE14.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE14.MeshStandardMaterial({ color: "white" })
+    );
+    group.add(box);
+    const edges = new THREE14.LineSegments(
+      new THREE14.EdgesGeometry(
+        new THREE14.BoxGeometry(cubeSize, cubeSize, cubeSize)
+      ),
+      new THREE14.LineBasicMaterial({ color: 0, linewidth: 2 })
+    );
+    group.add(edges);
+    scene.add(group);
+    const distanceFromCenter = 0.51;
+    const createTextMesh = (text, position, rotation2) => {
+      const textMesh = new TroikaText();
+      textMesh.text = text;
+      textMesh.position.fromArray(position);
+      if (rotation2) textMesh.rotation.fromArray(rotation2);
+      textMesh.color = "black";
+      textMesh.fontSize = 0.25;
+      textMesh.anchorX = "center";
+      textMesh.anchorY = "middle";
+      textMesh.depthOffset = 0;
+      textMesh.font = null;
+      textMesh.sync();
+      return textMesh;
+    };
+    const frontText = createTextMesh("Front", [0, 0, distanceFromCenter]);
+    const backText = createTextMesh(
+      "Back",
+      [0, 0, -distanceFromCenter],
+      [0, Math.PI, 0]
+    );
+    const rightText = createTextMesh(
+      "Right",
+      [distanceFromCenter, 0, 0],
+      [0, Math.PI / 2, 0]
+    );
+    const leftText = createTextMesh(
+      "Left",
+      [-distanceFromCenter, 0, 0],
+      [0, -Math.PI / 2, 0]
+    );
+    const topText = createTextMesh(
+      "Top",
+      [0, distanceFromCenter, 0],
+      [-Math.PI / 2, 0, 0]
+    );
+    const bottomText = createTextMesh(
+      "Bottom",
+      [0, -distanceFromCenter, 0],
+      [Math.PI / 2, 0, 0]
+    );
+    group.add(frontText);
+    group.add(backText);
+    group.add(rightText);
+    group.add(leftText);
+    group.add(topText);
+    group.add(bottomText);
+    const animate = () => {
+      if (mainCameraRef.current) {
+        const cameraPosition = computePointInFront(
+          mainCameraRef.current.rotation ?? new THREE14.Euler(0, 0, 0),
+          2
+        );
+        if (!cameraPosition.equals(camera.position)) {
+          camera.position.copy(cameraPosition);
+          camera.lookAt(0, 0, 0);
+        }
+      }
+      renderer.render(scene, camera);
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+    animate();
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      frontText.dispose();
+      backText.dispose();
+      rightText.dispose();
+      leftText.dispose();
+      topText.dispose();
+      bottomText.dispose();
+      box.geometry.dispose();
+      box.material.dispose();
+      edges.geometry.dispose();
+      edges.material.dispose();
+      scene.clear();
+      renderer.dispose();
+      if (canvasRef.current && containerRef.current) {
+        containerRef.current.removeChild(canvasRef.current);
+      }
+    };
+  }, [mainCameraRef]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: 120,
+        height: 120,
+        zIndex: 1e3
+      }
+    }
   );
-  return { cameraAnimatorProps, handleControlsChange };
 };
 
 // src/CadViewerContainer.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 var RotationTracker = () => {
   const { camera } = useThree();
+  const { setCameraRotation } = useCameraController();
   useFrame(() => {
     if (camera) {
-      window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation;
+      setCameraRotation(camera.rotation);
     }
   });
   return null;
@@ -29091,14 +29181,20 @@ var CadViewerContainer = forwardRef2(
     onUserInteraction,
     onCameraControllerReady
   }, ref) => {
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState9(
       !clickToInteractEnabled
     );
-    const saveTimeoutRef = useRef6(null);
-    const controlsRef = useRef6(null);
-    const cameraRef = useRef6(null);
-    const restoredOnceRef = useRef6(false);
-    const gridSectionSize = useMemo15(() => {
+    const { mainCameraRef, handleControlsChange, controller } = useCameraController();
+    const {
+      handleCameraCreated,
+      handleControlsChange: handleSessionControlsChange
+    } = useCameraSession();
+    useEffect16(() => {
+      if (onCameraControllerReady) {
+        onCameraControllerReady(controller);
+      }
+    }, [controller, onCameraControllerReady]);
+    const gridSectionSize = useMemo13(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
       const height10 = boardDimensions.height ?? 0;
@@ -29106,72 +29202,26 @@ var CadViewerContainer = forwardRef2(
       const desired = largest * 1.5;
       return desired > 10 ? desired : 10;
     }, [boardDimensions]);
-    const orbitTarget = useMemo15(() => {
+    const orbitTarget = useMemo13(() => {
       if (!boardCenter) return void 0;
       return [boardCenter.x, boardCenter.y, 0];
     }, [boardCenter]);
-    const defaultTarget = useMemo15(() => {
-      if (orbitTarget) {
-        return new THREE14.Vector3(orbitTarget[0], orbitTarget[1], orbitTarget[2]);
-      }
-      return new THREE14.Vector3(0, 0, 0);
-    }, [orbitTarget]);
-    const { cameraAnimatorProps, handleControlsChange } = useCameraController({
-      defaultTarget,
-      initialCameraPosition,
-      onCameraControllerReady
-    });
-    return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-      /* @__PURE__ */ jsx12(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: 120,
-            height: 120
-          },
-          children: /* @__PURE__ */ jsx12(
-            Canvas,
-            {
-              camera: {
-                up: [0, 0, 1],
-                position: [1, 1, 1]
-              },
-              style: { zIndex: 10 },
-              children: /* @__PURE__ */ jsx12(CubeWithLabeledSides, {})
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+      /* @__PURE__ */ jsx13(OrientationCubeCanvas, {}),
+      /* @__PURE__ */ jsxs3(
         Canvas,
         {
           ref,
-          scene: { up: new THREE14.Vector3(0, 0, 1) },
+          scene: { up: new THREE15.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
-            cameraRef.current = camera;
-            if (!restoredOnceRef.current && controlsRef.current) {
-              const restored = loadCameraFromSession(
-                cameraRef.current,
-                controlsRef.current
-              );
-              if (restored) restoredOnceRef.current = true;
-            }
-            if (controlsRef.current && !restoredOnceRef.current) {
-              setTimeout(() => {
-                if (cameraRef.current && controlsRef.current) {
-                  saveCameraToSession(cameraRef.current, controlsRef.current);
-                }
-              }, 0);
-            }
+            mainCameraRef.current = camera;
+            handleCameraCreated(camera);
           },
           children: [
-            /* @__PURE__ */ jsx12(CameraAnimator, { ...cameraAnimatorProps }),
-            /* @__PURE__ */ jsx12(RotationTracker, {}),
-            isInteractionEnabled && /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(CameraAnimatorWithContext, {}),
+            /* @__PURE__ */ jsx13(RotationTracker, {}),
+            isInteractionEnabled && /* @__PURE__ */ jsx13(
               OrbitControls,
               {
                 autoRotate: !autoRotateDisabled,
@@ -29185,28 +29235,12 @@ var CadViewerContainer = forwardRef2(
                 target: orbitTarget,
                 onControlsChange: (controls) => {
                   handleControlsChange(controls);
-                  controlsRef.current = controls;
-                  if (cameraRef.current && controlsRef.current && !restoredOnceRef.current) {
-                    const restored = loadCameraFromSession(
-                      cameraRef.current,
-                      controlsRef.current
-                    );
-                    if (restored) {
-                      restoredOnceRef.current = true;
-                      return;
-                    }
-                  }
-                  clearTimeout(saveTimeoutRef.current);
-                  saveTimeoutRef.current = setTimeout(() => {
-                    if (cameraRef.current && controlsRef.current) {
-                      saveCameraToSession(cameraRef.current, controlsRef.current);
-                    }
-                  }, 150);
+                  handleSessionControlsChange();
                 }
               }
             ),
-            /* @__PURE__ */ jsx12(Lights, {}),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(Lights, {}),
+            /* @__PURE__ */ jsx13(
               Grid,
               {
                 rotation: [Math.PI / 2, 0, 0],
@@ -29220,7 +29254,7 @@ var CadViewerContainer = forwardRef2(
           ]
         }
       ),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs3(
         "div",
         {
           style: {
@@ -29238,7 +29272,7 @@ var CadViewerContainer = forwardRef2(
           ]
         }
       ),
-      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx12(
+      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -29257,7 +29291,7 @@ var CadViewerContainer = forwardRef2(
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             "div",
             {
               style: {
@@ -29280,9 +29314,9 @@ var CadViewerContainer = forwardRef2(
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo14 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo16(() => {
+  return useMemo14(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -29292,11 +29326,11 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState9, useEffect as useEffect17 } from "react";
+import { useState as useState10, useEffect as useEffect17 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState9([]);
-  const [loading, setLoading] = useState9(true);
+  const [stls, setStls] = useState10([]);
+  const [loading, setLoading] = useState10(true);
   useEffect17(() => {
     if (!geom) return;
     const generateStls = async () => {
@@ -29326,7 +29360,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState10, useEffect as useEffect18, useRef as useRef7 } from "react";
+import { useState as useState11, useEffect as useEffect18, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -31186,8 +31220,8 @@ var BoardGeomBuilder = class {
 
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState10(null);
-  const isProcessingRef = useRef7(false);
+  const [boardGeom, setBoardGeom] = useState11(null);
+  const isProcessingRef = useRef8(false);
   useEffect18(() => {
     let isCancelled = false;
     if (!circuitJson) {
@@ -31231,17 +31265,72 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState11, useCallback as useCallback6, useEffect as useEffect19, useMemo as useMemo17 } from "react";
-import * as THREE15 from "three";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState12, useCallback as useCallback8, useEffect as useEffect20, useMemo as useMemo16 } from "react";
+
+// src/react-three/Text.tsx
+import { useEffect as useEffect19, useMemo as useMemo15 } from "react";
+import { Text as TroikaText2 } from "troika-three-text";
+var Text = ({
+  children,
+  parent,
+  position,
+  rotation: rotation2,
+  scale: scale2,
+  color,
+  fontSize,
+  anchorX,
+  anchorY,
+  depthOffset
+}) => {
+  const { rootObject } = useThree();
+  const mesh = useMemo15(() => {
+    const textMesh = new TroikaText2();
+    textMesh.text = children;
+    if (position) textMesh.position.fromArray(position);
+    if (rotation2) textMesh.rotation.fromArray(rotation2);
+    if (scale2) textMesh.scale.fromArray(scale2);
+    textMesh.color = color || "white";
+    textMesh.fontSize = fontSize || 1;
+    textMesh.anchorX = anchorX || "center";
+    textMesh.anchorY = anchorY || "middle";
+    textMesh.depthOffset = depthOffset || 0;
+    textMesh.font = null;
+    textMesh.sync();
+    return textMesh;
+  }, [
+    children,
+    position,
+    rotation2,
+    scale2,
+    color,
+    fontSize,
+    anchorX,
+    anchorY,
+    depthOffset
+  ]);
+  useEffect19(() => {
+    const parentObject = parent || rootObject;
+    if (!parentObject || !mesh) return;
+    parentObject.add(mesh);
+    return () => {
+      parentObject.remove(mesh);
+      mesh.dispose();
+    };
+  }, [rootObject, parent, mesh]);
+  return null;
+};
+
+// src/three-components/Error3d.tsx
+import * as THREE16 from "three";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
   cad_component: cad_component2
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState11(false);
-  const [hoverPosition, setHoverPosition] = useState11(null);
-  const handleHover = useCallback6((e) => {
+  const [isHovered, setIsHovered] = useState12(false);
+  const [hoverPosition, setHoverPosition] = useState12(null);
+  const handleHover = useCallback8((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
       setHoverPosition(e.mousePosition);
@@ -31250,11 +31339,11 @@ var Error3d = ({
       setHoverPosition(null);
     }
   }, []);
-  const handleUnhover = useCallback6(() => {
+  const handleUnhover = useCallback8(() => {
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo17(() => {
+  const position = useMemo16(() => {
     if (cad_component2?.position) {
       const p = [
         cad_component2.position.x,
@@ -31265,20 +31354,20 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component2]);
-  const group = useMemo17(() => {
-    const g = new THREE15.Group();
+  const group = useMemo16(() => {
+    const g = new THREE16.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
       rootObject.remove(group);
     };
   }, [rootObject, group]);
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4(
       ContainerWithTooltip_default,
       {
         isHovered,
@@ -31286,8 +31375,8 @@ var Error3d = ({
         onUnhover: handleUnhover,
         object: group,
         children: [
-          /* @__PURE__ */ jsx13(ErrorBox, { parent: group }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(ErrorBox, { parent: group }),
+          /* @__PURE__ */ jsx14(
             Text,
             {
               parent: group,
@@ -31302,7 +31391,7 @@ var Error3d = ({
         ]
       }
     ),
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx13(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx14(
       Html,
       {
         position: hoverPosition,
@@ -31325,10 +31414,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo17(() => {
-    const m = new THREE15.Mesh(
-      new THREE15.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE15.MeshStandardMaterial({
+  const mesh = useMemo16(() => {
+    const m = new THREE16.Mesh(
+      new THREE16.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE16.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -31339,7 +31428,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -31349,8 +31438,8 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/STLModel.tsx
-import { useState as useState12, useEffect as useEffect20, useMemo as useMemo18 } from "react";
-import * as THREE16 from "three";
+import { useState as useState13, useEffect as useEffect21, useMemo as useMemo17 } from "react";
+import * as THREE17 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -31360,8 +31449,8 @@ function STLModel({
   opacity = 1
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState12(null);
-  useEffect20(() => {
+  const [geom, setGeom] = useState13(null);
+  useEffect21(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -31379,16 +31468,16 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo18(() => {
+  const mesh = useMemo17(() => {
     if (!geom) return null;
-    const material = new THREE16.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE16.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE17.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE17.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity
     });
-    return new THREE16.Mesh(geom, material);
+    return new THREE17.Mesh(geom, material);
   }, [geom, color, opacity]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -31405,7 +31494,7 @@ function STLModel({
 }
 
 // src/three-components/VisibleSTLModel.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function VisibleSTLModel({
   stlData,
   color,
@@ -31428,7 +31517,7 @@ function VisibleSTLModel({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(STLModel, { stlData, color, opacity });
+  return /* @__PURE__ */ jsx15(STLModel, { stlData, color, opacity });
 }
 
 // src/three-components/ThreeErrorBoundary.tsx
@@ -31449,8 +31538,95 @@ var ThreeErrorBoundary = class extends React11.Component {
   }
 };
 
+// src/utils/preprocess-circuit-json.ts
+import { su as su5 } from "@tscircuit/circuit-json-util";
+
+// src/utils/create-faux-board.ts
+import { su as su4, getBoundsOfPcbElements } from "@tscircuit/circuit-json-util";
+function createFauxBoard(circuitJson) {
+  const cadComponents = su4(circuitJson).cad_component.list();
+  const pads = su4(circuitJson).pcb_smtpad.list();
+  const holes = su4(circuitJson).pcb_hole.list();
+  const platedHoles = su4(circuitJson).pcb_plated_hole.list();
+  const vias = su4(circuitJson).pcb_via.list();
+  if (cadComponents.length === 0 && pads.length === 0 && holes.length === 0 && platedHoles.length === 0 && vias.length === 0) {
+    return null;
+  }
+  const pcbElements = [...holes, ...platedHoles, ...vias, ...pads];
+  const bounds = getBoundsOfPcbElements(pcbElements);
+  let minX = bounds.minX;
+  let maxX = bounds.maxX;
+  let minY = bounds.minY;
+  let maxY = bounds.maxY;
+  for (const component of cadComponents) {
+    if (component.position) {
+      const x = component.position.x;
+      const y = component.position.y;
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+  }
+  if (minX === Infinity) {
+    minX = -10;
+    maxX = 10;
+    minY = -10;
+    maxY = 10;
+  }
+  const padding = 2;
+  const halfWidth = Math.max(Math.abs(minX), Math.abs(maxX)) + padding;
+  const halfHeight = Math.max(Math.abs(minY), Math.abs(maxY)) + padding;
+  const width10 = Math.max(2 * halfWidth, 10);
+  const height10 = Math.max(2 * halfHeight, 10);
+  const fauxBoard = {
+    type: "pcb_board",
+    pcb_board_id: "faux-board",
+    center: { x: 0, y: 0 },
+    // Always center at origin like real boards
+    width: width10,
+    height: height10,
+    thickness: 1.6,
+    // standard thickness
+    material: "fr4",
+    num_layers: 2
+    // No outline - will use rectangular shape
+  };
+  return fauxBoard;
+}
+
+// src/utils/preprocess-circuit-json.ts
+function addFauxBoardIfNeeded(circuitJson) {
+  const boards = su5(circuitJson).pcb_board.list();
+  if (boards.length > 0) {
+    return circuitJson;
+  }
+  const fauxBoard = createFauxBoard(circuitJson);
+  if (!fauxBoard) {
+    return circuitJson;
+  }
+  const boardThickness = fauxBoard.thickness;
+  const componentZ = boardThickness / 2;
+  const processedCircuitJson = circuitJson.map((element) => {
+    if (element.type === "cad_component") {
+      const cadComponent = element;
+      if (cadComponent.position) {
+        return {
+          ...cadComponent,
+          position: {
+            ...cadComponent.position,
+            z: componentZ
+          }
+        };
+      }
+    }
+    return element;
+  });
+  return [...processedCircuitJson, fauxBoard];
+}
+
 // src/CadViewerJscad.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef3(
   ({
     soup,
@@ -31462,15 +31638,15 @@ var CadViewerJscad = forwardRef3(
     onCameraControllerReady
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo19(() => {
+    const internalCircuitJson = useMemo18(() => {
       const cj = soup ?? circuitJson;
-      return cj ?? childrenSoup;
+      return addFauxBoardIfNeeded(cj ?? childrenSoup);
     }, [soup, circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo19(() => {
+    const initialCameraPosition = useMemo18(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
-        const board = su4(internalCircuitJson).pcb_board.list()[0];
+        const board = su6(internalCircuitJson).pcb_board.list()[0];
         if (!board) return [5, -5, 5];
         const { width: width10, height: height10 } = board;
         if (!width10 && !height10) {
@@ -31493,10 +31669,19 @@ var CadViewerJscad = forwardRef3(
         return [5, -5, 5];
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo19(() => {
+    const isFauxBoard = useMemo18(() => {
+      if (!internalCircuitJson) return false;
+      try {
+        const board = su6(internalCircuitJson).pcb_board.list()[0];
+        return !!board && board.pcb_board_id === "faux-board";
+      } catch (e) {
+        return false;
+      }
+    }, [internalCircuitJson]);
+    const boardDimensions = useMemo18(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su4(internalCircuitJson).pcb_board.list()[0];
+        const board = su6(internalCircuitJson).pcb_board.list()[0];
         if (!board) return void 0;
         return { width: board.width ?? 0, height: board.height ?? 0 };
       } catch (e) {
@@ -31504,10 +31689,10 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo19(() => {
+    const boardCenter = useMemo18(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su4(internalCircuitJson).pcb_board.list()[0];
+        const board = su6(internalCircuitJson).pcb_board.list()[0];
         if (!board || !board.center) return void 0;
         return { x: board.center.x, y: board.center.y };
       } catch (e) {
@@ -31516,8 +31701,8 @@ var CadViewerJscad = forwardRef3(
       }
     }, [internalCircuitJson]);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-    const cad_components = su4(internalCircuitJson).cad_component.list();
-    return /* @__PURE__ */ jsxs6(
+    const cad_components = su6(internalCircuitJson).cad_component.list();
+    return /* @__PURE__ */ jsxs5(
       CadViewerContainer,
       {
         ref,
@@ -31529,21 +31714,21 @@ var CadViewerJscad = forwardRef3(
         onUserInteraction,
         onCameraControllerReady,
         children: [
-          boardStls.map(({ stlData, color, layerType }, index2) => /* @__PURE__ */ jsx15(
+          boardStls.map(({ stlData, color, layerType }, index2) => /* @__PURE__ */ jsx16(
             VisibleSTLModel,
             {
               stlData,
               color,
-              opacity: index2 === 0 ? 0.95 : 1,
+              opacity: index2 === 0 ? isFauxBoard ? 0.8 : 0.95 : 1,
               layerType
             },
             `board-${index2}`
           )),
-          cad_components.map((cad_component2) => /* @__PURE__ */ jsx15(
+          cad_components.map((cad_component2) => /* @__PURE__ */ jsx16(
             ThreeErrorBoundary,
             {
-              fallback: ({ error }) => /* @__PURE__ */ jsx15(Error3d, { cad_component: cad_component2, error }),
-              children: /* @__PURE__ */ jsx15(
+              fallback: ({ error }) => /* @__PURE__ */ jsx16(Error3d, { cad_component: cad_component2, error }),
+              children: /* @__PURE__ */ jsx16(
                 AnyCadComponent,
                 {
                   cad_component: cad_component2,
@@ -31561,23 +31746,23 @@ var CadViewerJscad = forwardRef3(
 );
 
 // src/CadViewerManifold.tsx
-import { su as su13 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect22, useMemo as useMemo21, useState as useState15 } from "react";
+import { su as su15 } from "@tscircuit/circuit-json-util";
+import { useEffect as useEffect23, useMemo as useMemo20, useState as useState16 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef8 } from "react";
-import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE24 from "three";
+import { useState as useState15, useEffect as useEffect22, useMemo as useMemo19, useRef as useRef9 } from "react";
+import { su as su14 } from "@tscircuit/circuit-json-util";
+import * as THREE25 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE17.BufferGeometry();
+  const geometry = new THREE18.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE17.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE18.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE17.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE18.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
   if (manifoldMesh.runIndex && manifoldMesh.runIndex.length > 1 && manifoldMesh.runOriginalID) {
     for (let i = 0; i < manifoldMesh.runIndex.length - 1; i++) {
       const start = manifoldMesh.runIndex[i];
@@ -31591,8 +31776,8 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
 }
 
 // src/utils/trace-texture.ts
-import * as THREE18 from "three";
-import { su as su5 } from "@tscircuit/circuit-json-util";
+import * as THREE19 from "three";
+import { su as su7 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point2) {
   return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
 }
@@ -31603,9 +31788,9 @@ function createTraceTextureForLayer({
   traceColor,
   traceTextureResolution
 }) {
-  const pcbTraces = su5(circuitJson).pcb_trace.list();
-  const allPcbVias = su5(circuitJson).pcb_via.list();
-  const allPcbPlatedHoles = su5(
+  const pcbTraces = su7(circuitJson).pcb_trace.list();
+  const allPcbVias = su7(circuitJson).pcb_via.list();
+  const allPcbPlatedHoles = su7(
     circuitJson
   ).pcb_plated_hole.list();
   const tracesOnLayer = pcbTraces.filter(
@@ -31674,10 +31859,10 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE18.CanvasTexture(canvas);
+  const texture = new THREE19.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE18.LinearMipmapLinearFilter;
-  texture.magFilter = THREE18.LinearFilter;
+  texture.minFilter = THREE19.LinearMipmapLinearFilter;
+  texture.magFilter = THREE19.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -31685,8 +31870,8 @@ function createTraceTextureForLayer({
 
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE19 from "three";
-import { su as su6 } from "@tscircuit/circuit-json-util";
+import * as THREE20 from "three";
+import { su as su8 } from "@tscircuit/circuit-json-util";
 function createSilkscreenTextureForLayer({
   layer,
   circuitJson,
@@ -31694,11 +31879,11 @@ function createSilkscreenTextureForLayer({
   silkscreenColor = "rgb(255,255,255)",
   traceTextureResolution
 }) {
-  const pcbSilkscreenTexts = su6(circuitJson).pcb_silkscreen_text.list();
-  const pcbSilkscreenPaths = su6(circuitJson).pcb_silkscreen_path.list();
-  const pcbSilkscreenLines = su6(circuitJson).pcb_silkscreen_line.list();
-  const pcbSilkscreenRects = su6(circuitJson).pcb_silkscreen_rect.list();
-  const pcbSilkscreenCircles = su6(circuitJson).pcb_silkscreen_circle.list();
+  const pcbSilkscreenTexts = su8(circuitJson).pcb_silkscreen_text.list();
+  const pcbSilkscreenPaths = su8(circuitJson).pcb_silkscreen_path.list();
+  const pcbSilkscreenLines = su8(circuitJson).pcb_silkscreen_line.list();
+  const pcbSilkscreenRects = su8(circuitJson).pcb_silkscreen_rect.list();
+  const pcbSilkscreenCircles = su8(circuitJson).pcb_silkscreen_circle.list();
   const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer);
   const pathsOnLayer = pcbSilkscreenPaths.filter((p) => p.layer === layer);
   const linesOnLayer = pcbSilkscreenLines.filter((l) => l.layer === layer);
@@ -31943,17 +32128,17 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE19.CanvasTexture(canvas);
+  const texture = new THREE20.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE19.LinearMipmapLinearFilter;
-  texture.magFilter = THREE19.LinearFilter;
+  texture.minFilter = THREE20.LinearMipmapLinearFilter;
+  texture.magFilter = THREE20.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/manifold/process-non-plated-holes.ts
-import { su as su7 } from "@tscircuit/circuit-json-util";
+import { su as su9 } from "@tscircuit/circuit-json-util";
 
 // src/utils/hole-geoms.ts
 function createCircleHoleDrill({
@@ -32080,7 +32265,7 @@ function isRotatedPillHole(hole) {
 }
 function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const nonPlatedHoleBoardDrills = [];
-  const pcbHoles = su7(circuitJson).pcb_hole.list();
+  const pcbHoles = su9(circuitJson).pcb_hole.list();
   const createPillOp = (width10, height10, depth) => {
     const pillOp = createRoundedRectPrism({
       Manifold,
@@ -32129,13 +32314,13 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 }
 
 // src/utils/manifold/process-plated-holes.ts
-import { su as su8 } from "@tscircuit/circuit-json-util";
-import * as THREE20 from "three";
-var COPPER_COLOR = new THREE20.Color(...colors.copper);
+import { su as su10 } from "@tscircuit/circuit-json-util";
+import * as THREE21 from "three";
+var COPPER_COLOR = new THREE21.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
-  const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
+  const pcbPlatedHoles = su10(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
   const platedHoleCopperOpsForSubtract = [];
   const createPillOp = (width10, height10, depth) => {
@@ -32448,8 +32633,8 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
 }
 
 // src/utils/manifold/process-vias.ts
-import { su as su9 } from "@tscircuit/circuit-json-util";
-import * as THREE21 from "three";
+import { su as su11 } from "@tscircuit/circuit-json-util";
+import * as THREE22 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper({
@@ -32482,10 +32667,10 @@ function createViaCopper({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE21.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE22.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
-  const pcbVias = su9(circuitJson).pcb_via.list();
+  const pcbVias = su11(circuitJson).pcb_via.list();
   const viaCopperGeoms = [];
   pcbVias.forEach((via, index2) => {
     if (typeof via.outer_diameter === "number") {
@@ -32534,12 +32719,12 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 }
 
 // src/utils/manifold/process-smt-pads.ts
-import { su as su10 } from "@tscircuit/circuit-json-util";
-import * as THREE22 from "three";
-var COPPER_COLOR3 = new THREE22.Color(...colors.copper);
+import { su as su12 } from "@tscircuit/circuit-json-util";
+import * as THREE23 from "three";
+var COPPER_COLOR3 = new THREE23.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
   const smtPadGeoms = [];
-  const smtPads = su10(circuitJson).pcb_smtpad.list();
+  const smtPads = su12(circuitJson).pcb_smtpad.list();
   smtPads.forEach((pad2, index2) => {
     const padBaseThickness = DEFAULT_SMT_PAD_THICKNESS;
     const zPos = pad2.layer === "bottom" ? -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper : pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper;
@@ -32632,7 +32817,7 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 
 // src/utils/manifold/process-copper-pours.ts
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 var arePointsClockwise4 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -32792,7 +32977,7 @@ function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbT
       }
       const covered = pour.covered_with_solder_mask !== false;
       const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4GreenSolderWithMask : colors.copper;
-      const pourColor = new THREE23.Color(...pourColorArr);
+      const pourColor = new THREE24.Color(...pourColorArr);
       const threeGeom = manifoldMeshToThreeGeometry(pourOp.getMesh());
       copperPourGeoms.push({
         key: `coppour-${pour.pcb_copper_pour_id}`,
@@ -32805,7 +32990,7 @@ function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-cutouts.ts
-import { su as su11 } from "@tscircuit/circuit-json-util";
+import { su as su13 } from "@tscircuit/circuit-json-util";
 var arePointsClockwise5 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -32820,7 +33005,7 @@ var arePointsClockwise5 = (points) => {
 };
 function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const cutoutOps = [];
-  const pcbCutouts = su11(circuitJson).pcb_cutout.list();
+  const pcbCutouts = su13(circuitJson).pcb_cutout.list();
   for (const cutout of pcbCutouts) {
     let cutoutOp;
     const cutoutHeight = pcbThickness * 1.5;
@@ -32905,20 +33090,21 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
-  const [geoms, setGeoms] = useState14(null);
-  const [textures, setTextures] = useState14(null);
-  const [pcbThickness, setPcbThickness] = useState14(null);
-  const [error, setError] = useState14(null);
-  const [isLoading, setIsLoading] = useState14(true);
-  const manifoldInstancesForCleanup = useRef8([]);
-  const boardData = useMemo20(() => {
-    const boards = su12(circuitJson).pcb_board.list();
-    if (boards.length === 0) {
-      return null;
-    }
-    return boards[0];
+  const [geoms, setGeoms] = useState15(null);
+  const [textures, setTextures] = useState15(null);
+  const [pcbThickness, setPcbThickness] = useState15(null);
+  const [error, setError] = useState15(null);
+  const [isLoading, setIsLoading] = useState15(true);
+  const manifoldInstancesForCleanup = useRef9([]);
+  const boardData = useMemo19(() => {
+    const boards = su14(circuitJson).pcb_board.list();
+    return boards.length > 0 ? boards[0] : null;
   }, [circuitJson]);
-  useEffect21(() => {
+  const isFauxBoard = useMemo19(() => {
+    const boards = su14(circuitJson).pcb_board.list();
+    return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
+  }, [circuitJson]);
+  useEffect22(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setTextures(null);
@@ -33049,7 +33235,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE24.Color(
+              color: new THREE25.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -33079,12 +33265,13 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE24.Color(
+          color: new THREE25.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
           ),
-          material: boardData.material
+          material: boardData.material,
+          isFaux: isFauxBoard
         };
       }
       const { smtPadGeoms } = processSmtPadsForManifold(
@@ -33161,23 +33348,25 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     pcbThickness,
     error,
     isLoading,
-    boardData
+    boardData,
+    isFauxBoard
   };
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE25 from "three";
-var DEFAULT_SIDE = THREE25.DoubleSide;
+import * as THREE26 from "three";
+var DEFAULT_SIDE = THREE26.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
-  side = DEFAULT_SIDE
+  side = DEFAULT_SIDE,
+  isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE25.MeshPhysicalMaterial({
+    return new THREE26.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -33186,19 +33375,19 @@ var createBoardMaterial = ({
       ior: 1.45,
       sheen: 0,
       clearcoat: 0,
-      transparent: false,
-      opacity: 1,
+      transparent: isFaux,
+      opacity: isFaux ? 0.6 : 1,
       flatShading: true
     });
   }
-  return new THREE25.MeshStandardMaterial({
+  return new THREE26.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
     metalness: 0.1,
     roughness: 0.8,
     transparent: true,
-    opacity: 0.9
+    opacity: isFaux ? 0.6 : 0.9
   });
 };
 
@@ -33207,12 +33396,13 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE26.Mesh(
+    const mesh = new THREE27.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE26.DoubleSide
+        side: THREE27.DoubleSide,
+        isFaux: geoms.board.isFaux
       })
     );
     mesh.name = "board-geom";
@@ -33221,11 +33411,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE26.Mesh(
+        const mesh = new THREE27.Mesh(
           comp.geometry,
-          new THREE26.MeshStandardMaterial({
+          new THREE27.MeshStandardMaterial({
             color: comp.color,
-            side: THREE26.DoubleSide,
+            side: THREE27.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -33243,21 +33433,21 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
     if (!texture) return null;
-    const planeGeom = new THREE27.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE27.MeshBasicMaterial({
+    const planeGeom = new THREE28.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE28.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE27.DoubleSide,
+      side: THREE28.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE27.Mesh(planeGeom, material);
+    const mesh = new THREE28.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -33300,14 +33490,14 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
 }
 
 // src/CadViewerManifold.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
 var BoardMeshes = ({
   geometryMeshes,
   textureMeshes
 }) => {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
-  useEffect22(() => {
+  useEffect23(() => {
     if (!rootObject) return;
     geometryMeshes.forEach((mesh) => {
       let shouldShow = true;
@@ -33370,12 +33560,13 @@ var CadViewerManifold = ({
   onCameraControllerReady
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo21(() => {
-    return circuitJsonProp ?? childrenCircuitJson;
+  const circuitJson = useMemo20(() => {
+    const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
+    return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState15(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState15(null);
-  useEffect22(() => {
+  const [manifoldJSModule, setManifoldJSModule] = useState16(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState16(null);
+  useEffect23(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -33445,27 +33636,27 @@ try {
     isLoading: builderIsLoading,
     boardData
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
-  const geometryMeshes = useMemo21(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo21(
+  const geometryMeshes = useMemo20(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo20(
     () => createTextureMeshes(textures, boardData, pcbThickness),
     [textures, boardData, pcbThickness]
   );
-  const cadComponents = useMemo21(
-    () => su13(circuitJson).cad_component.list(),
+  const cadComponents = useMemo20(
+    () => su15(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo21(() => {
+  const boardDimensions = useMemo20(() => {
     if (!boardData) return void 0;
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     return { width: width10, height: height10 };
   }, [boardData]);
-  const boardCenter = useMemo21(() => {
+  const boardCenter = useMemo20(() => {
     if (!boardData) return void 0;
     const { center } = boardData;
     if (!center) return void 0;
     return { x: center.x, y: center.y };
   }, [boardData]);
-  const initialCameraPosition = useMemo21(() => {
+  const initialCameraPosition = useMemo20(() => {
     if (!boardData) return [5, -5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -33481,7 +33672,7 @@ try {
     ];
   }, [boardData]);
   if (manifoldLoadingError) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         style: {
@@ -33498,10 +33689,10 @@ try {
     );
   }
   if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx16("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    return /* @__PURE__ */ jsx17("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
   }
   if (builderError) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         style: {
@@ -33518,9 +33709,9 @@ try {
     );
   }
   if (builderIsLoading) {
-    return /* @__PURE__ */ jsx16("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    return /* @__PURE__ */ jsx17("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     CadViewerContainer,
     {
       initialCameraPosition,
@@ -33531,18 +33722,18 @@ try {
       onUserInteraction,
       onCameraControllerReady,
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           BoardMeshes,
           {
             geometryMeshes,
             textureMeshes
           }
         ),
-        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx16(
+        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx17(
           ThreeErrorBoundary,
           {
-            fallback: ({ error }) => /* @__PURE__ */ jsx16(Error3d, { cad_component: cad_component2, error }),
-            children: /* @__PURE__ */ jsx16(
+            fallback: ({ error }) => /* @__PURE__ */ jsx17(Error3d, { cad_component: cad_component2, error }),
+            children: /* @__PURE__ */ jsx17(
               AnyCadComponent,
               {
                 cad_component: cad_component2,
@@ -33559,24 +33750,24 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState16, useCallback as useCallback8, useRef as useRef9, useEffect as useEffect23 } from "react";
+import { useState as useState17, useCallback as useCallback10, useRef as useRef10, useEffect as useEffect24 } from "react";
 var useContextMenu = ({ containerRef }) => {
-  const [menuVisible, setMenuVisible] = useState16(false);
-  const [menuPos, setMenuPos] = useState16({
+  const [menuVisible, setMenuVisible] = useState17(false);
+  const [menuPos, setMenuPos] = useState17({
     x: 0,
     y: 0
   });
-  const menuRef = useRef9(null);
-  const interactionOriginPosRef = useRef9(null);
-  const longPressTimeoutRef = useRef9(null);
-  const ignoreNextContextMenuRef = useRef9(false);
+  const menuRef = useRef10(null);
+  const interactionOriginPosRef = useRef10(null);
+  const longPressTimeoutRef = useRef10(null);
+  const ignoreNextContextMenuRef = useRef10(false);
   const clearLongPressTimeout = () => {
     if (longPressTimeoutRef.current !== null) {
       clearTimeout(longPressTimeoutRef.current);
       longPressTimeoutRef.current = null;
     }
   };
-  const handleContextMenu = useCallback8(
+  const handleContextMenu = useCallback10(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
@@ -33602,7 +33793,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback8(
+  const handleTouchStart = useCallback10(
     (e) => {
       if (e.touches.length === 1) {
         const touch = e.touches[0];
@@ -33635,7 +33826,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [containerRef]
   );
-  const handleTouchMove = useCallback8((e) => {
+  const handleTouchMove = useCallback10((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -33653,7 +33844,7 @@ var useContextMenu = ({ containerRef }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback8(() => {
+  const handleTouchEnd = useCallback10(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -33661,7 +33852,7 @@ var useContextMenu = ({ containerRef }) => {
       }
     }, 0);
   }, []);
-  const handleClickAway = useCallback8((e) => {
+  const handleClickAway = useCallback10((e) => {
     const target = e.target;
     if (menuRef.current && menuRef.current.contains(target)) {
       return;
@@ -33674,7 +33865,7 @@ var useContextMenu = ({ containerRef }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -33708,7 +33899,7 @@ var useContextMenu = ({ containerRef }) => {
 };
 
 // src/hooks/useCameraPreset.ts
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback11 } from "react";
 function useCameraPreset({
   setAutoRotate,
   setAutoRotateUserToggled,
@@ -33718,7 +33909,7 @@ function useCameraPreset({
   isAnimatingRef,
   lastPresetSelectTime
 }) {
-  const handleCameraPresetSelect = useCallback9(
+  const handleCameraPresetSelect = useCallback11(
     (preset) => {
       setAutoRotate(false);
       setAutoRotateUserToggled(true);
@@ -33748,10 +33939,10 @@ function useCameraPreset({
 }
 
 // src/hooks/useGlobalDownloadGltf.ts
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback12 } from "react";
 import { GLTFExporter } from "three-stdlib";
 var useGlobalDownloadGltf = () => {
-  return useCallback10(() => {
+  return useCallback12(() => {
     const root = window.__TSCIRCUIT_THREE_OBJECT;
     if (!root) return;
     const exporter = new GLTFExporter();
@@ -33777,7 +33968,7 @@ var useGlobalDownloadGltf = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState32 } from "react";
+import { useState as useState33 } from "react";
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
 import * as React43 from "react";
@@ -33832,7 +34023,7 @@ function useComposedRefs(...refs) {
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React13 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -33843,7 +34034,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React13.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx17(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -33973,7 +34164,7 @@ import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React16 from "react";
-import { Fragment as Fragment23, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx19 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -33991,9 +34182,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx18(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx18(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -34058,7 +34249,7 @@ function getElementRef(element) {
 }
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var NODES = [
   "a",
   "button",
@@ -34086,7 +34277,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx20(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -34100,7 +34291,7 @@ import * as React42 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 import React18 from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 import React23 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 function createCollection(name) {
@@ -34114,7 +34305,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx20(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx21(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -34124,7 +34315,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx20(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx21(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -34141,7 +34332,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx20(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx21(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -34168,7 +34359,7 @@ function createCollection(name) {
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React19.useContext(DirectionContext);
@@ -34204,7 +34395,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -34292,7 +34483,7 @@ var DismissableLayer = React24.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       Primitive.div,
       {
         ...layerProps,
@@ -34326,7 +34517,7 @@ var DismissableLayerBranch = React24.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx23(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx24(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -34438,7 +34629,7 @@ function createFocusGuard() {
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React26 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -34557,7 +34748,7 @@ var FocusScope = React26.forwardRef((props, forwardedRef) => {
     },
     [loop, trapped, focusScope.paused]
   );
-  return /* @__PURE__ */ jsx24(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx25(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -36547,11 +36738,11 @@ var arrow3 = (options, deps) => ({
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 import * as React29 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var NAME = "Arrow";
 var Arrow = React29.forwardRef((props, forwardedRef) => {
   const { children, width: width10 = 10, height: height10 = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     Primitive.svg,
     {
       ...arrowProps,
@@ -36560,7 +36751,7 @@ var Arrow = React29.forwardRef((props, forwardedRef) => {
       height: height10,
       viewBox: "0 0 30 10",
       preserveAspectRatio: "none",
-      children: props.asChild ? children : /* @__PURE__ */ jsx25("polygon", { points: "0,0 30,0 15,10" })
+      children: props.asChild ? children : /* @__PURE__ */ jsx26("polygon", { points: "0,0 30,0 15,10" })
     }
   );
 });
@@ -36605,14 +36796,14 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React31.useState(null);
-  return /* @__PURE__ */ jsx26(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ jsx27(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -36630,7 +36821,7 @@ var PopperAnchor = React31.forwardRef(
         context.onAnchorChange(anchorRef.current);
       }
     });
-    return virtualRef ? null : /* @__PURE__ */ jsx26(Primitive.div, { ...anchorProps, ref: composedRefs });
+    return virtualRef ? null : /* @__PURE__ */ jsx27(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME;
@@ -36723,7 +36914,7 @@ var PopperContent = React31.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         ref: refs.setFloating,
@@ -36747,7 +36938,7 @@ var PopperContent = React31.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -36756,7 +36947,7 @@ var PopperContent = React31.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx27(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -36793,7 +36984,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       "span",
       {
         ref: contentContext.onArrowChange,
@@ -36816,7 +37007,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
           }[contentContext.placedSide],
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(
           Root,
           {
             ...arrowProps,
@@ -36879,14 +37070,14 @@ var Arrow2 = PopperArrow;
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React32 from "react";
 import ReactDOM4 from "react-dom";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
 var Portal = React32.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React32.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx27(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx28(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -37018,7 +37209,7 @@ function getElementRef2(element) {
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import * as React34 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
 var GROUP_NAME = "RovingFocusGroup";
@@ -37030,7 +37221,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
 var RovingFocusGroup = React34.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx28(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx28(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx28(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+    return /* @__PURE__ */ jsx29(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }
 );
 RovingFocusGroup.displayName = GROUP_NAME;
@@ -37068,7 +37259,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -37089,7 +37280,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -37147,14 +37338,14 @@ var RovingFocusGroupItem = React34.forwardRef(
         return () => onFocusableItemRemove();
       }
     }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx29(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -37405,9 +37596,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState27(function() {
+  var ref = useState28(function() {
     return {
       // value
       value: initialValue,
@@ -38065,7 +38256,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -38110,7 +38301,7 @@ var Menu = (props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsx29(Root2, { ...popperScope, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -38118,7 +38309,7 @@ var Menu = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -38138,7 +38329,7 @@ var MenuAnchor = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx29(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx30(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
 MenuAnchor.displayName = ANCHOR_NAME2;
@@ -38149,7 +38340,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME2, {
 var MenuPortal = (props) => {
   const { __scopeMenu, forceMount, children, container } = props;
   const context = useMenuContext(PORTAL_NAME2, __scopeMenu);
-  return /* @__PURE__ */ jsx29(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx29(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx29(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx30(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Portal, { asChild: true, container, children }) }) });
 };
 MenuPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "MenuContent";
@@ -38160,7 +38351,7 @@ var MenuContent = React42.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
-    return /* @__PURE__ */ jsx29(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx29(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx29(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx29(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx29(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx30(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx30(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React42.forwardRef(
@@ -38172,7 +38363,7 @@ var MenuRootContentModal = React42.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       MenuContentImpl,
       {
         ...props,
@@ -38192,7 +38383,7 @@ var MenuRootContentModal = React42.forwardRef(
 );
 var MenuRootContentNonModal = React42.forwardRef((props, forwardedRef) => {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MenuContentImpl,
     {
       ...props,
@@ -38264,7 +38455,7 @@ var MenuContentImpl = React42.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -38293,7 +38484,7 @@ var MenuContentImpl = React42.forwardRef(
         onPointerGraceIntentChange: React42.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx29(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
           FocusScope,
           {
             asChild: true,
@@ -38303,7 +38494,7 @@ var MenuContentImpl = React42.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx29(
+            children: /* @__PURE__ */ jsx30(
               DismissableLayer,
               {
                 asChild: true,
@@ -38313,7 +38504,7 @@ var MenuContentImpl = React42.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx29(
+                children: /* @__PURE__ */ jsx30(
                   Root3,
                   {
                     asChild: true,
@@ -38327,7 +38518,7 @@ var MenuContentImpl = React42.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx29(
+                    children: /* @__PURE__ */ jsx30(
                       Content,
                       {
                         role: "menu",
@@ -38392,7 +38583,7 @@ var GROUP_NAME2 = "MenuGroup";
 var MenuGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...groupProps } = props;
-    return /* @__PURE__ */ jsx29(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx30(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
   }
 );
 MenuGroup.displayName = GROUP_NAME2;
@@ -38400,7 +38591,7 @@ var LABEL_NAME = "MenuLabel";
 var MenuLabel = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...labelProps } = props;
-    return /* @__PURE__ */ jsx29(Primitive.div, { ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx30(Primitive.div, { ...labelProps, ref: forwardedRef });
   }
 );
 MenuLabel.displayName = LABEL_NAME;
@@ -38427,7 +38618,7 @@ var MenuItem = React42.forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       MenuItemImpl,
       {
         ...itemProps,
@@ -38469,13 +38660,13 @@ var MenuItemImpl = React42.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx29(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx30(
           Primitive.div,
           {
             role: "menuitem",
@@ -38514,7 +38705,7 @@ var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
 var MenuCheckboxItem = React42.forwardRef(
   (props, forwardedRef) => {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
-    return /* @__PURE__ */ jsx29(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -38542,7 +38733,7 @@ var MenuRadioGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef(onValueChange);
-    return /* @__PURE__ */ jsx29(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx29(MenuGroup, { ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx30(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx30(MenuGroup, { ...groupProps, ref: forwardedRef }) });
   }
 );
 MenuRadioGroup.displayName = RADIO_GROUP_NAME;
@@ -38552,7 +38743,7 @@ var MenuRadioItem = React42.forwardRef(
     const { value, ...radioItemProps } = props;
     const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
     const checked = value === context.value;
-    return /* @__PURE__ */ jsx29(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
       MenuItem,
       {
         role: "menuitemradio",
@@ -38579,11 +38770,11 @@ var MenuItemIndicator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
     const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Presence,
       {
         present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(
           Primitive.span,
           {
             ...itemIndicatorProps,
@@ -38600,7 +38791,7 @@ var SEPARATOR_NAME = "MenuSeparator";
 var MenuSeparator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Primitive.div,
       {
         role: "separator",
@@ -38617,7 +38808,7 @@ var MenuArrow = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx29(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx30(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 MenuArrow.displayName = ARROW_NAME2;
@@ -38634,7 +38825,7 @@ var MenuSub = (props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx29(Root2, { ...popperScope, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -38642,7 +38833,7 @@ var MenuSub = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -38679,7 +38870,7 @@ var MenuSubTrigger = React42.forwardRef(
         onPointerGraceIntentChange(null);
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
-    return /* @__PURE__ */ jsx29(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx30(
       MenuItemImpl,
       {
         id: subContext.triggerId,
@@ -38768,7 +38959,7 @@ var MenuSubContent = React42.forwardRef(
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
     const ref = React42.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx29(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx29(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx29(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -38879,7 +39070,7 @@ var SubTrigger = MenuSubTrigger;
 var SubContent = MenuSubContent;
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
   DROPDOWN_MENU_NAME,
@@ -38905,7 +39096,7 @@ var DropdownMenu = (props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -38916,7 +39107,7 @@ var DropdownMenu = (props) => {
       onOpenChange: setOpen,
       onOpenToggle: React43.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx30(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx31(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 };
@@ -38927,7 +39118,7 @@ var DropdownMenuTrigger = React43.forwardRef(
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx30(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx31(
       Primitive.button,
       {
         type: "button",
@@ -38961,7 +39152,7 @@ var PORTAL_NAME3 = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(Portal2, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx31(Portal2, { ...menuScope, ...portalProps });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME3;
 var CONTENT_NAME3 = "DropdownMenuContent";
@@ -38971,7 +39162,7 @@ var DropdownMenuContent = React43.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React43.useRef(false);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Content2,
       {
         id: context.contentId,
@@ -39011,7 +39202,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx30(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -39020,7 +39211,7 @@ var DropdownMenuLabel = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...labelProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx30(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
   }
 );
 DropdownMenuLabel.displayName = LABEL_NAME2;
@@ -39029,7 +39220,7 @@ var DropdownMenuItem = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx30(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }
 );
 DropdownMenuItem.displayName = ITEM_NAME3;
@@ -39037,35 +39228,35 @@ var CHECKBOX_ITEM_NAME2 = "DropdownMenuCheckboxItem";
 var DropdownMenuCheckboxItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME2;
 var RADIO_GROUP_NAME2 = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME2;
 var RADIO_ITEM_NAME2 = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME2;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME2 = "DropdownMenuSeparator";
 var DropdownMenuSeparator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME2;
 var ARROW_NAME3 = "DropdownMenuArrow";
@@ -39073,7 +39264,7 @@ var DropdownMenuArrow = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...arrowProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx30(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
   }
 );
 DropdownMenuArrow.displayName = ARROW_NAME3;
@@ -39086,20 +39277,20 @@ var DropdownMenuSub = (props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx30(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx31(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 };
 var SUB_TRIGGER_NAME2 = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx31(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME2;
 var SUB_CONTENT_NAME2 = "DropdownMenuSubContent";
 var DropdownMenuSubContent = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     SubContent,
     {
       ...menuScope,
@@ -39131,11 +39322,11 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState31 } from "react";
+import { useState as useState32 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx31(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39147,10 +39338,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx31(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx31("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx32("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx31(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39167,10 +39358,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx31(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx31("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx31(
+var DotIcon = () => /* @__PURE__ */ jsx32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39183,12 +39374,12 @@ var DotIcon = () => /* @__PURE__ */ jsx31(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx31("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx32("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -39237,12 +39428,12 @@ var iconContainerStyles = {
 };
 var AppearanceMenu = () => {
   const { visibility, toggleLayer } = useLayerVisibility();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState31(false);
-  const [hoveredItem, setHoveredItem] = useState31(null);
-  return /* @__PURE__ */ jsxs8(Fragment10, { children: [
-    /* @__PURE__ */ jsx32(Separator2, { style: separatorStyles }),
-    /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
-      /* @__PURE__ */ jsxs8(
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState32(false);
+  const [hoveredItem, setHoveredItem] = useState32(null);
+  return /* @__PURE__ */ jsxs7(Fragment9, { children: [
+    /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
+    /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
+      /* @__PURE__ */ jsxs7(
         SubTrigger2,
         {
           style: {
@@ -39254,8 +39445,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx32("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx33(
               "div",
               {
                 style: {
@@ -39264,20 +39455,20 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx32(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx33(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx32(Portal22, { children: /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsx33(Portal22, { children: /* @__PURE__ */ jsxs7(
         SubContent2,
         {
           style: { ...contentStyles, marginLeft: -2 },
           collisionPadding: 10,
           avoidCollisions: true,
           children: [
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39293,12 +39484,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39314,12 +39505,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39335,12 +39526,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39356,12 +39547,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39377,12 +39568,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs7(
               Item22,
               {
                 style: {
@@ -39398,8 +39589,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
-                  /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "CAD Models" })
+                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "CAD Models" })
                 ]
               }
             )
@@ -39411,10 +39602,10 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
-  "Top Centered",
+  "Top Center Angled",
   "Top Down",
   "Top Left Corner",
   "Top Right Corner",
@@ -39491,9 +39682,10 @@ var ContextMenu = ({
   onAutoRotateToggle,
   onDownloadGltf
 }) => {
-  const [cameraSubOpen, setCameraSubOpen] = useState32(false);
-  const [hoveredItem, setHoveredItem] = useState32(null);
-  return /* @__PURE__ */ jsx33(
+  const { cameraType, setCameraType } = useCameraController();
+  const [cameraSubOpen, setCameraSubOpen] = useState33(false);
+  const [hoveredItem, setHoveredItem] = useState33(null);
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       ref: menuRef,
@@ -39504,9 +39696,9 @@ var ContextMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs9(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx33(Trigger, { asChild: true, children: /* @__PURE__ */ jsx33("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx33(Portal22, { children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs8(Root22, { open: true, modal: false, children: [
+        /* @__PURE__ */ jsx34(Trigger, { asChild: true, children: /* @__PURE__ */ jsx34("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
           Content22,
           {
             style: contentStyles2,
@@ -39515,8 +39707,8 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              /* @__PURE__ */ jsxs9(Sub2, { onOpenChange: setCameraSubOpen, children: [
-                /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
+                /* @__PURE__ */ jsxs8(
                   SubTrigger2,
                   {
                     style: {
@@ -39528,14 +39720,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx33(
+                      /* @__PURE__ */ jsx34(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Camera Position"
                         }
                       ),
-                      /* @__PURE__ */ jsxs9(
+                      /* @__PURE__ */ jsxs8(
                         "div",
                         {
                           style: {
@@ -39545,21 +39737,21 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx33("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx33(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx34("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx33(Portal22, { children: /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsx34(
                   SubContent2,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
                     avoidCollisions: true,
-                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs9(
+                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
                       Item22,
                       {
                         style: {
@@ -39575,8 +39767,8 @@ var ContextMenu = ({
                         onMouseLeave: () => setHoveredItem(null),
                         onTouchStart: () => setHoveredItem(option),
                         children: [
-                          /* @__PURE__ */ jsx33("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx33(DotIcon, {}) }),
-                          /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                          /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx34(DotIcon, {}) }),
+                          /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: option })
                         ]
                       },
                       option
@@ -39584,7 +39776,7 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs8(
                 Item22,
                 {
                   style: {
@@ -39601,14 +39793,38 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("autorotate"),
                   children: [
-                    /* @__PURE__ */ jsx33("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs8(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "cameratype" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setCameraType(
+                      cameraType === "perspective" ? "orthographic" : "perspective"
+                    );
+                  },
+                  onMouseEnter: () => setHoveredItem("cameratype"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("cameratype"),
+                  children: [
+                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx33(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx34(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx34(
                 Item22,
                 {
                   style: {
@@ -39620,11 +39836,11 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs8(
                 Item22,
                 {
                   style: {
@@ -39641,12 +39857,12 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("engine"),
                   children: [
-                    /* @__PURE__ */ jsxs9("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsxs8("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
                       "Switch to ",
                       engine === "jscad" ? "Manifold" : "JSCAD",
                       " Engine"
                     ] }),
-                    /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsx34(
                       "div",
                       {
                         style: {
@@ -39660,8 +39876,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx34(
                 "div",
                 {
                   style: {
@@ -39672,7 +39888,7 @@ var ContextMenu = ({
                     paddingTop: 4,
                     paddingBottom: 4
                   },
-                  children: /* @__PURE__ */ jsxs9(
+                  children: /* @__PURE__ */ jsxs8(
                     "span",
                     {
                       style: {
@@ -39699,21 +39915,22 @@ var ContextMenu = ({
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
-  const [engine, setEngine] = useState33("manifold");
-  const containerRef = useRef23(null);
-  const [autoRotate, setAutoRotate] = useState33(() => {
+  const [engine, setEngine] = useState34("manifold");
+  const containerRef = useRef24(null);
+  const [autoRotate, setAutoRotate] = useState34(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored === "false" ? false : true;
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState33(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState34(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState33("Custom");
+  const [cameraPreset, setCameraPreset] = useState34("Custom");
+  const { cameraType, setCameraType } = useCameraController();
   const { visibility, toggleLayer } = useLayerVisibility();
-  const cameraControllerRef = useRef23(null);
+  const cameraControllerRef = useRef24(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -39722,12 +39939,12 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef23(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef24(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef23(false);
-  const lastPresetSelectTime = useRef23(0);
+  const isAnimatingRef = useRef24(false);
+  const lastPresetSelectTime = useRef24(0);
   const PRESET_COOLDOWN = 1e3;
-  const handleUserInteraction = useCallback20(() => {
+  const handleUserInteraction = useCallback22(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
       return;
     }
@@ -39738,15 +39955,15 @@ var CadViewerInner = (props) => {
       setCameraPreset("Custom");
     }
   }, [menuVisible]);
-  const toggleAutoRotate = useCallback20(() => {
+  const toggleAutoRotate = useCallback22(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
   const downloadGltf = useGlobalDownloadGltf();
-  const closeMenu = useCallback20(() => {
+  const closeMenu = useCallback22(() => {
     setMenuVisible(false);
   }, [setMenuVisible]);
-  const handleCameraControllerReady = useCallback20(
+  const handleCameraControllerReady = useCallback22(
     (controller) => {
       cameraControllerRef.current = controller;
       externalCameraControllerReady?.(controller);
@@ -39765,26 +39982,35 @@ var CadViewerInner = (props) => {
     isAnimatingRef,
     lastPresetSelectTime
   });
-  useEffect39(() => {
+  useEffect40(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect39(() => {
+  useEffect40(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect39(() => {
+  useEffect40(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect39(() => {
+  useEffect40(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
+  useEffect40(() => {
+    const stored = window.localStorage.getItem("cadViewerCameraType");
+    if (stored === "orthographic" || stored === "perspective") {
+      setCameraType(stored);
+    }
+  }, [setCameraType]);
+  useEffect40(() => {
+    window.localStorage.setItem("cadViewerCameraType", cameraType);
+  }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: containerRef,
@@ -39800,24 +40026,26 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx34(
+        engine === "jscad" ? /* @__PURE__ */ jsx35(
           CadViewerJscad,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
+            cameraType,
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx34(
+        ) : /* @__PURE__ */ jsx35(
           CadViewerManifold_default,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
+            cameraType,
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -39834,11 +40062,11 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx34("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx35("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx34(
+        menuVisible && /* @__PURE__ */ jsx35(
           ContextMenu,
           {
             menuRef,
@@ -39867,17 +40095,29 @@ var CadViewerInner = (props) => {
   );
 };
 var CadViewer = (props) => {
-  return /* @__PURE__ */ jsx34(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx34(CadViewerInner, { ...props }) });
+  const defaultTarget = useMemo26(() => new THREE29.Vector3(0, 0, 0), []);
+  const initialCameraPosition = useMemo26(
+    () => [5, -5, 5],
+    []
+  );
+  return /* @__PURE__ */ jsx35(
+    CameraControllerProvider,
+    {
+      defaultTarget,
+      initialCameraPosition,
+      children: /* @__PURE__ */ jsx35(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx35(CadViewerInner, { ...props }) })
+    }
+  );
 };
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
-import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE31 from "three";
+import { su as su16 } from "@tscircuit/circuit-json-util";
+import * as THREE33 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE28 from "three";
+import * as THREE30 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -39891,12 +40131,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE28.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE28.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE28.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE28.Vector3().crossVectors(
-        new THREE28.Vector3().subVectors(v2, v1),
-        new THREE28.Vector3().subVectors(v3, v1)
+      const v1 = new THREE30.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE30.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE30.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE30.Vector3().crossVectors(
+        new THREE30.Vector3().subVectors(v2, v1),
+        new THREE30.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -39920,10 +40160,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE30 from "three";
+import * as THREE32 from "three";
 
 // src/utils/load-model.ts
-import * as THREE29 from "three";
+import * as THREE31 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -39931,12 +40171,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE29.MeshStandardMaterial({
+    const material = new THREE31.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE29.Mesh(geometry, material);
+    return new THREE31.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -39969,9 +40209,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -39985,13 +40225,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE30.MeshStandardMaterial({
+      const material2 = new THREE32.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE30.DoubleSide
+        side: THREE32.DoubleSide
       });
-      const mesh2 = new THREE30.Mesh(threeGeom, material2);
+      const mesh2 = new THREE32.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -40001,9 +40241,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -40020,17 +40260,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE30.Color(geomInfo.color);
+      const color = new THREE32.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE30.MeshStandardMaterial({
+      const material2 = new THREE32.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE30.DoubleSide
+        side: THREE32.DoubleSide
       });
-      const mesh2 = new THREE30.Mesh(threeGeom, material2);
+      const mesh2 = new THREE32.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -40040,22 +40280,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE30.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE30.MeshStandardMaterial({
+  const geometry = new THREE32.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE32.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE30.Mesh(geometry, material);
+  const mesh = new THREE32.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -40076,11 +40316,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE31.Scene();
+  const scene = new THREE33.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE31.Color(backgroundColor), 1);
-  const camera = new THREE31.OrthographicCamera();
+  renderer.setClearColor(new THREE33.Color(backgroundColor), 1);
+  const camera = new THREE33.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -40094,25 +40334,25 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE31.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE33.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE31.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE33.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE31.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE33.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su14(circuitJson).cad_component.list();
+  const components = su16(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
-  const boardData = su14(circuitJson).pcb_board.list()[0];
+  const boardData = su16(circuitJson).pcb_board.list()[0];
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     for (const geom of boardGeom) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const baseColor = new THREE31.Color(
+      const baseColor = new THREE33.Color(
         g.color?.[0] ?? 0,
         g.color?.[1] ?? 0,
         g.color?.[2] ?? 0
@@ -40120,18 +40360,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE31.DoubleSide
+        side: THREE33.DoubleSide
       });
-      const mesh = new THREE31.Mesh(geometry, material);
+      const mesh = new THREE33.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE31.GridHelper(100, 100);
+  const gridHelper = new THREE33.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE31.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE31.Vector3());
-  const size5 = box.getSize(new THREE31.Vector3());
+  const box = new THREE33.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE33.Vector3());
+  const size5 = box.getSize(new THREE33.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size5.x, size5.y, size5.z);
   if (maxDim > 0) {
@@ -40149,7 +40389,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
-import { useEffect as useEffect40, useState as useState34, useMemo as useMemo27, useCallback as useCallback21 } from "react";
+import { useEffect as useEffect41, useState as useState35, useMemo as useMemo27, useCallback as useCallback23 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo27(() => document.createElement("a"), []);
@@ -40162,7 +40402,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect40(
+  useEffect41(
     () => () => {
       link.remove();
       instance = null;
@@ -40170,20 +40410,20 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback21((obj3D) => {
+  const ref = useCallback23((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState34();
-  const [error, setError] = useState34();
-  const ref = useCallback21(
+  const [url, setUrl] = useState35();
+  const [error, setError] = useState35();
+  const ref = useCallback23(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect40(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect41(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
@@ -40214,8 +40454,14 @@ function applyJsdomShim(jsdom) {
 }
 export {
   CadViewer,
+  CameraAnimatorWithContext,
+  CameraControllerProvider,
   applyJsdomShim,
   convertCircuitJsonTo3dSvg,
+  loadCameraFromSession,
+  saveCameraToSession,
+  useCameraController,
+  useCameraSession,
   useExportGltfUrl,
   useManifoldBoardBuilder,
   useSaveGltfAs