@tscircuit/3d-viewer 0.0.623 → 0.0.625

package/dist/index.js

@@ -18979,8 +18979,8 @@ var useHiddenCadComponents = (circuitKey) => {
 };
 
 // src/CadViewer.tsx
-import { useCallback as useCallback25, useContext as useContext11, useEffect as useEffect50, useRef as useRef29, useState as useState42 } from "react";
-import * as THREE56 from "three";
+import { useCallback as useCallback25, useContext as useContext11, useEffect as useEffect51, useRef as useRef29, useState as useState42 } from "react";
+import * as THREE57 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
@@ -20945,13 +20945,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo17, useState as useState13 } from "react";
-import * as THREE26 from "three";
+import { forwardRef as forwardRef2, useEffect as useEffect22, useMemo as useMemo17, useState as useState13 } from "react";
+import * as THREE27 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.622",
+  version: "0.0.624",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -21018,8 +21018,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.25",
     "@tscircuit/circuit-json-util": "^0.0.119",
     "@tscircuit/copper-pour-solver": "^0.0.29",
-    "@tscircuit/core": "^0.0.2079",
-    "@tscircuit/props": "^0.0.685",
+    "@tscircuit/core": "^0.0.2152",
+    "@tscircuit/props": "^0.0.701",
     "@tscircuit/solver-utils": "^0.0.4",
     "@types/debug": "^4.1.13",
     "@types/jsdom": "^21.1.7",
@@ -21043,7 +21043,7 @@ var package_default = {
     "vite-tsconfig-paths": "^4.3.2",
     "circuit-json-to-gltf": "0.0.143",
     zod: "^3.25.67",
-    "@tscircuit/modelprinter": "^0.0.6"
+    "@tscircuit/modelprinter": "^0.0.18"
   },
   engines: {
     node: "24.x"
@@ -21105,44 +21105,79 @@ import {
   useRef as useRef3,
   useState as useState11
 } from "react";
+import * as THREE16 from "three";
+
+// src/utils/camera-session-storage.ts
 import * as THREE15 from "three";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var CAMERA_KEY = "cadViewerCameraStateSession";
-var saveCameraToSession = (camera, controls) => {
+var CAMERA_SESSION_STORAGE_KEY = "cadViewerCameraStateSession";
+function getCameraSessionStorageKey(cameraSessionScope) {
+  if (!cameraSessionScope) return CAMERA_SESSION_STORAGE_KEY;
+  return `${CAMERA_SESSION_STORAGE_KEY}:${cameraSessionScope}`;
+}
+function saveCameraSession({
+  camera,
+  controls,
+  cameraSessionScope
+}) {
   try {
-    const savedCameraSession = {
+    const storedCameraSession = {
       position: camera.position.toArray(),
       quaternion: camera.quaternion.toArray(),
       up: camera.up.toArray(),
-      fov: camera.fov ?? 50,
+      fov: camera instanceof THREE15.PerspectiveCamera ? camera.fov : 50,
       target: controls.target.toArray()
     };
-    sessionStorage.setItem(CAMERA_KEY, JSON.stringify(savedCameraSession));
-  } catch (err) {
-    console.warn("Failed to save camera:", err);
+    sessionStorage.setItem(
+      getCameraSessionStorageKey(cameraSessionScope),
+      JSON.stringify(storedCameraSession)
+    );
+  } catch (error) {
+    console.warn("Failed to save camera:", error);
   }
-};
-var loadCameraFromSession = (camera, controls) => {
+}
+function loadCameraSession({
+  camera,
+  controls,
+  cameraSessionScope
+}) {
   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);
+    const storedCameraSessionJson = sessionStorage.getItem(
+      getCameraSessionStorageKey(cameraSessionScope)
+    );
+    if (!storedCameraSessionJson) return false;
+    const storedCameraSession = JSON.parse(
+      storedCameraSessionJson
+    );
+    camera.position.fromArray(storedCameraSession.position);
+    camera.quaternion.fromArray(storedCameraSession.quaternion);
+    camera.up.fromArray(storedCameraSession.up);
+    if (camera instanceof THREE15.PerspectiveCamera) {
+      camera.fov = storedCameraSession.fov;
+      camera.updateProjectionMatrix();
+    }
+    controls.target.fromArray(storedCameraSession.target);
     controls.update();
     camera.updateMatrixWorld();
     return true;
-  } catch (err) {
-    console.warn("Failed to restore camera:", err);
+  } catch (error) {
+    console.warn("Failed to restore camera:", error);
     return false;
   }
+}
+
+// src/contexts/CameraControllerContext.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function resolveCameraSessionContext(cameraSessionContext) {
+  if ("controls" in cameraSessionContext) return cameraSessionContext;
+  return { controls: cameraSessionContext };
+}
+var saveCameraToSession = (camera, cameraSessionContext) => {
+  const { controls, cameraSessionScope } = resolveCameraSessionContext(cameraSessionContext);
+  saveCameraSession({ camera, controls, cameraSessionScope });
+};
+var loadCameraFromSession = (camera, cameraSessionContext) => {
+  const { controls, cameraSessionScope } = resolveCameraSessionContext(cameraSessionContext);
+  return loadCameraSession({ camera, controls, cameraSessionScope });
 };
 var CameraControllerContext = createContext6(void 0);
 var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition, initialCameraType }) => {
@@ -21154,7 +21189,7 @@ var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition
   );
   const [cameraPosition, setCameraPosition] = useState11(initialCameraPosition ?? null);
   const [cameraRotation, setCameraRotation] = useState11(
-    new THREE15.Euler(0, 0, 0)
+    new THREE16.Euler(0, 0, 0)
   );
   const baseDistance = useMemo11(() => {
     const [x, y, z] = initialCameraPosition ?? [5, -5, 5];
@@ -21308,7 +21343,7 @@ var useCameraController = () => {
 
 // src/hooks/cameraAnimation.ts
 import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef4 } from "react";
-import * as THREE16 from "three";
+import * as THREE17 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
   const {
@@ -21319,24 +21354,24 @@ var CameraAnimatorWithContext = () => {
     getPresetConfig
   } = useCameraController();
   const animationRef = useRef4(null);
-  const tempQuaternion = useRef4(new THREE16.Quaternion());
-  const tempTarget = useRef4(new THREE16.Vector3());
-  const tempUp = useRef4(new THREE16.Vector3());
-  const tempRoll = useRef4(new THREE16.Quaternion());
-  const tempRollTarget = useRef4(new THREE16.Quaternion());
-  const baseOrientationHelper = useRef4(new THREE16.Object3D());
-  const orientationHelper = useRef4(new THREE16.Object3D());
+  const tempQuaternion = useRef4(new THREE17.Quaternion());
+  const tempTarget = useRef4(new THREE17.Vector3());
+  const tempUp = useRef4(new THREE17.Vector3());
+  const tempRoll = useRef4(new THREE17.Quaternion());
+  const tempRollTarget = useRef4(new THREE17.Quaternion());
+  const baseOrientationHelper = useRef4(new THREE17.Object3D());
+  const orientationHelper = useRef4(new THREE17.Object3D());
   const animateTo = useCallback5(
     ({ position, target, up, durationMs = 600 }) => {
       if (!mainCameraRef.current) return;
       const currentTarget = controlsRef.current?.target ?? defaultTarget;
-      const toPosition = new THREE16.Vector3(
+      const toPosition = new THREE17.Vector3(
         position[0],
         position[1],
         position[2]
       );
-      const resolvedTarget = target ? new THREE16.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
-      const resolvedUp = new THREE16.Vector3(...up ?? [0, 0, 1]).normalize();
+      const resolvedTarget = target ? new THREE17.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
+      const resolvedUp = new THREE17.Vector3(...up ?? [0, 0, 1]).normalize();
       const toOrientationHelper = orientationHelper.current;
       toOrientationHelper.position.copy(toPosition);
       toOrientationHelper.up.copy(resolvedUp);
@@ -21448,43 +21483,63 @@ var CameraAnimatorWithContext = () => {
 };
 
 // src/hooks/useCameraSession.ts
-import { useCallback as useCallback6, useRef as useRef5 } from "react";
-var useCameraSession = () => {
+import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef5 } from "react";
+var CAMERA_SESSION_NOT_RESTORED = /* @__PURE__ */ Symbol("camera-session-not-restored");
+var useCameraSession = ({
+  cameraSessionScope
+} = {}) => {
   const { controlsRef } = useCameraController();
   const cameraRef = useRef5(null);
-  const cameraRestoredRef = useRef5(false);
+  const restoredCameraSessionScopeRef = useRef5(CAMERA_SESSION_NOT_RESTORED);
   const saveTimeoutRef = useRef5(null);
+  useEffect15(() => {
+    return () => {
+      if (saveTimeoutRef.current !== null) {
+        clearTimeout(saveTimeoutRef.current);
+        saveTimeoutRef.current = null;
+      }
+    };
+  }, [cameraSessionScope]);
   const handleCameraCreated = useCallback6(
     (camera) => {
       cameraRef.current = camera;
-      if (!cameraRestoredRef.current && controlsRef.current) {
-        const restored = loadCameraFromSession(camera, controlsRef.current);
+      if (restoredCameraSessionScopeRef.current !== cameraSessionScope && controlsRef.current) {
+        const restored = loadCameraFromSession(camera, {
+          controls: controlsRef.current,
+          cameraSessionScope
+        });
+        restoredCameraSessionScopeRef.current = cameraSessionScope;
         if (restored) {
-          cameraRestoredRef.current = true;
+          return;
         }
       }
     },
-    [controlsRef]
+    [cameraSessionScope, controlsRef]
   );
   const handleControlsChange = useCallback6(() => {
     if (!cameraRef.current || !controlsRef.current) return;
-    if (!cameraRestoredRef.current) {
-      const restored = loadCameraFromSession(
-        cameraRef.current,
-        controlsRef.current
-      );
+    if (restoredCameraSessionScopeRef.current !== cameraSessionScope) {
+      const restored = loadCameraFromSession(cameraRef.current, {
+        controls: controlsRef.current,
+        cameraSessionScope
+      });
+      restoredCameraSessionScopeRef.current = cameraSessionScope;
       if (restored) {
-        cameraRestoredRef.current = true;
         return;
       }
     }
-    clearTimeout(saveTimeoutRef.current);
+    if (saveTimeoutRef.current !== null) {
+      clearTimeout(saveTimeoutRef.current);
+    }
     saveTimeoutRef.current = setTimeout(() => {
       if (cameraRef.current && controlsRef.current) {
-        saveCameraToSession(cameraRef.current, controlsRef.current);
+        saveCameraToSession(cameraRef.current, {
+          controls: controlsRef.current,
+          cameraSessionScope
+        });
       }
     }, 150);
-  }, [controlsRef]);
+  }, [cameraSessionScope, controlsRef]);
   return {
     handleCameraCreated,
     handleControlsChange
@@ -21494,14 +21549,14 @@ var useCameraSession = () => {
 // src/react-three/Canvas.tsx
 import {
   useRef as useRef6,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useState as useState12,
   useCallback as useCallback7,
   forwardRef,
   useImperativeHandle,
   useMemo as useMemo12
 } from "react";
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 
 // src/react-three/remove-existing-canvases.ts
 function removeExistingCanvases(container) {
@@ -21509,13 +21564,13 @@ function removeExistingCanvases(container) {
 }
 
 // src/react-three/configure-renderer.ts
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 var configureRenderer = (renderer) => {
-  renderer.outputColorSpace = THREE17.SRGBColorSpace;
-  renderer.toneMapping = THREE17.ACESFilmicToneMapping;
+  renderer.outputColorSpace = THREE18.SRGBColorSpace;
+  renderer.toneMapping = THREE18.ACESFilmicToneMapping;
   renderer.toneMappingExposure = 1;
   renderer.shadowMap.enabled = true;
-  renderer.shadowMap.type = THREE17.PCFSoftShadowMap;
+  renderer.shadowMap.type = THREE18.PCFSoftShadowMap;
 };
 
 // src/react-three/Canvas.tsx
@@ -21547,16 +21602,16 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo12(() => new THREE18.Scene(), []);
+    const scene = useMemo12(() => new THREE19.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef6(new THREE18.Object3D());
+    const rootObject = useRef6(new THREE19.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
-    useEffect15(() => {
+    useEffect16(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
-      const renderer = new THREE18.WebGLRenderer({ antialias: true, alpha: true });
+      const renderer = new THREE19.WebGLRenderer({ antialias: true, alpha: true });
       configureRenderer(renderer);
       renderer.setSize(
         mountRef.current.clientWidth,
@@ -21565,7 +21620,7 @@ var Canvas = forwardRef(
       renderer.setPixelRatio(window.devicePixelRatio);
       mountRef.current.appendChild(renderer.domElement);
       const aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-      const camera = cameraType === "perspective" ? new THREE18.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE18.OrthographicCamera(
+      const camera = cameraType === "perspective" ? new THREE19.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE19.OrthographicCamera(
         -10 * aspect,
         10 * aspect,
         10,
@@ -21602,7 +21657,7 @@ var Canvas = forwardRef(
       });
       onCreatedRef.current?.({ camera, renderer });
       let animationFrameId;
-      const clock = new THREE18.Clock();
+      const clock = new THREE19.Clock();
       let isVisible = true;
       const visibilityObserver = new IntersectionObserver(([entry]) => {
         isVisible = entry?.isIntersecting ?? false;
@@ -21621,9 +21676,9 @@ var Canvas = forwardRef(
       const handleResize = () => {
         if (mountRef.current?.clientWidth && mountRef.current.clientHeight) {
           const newAspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-          if (camera instanceof THREE18.PerspectiveCamera) {
+          if (camera instanceof THREE19.PerspectiveCamera) {
             camera.aspect = newAspect;
-          } else if (camera instanceof THREE18.OrthographicCamera) {
+          } else if (camera instanceof THREE19.OrthographicCamera) {
             camera.left = -10 * newAspect;
             camera.right = 10 * newAspect;
             camera.top = 10;
@@ -21661,8 +21716,8 @@ var Canvas = forwardRef(
 );
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
-import * as THREE19 from "three";
+import { useEffect as useEffect17, useMemo as useMemo13 } from "react";
+import * as THREE20 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -21708,24 +21763,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size4 = 1e3;
   const gridMesh = useMemo13(() => {
-    const geometry = new THREE19.PlaneGeometry(size4, size4);
+    const geometry = new THREE20.PlaneGeometry(size4, size4);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE19.ShaderMaterial({
+    const material = new THREE20.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE19.Color(15658734) },
-        sectionColor: { value: new THREE19.Color(13421823) },
+        gridColor: { value: new THREE20.Color(15658734) },
+        sectionColor: { value: new THREE20.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE19.DoubleSide
+      side: THREE20.DoubleSide
     });
-    const mesh = new THREE19.Mesh(geometry, material);
+    const mesh = new THREE20.Mesh(geometry, material);
     if (rotation) {
       mesh.rotation.fromArray(rotation);
     }
@@ -21736,7 +21791,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect16(() => {
+  useEffect17(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -21753,8 +21808,8 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect17, useMemo as useMemo14 } from "react";
-import * as THREE20 from "three";
+import { useEffect as useEffect18, useMemo as useMemo14 } from "react";
+import * as THREE21 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
   boardDimensions,
@@ -21764,7 +21819,7 @@ var Lights = ({
 }) => {
   const { scene } = useThree();
   const lightRig = useMemo14(() => {
-    const rig = new THREE20.Group();
+    const rig = new THREE21.Group();
     rig.name = "cad-viewer-light-rig";
     const centerX = boardCenter?.x ?? 0;
     const centerY = boardCenter?.y ?? 0;
@@ -21776,14 +21831,14 @@ var Lights = ({
     const shadowHalfSize = largestBoardDimension * 0.8;
     const lightDistance = largestBoardDimension;
     const keyLightDistance = largestBoardDimension * 1.7;
-    const ambientLight = new THREE20.AmbientLight(16186360, 0.22);
+    const ambientLight = new THREE21.AmbientLight(16186360, 0.22);
     ambientLight.name = "cad-viewer-soft-ambient";
     rig.add(ambientLight);
-    const hemisphereLight = new THREE20.HemisphereLight(15004141, 1581597, 0.2);
+    const hemisphereLight = new THREE21.HemisphereLight(15004141, 1581597, 0.2);
     hemisphereLight.name = "cad-viewer-hemisphere";
     rig.add(hemisphereLight);
     const addDirectionalLight = (name, color, intensity, position, castShadow = false) => {
-      const light = new THREE20.DirectionalLight(color, intensity);
+      const light = new THREE21.DirectionalLight(color, intensity);
       light.name = name;
       light.position.set(
         centerX + position[0],
@@ -21857,17 +21912,17 @@ var Lights = ({
     );
     return rig;
   }, [boardCenter, boardDimensions, shadowsEnabled]);
-  useEffect17(() => {
+  useEffect18(() => {
     const previousBackground = scene.background;
     const previousEnvironment = scene.environment;
-    scene.background = darkBackgroundEnabled ? new THREE20.Color(1053456) : null;
+    scene.background = darkBackgroundEnabled ? new THREE21.Color(1053456) : null;
     scene.environment = null;
     return () => {
       scene.background = previousBackground;
       scene.environment = previousEnvironment;
     };
   }, [darkBackgroundEnabled, scene]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!scene) return;
     scene.add(lightRig);
     return () => {
@@ -21878,12 +21933,12 @@ var Lights = ({
 };
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect18, useMemo as useMemo15 } from "react";
-import * as THREE22 from "three";
+import { useEffect as useEffect19, useMemo as useMemo15 } from "react";
+import * as THREE23 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // src/react-three/infinite-dolly.ts
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 var MINIMUM_DOLLY_DISTANCE_RATIO = 0.05;
 var getMinimumDollyDistance = ({
   camera,
@@ -21897,12 +21952,12 @@ var applyInfiniteDolly = ({
   controls,
   minimumDollyDistance
 }) => {
-  if (!(camera instanceof THREE21.PerspectiveCamera)) return false;
+  if (!(camera instanceof THREE22.PerspectiveCamera)) return false;
   const orbitDistance = controls.getDistance();
   if (Number.isFinite(orbitDistance) && orbitDistance >= minimumDollyDistance) {
     return false;
   }
-  const viewDirection = new THREE21.Vector3();
+  const viewDirection = new THREE22.Vector3();
   camera.getWorldDirection(viewDirection);
   controls.target.copy(camera.position).addScaledVector(viewDirection, minimumDollyDistance);
   return true;
@@ -21927,7 +21982,7 @@ var OrbitControls = ({
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
   const minimumDollyDistance = useMemo15(() => {
-    if (!controls || !(camera instanceof THREE22.PerspectiveCamera)) {
+    if (!controls || !(camera instanceof THREE23.PerspectiveCamera)) {
       return Number.EPSILON;
     }
     const initialOrbitDistance = target ? Math.hypot(
@@ -21937,11 +21992,11 @@ var OrbitControls = ({
     ) : controls.getDistance();
     return getMinimumDollyDistance({ camera, initialOrbitDistance });
   }, [camera, controls, target]);
-  useEffect18(() => {
+  useEffect19(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
   }, [controls, onControlsChange]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!controls) return;
     const handleChange = () => {
       onControlsChange?.(controls);
@@ -21951,7 +22006,7 @@ var OrbitControls = ({
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -21962,9 +22017,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE22.MOUSE.ROTATE,
+      LEFT: THREE23.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE22.MOUSE.PAN,
+      MIDDLE: THREE23.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -21984,14 +22039,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -22087,15 +22142,15 @@ var getComparisonBounds = (type, boardDimensions, boardCenter) => {
 };
 
 // src/three-components/OrientationCubeCanvas.tsx
-import { useEffect as useEffect19, useRef as useRef7 } from "react";
-import * as THREE23 from "three";
+import { useEffect as useEffect20, useRef as useRef7 } from "react";
+import * as THREE24 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance5) {
-  const quaternion = new THREE23.Quaternion().setFromEuler(
-    new THREE23.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE24.Quaternion().setFromEuler(
+    new THREE24.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE23.Vector3(0, 0, 1);
+  const forwardVector = new THREE24.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -22103,36 +22158,36 @@ function computePointInFront(rotationVector, distance5) {
 var OrientationCubeCanvas = () => {
   const { mainCameraRef } = useCameraController();
   const containerRef = useRef7(null);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
     container.appendChild(canvas);
-    const renderer = new THREE23.WebGLRenderer({
+    const renderer = new THREE24.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
     });
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
-    const scene = new THREE23.Scene();
-    const camera = new THREE23.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const scene = new THREE24.Scene();
+    const camera = new THREE24.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
-    const ambientLight = new THREE23.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE24.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE23.Group();
+    const group = new THREE24.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE23.Mesh(
-      new THREE23.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE23.MeshStandardMaterial({ color: "white" })
+    const box = new THREE24.Mesh(
+      new THREE24.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE24.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE23.LineSegments(
-      new THREE23.EdgesGeometry(
-        new THREE23.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE24.LineSegments(
+      new THREE24.EdgesGeometry(
+        new THREE24.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE23.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE24.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -22194,7 +22249,7 @@ var OrientationCubeCanvas = () => {
       if (!isVisible) return;
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE23.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE24.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -22243,15 +22298,15 @@ var OrientationCubeCanvas = () => {
 };
 
 // src/three-components/reference-object.tsx
-import { useEffect as useEffect20, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
 
 // src/reference-objects/create-reference-object.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 var createRoundedRectangleShape = (width, height, radius) => {
   const halfWidth = width / 2;
   const halfHeight = height / 2;
   const safeRadius = Math.min(radius, halfWidth, halfHeight);
-  const shape = new THREE24.Shape();
+  const shape = new THREE25.Shape();
   shape.moveTo(-halfWidth + safeRadius, -halfHeight);
   shape.lineTo(halfWidth - safeRadius, -halfHeight);
   shape.quadraticCurveTo(
@@ -22290,7 +22345,7 @@ var createRoundedPrismGeometry = (width, height, depth, radius) => {
   );
 };
 var createPrismGeometryFromShape = (shape, depth) => {
-  const geometry = new THREE24.ExtrudeGeometry(shape, {
+  const geometry = new THREE25.ExtrudeGeometry(shape, {
     depth,
     bevelEnabled: false,
     curveSegments: 24
@@ -22302,16 +22357,16 @@ var createPrismGeometryFromShape = (shape, depth) => {
 var normalizeObjectToSpec = (object, type) => {
   const spec = REFERENCE_OBJECT_SPECS[type];
   object.updateMatrixWorld(true);
-  const initialBounds = new THREE24.Box3().setFromObject(object);
-  const initialSize = initialBounds.getSize(new THREE24.Vector3());
+  const initialBounds = new THREE25.Box3().setFromObject(object);
+  const initialSize = initialBounds.getSize(new THREE25.Vector3());
   object.scale.set(
     spec.width / initialSize.x,
     spec.height / initialSize.y,
     spec.depth / initialSize.z
   );
   object.updateMatrixWorld(true);
-  const scaledBounds = new THREE24.Box3().setFromObject(object);
-  const scaledCenter = scaledBounds.getCenter(new THREE24.Vector3());
+  const scaledBounds = new THREE25.Box3().setFromObject(object);
+  const scaledCenter = scaledBounds.getCenter(new THREE25.Vector3());
   object.position.set(
     -scaledCenter.x,
     -scaledCenter.y,
@@ -22320,15 +22375,15 @@ var normalizeObjectToSpec = (object, type) => {
   object.updateMatrixWorld(true);
 };
 var createBananaGeometry = () => {
-  const curve = new THREE24.CatmullRomCurve3([
-    new THREE24.Vector3(-82, 18, 16),
-    new THREE24.Vector3(-67, 7, 15),
-    new THREE24.Vector3(-43, -9, 14),
-    new THREE24.Vector3(-15, -18, 14),
-    new THREE24.Vector3(16, -18, 14),
-    new THREE24.Vector3(47, -8, 14.5),
-    new THREE24.Vector3(72, 8, 16),
-    new THREE24.Vector3(84, 19, 17)
+  const curve = new THREE25.CatmullRomCurve3([
+    new THREE25.Vector3(-82, 18, 16),
+    new THREE25.Vector3(-67, 7, 15),
+    new THREE25.Vector3(-43, -9, 14),
+    new THREE25.Vector3(-15, -18, 14),
+    new THREE25.Vector3(16, -18, 14),
+    new THREE25.Vector3(47, -8, 14.5),
+    new THREE25.Vector3(72, 8, 16),
+    new THREE25.Vector3(84, 19, 17)
   ]);
   const tubularSegments = 84;
   const radialSegments = 30;
@@ -22338,8 +22393,8 @@ var createBananaGeometry = () => {
   const colors2 = [];
   const uvs = [];
   const indices = [];
-  const ripeYellow = new THREE24.Color(16766023);
-  const stemGreen = new THREE24.Color(12038965);
+  const ripeYellow = new THREE25.Color(16766023);
+  const stemGreen = new THREE25.Color(12038965);
   for (let segment = 0; segment <= tubularSegments; segment++) {
     const t = segment / tubularSegments;
     const point = curve.getPointAt(t);
@@ -22354,7 +22409,7 @@ var createBananaGeometry = () => {
       const sin = Math.sin(angle3);
       const cos = Math.cos(angle3);
       const ridgeScale = 1 + Math.cos(angle3 * 5 + 0.35) * 0.035;
-      const radialNormal = new THREE24.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
+      const radialNormal = new THREE25.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
       const vertex = point.clone().addScaledVector(normal, cos * radius * ridgeScale).addScaledVector(binormal, sin * radius * 0.9 * ridgeScale);
       positions.push(vertex.x, vertex.y, vertex.z);
       normals.push(radialNormal.x, radialNormal.y, radialNormal.z);
@@ -22372,26 +22427,26 @@ var createBananaGeometry = () => {
       indices.push(a, d, b, b, d, c);
     }
   }
-  const geometry = new THREE24.BufferGeometry();
+  const geometry = new THREE25.BufferGeometry();
   geometry.setIndex(indices);
   geometry.setAttribute(
     "position",
-    new THREE24.Float32BufferAttribute(positions, 3)
+    new THREE25.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE24.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("color", new THREE24.Float32BufferAttribute(colors2, 3));
-  geometry.setAttribute("uv", new THREE24.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE25.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("color", new THREE25.Float32BufferAttribute(colors2, 3));
+  geometry.setAttribute("uv", new THREE25.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return { geometry, curve };
 };
 var createBanana = () => {
-  const group = new THREE24.Group();
-  const banana = new THREE24.Group();
+  const group = new THREE25.Group();
+  const banana = new THREE25.Group();
   const { geometry, curve } = createBananaGeometry();
-  const peel = new THREE24.Mesh(
+  const peel = new THREE25.Mesh(
     geometry,
-    new THREE24.MeshStandardMaterial({
+    new THREE25.MeshStandardMaterial({
       color: 16777215,
       roughness: 0.72,
       metalness: 0,
@@ -22400,9 +22455,9 @@ var createBanana = () => {
   );
   peel.name = "banana-peel";
   banana.add(peel);
-  const blossomTip = new THREE24.Mesh(
-    new THREE24.SphereGeometry(3.4, 20, 12),
-    new THREE24.MeshStandardMaterial({
+  const blossomTip = new THREE25.Mesh(
+    new THREE25.SphereGeometry(3.4, 20, 12),
+    new THREE25.MeshStandardMaterial({
       color: 6242844,
       roughness: 0.92
     })
@@ -22413,20 +22468,20 @@ var createBanana = () => {
   banana.add(blossomTip);
   const stemLength = 11;
   const stemTangent = curve.getTangentAt(1).normalize();
-  const stem = new THREE24.Mesh(
-    new THREE24.CylinderGeometry(2.5, 4.1, stemLength, 18),
-    new THREE24.MeshStandardMaterial({
+  const stem = new THREE25.Mesh(
+    new THREE25.CylinderGeometry(2.5, 4.1, stemLength, 18),
+    new THREE25.MeshStandardMaterial({
       color: 8483625,
       roughness: 0.82
     })
   );
-  stem.quaternion.setFromUnitVectors(new THREE24.Vector3(0, 1, 0), stemTangent);
+  stem.quaternion.setFromUnitVectors(new THREE25.Vector3(0, 1, 0), stemTangent);
   stem.position.copy(curve.getPointAt(1)).addScaledVector(stemTangent, stemLength / 2);
   stem.name = "banana-stem";
   banana.add(stem);
-  const stemTip = new THREE24.Mesh(
-    new THREE24.SphereGeometry(2.55, 18, 10),
-    new THREE24.MeshStandardMaterial({
+  const stemTip = new THREE25.Mesh(
+    new THREE25.SphereGeometry(2.55, 18, 10),
+    new THREE25.MeshStandardMaterial({
       color: 5981470,
       roughness: 0.9
     })
@@ -22440,7 +22495,7 @@ var createBanana = () => {
 };
 var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
   const lidShape = createRoundedRectangleShape(width, height, radius);
-  const indent = new THREE24.Path();
+  const indent = new THREE25.Path();
   indent.absarc(0, 0, indentRadius, 0, Math.PI * 2, true);
   lidShape.holes.push(indent);
   return createPrismGeometryFromShape(lidShape, depth);
@@ -22448,9 +22503,9 @@ var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
 var createMacbookIndent = (topZ, radius) => {
   const indentDepth = 0.35;
   const diskDepth = 0.25;
-  const disk = new THREE24.Mesh(
-    new THREE24.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
-    new THREE24.MeshStandardMaterial({
+  const disk = new THREE25.Mesh(
+    new THREE25.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
+    new THREE25.MeshStandardMaterial({
       color: 10199202,
       roughness: 0.48,
       metalness: 0.28
@@ -22463,10 +22518,10 @@ var createMacbookIndent = (topZ, radius) => {
 };
 var createCreditCard = () => {
   const spec = REFERENCE_OBJECT_SPECS["credit-card"];
-  const group = new THREE24.Group();
-  const body = new THREE24.Mesh(
+  const group = new THREE25.Group();
+  const body = new THREE25.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, spec.depth, 3.18),
-    new THREE24.MeshStandardMaterial({
+    new THREE25.MeshStandardMaterial({
       color: 2383272,
       roughness: 0.38,
       metalness: 0.08
@@ -22475,9 +22530,9 @@ var createCreditCard = () => {
   body.name = "credit-card-body";
   group.add(body);
   const surfaceZ = spec.depth / 2 + 0.08;
-  const chip = new THREE24.Mesh(
+  const chip = new THREE25.Mesh(
     createRoundedPrismGeometry(12, 9, 0.14, 1.2),
-    new THREE24.MeshStandardMaterial({
+    new THREE25.MeshStandardMaterial({
       color: 14003525,
       roughness: 0.3,
       metalness: 0.62
@@ -22486,14 +22541,14 @@ var createCreditCard = () => {
   chip.position.set(-21, 3, surfaceZ);
   chip.name = "credit-card-chip";
   group.add(chip);
-  const stripeMaterial = new THREE24.MeshStandardMaterial({
+  const stripeMaterial = new THREE25.MeshStandardMaterial({
     color: 15331061,
     roughness: 0.45,
     metalness: 0.05
   });
   for (let index2 = 0; index2 < 4; index2++) {
-    const stripe = new THREE24.Mesh(
-      new THREE24.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
+    const stripe = new THREE25.Mesh(
+      new THREE25.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
       stripeMaterial
     );
     stripe.position.set(-20 + index2 * 14, -14, surfaceZ + 0.08);
@@ -22504,13 +22559,13 @@ var createCreditCard = () => {
 };
 var createMacbook = () => {
   const spec = REFERENCE_OBJECT_SPECS["14in-macbook"];
-  const group = new THREE24.Group();
-  const aluminumMaterial = new THREE24.MeshStandardMaterial({
+  const group = new THREE25.Group();
+  const aluminumMaterial = new THREE25.MeshStandardMaterial({
     color: 12896201,
     roughness: 0.3,
     metalness: 0.38
   });
-  const body = new THREE24.Mesh(
+  const body = new THREE25.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, 13.5, 9),
     aluminumMaterial
   );
@@ -22521,7 +22576,7 @@ var createMacbook = () => {
   const lidCenterZ = 6.75;
   const lidTopZ = lidCenterZ + lidDepth / 2;
   const indentRadius = 12;
-  const lid = new THREE24.Mesh(
+  const lid = new THREE25.Mesh(
     createMacbookLidGeometry(
       spec.width - 1.8,
       spec.height - 1.8,
@@ -22534,9 +22589,9 @@ var createMacbook = () => {
   lid.position.z = lidCenterZ;
   lid.name = "macbook-lid";
   group.add(lid);
-  const hinge = new THREE24.Mesh(
-    new THREE24.BoxGeometry(spec.width - 42, 3.2, 1.2),
-    new THREE24.MeshStandardMaterial({
+  const hinge = new THREE25.Mesh(
+    new THREE25.BoxGeometry(spec.width - 42, 3.2, 1.2),
+    new THREE25.MeshStandardMaterial({
       color: 3158838,
       roughness: 0.55,
       metalness: 0.45
@@ -22546,9 +22601,9 @@ var createMacbook = () => {
   hinge.name = "macbook-hinge";
   group.add(hinge);
   group.add(createMacbookIndent(lidTopZ, indentRadius));
-  const frontNotch = new THREE24.Mesh(
-    new THREE24.BoxGeometry(54, 1.2, 0.8),
-    new THREE24.MeshStandardMaterial({
+  const frontNotch = new THREE25.Mesh(
+    new THREE25.BoxGeometry(54, 1.2, 0.8),
+    new THREE25.MeshStandardMaterial({
       color: 6712174,
       roughness: 0.45,
       metalness: 0.5
@@ -22571,7 +22626,7 @@ var disposeReferenceObject = (object) => {
   const geometries = /* @__PURE__ */ new Set();
   const materials = /* @__PURE__ */ new Set();
   object.traverse((child) => {
-    if (!(child instanceof THREE24.Mesh)) return;
+    if (!(child instanceof THREE25.Mesh)) return;
     geometries.add(child.geometry);
     const childMaterials = Array.isArray(child.material) ? child.material : [child.material];
     for (const material of childMaterials) materials.add(material);
@@ -22581,28 +22636,28 @@ var disposeReferenceObject = (object) => {
 };
 
 // src/reference-objects/fit-camera-to-bounds.ts
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 var fitCameraToBounds = (camera, controls, bounds, padding = 1.18) => {
   const width = Math.max(bounds.maxX - bounds.minX, 0);
   const height = Math.max(bounds.maxY - bounds.minY, 0);
   const depth = Math.max(bounds.maxZ - bounds.minZ, 0);
-  const center = new THREE25.Vector3(
+  const center = new THREE26.Vector3(
     (bounds.minX + bounds.maxX) / 2,
     (bounds.minY + bounds.maxY) / 2,
     (bounds.minZ + bounds.maxZ) / 2
   );
   const radius = Math.max(Math.hypot(width, height, depth) / 2, 1);
-  const previousTarget = controls?.target ?? new THREE25.Vector3();
-  const direction = new THREE25.Vector3(0, -0.75, 0.9).normalize();
+  const previousTarget = controls?.target ?? new THREE26.Vector3();
+  const direction = new THREE26.Vector3(0, -0.75, 0.9).normalize();
   let distance5 = Math.max(camera.position.distanceTo(previousTarget), 5);
-  if (camera instanceof THREE25.PerspectiveCamera) {
-    const verticalFov = THREE25.MathUtils.degToRad(camera.fov);
+  if (camera instanceof THREE26.PerspectiveCamera) {
+    const verticalFov = THREE26.MathUtils.degToRad(camera.fov);
     const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
     const limitingFov = Math.min(verticalFov, horizontalFov);
     distance5 = radius * padding / Math.sin(limitingFov / 2);
     camera.far = Math.max(camera.far, distance5 + radius * padding * 3);
     camera.updateProjectionMatrix();
-  } else if (camera instanceof THREE25.OrthographicCamera) {
+  } else if (camera instanceof THREE26.OrthographicCamera) {
     const halfViewWidth = Math.abs(camera.right - camera.left) / 2;
     const halfViewHeight = Math.abs(camera.top - camera.bottom) / 2;
     camera.zoom = Math.min(
@@ -22639,7 +22694,7 @@ var ReferenceObject = ({
     nextObject.position.set(position.x, position.y, position.z);
     return nextObject;
   }, [type, boardDimensions, boardCenter]);
-  useEffect20(() => {
+  useEffect21(() => {
     scene.add(object);
     return () => {
       scene.remove(object);
@@ -22651,7 +22706,7 @@ var ReferenceObject = ({
 var FitCameraToComparison = ({ bounds }) => {
   const { camera } = useThree();
   const { controlsRef } = useCameraController();
-  useEffect20(() => {
+  useEffect21(() => {
     fitCameraToBounds(camera, controlsRef.current, bounds);
   }, [bounds, camera, controlsRef]);
   return null;
@@ -22677,6 +22732,7 @@ var CadViewerContainer = forwardRef2(
     clickToInteractEnabled = false,
     boardDimensions,
     boardCenter,
+    cameraSessionScope,
     referenceObject,
     onUserInteraction,
     onCameraControllerReady
@@ -22689,8 +22745,8 @@ var CadViewerContainer = forwardRef2(
     const {
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
-    } = useCameraSession();
-    useEffect21(() => {
+    } = useCameraSession({ cameraSessionScope });
+    useEffect22(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
@@ -22722,7 +22778,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE26.Vector3(0, 0, 1) },
+          scene: { up: new THREE27.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -22779,7 +22835,8 @@ var CadViewerContainer = forwardRef2(
             ),
             children
           ]
-        }
+        },
+        cameraSessionScope
       ),
       /* @__PURE__ */ jsxs2(
         "div",
@@ -22840,12 +22897,12 @@ var CadViewerContainer = forwardRef2(
 );
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState14, useEffect as useEffect22 } from "react";
+import { useState as useState14, useEffect as useEffect23 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
   const [stls, setStls] = useState14([]);
   const [loading, setLoading] = useState14(true);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -22874,7 +22931,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState15, useEffect as useEffect23, useRef as useRef8 } from "react";
+import { useState as useState15, useEffect as useEffect24, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_colors = __toESM(require_colors(), 1);
@@ -22913,7 +22970,7 @@ var createBoardGeomWithOutline = (board, depth = 1.2, options = {}) => {
 };
 
 // src/utils/get-board-edge-color.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 
 // src/geoms/constants.ts
 var M = 0.01;
@@ -22946,7 +23003,7 @@ var soldermaskColors = {
 };
 
 // src/utils/soldermask-color.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 var SOLDERMASK_PRESET_HEX = {
   red: "#650202",
   blue: "#003f7d",
@@ -22977,9 +23034,9 @@ var resolveSoldermaskColor = (requestedColor) => {
   }
   const presetName = lowercaseColor;
   const presetColor = SOLDERMASK_PRESET_HEX[presetName];
-  if (presetColor) return new THREE27.Color(presetColor);
-  const isCssColor = Object.hasOwn(THREE27.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
-  return isCssColor ? new THREE27.Color(lowercaseColor) : null;
+  if (presetColor) return new THREE28.Color(presetColor);
+  const isCssColor = Object.hasOwn(THREE28.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
+  return isCssColor ? new THREE28.Color(lowercaseColor) : null;
 };
 var resolveSoldermaskOpacity = (requestedColor) => {
   const presetName = requestedColor?.trim().toLowerCase();
@@ -23006,7 +23063,7 @@ var soldermaskColorToCss = (color) => {
 };
 
 // src/utils/get-board-edge-color.ts
-var LEGACY_FR4_EDGE_COLOR = new THREE28.Color(1063462);
+var LEGACY_FR4_EDGE_COLOR = new THREE29.Color(1063462);
 var getBoardEdgeColor = ({
   material,
   solder_mask_color
@@ -23015,7 +23072,7 @@ var getBoardEdgeColor = ({
   if (soldermaskColor) return soldermaskColor;
   if (material === "fr4") return LEGACY_FR4_EDGE_COLOR.clone();
   const materialColor = boardMaterialColors[material] ?? colors.fr4Tan;
-  return new THREE28.Color(materialColor[0], materialColor[1], materialColor[2]);
+  return new THREE29.Color(materialColor[0], materialColor[1], materialColor[2]);
 };
 
 // src/soup-to-3d/index.ts
@@ -24363,7 +24420,7 @@ var BoardGeomBuilder = class {
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState15(null);
   const isProcessingRef = useRef8(false);
-  useEffect23(() => {
+  useEffect24(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -24409,10 +24466,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState16, useCallback as useCallback8, useEffect as useEffect25, useMemo as useMemo19 } from "react";
+import { useState as useState16, useCallback as useCallback8, useEffect as useEffect26, useMemo as useMemo19 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect24, useMemo as useMemo18 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo18 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -24452,7 +24509,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect24(() => {
+  useEffect25(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -24465,7 +24522,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -24499,13 +24556,13 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component]);
   const group = useMemo19(() => {
-    const g = new THREE29.Group();
+    const g = new THREE30.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
   group.userData.cad_component_id = cad_component?.cad_component_id;
   group.userData.pcb_component_id = cad_component?.pcb_component_id;
-  useEffect25(() => {
+  useEffect26(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -24561,9 +24618,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo19(() => {
-    const m = new THREE29.Mesh(
-      new THREE29.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE29.MeshStandardMaterial({
+    const m = new THREE30.Mesh(
+      new THREE30.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE30.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -24574,7 +24631,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -24585,7 +24642,7 @@ var ErrorBox = ({ parent }) => {
 
 // src/three-components/JscadBoardTextures.tsx
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect26, useMemo as useMemo21 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo21 } from "react";
 
 // src/textures/open-via-holes-at-pads.ts
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
@@ -24740,12 +24797,12 @@ function clearViaHolesFromSurface({
 }
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE42 from "three";
+import * as THREE43 from "three";
 
 // src/utils/pad-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -24825,10 +24882,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -24836,7 +24893,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su7 } from "@tscircuit/circuit-json-util";
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -24904,17 +24961,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
@@ -25000,10 +25057,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -25011,7 +25068,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -25135,17 +25192,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -25260,17 +25317,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE34.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE34.LinearMipmapLinearFilter;
-  texture.magFilter = THREE34.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -25500,17 +25557,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE35.CanvasTexture(canvas);
+  const texture = new THREE36.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE35.LinearMipmapLinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
+  texture.minFilter = THREE36.LinearMipmapLinearFilter;
+  texture.magFilter = THREE36.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -25585,17 +25642,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE36.CanvasTexture(canvas);
+  const texture = new THREE37.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE36.LinearMipmapLinearFilter;
-  texture.magFilter = THREE36.LinearFilter;
+  texture.minFilter = THREE37.LinearMipmapLinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -25749,17 +25806,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE37.CanvasTexture(canvas);
+  const texture = new THREE38.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE37.LinearMipmapLinearFilter;
-  texture.magFilter = THREE37.LinearFilter;
+  texture.minFilter = THREE38.LinearMipmapLinearFilter;
+  texture.magFilter = THREE38.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -25910,21 +25967,21 @@ function createSilkscreenTextureForLayer({
     silkscreenColor,
     soldermaskVisible
   });
-  const texture = new THREE38.CanvasTexture(canvas);
+  const texture = new THREE39.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE38.LinearMipmapLinearFilter;
-  texture.magFilter = THREE38.LinearFilter;
+  texture.minFilter = THREE39.LinearMipmapLinearFilter;
+  texture.magFilter = THREE39.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE40 from "three";
+import * as THREE41 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
-import * as THREE39 from "three";
+import * as THREE40 from "three";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -25947,11 +26004,11 @@ var getSoldermaskPalette = (boardData) => {
       transparent: "rgba(0,0,0,0)"
     };
   }
-  const copperColor = new THREE39.Color().setRGB(
+  const copperColor = new THREE40.Color().setRGB(
     colors.copper[0],
     colors.copper[1],
     colors.copper[2],
-    THREE39.SRGBColorSpace
+    THREE40.SRGBColorSpace
   );
   return {
     soldermask: soldermaskColorToCss(requestedSoldermaskColor),
@@ -26086,17 +26143,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardData
   });
-  const texture = new THREE40.CanvasTexture(canvas);
+  const texture = new THREE41.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE40.LinearMipmapLinearFilter;
-  texture.magFilter = THREE40.LinearFilter;
+  texture.minFilter = THREE41.LinearMipmapLinearFilter;
+  texture.magFilter = THREE41.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE41 from "three";
+import * as THREE42 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer11 } from "circuit-to-canvas";
@@ -26191,10 +26248,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE41.CanvasTexture(canvas);
+  const texture = new THREE42.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE41.LinearMipmapLinearFilter;
-  texture.magFilter = THREE41.LinearFilter;
+  texture.minFilter = THREE42.LinearMipmapLinearFilter;
+  texture.magFilter = THREE42.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -26291,10 +26348,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE42.CanvasTexture(canvas);
+  const combinedTexture = new THREE43.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE42.LinearFilter;
-  combinedTexture.magFilter = THREE42.LinearFilter;
+  combinedTexture.minFilter = THREE43.LinearFilter;
+  combinedTexture.magFilter = THREE43.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -26330,11 +26387,11 @@ var createMaskedCopperMask = ({
     height
   );
   ctx.globalCompositeOperation = "source-over";
-  const maskTexture = new THREE42.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE42.NoColorSpace;
+  const maskTexture = new THREE43.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE43.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE42.LinearFilter;
-  maskTexture.magFilter = THREE42.LinearFilter;
+  maskTexture.minFilter = THREE43.LinearFilter;
+  maskTexture.magFilter = THREE43.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -26480,7 +26537,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE44 from "three";
+import * as THREE45 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -26503,7 +26560,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE43 from "three";
+import * as THREE44 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -26598,13 +26655,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   return PLAIN_SOLDERMASK_PROFILE;
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE43.CanvasTexture(canvas);
-  texture.colorSpace = THREE43.NoColorSpace;
+  const texture = new THREE44.CanvasTexture(canvas);
+  texture.colorSpace = THREE44.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE43.LinearFilter;
-  texture.magFilter = THREE43.LinearFilter;
-  texture.wrapS = THREE43.ClampToEdgeWrapping;
-  texture.wrapT = THREE43.ClampToEdgeWrapping;
+  texture.minFilter = THREE44.LinearFilter;
+  texture.magFilter = THREE44.LinearFilter;
+  texture.wrapS = THREE44.ClampToEdgeWrapping;
+  texture.wrapT = THREE44.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -26728,16 +26785,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE44.PlaneGeometry(
+  const planeGeom = new THREE45.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE44.SRGBColorSpace;
+  texture.colorSpace = THREE45.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE44.FrontSide,
+    side: THREE45.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -26746,12 +26803,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE44.MeshPhysicalMaterial({
+  const material = new THREE45.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE44.Vector2(
+    normalScale: new THREE45.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -26765,7 +26822,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE44.Mesh(planeGeom, material);
+  const mesh = new THREE45.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -26813,7 +26870,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE45 from "three";
+import * as THREE46 from "three";
 
 // src/hooks/useBoardTextureVisibility.ts
 import { useMemo as useMemo20 } from "react";
@@ -26931,7 +26988,7 @@ function JscadBoardTextures({
       visibility: textureVisibility
     });
   }, [circuitJson, boardData, traceTextureResolution, textureVisibility]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -26951,7 +27008,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE45.Texture) {
+        if (texture && texture instanceof THREE46.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -26970,16 +27027,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE45.PlaneGeometry(
+      const planeGeom = new THREE46.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE45.SRGBColorSpace;
+      texture.colorSpace = THREE46.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE45.FrontSide,
+        side: THREE46.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -26990,12 +27047,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE45.MeshPhysicalMaterial({
+      const material = new THREE46.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE45.Vector2(
+        normalScale: new THREE46.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -27007,7 +27064,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE45.Mesh(planeGeom, material);
+      const mesh = new THREE46.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -27057,7 +27114,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE45.Material) {
+        } else if (mesh.material instanceof THREE46.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -27069,8 +27126,8 @@ function JscadBoardTextures({
 }
 
 // src/three-components/STLModel.tsx
-import { useState as useState17, useEffect as useEffect27, useMemo as useMemo22 } from "react";
-import * as THREE46 from "three";
+import { useState as useState17, useEffect as useEffect28, useMemo as useMemo22 } from "react";
+import * as THREE47 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -27082,7 +27139,7 @@ function STLModel({
 }) {
   const { rootObject } = useThree();
   const [geom, setGeom] = useState17(null);
-  useEffect27(() => {
+  useEffect28(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -27103,15 +27160,15 @@ function STLModel({
   const mesh = useMemo22(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE46.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE46.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE47.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE47.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity,
       polygonOffset: isBoardLayer,
       polygonOffsetFactor: isBoardLayer ? 6 : 0,
       polygonOffsetUnits: isBoardLayer ? 6 : 0
     });
-    const createdMesh = new THREE46.Mesh(geom, material);
+    const createdMesh = new THREE47.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -27119,7 +27176,7 @@ function STLModel({
     });
     return createdMesh;
   }, [geom, color, opacity, layerType]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -27173,8 +27230,8 @@ function VisibleSTLModel({
 // src/three-components/CadCable.tsx
 import { parseCableString } from "@tscircuit/cableprinter";
 import { createCableMeshes } from "jscad-electronics/cables";
-import { useEffect as useEffect28, useMemo as useMemo23 } from "react";
-import * as THREE47 from "three";
+import { useEffect as useEffect29, useMemo as useMemo23 } from "react";
+import * as THREE48 from "three";
 var isCadCableElement = (element) => {
   if (!element || typeof element !== "object") return false;
   const candidate = element;
@@ -27191,14 +27248,14 @@ var getConnectorPin1Side = ({
   const endpoint = end === "start" ? path[0] : path[path.length - 1];
   const adjacent = end === "start" ? path[1] : path[path.length - 2];
   if (!endpoint || !adjacent) return void 0;
-  const cableAxis = new THREE47.Vector3(
+  const cableAxis = new THREE48.Vector3(
     adjacent.x - endpoint.x,
     adjacent.y - endpoint.y,
     adjacent.z - endpoint.z
   );
   if (cableAxis.lengthSq() < 1e-12) return void 0;
   cableAxis.normalize();
-  const pin1Side = new THREE47.Vector3(
+  const pin1Side = new THREE48.Vector3(
     pin1Position.x - endpoint.x,
     pin1Position.y - endpoint.y,
     pin1Position.z - endpoint.z
@@ -27224,28 +27281,28 @@ var createCadCableObject = (cable) => {
       end: "end"
     })
   });
-  const group = new THREE47.Group();
+  const group = new THREE48.Group();
   group.name = `cad-cable-${cable.cad_cable_id}`;
   group.userData = { cadCableId: cable.cad_cable_id, name: cable.name };
   for (const cableMesh of cableMeshes) {
-    let geometry = new THREE47.BufferGeometry();
+    let geometry = new THREE48.BufferGeometry();
     geometry.setAttribute(
       "position",
-      new THREE47.Float32BufferAttribute(cableMesh.positions, 3)
+      new THREE48.Float32BufferAttribute(cableMesh.positions, 3)
     );
     geometry.setIndex(cableMesh.indices);
     if (!cableMesh.smooth) geometry = geometry.toNonIndexed();
     geometry.computeVertexNormals();
     const [red, green, blue, alpha] = cableMesh.color;
-    const material = new THREE47.MeshStandardMaterial({
-      color: new THREE47.Color(red, green, blue),
+    const material = new THREE48.MeshStandardMaterial({
+      color: new THREE48.Color(red, green, blue),
       metalness: cableMesh.material?.metalness ?? 0,
       roughness: cableMesh.material?.roughness ?? 0.7,
       opacity: alpha,
       transparent: alpha < 1,
-      side: THREE47.DoubleSide
+      side: THREE48.DoubleSide
     });
-    const mesh = new THREE47.Mesh(geometry, material);
+    const mesh = new THREE48.Mesh(geometry, material);
     mesh.name = `${group.name}:${cableMesh.name}`;
     configureObjectShadows(mesh, { castShadow: true, receiveShadow: true });
     group.add(mesh);
@@ -27254,7 +27311,7 @@ var createCadCableObject = (cable) => {
 };
 var disposeCadCableObject = (group) => {
   group.traverse((object) => {
-    if (!(object instanceof THREE47.Mesh)) return;
+    if (!(object instanceof THREE48.Mesh)) return;
     object.geometry.dispose();
     const materials = Array.isArray(object.material) ? object.material : [object.material];
     for (const material of materials) material.dispose();
@@ -27270,7 +27327,7 @@ var CadCable = ({ cable }) => {
       return null;
     }
   }, [cable]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!cableObject) return;
     rootObject.add(cableObject);
     return () => {
@@ -27281,6 +27338,22 @@ var CadCable = ({ cable }) => {
   return null;
 };
 
+// src/utils/get-initial-camera-position.ts
+function getInitialCameraPosition({
+  boardDimensions,
+  boardCenter
+}) {
+  if (!boardDimensions || !boardCenter) return [5, -5, 5];
+  const safeWidth = Math.max(boardDimensions.width ?? 0, 1);
+  const safeHeight = Math.max(boardDimensions.height ?? 0, 1);
+  const largestDimension = Math.max(safeWidth, safeHeight, 5);
+  return [
+    boardCenter.x + largestDimension * 0.4,
+    boardCenter.y - largestDimension * 0.7,
+    largestDimension * 0.9
+  ];
+}
+
 // src/utils/preprocess-circuit-json.ts
 import { su as su11 } from "@tscircuit/circuit-json-util";
 
@@ -27390,32 +27463,6 @@ var CadViewerJscad = forwardRef3(
       );
     }, [circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo24(() => {
-      if (!internalCircuitJson) return [5, -5, 5];
-      try {
-        const board = su12(internalCircuitJson).pcb_board.list()[0];
-        if (!board) return [5, -5, 5];
-        const { width, height } = board;
-        if (!width && !height) {
-          return [5, -5, 5];
-        }
-        const minCameraDistance = 5;
-        const adjustedBoardWidth = Math.max(width, minCameraDistance);
-        const adjustedBoardHeight = Math.max(height, minCameraDistance);
-        const largestDim = Math.max(adjustedBoardWidth, adjustedBoardHeight);
-        return [
-          largestDim * 0.4,
-          // Move right
-          -largestDim * 0.7,
-          // Move back (negative Y)
-          largestDim * 0.9
-          // Keep height but slightly lower than top-down
-        ];
-      } catch (e) {
-        console.error(e);
-        return [5, -5, 5];
-      }
-    }, [internalCircuitJson]);
     const isFauxBoard = useMemo24(() => {
       if (!internalCircuitJson) return false;
       try {
@@ -27449,6 +27496,19 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
+    const cameraSessionScope = useMemo24(() => {
+      if (!internalCircuitJson) return void 0;
+      const board = su12(internalCircuitJson).pcb_board.list()[0];
+      if (!board) return void 0;
+      return JSON.stringify({
+        pcbBoardId: board.pcb_board_id,
+        center: boardCenter,
+        dimensions: boardDimensions
+      });
+    }, [internalCircuitJson, boardCenter, boardDimensions]);
+    const initialCameraPosition = useMemo24(() => {
+      return getInitialCameraPosition({ boardDimensions, boardCenter });
+    }, [boardDimensions, boardCenter]);
     const pcbThickness = usePcbThickness(internalCircuitJson);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
     const cad_components = su12(internalCircuitJson).cad_component.list().filter((cad) => !hiddenCadComponentIds?.has(cad.cad_component_id));
@@ -27462,6 +27522,7 @@ var CadViewerJscad = forwardRef3(
         clickToInteractEnabled,
         boardDimensions,
         boardCenter,
+        cameraSessionScope,
         referenceObject,
         onUserInteraction,
         onCameraControllerReady,
@@ -27507,6 +27568,9 @@ var CadViewerJscad = forwardRef3(
   }
 );
 
+// src/CadViewerManifold.tsx
+import { su as su17 } from "@tscircuit/circuit-json-util";
+
 // node_modules/earcut/src/earcut.js
 var steiners = /* @__PURE__ */ new Set();
 var filteredOut = false;
@@ -28445,207 +28509,61 @@ function extrudePolygon({
       pcbFace: "side"
     });
   }
-  return { triangles, boundingBox: boundsOfTriangles(triangles) };
-}
-function createStiffenerMesh({
-  stiffener,
-  boardThickness,
-  fold
-}) {
-  const adhesive = stiffener.adhesive_thickness ?? 0;
-  if (!Number.isFinite(adhesive) || adhesive < 0 || !Number.isFinite(stiffener.thickness) || stiffener.thickness <= 0 || !["top", "bottom"].includes(stiffener.layer))
-    throw new Error(`Invalid PCB stiffener ${stiffener.pcb_stiffener_id}`);
-  const outline = stiffener.shape === "polygon" ? stiffener.outline : (() => {
-    if (!(stiffener.width > 0 && stiffener.height > 0))
-      throw new Error("Invalid stiffener dimensions");
-    const a = (stiffener.rotation ?? 0) * Math.PI / 180;
-    return [
-      [-1, -1],
-      [1, -1],
-      [1, 1],
-      [-1, 1]
-    ].map(([x, y]) => ({
-      x: stiffener.center.x + x * stiffener.width / 2 * Math.cos(a) - y * stiffener.height / 2 * Math.sin(a),
-      y: stiffener.center.y + x * stiffener.width / 2 * Math.sin(a) + y * stiffener.height / 2 * Math.cos(a)
-    }));
-  })();
-  const near = boardThickness / 2 + adhesive, far = near + stiffener.thickness;
-  const mesh = extrudePolygon({
-    outline,
-    bottom: stiffener.layer === "top" ? near : -far,
-    top: stiffener.layer === "top" ? far : -near
-  });
-  if (!fold) return mesh;
-  fold.assertRigid(
-    mesh.triangles.flatMap((t) => t.vertices),
-    stiffener.pcb_stiffener_id
-  );
-  const anchor = {
-    x: outline.reduce((s, p) => s + p.x, 0) / outline.length,
-    y: outline.reduce((s, p) => s + p.y, 0) / outline.length,
-    z: 0
-  };
-  const triangles = mesh.triangles.map((t) => ({
-    ...t,
-    vertices: t.vertices.map((p) => fold.point(p, anchor)),
-    normal: fold.direction(t.normal, anchor)
-  }));
-  return { ...mesh, triangles, boundingBox: boundsOfTriangles(triangles) };
-}
-
-// src/utils/flex-meshes.ts
-import * as THREE48 from "three";
-function meshToSurface(mesh, center) {
-  mesh.updateMatrix();
-  const geometry = mesh.geometry.index ? mesh.geometry.toNonIndexed() : mesh.geometry;
-  const position = geometry.getAttribute("position"), uv = geometry.getAttribute("uv");
-  const triangles = [];
-  for (let i = 0; i < position.count; i += 3) {
-    const vertices = [0, 1, 2].map((j) => {
-      const v = new THREE48.Vector3().fromBufferAttribute(position, i + j).applyMatrix4(mesh.matrix);
-      return { x: v.x - center.x, y: v.y - center.y, z: v.z };
-    });
-    const [a, b, c] = vertices;
-    const n = new THREE48.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE48.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
-    triangles.push({
-      vertices,
-      normal: { x: n.x, y: n.y, z: n.z },
-      ...uv ? {
-        uvs: [0, 1, 2].map((j) => ({
-          u: uv.getX(i + j),
-          v: uv.getY(i + j)
-        }))
-      } : {}
-    });
-  }
-  if (geometry !== mesh.geometry) geometry.dispose();
-  return { triangles, boundingBox: boundsOfTriangles(triangles) };
-}
-function surfaceToGeometry(surface, center) {
-  const positions = [], normals = [], uvs = [];
-  for (const triangle of surface.triangles)
-    triangle.vertices.forEach((p, i) => {
-      positions.push(p.x + center.x, p.y + center.y, p.z);
-      normals.push(triangle.normal.x, triangle.normal.y, triangle.normal.z);
-      uvs.push(triangle.uvs?.[i]?.u ?? 0, triangle.uvs?.[i]?.v ?? 0);
-    });
-  const geometry = new THREE48.BufferGeometry();
-  geometry.setAttribute(
-    "position",
-    new THREE48.Float32BufferAttribute(positions, 3)
-  );
-  geometry.setAttribute("normal", new THREE48.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("uv", new THREE48.Float32BufferAttribute(uvs, 2));
-  geometry.computeBoundingBox();
-  geometry.computeBoundingSphere();
-  return geometry;
-}
-function replaceGeometry(mesh, surface, board) {
-  const output = mesh.clone();
-  output.geometry = surfaceToGeometry(surface, board.center);
-  output.position.set(0, 0, 0);
-  output.rotation.set(0, 0, 0);
-  output.scale.set(1, 1, 1);
-  output.updateMatrix();
-  return output;
-}
-function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
-  const boards = json.filter((e) => e.type === "pcb_board");
-  const bends = json.filter((e) => e.type === "pcb_bend"), stiffeners = json.filter((e) => e.type === "pcb_stiffener");
-  if (!bends.length && !stiffeners.length)
-    return { geometryMeshes, textureMeshes };
-  const board = boards[0];
-  if (!board || boards.length !== 1 || json.some((e) => e.type === "pcb_panel") || [...bends, ...stiffeners].some((e) => e.pcb_board_id !== board.pcb_board_id))
-    throw new Error(
-      "Flex rendering requires one board, matching board references, and no panel"
-    );
-  const fold = foldPcbs ? createPcbFold(bends, board.thickness ?? 1.6) : void 0;
-  const body = geometryMeshes.find((m) => m.name === "board-geom");
-  const flatBody = body ? meshToSurface(body, board.center) : void 0;
-  const geometry = fold ? geometryMeshes.map(
-    (mesh) => replaceGeometry(
-      mesh,
-      foldSurfaceMesh(meshToSurface(mesh, board.center), fold),
-      board
-    )
-  ) : [...geometryMeshes];
-  const textures = fold && flatBody ? textureMeshes.map((mesh) => {
-    mesh.updateMatrix();
-    const inverse4 = mesh.matrix.clone().invert();
-    const bottom = mesh.name.startsWith("bottom");
-    const dimensions = mesh.geometry.parameters;
-    const triangles = flatBody.triangles.filter((t) => bottom ? t.normal.z < -0.9 : t.normal.z > 0.9).map((t) => {
-      const vertices = t.vertices.map((p) => ({
-        ...p,
-        z: mesh.position.z
-      }));
-      const uvs = vertices.map((p) => {
-        const local = new THREE48.Vector3(
-          p.x + board.center.x,
-          p.y + board.center.y,
-          p.z
-        ).applyMatrix4(inverse4);
-        return {
-          u: local.x / dimensions.width + 0.5,
-          v: local.y / dimensions.height + 0.5
-        };
-      });
-      return { ...t, vertices, uvs };
-    });
-    const result = replaceGeometry(
-      mesh,
-      foldSurfaceMesh(
-        { triangles, boundingBox: boundsOfTriangles(triangles) },
-        fold
-      ),
-      board
-    );
-    mesh.geometry.dispose();
-    return result;
-  }) : textureMeshes;
-  for (const stiffener of stiffeners) {
-    const mesh = new THREE48.Mesh(
-      surfaceToGeometry(
-        createStiffenerMesh({
-          stiffener,
-          boardThickness: board.thickness ?? 1.6,
-          fold
-        }),
-        board.center
-      ),
-      new THREE48.MeshStandardMaterial({
-        color: stiffener.material === "fr4" ? "#879568" : stiffener.material === "polyimide" ? "#bd7f27" : "#b8bdc4",
-        side: THREE48.DoubleSide
-      })
-    );
-    mesh.name = "board-stiffener";
-    configureObjectShadows(mesh);
-    geometry.push(mesh);
-  }
-  const bounds = new THREE48.Box3();
-  for (const mesh of [...geometry, ...textures]) bounds.expandByObject(mesh);
-  return {
-    geometryMeshes: geometry,
-    textureMeshes: textures,
-    bounds: {
-      minX: bounds.min.x,
-      maxX: bounds.max.x,
-      minY: bounds.min.y,
-      maxY: bounds.max.y,
-      minZ: bounds.min.z,
-      maxZ: bounds.max.z
-    }
+  return { triangles, boundingBox: boundsOfTriangles(triangles) };
+}
+function createStiffenerMesh({
+  stiffener,
+  boardThickness,
+  fold
+}) {
+  const adhesive = stiffener.adhesive_thickness ?? 0;
+  if (!Number.isFinite(adhesive) || adhesive < 0 || !Number.isFinite(stiffener.thickness) || stiffener.thickness <= 0 || !["top", "bottom"].includes(stiffener.layer))
+    throw new Error(`Invalid PCB stiffener ${stiffener.pcb_stiffener_id}`);
+  const outline = stiffener.shape === "polygon" ? stiffener.outline : (() => {
+    if (!(stiffener.width > 0 && stiffener.height > 0))
+      throw new Error("Invalid stiffener dimensions");
+    const a = (stiffener.rotation ?? 0) * Math.PI / 180;
+    return [
+      [-1, -1],
+      [1, -1],
+      [1, 1],
+      [-1, 1]
+    ].map(([x, y]) => ({
+      x: stiffener.center.x + x * stiffener.width / 2 * Math.cos(a) - y * stiffener.height / 2 * Math.sin(a),
+      y: stiffener.center.y + x * stiffener.width / 2 * Math.sin(a) + y * stiffener.height / 2 * Math.cos(a)
+    }));
+  })();
+  const near = boardThickness / 2 + adhesive, far = near + stiffener.thickness;
+  const mesh = extrudePolygon({
+    outline,
+    bottom: stiffener.layer === "top" ? near : -far,
+    top: stiffener.layer === "top" ? far : -near
+  });
+  if (!fold) return mesh;
+  fold.assertRigid(
+    mesh.triangles.flatMap((t) => t.vertices),
+    stiffener.pcb_stiffener_id
+  );
+  const anchor = {
+    x: outline.reduce((s, p) => s + p.x, 0) / outline.length,
+    y: outline.reduce((s, p) => s + p.y, 0) / outline.length,
+    z: 0
   };
+  const triangles = mesh.triangles.map((t) => ({
+    ...t,
+    vertices: t.vertices.map((p) => fold.point(p, anchor)),
+    normal: fold.direction(t.normal, anchor)
+  }));
+  return { ...mesh, triangles, boundingBox: boundsOfTriangles(triangles) };
 }
 
 // src/CadViewerManifold.tsx
-import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect30, useMemo as useMemo26, useState as useState19 } from "react";
-import * as THREE55 from "three";
+import { useEffect as useEffect31, useMemo as useMemo26, useState as useState19 } from "react";
+import * as THREE56 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect29, useMemo as useMemo25, useRef as useRef9, useState as useState18 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo25, useRef as useRef9, useState as useState18 } from "react";
 import * as THREE52 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
@@ -29824,7 +29742,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -30024,12 +29942,157 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   };
 };
 
+// src/utils/flex-meshes.ts
+import * as THREE53 from "three";
+function meshToSurface(mesh, center) {
+  mesh.updateMatrix();
+  const geometry = mesh.geometry.index ? mesh.geometry.toNonIndexed() : mesh.geometry;
+  const position = geometry.getAttribute("position"), uv = geometry.getAttribute("uv");
+  const triangles = [];
+  for (let i = 0; i < position.count; i += 3) {
+    const vertices = [0, 1, 2].map((j) => {
+      const v = new THREE53.Vector3().fromBufferAttribute(position, i + j).applyMatrix4(mesh.matrix);
+      return { x: v.x - center.x, y: v.y - center.y, z: v.z };
+    });
+    const [a, b, c] = vertices;
+    const n = new THREE53.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE53.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
+    triangles.push({
+      vertices,
+      normal: { x: n.x, y: n.y, z: n.z },
+      ...uv ? {
+        uvs: [0, 1, 2].map((j) => ({
+          u: uv.getX(i + j),
+          v: uv.getY(i + j)
+        }))
+      } : {}
+    });
+  }
+  if (geometry !== mesh.geometry) geometry.dispose();
+  return { triangles, boundingBox: boundsOfTriangles(triangles) };
+}
+function surfaceToGeometry(surface, center) {
+  const positions = [], normals = [], uvs = [];
+  for (const triangle of surface.triangles)
+    triangle.vertices.forEach((p, i) => {
+      positions.push(p.x + center.x, p.y + center.y, p.z);
+      normals.push(triangle.normal.x, triangle.normal.y, triangle.normal.z);
+      uvs.push(triangle.uvs?.[i]?.u ?? 0, triangle.uvs?.[i]?.v ?? 0);
+    });
+  const geometry = new THREE53.BufferGeometry();
+  geometry.setAttribute(
+    "position",
+    new THREE53.Float32BufferAttribute(positions, 3)
+  );
+  geometry.setAttribute("normal", new THREE53.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("uv", new THREE53.Float32BufferAttribute(uvs, 2));
+  geometry.computeBoundingBox();
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function replaceGeometry(mesh, surface, board) {
+  const output = mesh.clone();
+  output.geometry = surfaceToGeometry(surface, board.center);
+  output.position.set(0, 0, 0);
+  output.rotation.set(0, 0, 0);
+  output.scale.set(1, 1, 1);
+  output.updateMatrix();
+  return output;
+}
+function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
+  const boards = json.filter((e) => e.type === "pcb_board");
+  const bends = json.filter((e) => e.type === "pcb_bend"), stiffeners = json.filter((e) => e.type === "pcb_stiffener");
+  if (!bends.length && !stiffeners.length)
+    return { geometryMeshes, textureMeshes };
+  const board = boards[0];
+  if (!board || boards.length !== 1 || json.some((e) => e.type === "pcb_panel") || [...bends, ...stiffeners].some((e) => e.pcb_board_id !== board.pcb_board_id))
+    throw new Error(
+      "Flex rendering requires one board, matching board references, and no panel"
+    );
+  const fold = foldPcbs ? createPcbFold(bends, board.thickness ?? 1.6) : void 0;
+  const body = geometryMeshes.find((m) => m.name === "board-geom");
+  const flatBody = body ? meshToSurface(body, board.center) : void 0;
+  const geometry = fold ? geometryMeshes.map(
+    (mesh) => replaceGeometry(
+      mesh,
+      foldSurfaceMesh(meshToSurface(mesh, board.center), fold),
+      board
+    )
+  ) : [...geometryMeshes];
+  const textures = fold && flatBody ? textureMeshes.map((mesh) => {
+    mesh.updateMatrix();
+    const inverse4 = mesh.matrix.clone().invert();
+    const bottom = mesh.name.startsWith("bottom");
+    const dimensions = mesh.geometry.parameters;
+    const triangles = flatBody.triangles.filter((t) => bottom ? t.normal.z < -0.9 : t.normal.z > 0.9).map((t) => {
+      const vertices = t.vertices.map((p) => ({
+        ...p,
+        z: mesh.position.z
+      }));
+      const uvs = vertices.map((p) => {
+        const local = new THREE53.Vector3(
+          p.x + board.center.x,
+          p.y + board.center.y,
+          p.z
+        ).applyMatrix4(inverse4);
+        return {
+          u: local.x / dimensions.width + 0.5,
+          v: local.y / dimensions.height + 0.5
+        };
+      });
+      return { ...t, vertices, uvs };
+    });
+    const result = replaceGeometry(
+      mesh,
+      foldSurfaceMesh(
+        { triangles, boundingBox: boundsOfTriangles(triangles) },
+        fold
+      ),
+      board
+    );
+    mesh.geometry.dispose();
+    return result;
+  }) : textureMeshes;
+  for (const stiffener of stiffeners) {
+    const mesh = new THREE53.Mesh(
+      surfaceToGeometry(
+        createStiffenerMesh({
+          stiffener,
+          boardThickness: board.thickness ?? 1.6,
+          fold
+        }),
+        board.center
+      ),
+      new THREE53.MeshStandardMaterial({
+        color: stiffener.material === "fr4" ? "#879568" : stiffener.material === "polyimide" ? "#bd7f27" : "#b8bdc4",
+        side: THREE53.DoubleSide
+      })
+    );
+    mesh.name = "board-stiffener";
+    configureObjectShadows(mesh);
+    geometry.push(mesh);
+  }
+  const bounds = new THREE53.Box3();
+  for (const mesh of [...geometry, ...textures]) bounds.expandByObject(mesh);
+  return {
+    geometryMeshes: geometry,
+    textureMeshes: textures,
+    bounds: {
+      minX: bounds.min.x,
+      maxX: bounds.max.x,
+      minY: bounds.min.y,
+      maxY: bounds.max.y,
+      minZ: bounds.min.z,
+      maxZ: bounds.max.z
+    }
+  };
+}
+
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE54 from "three";
+import * as THREE55 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE53 from "three";
-var DEFAULT_SIDE = THREE53.DoubleSide;
+import * as THREE54 from "three";
+var DEFAULT_SIDE = THREE54.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -30037,7 +30100,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE53.MeshPhysicalMaterial({
+    return new THREE54.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -30055,7 +30118,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE53.MeshStandardMaterial({
+  return new THREE54.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -30074,12 +30137,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE54.Mesh(
+    const mesh = new THREE55.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE54.DoubleSide,
+        side: THREE55.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -30090,11 +30153,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE54.Mesh(
+        const mesh = new THREE55.Mesh(
           comp.geometry,
-          new THREE54.MeshStandardMaterial({
+          new THREE55.MeshStandardMaterial({
             color: comp.color,
-            side: THREE54.DoubleSide,
+            side: THREE55.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -30139,14 +30202,14 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE55.Texture) {
+        if (texture && texture instanceof THREE56.Texture) {
           texture.dispose();
         }
       }
       material.dispose();
     }
   };
-  useEffect30(() => {
+  useEffect31(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -30168,7 +30231,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -30205,7 +30268,7 @@ var CadViewerManifold = ({
   const [manifoldJSModule, setManifoldJSModule] = useState19(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState19(null);
   const { visibility } = useLayerVisibility();
-  useEffect30(() => {
+  useEffect31(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -30326,20 +30389,16 @@ try {
     return { x: bounds.centerX, y: bounds.centerY };
   }, [boardData]);
   const initialCameraPosition = useMemo26(() => {
-    if (!boardData) return [5, -5, 5];
-    const { width = 0, height = 0 } = boardData;
-    const safeWidth = Math.max(width, 1);
-    const safeHeight = Math.max(height, 1);
-    const largestDim = Math.max(safeWidth, safeHeight, 5);
-    return [
-      largestDim * 0.4,
-      // Move right
-      -largestDim * 0.7,
-      // Move back (negative Y)
-      largestDim * 0.9
-      // Keep height but slightly lower than top-down
-    ];
-  }, [boardData]);
+    return getInitialCameraPosition({ boardDimensions, boardCenter });
+  }, [boardDimensions, boardCenter]);
+  const cameraSessionScope = useMemo26(() => {
+    if (!boardData) return void 0;
+    return JSON.stringify({
+      pcbBoardId: boardData.pcb_board_id,
+      center: boardCenter,
+      dimensions: boardDimensions
+    });
+  }, [boardData, boardCenter, boardDimensions]);
   if (manifoldLoadingError) {
     return /* @__PURE__ */ jsxs5(
       "div",
@@ -30389,6 +30448,7 @@ try {
       clickToInteractEnabled,
       boardDimensions,
       boardCenter,
+      cameraSessionScope,
       referenceObject,
       onUserInteraction,
       onCameraControllerReady,
@@ -37871,10 +37931,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect48, useMemo as useMemo36, useRef as useRef27, useState as useState40 } from "react";
+import { useEffect as useEffect49, useMemo as useMemo36, useRef as useRef27, useState as useState40 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect47, useMemo as useMemo35, useRef as useRef26, useState as useState39 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo35, useRef as useRef26, useState as useState39 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -38005,7 +38065,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect47(() => {
+  useEffect48(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -38021,7 +38081,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState39(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect47(() => subscribeToRegistry(setEntries), []);
+  useEffect48(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -38038,7 +38098,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState40("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect48(() => {
+  useEffect49(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -38049,7 +38109,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -38278,7 +38338,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState41, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect49 } from "react";
+import { useState as useState41, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect50 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
   const [menuVisible, setMenuVisible] = useState41(false);
   const [menuPos, setMenuPos] = useState41({
@@ -38395,7 +38455,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect49(() => {
+  useEffect50(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -38459,7 +38519,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE56.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE57.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -38626,24 +38686,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect50(() => {
+  useEffect51(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect50(() => {
+  useEffect51(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect50(() => {
+  useEffect51(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect50(() => {
+  useEffect51(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect50(() => {
+  useEffect51(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? circuitKey : void 0;
@@ -38782,11 +38842,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE60 from "three";
+import * as THREE61 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE57 from "three";
+import * as THREE58 from "three";
 import { BufferGeometry as BufferGeometry6, Float32BufferAttribute as Float32BufferAttribute6 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry6();
@@ -38800,12 +38860,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE57.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE57.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE57.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE57.Vector3().crossVectors(
-        new THREE57.Vector3().subVectors(v2, v1),
-        new THREE57.Vector3().subVectors(v3, v1)
+      const v1 = new THREE58.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE58.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE58.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE58.Vector3().crossVectors(
+        new THREE58.Vector3().subVectors(v2, v1),
+        new THREE58.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -38833,10 +38893,10 @@ import {
   convertCSGToThreeGeom as convertCSGToThreeGeom3,
   getJscadModelForFootprint as getJscadModelForFootprint2
 } from "jscad-electronics/vanilla";
-import * as THREE59 from "three";
+import * as THREE60 from "three";
 
 // src/utils/load-model.ts
-import * as THREE58 from "three";
+import * as THREE59 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";
@@ -38844,12 +38904,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE58.MeshStandardMaterial({
+    const material = new THREE59.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE58.Mesh(geometry, material);
+    return new THREE59.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -38882,9 +38942,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -38898,13 +38958,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom3(jscadObject);
-      const material2 = new THREE59.MeshStandardMaterial({
+      const material2 = new THREE60.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE59.DoubleSide
+        side: THREE60.DoubleSide
       });
-      const mesh2 = new THREE59.Mesh(threeGeom, material2);
+      const mesh2 = new THREE60.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -38914,9 +38974,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -38933,17 +38993,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE59.Color(geomInfo.color);
+      const color = new THREE60.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom3(geomWithColor);
-      const material2 = new THREE59.MeshStandardMaterial({
+      const material2 = new THREE60.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE59.DoubleSide
+        side: THREE60.DoubleSide
       });
-      const mesh2 = new THREE59.Mesh(threeGeom, material2);
+      const mesh2 = new THREE60.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -38953,22 +39013,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE59.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE59.MeshStandardMaterial({
+  const geometry = new THREE60.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE60.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE59.Mesh(geometry, material);
+  const mesh = new THREE60.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -38989,11 +39049,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE60.Scene();
+  const scene = new THREE61.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE60.Color(backgroundColor), 1);
-  const camera = new THREE60.OrthographicCamera();
+  renderer.setClearColor(new THREE61.Color(backgroundColor), 1);
+  const camera = new THREE61.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -39007,11 +39067,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt2 = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE60.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
+  camera.lookAt(new THREE61.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE60.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE61.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE60.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE61.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -39043,28 +39103,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: edgeColor,
-        side: THREE60.DoubleSide
+        side: THREE61.DoubleSide
       });
-      const mesh = new THREE60.Mesh(geometry, material);
+      const mesh = new THREE61.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE60.Color(8947848);
-  const gridHelper = new THREE60.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE61.Color(8947848);
+  const gridHelper = new THREE61.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE60.LineBasicMaterial) {
+    if (mat instanceof THREE61.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE60.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE60.Vector3());
-  const size4 = box.getSize(new THREE60.Vector3());
+  const box = new THREE61.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE61.Vector3());
+  const size4 = box.getSize(new THREE61.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -39082,7 +39142,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect51, useState as useState43, useMemo as useMemo37, useCallback as useCallback26 } from "react";
+import { useEffect as useEffect52, useState as useState43, useMemo as useMemo37, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo37(() => document.createElement("a"), []);
@@ -39095,7 +39155,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect51(
+  useEffect52(
     () => () => {
       link.remove();
       instance = null;
@@ -39116,7 +39176,7 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect51(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect52(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {