@tscircuit/3d-viewer 0.0.620 → 0.0.622

package/dist/index.js

@@ -4014,7 +4014,7 @@ var require_measureBoundingBox = __commonJS({
   "node_modules/@jscad/modeling/src/geometries/poly3/measureBoundingBox.js"(exports, module) {
     "use strict";
     var vec3 = require_vec3();
-    var measureBoundingBox = (polygon2) => {
+    var measureBoundingBox2 = (polygon2) => {
       const vertices = polygon2.vertices;
       const numvertices = vertices.length;
       const min5 = numvertices === 0 ? vec3.create() : vec3.clone(vertices[0]);
@@ -4025,7 +4025,7 @@ var require_measureBoundingBox = __commonJS({
       }
       return [min5, max5];
     };
-    module.exports = measureBoundingBox;
+    module.exports = measureBoundingBox2;
   }
 });
 
@@ -6819,7 +6819,7 @@ var require_measureBoundingBox2 = __commonJS({
       cache.set(geometry, boundingBox);
       return boundingBox;
     };
-    var measureBoundingBox = (...geometries) => {
+    var measureBoundingBox2 = (...geometries) => {
       geometries = flatten(geometries);
       if (geometries.length === 0) throw new Error("wrong number of arguments");
       const results = geometries.map((geometry) => {
@@ -6830,7 +6830,7 @@ var require_measureBoundingBox2 = __commonJS({
       });
       return results.length === 1 ? results[0] : results;
     };
-    module.exports = measureBoundingBox;
+    module.exports = measureBoundingBox2;
   }
 });
 
@@ -6841,11 +6841,11 @@ var require_measureAggregateBoundingBox = __commonJS({
     var flatten = require_flatten();
     var vec3min = require_min();
     var vec3max = require_max();
-    var measureBoundingBox = require_measureBoundingBox2();
+    var measureBoundingBox2 = require_measureBoundingBox2();
     var measureAggregateBoundingBox = (...geometries) => {
       geometries = flatten(geometries);
       if (geometries.length === 0) throw new Error("measureAggregateBoundingBox: no geometries supplied");
-      const bounds = measureBoundingBox(geometries);
+      const bounds = measureBoundingBox2(geometries);
       if (geometries.length === 1) {
         return bounds;
       }
@@ -7057,11 +7057,11 @@ var require_measureCenter = __commonJS({
   "node_modules/@jscad/modeling/src/measurements/measureCenter.js"(exports, module) {
     "use strict";
     var flatten = require_flatten();
-    var measureBoundingBox = require_measureBoundingBox2();
+    var measureBoundingBox2 = require_measureBoundingBox2();
     var measureCenter = (...geometries) => {
       geometries = flatten(geometries);
       const results = geometries.map((geometry) => {
-        const bounds = measureBoundingBox(geometry);
+        const bounds = measureBoundingBox2(geometry);
         return [
           bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2,
           bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2,
@@ -7150,11 +7150,11 @@ var require_measureDimensions = __commonJS({
   "node_modules/@jscad/modeling/src/measurements/measureDimensions.js"(exports, module) {
     "use strict";
     var flatten = require_flatten();
-    var measureBoundingBox = require_measureBoundingBox2();
+    var measureBoundingBox2 = require_measureBoundingBox2();
     var measureDimensions = (...geometries) => {
       geometries = flatten(geometries);
       const results = geometries.map((geometry) => {
-        const boundingBox = measureBoundingBox(geometry);
+        const boundingBox = measureBoundingBox2(geometry);
         return [
           boundingBox[1][0] - boundingBox[0][0],
           boundingBox[1][1] - boundingBox[0][1],
@@ -7174,10 +7174,10 @@ var require_measureEpsilon = __commonJS({
     var flatten = require_flatten();
     var { geom2, geom3, path2 } = require_geometries();
     var calculateEpsilonFromBounds = require_calculateEpsilonFromBounds();
-    var measureBoundingBox = require_measureBoundingBox2();
-    var measureEpsilonOfPath2 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox(geometry), 2);
-    var measureEpsilonOfGeom2 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox(geometry), 2);
-    var measureEpsilonOfGeom3 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox(geometry), 3);
+    var measureBoundingBox2 = require_measureBoundingBox2();
+    var measureEpsilonOfPath2 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox2(geometry), 2);
+    var measureEpsilonOfGeom2 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox2(geometry), 2);
+    var measureEpsilonOfGeom3 = (geometry) => calculateEpsilonFromBounds(measureBoundingBox2(geometry), 3);
     var measureEpsilon = (...geometries) => {
       geometries = flatten(geometries);
       if (geometries.length === 0) throw new Error("wrong number of arguments");
@@ -10672,15 +10672,15 @@ var require_mayOverlap = __commonJS({
   "node_modules/@jscad/modeling/src/operations/booleans/mayOverlap.js"(exports, module) {
     "use strict";
     var { EPS: EPS3 } = require_constants();
-    var measureBoundingBox = require_measureBoundingBox2();
+    var measureBoundingBox2 = require_measureBoundingBox2();
     var mayOverlap = (geometry1, geometry2) => {
       if (geometry1.polygons.length === 0 || geometry2.polygons.length === 0) {
         return false;
       }
-      const bounds1 = measureBoundingBox(geometry1);
+      const bounds1 = measureBoundingBox2(geometry1);
       const min1 = bounds1[0];
       const max1 = bounds1[1];
-      const bounds2 = measureBoundingBox(geometry2);
+      const bounds2 = measureBoundingBox2(geometry2);
       const min22 = bounds2[0];
       const max22 = bounds2[1];
       if (min22[0] - max1[0] > EPS3) return false;
@@ -13564,7 +13564,7 @@ var require_center = __commonJS({
     var geom2 = require_geom2();
     var geom3 = require_geom3();
     var path2 = require_path2();
-    var measureBoundingBox = require_measureBoundingBox2();
+    var measureBoundingBox2 = require_measureBoundingBox2();
     var { translate: translate10 } = require_translate2();
     var centerGeometry = (options, object) => {
       const defaults = {
@@ -13572,7 +13572,7 @@ var require_center = __commonJS({
         relativeTo: [0, 0, 0]
       };
       const { axes: axes2, relativeTo } = Object.assign({}, defaults, options);
-      const bounds = measureBoundingBox(object);
+      const bounds = measureBoundingBox2(object);
       const offset4 = [0, 0, 0];
       if (axes2[0]) offset4[0] = relativeTo[0] - (bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2);
       if (axes2[1]) offset4[1] = relativeTo[1] - (bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2);
@@ -18979,8 +18979,8 @@ 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 { useCallback as useCallback25, useContext as useContext11, useEffect as useEffect50, useRef as useRef29, useState as useState42 } from "react";
+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.619",
+  version: "0.0.621",
   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
@@ -23028,6 +23069,7 @@ var createSimplifiedBoardGeom = (circuitJson) => {
 // src/BoardGeomBuilder.ts
 var import_colors3 = __toESM(require_colors(), 1);
 var import_booleans4 = __toESM(require_booleans(), 1);
+var import_measurements = __toESM(require_measurements(), 1);
 var import_extrusions4 = __toESM(require_extrusions(), 1);
 var import_transforms6 = __toESM(require_transforms(), 1);
 var import_primitives6 = __toESM(require_primitives(), 1);
@@ -23759,6 +23801,9 @@ var BoardGeomBuilder = class {
   platedHoleGeoms = [];
   viaGeoms = [];
   // Combined with platedHoleGeoms
+  // Drills are in board space (mm, +Z up). Apply them after all copper exists,
+  // excluding each barrel's own drill so its thin plating is preserved.
+  copperDrills = [];
   boardClipGeom = null;
   state = "initializing";
   currentIndex = 0;
@@ -23976,6 +24021,10 @@ var BoardGeomBuilder = class {
       }
       if (!opts.dontCutBoard) {
         this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, cyGeom);
+        this.copperDrills.push({
+          geom: cyGeom,
+          platedHoleIndex: this.platedHoleGeoms.length
+        });
       }
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -24013,6 +24062,10 @@ var BoardGeomBuilder = class {
       }
       if (!opts.dontCutBoard) {
         this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, pillHole);
+        this.copperDrills.push({
+          geom: pillHole,
+          platedHoleIndex: this.platedHoleGeoms.length
+        });
       }
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -24066,6 +24119,10 @@ var BoardGeomBuilder = class {
       );
       if (!opts.dontCutBoard) {
         this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, pillHole);
+        this.copperDrills.push({
+          geom: pillHole,
+          platedHoleIndex: this.platedHoleGeoms.length
+        });
       }
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -24110,6 +24167,10 @@ var BoardGeomBuilder = class {
       );
       if (!opts.dontCutBoard) {
         this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, pillHole);
+        this.copperDrills.push({
+          geom: pillHole,
+          platedHoleIndex: this.platedHoleGeoms.length
+        });
       }
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -24130,10 +24191,11 @@ var BoardGeomBuilder = class {
       if (!boardHole || !copperHole) return;
       if (!opts.dontCutBoard) {
         this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, boardHole);
+        this.copperDrills.push({
+          geom: boardHole,
+          platedHoleIndex: this.platedHoleGeoms.length
+        });
       }
-      this.platedHoleGeoms = this.platedHoleGeoms.map(
-        (phg) => (0, import_colors3.colorize)(colors.copper, (0, import_booleans4.subtract)(phg, copperHole))
-      );
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
       });
@@ -24155,9 +24217,7 @@ var BoardGeomBuilder = class {
         radius: hole.hole_diameter / 2 + M / 2,
         height: holeDepth
       });
-      this.platedHoleGeoms = this.platedHoleGeoms.map(
-        (phg) => (0, import_colors3.colorize)(colors.copper, (0, import_booleans4.subtract)(phg, copperCut))
-      );
+      this.copperDrills.push({ geom: copperCut });
     } else if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill" || hole.hole_shape === "rect" || hole.hole_shape === "oval") {
       const holeWidth = hole.hole_width ?? hole.hole_diameter;
       const holeHeight = hole.hole_height ?? hole.hole_diameter;
@@ -24219,14 +24279,13 @@ var BoardGeomBuilder = class {
       }
       if (copperCut) {
         const positionedCopperCut = (0, import_transforms6.translate)([hole.x, hole.y, 0], copperCut);
-        this.platedHoleGeoms = this.platedHoleGeoms.map(
-          (phg) => (0, import_colors3.colorize)(colors.copper, (0, import_booleans4.subtract)(phg, positionedCopperCut))
-        );
+        this.copperDrills.push({ geom: positionedCopperCut });
       }
     }
   }
   processVia(via) {
     if (!this.boardGeom) return;
+    let viaCopperIndex;
     if (typeof via.outer_diameter === "number" && typeof via.hole_diameter === "number") {
       const viaCopperGeom = createViaCopper({
         x: via.x,
@@ -24240,6 +24299,7 @@ var BoardGeomBuilder = class {
         finalViaGeom = (0, import_booleans4.intersect)(this.boardClipGeom, viaCopperGeom);
         finalViaGeom = (0, import_colors3.colorize)(colors.copper, finalViaGeom);
       }
+      viaCopperIndex = this.viaGeoms.length;
       this.viaGeoms.push(finalViaGeom);
     }
     if (typeof via.hole_diameter === "number") {
@@ -24250,10 +24310,36 @@ var BoardGeomBuilder = class {
         thickness: this.ctx.pcbThickness
       });
       this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, viaDrill);
+      this.copperDrills.push({
+        geom: viaDrill,
+        viaIndex: viaCopperIndex
+      });
     }
   }
   finalize() {
     if (!this.boardGeom) return;
+    const drillBounds = this.copperDrills.map((drill) => ({
+      ...drill,
+      bounds: (0, import_measurements.measureBoundingBox)(drill.geom)
+    }));
+    const cutCopper = (geom, index2, kind) => {
+      const bounds = (0, import_measurements.measureBoundingBox)(geom);
+      const drills = drillBounds.filter(
+        (drill) => drill[kind] !== index2 && [0, 1, 2].every(
+          (axis) => drill.bounds[0][axis] <= bounds[1][axis] && drill.bounds[1][axis] >= bounds[0][axis]
+        )
+      ).map((drill) => drill.geom);
+      return (0, import_colors3.colorize)(
+        colors.copper,
+        drills.length ? (0, import_booleans4.subtract)(geom, (0, import_booleans4.union)(...drills)) : geom
+      );
+    };
+    this.platedHoleGeoms = this.platedHoleGeoms.map(
+      (geom, index2) => cutCopper(geom, index2, "platedHoleIndex")
+    );
+    this.viaGeoms = this.viaGeoms.map(
+      (geom, index2) => cutCopper(geom, index2, "viaIndex")
+    );
     const boardEdgeColor = getBoardEdgeColor(this.board);
     this.boardGeom = (0, import_colors3.colorize)(
       [boardEdgeColor.r, boardEdgeColor.g, boardEdgeColor.b],
@@ -24379,7 +24465,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 +24499,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 +24561,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",
@@ -24501,8 +24587,8 @@ var ErrorBox = ({ parent }) => {
 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";
+// src/textures/open-via-holes-at-pads.ts
+import { CircuitToCanvasDrawer } from "circuit-to-canvas";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -24554,10 +24640,112 @@ function calculateOutlineBounds(boardData) {
   };
 }
 
+// src/textures/open-via-holes-at-pads.ts
+function getViaHolesAtExposedPads(circuitJson, boardData, resolution) {
+  const vias = getPcbVias(circuitJson);
+  if (!vias.length) return [];
+  const bounds = calculateOutlineBounds(boardData);
+  const width = Math.floor(bounds.width * resolution);
+  const height = Math.floor(bounds.height * resolution);
+  if (width <= 0 || height <= 0) return [];
+  const opened = /* @__PURE__ */ new Set();
+  for (const layer of ["top", "bottom"]) {
+    const pads = circuitJson.filter(
+      (element) => (element.type === "pcb_smtpad" && element.layer === layer || element.type === "pcb_plated_hole" && (!Array.isArray(element.layers) || element.layers.includes(layer))) && element.is_covered_with_solder_mask !== true
+    );
+    if (!pads.length) continue;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) continue;
+    const drawer = new CircuitToCanvasDrawer(ctx);
+    drawer.configure({
+      colorOverrides: {
+        copper: {
+          top: "white",
+          bottom: "white",
+          inner1: "white",
+          inner2: "white",
+          inner3: "white",
+          inner4: "white",
+          inner5: "white",
+          inner6: "white",
+          inner7: "white",
+          inner8: "white"
+        },
+        drill: "rgba(0,0,0,0)"
+      }
+    });
+    drawer.setCameraBounds(bounds);
+    drawer.drawElements(pads, {
+      layers: [layer === "top" ? "top_copper" : "bottom_copper"],
+      drawSoldermask: false
+    });
+    const pixels = ctx.getImageData(0, 0, width, height).data;
+    for (const via of vias) {
+      if (opened.has(via) || !via.layers.includes(layer)) continue;
+      const radius = via.outer_diameter / 2;
+      const cx = (via.x - bounds.minX) * width / bounds.width;
+      const cy = (bounds.maxY - via.y) * height / bounds.height;
+      const rx = radius * width / bounds.width;
+      const ry = radius * height / bounds.height;
+      if (rx <= 0 || ry <= 0) continue;
+      const minX = Math.max(0, Math.floor(cx - rx)), maxX = Math.min(width - 1, Math.ceil(cx + rx));
+      const minY = Math.max(0, Math.floor(cy - ry)), maxY = Math.min(height - 1, Math.ceil(cy + ry));
+      let overlaps = false;
+      for (let y = minY; y <= maxY && !overlaps; y++) {
+        for (let x = minX; x <= maxX; x++) {
+          if (pixels[(y * width + x) * 4 + 3] >= 128 && ((x + 0.5 - cx) / rx) ** 2 + ((y + 0.5 - cy) / ry) ** 2 <= 1) {
+            overlaps = true;
+            break;
+          }
+        }
+      }
+      if (overlaps) opened.add(via);
+    }
+  }
+  return [...opened];
+}
+function clearViaHolesFromSurface({
+  ctx,
+  vias,
+  boardData,
+  layer,
+  width,
+  height
+}) {
+  if (!vias.length) return;
+  const bounds = calculateOutlineBounds(boardData);
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "black";
+  for (const via of vias) {
+    if (!via.layers.includes(layer)) continue;
+    const x = (via.x - bounds.minX) * width / bounds.width;
+    const y = (layer === "top" ? bounds.maxY - via.y : via.y - bounds.minY) * height / bounds.height;
+    ctx.beginPath();
+    ctx.ellipse(
+      x,
+      y,
+      via.hole_diameter / 2 * width / bounds.width,
+      via.hole_diameter / 2 * height / bounds.height,
+      0,
+      0,
+      Math.PI * 2
+    );
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
+// src/textures/create-combined-board-textures.ts
+import * as THREE42 from "three";
+
 // 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 { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import * as THREE30 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -24591,7 +24779,7 @@ function createPadTextureForLayer({
     ctx.scale(1, -1);
   }
   const transparent = "rgba(0,0,0,0)";
-  const drawer = new CircuitToCanvasDrawer(ctx);
+  const drawer = new CircuitToCanvasDrawer2(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -24637,10 +24825,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 +24836,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,18 +24904,18 @@ 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 { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import * as THREE32 from "three";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
   layer,
@@ -24765,7 +24953,7 @@ function createTraceTextureForLayer({
     ctx.scale(1, -1);
   }
   const transparent = "rgba(0,0,0,0)";
-  const drawer = new CircuitToCanvasDrawer2(ctx);
+  const drawer = new CircuitToCanvasDrawer3(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -24812,18 +25000,18 @@ 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;
 }
 
 // src/textures/create-copper-pour-texture-for-layer.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE32 from "three";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
+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(
@@ -24879,7 +25067,7 @@ function createCopperPourTextureForLayer({
   const setColorAndDraw = (pours, copperPourColor) => {
     if (pours.length === 0) return;
     const elementsToDraw = [...pours, ...drillElements];
-    const drawer = new CircuitToCanvasDrawer3(ctx);
+    const drawer = new CircuitToCanvasDrawer4(ctx);
     drawer.configure({
       colorOverrides: {
         copper: {
@@ -24947,20 +25135,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
 var setDrawerBounds = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -24977,7 +25165,7 @@ var drawCopperTextLayer = ({
   copperColor
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer4(ctx);
+  const drawer = new CircuitToCanvasDrawer5(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -25007,7 +25195,7 @@ var drawCopperTextLayer = ({
   maskCanvas.height = ctx.canvas.height;
   const maskCtx = maskCanvas.getContext("2d");
   if (!maskCtx) return;
-  const knockoutCutoutDrawer = new CircuitToCanvasDrawer4(maskCtx);
+  const knockoutCutoutDrawer = new CircuitToCanvasDrawer5(maskCtx);
   knockoutCutoutDrawer.configure({
     colorOverrides: {
       copper: {
@@ -25072,20 +25260,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
 
 // src/utils/units.ts
 var MM_PER_INCH = 25.4;
@@ -25183,7 +25371,7 @@ var drawFabricationNoteLayer = ({
 }) => {
   const renderLayer = `${layer}_fabrication_note`;
   const normalizedElements = elements.map(normalizeFabricationElement);
-  const drawer = new CircuitToCanvasDrawer5(ctx);
+  const drawer = new CircuitToCanvasDrawer6(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -25312,20 +25500,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
 var setDrawerBounds3 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -25342,7 +25530,7 @@ var drawKeepoutLayer = ({
   keepoutColor
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer6(ctx);
+  const drawer = new CircuitToCanvasDrawer7(ctx);
   drawer.configure({
     colorOverrides: {
       keepout: {
@@ -25397,20 +25585,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
 var TRANSPARENT2 = "rgba(0,0,0,0)";
 var setDrawerBounds4 = (drawer, bounds) => {
   drawer.setCameraBounds({
@@ -25489,7 +25677,7 @@ var drawPcbNoteLayer = ({
   elements
 }) => {
   const normalizedElements = elements.map(normalizePcbNoteElement);
-  const drawer = new CircuitToCanvasDrawer7(ctx);
+  const drawer = new CircuitToCanvasDrawer8(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -25561,20 +25749,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
 var FABRICATION_NOTE_COLOR2 = "rgb(255,243,204)";
 var TRANSPARENT3 = "rgba(0,0,0,0)";
 var isViaTented = (via, layer, board) => {
@@ -25611,7 +25799,7 @@ var drawSilkscreenLayer = ({
   soldermaskVisible
 }) => {
   const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
-  const drawer = new CircuitToCanvasDrawer8(ctx);
+  const drawer = new CircuitToCanvasDrawer9(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -25722,21 +25910,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 { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
+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 +25947,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),
@@ -25798,7 +25986,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardData);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer9(ctx);
+  const drawer = new CircuitToCanvasDrawer10(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -25847,7 +26035,7 @@ var drawSoldermaskLayer = ({
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer9(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer10(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -25898,20 +26086,20 @@ 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";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer11 } from "circuit-to-canvas";
 var setDrawerBounds7 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -25929,7 +26117,7 @@ var drawThroughHoleLayer = ({
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
   const transparent = "rgba(0,0,0,0)";
-  const drawer = new CircuitToCanvasDrawer10(ctx);
+  const drawer = new CircuitToCanvasDrawer11(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -26003,10 +26191,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;
@@ -26069,7 +26257,8 @@ var createCombinedTexture = ({
   textures,
   boardData,
   traceTextureResolution,
-  layer
+  layer,
+  openViaHoles
 }) => {
   const hasImage = textures.some((texture) => texture?.image);
   if (!hasImage) return null;
@@ -26091,13 +26280,21 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   }
+  clearViaHolesFromSurface({
+    ctx,
+    vias: openViaHoles,
+    boardData,
+    layer,
+    width: canvasWidth,
+    height: canvasHeight
+  });
   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;
@@ -26133,11 +26330,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;
@@ -26152,6 +26349,11 @@ function createCombinedBoardTextures({
   const silkscreenColor = "rgb(255,255,255)";
   const copperColor = toRgb3(colors.copper);
   const showBoardBody = visibility?.boardBody ?? true;
+  const openViaHoles = getViaHolesAtExposedPads(
+    circuitJson,
+    boardData,
+    traceTextureResolution
+  );
   const buildForLayer = (layer) => {
     const showMask = (layer === "top" ? visibility?.topMask : visibility?.bottomMask) ?? true;
     const showCopper = (layer === "top" ? visibility?.topCopper : visibility?.bottomCopper) ?? true;
@@ -26240,6 +26442,7 @@ function createCombinedBoardTextures({
       traceTextureResolution
     }) : null;
     const boardTexture = createCombinedTexture({
+      openViaHoles,
       textures: [
         copperPourTexture,
         traceTexture,
@@ -26277,7 +26480,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 = {
@@ -26300,7 +26503,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;
@@ -26395,13 +26598,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;
 };
@@ -26525,16 +26728,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,
@@ -26543,12 +26746,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
     ),
@@ -26562,7 +26765,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,
@@ -26610,7 +26813,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";
@@ -26748,7 +26951,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;
         }
@@ -26767,16 +26970,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,
@@ -26787,12 +26990,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
         ),
@@ -26804,7 +27007,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,
@@ -26854,7 +27057,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);
         }
       }
@@ -26867,7 +27070,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,
@@ -26900,15 +27103,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,
@@ -26971,7 +27174,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;
@@ -26988,14 +27191,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
@@ -27021,28 +27224,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);
@@ -27051,7 +27254,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();
@@ -28291,7 +28494,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;
@@ -28299,11 +28502,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 },
@@ -28326,13 +28529,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;
@@ -28377,7 +28580,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
@@ -28401,7 +28604,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,
@@ -28410,16 +28613,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,
@@ -28438,12 +28641,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) => {
@@ -28792,17 +28995,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];
@@ -28836,7 +29039,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;
@@ -29466,7 +29669,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({
@@ -29504,12 +29707,14 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE50.Color(...colors.copper);
-function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
+var COPPER_COLOR2 = new THREE51.Color(...colors.copper);
+function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume, otherHoleDrills = []) {
   const viaBoardDrills = [];
   const pcbVias = getPcbVias(circuitJson);
   const viaCopperGeoms = [];
+  const copperOps = [];
   pcbVias.forEach((via, index2) => {
+    let ownDrill;
     if (typeof via.hole_diameter === "number") {
       const translatedDrill = createPlatedHoleDrill({
         Manifold,
@@ -29522,6 +29727,7 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
       });
       manifoldInstancesForCleanup.push(translatedDrill);
       viaBoardDrills.push(translatedDrill);
+      ownDrill = translatedDrill;
     }
     if (typeof via.outer_diameter === "number" && typeof via.hole_diameter === "number") {
       const translatedViaCopper = createViaCopper2({
@@ -29544,14 +29750,36 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
         manifoldInstancesForCleanup.push(clipped);
         finalCopperOp = clipped;
       }
-      const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
-      viaCopperGeoms.push({
+      copperOps.push({
         key: `via-${via.pcb_via_id || index2}`,
-        geometry: threeGeom,
-        color: COPPER_COLOR2
+        copper: finalCopperOp,
+        ownDrill
       });
     }
   });
+  const drillBounds = [...otherHoleDrills, ...viaBoardDrills].map((drill) => ({
+    drill,
+    bounds: drill.boundingBox()
+  }));
+  for (const { key, copper, ownDrill } of copperOps) {
+    const bounds = copper.boundingBox();
+    const drills = drillBounds.filter(
+      ({ drill, bounds: drillBounds2 }) => drill !== ownDrill && [0, 1, 2].every(
+        (axis) => drillBounds2.min[axis] <= bounds.max[axis] && drillBounds2.max[axis] >= bounds.min[axis]
+      )
+    ).map(({ drill }) => drill);
+    let cutCopper = copper;
+    if (drills.length) {
+      const drillUnion = Manifold.union(drills);
+      cutCopper = copper.subtract(drillUnion);
+      manifoldInstancesForCleanup.push(drillUnion, cutCopper);
+    }
+    viaCopperGeoms.push({
+      key,
+      geometry: manifoldMeshToThreeGeometry(cutCopper.getMesh()),
+      color: COPPER_COLOR2
+    });
+  }
   return { viaBoardDrills, viaCopperGeoms };
 }
 
@@ -29705,7 +29933,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         circuitJson,
         currentPcbThickness,
         manifoldInstancesForCleanup.current,
-        boardClipVolume
+        boardClipVolume,
+        allBoardDrills
       );
       allBoardDrills.push(...viaBoardDrills);
       currentGeoms.vias = viaCopperGeoms;
@@ -29726,7 +29955,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]
@@ -29796,11 +30025,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,
@@ -29808,7 +30037,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE52.MeshPhysicalMaterial({
+    return new THREE53.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -29826,7 +30055,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE52.MeshStandardMaterial({
+  return new THREE53.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -29845,12 +30074,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
       })
     );
@@ -29861,11 +30090,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
           })
@@ -29910,7 +30139,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();
         }
       }
@@ -30571,15 +30800,13 @@ function createSlot(ownerName) {
     let slottableElement = null;
     let hasSlottable = false;
     const newChildren = [];
-    if (isLazyComponent(children) && typeof use === "function") {
-      children = use(children._payload);
-    }
+    children = useUnwrappedLazy(children);
     React16.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
         let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
-        if (isLazyComponent(child) && typeof use === "function") {
+        while (isLazyComponent(child) && typeof use === "function") {
           child = use(child._payload);
         }
         slottableElement = getSlottableElementFromSlottable(slottable, child);
@@ -30630,9 +30857,8 @@ function createSlottable(ownerName) {
 __name6(createSlottable, "createSlottable");
 var getSlottableElementFromSlottable = /* @__PURE__ */ __name6((slottable, child) => {
   if ("child" in slottable.props) {
-    const child2 = slottable.props.child;
-    if (!React16.isValidElement(child2)) return null;
-    return React16.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    if (!React16.isValidElement(child)) return null;
+    return React16.cloneElement(child, void 0, slottable.props.children(child.props.children));
   }
   return React16.isValidElement(child) ? child : null;
 }, "getSlottableElementFromSlottable");
@@ -30690,6 +30916,14 @@ function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
 __name6(isPromiseLike, "isPromiseLike");
+function useUnwrappedLazy(value) {
+  let unwrapped = value;
+  while (isLazyComponent(unwrapped) && typeof use === "function") {
+    unwrapped = use(unwrapped._payload);
+  }
+  return unwrapped;
+}
+__name6(useUnwrappedLazy, "useUnwrappedLazy");
 function concatAriaDescribedby(...values) {
   const ids = /* @__PURE__ */ new Set();
   for (const value of values) {
@@ -30837,54 +31071,37 @@ var OrderedDict = class _OrderedDict extends Map {
     __instanciated.set(this, true);
   }
   set(key, value) {
-    if (__instanciated.get(this)) {
-      if (this.has(key)) {
-        this.#keys[this.#keys.indexOf(key)] = key;
-      } else {
-        this.#keys.push(key);
-      }
+    if (__instanciated.get(this) && !this.has(key)) {
+      this.#keys.push(key);
     }
     super.set(key, value);
     return this;
   }
+  /**
+   * Sets a key-value pair so that it ends up at the given index.
+   * - Existing keys are moved
+   * - Negative indices count from the end of the resulting dictionary, so
+   *   inserting at -1 makes the item the last one, -2 the second to last, etc.
+   * - Out-of-range indices are clamped
+   */
   insert(index2, key, value) {
     const has = this.has(key);
-    const length6 = this.#keys.length;
+    const finalSize = has ? this.size : this.size + 1;
     const relativeIndex = toSafeInteger(index2);
-    let actualIndex = relativeIndex >= 0 ? relativeIndex : length6 + relativeIndex;
-    const safeIndex = actualIndex < 0 || actualIndex >= length6 ? -1 : actualIndex;
-    if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
+    const targetIndex = relativeIndex >= 0 ? Math.min(relativeIndex, finalSize - 1) : Math.max(finalSize + relativeIndex, 0);
+    if (has ? this.#keys.indexOf(key) === targetIndex : targetIndex === this.size) {
       this.set(key, value);
       return this;
     }
-    const size4 = this.size + (has ? 0 : 1);
-    if (relativeIndex < 0) {
-      actualIndex++;
-    }
-    const keys = [...this.#keys];
-    let nextValue;
-    let shouldSkip = false;
-    for (let i = actualIndex; i < size4; i++) {
-      if (actualIndex === i) {
-        let nextKey = keys[i];
-        if (keys[i] === key) {
-          nextKey = keys[i + 1];
-        }
-        if (has) {
-          this.delete(key);
-        }
-        nextValue = this.get(nextKey);
-        this.set(key, value);
-      } else {
-        if (!shouldSkip && keys[i - 1] === key) {
-          shouldSkip = true;
-        }
-        const currentKey = keys[shouldSkip ? i : i - 1];
-        const currentValue = nextValue;
-        nextValue = this.get(currentKey);
-        this.delete(currentKey);
-        this.set(currentKey, currentValue);
-      }
+    const keys = this.#keys.filter((existingKey) => existingKey !== key);
+    keys.splice(targetIndex, 0, key);
+    const entries = keys.map((entryKey) => [
+      entryKey,
+      entryKey === key ? value : this.get(entryKey)
+    ]);
+    this.clear();
+    for (const [entryKey, entryValue] of entries) {
+      this.set(entryKey, entryValue);
     }
     return this;
   }
@@ -30908,7 +31125,9 @@ var OrderedDict = class _OrderedDict extends Map {
     if (index2 === -1) {
       return this;
     }
-    return this.insert(index2, newKey, value);
+    const currentIndex = this.#keys.indexOf(newKey);
+    const targetIndex = currentIndex !== -1 && currentIndex < index2 ? index2 - 1 : index2;
+    return this.insert(targetIndex, newKey, value);
   }
   after(key) {
     let index2 = this.#keys.indexOf(key);
@@ -30926,7 +31145,9 @@ var OrderedDict = class _OrderedDict extends Map {
     if (index2 === -1) {
       return this;
     }
-    return this.insert(index2 + 1, newKey, value);
+    const currentIndex = this.#keys.indexOf(newKey);
+    const targetIndex = currentIndex !== -1 && currentIndex <= index2 ? index2 : index2 + 1;
+    return this.insert(targetIndex, newKey, value);
   }
   first() {
     return this.entryAt(0);
@@ -31032,10 +31253,14 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   reduce(...args) {
     const [callbackfn, initialValue] = args;
+    const hasInitialValue = args.length > 1;
+    if (!hasInitialValue && this.size === 0) {
+      throw new TypeError("Reduce of empty OrderedDict with no initial value");
+    }
     let index2 = 0;
-    let accumulator = initialValue ?? this.at(0);
+    let accumulator = initialValue;
     for (const entry of this) {
-      if (index2 === 0 && args.length === 1) {
+      if (index2 === 0 && !hasInitialValue) {
         accumulator = entry;
       } else {
         accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
@@ -31046,10 +31271,14 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   reduceRight(...args) {
     const [callbackfn, initialValue] = args;
-    let accumulator = initialValue ?? this.at(-1);
+    const hasInitialValue = args.length > 1;
+    if (!hasInitialValue && this.size === 0) {
+      throw new TypeError("Reduce of empty OrderedDict with no initial value");
+    }
+    let accumulator = initialValue;
     for (let index2 = this.size - 1; index2 >= 0; index2--) {
-      const entry = this.at(index2);
-      if (index2 === this.size - 1 && args.length === 1) {
+      const entry = this.entryAt(index2);
+      if (index2 === this.size - 1 && !hasInitialValue) {
         accumulator = entry;
       } else {
         accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
@@ -31057,7 +31286,36 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return accumulator;
   }
+  /**
+   * Sorts the dictionary in place. This method mutates the dictionary and
+   * returns a reference to the same object
+   *
+   * @param compareFn Function used to determine the order of the elements. It
+   * is expected to return a negative value if the first argument is less than
+   * the second argument, zero if they're equal, and a positive value otherwise.
+   */
+  sort(compareFn) {
+    if (typeof compareFn !== "function") {
+      throw new TypeError(`OrderedDict.sort requires a compare function`);
+    }
+    const entries = [...this.entries()].sort(compareFn);
+    this.clear();
+    for (const [key, value] of entries) {
+      this.set(key, value);
+    }
+    return this;
+  }
+  /**
+   * Returns a copy of the dictionary with its elements sorted.
+   *
+   * @param compareFn Function used to determine the order of the elements. It
+   * is expected to return a negative value if the first argument is less than
+   * the second argument, zero if they're equal, and a positive value otherwise.
+   */
   toSorted(compareFn) {
+    if (typeof compareFn !== "function") {
+      throw new TypeError(`OrderedDict.toSorted requires a compare function`);
+    }
     const entries = [...this.entries()].sort(compareFn);
     return new _OrderedDict(entries);
   }
@@ -31077,20 +31335,8 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   slice(start, end) {
     const result = new _OrderedDict();
-    let stop = this.size - 1;
-    if (start === void 0) {
-      return result;
-    }
-    if (start < 0) {
-      start = start + this.size;
-    }
-    if (end !== void 0 && end > 0) {
-      stop = end - 1;
-    }
-    for (let index2 = start; index2 <= stop; index2++) {
-      const key = this.keyAt(index2);
-      const element = this.get(key);
-      result.set(key, element);
+    for (const key of this.#keys.slice(start, end)) {
+      result.set(key, this.get(key));
     }
     return result;
   }
@@ -31138,16 +31384,10 @@ __name8(toSafeInteger, "toSafeInteger");
 function createCollection2(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope3] = createContextScope(PROVIDER_NAME);
-  const [CollectionContextProvider, useCollectionContext] = createCollectionContext(
-    PROVIDER_NAME,
-    {
-      collectionElement: null,
-      collectionRef: { current: null },
-      collectionRefObject: { current: null },
-      itemMap: new OrderedDict(),
-      setItemMap: /* @__PURE__ */ __name8(() => void 0, "setItemMap")
-    }
-  );
+  const [CollectionStableContextProvider, useStableCollectionContext] = createCollectionContext(PROVIDER_NAME);
+  CollectionStableContextProvider.displayName = name + "CollectionStableContextProvider";
+  const [CollectionStatefulContextProvider, useStatefulCollectionContext] = createCollectionContext(PROVIDER_NAME);
+  CollectionStatefulContextProvider.displayName = name + "CollectionStatefulContextProvider";
   const CollectionProvider = /* @__PURE__ */ __name8(({ state, ...props }) => {
     return state ? /* @__PURE__ */ jsx23(CollectionProviderImpl, { ...props, state }) : /* @__PURE__ */ jsx23(CollectionInit, { ...props });
   }, "CollectionProvider");
@@ -31156,7 +31396,7 @@ function createCollection2(name) {
     const state = useInitCollection();
     return /* @__PURE__ */ jsx23(CollectionProviderImpl, { ...props, state });
   }, "CollectionInit");
-  CollectionInit.displayName = PROVIDER_NAME + "Init";
+  CollectionInit.displayName = name + "CollectionInit";
   const CollectionProviderImpl = /* @__PURE__ */ __name8((props) => {
     const { scope, children, state } = props;
     const ref = React23.useRef(null);
@@ -31164,10 +31404,27 @@ function createCollection2(name) {
       null
     );
     const composeRefs2 = useComposedRefs(ref, setCollectionElement);
-    const [itemMap, setItemMap] = state;
+    const [collection, setCollection] = state;
+    const registryRef = React23.useRef(
+      new OrderedDict()
+    );
+    const getCollection = React23.useCallback(() => {
+      const registry = registryRef.current;
+      if (!isInDocumentOrder(registry)) {
+        registry.sort(sortByDocumentPosition);
+      }
+      return registry;
+    }, []);
     React23.useEffect(() => {
-      if (!collectionElement) return;
+      if (!collectionElement) {
+        return;
+      }
       const observer = getChildListObserver(() => {
+        setCollection((map) => {
+          const sorted = map.toSorted(sortByDocumentPosition);
+          const orderChanged = sorted.some(([key], index2) => map.keyAt(index2) !== key);
+          return orderChanged ? sorted : map;
+        });
       });
       observer.observe(collectionElement, {
         childList: true,
@@ -31176,28 +31433,36 @@ function createCollection2(name) {
       return () => {
         observer.disconnect();
       };
-    }, [collectionElement]);
+    }, [collectionElement, setCollection]);
     return /* @__PURE__ */ jsx23(
-      CollectionContextProvider,
+      CollectionStableContextProvider,
       {
         scope,
-        itemMap,
-        setItemMap,
-        collectionRef: composeRefs2,
-        collectionRefObject: ref,
-        collectionElement,
-        children
+        collectionElementRef: composeRefs2,
+        collectionElementRefObject: ref,
+        getCollection,
+        setCollection,
+        registryRef,
+        children: /* @__PURE__ */ jsx23(
+          CollectionStatefulContextProvider,
+          {
+            scope,
+            collectionElement,
+            collection,
+            children
+          }
+        )
       }
     );
   }, "CollectionProviderImpl");
-  CollectionProviderImpl.displayName = PROVIDER_NAME + "Impl";
+  CollectionProviderImpl.displayName = name + "CollectionProviderImpl";
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React23.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
-      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
-      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      const context = useStableCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionElementRef);
       return /* @__PURE__ */ jsx23(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
@@ -31209,37 +31474,71 @@ function createCollection2(name) {
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
       const ref = React23.useRef(null);
-      const [element, setElement] = React23.useState(null);
-      const composedRefs = useComposedRefs(forwardedRef, ref, setElement);
-      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      const { setItemMap } = context;
+      const context = useStableCollectionContext(ITEM_SLOT_NAME, scope);
+      const { setCollection, registryRef } = context;
       const itemDataRef = React23.useRef(itemData);
       if (!shallowEqual(itemDataRef.current, itemData)) {
         itemDataRef.current = itemData;
       }
       const memoizedItemData = itemDataRef.current;
+      const registerElement = React23.useCallback(
+        (node) => {
+          const registry = registryRef.current;
+          if (node) {
+            registry.set(node, {
+              ...itemDataRef.current,
+              element: node
+            });
+          } else if (ref.current) {
+            registry.delete(ref.current);
+          }
+        },
+        [registryRef]
+      );
+      const composedRefs = useComposedRefs(forwardedRef, registerElement, ref);
+      useLayoutEffect2(() => {
+        const node = ref.current;
+        const registry = registryRef.current;
+        if (node && registry.has(node)) {
+          registry.set(node, { ...memoizedItemData, element: node });
+        }
+      }, [memoizedItemData, registryRef]);
+      const registeredRef = React23.useRef(null);
       React23.useEffect(() => {
-        const itemData2 = memoizedItemData;
-        setItemMap((map) => {
-          if (!element) {
-            return map;
+        const element = ref.current;
+        const registered = registeredRef.current;
+        if ((registered?.element ?? null) === element && (!element || registered?.itemData === memoizedItemData)) {
+          return;
+        }
+        registeredRef.current = element ? { element, itemData: memoizedItemData } : null;
+        setCollection((map) => {
+          const next = new OrderedDict(map);
+          if (registered && registered.element !== element) {
+            next.delete(registered.element);
           }
-          if (!map.has(element)) {
-            map.set(element, { ...itemData2, element });
-            return map.toSorted(sortByDocumentPosition);
+          if (element) {
+            next.set(element, { ...memoizedItemData, element });
           }
-          return map.set(element, { ...itemData2, element }).toSorted(sortByDocumentPosition);
+          return next.sort(sortByDocumentPosition);
         });
+      });
+      React23.useEffect(() => {
         return () => {
-          setItemMap((map) => {
-            if (!element || !map.has(element)) {
+          const registered = registeredRef.current;
+          registeredRef.current = null;
+          if (!registered) {
+            return;
+          }
+          setCollection((map) => {
+            if (!map.has(registered.element)) {
               return map;
             }
-            map.delete(element);
-            return new OrderedDict(map);
+            const next = new OrderedDict(map);
+            next.delete(registered.element);
+            return next;
           });
         };
-      }, [element, memoizedItemData, setItemMap]);
+      }, [setCollection]);
       return /* @__PURE__ */ jsx23(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
@@ -31249,13 +31548,19 @@ function createCollection2(name) {
   }
   __name8(useInitCollection, "useInitCollection");
   function useCollection3(scope) {
-    const { itemMap } = useCollectionContext(name + "CollectionConsumer", scope);
-    return itemMap;
+    const { collection } = useStatefulCollectionContext(name + "CollectionConsumer", scope);
+    return collection;
   }
   __name8(useCollection3, "useCollection");
+  function useGetCollection(scope) {
+    const { getCollection } = useStableCollectionContext(name + "CollectionConsumer", scope);
+    return getCollection;
+  }
+  __name8(useGetCollection, "useGetCollection");
   const functions = {
     createCollectionScope: createCollectionScope3,
     useCollection: useCollection3,
+    useGetCollection,
     useInitCollection
   };
   return [
@@ -31282,6 +31587,20 @@ function isElementPreceding(a, b) {
   return !!(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
 }
 __name8(isElementPreceding, "isElementPreceding");
+function isInDocumentOrder(dict) {
+  let previous;
+  for (const element of dict.keys()) {
+    if (previous) {
+      const position = previous.compareDocumentPosition(element);
+      if (!(position & Node.DOCUMENT_POSITION_DISCONNECTED) && position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return false;
+      }
+    }
+    previous = element;
+  }
+  return true;
+}
+__name8(isInDocumentOrder, "isInDocumentOrder");
 function sortByDocumentPosition(a, b) {
   return !a[1].element || !b[1].element ? 0 : isElementPreceding(a[1].element, b[1].element) ? -1 : 1;
 }
@@ -31322,11 +31641,18 @@ import * as React21 from "react";
 import * as React20 from "react";
 var __defProp11 = Object.defineProperty;
 var __name10 = (target, value) => __defProp11(target, "name", { value, configurable: true });
+var useReactInsertionEffect2 = React20[" useInsertionEffect ".trim().toString()];
 function useCallbackRef(callback) {
   const callbackRef = React20.useRef(callback);
-  React20.useEffect(() => {
-    callbackRef.current = callback;
-  });
+  if (typeof useReactInsertionEffect2 === "function") {
+    useReactInsertionEffect2(() => {
+      callbackRef.current = callback;
+    });
+  } else {
+    useLayoutEffect2(() => {
+      callbackRef.current = callback;
+    });
+  }
   return React20.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 __name10(useCallbackRef, "useCallbackRef");
@@ -31812,12 +32138,14 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
         }
         return () => {
           container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+          const ownerDocument = container.ownerDocument;
+          const UnmountEvent = CustomEvent;
           setTimeout(() => {
-            const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+            const unmountEvent = new UnmountEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
             container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
             container.dispatchEvent(unmountEvent);
             if (!unmountEvent.defaultPrevented) {
-              focus(previouslyFocusedElement ?? document.body, { select: true });
+              focus(previouslyFocusedElement ?? ownerDocument.body, { select: true });
             }
             container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
             focusScopesStack.remove(focusScope);
@@ -31899,14 +32227,19 @@ function getTabbableEdges(container) {
 __name13(getTabbableEdges, "getTabbableEdges");
 function getTabbableCandidates(container) {
   const nodes = [];
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+  const document2 = container.ownerDocument;
+  const walker = document2.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
     acceptNode: /* @__PURE__ */ __name13((node) => {
       const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
+      if (node.disabled || node.hidden || isHiddenInput) {
+        return NodeFilter.FILTER_SKIP;
+      }
       return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
     }, "acceptNode")
   });
-  while (walker.nextNode()) nodes.push(walker.currentNode);
+  while (walker.nextNode()) {
+    nodes.push(walker.currentNode);
+  }
   return nodes;
 }
 __name13(getTabbableCandidates, "getTabbableCandidates");
@@ -31931,12 +32264,13 @@ function isHidden(node, { upTo }) {
 }
 __name13(isHidden, "isHidden");
 function isSelectableInput(element) {
-  return element instanceof HTMLInputElement && "select" in element;
+  return element.tagName === "INPUT" && typeof element.select === "function";
 }
 __name13(isSelectableInput, "isSelectableInput");
 function focus(element, { select = false } = {}) {
   if (element && element.focus) {
-    const previouslyFocusedElement = document.activeElement;
+    const ownerDocument = element.ownerDocument ?? document;
+    const previouslyFocusedElement = ownerDocument.activeElement;
     element.focus({ preventScroll: true });
     if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
       element.select();
@@ -34072,7 +34406,9 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
         avoidCollisions && shift3({
           mainAxis: true,
           crossAxis: false,
-          limiter: sticky === Sticky.Partial ? limitShift3() : void 0,
+          // Spread rather than passing `limiter: undefined`, which
+          // `exactOptionalPropertyTypes` rejects for Floating UI's optional option.
+          ...sticky === Sticky.Partial ? { limiter: limitShift3() } : {},
           ...detectOverflowOptions
         }),
         avoidCollisions && flip3({ ...detectOverflowOptions }),
@@ -34089,18 +34425,22 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
         }),
         arrow4 && arrow3({ element: arrow4, padding: arrowPadding }),
         transformOrigin({ arrowWidth, arrowHeight }),
-        hideWhenDetached && hide3({
-          strategy: "referenceHidden",
-          ...detectOverflowOptions,
-          // `hide` detects whether the anchor (reference) is clipped, so when
-          // no explicit `collisionBoundary` is set we fall back to Floating
-          // UI's default clipping ancestors (e.g. a scrollable menu). This
-          // lets an occluded submenu hide once its anchor scrolls out of view
-          // (#3237). The collision/size middlewares deliberately keep the
-          // viewport-based default to avoid clamping content rendered inside
-          // transformed or overflow-clipping portal containers.
-          boundary: hasExplicitBoundaries ? detectOverflowOptions.boundary : void 0
-        })
+        hideWhenDetached && // `hide` detects whether the anchor (reference) is clipped, so when
+        // no explicit `collisionBoundary` is set we omit `boundary` entirely
+        // and fall back to Floating UI's default clipping ancestors (e.g. a
+        // scrollable menu). This lets an occluded submenu hide once its anchor
+        // scrolls out of view (#3237). The collision/size middlewares
+        // deliberately keep the viewport-based default to avoid clamping
+        // content rendered inside transformed or overflow-clipping portal
+        // containers. The key is omitted rather than set to `undefined`
+        // because `exactOptionalPropertyTypes` rejects the explicit value.
+        hide3(
+          hasExplicitBoundaries ? { strategy: "referenceHidden", ...detectOverflowOptions } : {
+            strategy: "referenceHidden",
+            padding: detectOverflowOptions.padding,
+            altBoundary: detectOverflowOptions.altBoundary
+          }
+        )
       ]
     });
     const setPlacementState = context.setPlacementState;
@@ -35742,11 +36082,13 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
       const values = items.map((item) => item.textValue);
       const nextMatch = getNextMatch(values, search, currentMatch);
       const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
-      (/* @__PURE__ */ __name21((function updateSearch(value) {
+      function updateSearch(value) {
         searchRef.current = value;
         window.clearTimeout(timerRef.current);
         if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
-      }), "updateSearch"))(search);
+      }
+      __name21(updateSearch, "updateSearch");
+      updateSearch(search);
       if (newItem) {
         setTimeout(() => newItem.focus());
       }
@@ -37529,10 +37871,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect49, useMemo as useMemo36, useRef as useRef27, useState as useState40 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo36, useRef as useRef27, useState as useState40 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect48, useMemo as useMemo35, useRef as useRef26, useState as useState39 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo35, useRef as useRef26, useState as useState39 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -37663,7 +38005,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect48(() => {
+  useEffect47(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -37679,7 +38021,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState39(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect48(() => subscribeToRegistry(setEntries), []);
+  useEffect47(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -37696,7 +38038,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState40("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect49(() => {
+  useEffect48(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -37707,7 +38049,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect49(() => {
+  useEffect48(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -37896,7 +38238,7 @@ var ToastProvider = ({
 };
 
 // src/hooks/useCameraPreset.ts
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback22 } from "react";
 function useCameraPreset({
   setAutoRotate,
   setAutoRotateUserToggled,
@@ -37906,7 +38248,7 @@ function useCameraPreset({
   isAnimatingRef,
   lastPresetSelectTime
 }) {
-  const handleCameraPresetSelect = useCallback21(
+  const handleCameraPresetSelect = useCallback22(
     (preset) => {
       setAutoRotate(false);
       setAutoRotateUserToggled(true);
@@ -37936,7 +38278,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState41, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect50 } from "react";
+import { useState as useState41, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect49 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
   const [menuVisible, setMenuVisible] = useState41(false);
   const [menuPos, setMenuPos] = useState41({
@@ -37953,7 +38295,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
       longPressTimeoutRef.current = null;
     }
   };
-  const handleContextMenu = useCallback22(
+  const handleContextMenu = useCallback23(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
@@ -37980,7 +38322,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     },
     [setMenuPos, setMenuVisible, onOpen]
   );
-  const handleTouchStart = useCallback22(
+  const handleTouchStart = useCallback23(
     (e) => {
       if (e.touches.length === 1) {
         const touch = e.touches[0];
@@ -38014,7 +38356,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     },
     [containerRef, onOpen]
   );
-  const handleTouchMove = useCallback22((e) => {
+  const handleTouchMove = useCallback23((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -38032,7 +38374,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback22(() => {
+  const handleTouchEnd = useCallback23(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -38040,7 +38382,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
       }
     }, 0);
   }, []);
-  const handleClickAway = useCallback22((e) => {
+  const handleClickAway = useCallback23((e) => {
     const target = e.target;
     if (menuRef.current && menuRef.current.contains(target)) {
       return;
@@ -38053,7 +38395,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect50(() => {
+  useEffect49(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -38087,10 +38429,10 @@ var useContextMenu = ({ containerRef, onOpen }) => {
 };
 
 // src/hooks/useGlobalDownloadGltf.ts
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
 var useGlobalDownloadGltf = () => {
-  return useCallback23(() => {
+  return useCallback24(() => {
     const root = window.__TSCIRCUIT_THREE_OBJECT;
     if (!root) return;
     const exporter = new GLTFExporter2();
@@ -38117,7 +38459,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;
@@ -38168,7 +38510,7 @@ var CadViewerInner = (props) => {
   const sceneRef = useContext11(SchematicNavigationContext);
   const [selectedComponent, setSelectedComponent] = useState42();
   const [selectedCadComponent, setSelectedCadComponent] = useState42();
-  const handleMenuOpen = useCallback24(
+  const handleMenuOpen = useCallback25(
     (position) => {
       setSelectedCadComponent(
         pickCadComponent(sceneRef.current, position, circuitJson)
@@ -38191,7 +38533,7 @@ var CadViewerInner = (props) => {
   const isAnimatingRef = useRef29(false);
   const lastPresetSelectTime = useRef29(0);
   const PRESET_COOLDOWN = 1e3;
-  const handleUserInteraction = useCallback24(() => {
+  const handleUserInteraction = useCallback25(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
       return;
     }
@@ -38202,15 +38544,15 @@ var CadViewerInner = (props) => {
       setCameraPreset("Custom");
     }
   }, [menuVisible]);
-  const toggleAutoRotate = useCallback24(() => {
+  const toggleAutoRotate = useCallback25(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
   const downloadGltf = useGlobalDownloadGltf();
-  const closeMenu = useCallback24(() => {
+  const closeMenu = useCallback25(() => {
     setMenuVisible(false);
   }, [setMenuVisible]);
-  const handleCameraControllerReady = useCallback24(
+  const handleCameraControllerReady = useCallback25(
     (controller) => {
       cameraControllerRef.current = controller;
       externalCameraControllerReady?.(controller);
@@ -38284,24 +38626,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect51(() => {
+  useEffect50(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect51(() => {
+  useEffect50(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect51(() => {
+  useEffect50(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect51(() => {
+  useEffect50(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect51(() => {
+  useEffect50(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? circuitKey : void 0;
@@ -38440,11 +38782,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();
@@ -38458,12 +38800,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,
@@ -38491,10 +38833,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";
@@ -38502,12 +38844,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();
@@ -38540,9 +38882,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);
@@ -38556,13 +38898,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,
@@ -38572,9 +38914,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);
@@ -38591,17 +38933,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,
@@ -38611,22 +38953,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,
@@ -38647,11 +38989,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;
@@ -38665,11 +39007,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();
@@ -38701,28 +39043,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) {
@@ -38740,7 +39082,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect52, useState as useState43, useMemo as useMemo37, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect51, useState as useState43, useMemo as useMemo37, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo37(() => document.createElement("a"), []);
@@ -38753,7 +39095,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect52(
+  useEffect51(
     () => () => {
       link.remove();
       instance = null;
@@ -38761,7 +39103,7 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback25((obj3D) => {
+  const ref = useCallback26((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
@@ -38770,11 +39112,11 @@ function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
   const [url, setUrl] = useState43();
   const [error, setError] = useState43();
-  const ref = useCallback25(
+  const ref = useCallback26(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect52(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect51(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {