@tscircuit/3d-viewer 0.0.644 → 0.0.645

package/dist/index.js

@@ -19351,15 +19351,83 @@ function configureRuntimeFont() {
 }
 
 // src/CadViewer.tsx
-import { useCallback as useCallback25, useContext as useContext13, useEffect as useEffect57, useRef as useRef30, useState as useState46 } from "react";
+import {
+  useCallback as useCallback25,
+  useContext as useContext13,
+  useEffect as useEffect58,
+  useMemo as useMemo41,
+  useRef as useRef31,
+  useState as useState47
+} from "react";
 import * as THREE64 from "three";
 
 // src/assembly-explosion/use-assembly-explosion.ts
+import { Circuit } from "@tscircuit/core";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/assembly-explosion/create-explosion-evaluator.ts
 import {
-  Circuit,
   getCircuitJsonAssemblyExplosion
 } from "@tscircuit/core";
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+function createExplosionEvaluator(assembled) {
+  const motion = [];
+  const visible = assembled.filter(
+    (element) => element.type !== "cad_explosion_stage" && element.type !== "cad_explosion_move"
+  );
+  for (const element of assembled) {
+    switch (element.type) {
+      case "cad_component":
+        motion.push({
+          type: element.type,
+          cad_component_id: element.cad_component_id,
+          source_component_id: element.source_component_id,
+          pcb_component_id: element.pcb_component_id,
+          position: element.position,
+          rotation: element.rotation,
+          layer: element.layer,
+          anchor_alignment: element.anchor_alignment,
+          model_object_fit: element.model_object_fit
+        });
+        break;
+      case "cad_reference_surface":
+        motion.push(element);
+        break;
+      case "cad_explosion_stage":
+      case "cad_explosion_move":
+        motion.push(element);
+        break;
+    }
+  }
+  return (options) => {
+    const view = getCircuitJsonAssemblyExplosion(motion, options);
+    const positions = /* @__PURE__ */ new Map();
+    const centers = /* @__PURE__ */ new Map();
+    for (const element of view.circuitJson) {
+      if (element.type === "cad_component")
+        positions.set(element.cad_component_id, element.position);
+      if (element.type === "cad_reference_surface")
+        centers.set(element.cad_reference_surface_id, element.center);
+    }
+    return {
+      ...view,
+      circuitJson: visible.map((element) => {
+        if (element.type === "cad_component")
+          return {
+            ...element,
+            position: positions.get(element.cad_component_id)
+          };
+        if (element.type === "cad_reference_surface")
+          return {
+            ...element,
+            center: centers.get(element.cad_reference_surface_id)
+          };
+        return element;
+      })
+    };
+  };
+}
+
+// src/assembly-explosion/use-assembly-explosion.ts
 var EMPTY = [];
 function useAssemblyExplosion(children, circuit, circuitJson) {
   const [rendered, setRendered] = useState3();
@@ -19399,7 +19467,8 @@ function useAssemblyExplosion(children, circuit, circuitJson) {
   const assembled = source.assembled;
   const authored = useMemo2(() => {
     try {
-      return { stages: getCircuitJsonAssemblyExplosion(assembled).stages };
+      const evaluate2 = createExplosionEvaluator(assembled);
+      return { stages: evaluate2().stages, evaluate: evaluate2 };
     } catch (error) {
       return {
         stages: [],
@@ -19410,12 +19479,13 @@ function useAssemblyExplosion(children, circuit, circuitJson) {
   const [selection, setSelection] = useState3({ source: assembled, amount: 0 });
   const amount = selection.source === assembled ? selection.amount : 0;
   const view = useMemo2(() => {
-    if (!authored.stages.length || amount === 0) return void 0;
+    if (!authored.evaluate || !authored.stages.length || amount === 0)
+      return void 0;
     const stageIndex = Math.min(
       Math.ceil(amount) - 1,
       authored.stages.length - 1
     );
-    return getCircuitJsonAssemblyExplosion(assembled, {
+    return authored.evaluate({
       throughStageRef: authored.stages[stageIndex],
       stageProgress: amount - stageIndex
     });
@@ -19525,7 +19595,7 @@ function AssemblyExplosionScene() {
 }
 
 // src/assembly-explosion/AssemblyExplosionControl.tsx
-import { useId } from "react";
+import { useEffect as useEffect4, useId, useRef, useState as useState4 } from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function AssemblyExplosionControl({
   stages,
@@ -19535,6 +19605,32 @@ function AssemblyExplosionControl({
   onClose
 }) {
   const id = useId();
+  const [playing, setPlaying] = useState4(false);
+  const [stageDuration, setStageDuration] = useState4(2);
+  const playback = useRef({ amount, onChange });
+  playback.current = { amount, onChange };
+  useEffect4(() => {
+    if (!playing || error || !stages.length) return;
+    let frame;
+    let previous = performance.now();
+    const tick = (now) => {
+      const next = Math.min(
+        stages.length,
+        playback.current.amount + (now - previous) / (stageDuration * 1e3)
+      );
+      previous = now;
+      playback.current.amount = next;
+      playback.current.onChange(next);
+      if (next >= stages.length) setPlaying(false);
+      else frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [playing, stageDuration, stages.length, error]);
+  const seek = (value) => {
+    setPlaying(false);
+    onChange(value);
+  };
   if (!stages.length && !error) return null;
   const stage = amount === 0 ? "Assembled" : stages[Math.ceil(amount) - 1];
   return /* @__PURE__ */ jsxs2(
@@ -19560,7 +19656,10 @@ function AssemblyExplosionControl({
           {
             type: "button",
             "aria-label": "Close exploded view",
-            onClick: onClose,
+            onClick: () => {
+              setPlaying(false);
+              onClose();
+            },
             style: { float: "right", marginLeft: 12 },
             children: "\xD7"
           }
@@ -19585,19 +19684,81 @@ function AssemblyExplosionControl({
                 max: stages.length,
                 step: 0.01,
                 value: amount,
-                onChange: (event) => onChange(Number(event.target.value))
+                onChange: (event) => seek(Number(event.target.value))
               }
             ),
             /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
-                onClick: () => onChange(0),
-                disabled: amount === 0,
+                onClick: () => seek(0),
+                disabled: amount === 0 && !playing,
                 children: "Reset"
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 8,
+                alignItems: "center",
+                marginTop: 8,
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Previous explosion stage",
+                    disabled: amount === 0,
+                    onClick: () => seek(Math.max(0, Math.ceil(amount) - 1)),
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (!playing && amount >= stages.length) onChange(0);
+                      setPlaying(!playing);
+                    },
+                    children: playing ? "Pause" : amount >= stages.length ? "Replay" : "Play"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Next explosion stage",
+                    disabled: amount >= stages.length,
+                    onClick: () => seek(Math.min(stages.length, Math.floor(amount) + 1)),
+                    children: "Next"
+                  }
+                ),
+                /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-duration`, children: "Seconds per stage" }),
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    id: `${id}-duration`,
+                    type: "number",
+                    min: 0.1,
+                    step: 0.1,
+                    value: stageDuration,
+                    style: { width: 60 },
+                    onChange: (event) => {
+                      const value = Number(event.target.value);
+                      if (Number.isFinite(value) && value >= 0.1)
+                        setStageDuration(value);
+                    }
+                  }
+                )
+              ]
+            }
+          )
         ] })
       ]
     }
@@ -19626,13 +19787,13 @@ var getCadPcbContext = (cad, circuitJson) => {
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
-import { useCallback as useCallback3, useEffect as useEffect14, useMemo as useMemo10, useState as useState11 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
 
 // src/contexts/LayerVisibilityContext.tsx
 import {
   createContext as createContext5,
   useContext as useContext5,
-  useState as useState4,
+  useState as useState5,
   useCallback,
   useMemo as useMemo4
 } from "react";
@@ -19669,7 +19830,7 @@ var defaultVisibility = {
 };
 var LayerVisibilityContext = createContext5(void 0);
 var LayerVisibilityProvider = ({ children }) => {
-  const [visibility, setVisibility] = useState4(defaultVisibility);
+  const [visibility, setVisibility] = useState5(defaultVisibility);
   const setLayerVisibility = useCallback(
     (layer, visible) => {
       setVisibility((prev) => ({
@@ -19719,14 +19880,14 @@ function usePcbThickness(circuitJson) {
 }
 
 // src/react-three/Html.tsx
-import { useRef, useEffect as useEffect5, useState as useState5 } from "react";
+import { useRef as useRef2, useEffect as useEffect6, useState as useState6 } from "react";
 import ReactDOM from "react-dom";
 import * as THREE6 from "three";
 var Html = ({ children, position, style }) => {
   const { camera, renderer } = useThree();
-  const el = useRef(document.createElement("div"));
-  const [portal, setPortal] = useState5(null);
-  useEffect5(() => {
+  const el = useRef2(document.createElement("div"));
+  const [portal, setPortal] = useState6(null);
+  useEffect6(() => {
     const rendererNode = renderer?.domElement.parentNode;
     if (!rendererNode) return;
     if (rendererNode.style.position !== "relative" && rendererNode.style.position !== "absolute") {
@@ -19765,21 +19926,21 @@ import {
   convertCSGToThreeGeom,
   getJscadModelForFootprint
 } from "jscad-electronics/vanilla";
-import { useMemo as useMemo7, useEffect as useEffect8 } from "react";
+import { useMemo as useMemo7, useEffect as useEffect9 } from "react";
 import * as THREE8 from "three";
 
 // src/ContainerWithTooltip.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/react-three/HoverContext.tsx
 import {
   createContext as createContext6,
   useContext as useContext6,
-  useState as useState6,
+  useState as useState7,
   useCallback as useCallback2,
   useMemo as useMemo6,
-  useEffect as useEffect6,
-  useRef as useRef2
+  useEffect as useEffect7,
+  useRef as useRef3
 } from "react";
 import * as THREE7 from "three";
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -19793,12 +19954,12 @@ var useHover = () => {
 };
 var HoverProvider = ({ children }) => {
   const { camera, renderer } = useThree();
-  const [hoverables, setHoverables] = useState6([]);
+  const [hoverables, setHoverables] = useState7([]);
   const raycaster = useMemo6(() => new THREE7.Raycaster(), []);
   const mouse = useMemo6(() => new THREE7.Vector2(), []);
-  const hoverablesRef = useRef2(hoverables);
+  const hoverablesRef = useRef3(hoverables);
   hoverablesRef.current = hoverables;
-  const hoveredObjectRef = useRef2(null);
+  const hoveredObjectRef = useRef3(null);
   const addHoverable = useCallback2((hoverable) => {
     setHoverables((prev) => [...prev, hoverable]);
   }, []);
@@ -19881,7 +20042,7 @@ var HoverProvider = ({ children }) => {
     },
     [camera, renderer, raycaster, mouse, findHoverable]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const domElement = renderer.domElement;
     domElement.addEventListener("mousemove", onMouseMove);
     return () => {
@@ -19908,7 +20069,7 @@ var ContainerWithTooltip = ({
   isHovered
 }) => {
   const { addHoverable, removeHoverable } = useHover();
-  useEffect7(() => {
+  useEffect8(() => {
     if (!object) return;
     const hoverable = {
       object,
@@ -19967,14 +20128,14 @@ var FootprinterModel = ({
     }
     return group2;
   }, [footprint, isTranslucent]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!group || !rootObject) return;
     rootObject.add(group);
     return () => {
       rootObject.remove(group);
     };
   }, [rootObject, group]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!group) return;
     if (positionOffset) group.position.fromArray(positionOffset);
     if (rotationOffset) group.rotation.fromArray(rotationOffset);
@@ -19989,7 +20150,7 @@ var FootprinterModel = ({
     rotationOffset?.[2],
     scale11
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!group) return;
     group.traverse((child) => {
       if (child instanceof THREE8.Mesh && child.material instanceof THREE8.MeshStandardMaterial) {
@@ -20015,7 +20176,7 @@ var FootprinterModel = ({
 };
 
 // src/three-components/GltfModel.tsx
-import { useState as useState7, useEffect as useEffect10 } from "react";
+import { useState as useState8, useEffect as useEffect11 } from "react";
 import * as THREE12 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three-stdlib";
 
@@ -20047,7 +20208,7 @@ var getDefaultEnvironmentMap = (renderer) => {
 };
 
 // src/three-components/useCadModelTransformGraph.ts
-import { useEffect as useEffect9, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
 import * as THREE11 from "three";
 
 // src/utils/cad-model-fit.ts
@@ -20119,25 +20280,25 @@ var useCadModelTransformGraph = ({
   const fitTransformGroup = useMemo8(() => new THREE11.Group(), []);
   const modelTransformGroup = useMemo8(() => new THREE11.Group(), []);
   const loaderTransformGroup = useMemo8(() => new THREE11.Group(), []);
-  useEffect9(() => {
+  useEffect10(() => {
     boardTransformGroup.add(fitTransformGroup);
     return () => {
       boardTransformGroup.remove(fitTransformGroup);
     };
   }, [boardTransformGroup, fitTransformGroup]);
-  useEffect9(() => {
+  useEffect10(() => {
     fitTransformGroup.add(modelTransformGroup);
     return () => {
       fitTransformGroup.remove(modelTransformGroup);
     };
   }, [fitTransformGroup, modelTransformGroup]);
-  useEffect9(() => {
+  useEffect10(() => {
     modelTransformGroup.add(loaderTransformGroup);
     return () => {
       modelTransformGroup.remove(loaderTransformGroup);
     };
   }, [modelTransformGroup, loaderTransformGroup]);
-  useEffect9(() => {
+  useEffect10(() => {
     while (loaderTransformGroup.children.length > 0) {
       const firstChild = loaderTransformGroup.children[0];
       if (!firstChild) break;
@@ -20147,7 +20308,7 @@ var useCadModelTransformGraph = ({
       loaderTransformGroup.add(model);
     }
   }, [loaderTransformGroup, model]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!sourceCoordinateTransform) {
       loaderTransformGroup.matrixAutoUpdate = true;
       loaderTransformGroup.position.set(0, 0, 0);
@@ -20160,14 +20321,14 @@ var useCadModelTransformGraph = ({
     loaderTransformGroup.matrix.copy(sourceCoordinateTransform);
     loaderTransformGroup.matrixWorldNeedsUpdate = true;
   }, [loaderTransformGroup, sourceCoordinateTransform]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!rootObject) return;
     rootObject.add(boardTransformGroup);
     return () => {
       rootObject.remove(boardTransformGroup);
     };
   }, [rootObject, boardTransformGroup]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (position) {
       boardTransformGroup.position.fromArray(position);
     } else {
@@ -20229,8 +20390,8 @@ function GltfModel({
   isTranslucent = false
 }) {
   const { renderer } = useThree();
-  const [model, setModel] = useState7(null);
-  const [loadError, setLoadError] = useState7(null);
+  const [model, setModel] = useState8(null);
+  const [loadError, setLoadError] = useState8(null);
   const { boardTransformGroup } = useCadModelTransformGraph({
     model,
     position,
@@ -20242,7 +20403,7 @@ function GltfModel({
     modelFitMode,
     scale: scale11
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (!gltfUrl) return;
     const loader = new GLTFLoader2();
     let isMounted = true;
@@ -20285,7 +20446,7 @@ function GltfModel({
       isMounted = false;
     };
   }, [gltfUrl, isTranslucent]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!model || !renderer) return;
     const environmentMap = getDefaultEnvironmentMap(renderer);
     if (!environmentMap) return;
@@ -20320,7 +20481,7 @@ function GltfModel({
       });
     };
   }, [model, renderer]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!model) return;
     model.traverse((child) => {
       if (!(child instanceof THREE12.Mesh)) return;
@@ -20356,7 +20517,7 @@ var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling = __toESM(require_src(), 1);
 import { convertCSGToThreeGeom as convertCSGToThreeGeom2 } from "jscad-electronics/vanilla";
 import * as THREE13 from "three";
-import { useState as useState8, useEffect as useEffect11 } from "react";
+import { useState as useState9, useEffect as useEffect12 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var JscadModel = ({
   jscadPlan,
@@ -20374,8 +20535,8 @@ var JscadModel = ({
   scale: scale11,
   isTranslucent = false
 }) => {
-  const [mesh, setMesh] = useState8(null);
-  useEffect11(() => {
+  const [mesh, setMesh] = useState9(null);
+  useEffect12(() => {
     const jscadObject = (0, import_jscad_planner.executeJscadOperations)(import_modeling.default, jscadPlan);
     if (!jscadObject || !jscadObject.polygons && !jscadObject.sides) {
       setMesh(null);
@@ -20393,7 +20554,7 @@ var JscadModel = ({
       material2.dispose();
     };
   }, [jscadPlan]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!mesh) return;
     const material2 = mesh.material;
     material2.color.set(color ?? "#ffffff");
@@ -20420,7 +20581,7 @@ var JscadModel = ({
     modelFitMode,
     scale: scale11
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!material) return;
     if (isHovered) {
       const color2 = new THREE13.Color(material.color.getHex());
@@ -20444,7 +20605,7 @@ var JscadModel = ({
 };
 
 // src/hooks/use-global-model-loader.ts
-import { useEffect as useEffect12, useState as useState9 } from "react";
+import { useEffect as useEffect13, useState as useState10 } from "react";
 
 // src/utils/vrml.ts
 import { VRMLLoader } from "three-stdlib";
@@ -20472,8 +20633,8 @@ if (typeof window !== "undefined" && !window.TSCIRCUIT_MODEL_LOADER_CACHE) {
   window.TSCIRCUIT_MODEL_LOADER_CACHE = /* @__PURE__ */ new Map();
 }
 function useGlobalModelLoader(url, modelType) {
-  const [obj, setObj] = useState9(null);
-  useEffect12(() => {
+  const [obj, setObj] = useState10(null);
+  useEffect13(() => {
     if (!url) return;
     const cleanUrl = url.replace(/&cachebust_origin=$/, "");
     const cachesByModelType = window.TSCIRCUIT_MODEL_LOADER_CACHE;
@@ -20634,7 +20795,7 @@ function MixedStlModel({
 }
 
 // src/three-components/StepModel.tsx
-import { useEffect as useEffect13, useState as useState10 } from "react";
+import { useEffect as useEffect14, useState as useState11 } from "react";
 import { GLTFExporter } from "three-stdlib";
 
 // src/three-components/step-mesh-to-group.ts
@@ -20853,8 +21014,8 @@ var StepModel = ({
   isHovered,
   isTranslucent
 }) => {
-  const [stepGltfUrl, setStepGltfUrl] = useState10(null);
-  useEffect13(() => {
+  const [stepGltfUrl, setStepGltfUrl] = useState11(null);
+  useEffect14(() => {
     let isActive = true;
     let objectUrl = null;
     let shouldRevokeObjectUrl = true;
@@ -21280,7 +21441,7 @@ var ModelLoadErrorReporter = ({
   error,
   onError
 }) => {
-  useEffect14(() => {
+  useEffect15(() => {
     onError(error);
   }, [error, onError]);
   return null;
@@ -21291,9 +21452,9 @@ var AnyCadComponent = ({
   resolveStaticAsset
 }) => {
   const pcbThickness = usePcbThickness(circuitJson);
-  const [isHovered, setIsHovered] = useState11(false);
+  const [isHovered, setIsHovered] = useState12(false);
   const { visibility } = useLayerVisibility();
-  const [hoverPosition, setHoverPosition] = useState11(null);
+  const [hoverPosition, setHoverPosition] = useState12(null);
   const handleHover = useCallback3((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -21329,9 +21490,9 @@ var AnyCadComponent = ({
   const stepUrl = resolveModelUrlWithStaticResolver(
     cad_component.model_step_url
   );
-  const [fallbackModelIndex, setFallbackModelIndex] = useState11(0);
-  const [lastModelError, setLastModelError] = useState11(null);
-  useEffect14(() => {
+  const [fallbackModelIndex, setFallbackModelIndex] = useState12(0);
+  const [lastModelError, setLastModelError] = useState12(null);
+  useEffect15(() => {
     setFallbackModelIndex(0);
     setLastModelError(null);
   }, [cad_component.cad_component_id, url, gltfUrl, stepUrl]);
@@ -21554,7 +21715,7 @@ var AnyCadComponent = ({
 };
 
 // src/sections/SectionScene.tsx
-import { useEffect as useEffect15, useRef as useRef4 } from "react";
+import { useEffect as useEffect16, useRef as useRef5 } from "react";
 import * as THREE20 from "three";
 
 // src/contexts/CameraControllerContext.tsx
@@ -21563,8 +21724,8 @@ import {
   useCallback as useCallback4,
   useContext as useContext7,
   useMemo as useMemo11,
-  useRef as useRef3,
-  useState as useState12
+  useRef as useRef4,
+  useState as useState13
 } from "react";
 import * as THREE18 from "three";
 
@@ -21642,14 +21803,14 @@ var loadCameraFromSession = (camera, cameraSessionContext) => {
 };
 var CameraControllerContext = createContext7(void 0);
 var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition, initialCameraType }) => {
-  const controlsRef = useRef3(null);
-  const mainCameraRef = useRef3(null);
-  const [controller, setController] = useState12(null);
-  const [cameraType, setCameraType] = useState12(
+  const controlsRef = useRef4(null);
+  const mainCameraRef = useRef4(null);
+  const [controller, setController] = useState13(null);
+  const [cameraType, setCameraType] = useState13(
     initialCameraType ?? "perspective"
   );
-  const [cameraPosition, setCameraPosition] = useState12(initialCameraPosition ?? null);
-  const [cameraRotation, setCameraRotation] = useState12(
+  const [cameraPosition, setCameraPosition] = useState13(initialCameraPosition ?? null);
+  const [cameraRotation, setCameraRotation] = useState13(
     new THREE18.Euler(0, 0, 0)
   );
   const baseDistance = useMemo11(() => {
@@ -21974,14 +22135,14 @@ var attributeVersion = (a) => "version" in a ? a.version : a.data.version;
 var materials = (value) => Array.isArray(value) ? value : [value];
 function SectionScene() {
   const section = useSection();
-  const latest = useRef4(section);
+  const latest = useRef5(section);
   latest.current = section;
   const { scene, rootObject, camera, renderer } = useThree();
   const { controlsRef } = useCameraController();
-  const tick = useRef4(() => {
+  const tick = useRef5(() => {
   });
   useFrame(() => tick.current());
-  useEffect15(() => {
+  useEffect16(() => {
     if (!section) return;
     const canvas = renderer.domElement;
     const clipping = new THREE20.Plane();
@@ -22339,13 +22500,13 @@ function SectionScene() {
 }
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect25, useMemo as useMemo18, useState as useState15 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect26, useMemo as useMemo18, useState as useState16 } from "react";
 import * as THREE31 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.643",
+  version: "0.0.644",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -22452,7 +22613,7 @@ var package_default = {
 };
 
 // src/contexts/appearance-context.tsx
-import { createContext as createContext8, useContext as useContext8, useEffect as useEffect16, useMemo as useMemo12, useState as useState13 } from "react";
+import { createContext as createContext8, useContext as useContext8, useEffect as useEffect17, useMemo as useMemo12, useState as useState14 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var LIGHTING_STORAGE_KEY = "cadViewerLightingEnabled";
 var readStoredLightingEnabled = () => {
@@ -22465,12 +22626,12 @@ var AppearanceContext = createContext8(
 var AppearanceProvider = ({
   children
 }) => {
-  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState13(false);
-  const [gridEnabled, setGridEnabled] = useState13(false);
-  const [lightingEnabled, setLightingEnabled] = useState13(
+  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState14(false);
+  const [gridEnabled, setGridEnabled] = useState14(false);
+  const [lightingEnabled, setLightingEnabled] = useState14(
     readStoredLightingEnabled
   );
-  useEffect16(() => {
+  useEffect17(() => {
     window.localStorage.setItem(
       LIGHTING_STORAGE_KEY,
       lightingEnabled ? "true" : "false"
@@ -22498,7 +22659,7 @@ var useAppearance = () => {
 };
 
 // src/hooks/cameraAnimation.ts
-import { useCallback as useCallback5, useEffect as useEffect17, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect18, useRef as useRef6 } from "react";
 import * as THREE21 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
@@ -22509,14 +22670,14 @@ var CameraAnimatorWithContext = () => {
     setController,
     getPresetConfig
   } = useCameraController();
-  const animationRef = useRef5(null);
-  const tempQuaternion = useRef5(new THREE21.Quaternion());
-  const tempTarget = useRef5(new THREE21.Vector3());
-  const tempUp = useRef5(new THREE21.Vector3());
-  const tempRoll = useRef5(new THREE21.Quaternion());
-  const tempRollTarget = useRef5(new THREE21.Quaternion());
-  const baseOrientationHelper = useRef5(new THREE21.Object3D());
-  const orientationHelper = useRef5(new THREE21.Object3D());
+  const animationRef = useRef6(null);
+  const tempQuaternion = useRef6(new THREE21.Quaternion());
+  const tempTarget = useRef6(new THREE21.Vector3());
+  const tempUp = useRef6(new THREE21.Vector3());
+  const tempRoll = useRef6(new THREE21.Quaternion());
+  const tempRollTarget = useRef6(new THREE21.Quaternion());
+  const baseOrientationHelper = useRef6(new THREE21.Object3D());
+  const orientationHelper = useRef6(new THREE21.Object3D());
   const animateTo = useCallback5(
     ({ position, target, up, durationMs = 600 }) => {
       if (!mainCameraRef.current) return;
@@ -22570,7 +22731,7 @@ var CameraAnimatorWithContext = () => {
     },
     [animateTo, getPresetConfig]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!mainCameraRef.current) return;
     const controller = {
       animateTo,
@@ -22639,16 +22800,16 @@ var CameraAnimatorWithContext = () => {
 };
 
 // src/hooks/useCameraSession.ts
-import { useCallback as useCallback6, useEffect as useEffect18, useRef as useRef6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect19, useRef as useRef7 } from "react";
 var CAMERA_SESSION_NOT_RESTORED = /* @__PURE__ */ Symbol("camera-session-not-restored");
 var useCameraSession = ({
   cameraSessionScope
 } = {}) => {
   const { controlsRef } = useCameraController();
-  const cameraRef = useRef6(null);
-  const restoredCameraSessionScopeRef = useRef6(CAMERA_SESSION_NOT_RESTORED);
-  const saveTimeoutRef = useRef6(null);
-  useEffect18(() => {
+  const cameraRef = useRef7(null);
+  const restoredCameraSessionScopeRef = useRef7(CAMERA_SESSION_NOT_RESTORED);
+  const saveTimeoutRef = useRef7(null);
+  useEffect19(() => {
     return () => {
       if (saveTimeoutRef.current !== null) {
         clearTimeout(saveTimeoutRef.current);
@@ -22704,9 +22865,9 @@ var useCameraSession = ({
 
 // src/react-three/Canvas.tsx
 import {
-  useRef as useRef7,
-  useEffect as useEffect19,
-  useState as useState14,
+  useRef as useRef8,
+  useEffect as useEffect20,
+  useState as useState15,
   useCallback as useCallback7,
   forwardRef,
   useImperativeHandle,
@@ -22734,16 +22895,16 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
     const { cameraType } = useCameraController();
-    const mountRef = useRef7(null);
-    const [contextState, setContextState] = useState14(
+    const mountRef = useRef8(null);
+    const [contextState, setContextState] = useState15(
       null
     );
-    const frameListeners = useRef7(
+    const frameListeners = useRef8(
       []
     );
-    const onCreatedRef = useRef7(void 0);
+    const onCreatedRef = useRef8(void 0);
     onCreatedRef.current = onCreated;
-    const savedCameraStateRef = useRef7(null);
+    const savedCameraStateRef = useRef8(null);
     const addFrameListener = useCallback7(
       (listener) => {
         frameListeners.current.push(listener);
@@ -22762,9 +22923,9 @@ var Canvas = forwardRef(
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef7(new THREE23.Object3D());
+    const rootObject = useRef8(new THREE23.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
-    useEffect19(() => {
+    useEffect20(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
       const renderer = new THREE23.WebGLRenderer({ antialias: true, alpha: true });
@@ -22873,7 +23034,7 @@ var Canvas = forwardRef(
 );
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect20, useMemo as useMemo14 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo14 } from "react";
 import * as THREE24 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
@@ -22948,7 +23109,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect20(() => {
+  useEffect21(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -22965,7 +23126,7 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect21, useMemo as useMemo15 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo15 } from "react";
 import * as THREE25 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
@@ -23069,7 +23230,7 @@ var Lights = ({
     );
     return rig;
   }, [boardCenter, boardDimensions, shadowsEnabled]);
-  useEffect21(() => {
+  useEffect22(() => {
     const previousBackground = scene.background;
     const previousEnvironment = scene.environment;
     scene.background = darkBackgroundEnabled ? new THREE25.Color(1053456) : null;
@@ -23079,7 +23240,7 @@ var Lights = ({
       scene.environment = previousEnvironment;
     };
   }, [darkBackgroundEnabled, scene]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!scene) return;
     scene.add(lightRig);
     return () => {
@@ -23090,7 +23251,7 @@ var Lights = ({
 };
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect22, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo16 } from "react";
 import * as THREE27 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
@@ -23149,11 +23310,11 @@ var OrbitControls = ({
     ) : controls.getDistance();
     return getMinimumDollyDistance({ camera, initialOrbitDistance });
   }, [camera, controls, target]);
-  useEffect22(() => {
+  useEffect23(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
   }, [controls, onControlsChange]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!controls) return;
     const handleChange = () => {
       onControlsChange?.(controls);
@@ -23163,7 +23324,7 @@ var OrbitControls = ({
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -23196,14 +23357,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -23299,7 +23460,7 @@ var getComparisonBounds = (type, boardDimensions, boardCenter) => {
 };
 
 // src/three-components/OrientationCubeCanvas.tsx
-import { useEffect as useEffect23, useRef as useRef8 } from "react";
+import { useEffect as useEffect24, useRef as useRef9 } from "react";
 import * as THREE28 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -23314,8 +23475,8 @@ function computePointInFront(rotationVector, distance5) {
 }
 var OrientationCubeCanvas = () => {
   const { mainCameraRef } = useCameraController();
-  const containerRef = useRef8(null);
-  useEffect23(() => {
+  const containerRef = useRef9(null);
+  useEffect24(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
@@ -23455,7 +23616,7 @@ var OrientationCubeCanvas = () => {
 };
 
 // src/three-components/reference-object.tsx
-import { useEffect as useEffect24, useMemo as useMemo17 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo17 } from "react";
 
 // src/reference-objects/create-reference-object.ts
 import * as THREE29 from "three";
@@ -23851,7 +24012,7 @@ var ReferenceObject = ({
     nextObject.position.set(position.x, position.y, position.z);
     return nextObject;
   }, [type, boardDimensions, boardCenter]);
-  useEffect24(() => {
+  useEffect25(() => {
     scene.add(object);
     return () => {
       scene.remove(object);
@@ -23863,7 +24024,7 @@ var ReferenceObject = ({
 var FitCameraToComparison = ({ bounds }) => {
   const { camera } = useThree();
   const { controlsRef } = useCameraController();
-  useEffect24(() => {
+  useEffect25(() => {
     fitCameraToBounds(camera, controlsRef.current, bounds);
   }, [bounds, camera, controlsRef]);
   return null;
@@ -23895,7 +24056,7 @@ var CadViewerContainer = forwardRef2(
     onCameraControllerReady
   }, ref) => {
     const section = useSection();
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState15(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState16(
       !clickToInteractEnabled
     );
     const { mainCameraRef, handleControlsChange, controller } = useCameraController();
@@ -23904,7 +24065,7 @@ var CadViewerContainer = forwardRef2(
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
     } = useCameraSession({ cameraSessionScope });
-    useEffect25(() => {
+    useEffect26(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
@@ -24070,12 +24231,12 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState16, useEffect as useEffect26 } from "react";
+import { useState as useState17, useEffect as useEffect27 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState16([]);
-  const [loading, setLoading] = useState16(true);
-  useEffect26(() => {
+  const [stls, setStls] = useState17([]);
+  const [loading, setLoading] = useState17(true);
+  useEffect27(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -24104,7 +24265,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState17, useEffect as useEffect27, useRef as useRef9 } from "react";
+import { useState as useState18, useEffect as useEffect28, useRef as useRef10 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_colors = __toESM(require_colors(), 1);
@@ -25596,9 +25757,9 @@ var BoardGeomBuilder = class {
 
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState17(null);
-  const isProcessingRef = useRef9(false);
-  useEffect27(() => {
+  const [boardGeom, setBoardGeom] = useState18(null);
+  const isProcessingRef = useRef10(false);
+  useEffect28(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -25644,10 +25805,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState18, useCallback as useCallback8, useEffect as useEffect29, useMemo as useMemo21 } from "react";
+import { useState as useState19, useCallback as useCallback8, useEffect as useEffect30, useMemo as useMemo21 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect28, useMemo as useMemo20 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo20 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -25687,7 +25848,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect28(() => {
+  useEffect29(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -25707,8 +25868,8 @@ var Error3d = ({
   cad_component
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState18(false);
-  const [hoverPosition, setHoverPosition] = useState18(null);
+  const [isHovered, setIsHovered] = useState19(false);
+  const [hoverPosition, setHoverPosition] = useState19(null);
   const handleHover = useCallback8((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -25740,7 +25901,7 @@ var Error3d = ({
   }, [position]);
   group.userData.cad_component_id = cad_component?.cad_component_id;
   group.userData.pcb_component_id = cad_component?.pcb_component_id;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -25809,7 +25970,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect29(() => {
+  useEffect30(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -25819,7 +25980,7 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/BoardGroup.tsx
-import { useEffect as useEffect30, useMemo as useMemo22 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo22 } from "react";
 import * as THREE35 from "three";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var BoardGroup = ({
@@ -25832,7 +25993,7 @@ var BoardGroup = ({
   group.name = "board";
   group.userData.pcb_board_id = pcbBoardId;
   group.visible = !hidden;
-  useEffect30(() => {
+  useEffect31(() => {
     scene.rootObject.add(group);
     return () => {
       scene.rootObject.remove(group);
@@ -25847,7 +26008,7 @@ var BoardGroup = ({
 
 // src/three-components/JscadBoardTextures.tsx
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect31, useMemo as useMemo24 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo24 } from "react";
 
 // src/textures/open-via-holes-at-pads.ts
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
@@ -28213,7 +28374,7 @@ function JscadBoardTextures({
       visibility: textureVisibility
     });
   }, [circuitJson, boardData, traceTextureResolution, textureVisibility]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -28351,7 +28512,7 @@ function JscadBoardTextures({
 }
 
 // src/three-components/STLModel.tsx
-import { useState as useState19, useEffect as useEffect32, useMemo as useMemo25 } from "react";
+import { useState as useState20, useEffect as useEffect33, useMemo as useMemo25 } from "react";
 import * as THREE52 from "three";
 import { STLLoader as STLLoader2 } from "three-stdlib";
 function STLModel({
@@ -28363,8 +28524,8 @@ function STLModel({
   layerType
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState19(null);
-  useEffect32(() => {
+  const [geom, setGeom] = useState20(null);
+  useEffect33(() => {
     const loader = new STLLoader2();
     if (stlData) {
       try {
@@ -28401,7 +28562,7 @@ function STLModel({
     });
     return createdMesh;
   }, [geom, color, opacity, layerType]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -28455,7 +28616,7 @@ function VisibleSTLModel({
 // src/three-components/CadCable.tsx
 import { parseCableString } from "@tscircuit/cableprinter";
 import { createCableMeshes } from "jscad-electronics/cables";
-import { useEffect as useEffect33, useMemo as useMemo26 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo26 } from "react";
 import * as THREE53 from "three";
 var isCadCableElement = (element) => {
   if (!element || typeof element !== "object") return false;
@@ -28552,7 +28713,7 @@ var CadCable = ({ cable }) => {
       return null;
     }
   }, [cable]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!cableObject) return;
     rootObject.add(cableObject);
     return () => {
@@ -30063,12 +30224,12 @@ function createStiffenerMesh({
 }
 
 // src/CadViewerManifold.tsx
-import { useEffect as useEffect35, useMemo as useMemo29, useState as useState21 } from "react";
+import { useEffect as useEffect36, useMemo as useMemo29, useState as useState22 } from "react";
 import * as THREE61 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect34, useMemo as useMemo28, useRef as useRef10, useState as useState20 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo28, useRef as useRef11, useState as useState21 } from "react";
 import * as THREE57 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
@@ -31219,11 +31380,11 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const textureVisibility = useBoardTextureVisibility(visibility);
-  const [geoms, setGeoms] = useState20(null);
-  const [pcbThickness, setPcbThickness] = useState20(null);
-  const [error, setError] = useState20(null);
-  const [isLoading, setIsLoading] = useState20(true);
-  const manifoldInstancesForCleanup = useRef10([]);
+  const [geoms, setGeoms] = useState21(null);
+  const [pcbThickness, setPcbThickness] = useState21(null);
+  const [error, setError] = useState21(null);
+  const [isLoading, setIsLoading] = useState21(true);
+  const manifoldInstancesForCleanup = useRef11([]);
   const boardData = useMemo28(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
@@ -31257,7 +31418,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -31805,7 +31966,7 @@ var BoardMeshes = ({
       material.dispose();
     }
   };
-  useEffect35(() => {
+  useEffect36(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -31827,7 +31988,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -31860,10 +32021,10 @@ var CadViewerManifold = ({
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState21(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState21(null);
+  const [manifoldJSModule, setManifoldJSModule] = useState22(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState22(null);
   const { visibility } = useLayerVisibility();
-  useEffect35(() => {
+  useEffect36(() => {
     let isActive = true;
     loadManifold().then((module) => {
       if (isActive) setManifoldJSModule(module);
@@ -32044,18 +32205,18 @@ var CadViewerManifold_default = CadViewerManifold;
 
 // src/CadViewerGlb.tsx
 import {
-  useEffect as useEffect37,
+  useEffect as useEffect38,
   useLayoutEffect as useLayoutEffect2,
-  useState as useState23
+  useState as useState24
 } from "react";
 
 // src/hooks/useGlbModel.ts
-import { useEffect as useEffect36, useLayoutEffect, useMemo as useMemo30, useState as useState22 } from "react";
+import { useEffect as useEffect37, useLayoutEffect, useMemo as useMemo30, useState as useState23 } from "react";
 function useGlbModel(source) {
   const request = useMemo30(() => ({ source }), [source]);
-  const [result, setResult] = useState22();
+  const [result, setResult] = useState23();
   const displayedGlb = result?.loadedGlb;
-  useEffect36(() => {
+  useEffect37(() => {
     const controller = new AbortController();
     let loadedGlb;
     loadGlbScene(request.source, controller.signal).then((model) => {
@@ -32099,14 +32260,14 @@ function GlbScene({
 }) {
   const { rootObject } = useThree();
   const { addHoverable, removeHoverable } = useHover();
-  const [hover, setHover] = useState23();
+  const [hover, setHover] = useState24();
   useLayoutEffect2(() => {
     rootObject.add(model);
     return () => {
       rootObject.remove(model);
     };
   }, [rootObject, model]);
-  useEffect37(() => {
+  useEffect38(() => {
     setHover(void 0);
     const applyVisibility = (object, inObject) => {
       const id = object.userData.cad_component_id ?? object.userData.pcb_board_id;
@@ -32119,7 +32280,7 @@ function GlbScene({
     };
     applyVisibility(model, false);
   }, [model, objectVisibility]);
-  useEffect37(() => {
+  useEffect38(() => {
     const meshes = [];
     model.traverse((mesh) => {
       if (!(mesh instanceof THREE62.Mesh)) return;
@@ -32193,8 +32354,8 @@ function GlbViewport({
   objectVisibility,
   ...containerProps
 }) {
-  const [framing, setFraming] = useState23(() => getGlbFraming(model));
-  useEffect37(() => {
+  const [framing, setFraming] = useState24(() => getGlbFraming(model));
+  useEffect38(() => {
     if (framing) return;
     const nextFraming = getGlbFraming(model);
     if (nextFraming) setFraming(nextFraming);
@@ -37017,9 +37178,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState36(function() {
+  var ref = useState37(function() {
     return {
       // value
       value: initialValue,
@@ -38634,11 +38795,11 @@ var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */
 }, "DropdownMenuSubContent"));
 
 // src/components/ViewportSubContent.tsx
-import { useLayoutEffect as useLayoutEffect6, useState as useState40 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useState as useState41 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
-  const [content, setContent] = useState40(null);
-  const [overlapWidth, setOverlapWidth] = useState40();
+  const [content, setContent] = useState41(null);
+  const [overlapWidth, setOverlapWidth] = useState41();
   useLayoutEffect6(() => {
     if (!content) return;
     const trigger = document.getElementById(
@@ -38693,10 +38854,10 @@ var menuViewportStyles = {
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState42 } from "react";
+import { useState as useState43 } from "react";
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState41 } from "react";
+import { useState as useState42 } from "react";
 
 // src/components/Icons.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -38826,8 +38987,8 @@ var AppearanceMenu = ({
     lightingEnabled,
     setLightingEnabled
   } = useAppearance();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState41(false);
-  const [hoveredItem, setHoveredItem] = useState41(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState42(false);
+  const [hoveredItem, setHoveredItem] = useState42(null);
   const assemblyStyles = { ...itemStyles };
   if (hoveredItem === "assembly") assemblyStyles.backgroundColor = "#404040";
   return /* @__PURE__ */ jsxs9(Fragment10, { children: [
@@ -39308,10 +39469,10 @@ var ContextMenu = ({
 }) => {
   const { cameraType, setCameraType } = useCameraController();
   const { gridEnabled, setGridEnabled } = useAppearance();
-  const [cameraSubOpen, setCameraSubOpen] = useState42(false);
-  const [advancedSubOpen, setAdvancedSubOpen] = useState42(false);
-  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState42(false);
-  const [hoveredItem, setHoveredItem] = useState42(null);
+  const [cameraSubOpen, setCameraSubOpen] = useState43(false);
+  const [advancedSubOpen, setAdvancedSubOpen] = useState43(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState43(false);
+  const [hoveredItem, setHoveredItem] = useState43(null);
   return /* @__PURE__ */ jsx40(
     "div",
     {
@@ -39782,10 +39943,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect55, useMemo as useMemo40, useRef as useRef28, useState as useState44 } from "react";
+import { useEffect as useEffect56, useMemo as useMemo40, useRef as useRef29, useState as useState45 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect54, useMemo as useMemo39, useRef as useRef27, useState as useState43 } from "react";
+import { useEffect as useEffect55, useMemo as useMemo39, useRef as useRef28, useState as useState44 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -39907,7 +40068,7 @@ var subscribeToRegistry = (subscriber) => {
   };
 };
 var useRegisteredHotkey = (id, handler, metadata) => {
-  const handlerRef = useRef27(handler);
+  const handlerRef = useRef28(handler);
   handlerRef.current = handler;
   const normalizedMetadata = useMemo39(
     () => ({
@@ -39916,7 +40077,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect54(() => {
+  useEffect55(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -39929,10 +40090,10 @@ var useRegisteredHotkey = (id, handler, metadata) => {
   }, [id, normalizedMetadata]);
 };
 var useHotkeyRegistry = () => {
-  const [entries, setEntries] = useState43(
+  const [entries, setEntries] = useState44(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect54(() => subscribeToRegistry(setEntries), []);
+  useEffect55(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -39946,10 +40107,10 @@ var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState44("");
-  const inputRef = useRef28(null);
+  const [query, setQuery] = useState45("");
+  const inputRef = useRef29(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect55(() => {
+  useEffect56(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -39960,7 +40121,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -40189,17 +40350,17 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState45, useCallback as useCallback23, useRef as useRef29, useEffect as useEffect56 } from "react";
+import { useState as useState46, useCallback as useCallback23, useRef as useRef30, useEffect as useEffect57 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
-  const [menuVisible, setMenuVisible] = useState45(false);
-  const [menuPos, setMenuPos] = useState45({
+  const [menuVisible, setMenuVisible] = useState46(false);
+  const [menuPos, setMenuPos] = useState46({
     x: 0,
     y: 0
   });
-  const menuRef = useRef29(null);
-  const interactionOriginPosRef = useRef29(null);
-  const longPressTimeoutRef = useRef29(null);
-  const ignoreNextContextMenuRef = useRef29(false);
+  const menuRef = useRef30(null);
+  const interactionOriginPosRef = useRef30(null);
+  const longPressTimeoutRef = useRef30(null);
+  const ignoreNextContextMenuRef = useRef30(false);
   const clearLongPressTimeout = () => {
     if (longPressTimeoutRef.current !== null) {
       clearTimeout(longPressTimeoutRef.current);
@@ -40306,7 +40467,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect56(() => {
+  useEffect57(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -40522,19 +40683,22 @@ var CadViewerInner = (props) => {
     glbSource === void 0 ? props.circuitJson : void 0
   );
   const circuitJson = props.circuitJson ?? explosion.assembled;
-  const [explosionPanelSource, setExplosionPanelSource] = useState46(null);
+  const [explosionPanelSource, setExplosionPanelSource] = useState47(null);
   const explosionPanelOpen = explosionPanelSource === circuitJson;
   const hasAssembly = circuitJson.some(
     (element) => element.type === "cad_component" && !element.pcb_component_id
   );
   const hasBends = circuitJson.some((element) => element.type === "pcb_bend");
   const hasFlexGeometry = hasBends || circuitJson.some((element) => element.type === "pcb_stiffener");
-  const [foldPcbsOverride, setFoldPcbs] = useState46(
+  const [foldPcbsOverride, setFoldPcbs] = useState47(
     void 0
   );
   const foldPcbs = foldPcbsOverride ?? props.foldPcbs;
   const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
-  const circuitJsonKey = glbSource === void 0 ? JSON.stringify(circuitJson) : void 0;
+  const circuitJsonKey = useMemo41(
+    () => glbSource === void 0 ? JSON.stringify(circuitJson) : void 0,
+    [glbSource, circuitJson]
+  );
   const circuitKey = glbSource ?? circuitJsonKey;
   const { objectVisibility, hideObject, isolateObject, unhideAllObjects } = useObjectVisibility(circuitKey);
   const resolvedProps = {
@@ -40543,31 +40707,31 @@ var CadViewerInner = (props) => {
     children: void 0,
     objectVisibility
   };
-  const [engine, setEngine] = useState46(() => {
+  const [engine, setEngine] = useState47(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
-  const containerRef = useRef30(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState46(false);
-  const [autoRotate, setAutoRotate] = useState46(() => {
+  const containerRef = useRef31(null);
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState47(false);
+  const [autoRotate, setAutoRotate] = useState47(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored !== "false";
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState46(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState47(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState46("Custom");
-  const [referenceObject, setReferenceObject] = useState46(null);
+  const [cameraPreset, setCameraPreset] = useState47("Custom");
+  const [referenceObject, setReferenceObject] = useState47(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
-  const cameraControllerRef = useRef30(null);
+  const cameraControllerRef = useRef31(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext13(SchematicNavigationContext);
-  const [selectedComponent, setSelectedComponent] = useState46();
-  const [selectedObject, setSelectedObject] = useState46();
-  const [selectedModel, setSelectedModel] = useState46();
+  const [selectedComponent, setSelectedComponent] = useState47();
+  const [selectedObject, setSelectedObject] = useState47();
+  const [selectedModel, setSelectedModel] = useState47();
   const handleMenuOpen = useCallback25(
     (position) => {
       const picked = pickSceneObject(sceneRef.current, position, circuitJson);
@@ -40588,10 +40752,10 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef, onOpen: handleMenuOpen });
-  const autoRotateUserToggledRef = useRef30(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef31(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef30(false);
-  const lastPresetSelectTime = useRef30(0);
+  const isAnimatingRef = useRef31(false);
+  const lastPresetSelectTime = useRef31(0);
   const PRESET_COOLDOWN = 1e3;
   const handleUserInteraction = useCallback25(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
@@ -40686,24 +40850,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect57(() => {
+  useEffect58(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect57(() => {
+  useEffect58(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect57(() => {
+  useEffect58(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect57(() => {
+  useEffect58(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect57(() => {
+  useEffect58(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? circuitJsonKey : void 0;
@@ -40877,7 +41041,7 @@ var CadViewerInner = (props) => {
 };
 var CadViewer = (props) => {
   configureRuntimeFont();
-  const sceneRef = useRef30(null);
+  const sceneRef = useRef31(null);
   return /* @__PURE__ */ jsx43(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx43(
     CameraControllerProvider,
     {
@@ -41194,10 +41358,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 import {
   GLTFExporter as GLTFExporter3
 } from "three/examples/jsm/exporters/GLTFExporter.js";
-import { useEffect as useEffect58, useState as useState47, useMemo as useMemo41, useCallback as useCallback26 } from "react";
+import { useEffect as useEffect59, useState as useState48, useMemo as useMemo42, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo41(() => document.createElement("a"), []);
+  const link = useMemo42(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -41207,7 +41371,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect58(
+  useEffect59(
     () => () => {
       link.remove();
       instance = null;
@@ -41222,17 +41386,17 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState47();
-  const [error, setError] = useState47();
+  const [url, setUrl] = useState48();
+  const [error, setError] = useState48();
   const ref = useCallback26(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect58(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect59(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo41(() => new GLTFExporter3(), []);
+  const exporter = useMemo42(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(