@tscircuit/3d-viewer 0.0.610 → 0.0.611

package/dist/index.js

@@ -14608,7 +14608,7 @@ var useHiddenCadComponents = (circuitKey) => {
 };
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState41 } from "react";
+import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState42 } from "react";
 import * as THREE54 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
@@ -14646,7 +14646,7 @@ var getCadPcbContext = (cad, circuitJson) => {
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
-import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo10, useState as useState8 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo9, useState as useState9 } from "react";
 
 // src/contexts/LayerVisibilityContext.tsx
 import {
@@ -38199,7 +38199,7 @@ function GltfModel({
 var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling = __toESM(require_src(), 1);
 import * as THREE11 from "three";
-import { useMemo as useMemo8, useEffect as useEffect9 } from "react";
+import { useState as useState6, useEffect as useEffect9 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var JscadModel = ({
   jscadPlan,
@@ -38216,31 +38216,39 @@ var JscadModel = ({
   scale: scale2,
   isTranslucent = false
 }) => {
-  const { threeGeom, material } = useMemo8(() => {
+  const [mesh, setMesh] = useState6(null);
+  useEffect9(() => {
     const jscadObject = (0, import_jscad_planner.executeJscadOperations)(import_modeling.default, jscadPlan);
     if (!jscadObject || !jscadObject.polygons && !jscadObject.sides) {
-      return { threeGeom: null, material: null };
+      setMesh(null);
+      return;
     }
-    const threeGeom2 = convertCSGToThreeGeom(jscadObject);
+    const geometry = convertCSGToThreeGeom(jscadObject);
     const material2 = new THREE11.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE11.DoubleSide,
-      transparent: isTranslucent,
-      opacity: isTranslucent ? 0.5 : 1,
-      depthWrite: !isTranslucent
+      side: THREE11.DoubleSide
     });
-    return { threeGeom: threeGeom2, material: material2 };
-  }, [jscadPlan, isTranslucent]);
-  const mesh = useMemo8(() => {
-    if (!threeGeom) return null;
-    const createdMesh = new THREE11.Mesh(threeGeom, material);
-    createdMesh.renderOrder = isTranslucent ? 2 : 1;
-    configureObjectShadows(createdMesh, {
+    const model = new THREE11.Mesh(geometry, material2);
+    setMesh(model);
+    return () => {
+      geometry.dispose();
+      material2.dispose();
+    };
+  }, [jscadPlan]);
+  useEffect9(() => {
+    if (!mesh) return;
+    const material2 = mesh.material;
+    material2.transparent = isTranslucent;
+    material2.opacity = isTranslucent ? 0.5 : 1;
+    material2.depthWrite = !isTranslucent;
+    material2.needsUpdate = true;
+    mesh.renderOrder = isTranslucent ? 2 : 1;
+    configureObjectShadows(mesh, {
       castShadow: !isTranslucent,
       receiveShadow: true
     });
-    return createdMesh;
-  }, [threeGeom, material, isTranslucent]);
+  }, [mesh, isTranslucent]);
+  const material = mesh?.material;
   const { boardTransformGroup } = useCadModelTransformGraph({
     model: mesh,
     position: positionOffset,
@@ -38263,7 +38271,7 @@ var JscadModel = ({
       material.emissiveIntensity = 0;
     }
   }, [isHovered, material]);
-  if (!threeGeom) return null;
+  if (!mesh) return null;
   return /* @__PURE__ */ jsx8(
     ContainerWithTooltip_default,
     {
@@ -38276,7 +38284,7 @@ var JscadModel = ({
 };
 
 // src/hooks/use-global-obj-loader.ts
-import { useEffect as useEffect10, useState as useState6 } from "react";
+import { useEffect as useEffect10, useState as useState7 } from "react";
 
 // src/utils/vrml.ts
 import { VRMLLoader } from "three-stdlib";
@@ -38303,7 +38311,7 @@ if (typeof window !== "undefined" && !window.TSCIRCUIT_OBJ_LOADER_CACHE) {
   window.TSCIRCUIT_OBJ_LOADER_CACHE = /* @__PURE__ */ new Map();
 }
 function useGlobalObjLoader(url) {
-  const [obj, setObj] = useState6(null);
+  const [obj, setObj] = useState7(null);
   useEffect10(() => {
     if (!url) return;
     const cleanUrl = url.replace(/&cachebust_origin=$/, "");
@@ -38374,7 +38382,7 @@ function useGlobalObjLoader(url) {
 }
 
 // src/three-components/MixedStlModel.tsx
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo8 } from "react";
 import * as THREE12 from "three";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function MixedStlModel({
@@ -38393,7 +38401,7 @@ function MixedStlModel({
   isTranslucent = false
 }) {
   const obj = useGlobalObjLoader(url);
-  const model = useMemo9(() => {
+  const model = useMemo8(() => {
     if (obj && !(obj instanceof Error)) {
       obj.traverse((child) => {
         if (child instanceof THREE12.Mesh && child.material) {
@@ -38457,7 +38465,7 @@ function MixedStlModel({
 }
 
 // src/three-components/StepModel.tsx
-import { useEffect as useEffect11, useState as useState7 } from "react";
+import { useEffect as useEffect11, useState as useState8 } from "react";
 import { GLTFExporter } from "three-stdlib";
 
 // src/three-components/step-mesh-to-group.ts
@@ -38671,7 +38679,7 @@ var StepModel = ({
   isHovered,
   isTranslucent
 }) => {
-  const [stepGltfUrl, setStepGltfUrl] = useState7(null);
+  const [stepGltfUrl, setStepGltfUrl] = useState8(null);
   useEffect11(() => {
     let isActive = true;
     let objectUrl = null;
@@ -39109,9 +39117,9 @@ var AnyCadComponent = ({
   resolveStaticAsset
 }) => {
   const pcbThickness = usePcbThickness(circuitJson);
-  const [isHovered, setIsHovered] = useState8(false);
+  const [isHovered, setIsHovered] = useState9(false);
   const { visibility } = useLayerVisibility();
-  const [hoverPosition, setHoverPosition] = useState8(null);
+  const [hoverPosition, setHoverPosition] = useState9(null);
   const handleHover = useCallback3((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -39125,12 +39133,12 @@ var AnyCadComponent = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const componentName = useMemo10(() => {
+  const componentName = useMemo9(() => {
     return su2(circuitJson).source_component.getUsing({
       source_component_id: cad_component.source_component_id
     })?.name;
   }, [circuitJson, cad_component.source_component_id]);
-  const { pcbComponent, layer, isThroughHole } = useMemo10(
+  const { pcbComponent, layer, isThroughHole } = useMemo9(
     () => getCadPcbContext(cad_component, circuitJson),
     [cad_component, circuitJson]
   );
@@ -39147,13 +39155,13 @@ var AnyCadComponent = ({
   const stepUrl = resolveModelUrlWithStaticResolver(
     cad_component.model_step_url
   );
-  const [fallbackModelIndex, setFallbackModelIndex] = useState8(0);
-  const [lastModelError, setLastModelError] = useState8(null);
+  const [fallbackModelIndex, setFallbackModelIndex] = useState9(0);
+  const [lastModelError, setLastModelError] = useState9(null);
   useEffect12(() => {
     setFallbackModelIndex(0);
     setLastModelError(null);
   }, [cad_component.cad_component_id, url, gltfUrl, stepUrl]);
-  const isEnclosure = useMemo10(
+  const isEnclosure = useMemo9(
     () => isLegacyFdmEnclosure(cad_component, circuitJson),
     [cad_component, circuitJson]
   );
@@ -39162,7 +39170,7 @@ var AnyCadComponent = ({
   const renderedModelType = getRenderedCadModelType(sourceModelType);
   const gltfModelType = cad_component.model_glb_url ? "glb" : "gltf";
   const meshModelType = cad_component.model_wrl_url ? "wrl" : cad_component.model_stl_url ? "stl" : "obj";
-  const modelTransform = useMemo10(
+  const modelTransform = useMemo9(
     () => getCadModelTransform(cad_component, {
       layer,
       pcbThickness,
@@ -39172,7 +39180,7 @@ var AnyCadComponent = ({
   );
   const rotationOffset = tuple(...modelTransform.rotation);
   const adjustedPosition = modelTransform.position;
-  const fallbackModelComponents = useMemo10(() => {
+  const fallbackModelComponents = useMemo9(() => {
     const components = [];
     if (gltfUrl) {
       components.push(
@@ -39369,13 +39377,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo18, useState as useState12 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo17, useState as useState13 } from "react";
 import * as THREE25 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.609",
+  version: "0.0.610",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -39473,7 +39481,7 @@ var package_default = {
 };
 
 // src/contexts/appearance-context.tsx
-import { createContext as createContext5, useContext as useContext5, useEffect as useEffect13, useMemo as useMemo11, useState as useState9 } from "react";
+import { createContext as createContext5, useContext as useContext5, useEffect as useEffect13, useMemo as useMemo10, useState as useState10 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var LIGHTING_STORAGE_KEY = "cadViewerLightingEnabled";
 var readStoredLightingEnabled = () => {
@@ -39486,9 +39494,9 @@ var AppearanceContext = createContext5(
 var AppearanceProvider = ({
   children
 }) => {
-  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState9(false);
-  const [gridEnabled, setGridEnabled] = useState9(false);
-  const [lightingEnabled, setLightingEnabled] = useState9(
+  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState10(false);
+  const [gridEnabled, setGridEnabled] = useState10(false);
+  const [lightingEnabled, setLightingEnabled] = useState10(
     readStoredLightingEnabled
   );
   useEffect13(() => {
@@ -39497,7 +39505,7 @@ var AppearanceProvider = ({
       lightingEnabled ? "true" : "false"
     );
   }, [lightingEnabled]);
-  const value = useMemo11(
+  const value = useMemo10(
     () => ({
       darkBackgroundEnabled,
       setDarkBackgroundEnabled,
@@ -39523,9 +39531,9 @@ import {
   createContext as createContext6,
   useCallback as useCallback4,
   useContext as useContext6,
-  useMemo as useMemo12,
+  useMemo as useMemo11,
   useRef as useRef3,
-  useState as useState10
+  useState as useState11
 } from "react";
 import * as THREE15 from "three";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -39570,15 +39578,15 @@ var CameraControllerContext = createContext6(void 0);
 var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition, initialCameraType }) => {
   const controlsRef = useRef3(null);
   const mainCameraRef = useRef3(null);
-  const [controller, setController] = useState10(null);
-  const [cameraType, setCameraType] = useState10(
+  const [controller, setController] = useState11(null);
+  const [cameraType, setCameraType] = useState11(
     initialCameraType ?? "perspective"
   );
-  const [cameraPosition, setCameraPosition] = useState10(initialCameraPosition ?? null);
-  const [cameraRotation, setCameraRotation] = useState10(
+  const [cameraPosition, setCameraPosition] = useState11(initialCameraPosition ?? null);
+  const [cameraRotation, setCameraRotation] = useState11(
     new THREE15.Euler(0, 0, 0)
   );
-  const baseDistance = useMemo12(() => {
+  const baseDistance = useMemo11(() => {
     const [x, y, z42] = initialCameraPosition ?? [5, -5, 5];
     const distance6 = Math.hypot(
       x - defaultTarget.x,
@@ -39686,7 +39694,7 @@ var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition
     },
     []
   );
-  const cameraControllerContextValue = useMemo12(
+  const cameraControllerContextValue = useMemo11(
     () => ({
       controlsRef,
       mainCameraRef,
@@ -39917,11 +39925,11 @@ var useCameraSession = () => {
 import {
   useRef as useRef6,
   useEffect as useEffect15,
-  useState as useState11,
+  useState as useState12,
   useCallback as useCallback7,
   forwardRef,
   useImperativeHandle,
-  useMemo as useMemo13
+  useMemo as useMemo12
 } from "react";
 import * as THREE18 from "three";
 
@@ -39946,7 +39954,7 @@ var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
     const { cameraType } = useCameraController();
     const mountRef = useRef6(null);
-    const [contextState, setContextState] = useState11(
+    const [contextState, setContextState] = useState12(
       null
     );
     const frameListeners = useRef6(
@@ -39969,7 +39977,7 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo13(() => new THREE18.Scene(), []);
+    const scene = useMemo12(() => new THREE18.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
@@ -40083,7 +40091,7 @@ var Canvas = forwardRef(
 );
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect16, useMemo as useMemo14 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
 import * as THREE19 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
@@ -40129,7 +40137,7 @@ var Grid = ({
 }) => {
   const { scene, camera } = useThree();
   const size4 = 1e3;
-  const gridMesh = useMemo14(() => {
+  const gridMesh = useMemo13(() => {
     const geometry = new THREE19.PlaneGeometry(size4, size4);
     geometry.rotateX(-Math.PI / 2);
     const material = new THREE19.ShaderMaterial({
@@ -40175,7 +40183,7 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect17, useMemo as useMemo15 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo14 } from "react";
 import * as THREE20 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
@@ -40185,7 +40193,7 @@ var Lights = ({
   shadowsEnabled = false
 }) => {
   const { scene } = useThree();
-  const lightRig = useMemo15(() => {
+  const lightRig = useMemo14(() => {
     const rig = new THREE20.Group();
     rig.name = "cad-viewer-light-rig";
     const centerX = boardCenter?.x ?? 0;
@@ -40300,7 +40308,7 @@ var Lights = ({
 };
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect18, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo15 } from "react";
 import * as THREE21 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
@@ -40316,7 +40324,7 @@ var OrbitControls = ({
   onControlsChange
 }) => {
   const { camera, renderer } = useThree();
-  const controls = useMemo16(() => {
+  const controls = useMemo15(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
@@ -40624,7 +40632,7 @@ var OrientationCubeCanvas = () => {
 };
 
 // src/three-components/reference-object.tsx
-import { useEffect as useEffect20, useMemo as useMemo17 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo16 } from "react";
 
 // src/reference-objects/create-reference-object.ts
 import * as THREE23 from "three";
@@ -41010,7 +41018,7 @@ var ReferenceObject = ({
   boardCenter
 }) => {
   const { scene } = useThree();
-  const object = useMemo17(() => {
+  const object = useMemo16(() => {
     const nextObject = createReferenceObject(type);
     const position = getReferenceObjectPosition(
       type,
@@ -41062,7 +41070,7 @@ var CadViewerContainer = forwardRef2(
     onUserInteraction,
     onCameraControllerReady
   }, ref) => {
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState12(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState13(
       !clickToInteractEnabled
     );
     const { mainCameraRef, handleControlsChange, controller } = useCameraController();
@@ -41076,17 +41084,17 @@ var CadViewerContainer = forwardRef2(
         onCameraControllerReady(controller);
       }
     }, [controller, onCameraControllerReady]);
-    const comparisonBounds = useMemo18(() => {
+    const comparisonBounds = useMemo17(() => {
       if (!referenceObject) return void 0;
       return getComparisonBounds(referenceObject, boardDimensions, boardCenter);
     }, [referenceObject, boardDimensions, boardCenter]);
-    const gridSectionSize = useMemo18(() => {
+    const gridSectionSize = useMemo17(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
       const height10 = boardDimensions.height ?? 0;
       return Math.max(Math.max(width10, height10) * 1.5, 10);
     }, [boardDimensions]);
-    const orbitTarget = useMemo18(() => {
+    const orbitTarget = useMemo17(() => {
       if (comparisonBounds) {
         return [
           (comparisonBounds.minX + comparisonBounds.maxX) / 2,
@@ -41221,11 +41229,11 @@ var CadViewerContainer = forwardRef2(
 );
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState13, useEffect as useEffect22 } from "react";
+import { useState as useState14, useEffect as useEffect22 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState13([]);
-  const [loading, setLoading] = useState13(true);
+  const [stls, setStls] = useState14([]);
+  const [loading, setLoading] = useState14(true);
   useEffect22(() => {
     if (!geom) return;
     const generateStls = async () => {
@@ -41255,7 +41263,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState14, useEffect as useEffect23, useRef as useRef8 } from "react";
+import { useState as useState15, useEffect as useEffect23, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_colors = __toESM(require_colors(), 1);
@@ -42697,7 +42705,7 @@ var BoardGeomBuilder = class {
 
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState14(null);
+  const [boardGeom, setBoardGeom] = useState15(null);
   const isProcessingRef = useRef8(false);
   useEffect23(() => {
     let isCancelled = false;
@@ -42745,10 +42753,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState15, useCallback as useCallback8, useEffect as useEffect25, useMemo as useMemo20 } from "react";
+import { useState as useState16, useCallback as useCallback8, useEffect as useEffect25, useMemo as useMemo19 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo18 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -42763,7 +42771,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo19(() => {
+  const mesh = useMemo18(() => {
     const textMesh = new TroikaText2();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -42808,8 +42816,8 @@ var Error3d = ({
   cad_component
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState15(false);
-  const [hoverPosition, setHoverPosition] = useState15(null);
+  const [isHovered, setIsHovered] = useState16(false);
+  const [hoverPosition, setHoverPosition] = useState16(null);
   const handleHover = useCallback8((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -42823,7 +42831,7 @@ var Error3d = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo20(() => {
+  const position = useMemo19(() => {
     if (cad_component?.position) {
       const p = [
         cad_component.position.x,
@@ -42834,7 +42842,7 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component]);
-  const group = useMemo20(() => {
+  const group = useMemo19(() => {
     const g = new THREE28.Group();
     g.position.fromArray(position);
     return g;
@@ -42896,7 +42904,7 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo20(() => {
+  const mesh = useMemo19(() => {
     const m = new THREE28.Mesh(
       new THREE28.BoxGeometry(0.5, 0.5, 0.5),
       new THREE28.MeshStandardMaterial({
@@ -45032,6 +45040,46 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 // src/three-components/JscadBoardTextures.tsx
 import * as THREE44 from "three";
 
+// src/hooks/useBoardTextureVisibility.ts
+import { useMemo as useMemo20 } from "react";
+var useBoardTextureVisibility = (visibility) => {
+  const {
+    boardBody,
+    topCopper,
+    bottomCopper,
+    topSilkscreen,
+    bottomSilkscreen,
+    topMask,
+    bottomMask,
+    keepout,
+    pcbNotes
+  } = visibility;
+  return useMemo20(
+    () => ({
+      boardBody,
+      topCopper,
+      bottomCopper,
+      topSilkscreen,
+      bottomSilkscreen,
+      topMask,
+      bottomMask,
+      keepout,
+      pcbNotes
+    }),
+    [
+      boardBody,
+      topCopper,
+      bottomCopper,
+      topSilkscreen,
+      bottomSilkscreen,
+      topMask,
+      bottomMask,
+      keepout,
+      pcbNotes
+    ]
+  );
+};
+
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
 var DEFAULT_MAX_TEXTURE_DIMENSION = 4096;
@@ -45067,6 +45115,7 @@ function JscadBoardTextures({
 }) {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
+  const textureVisibility = useBoardTextureVisibility(visibility);
   const boardData = useMemo21(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
@@ -45104,9 +45153,9 @@ function JscadBoardTextures({
       circuitJson,
       boardData,
       traceTextureResolution,
-      visibility
+      visibility: textureVisibility
     });
-  }, [circuitJson, boardData, traceTextureResolution, visibility]);
+  }, [circuitJson, boardData, traceTextureResolution, textureVisibility]);
   useEffect26(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
@@ -45245,7 +45294,7 @@ function JscadBoardTextures({
 }
 
 // src/three-components/STLModel.tsx
-import { useState as useState16, useEffect as useEffect27, useMemo as useMemo22 } from "react";
+import { useState as useState17, useEffect as useEffect27, useMemo as useMemo22 } from "react";
 import * as THREE45 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
@@ -45257,7 +45306,7 @@ function STLModel({
   layerType
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState16(null);
+  const [geom, setGeom] = useState17(null);
   useEffect27(() => {
     const loader = new STLLoader();
     if (stlData) {
@@ -46703,12 +46752,12 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect29, useMemo as useMemo25, useState as useState18 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo25, useState as useState19 } from "react";
 import * as THREE53 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect28, useMemo as useMemo24, useRef as useRef9, useState as useState17 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo24, useRef as useRef9, useState as useState18 } from "react";
 import * as THREE50 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
@@ -47823,10 +47872,11 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
-  const [geoms, setGeoms] = useState17(null);
-  const [pcbThickness, setPcbThickness] = useState17(null);
-  const [error, setError] = useState17(null);
-  const [isLoading, setIsLoading] = useState17(true);
+  const textureVisibility = useBoardTextureVisibility(visibility);
+  const [geoms, setGeoms] = useState18(null);
+  const [pcbThickness, setPcbThickness] = useState18(null);
+  const [error, setError] = useState18(null);
+  const [isLoading, setIsLoading] = useState18(true);
   const manifoldInstancesForCleanup = useRef9([]);
   const boardData = useMemo24(() => {
     const panels = circuitJson.filter(
@@ -48046,9 +48096,9 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       circuitJson,
       boardData,
       traceTextureResolution,
-      visibility
+      visibility: textureVisibility
     });
-  }, [circuitJson, boardData, traceTextureResolution, visibility]);
+  }, [circuitJson, boardData, traceTextureResolution, textureVisibility]);
   return {
     geoms,
     textures,
@@ -48238,8 +48288,8 @@ var CadViewerManifold = ({
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState18(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState18(null);
+  const [manifoldJSModule, setManifoldJSModule] = useState19(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState19(null);
   const { visibility } = useLayerVisibility();
   useEffect29(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
@@ -53044,9 +53094,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState31 } from "react";
+import { useState as useState32 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState31(function() {
+  var ref = useState32(function() {
     return {
       // value
       value: initialValue,
@@ -54657,11 +54707,11 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/ViewportSubContent.tsx
-import { useLayoutEffect as useLayoutEffect5, useState as useState35 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useState as useState36 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
-  const [content, setContent] = useState35(null);
-  const [overlapWidth, setOverlapWidth] = useState35();
+  const [content, setContent] = useState36(null);
+  const [overlapWidth, setOverlapWidth] = useState36();
   useLayoutEffect5(() => {
     if (!content) return;
     const trigger = document.getElementById(
@@ -54716,10 +54766,10 @@ var menuViewportStyles = {
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState37 } from "react";
+import { useState as useState38 } from "react";
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 
 // src/components/Icons.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -54846,8 +54896,8 @@ var AppearanceMenu = () => {
     lightingEnabled,
     setLightingEnabled
   } = useAppearance();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState36(false);
-  const [hoveredItem, setHoveredItem] = useState36(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState37(false);
+  const [hoveredItem, setHoveredItem] = useState37(null);
   return /* @__PURE__ */ jsxs7(Fragment10, { children: [
     /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
@@ -55296,9 +55346,9 @@ var ContextMenu = ({
 }) => {
   const { cameraType, setCameraType } = useCameraController();
   const { gridEnabled, setGridEnabled } = useAppearance();
-  const [cameraSubOpen, setCameraSubOpen] = useState37(false);
-  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState37(false);
-  const [hoveredItem, setHoveredItem] = useState37(null);
+  const [cameraSubOpen, setCameraSubOpen] = useState38(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState38(false);
+  const [hoveredItem, setHoveredItem] = useState38(null);
   return /* @__PURE__ */ jsx36(
     "div",
     {
@@ -55706,10 +55756,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState39 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState40 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState38 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState39 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -55853,7 +55903,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
   }, [id, normalizedMetadata]);
 };
 var useHotkeyRegistry = () => {
-  const [entries, setEntries] = useState38(
+  const [entries, setEntries] = useState39(
     () => Array.from(hotkeyRegistry.values())
   );
   useEffect47(() => subscribeToRegistry(setEntries), []);
@@ -55870,7 +55920,7 @@ var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState39("");
+  const [query, setQuery] = useState40("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
   useEffect48(() => {
@@ -56113,10 +56163,10 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState40, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
+import { useState as useState41, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
-  const [menuVisible, setMenuVisible] = useState40(false);
-  const [menuPos, setMenuPos] = useState40({
+  const [menuVisible, setMenuVisible] = useState41(false);
+  const [menuPos, setMenuPos] = useState41({
     x: 0,
     y: 0
   });
@@ -56308,7 +56358,7 @@ var CadViewerInner = (props) => {
   const circuitJson = props.circuitJson ?? childrenCircuitJson;
   const hasBends = circuitJson.some((element) => element.type === "pcb_bend");
   const hasFlexGeometry = hasBends || circuitJson.some((element) => element.type === "pcb_stiffener");
-  const [foldPcbsOverride, setFoldPcbs] = useState41(
+  const [foldPcbsOverride, setFoldPcbs] = useState42(
     void 0
   );
   const foldPcbs = foldPcbsOverride ?? props.foldPcbs;
@@ -56321,30 +56371,30 @@ var CadViewerInner = (props) => {
     children: void 0,
     hiddenCadComponentIds
   };
-  const [engine, setEngine] = useState41(() => {
+  const [engine, setEngine] = useState42(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
   const containerRef = useRef29(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState41(false);
-  const [autoRotate, setAutoRotate] = useState41(() => {
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState42(false);
+  const [autoRotate, setAutoRotate] = useState42(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored !== "false";
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState41(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState42(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState41("Custom");
-  const [referenceObject, setReferenceObject] = useState41(null);
+  const [cameraPreset, setCameraPreset] = useState42("Custom");
+  const [referenceObject, setReferenceObject] = useState42(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
   const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext10(SchematicNavigationContext);
-  const [selectedComponent, setSelectedComponent] = useState41();
-  const [selectedCadComponent, setSelectedCadComponent] = useState41();
+  const [selectedComponent, setSelectedComponent] = useState42();
+  const [selectedCadComponent, setSelectedCadComponent] = useState42();
   const handleMenuOpen = useCallback24(
     (position) => {
       setSelectedCadComponent(
@@ -56906,7 +56956,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect51, useState as useState42, useMemo as useMemo34, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect51, useState as useState43, useMemo as useMemo34, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo34(() => document.createElement("a"), []);
@@ -56934,8 +56984,8 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState42();
-  const [error, setError] = useState42();
+  const [url, setUrl] = useState43();
+  const [error, setError] = useState43();
   const ref = useCallback25(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.610",
+  "version": "0.0.611",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"