@tscircuit/3d-viewer 0.0.531 → 0.0.533

package/dist/index.js

@@ -14432,7 +14432,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState36, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect44 } from "react";
+import { useState as useState36, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect45 } from "react";
 import * as THREE39 from "three";
 
 // src/CadViewerJscad.tsx
@@ -14441,7 +14441,7 @@ import { forwardRef as forwardRef3, useMemo as useMemo20 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
-import { useCallback as useCallback3, useMemo as useMemo8, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useMemo as useMemo8, useState as useState7 } from "react";
 
 // src/contexts/LayerVisibilityContext.tsx
 import {
@@ -28577,8 +28577,35 @@ var resolveModelUrl = (modelUrl, resolveStaticAsset) => {
 // src/utils/tuple.ts
 var tuple = (...args) => args;
 
+// src/three-components/ThreeErrorBoundary.tsx
+import React6 from "react";
+var ThreeErrorBoundary = class extends React6.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return this.props.fallback({ error: this.state.error });
+    }
+    return this.props.children;
+  }
+};
+
 // src/AnyCadComponent.tsx
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModelLoadErrorReporter = ({
+  error,
+  onError
+}) => {
+  useEffect11(() => {
+    onError(error);
+  }, [error, onError]);
+  return null;
+};
 var AnyCadComponent = ({
   cad_component,
   circuitJson,
@@ -28625,6 +28652,12 @@ var AnyCadComponent = ({
   const stepUrl = resolveModelUrlWithStaticResolver(
     cad_component.model_step_url
   );
+  const [fallbackModelIndex, setFallbackModelIndex] = useState7(0);
+  const [lastModelError, setLastModelError] = useState7(null);
+  useEffect11(() => {
+    setFallbackModelIndex(0);
+    setLastModelError(null);
+  }, [cad_component.cad_component_id, url, gltfUrl, stepUrl]);
   const pcbComponent = circuitJson.find(
     (elm) => elm.type === "pcb_component" && elm.source_component_id === cad_component.source_component_id
   );
@@ -28641,60 +28674,110 @@ var AnyCadComponent = ({
   }, [cad_component.rotation, layer]);
   const adjustedPosition = useMemo8(() => {
     if (!cad_component.position) return void 0;
-    let z18;
-    if (layer === "top") {
-      z18 = cad_component.position.z;
-    } else if (layer === "bottom") {
-      z18 = -(cad_component.position.z + pcbThickness);
-    } else {
-      z18 = cad_component.position.z;
+    let z18 = cad_component.position.z + pcbThickness / 2;
+    if (layer === "bottom") {
+      z18 = -cad_component.position.z - pcbThickness / 2;
     }
     return [cad_component.position.x, cad_component.position.y, z18];
   }, [cad_component.position, layer, pcbThickness]);
+  const fallbackModelComponents = useMemo8(() => {
+    const components = [];
+    if (url) {
+      components.push(
+        /* @__PURE__ */ jsx10(
+          MixedStlModel,
+          {
+            url,
+            position: adjustedPosition,
+            rotation: rotationOffset,
+            scale: cad_component.model_unit_to_mm_scale_factor,
+            onHover: handleHover,
+            onUnhover: handleUnhover,
+            isHovered,
+            isTranslucent: cad_component.show_as_translucent_model
+          },
+          `${cad_component.cad_component_id}-mixed-${url}`
+        )
+      );
+    }
+    if (gltfUrl) {
+      components.push(
+        /* @__PURE__ */ jsx10(
+          GltfModel,
+          {
+            gltfUrl,
+            position: adjustedPosition,
+            rotation: rotationOffset,
+            scale: cad_component.model_unit_to_mm_scale_factor,
+            onHover: handleHover,
+            onUnhover: handleUnhover,
+            isHovered,
+            isTranslucent: cad_component.show_as_translucent_model
+          },
+          `${cad_component.cad_component_id}-gltf-${gltfUrl}`
+        )
+      );
+    }
+    if (stepUrl && !cad_component.model_jscad && !cad_component.footprinter_string) {
+      components.push(
+        /* @__PURE__ */ jsx10(
+          StepModel,
+          {
+            stepUrl,
+            position: adjustedPosition,
+            rotation: rotationOffset,
+            scale: cad_component.model_unit_to_mm_scale_factor,
+            onHover: handleHover,
+            onUnhover: handleUnhover,
+            isHovered,
+            isTranslucent: cad_component.show_as_translucent_model
+          },
+          `${cad_component.cad_component_id}-step-${stepUrl}`
+        )
+      );
+    }
+    return components;
+  }, [
+    adjustedPosition,
+    cad_component.cad_component_id,
+    cad_component.footprinter_string,
+    cad_component.model_jscad,
+    cad_component.model_unit_to_mm_scale_factor,
+    cad_component.show_as_translucent_model,
+    gltfUrl,
+    handleHover,
+    handleUnhover,
+    isHovered,
+    rotationOffset,
+    stepUrl,
+    url
+  ]);
   let modelComponent = null;
-  if (url) {
-    modelComponent = /* @__PURE__ */ jsx10(
-      MixedStlModel,
-      {
-        url,
-        position: adjustedPosition,
-        rotation: rotationOffset,
-        scale: cad_component.model_unit_to_mm_scale_factor,
-        onHover: handleHover,
-        onUnhover: handleUnhover,
-        isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
-      },
-      cad_component.cad_component_id
-    );
-  } else if (gltfUrl) {
+  if (fallbackModelComponents.length > 0) {
+    if (fallbackModelIndex >= fallbackModelComponents.length) {
+      if (lastModelError) {
+        throw lastModelError;
+      }
+      return null;
+    }
     modelComponent = /* @__PURE__ */ jsx10(
-      GltfModel,
+      ThreeErrorBoundary,
       {
-        gltfUrl,
-        position: adjustedPosition,
-        rotation: rotationOffset,
-        scale: cad_component.model_unit_to_mm_scale_factor,
-        onHover: handleHover,
-        onUnhover: handleUnhover,
-        isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
+        fallback: ({ error }) => /* @__PURE__ */ jsx10(
+          ModelLoadErrorReporter,
+          {
+            error,
+            onError: (nextError) => {
+              setLastModelError(nextError);
+              setFallbackModelIndex(
+                (current) => Math.max(current, fallbackModelIndex + 1)
+              );
+            }
+          }
+        ),
+        children: fallbackModelComponents[fallbackModelIndex]
       },
-      cad_component.cad_component_id
-    );
-  } else if (stepUrl && !cad_component.model_jscad && !cad_component.footprinter_string) {
-    modelComponent = /* @__PURE__ */ jsx10(
-      StepModel,
-      {
-        stepUrl,
-        position: adjustedPosition,
-        rotation: rotationOffset,
-        scale: cad_component.model_unit_to_mm_scale_factor,
-        onHover: handleHover,
-        onUnhover: handleUnhover,
-        isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
-      }
+      `${cad_component.cad_component_id}-fallback-${fallbackModelIndex}`
     );
   } else if (cad_component.model_jscad) {
     modelComponent = /* @__PURE__ */ jsx10(
@@ -28763,13 +28846,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect17, useMemo as useMemo14, useState as useState10 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect18, useMemo as useMemo14, useState as useState10 } from "react";
 import * as THREE16 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.530",
+  version: "0.0.532",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28847,7 +28930,7 @@ var package_default = {
 // src/react-three/Canvas.tsx
 import {
   useRef as useRef4,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useState as useState9,
   useCallback as useCallback5,
   forwardRef,
@@ -29114,7 +29197,7 @@ var Canvas = forwardRef(
     }
     const rootObject = useRef4(new THREE10.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
-    useEffect11(() => {
+    useEffect12(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
       const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
@@ -29214,7 +29297,7 @@ var Canvas = forwardRef(
 );
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect12, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
 import * as THREE11 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
@@ -29234,11 +29317,11 @@ var OrbitControls = ({
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
-  useEffect12(() => {
+  useEffect13(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
   }, [controls, onControlsChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls) return;
     const handleChange = () => {
       onControlsChange?.(controls);
@@ -29248,7 +29331,7 @@ var OrbitControls = ({
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -29281,14 +29364,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -29301,7 +29384,7 @@ var OrbitControls = ({
 };
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
 import * as THREE12 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
@@ -29376,7 +29459,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -29393,7 +29476,7 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect14, useMemo as useMemo13 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo13 } from "react";
 import * as THREE13 from "three";
 var Lights = () => {
   const { scene } = useThree();
@@ -29407,7 +29490,7 @@ var Lights = () => {
     light.decay = 0;
     return light;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!scene) return;
     scene.add(ambientLight);
     scene.add(pointLight);
@@ -29420,7 +29503,7 @@ var Lights = () => {
 };
 
 // src/hooks/cameraAnimation.ts
-import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect16, useRef as useRef5 } from "react";
 import * as THREE14 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
@@ -29492,7 +29575,7 @@ var CameraAnimatorWithContext = () => {
     },
     [animateTo, getPresetConfig]
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (!mainCameraRef.current) return;
     const controller = {
       animateTo,
@@ -29605,7 +29688,7 @@ var useCameraSession = () => {
 };
 
 // src/three-components/OrientationCubeCanvas.tsx
-import { useEffect as useEffect16, useRef as useRef7 } from "react";
+import { useEffect as useEffect17, useRef as useRef7 } from "react";
 import * as THREE15 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -29626,7 +29709,7 @@ var OrientationCubeCanvas = () => {
   const sceneRef = useRef7(null);
   const cameraRef = useRef7(null);
   const animationFrameRef = useRef7(null);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!containerRef.current) return;
     const canvas = document.createElement("canvas");
     canvasRef.current = canvas;
@@ -29793,7 +29876,7 @@ var CadViewerContainer = forwardRef2(
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
     } = useCameraSession();
-    useEffect17(() => {
+    useEffect18(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
@@ -29930,12 +30013,12 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState11, useEffect as useEffect18 } from "react";
+import { useState as useState11, useEffect as useEffect19 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
   const [stls, setStls] = useState11([]);
   const [loading, setLoading] = useState11(true);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -29964,7 +30047,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState12, useEffect as useEffect19, useRef as useRef8 } from "react";
+import { useState as useState12, useEffect as useEffect20, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -31309,7 +31392,7 @@ var BoardGeomBuilder = class {
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState12(null);
   const isProcessingRef = useRef8(false);
-  useEffect19(() => {
+  useEffect20(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -31355,10 +31438,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState13, useCallback as useCallback8, useEffect as useEffect21, useMemo as useMemo17 } from "react";
+import { useState as useState13, useCallback as useCallback8, useEffect as useEffect22, useMemo as useMemo17 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect20, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -31398,7 +31481,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect20(() => {
+  useEffect21(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -31449,7 +31532,7 @@ var Error3d = ({
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -31518,7 +31601,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -31528,7 +31611,7 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/STLModel.tsx
-import { useState as useState14, useEffect as useEffect22, useMemo as useMemo18 } from "react";
+import { useState as useState14, useEffect as useEffect23, useMemo as useMemo18 } from "react";
 import * as THREE18 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
@@ -31541,7 +31624,7 @@ function STLModel({
 }) {
   const { rootObject } = useThree();
   const [geom, setGeom] = useState14(null);
-  useEffect22(() => {
+  useEffect23(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -31574,7 +31657,7 @@ function STLModel({
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     return createdMesh;
   }, [geom, color, opacity, layerType]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -31625,27 +31708,9 @@ function VisibleSTLModel({
   );
 }
 
-// src/three-components/ThreeErrorBoundary.tsx
-import React11 from "react";
-var ThreeErrorBoundary = class extends React11.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  render() {
-    if (this.state.hasError && this.state.error) {
-      return this.props.fallback({ error: this.state.error });
-    }
-    return this.props.children;
-  }
-};
-
 // src/three-components/JscadBoardTextures.tsx
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect23, useMemo as useMemo19 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
 
 // src/textures/create-combined-board-textures.ts
 import * as THREE28 from "three";
@@ -33219,7 +33284,7 @@ function JscadBoardTextures({
       visibility
     });
   }, [circuitJson, boardData, traceTextureResolution, visibility]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -33541,12 +33606,12 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect25, useMemo as useMemo22, useState as useState16 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo22, useState as useState16 } from "react";
 import * as THREE38 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect24, useMemo as useMemo21, useRef as useRef9, useState as useState15 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef9, useState as useState15 } from "react";
 import * as THREE35 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
@@ -34692,7 +34757,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -35016,7 +35081,7 @@ var BoardMeshes = ({
       material.dispose();
     }
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!rootObject) return;
     geometryMeshes.forEach((mesh) => {
       let shouldShow = true;
@@ -35038,7 +35103,7 @@ var BoardMeshes = ({
       });
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!rootObject) return;
     textureMeshes.forEach((mesh) => {
       rootObject.add(mesh);
@@ -35072,7 +35137,7 @@ var CadViewerManifold = ({
   const [manifoldJSModule, setManifoldJSModule] = useState16(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState16(null);
   const { visibility } = useLayerVisibility();
-  useEffect25(() => {
+  useEffect26(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -35258,7 +35323,7 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState17, useCallback as useCallback9, useRef as useRef10, useEffect as useEffect26 } from "react";
+import { useState as useState17, useCallback as useCallback9, useRef as useRef10, useEffect as useEffect27 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState17(false);
   const [menuPos, setMenuPos] = useState17({
@@ -35373,7 +35438,7 @@ var useContextMenu = ({ containerRef }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect26(() => {
+  useEffect27(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -35476,7 +35541,7 @@ var useGlobalDownloadGltf = () => {
 };
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect27, useMemo as useMemo23, useRef as useRef11, useState as useState18 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo23, useRef as useRef11, useState as useState18 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -35607,7 +35672,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -35623,7 +35688,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState18(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect27(() => subscribeToRegistry(setEntries), []);
+  useEffect28(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -41759,7 +41824,7 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect43, useMemo as useMemo29, useRef as useRef25, useState as useState35 } from "react";
+import { useEffect as useEffect44, useMemo as useMemo29, useRef as useRef25, useState as useState35 } from "react";
 import { jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
@@ -41768,7 +41833,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState35("");
   const inputRef = useRef25(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect43(() => {
+  useEffect44(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -41779,7 +41844,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -42075,36 +42140,36 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect44(() => {
+  useEffect45(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect44(() => {
+  useEffect45(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect44(() => {
+  useEffect45(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect44(() => {
+  useEffect45(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect44(() => {
+  useEffect45(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect44(() => {
+  useEffect45(() => {
     const stored = window.localStorage.getItem("cadViewerCameraType");
     if (stored === "orthographic" || stored === "perspective") {
       setCameraType(stored);
     }
   }, [setCameraType]);
-  useEffect44(() => {
+  useEffect45(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -42504,7 +42569,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect45, useState as useState37, useMemo as useMemo30, useCallback as useCallback22 } from "react";
+import { useEffect as useEffect46, useState as useState37, useMemo as useMemo30, useCallback as useCallback22 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo30(() => document.createElement("a"), []);
@@ -42517,7 +42582,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect45(
+  useEffect46(
     () => () => {
       link.remove();
       instance = null;
@@ -42538,7 +42603,7 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect45(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect46(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.531",
+  "version": "0.0.533",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",