@tscircuit/pcb-viewer 1.11.395 → 1.11.396

package/dist/index.js

@@ -2643,7 +2643,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo9, useRef as useRef16, useState as useState13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo10, useRef as useRef16, useState as useState13 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -4447,7 +4447,7 @@ var animateTransform = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo8, useRef as useRef15, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo9, useRef as useRef15, useState as useState12 } from "react";
 
 // src/lib/Drawer.ts
 import colorParser from "color";
@@ -7578,7 +7578,7 @@ var DebugGraphicsOverlay = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
 import { applyToPoint as applyToPoint10, identity as identity3, inverse as inverse3 } from "transformation-matrix";
 
 // src/lib/util/get-primitive-bounding-box.ts
@@ -7953,10 +7953,55 @@ var getPrimitiveSnapPoints = (primitive) => {
   }
 };
 
+// src/components/DimensionSnapGuides.tsx
+import { memo, useMemo as useMemo4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var markerPath = ({ screenPoint: { x, y } }) => `M${x - 2.5},${y - 2.5}l5,5m0,-5l-5,5`;
+var DimensionSnapGuides = memo(function DimensionSnapGuides2({
+  points,
+  startId,
+  endId
+}) {
+  const { path, pointsById } = useMemo4(
+    () => ({
+      path: points.map(markerPath).join(""),
+      pointsById: new Map(points.map((point) => [point.id, point]))
+    }),
+    [points]
+  );
+  const activePath = [.../* @__PURE__ */ new Set([startId, endId])].flatMap((id) => {
+    const point = id === null ? void 0 : pointsById.get(id);
+    return point ? [markerPath(point)] : [];
+  }).join("");
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "100%",
+      height: "100%",
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: zIndexMap.dimensionOverlay
+      },
+      fill: "none",
+      strokeWidth: 1,
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: path, stroke: "white" }),
+        /* @__PURE__ */ jsx5("path", { d: activePath, stroke: "#66ccff" })
+      ]
+    }
+  );
+});
+
 // src/components/DimensionOverlay.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_PX = 16;
-var SNAP_MARKER_SIZE = 5;
+var EMPTY_PRIMITIVES = [];
+var DEFAULT_TRANSFORM = identity3();
 var shouldExcludePrimitiveFromSnapping = (primitive) => {
   if (primitive.pcb_drawing_type === "text") return true;
   const element = primitive._element;
@@ -7977,11 +8022,11 @@ var DimensionOverlay = ({
   children,
   transform,
   focusOnHover = false,
-  primitives = [],
+  primitives = EMPTY_PRIMITIVES,
   onBoundsSelected,
   cancelPanDrag
 }) => {
-  if (!transform) transform = identity3();
+  if (!transform) transform = DEFAULT_TRANSFORM;
   const [dimensionToolVisible, setDimensionToolVisible] = useState4(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState4(false);
   const [measureToolArmed, setMeasureToolArmed] = useState4(false);
@@ -8013,7 +8058,7 @@ var DimensionOverlay = ({
   const containerRef = useRef5(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
-  const elementBoundingBoxes = useMemo4(() => {
+  const elementBoundingBoxes = useMemo5(() => {
     const boundingBoxes = /* @__PURE__ */ new Map();
     for (const primitive of primitives) {
       if (!primitive._element) continue;
@@ -8031,7 +8076,7 @@ var DimensionOverlay = ({
     }
     return boundingBoxes;
   }, [primitives]);
-  const primitiveSnappingPoints = useMemo4(() => {
+  const primitiveSnappingPoints = useMemo5(() => {
     const snapPoints = [];
     for (const primitive of primitives) {
       if (!primitive._element) continue;
@@ -8048,7 +8093,7 @@ var DimensionOverlay = ({
     }
     return snapPoints;
   }, [primitives]);
-  const snappingPoints = useMemo4(() => {
+  const snappingPoints = useMemo5(() => {
     const points = [];
     elementBoundingBoxes.forEach((bounds, element) => {
       if (!bounds) return;
@@ -8083,7 +8128,7 @@ var DimensionOverlay = ({
     });
     return points;
   }, [elementBoundingBoxes, primitiveSnappingPoints]);
-  const snappingPointsWithScreen = useMemo4(() => {
+  const snappingPointsWithScreen = useMemo5(() => {
     return snappingPoints.map((snap, index) => ({
       ...snap,
       id: `${index}-${snap.anchor}`,
@@ -8235,7 +8280,7 @@ var DimensionOverlay = ({
     flipX: arrowScreenBounds.flipX,
     flipY: arrowScreenBounds.flipY
   });
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
@@ -8320,8 +8365,8 @@ var DimensionOverlay = ({
       },
       children: [
         children,
-        boundsToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx5(
+        boundsToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
             "svg",
             {
               style: {
@@ -8334,7 +8379,7 @@ var DimensionOverlay = ({
               },
               width: containerBounds.width,
               height: containerBounds.height,
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "rect",
                 {
                   x: boundsScreenRect.left,
@@ -8349,7 +8394,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8370,7 +8415,7 @@ var DimensionOverlay = ({
                 ", minY:",
                 " ",
                 selectedBounds.minY.toFixed(2),
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "maxX: ",
                 selectedBounds.maxX.toFixed(2),
                 ", maxY:",
@@ -8380,8 +8425,8 @@ var DimensionOverlay = ({
             }
           )
         ] }),
-        dimensionToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          diagonalLabel.show && /* @__PURE__ */ jsx5(
+        dimensionToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          diagonalLabel.show && /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8399,7 +8444,7 @@ var DimensionOverlay = ({
               children: diagonalLabel.distance.toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8419,7 +8464,7 @@ var DimensionOverlay = ({
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8437,7 +8482,7 @@ var DimensionOverlay = ({
                 fontFamily: "sans-serif",
                 zIndex: zIndexMap.dimensionOverlay
               },
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -8449,7 +8494,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "svg",
             {
               style: {
@@ -8463,7 +8508,7 @@ var DimensionOverlay = ({
               width: containerBounds.width,
               height: containerBounds.height,
               children: [
-                /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6(
                   "marker",
                   {
                     id: "head",
@@ -8472,10 +8517,10 @@ var DimensionOverlay = ({
                     markerHeight: "4",
                     refX: "2",
                     refY: "2",
-                    children: /* @__PURE__ */ jsx5("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
+                    children: /* @__PURE__ */ jsx6("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -8488,7 +8533,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -8501,7 +8546,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -8517,50 +8562,15 @@ var DimensionOverlay = ({
               ]
             }
           ),
-          dimensionToolStretching && snappingPointsWithScreen.map((snap) => {
-            const isActive = snap.id === activeSnapIds.start || snap.id === activeSnapIds.end;
-            const half = SNAP_MARKER_SIZE / 2;
-            return /* @__PURE__ */ jsxs3(
-              "svg",
-              {
-                width: SNAP_MARKER_SIZE,
-                height: SNAP_MARKER_SIZE,
-                style: {
-                  position: "absolute",
-                  left: snap.screenPoint.x - half,
-                  top: snap.screenPoint.y - half,
-                  pointerEvents: "none",
-                  zIndex: zIndexMap.dimensionOverlay
-                },
-                children: [
-                  /* @__PURE__ */ jsx5(
-                    "line",
-                    {
-                      x1: 0,
-                      y1: 0,
-                      x2: SNAP_MARKER_SIZE,
-                      y2: SNAP_MARKER_SIZE,
-                      stroke: isActive ? "#66ccff" : "white",
-                      strokeWidth: 1
-                    }
-                  ),
-                  /* @__PURE__ */ jsx5(
-                    "line",
-                    {
-                      x1: SNAP_MARKER_SIZE,
-                      y1: 0,
-                      x2: 0,
-                      y2: SNAP_MARKER_SIZE,
-                      stroke: isActive ? "#66ccff" : "white",
-                      strokeWidth: 1
-                    }
-                  )
-                ]
-              },
-              snap.id
-            );
-          }),
-          /* @__PURE__ */ jsxs3(
+          dimensionToolStretching && /* @__PURE__ */ jsx6(
+            DimensionSnapGuides,
+            {
+              points: snappingPointsWithScreen,
+              startId: activeSnapIds.start,
+              endId: activeSnapIds.end
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8578,13 +8588,13 @@ var DimensionOverlay = ({
                 ",",
                 dStart.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "(",
                 dEnd.x.toFixed(2),
                 ",",
                 dEnd.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "dist:",
                 " ",
                 Math.sqrt(
@@ -8602,7 +8612,7 @@ var DimensionOverlay = ({
 // src/components/EditPlacementOverlay.tsx
 import { useRef as useRef6, useState as useState5 } from "react";
 import { applyToPoint as applyToPoint11, identity as identity4, inverse as inverse4 } from "transformation-matrix";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component, point, padding = 0) => {
   const halfWidth = pcb_component.width / 2;
   const halfHeight = pcb_component.height / 2;
@@ -8632,7 +8642,7 @@ var EditPlacementOverlay = ({
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode);
   const setIsMovingComponent = useGlobalStore((s) => s.setIsMovingComponent);
   const disabled = disabledProp || !in_move_footprint_mode;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: containerRef,
@@ -8718,7 +8728,7 @@ var EditPlacementOverlay = ({
         !disabled && soup.filter((e) => e.type === "pcb_component").map((e) => {
           if (!e?.center) return null;
           const projectedCenter = applyToPoint11(transform, e.center);
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             "div",
             {
               style: {
@@ -8781,10 +8791,10 @@ var getPopupPosition = (errorCenter, containerRef) => {
 };
 
 // src/components/FocusMarkerSVG.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FocusMarkerSVG = ({
   center
-}) => /* @__PURE__ */ jsxs5(
+}) => /* @__PURE__ */ jsxs6(
   "svg",
   {
     style: {
@@ -8798,7 +8808,7 @@ var FocusMarkerSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "circle",
         {
           cx: center.x,
@@ -8810,8 +8820,8 @@ var FocusMarkerSVG = ({
           opacity: 0.95
         }
       ),
-      /* @__PURE__ */ jsx7("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x - 18,
@@ -8822,7 +8832,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x + 8,
@@ -8833,7 +8843,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8844,7 +8854,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8860,11 +8870,11 @@ var FocusMarkerSVG = ({
 );
 
 // src/components/ErrorOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var ErrorMarkerSVG = ({
   errorCenter,
   isHighlighted = false
-}) => /* @__PURE__ */ jsx8(
+}) => /* @__PURE__ */ jsx9(
   "svg",
   {
     style: {
@@ -8877,7 +8887,7 @@ var ErrorMarkerSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx9(
       "rect",
       {
         x: errorCenter.x - 7,
@@ -8921,7 +8931,7 @@ var ErrorOverlay = ({
   );
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
   if (!elements) {
-    return /* @__PURE__ */ jsx8("div", { style: { position: "relative" }, ref: containerRef, children });
+    return /* @__PURE__ */ jsx9("div", { style: { position: "relative" }, ref: containerRef, children });
   }
   const traceErrors = elements.filter(
     (el) => el.type === "pcb_trace_error" && !el.message?.includes("Multiple components found with name")
@@ -8954,7 +8964,7 @@ var ErrorOverlay = ({
       focusedErrorElement
     );
   }
-  return /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     traceErrors.map((el, index) => {
       const errorId = getErrorId(el, index);
@@ -8963,15 +8973,15 @@ var ErrorOverlay = ({
       const errorCenter = getScreenErrorCenter(el);
       if (!errorCenter) return null;
       const popupPosition = getPopupPosition(errorCenter, containerRef);
-      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9006,7 +9016,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9024,7 +9034,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -9049,15 +9059,15 @@ var ErrorOverlay = ({
         { x: errorCenter.x, y: errorCenter.y },
         containerRef
       );
-      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9092,7 +9102,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9110,7 +9120,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -9159,8 +9169,8 @@ var ErrorOverlay = ({
           Math.min(maxRadius, baseRadius * scale7)
         );
         const popupPosition = getPopupPosition(screenCenter, containerRef);
-        return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsx9(
             "svg",
             {
               style: {
@@ -9173,13 +9183,13 @@ var ErrorOverlay = ({
               },
               width: "100%",
               height: "100%",
-              children: isHighlighted ? /* @__PURE__ */ jsx8(
+              children: isHighlighted ? /* @__PURE__ */ jsx9(
                 "polygon",
                 {
                   points: `${screenCenter.x},${screenCenter.y - scaledRadius * 1.25} ${screenCenter.x + scaledRadius},${screenCenter.y} ${screenCenter.x},${screenCenter.y + scaledRadius * 1.25} ${screenCenter.x - scaledRadius},${screenCenter.y}`,
                   fill: "#ff4444"
                 }
-              ) : /* @__PURE__ */ jsx8(
+              ) : /* @__PURE__ */ jsx9(
                 "circle",
                 {
                   cx: screenCenter.x,
@@ -9193,7 +9203,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -9228,7 +9238,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -9246,7 +9256,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -9262,7 +9272,7 @@ var ErrorOverlay = ({
         ] }, `${errorId}_${compIndex}`);
       });
     }),
-    focusScreenCenter && /* @__PURE__ */ jsx8(FocusMarkerSVG, { center: focusScreenCenter })
+    focusScreenCenter && /* @__PURE__ */ jsx9(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
 
@@ -9277,7 +9287,7 @@ function ifSetsMatchExactly(set1, set2) {
 }
 
 // src/components/MouseElementTracker.tsx
-import { useEffect as useEffect10, useMemo as useMemo5, useState as useState7 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useState as useState7 } from "react";
 import { applyToPoint as applyToPoint15, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/common/guards.ts
@@ -9313,7 +9323,7 @@ var COLORS = {
 };
 
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var AnchorOffsetOverlay = ({
   targets,
   transform,
@@ -9336,7 +9346,7 @@ var AnchorOffsetOverlay = ({
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
@@ -9349,7 +9359,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         "svg",
         {
           style: {
@@ -9379,8 +9389,8 @@ var AnchorOffsetOverlay = ({
               const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
               const xLabelText = `${target.display_offset_x ?? offsetX.toFixed(2)}mm`;
               const yLabelText = `${target.display_offset_y ?? offsetY.toFixed(2)}mm`;
-              return /* @__PURE__ */ jsxs7("g", { children: [
-                /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsxs8("g", { children: [
+                /* @__PURE__ */ jsx10(
                   "line",
                   {
                     x1: anchorMarkerScreen.x,
@@ -9392,7 +9402,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -9404,7 +9414,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx9(
+                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx10(
                   "circle",
                   {
                     cx: targetScreen.x,
@@ -9416,8 +9426,8 @@ var AnchorOffsetOverlay = ({
                   }
                 ) : (
                   // assumes "group"
-                  /* @__PURE__ */ jsxs7(Fragment3, { children: [
-                    /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                    /* @__PURE__ */ jsx10(
                       "line",
                       {
                         x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -9428,7 +9438,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -9441,7 +9451,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx9(
+                shouldShowXLabel && /* @__PURE__ */ jsx10(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -9449,10 +9459,10 @@ var AnchorOffsetOverlay = ({
                     width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
                     height: 20,
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx9("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                    children: /* @__PURE__ */ jsx10("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
                   }
                 ),
-                shouldShowYLabel && /* @__PURE__ */ jsx9(
+                shouldShowYLabel && /* @__PURE__ */ jsx10(
                   "foreignObject",
                   {
                     x: targetScreen.x + yLabelOffset,
@@ -9460,7 +9470,7 @@ var AnchorOffsetOverlay = ({
                     width: VISUAL_CONFIG.Y_LABEL_MIN_WIDTH,
                     height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx10(
                       "div",
                       {
                         style: {
@@ -9479,8 +9489,8 @@ var AnchorOffsetOverlay = ({
                 )
               ] }, target.id);
             }),
-            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs7("g", { children: [
-              /* @__PURE__ */ jsx9(
+            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs8("g", { children: [
+              /* @__PURE__ */ jsx10(
                 "line",
                 {
                   x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -9491,7 +9501,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -9511,7 +9521,7 @@ var AnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/BoardAnchorOffsetOverlay.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var BoardAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9598,7 +9608,7 @@ var BoardAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -9610,7 +9620,7 @@ var BoardAnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/GroupAnchorOffsetOverlay.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9726,7 +9736,7 @@ var GroupAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -9739,7 +9749,7 @@ var GroupAnchorOffsetOverlay = ({
 
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
 import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
   const padsAndHoles = elements.filter(
@@ -9782,7 +9792,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -9795,7 +9805,7 @@ var ComponentBoundingBoxOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "svg",
         {
           style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
@@ -9821,8 +9831,8 @@ var ComponentBoundingBoxOverlay = ({
               y: (bbox.minY + bbox.maxY) / 2
             };
             const componentCenterScreen = applyToPoint14(transform, componentCenter);
-            return /* @__PURE__ */ jsxs8("g", { children: [
-              /* @__PURE__ */ jsx12(
+            return /* @__PURE__ */ jsxs9("g", { children: [
+              /* @__PURE__ */ jsx13(
                 "rect",
                 {
                   x: screenBbox.x,
@@ -9835,7 +9845,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -9846,7 +9856,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -9857,7 +9867,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -9877,7 +9887,7 @@ var ComponentBoundingBoxOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/PanelAnchorOffsetOverlay.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var PanelAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9926,7 +9936,7 @@ var PanelAnchorOffsetOverlay = ({
       display_offset_y: target.board.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -10016,7 +10026,7 @@ function filterTracesIfMultiple(filterTraces) {
 
 // src/components/ElementOverlayBox.tsx
 import { useEffect as useEffect9, useState as useState6 } from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var containerStyle = {
   position: "absolute",
   left: 0,
@@ -10107,7 +10117,7 @@ var HighlightedPrimitiveBoxWithText = ({
     const traceTextContext = { primitiveElement, elements };
     const overlayInfo = getTraceOverlayInfo(traceTextContext);
     if (!overlayInfo) return null;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         style: {
@@ -10118,7 +10128,7 @@ var HighlightedPrimitiveBoxWithText = ({
           color: color8,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -10135,8 +10145,8 @@ var HighlightedPrimitiveBoxWithText = ({
               whiteSpace: "nowrap"
             },
             children: [
-              overlayInfo.text && /* @__PURE__ */ jsx14("div", { children: overlayInfo.text }),
-              overlayInfo.name && /* @__PURE__ */ jsx14(
+              overlayInfo.text && /* @__PURE__ */ jsx15("div", { children: overlayInfo.text }),
+              overlayInfo.name && /* @__PURE__ */ jsx15(
                 "div",
                 {
                   style: {
@@ -10155,7 +10165,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       style: {
@@ -10169,7 +10179,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -10185,7 +10195,7 @@ var HighlightedPrimitiveBoxWithText = ({
             opacity: finalState ? 1 : si === 0 ? 1 : 0,
             transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
           },
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx15(
             "div",
             {
               style: {
@@ -10233,7 +10243,7 @@ var ElementOverlayBox = ({
     is_showing_multiple_traces_length,
     elements
   });
-  return /* @__PURE__ */ jsx14("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx15(
     HighlightedPrimitiveBoxWithText,
     {
       primitive,
@@ -10245,7 +10255,7 @@ var ElementOverlayBox = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -10368,7 +10378,7 @@ var MouseElementTracker = ({
     setMousedPrimitives([]);
     onMouseHoverOverPrimitives([]);
   }, [selectedLayer, onMouseHoverOverPrimitives]);
-  const highlightedPrimitives = useMemo5(() => {
+  const highlightedPrimitives = useMemo6(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
       if (primitive._element?.type === "pcb_via") continue;
@@ -10448,7 +10458,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -10472,7 +10482,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           ElementOverlayBox,
           {
             elements,
@@ -10480,8 +10490,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-          /* @__PURE__ */ jsx15(
+        transform && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx16(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -10491,7 +10501,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -10501,7 +10511,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -10511,7 +10521,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -10531,7 +10541,7 @@ var MouseElementTracker = ({
 import { applyToPoint as applyToPoint16 } from "transformation-matrix";
 import { identity as identity6 } from "transformation-matrix";
 import { useRef as useRef8, useEffect as useEffect11 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -10767,14 +10777,14 @@ var PcbGroupOverlay = ({
     is_showing_group_anchor_offsets,
     hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "canvas",
           {
             ref: canvasRef,
@@ -10795,15 +10805,15 @@ var PcbGroupOverlay = ({
 
 // src/components/RatsNestOverlay.tsx
 import { applyToPoint as applyToPoint17, identity as identity7 } from "transformation-matrix";
-import { useMemo as useMemo6 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
-  const { netMap, idToNetMap } = useMemo6(
+  const { netMap, idToNetMap } = useMemo7(
     () => getFullConnectivityMapFromCircuitJson(soup || []),
     [soup]
   );
-  const ratsNestLines = useMemo6(() => {
+  const ratsNestLines = useMemo7(() => {
     if (!soup || !isShowingRatsNest) return [];
     const getElementPosition = (id) => {
       const element = su(soup)[id.replace(/_\d+$/, "")].get(id);
@@ -10859,9 +10869,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity7();
-  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "svg",
       {
         style: {
@@ -10877,7 +10887,7 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
           const transformedStart = applyToPoint17(transform, startPoint);
           const transformedEnd = applyToPoint17(transform, endPoint);
-          return /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsx18(
             "line",
             {
               x1: transformedStart.x,
@@ -10909,7 +10919,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.394",
+  version: "1.11.395",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -11071,7 +11081,7 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
 var import_react_dom = __toESM(require_react_dom(), 1);
 import { css as css2 } from "@emotion/css";
 import { useEffect as useEffect14, useRef as useRef11, useState as useState9 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var menuStyle = css2`
   background: #222;
   color: #eee;
@@ -11134,7 +11144,7 @@ var VisibilityContextMenu = ({
     };
   }, [onClose]);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -11193,13 +11203,13 @@ var VisibilityContextMenu = ({
           maxHeight: window.innerHeight - 8,
           ...stacked ? { overflowY: "auto" } : {}
         },
-        children: /* @__PURE__ */ jsxs13(
+        children: /* @__PURE__ */ jsxs14(
           "div",
           {
             style: { position: "relative" },
             onMouseEnter: () => setVisibilityOpen(true),
             children: [
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 "button",
                 {
                   type: "button",
@@ -11211,20 +11221,20 @@ var VisibilityContextMenu = ({
                   children: "Visibility \u25B8"
                 }
               ),
-              visibilityOpen && /* @__PURE__ */ jsx18(
+              visibilityOpen && /* @__PURE__ */ jsx19(
                 "div",
                 {
                   role: "menu",
                   "aria-label": "Visibility",
                   className: menuStyle,
                   style: submenuStyle,
-                  children: /* @__PURE__ */ jsxs13(
+                  children: /* @__PURE__ */ jsxs14(
                     "div",
                     {
                       style: { position: "relative" },
                       onMouseEnter: () => setOpacityOpen(true),
                       children: [
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx19(
                           "button",
                           {
                             type: "button",
@@ -11236,7 +11246,7 @@ var VisibilityContextMenu = ({
                             children: "Hidden Layer Visibility \u25B8"
                           }
                         ),
-                        opacityOpen && /* @__PURE__ */ jsx18(
+                        opacityOpen && /* @__PURE__ */ jsx19(
                           "div",
                           {
                             role: "menu",
@@ -11246,7 +11256,7 @@ var VisibilityContextMenu = ({
                               minWidth: 80,
                               ...submenuStyle
                             },
-                            children: [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs13(
+                            children: [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs14(
                               "button",
                               {
                                 type: "button",
@@ -11258,7 +11268,7 @@ var VisibilityContextMenu = ({
                                   onClose();
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx18(
+                                  /* @__PURE__ */ jsx19(
                                     "span",
                                     {
                                       "aria-hidden": "true",
@@ -11288,7 +11298,7 @@ var VisibilityContextMenu = ({
 };
 
 // src/components/ToolbarButton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -11296,7 +11306,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...props,
@@ -11324,7 +11334,7 @@ var ToolbarButton = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo8, useState as useState10 } from "react";
 
 // src/lib/util/group-errors-by-type.ts
 var groupErrorsByType = (errors) => {
@@ -11404,7 +11414,7 @@ var useToolbarErrorFocus = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var CopyErrorButton = ({
   errorId,
   errorMessage,
@@ -11414,7 +11424,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -11434,7 +11444,7 @@ var CopyErrorButton = ({
         ...touchStyle
       },
       ...touchHandlers,
-      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx20("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx20("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx20("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
+      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx21("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx21("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
     }
   );
 };
@@ -11460,14 +11470,14 @@ var ToolbarErrorDropdown = ({
     setHoveredErrorId,
     setFocusedErrorId
   });
-  const errorElements = useMemo7(
+  const errorElements = useMemo8(
     () => elements?.filter(
       (el) => el.type.includes("error")
     ) ?? [],
     [elements]
   );
   const errorCount = errorElements.length;
-  const groupedErrorElements = useMemo7(
+  const groupedErrorElements = useMemo8(
     () => groupErrorsByType(errorElements),
     [errorElements]
   );
@@ -11493,20 +11503,20 @@ var ToolbarErrorDropdown = ({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs15("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx21(
       ToolbarButton,
       {
         isSmallScreen,
         style: errorCount > 0 ? { color: "red" } : void 0,
         onClick: onToggle,
-        children: /* @__PURE__ */ jsxs14("div", { children: [
+        children: /* @__PURE__ */ jsxs15("div", { children: [
           errorCount,
           " errors"
         ] })
       }
     ),
-    isOpen && errorCount > 0 && /* @__PURE__ */ jsx20(
+    isOpen && errorCount > 0 && /* @__PURE__ */ jsx21(
       "div",
       {
         style: {
@@ -11526,14 +11536,14 @@ var ToolbarErrorDropdown = ({
         },
         children: groupedErrorElements.map(({ errorType, errors }, groupIndex) => {
           const isGroupCollapsed = collapsedErrorGroups.has(errorType);
-          return /* @__PURE__ */ jsxs14(
+          return /* @__PURE__ */ jsxs15(
             "div",
             {
               style: {
                 borderBottom: groupIndex < groupedErrorElements.length - 1 ? "1px solid #444" : "none"
               },
               children: [
-                /* @__PURE__ */ jsxs14(
+                /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     style: {
@@ -11570,7 +11580,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -11580,7 +11590,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx20(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11593,7 +11603,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx20(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11606,7 +11616,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         "div",
                         {
                           style: {
@@ -11624,14 +11634,14 @@ var ToolbarErrorDropdown = ({
                 !isGroupCollapsed && errors.map(({ error, index, errorId }) => {
                   const isExpanded = expandedErrorIds.has(errorId);
                   const errorMessage = error.message ?? "No error message";
-                  return /* @__PURE__ */ jsxs14(
+                  return /* @__PURE__ */ jsxs15(
                     "div",
                     {
                       style: {
                         borderTop: "1px solid #3a3a3a"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs14(
+                        /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             style: {
@@ -11670,7 +11680,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11686,7 +11696,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "button",
                                 {
                                   type: "button",
@@ -11718,7 +11728,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs14(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -11730,7 +11740,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11748,7 +11758,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -11780,10 +11790,10 @@ var ToolbarErrorDropdown = ({
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -11800,8 +11810,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx21("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx22(
           "span",
           {
             style: {
@@ -11822,7 +11832,7 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -11842,16 +11852,16 @@ var CheckboxMenuItem = ({
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx21("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx22("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx21("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -11871,9 +11881,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx21("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx22("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx21("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -12073,7 +12083,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     },
     []
   );
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -12088,14 +12098,14 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        contextMenuPosition && /* @__PURE__ */ jsx21(
+        contextMenuPosition && /* @__PURE__ */ jsx22(
           VisibilityContextMenu,
           {
             position: contextMenuPosition,
             onClose: closeContextMenu
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
@@ -12116,7 +12126,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -12147,7 +12157,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -12158,10 +12168,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs16("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         "span",
                         {
                           style: {
@@ -12173,7 +12183,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx21("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx21(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx22("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx22(
                       LayerButton,
                       {
                         name: layer,
@@ -12187,7 +12197,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -12199,43 +12209,43 @@ var ToolbarOverlay = ({ children, elements }) => {
                   setFocusedErrorId
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx21("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx22("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: boundsToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleBoundsToolClick,
-                  children: /* @__PURE__ */ jsx21("div", { children: "Bounds" })
+                  children: /* @__PURE__ */ jsx22("div", { children: "Bounds" })
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
-                    /* @__PURE__ */ jsxs15(
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs16(
                       "div",
                       {
                         style: {
@@ -12245,7 +12255,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             "span",
                             {
                               style: {
@@ -12260,8 +12270,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs15("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx21(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -12273,7 +12283,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -12285,7 +12295,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -12295,7 +12305,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Warnings",
@@ -12307,7 +12317,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -12319,7 +12329,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -12329,7 +12339,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -12339,7 +12349,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -12349,7 +12359,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -12361,7 +12371,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -12371,7 +12381,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -12383,7 +12393,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -12393,8 +12403,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs15("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx21(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs16("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -12404,7 +12414,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx21(
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -12441,7 +12451,7 @@ var getPcbWarningHighlightLabel = (warning) => {
 };
 
 // src/components/WarningGraphicsOverlay.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
   children,
   transform = identity8(),
@@ -12503,7 +12513,7 @@ var WarningGraphicsOverlay = ({
     });
   }, [elements, transform, width, height, isShowingDrcWarnings]);
   if (!isShowingDrcWarnings) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref: containerRef,
@@ -12512,14 +12522,14 @@ var WarningGraphicsOverlay = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "canvas",
           {
             ref: canvasRef,
@@ -12538,7 +12548,7 @@ var WarningGraphicsOverlay = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const {
@@ -12553,11 +12563,11 @@ var CanvasElementsRenderer = (props) => {
     selectedLayer: state.selected_layer
   }));
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
-  const elementsToRender = useMemo8(
+  const elementsToRender = useMemo9(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
   );
-  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo8(() => {
+  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo9(() => {
     const primitivesWithoutInteractionMetadata2 = elementsToRender.flatMap(
       (elm) => convertElementToPrimitives(elm, props.elements)
     );
@@ -12573,11 +12583,11 @@ var CanvasElementsRenderer = (props) => {
   const [hoveredComponentIds, setHoveredComponentIds] = useState12([]);
   const currentTransformRef = useRef15(transform ?? null);
   const zoomAnimationFrameRef = useRef15(null);
-  const elementIndexes = useMemo8(
+  const elementIndexes = useMemo9(
     () => buildErrorPreviewElementIndexes(elements),
     [elements]
   );
-  const errorRelatedIds = useMemo8(() => {
+  const errorRelatedIds = useMemo9(() => {
     if (!activeErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -12636,7 +12646,7 @@ var CanvasElementsRenderer = (props) => {
     props.setTransform,
     props.width
   ]);
-  const primitives = useMemo8(() => {
+  const primitives = useMemo9(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -12680,7 +12690,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -12688,7 +12698,7 @@ var CanvasElementsRenderer = (props) => {
       primitives: primitivesWithoutInteractionMetadata,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -12697,7 +12707,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             DimensionOverlay,
             {
               transform,
@@ -12705,23 +12715,23 @@ var CanvasElementsRenderer = (props) => {
               primitives: primitivesWithoutInteractionMetadata,
               onBoundsSelected: props.onBoundsSelected,
               cancelPanDrag: props.cancelPanDrag,
-              children: /* @__PURE__ */ jsx23(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx23(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx23(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx23(
+              children: /* @__PURE__ */ jsx24(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx24(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx24(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx24(
                 PcbGroupOverlay,
                 {
                   transform,
                   elements,
                   hoveredComponentIds,
-                  children: /* @__PURE__ */ jsx23(
+                  children: /* @__PURE__ */ jsx24(
                     DebugGraphicsOverlay,
                     {
                       transform,
                       debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx23(
+                      children: /* @__PURE__ */ jsx24(
                         WarningGraphicsOverlay,
                         {
                           transform,
                           elements,
-                          children: /* @__PURE__ */ jsx23(
+                          children: /* @__PURE__ */ jsx24(
                             CanvasPrimitiveRenderer,
                             {
                               transform,
@@ -12801,7 +12811,7 @@ var calculateBoardSizeKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var defaultTransform = compose8(translate12(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -12843,7 +12853,7 @@ var PCBViewer = ({
   editEvents = editEventsProp ?? editEvents;
   const initialRenderCompleted = useRef16(false);
   const touchStartRef = useRef16(null);
-  const circuitJsonKey = useMemo9(
+  const circuitJsonKey = useMemo10(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -12882,12 +12892,12 @@ var PCBViewer = ({
       resetTransform();
     }
   }, [boardSizeKey]);
-  const pcbElmsPreEdit = useMemo9(() => {
+  const pcbElmsPreEdit = useMemo10(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
   }, [circuitJsonKey]);
-  const elements = useMemo9(() => {
+  const elements = useMemo10(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
@@ -12904,27 +12914,27 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo9(
+  const mergedInitialState = useMemo10(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx24("div", { ref, children: /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsx25("div", { ref, children: /* @__PURE__ */ jsxs18(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -12951,11 +12961,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx24(ToastContainer, {})
+              /* @__PURE__ */ jsx25(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx24(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
           "div",
           {
             onClick: () => {
@@ -12992,7 +13002,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {