@tscircuit/3d-viewer 0.0.621 → 0.0.623

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,7 +18979,7 @@ var useHiddenCadComponents = (circuitKey) => {
 };
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useContext as useContext11, useEffect as useEffect51, useRef as useRef29, useState as useState42 } from "react";
+import { 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
@@ -20951,7 +20951,7 @@ import * as THREE26 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.620",
+  version: "0.0.622",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -20990,7 +20990,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "@tscircuit/cableprinter": "^0.0.6",
-    "circuit-json": "^0.0.515",
+    "circuit-json": "^0.0.525",
     "circuit-to-canvas": "^0.0.135",
     "jscad-electronics": "^0.0.213",
     "react-hot-toast": "^2.6.0",
@@ -23069,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);
@@ -23800,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;
@@ -24017,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
@@ -24054,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
@@ -24107,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
@@ -24151,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
@@ -24171,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
       });
@@ -24196,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;
@@ -24260,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,
@@ -24281,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") {
@@ -24291,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],
@@ -24542,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 THREE42 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) => {
@@ -24595,9 +24640,111 @@ 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 { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import * as THREE30 from "three";
 function createPadTextureForLayer({
   layer,
@@ -24632,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: {
@@ -24768,7 +24915,7 @@ function createPanelOutlineTextureForLayer({
 
 // src/utils/trace-texture.ts
 import * as THREE32 from "three";
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
   layer,
@@ -24806,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: {
@@ -24863,7 +25010,7 @@ function createTraceTextureForLayer({
 }
 
 // src/textures/create-copper-pour-texture-for-layer.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
 import * as THREE33 from "three";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
@@ -24920,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: {
@@ -25001,7 +25148,7 @@ function createCopperPourTextureForLayer({
 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,
@@ -25018,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: {
@@ -25048,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: {
@@ -25126,7 +25273,7 @@ function createCopperTextTextureForLayer({
 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;
@@ -25224,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: {
@@ -25366,7 +25513,7 @@ function createFabricationNoteTextureForLayer({
 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,
@@ -25383,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: {
@@ -25451,7 +25598,7 @@ function createKeepoutTextureForLayer({
 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({
@@ -25530,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: {
@@ -25615,7 +25762,7 @@ function createPcbNoteTextureForLayer({
 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) => {
@@ -25652,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: {
@@ -25776,7 +25923,7 @@ function createSilkscreenTextureForLayer({
 import * as THREE40 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
 import * as THREE39 from "three";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
@@ -25839,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: {
@@ -25888,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: {
@@ -25952,7 +26099,7 @@ function createSoldermaskTextureForLayer({
 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,
@@ -25970,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: {
@@ -26110,7 +26257,8 @@ var createCombinedTexture = ({
   textures,
   boardData,
   traceTextureResolution,
-  layer
+  layer,
+  openViaHoles
 }) => {
   const hasImage = textures.some((texture) => texture?.image);
   if (!hasImage) return null;
@@ -26132,6 +26280,14 @@ 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"
   });
@@ -26193,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;
@@ -26281,6 +26442,7 @@ function createCombinedBoardTextures({
       traceTextureResolution
     }) : null;
     const boardTexture = createCombinedTexture({
+      openViaHoles,
       textures: [
         copperPourTexture,
         traceTexture,
@@ -29546,11 +29708,13 @@ function createViaCopper2({
 
 // src/utils/manifold/process-vias.ts
 var COPPER_COLOR2 = new THREE51.Color(...colors.copper);
-function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
+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,
@@ -29563,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({
@@ -29585,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 };
 }
 
@@ -29746,7 +29933,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         circuitJson,
         currentPcbThickness,
         manifoldInstancesForCleanup.current,
-        boardClipVolume
+        boardClipVolume,
+        allBoardDrills
       );
       allBoardDrills.push(...viaBoardDrills);
       currentGeoms.vias = viaCopperGeoms;
@@ -30612,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);
@@ -30671,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");
@@ -30731,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) {
@@ -30878,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;
   }
@@ -30949,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);
@@ -30967,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);
@@ -31073,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]);
@@ -31087,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]);
@@ -31098,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);
   }
@@ -31118,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;
   }
@@ -31179,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");
@@ -31197,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);
@@ -31205,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,
@@ -31217,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 });
     }
   );
@@ -31250,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 });
     }
   );
@@ -31290,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 [
@@ -31323,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;
 }
@@ -31363,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");
@@ -31853,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);
@@ -31940,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");
@@ -31972,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();
@@ -34113,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 }),
@@ -34130,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;
@@ -35783,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());
       }
@@ -37570,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;
@@ -37704,7 +38005,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect48(() => {
+  useEffect47(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -37720,7 +38021,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState39(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect48(() => subscribeToRegistry(setEntries), []);
+  useEffect47(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -37737,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") {
@@ -37748,7 +38049,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect49(() => {
+  useEffect48(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -37937,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,
@@ -37947,7 +38248,7 @@ function useCameraPreset({
   isAnimatingRef,
   lastPresetSelectTime
 }) {
-  const handleCameraPresetSelect = useCallback21(
+  const handleCameraPresetSelect = useCallback22(
     (preset) => {
       setAutoRotate(false);
       setAutoRotateUserToggled(true);
@@ -37977,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({
@@ -37994,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;
@@ -38021,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];
@@ -38055,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;
     }
@@ -38073,7 +38374,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback22(() => {
+  const handleTouchEnd = useCallback23(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -38081,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;
@@ -38094,7 +38395,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect50(() => {
+  useEffect49(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -38128,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();
@@ -38209,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)
@@ -38232,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;
     }
@@ -38243,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);
@@ -38325,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;
@@ -38781,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"), []);
@@ -38794,7 +39095,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect52(
+  useEffect51(
     () => () => {
       link.remove();
       instance = null;
@@ -38802,7 +39103,7 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback25((obj3D) => {
+  const ref = useCallback26((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
@@ -38811,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 = {}) {