npm - @tscircuit/3d-viewer - Versions diffs - 0.0.544 → 0.0.545 - Mend

@tscircuit/3d-viewer 0.0.544 → 0.0.545

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +799 -351
package/package.json +3 -3

package/dist/index.js CHANGED Viewed

@@ -14433,7 +14433,7 @@ var require_browser = __commonJS({
 // src/CadViewer.tsx
 import { useState as useState36, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect45 } from "react";
-import * as THREE39 from "three";
+import * as THREE43 from "three";
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
@@ -28889,8 +28889,8 @@ var FootprinterModel = ({
 };
 // src/three-components/GltfModel.tsx
-import { useState as useState4, useEffect as useEffect6 } from "react";
-import * as THREE5 from "three";
+import { useState as useState4, useEffect as useEffect7 } from "react";
+import * as THREE7 from "three";
 import { GLTFLoader } from "three-stdlib";
 // src/react-three/getDefaultEnvironmentMap.ts
@@ -28920,6 +28920,170 @@ var getDefaultEnvironmentMap = (renderer) => {
   return texture;
 };
+// src/three-components/useCadModelTransformGraph.ts
+import { useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import * as THREE6 from "three";
+// src/utils/cad-model-fit.ts
+import * as THREE5 from "three";
+function getObjectBoundsRelativeToParent(object) {
+  const bounds = new THREE5.Box3();
+  let hasBounds = false;
+  object.updateWorldMatrix(true, false);
+  const parentInverseMatrix = object.parent ? object.parent.matrixWorld.clone().invert() : new THREE5.Matrix4();
+  object.traverse((node) => {
+    node.updateWorldMatrix(true, false);
+    if (node instanceof THREE5.Mesh && node.geometry) {
+      if (!node.geometry.boundingBox) {
+        node.geometry.computeBoundingBox();
+      }
+      if (node.geometry.boundingBox) {
+        const transformedBounds = node.geometry.boundingBox.clone();
+        transformedBounds.applyMatrix4(node.matrixWorld);
+        transformedBounds.applyMatrix4(parentInverseMatrix);
+        if (!hasBounds) {
+          bounds.copy(transformedBounds);
+          hasBounds = true;
+        } else {
+          bounds.union(transformedBounds);
+        }
+      }
+    }
+  });
+  return hasBounds ? bounds : null;
+}
+function getLocalBoundsSize(object) {
+  const bounds = getObjectBoundsRelativeToParent(object);
+  if (!bounds) {
+    return new THREE5.Vector3();
+  }
+  return bounds.getSize(new THREE5.Vector3());
+}
+function getCadModelFitScale(object, targetSize, fitMode = "contain_within_bounds") {
+  if (!targetSize) {
+    return [1, 1, 1];
+  }
+  const size4 = getLocalBoundsSize(object);
+  const safeScale = [
+    size4.x > 0 ? targetSize[0] / size4.x : 1,
+    size4.y > 0 ? targetSize[1] / size4.y : 1,
+    size4.z > 0 ? targetSize[2] / size4.z : 1
+  ];
+  if (fitMode === "fill_bounds") {
+    return safeScale;
+  }
+  const uniformScale = Math.min(...safeScale);
+  return [uniformScale, uniformScale, uniformScale];
+}
+// src/three-components/useCadModelTransformGraph.ts
+var useCadModelTransformGraph = ({
+  model,
+  position,
+  rotation,
+  modelOffset = [0, 0, 0],
+  modelRotation = [0, 0, 0],
+  sourceCoordinateTransform,
+  modelSize,
+  modelFitMode = "contain_within_bounds",
+  scale: scale2
+}) => {
+  const { rootObject } = useThree();
+  const boardTransformGroup = useMemo5(() => new THREE6.Group(), []);
+  const fitTransformGroup = useMemo5(() => new THREE6.Group(), []);
+  const modelTransformGroup = useMemo5(() => new THREE6.Group(), []);
+  const loaderTransformGroup = useMemo5(() => new THREE6.Group(), []);
+  useEffect6(() => {
+    boardTransformGroup.add(fitTransformGroup);
+    return () => {
+      boardTransformGroup.remove(fitTransformGroup);
+    };
+  }, [boardTransformGroup, fitTransformGroup]);
+  useEffect6(() => {
+    fitTransformGroup.add(modelTransformGroup);
+    return () => {
+      fitTransformGroup.remove(modelTransformGroup);
+    };
+  }, [fitTransformGroup, modelTransformGroup]);
+  useEffect6(() => {
+    modelTransformGroup.add(loaderTransformGroup);
+    return () => {
+      modelTransformGroup.remove(loaderTransformGroup);
+    };
+  }, [modelTransformGroup, loaderTransformGroup]);
+  useEffect6(() => {
+    while (loaderTransformGroup.children.length > 0) {
+      const firstChild = loaderTransformGroup.children[0];
+      if (!firstChild) break;
+      loaderTransformGroup.remove(firstChild);
+    }
+    if (model) {
+      loaderTransformGroup.add(model);
+    }
+  }, [loaderTransformGroup, model]);
+  useEffect6(() => {
+    if (!sourceCoordinateTransform) {
+      loaderTransformGroup.matrixAutoUpdate = true;
+      loaderTransformGroup.position.set(0, 0, 0);
+      loaderTransformGroup.rotation.set(0, 0, 0);
+      loaderTransformGroup.scale.set(1, 1, 1);
+      loaderTransformGroup.updateMatrix();
+      return;
+    }
+    loaderTransformGroup.matrixAutoUpdate = false;
+    loaderTransformGroup.matrix.copy(sourceCoordinateTransform);
+    loaderTransformGroup.matrixWorldNeedsUpdate = true;
+  }, [loaderTransformGroup, sourceCoordinateTransform]);
+  useEffect6(() => {
+    if (!rootObject) return;
+    rootObject.add(boardTransformGroup);
+    return () => {
+      rootObject.remove(boardTransformGroup);
+    };
+  }, [rootObject, boardTransformGroup]);
+  useEffect6(() => {
+    if (position) {
+      boardTransformGroup.position.fromArray(position);
+    } else {
+      boardTransformGroup.position.set(0, 0, 0);
+    }
+    if (rotation) {
+      boardTransformGroup.rotation.fromArray(rotation);
+    } else {
+      boardTransformGroup.rotation.set(0, 0, 0);
+    }
+    modelTransformGroup.position.fromArray(modelOffset);
+    modelTransformGroup.rotation.fromArray(modelRotation);
+    modelTransformGroup.scale.setScalar(scale2 ?? 1);
+    if (!model) {
+      fitTransformGroup.scale.set(1, 1, 1);
+      return;
+    }
+    fitTransformGroup.scale.set(1, 1, 1);
+    fitTransformGroup.updateWorldMatrix(true, true);
+    const fitScale = getCadModelFitScale(
+      modelTransformGroup,
+      modelSize,
+      modelFitMode
+    );
+    fitTransformGroup.scale.set(fitScale[0], fitScale[1], fitScale[2]);
+  }, [
+    boardTransformGroup,
+    fitTransformGroup,
+    model,
+    modelFitMode,
+    modelOffset,
+    loaderTransformGroup,
+    modelTransformGroup,
+    modelRotation,
+    modelSize,
+    position,
+    rotation,
+    scale2
+  ]);
+  return { boardTransformGroup };
+};
 // src/three-components/GltfModel.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var DEFAULT_ENV_MAP_INTENSITY = 1.25;
@@ -28927,16 +29091,32 @@ function GltfModel({
   gltfUrl,
   position,
   rotation,
+  modelOffset = [0, 0, 0],
+  modelRotation = [0, 0, 0],
+  sourceCoordinateTransform,
+  modelSize,
+  modelFitMode = "contain_within_bounds",
   onHover,
   onUnhover,
   isHovered,
   scale: scale2,
   isTranslucent = false
 }) {
-  const { renderer, rootObject } = useThree();
+  const { renderer } = useThree();
   const [model, setModel] = useState4(null);
   const [loadError, setLoadError] = useState4(null);
-  useEffect6(() => {
+  const { boardTransformGroup } = useCadModelTransformGraph({
+    model,
+    position,
+    rotation,
+    modelOffset,
+    modelRotation,
+    sourceCoordinateTransform,
+    modelSize,
+    modelFitMode,
+    scale: scale2
+  });
+  useEffect7(() => {
     if (!gltfUrl) return;
     const loader = new GLTFLoader();
     let isMounted = true;
@@ -28946,7 +29126,7 @@ function GltfModel({
         if (!isMounted) return;
         const scene = gltf.scene;
         scene.traverse((child) => {
-          if (child instanceof THREE5.Mesh && child.material) {
+          if (child instanceof THREE7.Mesh && child.material) {
             const setMaterialTransparency = (mat) => {
               mat.transparent = isTranslucent;
               mat.opacity = isTranslucent ? 0.5 : 1;
@@ -28975,35 +29155,13 @@ function GltfModel({
       isMounted = false;
     };
   }, [gltfUrl, isTranslucent]);
-  useEffect6(() => {
-    if (!model) return;
-    if (position) model.position.fromArray(position);
-    if (rotation) model.rotation.fromArray(rotation);
-    if (scale2 !== void 0) model.scale.setScalar(scale2);
-  }, [
-    model,
-    position?.[0],
-    position?.[1],
-    position?.[2],
-    rotation?.[0],
-    rotation?.[1],
-    rotation?.[2],
-    scale2
-  ]);
-  useEffect6(() => {
-    if (!rootObject || !model) return;
-    rootObject.add(model);
-    return () => {
-      rootObject.remove(model);
-    };
-  }, [rootObject, model]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!model || !renderer) return;
     const environmentMap = getDefaultEnvironmentMap(renderer);
     if (!environmentMap) return;
     const previousMaterialState = [];
     const applyEnvironmentToMaterial = (material) => {
-      if (!(material instanceof THREE5.MeshStandardMaterial)) return;
+      if (!(material instanceof THREE7.MeshStandardMaterial)) return;
       previousMaterialState.push({
         material,
         envMap: material.envMap ?? null,
@@ -29016,7 +29174,7 @@ function GltfModel({
       material.needsUpdate = true;
     };
     model.traverse((child) => {
-      if (!(child instanceof THREE5.Mesh)) return;
+      if (!(child instanceof THREE7.Mesh)) return;
       const material = child.material;
       if (Array.isArray(material)) {
         material.forEach(applyEnvironmentToMaterial);
@@ -29032,10 +29190,10 @@ function GltfModel({
       });
     };
   }, [model, renderer]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!model) return;
     model.traverse((child) => {
-      if (child instanceof THREE5.Mesh && child.material instanceof THREE5.MeshStandardMaterial) {
+      if (child instanceof THREE7.Mesh && child.material instanceof THREE7.MeshStandardMaterial) {
         if (isHovered) {
           child.material.emissive.setHex(255);
           child.material.emissiveIntensity = 0.2;
@@ -29055,7 +29213,7 @@ function GltfModel({
       isHovered,
       onHover,
       onUnhover,
-      object: model
+      object: boardTransformGroup
     }
   );
 }
@@ -29063,29 +29221,33 @@ function GltfModel({
 // src/three-components/JscadModel.tsx
 var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling = __toESM(require_src(), 1);
-import * as THREE6 from "three";
-import { useMemo as useMemo6, useEffect as useEffect7 } from "react";
+import * as THREE8 from "three";
+import { useMemo as useMemo6, useEffect as useEffect8 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var JscadModel = ({
   jscadPlan,
   positionOffset,
   rotationOffset,
+  modelOffset = [0, 0, 0],
+  modelRotation = [0, 0, 0],
+  sourceCoordinateTransform,
+  modelSize,
+  modelFitMode = "contain_within_bounds",
   onHover,
   onUnhover,
   isHovered,
   scale: scale2,
   isTranslucent = false
 }) => {
-  const { rootObject } = useThree();
   const { threeGeom, material } = useMemo6(() => {
     const jscadObject = (0, import_jscad_planner.executeJscadOperations)(import_modeling.default, jscadPlan);
     if (!jscadObject || !jscadObject.polygons && !jscadObject.sides) {
       return { threeGeom: null, material: null };
     }
     const threeGeom2 = convertCSGToThreeGeom(jscadObject);
-    const material2 = new THREE6.MeshStandardMaterial({
+    const material2 = new THREE8.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE6.DoubleSide,
+      side: THREE8.DoubleSide,
       transparent: isTranslucent,
       opacity: isTranslucent ? 0.5 : 1,
       depthWrite: !isTranslucent
@@ -29094,36 +29256,25 @@ var JscadModel = ({
   }, [jscadPlan, isTranslucent]);
   const mesh = useMemo6(() => {
     if (!threeGeom) return null;
-    const createdMesh = new THREE6.Mesh(threeGeom, material);
+    const createdMesh = new THREE8.Mesh(threeGeom, material);
     createdMesh.renderOrder = isTranslucent ? 2 : 1;
     return createdMesh;
   }, [threeGeom, material, isTranslucent]);
-  useEffect7(() => {
-    if (!mesh || !rootObject) return;
-    rootObject.add(mesh);
-    return () => {
-      rootObject.remove(mesh);
-    };
-  }, [rootObject, mesh]);
-  useEffect7(() => {
-    if (!mesh) return;
-    if (positionOffset) mesh.position.fromArray(positionOffset);
-    if (rotationOffset) mesh.rotation.fromArray(rotationOffset);
-    if (scale2 !== void 0) mesh.scale.setScalar(scale2);
-  }, [
-    mesh,
-    positionOffset?.[0],
-    positionOffset?.[1],
-    positionOffset?.[2],
-    rotationOffset?.[0],
-    rotationOffset?.[1],
-    rotationOffset?.[2],
-    scale2
-  ]);
-  useMemo6(() => {
+  const { boardTransformGroup } = useCadModelTransformGraph({
+    model: mesh,
+    position: positionOffset,
+    rotation: rotationOffset,
+    modelOffset,
+    modelRotation,
+    sourceCoordinateTransform,
+    modelSize,
+    modelFitMode,
+    scale: scale2
+  });
+  useEffect8(() => {
     if (!material) return;
     if (isHovered) {
-      const color = new THREE6.Color(material.color.getHex());
+      const color = new THREE8.Color(material.color.getHex());
       material.emissive.copy(color);
       material.emissive.setRGB(0, 0, 1);
       material.emissiveIntensity = 0.2;
@@ -29138,13 +29289,13 @@ var JscadModel = ({
       isHovered,
       onHover,
       onUnhover,
-      object: mesh
+      object: boardTransformGroup
     }
   );
 };
 // src/hooks/use-global-obj-loader.ts
-import { useState as useState5, useEffect as useEffect8 } from "react";
+import { useState as useState5, useEffect as useEffect9 } from "react";
 import { MTLLoader, OBJLoader } from "three-stdlib";
 // src/utils/vrml.ts
@@ -29172,7 +29323,7 @@ if (typeof window !== "undefined" && !window.TSCIRCUIT_OBJ_LOADER_CACHE) {
 }
 function useGlobalObjLoader(url) {
   const [obj, setObj] = useState5(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!url) return;
     const cleanUrl = url.replace(/&cachebust_origin=$/, "");
     const cache = window.TSCIRCUIT_OBJ_LOADER_CACHE;
@@ -29248,13 +29399,18 @@ function useGlobalObjLoader(url) {
 }
 // src/three-components/MixedStlModel.tsx
-import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
-import * as THREE7 from "three";
+import { useMemo as useMemo7 } from "react";
+import * as THREE9 from "three";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function MixedStlModel({
   url,
   position,
   rotation,
+  modelOffset = [0, 0, 0],
+  modelRotation = [0, 0, 0],
+  sourceCoordinateTransform,
+  modelSize,
+  modelFitMode = "contain_within_bounds",
   onHover,
   onUnhover,
   isHovered,
@@ -29262,11 +29418,10 @@ function MixedStlModel({
   isTranslucent = false
 }) {
   const obj = useGlobalObjLoader(url);
-  const { rootObject } = useThree();
   const model = useMemo7(() => {
     if (obj && !(obj instanceof Error)) {
       obj.traverse((child) => {
-        if (child instanceof THREE7.Mesh && child.material) {
+        if (child instanceof THREE9.Mesh && child.material) {
           const setMaterialTransparency = (mat) => {
             mat.transparent = isTranslucent;
             mat.opacity = isTranslucent ? 0.5 : 1;
@@ -29283,51 +29438,26 @@ function MixedStlModel({
       });
       return obj;
     }
-    return new THREE7.Mesh(
-      new THREE7.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE7.MeshStandardMaterial({
+    return new THREE9.Mesh(
+      new THREE9.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE9.MeshStandardMaterial({
         transparent: true,
         color: "red",
         opacity: 0.25
       })
     );
   }, [obj, isTranslucent]);
-  useEffect9(() => {
-    if (!rootObject || !model) return;
-    rootObject.add(model);
-    return () => {
-      rootObject.remove(model);
-    };
-  }, [rootObject, model]);
-  useEffect9(() => {
-    if (!model) return;
-    if (position) {
-      if (Array.isArray(position)) {
-        model.position.fromArray(position);
-      } else {
-        model.position.copy(position);
-      }
-    }
-    if (rotation) {
-      if (Array.isArray(rotation)) {
-        model.rotation.fromArray(rotation);
-      } else {
-        model.rotation.copy(rotation);
-      }
-    }
-    if (scale2 !== void 0) {
-      model.scale.setScalar(scale2);
-    }
-  }, [
+  const { boardTransformGroup } = useCadModelTransformGraph({
     model,
-    Array.isArray(position) ? position[0] : position?.x,
-    Array.isArray(position) ? position[1] : position?.y,
-    Array.isArray(position) ? position[2] : position?.z,
-    Array.isArray(rotation) ? rotation[0] : rotation?.x,
-    Array.isArray(rotation) ? rotation[1] : rotation?.y,
-    Array.isArray(rotation) ? rotation[2] : rotation?.z,
-    scale2
-  ]);
+    position: Array.isArray(position) ? position : position ? [position.x, position.y, position.z] : void 0,
+    rotation: Array.isArray(rotation) ? rotation : rotation ? [rotation.x, rotation.y, rotation.z] : void 0,
+    modelOffset,
+    modelRotation,
+    sourceCoordinateTransform,
+    modelSize,
+    modelFitMode,
+    scale: scale2
+  });
   if (obj instanceof Error) {
     throw obj;
   }
@@ -29337,7 +29467,7 @@ function MixedStlModel({
       isHovered,
       onHover,
       onUnhover,
-      object: model
+      object: boardTransformGroup
     }
   );
 }
@@ -29348,8 +29478,8 @@ import {
   BufferGeometry as BufferGeometry2,
   Color as Color3,
   Float32BufferAttribute,
-  Group as Group2,
-  Mesh as Mesh5,
+  Group as Group3,
+  Mesh as Mesh6,
   MeshStandardMaterial as MeshStandardMaterial5
 } from "three";
 import { GLTFExporter } from "three-stdlib";
@@ -29379,7 +29509,7 @@ async function loadOcctImport() {
   return occtImportPromise;
 }
 function occtMeshesToGroup(meshes) {
-  const group = new Group2();
+  const group = new Group3();
   for (const mesh of meshes) {
     const positions = mesh.attributes.position?.array ?? [];
     const indices = mesh.index?.array ?? [];
@@ -29398,7 +29528,7 @@ function occtMeshesToGroup(meshes) {
     const material = new MeshStandardMaterial5({
       color: mesh.color ? new Color3(mesh.color[0], mesh.color[1], mesh.color[2]) : new Color3(0.82, 0.82, 0.82)
     });
-    const threeMesh = new Mesh5(geometry, material);
+    const threeMesh = new Mesh6(geometry, material);
     threeMesh.name = mesh.name;
     group.add(threeMesh);
   }
@@ -29488,6 +29618,11 @@ var StepModel = ({
   stepUrl,
   position,
   rotation,
+  modelOffset,
+  modelRotation,
+  sourceCoordinateTransform,
+  modelSize,
+  modelFitMode,
   scale: scale2,
   onHover,
   onUnhover,
@@ -29580,6 +29715,11 @@ var StepModel = ({
       gltfUrl: stepGltfUrl,
       position,
       rotation,
+      modelOffset,
+      modelRotation,
+      sourceCoordinateTransform,
+      modelSize,
+      modelFitMode,
       scale: scale2,
       onHover,
       onUnhover,
@@ -29589,6 +29729,287 @@ var StepModel = ({
   );
 };
+// src/utils/cad-model-loader-transform.ts
+import * as THREE10 from "three";
+function applyCoordinateTransform(point, config) {
+  let { x, y, z: z21 } = point;
+  if (config.axisMapping) {
+    const original = { x, y, z: z21 };
+    if (config.axisMapping.x) {
+      x = getAxisValue(original, config.axisMapping.x);
+    }
+    if (config.axisMapping.y) {
+      y = getAxisValue(original, config.axisMapping.y);
+    }
+    if (config.axisMapping.z) {
+      z21 = getAxisValue(original, config.axisMapping.z);
+    }
+  }
+  x *= config.flipX ?? 1;
+  y *= config.flipY ?? 1;
+  z21 *= config.flipZ ?? 1;
+  if (config.rotation) {
+    if (config.rotation.x) {
+      const rad = config.rotation.x * Math.PI / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const newY = y * cos - z21 * sin;
+      const newZ = y * sin + z21 * cos;
+      y = newY;
+      z21 = newZ;
+    }
+    if (config.rotation.y) {
+      const rad = config.rotation.y * Math.PI / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const newX = x * cos + z21 * sin;
+      const newZ = -x * sin + z21 * cos;
+      x = newX;
+      z21 = newZ;
+    }
+    if (config.rotation.z) {
+      const rad = config.rotation.z * Math.PI / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const newX = x * cos - y * sin;
+      const newY = x * sin + y * cos;
+      x = newX;
+      y = newY;
+    }
+  }
+  return { x, y, z: z21 };
+}
+function getAxisValue(original, mapping) {
+  switch (mapping) {
+    case "x":
+      return original.x;
+    case "y":
+      return original.y;
+    case "z":
+      return original.z;
+    case "-x":
+      return -original.x;
+    case "-y":
+      return -original.y;
+    case "-z":
+      return -original.z;
+    default:
+      return 0;
+  }
+}
+var COORDINATE_TRANSFORMS = {
+  Z_UP_TO_Y_UP: {
+    axisMapping: { x: "x", y: "-z", z: "y" }
+  },
+  Z_OUT_OF_TOP: {
+    axisMapping: { x: "x", y: "z", z: "-y" }
+  },
+  STEP_INVERTED: {
+    axisMapping: { x: "-x", y: "z", z: "-y" }
+  },
+  USB_PORT_FIX: {
+    flipY: -1
+  },
+  Z_UP_TO_Y_UP_USB_FIX: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    flipZ: -1
+  },
+  FOOTPRINTER_MODEL_TRANSFORM: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    flipX: -1,
+    rotation: { x: 180, y: 180 }
+  },
+  IDENTITY: {},
+  TEST_ROTATE_X_90: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { x: 90 }
+  },
+  TEST_ROTATE_X_270: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { x: 270 }
+  },
+  TEST_ROTATE_Y_90: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { y: 90 }
+  },
+  TEST_ROTATE_Y_270: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { y: 270 }
+  },
+  TEST_ROTATE_Z_90: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { z: 90 }
+  },
+  TEST_ROTATE_Z_270: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    rotation: { z: 270 }
+  },
+  TEST_FLIP_X: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    flipX: -1
+  },
+  TEST_FLIP_Z: {
+    axisMapping: { x: "x", y: "-z", z: "y" },
+    flipZ: -1
+  },
+  OBJ_Z_UP_TO_Y_UP: {
+    axisMapping: { x: "x", y: "z", z: "y" }
+  }
+};
+function getDefaultModelTransform(cad, options) {
+  if (options.coordinateTransform) {
+    return options.coordinateTransform;
+  }
+  if (options.usingGlbCoordinates) {
+    return void 0;
+  }
+  if (options.hasFootprinterModel) {
+    return COORDINATE_TRANSFORMS.FOOTPRINTER_MODEL_TRANSFORM;
+  }
+  if (options.usingObjFormat) {
+    return void 0;
+  }
+  if (options.usingStepFormat) {
+    return COORDINATE_TRANSFORMS.STEP_INVERTED;
+  }
+  return COORDINATE_TRANSFORMS.Z_UP_TO_Y_UP_USB_FIX;
+}
+function getCadLoaderTransformConfig(cad, modelType) {
+  return getDefaultModelTransform(cad, {
+    usingGlbCoordinates: modelType === "gltf" || modelType === "glb" || modelType === "jscad",
+    usingObjFormat: modelType === "obj" || modelType === "wrl",
+    usingStepFormat: modelType === "step",
+    hasFootprinterModel: modelType === "footprinter"
+  });
+}
+function getCadLoaderTransformMatrix(config) {
+  if (!config) {
+    return void 0;
+  }
+  const basisX = applyCoordinateTransform({ x: 1, y: 0, z: 0 }, config);
+  const basisY = applyCoordinateTransform({ x: 0, y: 1, z: 0 }, config);
+  const basisZ = applyCoordinateTransform({ x: 0, y: 0, z: 1 }, config);
+  return new THREE10.Matrix4().makeBasis(
+    new THREE10.Vector3(basisX.x, basisX.y, basisX.z),
+    new THREE10.Vector3(basisY.x, basisY.y, basisY.z),
+    new THREE10.Vector3(basisZ.x, basisZ.y, basisZ.z)
+  );
+}
+// src/utils/cad-model-transform.ts
+import * as THREE11 from "three";
+function toRadians(value) {
+  return value * Math.PI / 180;
+}
+function getOrientationRotationForBoardNormal(modelBoardNormalDirection) {
+  if (modelBoardNormalDirection === "z+") {
+    return [0, 0, 0];
+  }
+  switch (modelBoardNormalDirection) {
+    case "x+":
+      return [0, toRadians(-90), 0];
+    case "x-":
+      return [0, toRadians(90), 0];
+    case "y+":
+      return [toRadians(90), 0, 0];
+    case "y-":
+      return [toRadians(-90), 0, 0];
+    case "z-":
+      return [toRadians(180), 0, 0];
+    default:
+      return [0, 0, 0];
+  }
+}
+function getAdjustedCadPosition(cadComponent, layer, pcbThickness) {
+  if (!cadComponent.position) {
+    return void 0;
+  }
+  let boardRelativeZ = cadComponent.position.z;
+  if (layer === "bottom" && cadComponent.position.z >= 0) {
+    boardRelativeZ = -(cadComponent.position.z + pcbThickness);
+  }
+  return [cadComponent.position.x, cadComponent.position.y, boardRelativeZ];
+}
+function getBaseCadRotation(cadComponent, layer) {
+  if (!cadComponent.rotation) {
+    return layer === "bottom" ? [Math.PI, 0, 0] : [0, 0, 0];
+  }
+  return [
+    toRadians(cadComponent.rotation.x),
+    toRadians(cadComponent.rotation.y),
+    toRadians(cadComponent.rotation.z)
+  ];
+}
+function rotateOriginPosition(origin, boardNormalRotation) {
+  const vector = new THREE11.Vector3(origin.x, origin.y, origin.z);
+  const euler = new THREE11.Euler(
+    boardNormalRotation[0],
+    boardNormalRotation[1],
+    boardNormalRotation[2],
+    "XYZ"
+  );
+  vector.applyEuler(euler);
+  return [vector.x, vector.y, vector.z];
+}
+function getModelOriginOffset(cadComponent, loaderTransform, modelRotation) {
+  if (!cadComponent.model_origin_position) {
+    return [0, 0, 0];
+  }
+  const originInLoaderSpace = loaderTransform ? applyCoordinateTransform(
+    cadComponent.model_origin_position,
+    loaderTransform
+  ) : cadComponent.model_origin_position;
+  return rotateOriginPosition(originInLoaderSpace, modelRotation);
+}
+function getCadModelTransform(cadComponent, options) {
+  const position = getAdjustedCadPosition(
+    cadComponent,
+    options.layer,
+    options.pcbThickness
+  );
+  const rotation = getBaseCadRotation(cadComponent, options.layer);
+  const loaderTransform = getCadLoaderTransformConfig(
+    cadComponent,
+    options.modelType
+  );
+  const modelRotation = getOrientationRotationForBoardNormal(
+    cadComponent.model_board_normal_direction ?? "z+"
+  );
+  const rotatedOrigin = getModelOriginOffset(
+    cadComponent,
+    loaderTransform,
+    modelRotation
+  );
+  return {
+    position,
+    rotation,
+    modelPosition: [-rotatedOrigin[0], -rotatedOrigin[1], -rotatedOrigin[2]],
+    modelRotation,
+    scale: cadComponent.model_unit_to_mm_scale_factor ?? void 0,
+    fitMode: cadComponent.model_object_fit ?? "contain_within_bounds",
+    size: cadComponent.size ? [cadComponent.size.x, cadComponent.size.y, cadComponent.size.z] : void 0
+  };
+}
+// src/utils/get-cad-model-type.ts
+var getCadModelType = (cadComponent) => {
+  if (cadComponent.model_glb_url || cadComponent.model_gltf_url) {
+    return cadComponent.model_glb_url ? "glb" : "gltf";
+  }
+  if (cadComponent.model_step_url) return "step";
+  if (cadComponent.model_obj_url || cadComponent.model_wrl_url || cadComponent.model_stl_url) {
+    if (cadComponent.model_wrl_url) return "wrl";
+    if (cadComponent.model_stl_url) return "stl";
+    return "obj";
+  }
+  if (cadComponent.model_jscad) return "jscad";
+  if (cadComponent.footprinter_string) return "footprinter";
+  return "unknown";
+};
+var getRenderedCadModelType = (modelType) => {
+  return modelType === "step" ? "glb" : modelType;
+};
 // src/utils/resolve-model-url.ts
 var resolveModelUrl = (modelUrl, resolveStaticAsset) => {
   if (!modelUrl) return void 0;
@@ -29665,7 +30086,7 @@ var AnyCadComponent = ({
     [resolveStaticAsset]
   );
   const url = resolveModelUrlWithStaticResolver(
-    cad_component.model_obj_url ?? cad_component.model_wrl_url ?? cad_component.model_stl_url
+    cad_component.model_wrl_url ?? cad_component.model_stl_url ?? cad_component.model_obj_url
   );
   const gltfUrl = resolveModelUrlWithStaticResolver(
     cad_component.model_glb_url ?? cad_component.model_gltf_url
@@ -29683,81 +30104,94 @@ var AnyCadComponent = ({
     (elm) => elm.type === "pcb_component" && elm.source_component_id === cad_component.source_component_id
   );
   const layer = pcbComponent?.layer ?? "top";
-  const rotationOffset = useMemo8(() => {
-    const baseRotation = cad_component.rotation ? tuple(
-      cad_component.rotation.x * Math.PI / 180,
-      cad_component.rotation.y * Math.PI / 180,
-      cad_component.rotation.z * Math.PI / 180
-    ) : tuple(0, 0, 0);
-    if (layer === "bottom") {
-    }
-    return baseRotation;
-  }, [cad_component.rotation, layer]);
-  const adjustedPosition = useMemo8(() => {
-    if (!cad_component.position) return void 0;
-    let z21;
-    if (layer === "top") {
-      z21 = cad_component.position.z;
-    } else if (layer === "bottom") {
-      z21 = -(cad_component.position.z + pcbThickness);
-    } else {
-      z21 = cad_component.position.z;
-    }
-    return [cad_component.position.x, cad_component.position.y, z21];
-  }, [cad_component.position, layer, pcbThickness]);
+  const sourceModelType = getCadModelType(cad_component);
+  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 = useMemo8(
+    () => getCadModelTransform(cad_component, {
+      layer,
+      pcbThickness,
+      modelType: renderedModelType
+    }),
+    [cad_component, layer, pcbThickness, renderedModelType]
+  );
+  const rotationOffset = tuple(...modelTransform.rotation);
+  const adjustedPosition = modelTransform.position;
   const fallbackModelComponents = useMemo8(() => {
     const components = [];
-    if (url) {
+    if (gltfUrl) {
       components.push(
         /* @__PURE__ */ jsx10(
-          MixedStlModel,
+          GltfModel,
           {
-            url,
+            gltfUrl,
             position: adjustedPosition,
             rotation: rotationOffset,
-            scale: cad_component.model_unit_to_mm_scale_factor,
+            modelOffset: modelTransform.modelPosition,
+            modelRotation: modelTransform.modelRotation,
+            sourceCoordinateTransform: getCadLoaderTransformMatrix(
+              getCadLoaderTransformConfig(cad_component, gltfModelType)
+            ),
+            scale: modelTransform.scale,
+            modelSize: modelTransform.size,
+            modelFitMode: modelTransform.fitMode,
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
             isTranslucent: cad_component.show_as_translucent_model
           },
-          `${cad_component.cad_component_id}-mixed-${url}`
+          `${cad_component.cad_component_id}-gltf-${gltfUrl}`
         )
       );
     }
-    if (gltfUrl) {
+    if (stepUrl && !cad_component.model_jscad && !cad_component.footprinter_string) {
       components.push(
         /* @__PURE__ */ jsx10(
-          GltfModel,
+          StepModel,
           {
-            gltfUrl,
+            stepUrl,
             position: adjustedPosition,
             rotation: rotationOffset,
-            scale: cad_component.model_unit_to_mm_scale_factor,
+            modelOffset: modelTransform.modelPosition,
+            modelRotation: modelTransform.modelRotation,
+            sourceCoordinateTransform: getCadLoaderTransformMatrix(
+              getCadLoaderTransformConfig(cad_component, renderedModelType)
+            ),
+            scale: modelTransform.scale,
+            modelSize: modelTransform.size,
+            modelFitMode: modelTransform.fitMode,
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
             isTranslucent: cad_component.show_as_translucent_model
           },
-          `${cad_component.cad_component_id}-gltf-${gltfUrl}`
+          `${cad_component.cad_component_id}-step-${stepUrl}`
         )
       );
     }
-    if (stepUrl && !cad_component.model_jscad && !cad_component.footprinter_string) {
+    if (url) {
       components.push(
         /* @__PURE__ */ jsx10(
-          StepModel,
+          MixedStlModel,
           {
-            stepUrl,
+            url,
             position: adjustedPosition,
             rotation: rotationOffset,
-            scale: cad_component.model_unit_to_mm_scale_factor,
+            modelOffset: modelTransform.modelPosition,
+            modelRotation: modelTransform.modelRotation,
+            sourceCoordinateTransform: getCadLoaderTransformMatrix(
+              getCadLoaderTransformConfig(cad_component, meshModelType)
+            ),
+            scale: modelTransform.scale,
+            modelSize: modelTransform.size,
+            modelFitMode: modelTransform.fitMode,
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
             isTranslucent: cad_component.show_as_translucent_model
           },
-          `${cad_component.cad_component_id}-step-${stepUrl}`
+          `${cad_component.cad_component_id}-mixed-${url}`
         )
       );
     }
@@ -29767,12 +30201,19 @@ var AnyCadComponent = ({
     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,
+    gltfModelType,
     handleHover,
     handleUnhover,
     isHovered,
+    meshModelType,
+    modelTransform.modelPosition,
+    modelTransform.modelRotation,
+    modelTransform.scale,
+    modelTransform.fitMode,
+    modelTransform.size,
+    renderedModelType,
     rotationOffset,
     stepUrl,
     url
@@ -29811,7 +30252,14 @@ var AnyCadComponent = ({
         jscadPlan: cad_component.model_jscad,
         positionOffset: adjustedPosition,
         rotationOffset,
-        scale: cad_component.model_unit_to_mm_scale_factor,
+        modelOffset: modelTransform.modelPosition,
+        modelRotation: modelTransform.modelRotation,
+        sourceCoordinateTransform: getCadLoaderTransformMatrix(
+          getCadLoaderTransformConfig(cad_component, "jscad")
+        ),
+        scale: modelTransform.scale,
+        modelSize: modelTransform.size,
+        modelFitMode: modelTransform.fitMode,
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
@@ -29826,7 +30274,7 @@ var AnyCadComponent = ({
         positionOffset: adjustedPosition,
         rotationOffset,
         footprint: cad_component.footprinter_string,
-        scale: cad_component.model_unit_to_mm_scale_factor,
+        scale: modelTransform.scale,
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
@@ -29872,12 +30320,12 @@ var AnyCadComponent = ({
 // src/CadViewerContainer.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect18, useMemo as useMemo14, useState as useState10 } from "react";
-import * as THREE16 from "three";
+import * as THREE20 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.543",
+  version: "0.0.544",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -29906,7 +30354,7 @@ var package_default = {
   dependencies: {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
-    "circuit-json": "^0.0.391",
+    "circuit-json": "^0.0.405",
     "circuit-to-canvas": "^0.0.92",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
@@ -29945,7 +30393,7 @@ var package_default = {
     "react-use-gesture": "^9.1.3",
     semver: "^7.7.0",
     "strip-ansi": "^7.1.0",
-    tscircuit: "^0.0.1532",
+    tscircuit: "^0.0.1541",
     tsup: "^8.3.6",
     typescript: "^5.7.3",
     vite: "^7.1.5",
@@ -29963,7 +30411,7 @@ import {
   useImperativeHandle,
   useMemo as useMemo10
 } from "react";
-import * as THREE10 from "three";
+import * as THREE14 from "three";
 // src/react-three/remove-existing-canvases.ts
 function removeExistingCanvases(container) {
@@ -29971,10 +30419,10 @@ function removeExistingCanvases(container) {
 }
 // src/react-three/configure-renderer.ts
-import * as THREE8 from "three";
+import * as THREE12 from "three";
 var configureRenderer = (renderer) => {
-  renderer.outputColorSpace = THREE8.SRGBColorSpace;
-  renderer.toneMapping = THREE8.ACESFilmicToneMapping;
+  renderer.outputColorSpace = THREE12.SRGBColorSpace;
+  renderer.toneMapping = THREE12.ACESFilmicToneMapping;
   renderer.toneMappingExposure = 1;
 };
@@ -29987,7 +30435,7 @@ import {
   useRef as useRef3,
   useState as useState8
 } from "react";
-import * as THREE9 from "three";
+import * as THREE13 from "three";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var CAMERA_KEY = "cadViewerCameraStateSession";
 var saveCameraToSession = (camera, controls) => {
@@ -30036,7 +30484,7 @@ var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition
   );
   const [cameraPosition, setCameraPosition] = useState8(initialCameraPosition ?? null);
   const [cameraRotation, setCameraRotation] = useState8(
-    new THREE9.Euler(0, 0, 0)
+    new THREE13.Euler(0, 0, 0)
   );
   const baseDistance = useMemo9(() => {
     const [x, y, z21] = initialCameraPosition ?? [5, -5, 5];
@@ -30217,16 +30665,16 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo10(() => new THREE10.Scene(), []);
+    const scene = useMemo10(() => new THREE14.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef4(new THREE10.Object3D());
+    const rootObject = useRef4(new THREE14.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
     useEffect12(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
-      const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
+      const renderer = new THREE14.WebGLRenderer({ antialias: true, alpha: true });
       configureRenderer(renderer);
       renderer.setSize(
         mountRef.current.clientWidth,
@@ -30235,7 +30683,7 @@ var Canvas = forwardRef(
       renderer.setPixelRatio(window.devicePixelRatio);
       mountRef.current.appendChild(renderer.domElement);
       const aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-      const camera = cameraType === "perspective" ? new THREE10.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE10.OrthographicCamera(
+      const camera = cameraType === "perspective" ? new THREE14.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE14.OrthographicCamera(
         -10 * aspect,
         10 * aspect,
         10,
@@ -30272,7 +30720,7 @@ var Canvas = forwardRef(
       });
       onCreatedRef.current?.({ camera, renderer });
       let animationFrameId;
-      const clock = new THREE10.Clock();
+      const clock = new THREE14.Clock();
       const animate = () => {
         const time = clock.getElapsedTime();
         const delta = clock.getDelta();
@@ -30284,9 +30732,9 @@ var Canvas = forwardRef(
       const handleResize = () => {
         if (mountRef.current) {
           const newAspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-          if (camera instanceof THREE10.PerspectiveCamera) {
+          if (camera instanceof THREE14.PerspectiveCamera) {
             camera.aspect = newAspect;
-          } else if (camera instanceof THREE10.OrthographicCamera) {
+          } else if (camera instanceof THREE14.OrthographicCamera) {
             camera.left = -10 * newAspect;
             camera.right = 10 * newAspect;
             camera.top = 10;
@@ -30324,7 +30772,7 @@ var Canvas = forwardRef(
 // src/react-three/OrbitControls.tsx
 import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
-import * as THREE11 from "three";
+import * as THREE15 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -30368,9 +30816,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE11.MOUSE.ROTATE,
+      LEFT: THREE15.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE11.MOUSE.PAN,
+      MIDDLE: THREE15.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -30411,7 +30859,7 @@ var OrbitControls = ({
 // src/react-three/Grid.tsx
 import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
-import * as THREE12 from "three";
+import * as THREE16 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -30457,24 +30905,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size4 = 1e3;
   const gridMesh = useMemo12(() => {
-    const geometry = new THREE12.PlaneGeometry(size4, size4);
+    const geometry = new THREE16.PlaneGeometry(size4, size4);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE12.ShaderMaterial({
+    const material = new THREE16.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE12.Color(15658734) },
-        sectionColor: { value: new THREE12.Color(13421823) },
+        gridColor: { value: new THREE16.Color(15658734) },
+        sectionColor: { value: new THREE16.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE12.DoubleSide
+      side: THREE16.DoubleSide
     });
-    const mesh = new THREE12.Mesh(geometry, material);
+    const mesh = new THREE16.Mesh(geometry, material);
     if (rotation) {
       mesh.rotation.fromArray(rotation);
     }
@@ -30503,15 +30951,15 @@ var Grid = ({
 // src/react-three/Lights.tsx
 import { useEffect as useEffect15, useMemo as useMemo13 } from "react";
-import * as THREE13 from "three";
+import * as THREE17 from "three";
 var Lights = () => {
   const { scene } = useThree();
   const ambientLight = useMemo13(
-    () => new THREE13.AmbientLight(16777215, Math.PI / 2),
+    () => new THREE17.AmbientLight(16777215, Math.PI / 2),
     []
   );
   const pointLight = useMemo13(() => {
-    const light = new THREE13.PointLight(16777215, Math.PI / 4);
+    const light = new THREE17.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
@@ -30530,7 +30978,7 @@ var Lights = () => {
 // src/hooks/cameraAnimation.ts
 import { useCallback as useCallback6, useEffect as useEffect16, useRef as useRef5 } from "react";
-import * as THREE14 from "three";
+import * as THREE18 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
   const {
@@ -30541,24 +30989,24 @@ var CameraAnimatorWithContext = () => {
     getPresetConfig
   } = useCameraController();
   const animationRef = useRef5(null);
-  const tempQuaternion = useRef5(new THREE14.Quaternion());
-  const tempTarget = useRef5(new THREE14.Vector3());
-  const tempUp = useRef5(new THREE14.Vector3());
-  const tempRoll = useRef5(new THREE14.Quaternion());
-  const tempRollTarget = useRef5(new THREE14.Quaternion());
-  const baseOrientationHelper = useRef5(new THREE14.Object3D());
-  const orientationHelper = useRef5(new THREE14.Object3D());
+  const tempQuaternion = useRef5(new THREE18.Quaternion());
+  const tempTarget = useRef5(new THREE18.Vector3());
+  const tempUp = useRef5(new THREE18.Vector3());
+  const tempRoll = useRef5(new THREE18.Quaternion());
+  const tempRollTarget = useRef5(new THREE18.Quaternion());
+  const baseOrientationHelper = useRef5(new THREE18.Object3D());
+  const orientationHelper = useRef5(new THREE18.Object3D());
   const animateTo = useCallback6(
     ({ position, target, up, durationMs = 600 }) => {
       if (!mainCameraRef.current) return;
       const currentTarget = controlsRef.current?.target ?? defaultTarget;
-      const toPosition = new THREE14.Vector3(
+      const toPosition = new THREE18.Vector3(
         position[0],
         position[1],
         position[2]
       );
-      const resolvedTarget = target ? new THREE14.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
-      const resolvedUp = new THREE14.Vector3(...up ?? [0, 0, 1]).normalize();
+      const resolvedTarget = target ? new THREE18.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
+      const resolvedUp = new THREE18.Vector3(...up ?? [0, 0, 1]).normalize();
       const toOrientationHelper = orientationHelper.current;
       toOrientationHelper.position.copy(toPosition);
       toOrientationHelper.up.copy(resolvedUp);
@@ -30715,14 +31163,14 @@ var useCameraSession = () => {
 // src/three-components/OrientationCubeCanvas.tsx
 import { useEffect as useEffect17, useRef as useRef7 } from "react";
-import * as THREE15 from "three";
+import * as THREE19 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance5) {
-  const quaternion = new THREE15.Quaternion().setFromEuler(
-    new THREE15.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE19.Quaternion().setFromEuler(
+    new THREE19.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE15.Vector3(0, 0, 1);
+  const forwardVector = new THREE19.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -30740,7 +31188,7 @@ var OrientationCubeCanvas = () => {
     const canvas = document.createElement("canvas");
     canvasRef.current = canvas;
     containerRef.current.appendChild(canvas);
-    const renderer = new THREE15.WebGLRenderer({
+    const renderer = new THREE19.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
@@ -30748,26 +31196,26 @@ var OrientationCubeCanvas = () => {
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
     rendererRef.current = renderer;
-    const scene = new THREE15.Scene();
+    const scene = new THREE19.Scene();
     sceneRef.current = scene;
-    const camera = new THREE15.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const camera = new THREE19.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
     cameraRef.current = camera;
-    const ambientLight = new THREE15.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE19.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE15.Group();
+    const group = new THREE19.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE15.Mesh(
-      new THREE15.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE15.MeshStandardMaterial({ color: "white" })
+    const box = new THREE19.Mesh(
+      new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE19.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE15.LineSegments(
-      new THREE15.EdgesGeometry(
-        new THREE15.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE19.LineSegments(
+      new THREE19.EdgesGeometry(
+        new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE15.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE19.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -30821,7 +31269,7 @@ var OrientationCubeCanvas = () => {
     const animate = () => {
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE15.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE19.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -30925,7 +31373,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE16.Vector3(0, 0, 1) },
+          scene: { up: new THREE20.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -32520,7 +32968,7 @@ var Text = ({
 };
 // src/three-components/Error3d.tsx
-import * as THREE17 from "three";
+import * as THREE21 from "three";
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -32554,7 +33002,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component]);
   const group = useMemo17(() => {
-    const g = new THREE17.Group();
+    const g = new THREE21.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -32614,9 +33062,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo17(() => {
-    const m = new THREE17.Mesh(
-      new THREE17.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE17.MeshStandardMaterial({
+    const m = new THREE21.Mesh(
+      new THREE21.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE21.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -32638,7 +33086,7 @@ var ErrorBox = ({ parent }) => {
 // src/three-components/STLModel.tsx
 import { useState as useState14, useEffect as useEffect23, useMemo as useMemo18 } from "react";
-import * as THREE18 from "three";
+import * as THREE22 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -32671,15 +33119,15 @@ function STLModel({
   const mesh = useMemo18(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE18.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE18.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE22.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE22.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity,
       polygonOffset: isBoardLayer,
       polygonOffsetFactor: isBoardLayer ? 6 : 0,
       polygonOffsetUnits: isBoardLayer ? 6 : 0
     });
-    const createdMesh = new THREE18.Mesh(geom, material);
+    const createdMesh = new THREE22.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     return createdMesh;
   }, [geom, color, opacity, layerType]);
@@ -32739,7 +33187,7 @@ import { su as su8 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
 // src/textures/create-combined-board-textures.ts
-import * as THREE29 from "three";
+import * as THREE33 from "three";
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -32794,7 +33242,7 @@ function calculateOutlineBounds(boardData) {
 // src/utils/pad-texture.ts
 import { su as su5 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-import * as THREE19 from "three";
+import * as THREE23 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -32867,10 +33315,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE19.CanvasTexture(canvas);
+  const texture = new THREE23.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE19.LinearMipmapLinearFilter;
-  texture.magFilter = THREE19.LinearFilter;
+  texture.minFilter = THREE23.LinearMipmapLinearFilter;
+  texture.magFilter = THREE23.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -32878,7 +33326,7 @@ function createPadTextureForLayer({
 // src/utils/panel-outline-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
-import * as THREE20 from "three";
+import * as THREE24 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -32946,17 +33394,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE20.CanvasTexture(canvas);
+  const texture = new THREE24.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE20.LinearMipmapLinearFilter;
-  texture.magFilter = THREE20.LinearFilter;
+  texture.minFilter = THREE24.LinearMipmapLinearFilter;
+  texture.magFilter = THREE24.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/utils/trace-texture.ts
-import * as THREE21 from "three";
+import * as THREE25 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su7 } from "@tscircuit/circuit-json-util";
@@ -33073,17 +33521,17 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE21.CanvasTexture(canvas);
+  const texture = new THREE25.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE21.LinearMipmapLinearFilter;
-  texture.magFilter = THREE21.LinearFilter;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE22 from "three";
+import * as THREE26 from "three";
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
@@ -33194,17 +33642,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE22.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE22.LinearMipmapLinearFilter;
-  texture.magFilter = THREE22.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-copper-pour-texture-for-layer.ts
-import * as THREE23 from "three";
+import * as THREE27 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
@@ -33311,17 +33759,17 @@ function createCopperPourTextureForLayer({
   );
   setColorAndDraw(coveredPours, coveredColor);
   setColorAndDraw(uncoveredPours, uncoveredColor);
-  const texture = new THREE23.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE23.LinearMipmapLinearFilter;
-  texture.magFilter = THREE23.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE24 from "three";
+import * as THREE28 from "three";
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -33548,17 +33996,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE28.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE28.LinearMipmapLinearFilter;
+  texture.magFilter = THREE28.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE25 from "three";
+import * as THREE29 from "three";
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -33709,17 +34157,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE29.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE26 from "three";
+import * as THREE30 from "three";
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -33828,17 +34276,17 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE27 from "three";
+import * as THREE31 from "three";
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -33970,17 +34418,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE28 from "three";
+import * as THREE32 from "three";
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -34073,10 +34521,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE28.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE28.LinearMipmapLinearFilter;
-  texture.magFilter = THREE28.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -34114,10 +34562,10 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   });
-  const combinedTexture = new THREE29.CanvasTexture(canvas);
+  const combinedTexture = new THREE33.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE29.LinearFilter;
-  combinedTexture.magFilter = THREE29.LinearFilter;
+  combinedTexture.minFilter = THREE33.LinearFilter;
+  combinedTexture.magFilter = THREE33.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -34229,7 +34677,7 @@ function createCombinedBoardTextures({
 }
 // src/textures/create-three-texture-meshes.ts
-import * as THREE30 from "three";
+import * as THREE34 from "three";
 function createTexturePlane(config, boardData) {
   const {
     texture,
@@ -34241,15 +34689,15 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE30.PlaneGeometry(
+  const planeGeom = new THREE34.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  const material = new THREE30.MeshBasicMaterial({
+  const material = new THREE34.MeshBasicMaterial({
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE30.FrontSide,
+    side: THREE34.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -34257,7 +34705,7 @@ function createTexturePlane(config, boardData) {
     polygonOffsetUnits: usePolygonOffset ? -4 : 0,
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   });
-  const mesh = new THREE30.Mesh(planeGeom, material);
+  const mesh = new THREE34.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -34302,7 +34750,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE31 from "three";
+import * as THREE35 from "three";
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -34398,7 +34846,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE31.Texture) {
+        if (texture && texture instanceof THREE35.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -34408,22 +34856,22 @@ function JscadBoardTextures({
     const createTexturePlane2 = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = true, renderOrder = 1) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE31.PlaneGeometry(
+      const planeGeom = new THREE35.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      const material = new THREE31.MeshBasicMaterial({
+      const material = new THREE35.MeshBasicMaterial({
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE31.FrontSide,
+        side: THREE35.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
         polygonOffsetUnits: usePolygonOffset ? -4 : 0,
         opacity: isFaux ? FAUX_BOARD_OPACITY : 1
       });
-      const mesh = new THREE31.Mesh(planeGeom, material);
+      const mesh = new THREE35.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -34468,7 +34916,7 @@ function JscadBoardTextures({
         mesh.geometry.dispose();
         if (Array.isArray(mesh.material)) {
           mesh.material.forEach((material) => disposeTextureMaterial(material));
-        } else if (mesh.material instanceof THREE31.Material) {
+        } else if (mesh.material instanceof THREE35.Material) {
           disposeTextureMaterial(mesh.material);
         }
       });
@@ -34701,12 +35149,12 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect26, useMemo as useMemo22, useState as useState16 } from "react";
-import * as THREE38 from "three";
+import * as THREE42 from "three";
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef9, useState as useState15 } from "react";
-import * as THREE35 from "three";
+import * as THREE39 from "three";
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -35048,17 +35496,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 // src/utils/manifold/process-plated-holes.ts
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE33 from "three";
+import * as THREE37 from "three";
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE32 from "three";
+import * as THREE36 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE32.BufferGeometry();
+  const geometry = new THREE36.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE32.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE36.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE32.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE36.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
   if (manifoldMesh.runIndex && manifoldMesh.runIndex.length > 1 && manifoldMesh.runOriginalID) {
     for (let i = 0; i < manifoldMesh.runIndex.length - 1; i++) {
       const start = manifoldMesh.runIndex[i];
@@ -35092,7 +35540,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE33.Color(...colors.copper);
+var COPPER_COLOR = new THREE37.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -35723,7 +36171,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE34 from "three";
+import * as THREE38 from "three";
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -35761,7 +36209,7 @@ function createViaCopper2({
 }
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE34.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE38.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -35981,7 +36429,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE35.Color(
+              color: new THREE39.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -36011,7 +36459,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE35.Color(
+          color: new THREE39.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -36056,11 +36504,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE37 from "three";
+import * as THREE41 from "three";
 // src/utils/create-board-material.ts
-import * as THREE36 from "three";
-var DEFAULT_SIDE = THREE36.DoubleSide;
+import * as THREE40 from "three";
+var DEFAULT_SIDE = THREE40.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -36068,7 +36516,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE36.MeshPhysicalMaterial({
+    return new THREE40.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -36085,7 +36533,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE36.MeshStandardMaterial({
+  return new THREE40.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -36104,12 +36552,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE37.Mesh(
+    const mesh = new THREE41.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE37.DoubleSide,
+        side: THREE41.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -36119,11 +36567,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE37.Mesh(
+        const mesh = new THREE41.Mesh(
           comp.geometry,
-          new THREE37.MeshStandardMaterial({
+          new THREE41.MeshStandardMaterial({
             color: comp.color,
-            side: THREE37.DoubleSide,
+            side: THREE41.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -36167,7 +36615,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE38.Texture) {
+        if (texture && texture instanceof THREE42.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -41941,7 +42389,7 @@ var Root32 = Menu;
 var Anchor2 = MenuAnchor;
 var Portal2 = MenuPortal;
 var Content2 = MenuContent;
-var Group5 = MenuGroup;
+var Group6 = MenuGroup;
 var Label = MenuLabel;
 var Item2 = MenuItem;
 var CheckboxItem = MenuCheckboxItem;
@@ -42087,7 +42535,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Group5, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx33(Group6, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -43109,7 +43557,7 @@ var KeyboardShortcutsDialog = ({
 // src/CadViewer.tsx
 import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE39.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE43.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState36("manifold");
@@ -43376,11 +43824,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE43 from "three";
+import * as THREE47 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE40 from "three";
+import * as THREE44 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -43394,12 +43842,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE40.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE40.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE40.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE40.Vector3().crossVectors(
-        new THREE40.Vector3().subVectors(v2, v1),
-        new THREE40.Vector3().subVectors(v3, v1)
+      const v1 = new THREE44.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE44.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE44.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE44.Vector3().crossVectors(
+        new THREE44.Vector3().subVectors(v2, v1),
+        new THREE44.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -43423,10 +43871,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE42 from "three";
+import * as THREE46 from "three";
 // src/utils/load-model.ts
-import * as THREE41 from "three";
+import * as THREE45 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -43434,12 +43882,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE41.MeshStandardMaterial({
+    const material = new THREE45.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE41.Mesh(geometry, material);
+    return new THREE45.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -43472,9 +43920,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE42.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -43488,13 +43936,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE42.MeshStandardMaterial({
+      const material2 = new THREE46.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE42.DoubleSide
+        side: THREE46.DoubleSide
       });
-      const mesh2 = new THREE42.Mesh(threeGeom, material2);
+      const mesh2 = new THREE46.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -43504,9 +43952,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE42.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -43523,17 +43971,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE42.Color(geomInfo.color);
+      const color = new THREE46.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE42.MeshStandardMaterial({
+      const material2 = new THREE46.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE42.DoubleSide
+        side: THREE46.DoubleSide
       });
-      const mesh2 = new THREE42.Mesh(threeGeom, material2);
+      const mesh2 = new THREE46.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -43543,22 +43991,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE42.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE42.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE42.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE42.MeshStandardMaterial({
+  const geometry = new THREE46.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE46.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE42.Mesh(geometry, material);
+  const mesh = new THREE46.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -43579,11 +44027,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE43.Scene();
+  const scene = new THREE47.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE43.Color(backgroundColor), 1);
-  const camera = new THREE43.OrthographicCamera();
+  renderer.setClearColor(new THREE47.Color(backgroundColor), 1);
+  const camera = new THREE47.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -43597,11 +44045,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE43.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE47.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE43.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE47.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE43.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE47.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -43612,7 +44060,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE43.Color(
+    const baseColor = new THREE47.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -43624,28 +44072,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE43.DoubleSide
+        side: THREE47.DoubleSide
       });
-      const mesh = new THREE43.Mesh(geometry, material);
+      const mesh = new THREE47.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE43.Color(8947848);
-  const gridHelper = new THREE43.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE47.Color(8947848);
+  const gridHelper = new THREE47.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE43.LineBasicMaterial) {
+    if (mat instanceof THREE47.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE43.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE43.Vector3());
-  const size4 = box.getSize(new THREE43.Vector3());
+  const box = new THREE47.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE47.Vector3());
+  const size4 = box.getSize(new THREE47.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {