@tscircuit/3d-viewer 0.0.619 → 0.0.621

package/dist/index.js

@@ -18980,7 +18980,7 @@ var useHiddenCadComponents = (circuitKey) => {
 
 // src/CadViewer.tsx
 import { useCallback as useCallback24, useContext as useContext11, useEffect as useEffect51, useRef as useRef29, useState as useState42 } from "react";
-import * as THREE55 from "three";
+import * as THREE56 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
@@ -20946,12 +20946,12 @@ var AnyCadComponent = ({
 
 // src/CadViewerContainer.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo17, useState as useState13 } from "react";
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.618",
+  version: "0.0.620",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -21879,8 +21879,36 @@ var Lights = ({
 
 // src/react-three/OrbitControls.tsx
 import { useEffect as useEffect18, useMemo as useMemo15 } from "react";
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+// src/react-three/infinite-dolly.ts
+import * as THREE21 from "three";
+var MINIMUM_DOLLY_DISTANCE_RATIO = 0.05;
+var getMinimumDollyDistance = ({
+  camera,
+  initialOrbitDistance
+}) => {
+  const scaledInitialOrbitDistance = Number.isFinite(initialOrbitDistance) ? initialOrbitDistance * MINIMUM_DOLLY_DISTANCE_RATIO : 0;
+  return Math.max(scaledInitialOrbitDistance, camera.near, Number.EPSILON);
+};
+var applyInfiniteDolly = ({
+  camera,
+  controls,
+  minimumDollyDistance
+}) => {
+  if (!(camera instanceof THREE21.PerspectiveCamera)) return false;
+  const orbitDistance = controls.getDistance();
+  if (Number.isFinite(orbitDistance) && orbitDistance >= minimumDollyDistance) {
+    return false;
+  }
+  const viewDirection = new THREE21.Vector3();
+  camera.getWorldDirection(viewDirection);
+  controls.target.copy(camera.position).addScaledVector(viewDirection, minimumDollyDistance);
+  return true;
+};
+
+// src/react-three/OrbitControls.tsx
 var OrbitControls = ({
   autoRotate,
   autoRotateSpeed,
@@ -21898,6 +21926,17 @@ var OrbitControls = ({
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
+  const minimumDollyDistance = useMemo15(() => {
+    if (!controls || !(camera instanceof THREE22.PerspectiveCamera)) {
+      return Number.EPSILON;
+    }
+    const initialOrbitDistance = target ? Math.hypot(
+      camera.position.x - target[0],
+      camera.position.y - target[1],
+      camera.position.z - target[2]
+    ) : controls.getDistance();
+    return getMinimumDollyDistance({ camera, initialOrbitDistance });
+  }, [camera, controls, target]);
   useEffect18(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
@@ -21923,9 +21962,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE21.MOUSE.ROTATE,
+      LEFT: THREE22.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE21.MOUSE.PAN,
+      MIDDLE: THREE22.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -21959,8 +21998,10 @@ var OrbitControls = ({
     };
   }, [controls]);
   useFrame(() => {
-    controls?.update();
-  }, [controls]);
+    if (!controls) return;
+    applyInfiniteDolly({ camera, controls, minimumDollyDistance });
+    controls.update();
+  }, [camera, controls, minimumDollyDistance]);
   return null;
 };
 
@@ -22047,14 +22088,14 @@ var getComparisonBounds = (type, boardDimensions, boardCenter) => {
 
 // src/three-components/OrientationCubeCanvas.tsx
 import { useEffect as useEffect19, useRef as useRef7 } from "react";
-import * as THREE22 from "three";
+import * as THREE23 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance5) {
-  const quaternion = new THREE22.Quaternion().setFromEuler(
-    new THREE22.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE23.Quaternion().setFromEuler(
+    new THREE23.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE22.Vector3(0, 0, 1);
+  const forwardVector = new THREE23.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -22067,31 +22108,31 @@ var OrientationCubeCanvas = () => {
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
     container.appendChild(canvas);
-    const renderer = new THREE22.WebGLRenderer({
+    const renderer = new THREE23.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
     });
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
-    const scene = new THREE22.Scene();
-    const camera = new THREE22.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const scene = new THREE23.Scene();
+    const camera = new THREE23.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
-    const ambientLight = new THREE22.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE23.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE22.Group();
+    const group = new THREE23.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE22.Mesh(
-      new THREE22.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE22.MeshStandardMaterial({ color: "white" })
+    const box = new THREE23.Mesh(
+      new THREE23.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE23.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE22.LineSegments(
-      new THREE22.EdgesGeometry(
-        new THREE22.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE23.LineSegments(
+      new THREE23.EdgesGeometry(
+        new THREE23.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE22.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE23.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -22153,7 +22194,7 @@ var OrientationCubeCanvas = () => {
       if (!isVisible) return;
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE22.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE23.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -22205,12 +22246,12 @@ var OrientationCubeCanvas = () => {
 import { useEffect as useEffect20, useMemo as useMemo16 } from "react";
 
 // src/reference-objects/create-reference-object.ts
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 var createRoundedRectangleShape = (width, height, radius) => {
   const halfWidth = width / 2;
   const halfHeight = height / 2;
   const safeRadius = Math.min(radius, halfWidth, halfHeight);
-  const shape = new THREE23.Shape();
+  const shape = new THREE24.Shape();
   shape.moveTo(-halfWidth + safeRadius, -halfHeight);
   shape.lineTo(halfWidth - safeRadius, -halfHeight);
   shape.quadraticCurveTo(
@@ -22249,7 +22290,7 @@ var createRoundedPrismGeometry = (width, height, depth, radius) => {
   );
 };
 var createPrismGeometryFromShape = (shape, depth) => {
-  const geometry = new THREE23.ExtrudeGeometry(shape, {
+  const geometry = new THREE24.ExtrudeGeometry(shape, {
     depth,
     bevelEnabled: false,
     curveSegments: 24
@@ -22261,16 +22302,16 @@ var createPrismGeometryFromShape = (shape, depth) => {
 var normalizeObjectToSpec = (object, type) => {
   const spec = REFERENCE_OBJECT_SPECS[type];
   object.updateMatrixWorld(true);
-  const initialBounds = new THREE23.Box3().setFromObject(object);
-  const initialSize = initialBounds.getSize(new THREE23.Vector3());
+  const initialBounds = new THREE24.Box3().setFromObject(object);
+  const initialSize = initialBounds.getSize(new THREE24.Vector3());
   object.scale.set(
     spec.width / initialSize.x,
     spec.height / initialSize.y,
     spec.depth / initialSize.z
   );
   object.updateMatrixWorld(true);
-  const scaledBounds = new THREE23.Box3().setFromObject(object);
-  const scaledCenter = scaledBounds.getCenter(new THREE23.Vector3());
+  const scaledBounds = new THREE24.Box3().setFromObject(object);
+  const scaledCenter = scaledBounds.getCenter(new THREE24.Vector3());
   object.position.set(
     -scaledCenter.x,
     -scaledCenter.y,
@@ -22279,15 +22320,15 @@ var normalizeObjectToSpec = (object, type) => {
   object.updateMatrixWorld(true);
 };
 var createBananaGeometry = () => {
-  const curve = new THREE23.CatmullRomCurve3([
-    new THREE23.Vector3(-82, 18, 16),
-    new THREE23.Vector3(-67, 7, 15),
-    new THREE23.Vector3(-43, -9, 14),
-    new THREE23.Vector3(-15, -18, 14),
-    new THREE23.Vector3(16, -18, 14),
-    new THREE23.Vector3(47, -8, 14.5),
-    new THREE23.Vector3(72, 8, 16),
-    new THREE23.Vector3(84, 19, 17)
+  const curve = new THREE24.CatmullRomCurve3([
+    new THREE24.Vector3(-82, 18, 16),
+    new THREE24.Vector3(-67, 7, 15),
+    new THREE24.Vector3(-43, -9, 14),
+    new THREE24.Vector3(-15, -18, 14),
+    new THREE24.Vector3(16, -18, 14),
+    new THREE24.Vector3(47, -8, 14.5),
+    new THREE24.Vector3(72, 8, 16),
+    new THREE24.Vector3(84, 19, 17)
   ]);
   const tubularSegments = 84;
   const radialSegments = 30;
@@ -22297,8 +22338,8 @@ var createBananaGeometry = () => {
   const colors2 = [];
   const uvs = [];
   const indices = [];
-  const ripeYellow = new THREE23.Color(16766023);
-  const stemGreen = new THREE23.Color(12038965);
+  const ripeYellow = new THREE24.Color(16766023);
+  const stemGreen = new THREE24.Color(12038965);
   for (let segment = 0; segment <= tubularSegments; segment++) {
     const t = segment / tubularSegments;
     const point = curve.getPointAt(t);
@@ -22313,7 +22354,7 @@ var createBananaGeometry = () => {
       const sin = Math.sin(angle3);
       const cos = Math.cos(angle3);
       const ridgeScale = 1 + Math.cos(angle3 * 5 + 0.35) * 0.035;
-      const radialNormal = new THREE23.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
+      const radialNormal = new THREE24.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
       const vertex = point.clone().addScaledVector(normal, cos * radius * ridgeScale).addScaledVector(binormal, sin * radius * 0.9 * ridgeScale);
       positions.push(vertex.x, vertex.y, vertex.z);
       normals.push(radialNormal.x, radialNormal.y, radialNormal.z);
@@ -22331,26 +22372,26 @@ var createBananaGeometry = () => {
       indices.push(a, d, b, b, d, c);
     }
   }
-  const geometry = new THREE23.BufferGeometry();
+  const geometry = new THREE24.BufferGeometry();
   geometry.setIndex(indices);
   geometry.setAttribute(
     "position",
-    new THREE23.Float32BufferAttribute(positions, 3)
+    new THREE24.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE23.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("color", new THREE23.Float32BufferAttribute(colors2, 3));
-  geometry.setAttribute("uv", new THREE23.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE24.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("color", new THREE24.Float32BufferAttribute(colors2, 3));
+  geometry.setAttribute("uv", new THREE24.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return { geometry, curve };
 };
 var createBanana = () => {
-  const group = new THREE23.Group();
-  const banana = new THREE23.Group();
+  const group = new THREE24.Group();
+  const banana = new THREE24.Group();
   const { geometry, curve } = createBananaGeometry();
-  const peel = new THREE23.Mesh(
+  const peel = new THREE24.Mesh(
     geometry,
-    new THREE23.MeshStandardMaterial({
+    new THREE24.MeshStandardMaterial({
       color: 16777215,
       roughness: 0.72,
       metalness: 0,
@@ -22359,9 +22400,9 @@ var createBanana = () => {
   );
   peel.name = "banana-peel";
   banana.add(peel);
-  const blossomTip = new THREE23.Mesh(
-    new THREE23.SphereGeometry(3.4, 20, 12),
-    new THREE23.MeshStandardMaterial({
+  const blossomTip = new THREE24.Mesh(
+    new THREE24.SphereGeometry(3.4, 20, 12),
+    new THREE24.MeshStandardMaterial({
       color: 6242844,
       roughness: 0.92
     })
@@ -22372,20 +22413,20 @@ var createBanana = () => {
   banana.add(blossomTip);
   const stemLength = 11;
   const stemTangent = curve.getTangentAt(1).normalize();
-  const stem = new THREE23.Mesh(
-    new THREE23.CylinderGeometry(2.5, 4.1, stemLength, 18),
-    new THREE23.MeshStandardMaterial({
+  const stem = new THREE24.Mesh(
+    new THREE24.CylinderGeometry(2.5, 4.1, stemLength, 18),
+    new THREE24.MeshStandardMaterial({
       color: 8483625,
       roughness: 0.82
     })
   );
-  stem.quaternion.setFromUnitVectors(new THREE23.Vector3(0, 1, 0), stemTangent);
+  stem.quaternion.setFromUnitVectors(new THREE24.Vector3(0, 1, 0), stemTangent);
   stem.position.copy(curve.getPointAt(1)).addScaledVector(stemTangent, stemLength / 2);
   stem.name = "banana-stem";
   banana.add(stem);
-  const stemTip = new THREE23.Mesh(
-    new THREE23.SphereGeometry(2.55, 18, 10),
-    new THREE23.MeshStandardMaterial({
+  const stemTip = new THREE24.Mesh(
+    new THREE24.SphereGeometry(2.55, 18, 10),
+    new THREE24.MeshStandardMaterial({
       color: 5981470,
       roughness: 0.9
     })
@@ -22399,7 +22440,7 @@ var createBanana = () => {
 };
 var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
   const lidShape = createRoundedRectangleShape(width, height, radius);
-  const indent = new THREE23.Path();
+  const indent = new THREE24.Path();
   indent.absarc(0, 0, indentRadius, 0, Math.PI * 2, true);
   lidShape.holes.push(indent);
   return createPrismGeometryFromShape(lidShape, depth);
@@ -22407,9 +22448,9 @@ var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
 var createMacbookIndent = (topZ, radius) => {
   const indentDepth = 0.35;
   const diskDepth = 0.25;
-  const disk = new THREE23.Mesh(
-    new THREE23.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
-    new THREE23.MeshStandardMaterial({
+  const disk = new THREE24.Mesh(
+    new THREE24.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
+    new THREE24.MeshStandardMaterial({
       color: 10199202,
       roughness: 0.48,
       metalness: 0.28
@@ -22422,10 +22463,10 @@ var createMacbookIndent = (topZ, radius) => {
 };
 var createCreditCard = () => {
   const spec = REFERENCE_OBJECT_SPECS["credit-card"];
-  const group = new THREE23.Group();
-  const body = new THREE23.Mesh(
+  const group = new THREE24.Group();
+  const body = new THREE24.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, spec.depth, 3.18),
-    new THREE23.MeshStandardMaterial({
+    new THREE24.MeshStandardMaterial({
       color: 2383272,
       roughness: 0.38,
       metalness: 0.08
@@ -22434,9 +22475,9 @@ var createCreditCard = () => {
   body.name = "credit-card-body";
   group.add(body);
   const surfaceZ = spec.depth / 2 + 0.08;
-  const chip = new THREE23.Mesh(
+  const chip = new THREE24.Mesh(
     createRoundedPrismGeometry(12, 9, 0.14, 1.2),
-    new THREE23.MeshStandardMaterial({
+    new THREE24.MeshStandardMaterial({
       color: 14003525,
       roughness: 0.3,
       metalness: 0.62
@@ -22445,14 +22486,14 @@ var createCreditCard = () => {
   chip.position.set(-21, 3, surfaceZ);
   chip.name = "credit-card-chip";
   group.add(chip);
-  const stripeMaterial = new THREE23.MeshStandardMaterial({
+  const stripeMaterial = new THREE24.MeshStandardMaterial({
     color: 15331061,
     roughness: 0.45,
     metalness: 0.05
   });
   for (let index2 = 0; index2 < 4; index2++) {
-    const stripe = new THREE23.Mesh(
-      new THREE23.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
+    const stripe = new THREE24.Mesh(
+      new THREE24.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
       stripeMaterial
     );
     stripe.position.set(-20 + index2 * 14, -14, surfaceZ + 0.08);
@@ -22463,13 +22504,13 @@ var createCreditCard = () => {
 };
 var createMacbook = () => {
   const spec = REFERENCE_OBJECT_SPECS["14in-macbook"];
-  const group = new THREE23.Group();
-  const aluminumMaterial = new THREE23.MeshStandardMaterial({
+  const group = new THREE24.Group();
+  const aluminumMaterial = new THREE24.MeshStandardMaterial({
     color: 12896201,
     roughness: 0.3,
     metalness: 0.38
   });
-  const body = new THREE23.Mesh(
+  const body = new THREE24.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, 13.5, 9),
     aluminumMaterial
   );
@@ -22480,7 +22521,7 @@ var createMacbook = () => {
   const lidCenterZ = 6.75;
   const lidTopZ = lidCenterZ + lidDepth / 2;
   const indentRadius = 12;
-  const lid = new THREE23.Mesh(
+  const lid = new THREE24.Mesh(
     createMacbookLidGeometry(
       spec.width - 1.8,
       spec.height - 1.8,
@@ -22493,9 +22534,9 @@ var createMacbook = () => {
   lid.position.z = lidCenterZ;
   lid.name = "macbook-lid";
   group.add(lid);
-  const hinge = new THREE23.Mesh(
-    new THREE23.BoxGeometry(spec.width - 42, 3.2, 1.2),
-    new THREE23.MeshStandardMaterial({
+  const hinge = new THREE24.Mesh(
+    new THREE24.BoxGeometry(spec.width - 42, 3.2, 1.2),
+    new THREE24.MeshStandardMaterial({
       color: 3158838,
       roughness: 0.55,
       metalness: 0.45
@@ -22505,9 +22546,9 @@ var createMacbook = () => {
   hinge.name = "macbook-hinge";
   group.add(hinge);
   group.add(createMacbookIndent(lidTopZ, indentRadius));
-  const frontNotch = new THREE23.Mesh(
-    new THREE23.BoxGeometry(54, 1.2, 0.8),
-    new THREE23.MeshStandardMaterial({
+  const frontNotch = new THREE24.Mesh(
+    new THREE24.BoxGeometry(54, 1.2, 0.8),
+    new THREE24.MeshStandardMaterial({
       color: 6712174,
       roughness: 0.45,
       metalness: 0.5
@@ -22530,7 +22571,7 @@ var disposeReferenceObject = (object) => {
   const geometries = /* @__PURE__ */ new Set();
   const materials = /* @__PURE__ */ new Set();
   object.traverse((child) => {
-    if (!(child instanceof THREE23.Mesh)) return;
+    if (!(child instanceof THREE24.Mesh)) return;
     geometries.add(child.geometry);
     const childMaterials = Array.isArray(child.material) ? child.material : [child.material];
     for (const material of childMaterials) materials.add(material);
@@ -22540,28 +22581,28 @@ var disposeReferenceObject = (object) => {
 };
 
 // src/reference-objects/fit-camera-to-bounds.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 var fitCameraToBounds = (camera, controls, bounds, padding = 1.18) => {
   const width = Math.max(bounds.maxX - bounds.minX, 0);
   const height = Math.max(bounds.maxY - bounds.minY, 0);
   const depth = Math.max(bounds.maxZ - bounds.minZ, 0);
-  const center = new THREE24.Vector3(
+  const center = new THREE25.Vector3(
     (bounds.minX + bounds.maxX) / 2,
     (bounds.minY + bounds.maxY) / 2,
     (bounds.minZ + bounds.maxZ) / 2
   );
   const radius = Math.max(Math.hypot(width, height, depth) / 2, 1);
-  const previousTarget = controls?.target ?? new THREE24.Vector3();
-  const direction = new THREE24.Vector3(0, -0.75, 0.9).normalize();
+  const previousTarget = controls?.target ?? new THREE25.Vector3();
+  const direction = new THREE25.Vector3(0, -0.75, 0.9).normalize();
   let distance5 = Math.max(camera.position.distanceTo(previousTarget), 5);
-  if (camera instanceof THREE24.PerspectiveCamera) {
-    const verticalFov = THREE24.MathUtils.degToRad(camera.fov);
+  if (camera instanceof THREE25.PerspectiveCamera) {
+    const verticalFov = THREE25.MathUtils.degToRad(camera.fov);
     const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
     const limitingFov = Math.min(verticalFov, horizontalFov);
     distance5 = radius * padding / Math.sin(limitingFov / 2);
     camera.far = Math.max(camera.far, distance5 + radius * padding * 3);
     camera.updateProjectionMatrix();
-  } else if (camera instanceof THREE24.OrthographicCamera) {
+  } else if (camera instanceof THREE25.OrthographicCamera) {
     const halfViewWidth = Math.abs(camera.right - camera.left) / 2;
     const halfViewHeight = Math.abs(camera.top - camera.bottom) / 2;
     camera.zoom = Math.min(
@@ -22681,7 +22722,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE25.Vector3(0, 0, 1) },
+          scene: { up: new THREE26.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -22872,7 +22913,7 @@ var createBoardGeomWithOutline = (board, depth = 1.2, options = {}) => {
 };
 
 // src/utils/get-board-edge-color.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 
 // src/geoms/constants.ts
 var M = 0.01;
@@ -22905,7 +22946,7 @@ var soldermaskColors = {
 };
 
 // src/utils/soldermask-color.ts
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 var SOLDERMASK_PRESET_HEX = {
   red: "#650202",
   blue: "#003f7d",
@@ -22936,9 +22977,9 @@ var resolveSoldermaskColor = (requestedColor) => {
   }
   const presetName = lowercaseColor;
   const presetColor = SOLDERMASK_PRESET_HEX[presetName];
-  if (presetColor) return new THREE26.Color(presetColor);
-  const isCssColor = Object.hasOwn(THREE26.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
-  return isCssColor ? new THREE26.Color(lowercaseColor) : null;
+  if (presetColor) return new THREE27.Color(presetColor);
+  const isCssColor = Object.hasOwn(THREE27.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
+  return isCssColor ? new THREE27.Color(lowercaseColor) : null;
 };
 var resolveSoldermaskOpacity = (requestedColor) => {
   const presetName = requestedColor?.trim().toLowerCase();
@@ -22965,7 +23006,7 @@ var soldermaskColorToCss = (color) => {
 };
 
 // src/utils/get-board-edge-color.ts
-var LEGACY_FR4_EDGE_COLOR = new THREE27.Color(1063462);
+var LEGACY_FR4_EDGE_COLOR = new THREE28.Color(1063462);
 var getBoardEdgeColor = ({
   material,
   solder_mask_color
@@ -22974,7 +23015,7 @@ var getBoardEdgeColor = ({
   if (soldermaskColor) return soldermaskColor;
   if (material === "fr4") return LEGACY_FR4_EDGE_COLOR.clone();
   const materialColor = boardMaterialColors[material] ?? colors.fr4Tan;
-  return new THREE27.Color(materialColor[0], materialColor[1], materialColor[2]);
+  return new THREE28.Color(materialColor[0], materialColor[1], materialColor[2]);
 };
 
 // src/soup-to-3d/index.ts
@@ -24379,7 +24420,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -24413,7 +24454,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component]);
   const group = useMemo19(() => {
-    const g = new THREE28.Group();
+    const g = new THREE29.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -24475,9 +24516,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo19(() => {
-    const m = new THREE28.Mesh(
-      new THREE28.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE28.MeshStandardMaterial({
+    const m = new THREE29.Mesh(
+      new THREE29.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE29.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -24502,7 +24543,7 @@ import { su as su9 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect26, useMemo as useMemo21 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE41 from "three";
+import * as THREE42 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -24557,7 +24598,7 @@ function calculateOutlineBounds(boardData) {
 // src/utils/pad-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -24637,10 +24678,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE29.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE29.LinearMipmapLinearFilter;
-  texture.magFilter = THREE29.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -24648,7 +24689,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su7 } from "@tscircuit/circuit-json-util";
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -24716,17 +24757,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
@@ -24812,10 +24853,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -24823,7 +24864,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -24947,17 +24988,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
@@ -25072,17 +25113,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -25281,7 +25322,7 @@ var getSoldermaskRenderBounds = (circuitJson, boardData) => {
 var isFabricationNoteElement = (element, layer) => {
   if (!("layer" in element) || element.layer !== layer) return false;
   const elementType = element.type;
-  return elementType.startsWith("pcb_fabrication_note_") && elementType !== "pcb_fabrication_note_text";
+  return elementType.startsWith("pcb_fabrication_note_") && elementType !== "pcb_fabrication_note_text" && elementType !== "pcb_fabrication_note_dimension";
 };
 function createFabricationNoteTextureForLayer({
   layer,
@@ -25312,17 +25353,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE34.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE34.LinearMipmapLinearFilter;
-  texture.magFilter = THREE34.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -25397,17 +25438,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE35.CanvasTexture(canvas);
+  const texture = new THREE36.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE35.LinearMipmapLinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
+  texture.minFilter = THREE36.LinearMipmapLinearFilter;
+  texture.magFilter = THREE36.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -25561,17 +25602,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE36.CanvasTexture(canvas);
+  const texture = new THREE37.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE36.LinearMipmapLinearFilter;
-  texture.magFilter = THREE36.LinearFilter;
+  texture.minFilter = THREE37.LinearMipmapLinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -25722,21 +25763,21 @@ function createSilkscreenTextureForLayer({
     silkscreenColor,
     soldermaskVisible
   });
-  const texture = new THREE37.CanvasTexture(canvas);
+  const texture = new THREE38.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE37.LinearMipmapLinearFilter;
-  texture.magFilter = THREE37.LinearFilter;
+  texture.minFilter = THREE38.LinearMipmapLinearFilter;
+  texture.magFilter = THREE38.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE39 from "three";
+import * as THREE40 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -25759,11 +25800,11 @@ var getSoldermaskPalette = (boardData) => {
       transparent: "rgba(0,0,0,0)"
     };
   }
-  const copperColor = new THREE38.Color().setRGB(
+  const copperColor = new THREE39.Color().setRGB(
     colors.copper[0],
     colors.copper[1],
     colors.copper[2],
-    THREE38.SRGBColorSpace
+    THREE39.SRGBColorSpace
   );
   return {
     soldermask: soldermaskColorToCss(requestedSoldermaskColor),
@@ -25788,6 +25829,7 @@ var setDrawerBounds6 = (drawer, bounds) => {
     maxY: bounds.maxY
   });
 };
+var isPcbAnnotation = (element) => element.type.startsWith("pcb_note_") || element.type.startsWith("pcb_fabrication_note_");
 var drawSoldermaskLayer = ({
   ctx,
   layer,
@@ -25831,16 +25873,16 @@ var drawSoldermaskLayer = ({
     }
   });
   setDrawerBounds6(drawer, bounds);
-  const elementsWithoutKeepouts = elements.filter(
-    (element) => element.type !== "pcb_keepout"
+  const elementsWithoutAnnotationsOrKeepouts = elements.filter(
+    (element) => element.type !== "pcb_keepout" && !isPcbAnnotation(element)
   );
-  drawer.drawElements(elementsWithoutKeepouts, {
+  drawer.drawElements(elementsWithoutAnnotationsOrKeepouts, {
     layers: [copperRenderLayer],
     drawSoldermask: true,
     drawSoldermaskTop: layer === "top",
     drawSoldermaskBottom: layer === "bottom"
   });
-  const uncoveredPours = elementsWithoutKeepouts.filter(
+  const uncoveredPours = elementsWithoutAnnotationsOrKeepouts.filter(
     (e) => e.type === "pcb_copper_pour" && e.layer === layer && e.covered_with_solder_mask === false
   );
   if (uncoveredPours.length > 0) {
@@ -25897,17 +25939,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardData
   });
-  const texture = new THREE39.CanvasTexture(canvas);
+  const texture = new THREE40.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE39.LinearMipmapLinearFilter;
-  texture.magFilter = THREE39.LinearFilter;
+  texture.minFilter = THREE40.LinearMipmapLinearFilter;
+  texture.magFilter = THREE40.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE40 from "three";
+import * as THREE41 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
@@ -26002,10 +26044,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE40.CanvasTexture(canvas);
+  const texture = new THREE41.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE40.LinearMipmapLinearFilter;
-  texture.magFilter = THREE40.LinearFilter;
+  texture.minFilter = THREE41.LinearMipmapLinearFilter;
+  texture.magFilter = THREE41.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -26093,10 +26135,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE41.CanvasTexture(canvas);
+  const combinedTexture = new THREE42.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE41.LinearFilter;
-  combinedTexture.magFilter = THREE41.LinearFilter;
+  combinedTexture.minFilter = THREE42.LinearFilter;
+  combinedTexture.magFilter = THREE42.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -26132,11 +26174,11 @@ var createMaskedCopperMask = ({
     height
   );
   ctx.globalCompositeOperation = "source-over";
-  const maskTexture = new THREE41.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE41.NoColorSpace;
+  const maskTexture = new THREE42.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE42.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE41.LinearFilter;
-  maskTexture.magFilter = THREE41.LinearFilter;
+  maskTexture.minFilter = THREE42.LinearFilter;
+  maskTexture.magFilter = THREE42.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -26276,7 +26318,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE43 from "three";
+import * as THREE44 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -26299,7 +26341,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE42 from "three";
+import * as THREE43 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -26394,13 +26436,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   return PLAIN_SOLDERMASK_PROFILE;
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE42.CanvasTexture(canvas);
-  texture.colorSpace = THREE42.NoColorSpace;
+  const texture = new THREE43.CanvasTexture(canvas);
+  texture.colorSpace = THREE43.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE42.LinearFilter;
-  texture.magFilter = THREE42.LinearFilter;
-  texture.wrapS = THREE42.ClampToEdgeWrapping;
-  texture.wrapT = THREE42.ClampToEdgeWrapping;
+  texture.minFilter = THREE43.LinearFilter;
+  texture.magFilter = THREE43.LinearFilter;
+  texture.wrapS = THREE43.ClampToEdgeWrapping;
+  texture.wrapT = THREE43.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -26524,16 +26566,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE43.PlaneGeometry(
+  const planeGeom = new THREE44.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE43.SRGBColorSpace;
+  texture.colorSpace = THREE44.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE43.FrontSide,
+    side: THREE44.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -26542,12 +26584,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE43.MeshPhysicalMaterial({
+  const material = new THREE44.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE43.Vector2(
+    normalScale: new THREE44.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -26561,7 +26603,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE43.Mesh(planeGeom, material);
+  const mesh = new THREE44.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -26609,7 +26651,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE44 from "three";
+import * as THREE45 from "three";
 
 // src/hooks/useBoardTextureVisibility.ts
 import { useMemo as useMemo20 } from "react";
@@ -26747,7 +26789,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE44.Texture) {
+        if (texture && texture instanceof THREE45.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -26766,16 +26808,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE44.PlaneGeometry(
+      const planeGeom = new THREE45.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE44.SRGBColorSpace;
+      texture.colorSpace = THREE45.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE44.FrontSide,
+        side: THREE45.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -26786,12 +26828,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE44.MeshPhysicalMaterial({
+      const material = new THREE45.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE44.Vector2(
+        normalScale: new THREE45.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -26803,7 +26845,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE44.Mesh(planeGeom, material);
+      const mesh = new THREE45.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -26853,7 +26895,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE44.Material) {
+        } else if (mesh.material instanceof THREE45.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -26866,7 +26908,7 @@ function JscadBoardTextures({
 
 // src/three-components/STLModel.tsx
 import { useState as useState17, useEffect as useEffect27, useMemo as useMemo22 } from "react";
-import * as THREE45 from "three";
+import * as THREE46 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -26899,15 +26941,15 @@ function STLModel({
   const mesh = useMemo22(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE45.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE45.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE46.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE46.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 THREE45.Mesh(geom, material);
+    const createdMesh = new THREE46.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -26970,7 +27012,7 @@ function VisibleSTLModel({
 import { parseCableString } from "@tscircuit/cableprinter";
 import { createCableMeshes } from "jscad-electronics/cables";
 import { useEffect as useEffect28, useMemo as useMemo23 } from "react";
-import * as THREE46 from "three";
+import * as THREE47 from "three";
 var isCadCableElement = (element) => {
   if (!element || typeof element !== "object") return false;
   const candidate = element;
@@ -26987,14 +27029,14 @@ var getConnectorPin1Side = ({
   const endpoint = end === "start" ? path[0] : path[path.length - 1];
   const adjacent = end === "start" ? path[1] : path[path.length - 2];
   if (!endpoint || !adjacent) return void 0;
-  const cableAxis = new THREE46.Vector3(
+  const cableAxis = new THREE47.Vector3(
     adjacent.x - endpoint.x,
     adjacent.y - endpoint.y,
     adjacent.z - endpoint.z
   );
   if (cableAxis.lengthSq() < 1e-12) return void 0;
   cableAxis.normalize();
-  const pin1Side = new THREE46.Vector3(
+  const pin1Side = new THREE47.Vector3(
     pin1Position.x - endpoint.x,
     pin1Position.y - endpoint.y,
     pin1Position.z - endpoint.z
@@ -27020,28 +27062,28 @@ var createCadCableObject = (cable) => {
       end: "end"
     })
   });
-  const group = new THREE46.Group();
+  const group = new THREE47.Group();
   group.name = `cad-cable-${cable.cad_cable_id}`;
   group.userData = { cadCableId: cable.cad_cable_id, name: cable.name };
   for (const cableMesh of cableMeshes) {
-    let geometry = new THREE46.BufferGeometry();
+    let geometry = new THREE47.BufferGeometry();
     geometry.setAttribute(
       "position",
-      new THREE46.Float32BufferAttribute(cableMesh.positions, 3)
+      new THREE47.Float32BufferAttribute(cableMesh.positions, 3)
     );
     geometry.setIndex(cableMesh.indices);
     if (!cableMesh.smooth) geometry = geometry.toNonIndexed();
     geometry.computeVertexNormals();
     const [red, green, blue, alpha] = cableMesh.color;
-    const material = new THREE46.MeshStandardMaterial({
-      color: new THREE46.Color(red, green, blue),
+    const material = new THREE47.MeshStandardMaterial({
+      color: new THREE47.Color(red, green, blue),
       metalness: cableMesh.material?.metalness ?? 0,
       roughness: cableMesh.material?.roughness ?? 0.7,
       opacity: alpha,
       transparent: alpha < 1,
-      side: THREE46.DoubleSide
+      side: THREE47.DoubleSide
     });
-    const mesh = new THREE46.Mesh(geometry, material);
+    const mesh = new THREE47.Mesh(geometry, material);
     mesh.name = `${group.name}:${cableMesh.name}`;
     configureObjectShadows(mesh, { castShadow: true, receiveShadow: true });
     group.add(mesh);
@@ -27050,7 +27092,7 @@ var createCadCableObject = (cable) => {
 };
 var disposeCadCableObject = (group) => {
   group.traverse((object) => {
-    if (!(object instanceof THREE46.Mesh)) return;
+    if (!(object instanceof THREE47.Mesh)) return;
     object.geometry.dispose();
     const materials = Array.isArray(object.material) ? object.material : [object.material];
     for (const material of materials) material.dispose();
@@ -28290,7 +28332,7 @@ function createStiffenerMesh({
 }
 
 // src/utils/flex-meshes.ts
-import * as THREE47 from "three";
+import * as THREE48 from "three";
 function meshToSurface(mesh, center) {
   mesh.updateMatrix();
   const geometry = mesh.geometry.index ? mesh.geometry.toNonIndexed() : mesh.geometry;
@@ -28298,11 +28340,11 @@ function meshToSurface(mesh, center) {
   const triangles = [];
   for (let i = 0; i < position.count; i += 3) {
     const vertices = [0, 1, 2].map((j) => {
-      const v = new THREE47.Vector3().fromBufferAttribute(position, i + j).applyMatrix4(mesh.matrix);
+      const v = new THREE48.Vector3().fromBufferAttribute(position, i + j).applyMatrix4(mesh.matrix);
       return { x: v.x - center.x, y: v.y - center.y, z: v.z };
     });
     const [a, b, c] = vertices;
-    const n = new THREE47.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE47.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
+    const n = new THREE48.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE48.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
     triangles.push({
       vertices,
       normal: { x: n.x, y: n.y, z: n.z },
@@ -28325,13 +28367,13 @@ function surfaceToGeometry(surface, center) {
       normals.push(triangle.normal.x, triangle.normal.y, triangle.normal.z);
       uvs.push(triangle.uvs?.[i]?.u ?? 0, triangle.uvs?.[i]?.v ?? 0);
     });
-  const geometry = new THREE47.BufferGeometry();
+  const geometry = new THREE48.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE47.Float32BufferAttribute(positions, 3)
+    new THREE48.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE47.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("uv", new THREE47.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE48.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("uv", new THREE48.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return geometry;
@@ -28376,7 +28418,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         z: mesh.position.z
       }));
       const uvs = vertices.map((p) => {
-        const local = new THREE47.Vector3(
+        const local = new THREE48.Vector3(
           p.x + board.center.x,
           p.y + board.center.y,
           p.z
@@ -28400,7 +28442,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
     return result;
   }) : textureMeshes;
   for (const stiffener of stiffeners) {
-    const mesh = new THREE47.Mesh(
+    const mesh = new THREE48.Mesh(
       surfaceToGeometry(
         createStiffenerMesh({
           stiffener,
@@ -28409,16 +28451,16 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         }),
         board.center
       ),
-      new THREE47.MeshStandardMaterial({
+      new THREE48.MeshStandardMaterial({
         color: stiffener.material === "fr4" ? "#879568" : stiffener.material === "polyimide" ? "#bd7f27" : "#b8bdc4",
-        side: THREE47.DoubleSide
+        side: THREE48.DoubleSide
       })
     );
     mesh.name = "board-stiffener";
     configureObjectShadows(mesh);
     geometry.push(mesh);
   }
-  const bounds = new THREE47.Box3();
+  const bounds = new THREE48.Box3();
   for (const mesh of [...geometry, ...textures]) bounds.expandByObject(mesh);
   return {
     geometryMeshes: geometry,
@@ -28437,12 +28479,12 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect30, useMemo as useMemo26, useState as useState19 } from "react";
-import * as THREE54 from "three";
+import * as THREE55 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect29, useMemo as useMemo25, useRef as useRef9, useState as useState18 } from "react";
-import * as THREE51 from "three";
+import * as THREE52 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -28791,17 +28833,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE49 from "three";
+import * as THREE50 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE48 from "three";
+import * as THREE49 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE48.BufferGeometry();
+  const geometry = new THREE49.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE48.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE49.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE48.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE49.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];
@@ -28835,7 +28877,7 @@ var createEllipsePoints = (width, height, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE49.Color(...colors.copper);
+var COPPER_COLOR = new THREE50.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -29465,7 +29507,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-vias.ts
-import * as THREE50 from "three";
+import * as THREE51 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -29503,7 +29545,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE50.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE51.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = getPcbVias(circuitJson);
@@ -29725,7 +29767,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE51.Color(
+              color: new THREE52.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -29795,11 +29837,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE53 from "three";
+import * as THREE54 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE52 from "three";
-var DEFAULT_SIDE = THREE52.DoubleSide;
+import * as THREE53 from "three";
+var DEFAULT_SIDE = THREE53.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -29807,7 +29849,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE52.MeshPhysicalMaterial({
+    return new THREE53.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -29825,7 +29867,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE52.MeshStandardMaterial({
+  return new THREE53.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -29844,12 +29886,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE53.Mesh(
+    const mesh = new THREE54.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE53.DoubleSide,
+        side: THREE54.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -29860,11 +29902,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE53.Mesh(
+        const mesh = new THREE54.Mesh(
           comp.geometry,
-          new THREE53.MeshStandardMaterial({
+          new THREE54.MeshStandardMaterial({
             color: comp.color,
-            side: THREE53.DoubleSide,
+            side: THREE54.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -29909,7 +29951,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE54.Texture) {
+        if (texture && texture instanceof THREE55.Texture) {
           texture.dispose();
         }
       }
@@ -38116,7 +38158,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE55.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE56.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -38439,11 +38481,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 THREE59 from "three";
+import * as THREE60 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE56 from "three";
+import * as THREE57 from "three";
 import { BufferGeometry as BufferGeometry6, Float32BufferAttribute as Float32BufferAttribute6 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry6();
@@ -38457,12 +38499,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE56.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE56.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE56.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE56.Vector3().crossVectors(
-        new THREE56.Vector3().subVectors(v2, v1),
-        new THREE56.Vector3().subVectors(v3, v1)
+      const v1 = new THREE57.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE57.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE57.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE57.Vector3().crossVectors(
+        new THREE57.Vector3().subVectors(v2, v1),
+        new THREE57.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -38490,10 +38532,10 @@ import {
   convertCSGToThreeGeom as convertCSGToThreeGeom3,
   getJscadModelForFootprint as getJscadModelForFootprint2
 } from "jscad-electronics/vanilla";
-import * as THREE58 from "three";
+import * as THREE59 from "three";
 
 // src/utils/load-model.ts
-import * as THREE57 from "three";
+import * as THREE58 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";
@@ -38501,12 +38543,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE57.MeshStandardMaterial({
+    const material = new THREE58.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE57.Mesh(geometry, material);
+    return new THREE58.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -38539,9 +38581,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE58.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -38555,13 +38597,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom3(jscadObject);
-      const material2 = new THREE58.MeshStandardMaterial({
+      const material2 = new THREE59.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE58.DoubleSide
+        side: THREE59.DoubleSide
       });
-      const mesh2 = new THREE58.Mesh(threeGeom, material2);
+      const mesh2 = new THREE59.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -38571,9 +38613,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE58.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -38590,17 +38632,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE58.Color(geomInfo.color);
+      const color = new THREE59.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom3(geomWithColor);
-      const material2 = new THREE58.MeshStandardMaterial({
+      const material2 = new THREE59.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE58.DoubleSide
+        side: THREE59.DoubleSide
       });
-      const mesh2 = new THREE58.Mesh(threeGeom, material2);
+      const mesh2 = new THREE59.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -38610,22 +38652,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE58.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE58.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE59.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE59.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE58.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE58.MeshStandardMaterial({
+  const geometry = new THREE59.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE59.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE58.Mesh(geometry, material);
+  const mesh = new THREE59.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -38646,11 +38688,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE59.Scene();
+  const scene = new THREE60.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE59.Color(backgroundColor), 1);
-  const camera = new THREE59.OrthographicCamera();
+  renderer.setClearColor(new THREE60.Color(backgroundColor), 1);
+  const camera = new THREE60.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -38664,11 +38706,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt2 = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE59.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
+  camera.lookAt(new THREE60.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE59.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE60.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE59.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE60.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -38700,28 +38742,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: edgeColor,
-        side: THREE59.DoubleSide
+        side: THREE60.DoubleSide
       });
-      const mesh = new THREE59.Mesh(geometry, material);
+      const mesh = new THREE60.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE59.Color(8947848);
-  const gridHelper = new THREE59.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE60.Color(8947848);
+  const gridHelper = new THREE60.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 THREE59.LineBasicMaterial) {
+    if (mat instanceof THREE60.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE59.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE59.Vector3());
-  const size4 = box.getSize(new THREE59.Vector3());
+  const box = new THREE60.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE60.Vector3());
+  const size4 = box.getSize(new THREE60.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {