npm - @tscircuit/pcb-viewer - Versions diffs - 1.11.395 → 1.11.397 - Mend

@tscircuit/pcb-viewer 1.11.395 → 1.11.397

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

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -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";
@@ -5622,7 +5622,8 @@ var filterTraceByLayers = (trace, targetLayers) => {
   const wireCount = filteredRoute.filter(
     (segment) => segment.route_type === "wire"
   ).length;
-  if (wireCount < 2) return null;
+  const hasVia = filteredRoute.some((segment) => segment.route_type === "via");
+  if (wireCount < 2 && !hasVia) return null;
   return {
     ...trace,
     route: filteredRoute
@@ -5640,7 +5641,7 @@ var showTraceSegmentsInsideHiddenCopperPours = (trace) => ({
     };
   })
 });
-var getTraceClipContextElements = (elements, showCopperPours) => showCopperPours ? elements : [];
+var getTraceClipContextElements = (elements, showCopperPours) => showCopperPours ? elements : elements.filter((element) => element.type !== "pcb_copper_pour");
 var getHighlightedTraceElementIds = ({
   primitives
 }) => {
@@ -6275,6 +6276,7 @@ function drawSoldermaskElementsForLayer({
   hoverDrawer.realToCanvasMat = realToCanvasMat;
   hoverDrawer.drawElements(hoveredElements, {
     layers,
+    clipContextElements: elements,
     drawSoldermask: true,
     drawSoldermaskTop,
     drawSoldermaskBottom,
@@ -6336,7 +6338,13 @@ function drawPcbViaElementsForLayer({
   if (nonHighlightedElements.length > 0) {
     const drawer = new CircuitToCanvasDrawer16(canvas);
     drawer.realToCanvasMat = realToCanvasMat;
-    drawer.drawElements(nonHighlightedElements, { layers, drawSoldermask });
+    drawer.drawElements(nonHighlightedElements, {
+      layers,
+      drawSoldermask,
+      drawSoldermaskTop: layers.includes("top_copper"),
+      drawSoldermaskBottom: layers.includes("bottom_copper"),
+      clipContextElements: elements
+    });
   }
   if (highlightedElements.length > 0) {
     const highlightDrawer = new CircuitToCanvasDrawer16(canvas);
@@ -6344,7 +6352,10 @@ function drawPcbViaElementsForLayer({
     highlightDrawer.realToCanvasMat = realToCanvasMat;
     highlightDrawer.drawElements(highlightedElements, {
       layers,
-      drawSoldermask
+      drawSoldermask,
+      drawSoldermaskTop: layers.includes("top_copper"),
+      drawSoldermaskBottom: layers.includes("bottom_copper"),
+      clipContextElements: elements
     });
   }
 }
@@ -7578,7 +7589,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 +7964,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 +8033,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 +8069,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 +8087,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 +8104,7 @@ var DimensionOverlay = ({
     }
     return snapPoints;
   }, [primitives]);
-  const snappingPoints = useMemo4(() => {
+  const snappingPoints = useMemo5(() => {
     const points = [];
     elementBoundingBoxes.forEach((bounds, element) => {
       if (!bounds) return;
@@ -8083,7 +8139,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 +8291,7 @@ var DimensionOverlay = ({
     flipX: arrowScreenBounds.flipX,
     flipY: arrowScreenBounds.flipY
   });
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
@@ -8320,8 +8376,8 @@ var DimensionOverlay = ({
       },
       children: [
         children,
-        boundsToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx5(
+        boundsToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
             "svg",
             {
               style: {
@@ -8334,7 +8390,7 @@ var DimensionOverlay = ({
               },
               width: containerBounds.width,
               height: containerBounds.height,
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "rect",
                 {
                   x: boundsScreenRect.left,
@@ -8349,7 +8405,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8370,7 +8426,7 @@ var DimensionOverlay = ({
                 ", minY:",
                 " ",
                 selectedBounds.minY.toFixed(2),
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "maxX: ",
                 selectedBounds.maxX.toFixed(2),
                 ", maxY:",
@@ -8380,8 +8436,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 +8455,7 @@ var DimensionOverlay = ({
               children: diagonalLabel.distance.toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8419,7 +8475,7 @@ var DimensionOverlay = ({
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8437,7 +8493,7 @@ var DimensionOverlay = ({
                 fontFamily: "sans-serif",
                 zIndex: zIndexMap.dimensionOverlay
               },
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -8449,7 +8505,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "svg",
             {
               style: {
@@ -8463,7 +8519,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 +8528,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 +8544,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -8501,7 +8557,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -8517,50 +8573,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 +8599,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 +8623,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 +8653,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 +8739,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 +8802,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 +8819,7 @@ var FocusMarkerSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "circle",
         {
           cx: center.x,
@@ -8810,8 +8831,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 +8843,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x + 8,
@@ -8833,7 +8854,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8844,7 +8865,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8860,11 +8881,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 +8898,7 @@ var ErrorMarkerSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx9(
       "rect",
       {
         x: errorCenter.x - 7,
@@ -8921,7 +8942,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 +8975,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 +8984,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 +9027,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9024,7 +9045,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -9049,15 +9070,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 +9113,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -9110,7 +9131,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -9159,8 +9180,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 +9194,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 +9214,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -9228,7 +9249,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -9246,7 +9267,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -9262,7 +9283,7 @@ var ErrorOverlay = ({
         ] }, `${errorId}_${compIndex}`);
       });
     }),
-    focusScreenCenter && /* @__PURE__ */ jsx8(FocusMarkerSVG, { center: focusScreenCenter })
+    focusScreenCenter && /* @__PURE__ */ jsx9(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
@@ -9277,7 +9298,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 +9334,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 +9357,7 @@ var AnchorOffsetOverlay = ({
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
@@ -9349,7 +9370,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         "svg",
         {
           style: {
@@ -9379,8 +9400,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 +9413,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -9404,7 +9425,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 +9437,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 +9449,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -9441,7 +9462,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx9(
+                shouldShowXLabel && /* @__PURE__ */ jsx10(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -9449,10 +9470,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 +9481,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 +9500,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 +9512,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -9511,7 +9532,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 +9619,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 +9631,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 +9747,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 +9760,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 +9803,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -9795,7 +9816,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 +9842,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 +9856,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -9846,7 +9867,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -9857,7 +9878,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -9877,7 +9898,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 +9947,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 +10037,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 +10128,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 +10139,7 @@ var HighlightedPrimitiveBoxWithText = ({
           color: color8,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -10135,8 +10156,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 +10176,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       style: {
@@ -10169,7 +10190,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -10185,7 +10206,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 +10254,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 +10266,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 +10389,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 +10469,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -10472,7 +10493,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           ElementOverlayBox,
           {
             elements,
@@ -10480,8 +10501,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-          /* @__PURE__ */ jsx15(
+        transform && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx16(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -10491,7 +10512,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -10501,7 +10522,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -10511,7 +10532,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -10531,7 +10552,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 +10788,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 +10816,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 +10880,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 +10898,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 +10930,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.394",
+  version: "1.11.396",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -10967,8 +10988,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.25",
     "@tscircuit/math-utils": "^0.0.36",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.469",
-    "circuit-to-canvas": "0.0.124",
+    "circuit-json": "^0.0.492",
+    "circuit-to-canvas": "0.0.128",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
     "react-toastify": "^10.0.5",
@@ -11071,7 +11092,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 +11155,7 @@ var VisibilityContextMenu = ({
     };
   }, [onClose]);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -11193,13 +11214,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 +11232,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 +11257,7 @@ var VisibilityContextMenu = ({
                             children: "Hidden Layer Visibility \u25B8"
                           }
                         ),
-                        opacityOpen && /* @__PURE__ */ jsx18(
+                        opacityOpen && /* @__PURE__ */ jsx19(
                           "div",
                           {
                             role: "menu",
@@ -11246,7 +11267,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 +11279,7 @@ var VisibilityContextMenu = ({
                                   onClose();
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx18(
+                                  /* @__PURE__ */ jsx19(
                                     "span",
                                     {
                                       "aria-hidden": "true",
@@ -11288,7 +11309,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 +11317,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...props,
@@ -11324,7 +11345,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 +11425,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 +11435,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -11434,7 +11455,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 +11481,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 +11514,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 +11547,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 +11591,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -11580,7 +11601,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx20(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11593,7 +11614,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx20(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11606,7 +11627,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         "div",
                         {
                           style: {
@@ -11624,14 +11645,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 +11691,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11686,7 +11707,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "button",
                                 {
                                   type: "button",
@@ -11718,7 +11739,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs14(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -11730,7 +11751,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11748,7 +11769,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx20(
+                              /* @__PURE__ */ jsx21(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -11780,10 +11801,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 +11821,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 +11843,7 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -11842,16 +11863,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 +11892,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 +12094,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     },
     []
   );
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -12088,14 +12109,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 +12137,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -12147,7 +12168,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -12158,10 +12179,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs16("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         "span",
                         {
                           style: {
@@ -12173,7 +12194,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 +12208,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -12199,43 +12220,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 +12266,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             "span",
                             {
                               style: {
@@ -12260,8 +12281,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 +12294,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -12285,7 +12306,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -12295,7 +12316,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Warnings",
@@ -12307,7 +12328,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -12319,7 +12340,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -12329,7 +12350,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -12339,7 +12360,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -12349,7 +12370,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -12361,7 +12382,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -12371,7 +12392,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -12383,7 +12404,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -12393,8 +12414,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 +12425,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx21(
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -12441,7 +12462,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 +12524,7 @@ var WarningGraphicsOverlay = ({
     });
   }, [elements, transform, width, height, isShowingDrcWarnings]);
   if (!isShowingDrcWarnings) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref: containerRef,
@@ -12512,14 +12533,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 +12559,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 +12574,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 +12594,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 +12657,7 @@ var CanvasElementsRenderer = (props) => {
     props.setTransform,
     props.width
   ]);
-  const primitives = useMemo8(() => {
+  const primitives = useMemo9(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -12680,7 +12701,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -12688,7 +12709,7 @@ var CanvasElementsRenderer = (props) => {
       primitives: primitivesWithoutInteractionMetadata,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -12697,7 +12718,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             DimensionOverlay,
             {
               transform,
@@ -12705,23 +12726,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,
@@ -12776,6 +12797,16 @@ var calculateCircuitJsonKey = (circuitJson) => {
     if (element.type === "pcb_trace") {
       const routeLength = (element.route ?? []).length;
       signature += `:${routeLength}`;
+      for (const point of element.route ?? []) {
+        if (point.route_type !== "via") continue;
+        signature += `:${point.tented_on_top}:${point.tented_on_bottom}`;
+      }
+    }
+    if (element.type === "pcb_board") {
+      signature += `:${element.default_via_tented_on_top}:${element.default_via_tented_on_bottom}`;
+    }
+    if (element.type === "pcb_via") {
+      signature += `:${element.tented_on_top}:${element.tented_on_bottom}`;
     }
     elementSignatures.push(signature);
   }
@@ -12801,7 +12832,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 +12874,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 +12913,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 +12935,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 +12982,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx24(ToastContainer, {})
+              /* @__PURE__ */ jsx25(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx24(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
           "div",
           {
             onClick: () => {
@@ -12992,7 +13023,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {