@tscircuit/pcb-viewer 1.11.336 → 1.11.338

package/dist/index.js

@@ -24,6 +24,141 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
+// node_modules/toggle-selection/index.js
+var require_toggle_selection = __commonJS({
+  "node_modules/toggle-selection/index.js"(exports, module) {
+    module.exports = function() {
+      var selection = document.getSelection();
+      if (!selection.rangeCount) {
+        return function() {
+        };
+      }
+      var active = document.activeElement;
+      var ranges = [];
+      for (var i = 0; i < selection.rangeCount; i++) {
+        ranges.push(selection.getRangeAt(i));
+      }
+      switch (active.tagName.toUpperCase()) {
+        // .toUpperCase handles XHTML
+        case "INPUT":
+        case "TEXTAREA":
+          active.blur();
+          break;
+        default:
+          active = null;
+          break;
+      }
+      selection.removeAllRanges();
+      return function() {
+        selection.type === "Caret" && selection.removeAllRanges();
+        if (!selection.rangeCount) {
+          ranges.forEach(function(range) {
+            selection.addRange(range);
+          });
+        }
+        active && active.focus();
+      };
+    };
+  }
+});
+
+// node_modules/copy-to-clipboard/index.js
+var require_copy_to_clipboard = __commonJS({
+  "node_modules/copy-to-clipboard/index.js"(exports, module) {
+    "use strict";
+    var deselectCurrent = require_toggle_selection();
+    var clipboardToIE11Formatting = {
+      "text/plain": "Text",
+      "text/html": "Url",
+      "default": "Text"
+    };
+    var defaultMessage = "Copy to clipboard: #{key}, Enter";
+    function format(message) {
+      var copyKey = (/mac os x/i.test(navigator.userAgent) ? "\u2318" : "Ctrl") + "+C";
+      return message.replace(/#{\s*key\s*}/g, copyKey);
+    }
+    function copy(text, options) {
+      var debug, message, reselectPrevious, range, selection, mark, success = false;
+      if (!options) {
+        options = {};
+      }
+      debug = options.debug || false;
+      try {
+        reselectPrevious = deselectCurrent();
+        range = document.createRange();
+        selection = document.getSelection();
+        mark = document.createElement("span");
+        mark.textContent = text;
+        mark.ariaHidden = "true";
+        mark.style.all = "unset";
+        mark.style.position = "fixed";
+        mark.style.top = 0;
+        mark.style.clip = "rect(0, 0, 0, 0)";
+        mark.style.whiteSpace = "pre";
+        mark.style.webkitUserSelect = "text";
+        mark.style.MozUserSelect = "text";
+        mark.style.msUserSelect = "text";
+        mark.style.userSelect = "text";
+        mark.addEventListener("copy", function(e) {
+          e.stopPropagation();
+          if (options.format) {
+            e.preventDefault();
+            if (typeof e.clipboardData === "undefined") {
+              debug && console.warn("unable to use e.clipboardData");
+              debug && console.warn("trying IE specific stuff");
+              window.clipboardData.clearData();
+              var format2 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
+              window.clipboardData.setData(format2, text);
+            } else {
+              e.clipboardData.clearData();
+              e.clipboardData.setData(options.format, text);
+            }
+          }
+          if (options.onCopy) {
+            e.preventDefault();
+            options.onCopy(e.clipboardData);
+          }
+        });
+        document.body.appendChild(mark);
+        range.selectNodeContents(mark);
+        selection.addRange(range);
+        var successful = document.execCommand("copy");
+        if (!successful) {
+          throw new Error("copy command was unsuccessful");
+        }
+        success = true;
+      } catch (err) {
+        debug && console.error("unable to copy using execCommand: ", err);
+        debug && console.warn("trying IE specific stuff");
+        try {
+          window.clipboardData.setData(options.format || "text", text);
+          options.onCopy && options.onCopy(window.clipboardData);
+          success = true;
+        } catch (err2) {
+          debug && console.error("unable to copy using clipboardData: ", err2);
+          debug && console.error("falling back to prompt");
+          message = format("message" in options ? options.message : defaultMessage);
+          window.prompt(message, text);
+        }
+      } finally {
+        if (selection) {
+          if (typeof selection.removeRange == "function") {
+            selection.removeRange(range);
+          } else {
+            selection.removeAllRanges();
+          }
+        }
+        if (mark) {
+          document.body.removeChild(mark);
+        }
+        reselectPrevious();
+      }
+      return success;
+    }
+    module.exports = copy;
+  }
+});
+
 // node_modules/svgson/dist/svgson.umd.js
 var require_svgson_umd = __commonJS({
   "node_modules/svgson/dist/svgson.umd.js"(exports, module) {
@@ -6451,20 +6586,109 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef12, useState as useState11 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo8, useRef as useRef14, useState as useState12 } from "react";
+
+// node_modules/react-use/esm/useMountedState.js
+import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
+function useMountedState() {
+  var mountedRef = useRef(false);
+  var get = useCallback2(function() {
+    return mountedRef.current;
+  }, []);
+  useEffect2(function() {
+    mountedRef.current = true;
+    return function() {
+      mountedRef.current = false;
+    };
+  }, []);
+  return get;
+}
+
+// node_modules/react-use/esm/useSetState.js
+import { useCallback as useCallback3, useState } from "react";
+var useSetState = function(initialState) {
+  if (initialState === void 0) {
+    initialState = {};
+  }
+  var _a = useState(initialState), state = _a[0], set = _a[1];
+  var setState = useCallback3(function(patch) {
+    set(function(prevState) {
+      return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
+    });
+  }, []);
+  return [state, setState];
+};
+var useSetState_default = useSetState;
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
 };
 var isBrowser = typeof window !== "undefined";
 
+// node_modules/react-use/esm/useCopyToClipboard.js
+var import_copy_to_clipboard = __toESM(require_copy_to_clipboard());
+import { useCallback as useCallback4 } from "react";
+var useCopyToClipboard = function() {
+  var isMounted = useMountedState();
+  var _a = useSetState_default({
+    value: void 0,
+    error: void 0,
+    noUserInteraction: true
+  }), state = _a[0], setState = _a[1];
+  var copyToClipboard = useCallback4(function(value) {
+    if (!isMounted()) {
+      return;
+    }
+    var noUserInteraction;
+    var normalizedValue;
+    try {
+      if (typeof value !== "string" && typeof value !== "number") {
+        var error = new Error("Cannot copy typeof " + typeof value + " to clipboard, must be a string");
+        if (true)
+          console.error(error);
+        setState({
+          value,
+          error,
+          noUserInteraction: true
+        });
+        return;
+      } else if (value === "") {
+        var error = new Error("Cannot copy empty string to clipboard.");
+        if (true)
+          console.error(error);
+        setState({
+          value,
+          error,
+          noUserInteraction: true
+        });
+        return;
+      }
+      normalizedValue = value.toString();
+      noUserInteraction = (0, import_copy_to_clipboard.default)(normalizedValue);
+      setState({
+        value: normalizedValue,
+        error: void 0,
+        noUserInteraction
+      });
+    } catch (error2) {
+      setState({
+        value: normalizedValue,
+        error: error2,
+        noUserInteraction
+      });
+    }
+  }, []);
+  return [state, copyToClipboard];
+};
+var useCopyToClipboard_default = useCopyToClipboard;
+
 // node_modules/react-use/esm/useIsomorphicLayoutEffect.js
-import { useEffect as useEffect2, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect2;
+import { useEffect as useEffect3, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect3;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // node_modules/react-use/esm/useMeasure.js
-import { useMemo as useMemo2, useState } from "react";
+import { useMemo as useMemo2, useState as useState2 } from "react";
 var defaultState = {
   x: 0,
   y: 0,
@@ -6476,8 +6700,8 @@ var defaultState = {
   right: 0
 };
 function useMeasure() {
-  var _a = useState(null), element = _a[0], ref = _a[1];
-  var _b = useState(defaultState), rect = _b[0], setRect = _b[1];
+  var _a = useState2(null), element = _a[0], ref = _a[1];
+  var _b = useState2(defaultState), rect = _b[0], setRect = _b[1];
   var observer = useMemo2(function() {
     return new window.ResizeObserver(function(entries) {
       if (entries[0]) {
@@ -6552,17 +6776,17 @@ import {
   applyToPoint as applyToPoint2,
   scale as scale2
 } from "transformation-matrix";
-import { useCallback as useCallback2, useEffect as useEffect3, useReducer, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useReducer, useRef as useRef2, useState as useState3 } from "react";
 var useMouseMatrixTransform = (props = {}) => {
-  const extRef = useRef(null);
-  const [lastDragCancelTime, setLastDragCancelTime] = useState2(0);
+  const extRef = useRef2(null);
+  const [lastDragCancelTime, setLastDragCancelTime] = useState3(0);
   const outerCanvasElm = props.canvasElm ?? extRef.current;
-  const [internalTransform, setInternalTransform] = useState2(
+  const [internalTransform, setInternalTransform] = useState3(
     props.initialTransform ?? identity()
   );
-  const [waitCounter, setWaitCounter] = useState2(0);
+  const [waitCounter, setWaitCounter] = useState3(0);
   const [extChangeCounter, incExtChangeCounter] = useReducer((s) => s + 1, 0);
-  const setTransform = useCallback2(
+  const setTransform = useCallback5(
     (newTransform) => {
       if (props.onSetTransform) {
         props.onSetTransform(newTransform);
@@ -6573,7 +6797,7 @@ var useMouseMatrixTransform = (props = {}) => {
     },
     [props.onSetTransform, setInternalTransform]
   );
-  const setTransformExt = useCallback2(
+  const setTransformExt = useCallback5(
     (newTransform) => {
       setTransform(newTransform);
       incExtChangeCounter();
@@ -6581,13 +6805,13 @@ var useMouseMatrixTransform = (props = {}) => {
     [setTransform]
   );
   const transform = props.transform ?? internalTransform;
-  const cancelDrag = useCallback2(() => {
+  const cancelDrag = useCallback5(() => {
     setLastDragCancelTime(Date.now());
   }, []);
-  const gestureModeRef = useRef("none");
-  const dragDataRef = useRef(null);
-  const pinchDataRef = useRef(null);
-  useEffect3(() => {
+  const gestureModeRef = useRef2("none");
+  const dragDataRef = useRef2(null);
+  const pinchDataRef = useRef2(null);
+  useEffect4(() => {
     const canvasElm = props.canvasElm ?? extRef.current;
     if (canvasElm && !outerCanvasElm) {
       setWaitCounter(waitCounter + 1);
@@ -6781,7 +7005,7 @@ var useMouseMatrixTransform = (props = {}) => {
     props.enabled,
     props.shouldDrag
   ]);
-  const applyTransformToPoint = useCallback2(
+  const applyTransformToPoint = useCallback5(
     (obj) => applyToPoint2(transform, obj),
     [transform]
   );
@@ -7001,7 +7225,7 @@ function addInteractionMetadataToPrimitives({
 }
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback5, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo7, useState as useState11 } from "react";
 
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
@@ -8098,6 +8322,7 @@ var LAYER_NAME_TO_COLOR = {
   ...colors_default.board
 };
 var DEFAULT_DRAW_ORDER = [
+  "board",
   "inner6",
   "inner5",
   "inner4",
@@ -8109,15 +8334,12 @@ var DEFAULT_DRAW_ORDER = [
   "bottom_silkscreen",
   "top",
   "soldermask_top",
-  "soldermask_with_copper_bottom",
-  "soldermask_with_copper_top",
   "bottom_courtyard",
   "bottom_fabrication",
   "top_courtyard",
   "top_fabrication",
   "edge_cuts",
-  "top_silkscreen",
-  "board"
+  "top_silkscreen"
 ];
 var Drawer = class {
   canvasLayerMap;
@@ -8408,35 +8630,38 @@ var Drawer = class {
    */
   orderAndFadeLayers() {
     const { canvasLayerMap, foregroundLayer } = this;
+    const associatedSoldermask = foregroundLayer === "top" ? "soldermask_top" : foregroundLayer === "bottom" ? "soldermask_bottom" : void 0;
     const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
     const associatedNotes = foregroundLayer === "top" ? "top_notes" : foregroundLayer === "bottom" ? "bottom_notes" : void 0;
     const associatedFabrication = foregroundLayer === "top" ? "top_fabrication" : foregroundLayer === "bottom" ? "bottom_fabrication" : void 0;
-    const maskWithCopperLayerForForeground = foregroundLayer === "top" ? "soldermask_with_copper_top" : foregroundLayer === "bottom" ? "soldermask_with_copper_bottom" : void 0;
     const opaqueLayers = /* @__PURE__ */ new Set([
       foregroundLayer,
       "drill",
       "edge_cuts",
       "other",
       "board",
+      ...associatedSoldermask ? [associatedSoldermask] : [],
       ...associatedSilkscreen ? [associatedSilkscreen] : [],
       ...associatedNotes ? [associatedNotes] : [],
-      ...associatedFabrication ? [associatedFabrication] : [],
-      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
+      ...associatedFabrication ? [associatedFabrication] : []
     ]);
     const layersToShiftToTop = [
       foregroundLayer,
       "edge_cuts",
+      ...associatedSoldermask ? [associatedSoldermask] : [],
       ...associatedSilkscreen ? [associatedSilkscreen] : [],
       ...associatedNotes ? [associatedNotes] : [],
-      ...associatedFabrication ? [associatedFabrication] : [],
-      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
+      ...associatedFabrication ? [associatedFabrication] : []
     ];
+    const drillBeforeForeground = foregroundLayer === "drill" ? [] : ["drill"];
+    const drillAfterForeground = foregroundLayer === "drill" ? ["drill"] : [];
     const order = [
       ...DEFAULT_DRAW_ORDER.filter((l) => !layersToShiftToTop.includes(l)),
+      ...drillBeforeForeground,
       foregroundLayer,
-      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : [],
+      ...associatedSoldermask ? [associatedSoldermask] : [],
+      ...drillAfterForeground,
       "edge_cuts",
-      "drill",
       ...associatedSilkscreen ? [associatedSilkscreen] : [],
       ...associatedNotes ? [associatedNotes] : [],
       ...associatedFabrication ? [associatedFabrication] : []
@@ -8660,7 +8885,8 @@ function drawPcbBoardElements({
   for (const element of pcbBoardElements) {
     drawer.drawElements([element], {
       layers,
-      drawSoldermask,
+      drawSoldermask: false,
+      drawBoardMaterial: drawSoldermask ?? false,
       minBoardOutlineStrokePx: 2
     });
   }
@@ -8736,7 +8962,7 @@ function drawPcbPanelElements({
   drawer.realToCanvasMat = realToCanvasMat;
   const pcbPanelElements = elements.filter(isPcbPanelElement);
   for (const element of pcbPanelElements) {
-    drawer.drawElements([element], { layers, drawSoldermask });
+    drawer.drawElements([element], { layers });
   }
 }
 
@@ -9367,7 +9593,25 @@ function drawSoldermaskElementsForLayer({
 }) {
   const drawer = new CircuitToCanvasDrawer12(canvas);
   drawer.realToCanvasMat = realToCanvasMat;
-  drawer.drawElements(elements, { layers, drawSoldermask: true });
+  const boards = elements.filter((element) => element.type === "pcb_board");
+  if (boards.length <= 1) {
+    drawer.drawElements(elements, {
+      layers,
+      drawSoldermask: true,
+      drawBoardMaterial: false
+    });
+  } else {
+    const nonBoardElements = elements.filter(
+      (element) => element.type !== "pcb_board"
+    );
+    for (const board of boards) {
+      drawer.drawElements([board, ...nonBoardElements], {
+        layers,
+        drawSoldermask: true,
+        drawBoardMaterial: false
+      });
+    }
+  }
   if (!primitives) return;
   const hoveredElementIds = /* @__PURE__ */ new Set();
   for (const primitive of primitives) {
@@ -9398,7 +9642,11 @@ function drawSoldermaskElementsForLayer({
   const hoverDrawer = new CircuitToCanvasDrawer12(canvas);
   hoverDrawer.configure({ colorOverrides: HOVER_SOLDERMASK_COLOR_MAP });
   hoverDrawer.realToCanvasMat = realToCanvasMat;
-  hoverDrawer.drawElements(hoveredElements, { layers, drawSoldermask: true });
+  hoverDrawer.drawElements(hoveredElements, {
+    layers,
+    drawSoldermask: true,
+    drawBoardMaterial: false
+  });
 }
 
 // src/lib/draw-silkscreen.ts
@@ -9521,7 +9769,7 @@ function drawCourtyardElementsForLayer({
 }
 
 // src/components/CanvasPrimitiveRenderer.tsx
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
 import { SuperGrid, toMMSI } from "react-supergrid";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
@@ -9559,10 +9807,10 @@ var CanvasPrimitiveRenderer = ({
   width = 500,
   height = 500
 }) => {
-  const canvasRefs = useRef2({});
+  const canvasRefs = useRef3({});
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
   const isShowingSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!canvasRefs.current) return;
     if (Object.keys(canvasRefs.current).length === 0) return;
     const filteredCanvasRefs = Object.fromEntries(
@@ -9656,15 +9904,6 @@ var CanvasPrimitiveRenderer = ({
           primitives,
           drawSoldermask: isShowingSolderMask
         });
-        if (isShowingSolderMask) {
-          drawSoldermaskElementsForLayer({
-            canvas,
-            elements,
-            layers: [copperLayer],
-            realToCanvasMat: transform,
-            primitives
-          });
-        }
       }
       if (topCanvas) {
         drawPcbViaElementsForLayer({
@@ -9732,15 +9971,6 @@ var CanvasPrimitiveRenderer = ({
           layers: ["drill"],
           realToCanvasMat: transform
         });
-        if (isShowingSolderMask) {
-          drawSoldermaskElementsForLayer({
-            canvas: drillCanvas,
-            elements,
-            layers: ["drill"],
-            realToCanvasMat: transform,
-            primitives
-          });
-        }
       }
       const topSilkscreenCanvas = canvasRefs.current.top_silkscreen;
       if (topSilkscreenCanvas) {
@@ -10226,17 +10456,17 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
 }
 
 // src/components/DebugGraphicsOverlay.tsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DebugGraphicsOverlay = ({
   children,
   transform,
   debugGraphics
 }) => {
-  const canvasRef = useRef3(null);
+  const canvasRef = useRef4(null);
   const [containerRef, { width, height }] = useMeasure_default();
   const is_showing_autorouting = useGlobalStore((s) => s.is_showing_autorouting);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!is_showing_autorouting) return;
     if (canvasRef.current && debugGraphics && width && height) {
       canvasRef.current.width = width;
@@ -10277,7 +10507,7 @@ var DebugGraphicsOverlay = ({
 };
 
 // src/components/WarningGraphicsOverlay.tsx
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
 import { applyToPoint as applyToPoint7, identity as identity3 } from "transformation-matrix";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
@@ -10286,8 +10516,8 @@ var WarningGraphicsOverlay = ({
   elements = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef4(null);
-  useEffect6(() => {
+  const canvasRef = useRef5(null);
+  useEffect7(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -10365,7 +10595,7 @@ var WarningGraphicsOverlay = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
 import { applyToPoint as applyToPoint8, identity as identity4, inverse as inverse2 } from "transformation-matrix";
 
 // src/lib/util/get-primitive-bounding-box.ts
@@ -10767,24 +10997,24 @@ var DimensionOverlay = ({
   primitives = []
 }) => {
   if (!transform) transform = identity4();
-  const [dimensionToolVisible, setDimensionToolVisible] = useState3(false);
-  const [dimensionToolStretching, setDimensionToolStretching] = useState3(false);
-  const [measureToolArmed, setMeasureToolArmed] = useState3(false);
-  const [activeSnapIds, setActiveSnapIds] = useState3({
+  const [dimensionToolVisible, setDimensionToolVisible] = useState4(false);
+  const [dimensionToolStretching, setDimensionToolStretching] = useState4(false);
+  const [measureToolArmed, setMeasureToolArmed] = useState4(false);
+  const [activeSnapIds, setActiveSnapIds] = useState4({
     start: null,
     end: null
   });
   const isMouseOverContainer = useGlobalStore((s) => s.is_mouse_over_container);
-  const disarmMeasure = useCallback3(() => {
+  const disarmMeasure = useCallback6(() => {
     if (measureToolArmed) {
       setMeasureToolArmed(false);
       window.dispatchEvent(new Event("disarm-dimension-tool"));
     }
   }, [measureToolArmed]);
-  const [dStart, setDStart] = useState3({ x: 0, y: 0 });
-  const [dEnd, setDEnd] = useState3({ x: 0, y: 0 });
-  const mousePosRef = useRef5({ x: 0, y: 0 });
-  const containerRef = useRef5(null);
+  const [dStart, setDStart] = useState4({ x: 0, y: 0 });
+  const [dEnd, setDEnd] = useState4({ x: 0, y: 0 });
+  const mousePosRef = useRef6({ x: 0, y: 0 });
+  const containerRef = useRef6(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
   const elementBoundingBoxes = useMemo4(() => {
@@ -10864,7 +11094,7 @@ var DimensionOverlay = ({
       screenPoint: applyToPoint8(transform, snap.point)
     }));
   }, [snappingPoints, transform]);
-  const findSnap = useCallback3(
+  const findSnap = useCallback6(
     (rwPoint) => {
       if (snappingPointsWithScreen.length === 0) {
         return { point: rwPoint, id: null };
@@ -10891,7 +11121,7 @@ var DimensionOverlay = ({
     },
     [snappingPointsWithScreen, transform]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const down = (e) => {
       const target = e.target;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
@@ -11235,7 +11465,7 @@ var DimensionOverlay = ({
 };
 
 // src/components/EditPlacementOverlay.tsx
-import { useRef as useRef6, useState as useState4 } from "react";
+import { useRef as useRef7, useState as useState5 } from "react";
 import { applyToPoint as applyToPoint9, identity as identity5, inverse as inverse3 } from "transformation-matrix";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component, point, padding = 0) => {
@@ -11257,11 +11487,11 @@ var EditPlacementOverlay = ({
   onModifyEditEvent
 }) => {
   if (!transform) transform = identity5();
-  const containerRef = useRef6(null);
-  const [activePcbComponentId, setActivePcbComponent] = useState4(
+  const containerRef = useRef7(null);
+  const [activePcbComponentId, setActivePcbComponent] = useState5(
     null
   );
-  const [dragState, setDragState] = useState4(null);
+  const [dragState, setDragState] = useState5(null);
   const isPcbComponentActive = activePcbComponentId !== null;
   const in_edit_mode = useGlobalStore((s) => s.in_edit_mode);
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode);
@@ -11377,7 +11607,7 @@ var EditPlacementOverlay = ({
 };
 
 // src/components/EditTraceHintOverlay.tsx
-import { Fragment as Fragment2, useEffect as useEffect10, useRef as useRef7, useState as useState5 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect11, useRef as useRef8, useState as useState6 } from "react";
 import {
   applyToPoint as applyToPoint10,
   identity as identity6,
@@ -11386,12 +11616,12 @@ import {
 
 // src/components/HotkeyActionMenu.tsx
 import { css } from "@emotion/css";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var HotkeyActionMenu = ({
   hotkeys
 }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeyDown = (event) => {
       hotkeys.forEach((hotkey) => {
         if (event.key === hotkey.key) {
@@ -11500,12 +11730,12 @@ var EditTraceHintOverlay = ({
   onModifyEditEvent
 }) => {
   if (!transform) transform = identity6();
-  const containerRef = useRef7(null);
+  const containerRef = useRef8(null);
   const containerBounds = containerRef.current?.getBoundingClientRect();
-  const [selectedElement, setSelectedElement] = useState5(null);
+  const [selectedElement, setSelectedElement] = useState6(null);
   const toast = useToast();
-  const [dragState, setDragState] = useState5(null);
-  const [shouldCreateAsVia, setShouldCreateAsVia] = useState5(false);
+  const [dragState, setDragState] = useState6(null);
+  const [shouldCreateAsVia, setShouldCreateAsVia] = useState6(false);
   const isElementSelected = selectedElement !== null;
   const in_edit_trace_mode = useGlobalStore((s) => s.in_draw_trace_mode);
   const disabled = disabledProp || !in_edit_trace_mode;
@@ -11514,7 +11744,7 @@ var EditTraceHintOverlay = ({
     ogCenterScreen = applyToPoint10(transform, dragState?.originalCenter);
     dragEndScreen = applyToPoint10(transform, dragState?.dragEnd);
   }
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isElementSelected) return;
     function keyDown(e) {
       if (e.key === "Escape") {
@@ -11786,7 +12016,7 @@ var EditTraceHintOverlay = ({
 };
 
 // src/components/ErrorOverlay.tsx
-import { useRef as useRef8, Fragment as Fragment3 } from "react";
+import { useRef as useRef9, Fragment as Fragment3 } from "react";
 import { css as css2 } from "@emotion/css";
 import { applyToPoint as applyToPoint11, identity as identity7 } from "transformation-matrix";
 
@@ -11945,7 +12175,7 @@ var ErrorOverlay = ({
   transform = identity7(),
   elements
 }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const { isShowingDRCErrors, hoveredErrorId } = useGlobalStore((state) => ({
     isShowingDRCErrors: state.is_showing_drc_errors,
     hoveredErrorId: state.hovered_error_id
@@ -12311,11 +12541,11 @@ function ifSetsMatchExactly(set1, set2) {
 }
 
 // src/components/MouseElementTracker.tsx
-import { useState as useState7, useMemo as useMemo5 } from "react";
+import { useState as useState8, useMemo as useMemo5 } from "react";
 import { applyToPoint as applyToPoint14, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
-import { useEffect as useEffect11, useState as useState6 } from "react";
+import { useEffect as useEffect12, useState as useState7 } from "react";
 
 // src/lib/get-trace-overlay-text.ts
 function getTraceOverlayInfo({
@@ -12433,9 +12663,9 @@ var HighlightedPrimitiveBoxWithText = ({
   mousePos,
   elements
 }) => {
-  const [finalState, setFinalState] = useState6(false);
+  const [finalState, setFinalState] = useState7(false);
   const primitiveElement = primitive._element;
-  useEffect11(() => {
+  useEffect12(() => {
     setTimeout(() => {
       setFinalState(true);
     }, 100);
@@ -13359,8 +13589,8 @@ var MouseElementTracker = ({
   primitives,
   onMouseHoverOverPrimitives
 }) => {
-  const [mousedPrimitives, setMousedPrimitives] = useState7([]);
-  const [mousePos, setMousePos] = useState7({ x: 0, y: 0 });
+  const [mousedPrimitives, setMousedPrimitives] = useState8([]);
+  const [mousePos, setMousePos] = useState8({ x: 0, y: 0 });
   const [containerRef, { width, height }] = useMeasure_default();
   const highlightedPrimitives = useMemo5(() => {
     const highlightedPrimitives2 = [];
@@ -13515,7 +13745,7 @@ var MouseElementTracker = ({
 // src/components/PcbGroupOverlay.tsx
 import { applyToPoint as applyToPoint15 } from "transformation-matrix";
 import { identity as identity8 } from "transformation-matrix";
-import { useRef as useRef9, useEffect as useEffect12 } from "react";
+import { useRef as useRef10, useEffect as useEffect13 } from "react";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
@@ -13536,7 +13766,7 @@ var PcbGroupOverlay = ({
   hoveredComponentIds = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef9(null);
+  const canvasRef = useRef10(null);
   const {
     is_showing_pcb_groups,
     pcb_group_view_mode,
@@ -13546,7 +13776,7 @@ var PcbGroupOverlay = ({
     pcb_group_view_mode: s.pcb_group_view_mode,
     is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets
   }));
-  useEffect12(() => {
+  useEffect13(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -13880,10 +14110,10 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 
 // src/components/ToolbarOverlay.tsx
 import {
-  useEffect as useEffect15,
-  useState as useState9,
-  useCallback as useCallback4,
-  useRef as useRef11,
+  useEffect as useEffect16,
+  useState as useState10,
+  useCallback as useCallback8,
+  useRef as useRef13,
   useLayoutEffect as useLayoutEffect2
 } from "react";
 import { css as css3 } from "@emotion/css";
@@ -13891,7 +14121,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.335",
+  version: "1.11.337",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13945,7 +14175,7 @@ var package_default = {
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
     "circuit-json": "^0.0.374",
-    "circuit-to-canvas": "^0.0.69",
+    "circuit-to-canvas": "^0.0.72",
     "circuit-to-svg": "^0.0.323",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -13956,20 +14186,20 @@ var package_default = {
 };
 
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect13, useRef as useRef10 } from "react";
+import { useEffect as useEffect14, useRef as useRef11 } from "react";
 var useHotKey = (key, onUse, containerRef) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
-  const isMouseOverContainerRef = useRef10(isMouseOverContainer);
-  const onUseRef = useRef10(onUse);
-  useEffect13(() => {
+  const isMouseOverContainerRef = useRef11(isMouseOverContainer);
+  const onUseRef = useRef11(onUse);
+  useEffect14(() => {
     isMouseOverContainerRef.current = isMouseOverContainer;
   }, [isMouseOverContainer]);
-  useEffect13(() => {
+  useEffect14(() => {
     onUseRef.current = onUse;
   }, [onUse]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!key) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -13997,10 +14227,10 @@ var useHotKey = (key, onUse, containerRef) => {
 };
 
 // src/hooks/useIsSmallScreen.ts
-import { useEffect as useEffect14, useState as useState8 } from "react";
+import { useEffect as useEffect15, useState as useState9 } from "react";
 var useIsSmallScreen = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState8(false);
-  useEffect14(() => {
+  const [isSmallScreen, setIsSmallScreen] = useState9(false);
+  useEffect15(() => {
     const checkIsMobile = () => {
       setIsSmallScreen(window.innerWidth <= 768);
     };
@@ -14011,9 +14241,44 @@ var useIsSmallScreen = () => {
   return isSmallScreen;
 };
 
+// src/hooks/useMobileTouch.ts
+import {
+  useCallback as useCallback7,
+  useRef as useRef12
+} from "react";
+var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
+  const lastInteractionRef = useRef12(0);
+  const handleInteraction = useCallback7(
+    (e) => {
+      if (options.stopPropagation) {
+        e.stopPropagation();
+      }
+      const now = Date.now();
+      if (now - lastInteractionRef.current < 300) return;
+      lastInteractionRef.current = now;
+      onClick?.(e);
+    },
+    [onClick, options.stopPropagation]
+  );
+  const onTouchEnd = useCallback7(
+    (e) => {
+      e.preventDefault();
+      handleInteraction(e);
+    },
+    [handleInteraction]
+  );
+  const style = { touchAction: "manipulation" };
+  return {
+    onClick: handleInteraction,
+    onTouchEnd,
+    style
+  };
+};
+
 // src/components/ToolbarOverlay.tsx
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -14028,7 +14293,8 @@ var LayerButton = ({ name, selected, onClick }) => {
           background-color: rgba(255, 255, 255, 0.1);
         }
       `,
-      onClick,
+      ...touchHandlers,
+      style: touchStyle,
       children: [
         /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
         /* @__PURE__ */ jsx20(
@@ -14051,43 +14317,40 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx20(
-  "div",
-  {
-    ...props,
-    onClick,
-    onTouchEnd: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (onClick) {
-        onClick(e);
-      }
-    },
-    style: {
-      backgroundColor: "#1F1F1F",
-      border: "1px solid #666",
-      margin: 0,
-      padding: 4,
-      paddingLeft: isSmallScreen ? 8 : 6,
-      paddingRight: isSmallScreen ? 8 : 6,
-      borderRadius: 2,
-      color: "#eee",
-      cursor: "pointer",
-      fontSize: 12,
-      height: "fit-content",
-      touchAction: "manipulation",
-      userSelect: "none",
-      whiteSpace: "nowrap",
-      ...props.style
-    },
-    children
-  }
-);
+}) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ...props,
+      ...touchHandlers,
+      style: {
+        backgroundColor: "#1F1F1F",
+        border: "1px solid #666",
+        margin: 0,
+        padding: 4,
+        paddingLeft: isSmallScreen ? 8 : 6,
+        paddingRight: isSmallScreen ? 8 : 6,
+        borderRadius: 2,
+        color: "#eee",
+        cursor: "pointer",
+        fontSize: 12,
+        height: "fit-content",
+        userSelect: "none",
+        whiteSpace: "nowrap",
+        ...touchStyle,
+        ...props.style
+      },
+      children
+    }
+  );
+};
 var CheckboxMenuItem = ({
   label,
   checked,
   onClick
 }) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -14105,15 +14368,8 @@ var CheckboxMenuItem = ({
           background-color: rgba(255, 255, 255, 0.1);
         }
       `,
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick();
-      },
-      onTouchEnd: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick();
-      },
+      ...touchHandlers,
+      style: touchStyle,
       children: [
         /* @__PURE__ */ jsx20("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
@@ -14123,6 +14379,7 @@ var CheckboxMenuItem = ({
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -14140,15 +14397,8 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
           background-color: rgba(255, 255, 255, 0.1);
         }
       `,
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick();
-      },
-      onTouchEnd: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick();
-      },
+      ...touchHandlers,
+      style: touchStyle,
       children: [
         /* @__PURE__ */ jsx20("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
@@ -14157,6 +14407,39 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
     }
   );
 };
+var CopyErrorButton = ({
+  errorId,
+  errorMessage,
+  copiedErrorId,
+  onCopy
+}) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(
+    () => onCopy(errorMessage, errorId)
+  );
+  return /* @__PURE__ */ jsx20(
+    "button",
+    {
+      type: "button",
+      "aria-label": copiedErrorId === errorId ? "Error message copied" : "Copy error message",
+      style: {
+        position: "absolute",
+        top: 12,
+        right: 16,
+        cursor: "pointer",
+        color: "#888",
+        fontSize: 16,
+        background: "none",
+        border: "none",
+        padding: 0,
+        display: "flex",
+        alignItems: "center",
+        ...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" }) })
+    }
+  );
+};
 var ToolbarOverlay = ({ children, elements }) => {
   const isSmallScreen = useIsSmallScreen();
   const {
@@ -14209,13 +14492,15 @@ var ToolbarOverlay = ({ children, elements }) => {
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId
   }));
-  const [isViewMenuOpen, setViewMenuOpen] = useState9(false);
-  const [isLayerMenuOpen, setLayerMenuOpen] = useState9(false);
-  const [isErrorsOpen, setErrorsOpen] = useState9(false);
-  const [measureToolArmed, setMeasureToolArmed] = useState9(false);
-  const errorElementsRef = useRef11(/* @__PURE__ */ new Map());
-  const arrowElementsRef = useRef11(/* @__PURE__ */ new Map());
-  useEffect15(() => {
+  const [isViewMenuOpen, setViewMenuOpen] = useState10(false);
+  const [isLayerMenuOpen, setLayerMenuOpen] = useState10(false);
+  const [isErrorsOpen, setErrorsOpen] = useState10(false);
+  const [measureToolArmed, setMeasureToolArmed] = useState10(false);
+  const [copiedErrorId, setCopiedErrorId] = useState10(null);
+  const [, copyToClipboard] = useCopyToClipboard_default();
+  const errorElementsRef = useRef13(/* @__PURE__ */ new Map());
+  const arrowElementsRef = useRef13(/* @__PURE__ */ new Map());
+  useEffect16(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     window.addEventListener("arm-dimension-tool", arm);
@@ -14235,8 +14520,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     "bottom"
   ];
   const processedLayers = availableLayers;
-  const hasRunInitialMouseCheck = useRef11(false);
-  const hotkeyBoundaryRef = useRef11(null);
+  const hasRunInitialMouseCheck = useRef13(false);
+  const hotkeyBoundaryRef = useRef13(null);
   const hotKeyCallbacks = {
     "1": availableLayers[0] ? () => selectLayer(availableLayers[0]) : () => {
     },
@@ -14281,25 +14566,25 @@ var ToolbarOverlay = ({ children, elements }) => {
       document.removeEventListener("mousemove", checkMousePosition);
     };
   }, [setIsMouseOverContainer]);
-  const handleMouseEnter = useCallback4(() => {
+  const handleMouseEnter = useCallback8(() => {
     setIsMouseOverContainer(true);
   }, [setIsMouseOverContainer]);
-  const handleMouseMove = useCallback4(() => {
+  const handleMouseMove = useCallback8(() => {
     if (!isMouseOverContainer) {
       setIsMouseOverContainer(true);
     }
   }, [isMouseOverContainer, setIsMouseOverContainer]);
-  const handleMouseLeave = useCallback4(() => {
+  const handleMouseLeave = useCallback8(() => {
     setIsMouseOverContainer(false);
     setLayerMenuOpen(false);
     setViewMenuOpen(false);
     setErrorsOpen(false);
     setHoveredErrorId(null);
   }, [setIsMouseOverContainer, setHoveredErrorId]);
-  const handleLayerMenuToggle = useCallback4(() => {
+  const handleLayerMenuToggle = useCallback8(() => {
     setLayerMenuOpen(!isLayerMenuOpen);
   }, [isLayerMenuOpen]);
-  const handleErrorsToggle = useCallback4(() => {
+  const handleErrorsToggle = useCallback8(() => {
     const newErrorsOpen = !isErrorsOpen;
     setErrorsOpen(newErrorsOpen);
     if (newErrorsOpen) {
@@ -14309,20 +14594,20 @@ var ToolbarOverlay = ({ children, elements }) => {
       setHoveredErrorId(null);
     }
   }, [isErrorsOpen, setHoveredErrorId]);
-  const handleEditTraceToggle = useCallback4(() => {
+  const handleEditTraceToggle = useCallback8(() => {
     setEditMode(editModes.in_draw_trace_mode ? "off" : "draw_trace");
   }, [editModes.in_draw_trace_mode, setEditMode]);
-  const handleMoveComponentToggle = useCallback4(() => {
+  const handleMoveComponentToggle = useCallback8(() => {
     setEditMode(editModes.in_move_footprint_mode ? "off" : "move_footprint");
   }, [editModes.in_move_footprint_mode, setEditMode]);
-  const handleRatsNestToggle = useCallback4(() => {
+  const handleRatsNestToggle = useCallback8(() => {
     setIsShowingRatsNest(!viewSettings.is_showing_rats_nest);
   }, [viewSettings.is_showing_rats_nest, setIsShowingRatsNest]);
-  const handleMeasureToolClick = useCallback4(() => {
+  const handleMeasureToolClick = useCallback8(() => {
     setMeasureToolArmed(true);
     window.dispatchEvent(new Event("arm-dimension-tool"));
   }, []);
-  const handleViewMenuToggle = useCallback4(() => {
+  const handleViewMenuToggle = useCallback8(() => {
     const newViewMenuOpen = !isViewMenuOpen;
     setViewMenuOpen(newViewMenuOpen);
     if (newViewMenuOpen) {
@@ -14567,7 +14852,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx20(
+                          /* @__PURE__ */ jsxs14(
                             "div",
                             {
                               ref: (el) => {
@@ -14578,30 +14863,48 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 display: "none",
                                 padding: "12px 16px",
                                 backgroundColor: "#1a1a1a",
-                                borderTop: "1px solid #444"
+                                borderTop: "1px solid #444",
+                                position: "relative"
                               },
-                              children: /* @__PURE__ */ jsx20(
-                                "div",
-                                {
-                                  style: {
-                                    fontSize: isSmallScreen ? "11px" : "12px",
-                                    color: "#ccc",
-                                    lineHeight: 1.5,
-                                    wordWrap: "break-word",
-                                    overflowWrap: "break-word",
-                                    hyphens: "auto",
-                                    userSelect: "text"
-                                  },
-                                  onMouseDown: (event) => event.stopPropagation(),
-                                  onClick: (event) => event.stopPropagation(),
-                                  children: e.message
-                                }
-                              )
+                              children: [
+                                /* @__PURE__ */ jsx20(
+                                  "div",
+                                  {
+                                    style: {
+                                      fontSize: isSmallScreen ? "11px" : "12px",
+                                      color: "#ccc",
+                                      lineHeight: 1.5,
+                                      wordWrap: "break-word",
+                                      overflowWrap: "break-word",
+                                      hyphens: "auto",
+                                      userSelect: "text",
+                                      paddingRight: 30
+                                      // Space for the copy icon
+                                    },
+                                    onMouseDown: (event) => event.stopPropagation(),
+                                    onClick: (event) => event.stopPropagation(),
+                                    children: e.message
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx20(
+                                  CopyErrorButton,
+                                  {
+                                    errorId,
+                                    errorMessage: e.message,
+                                    copiedErrorId,
+                                    onCopy: (msg, id) => {
+                                      copyToClipboard(msg);
+                                      setCopiedErrorId(id);
+                                      setTimeout(() => setCopiedErrorId(null), 2e3);
+                                    }
+                                  }
+                                )
+                              ]
                             }
                           )
                         ]
                       },
-                      i
+                      errorId
                     );
                   })
                 }
@@ -14816,11 +15119,11 @@ var CanvasElementsRenderer = (props) => {
     );
     return [primitivesWithoutInteractionMetadata2, connectivityMap2];
   }, [elementsToRender, props.elements]);
-  const [hoverState, setHoverState] = useState10({
+  const [hoverState, setHoverState] = useState11({
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const [hoveredComponentIds, setHoveredComponentIds] = useState10([]);
+  const [hoveredComponentIds, setHoveredComponentIds] = useState11([]);
   const errorRelatedIds = useMemo7(() => {
     if (!hoveredErrorId) return [];
     const errorElements = elements.filter(
@@ -14851,7 +15154,7 @@ var CanvasElementsRenderer = (props) => {
       primitiveIdsInMousedOverNet: combinedPrimitiveIds
     });
   }, [primitivesWithoutInteractionMetadata, hoverState, errorRelatedIds]);
-  const onMouseOverPrimitives = useCallback5(
+  const onMouseOverPrimitives = useCallback9(
     (primitivesHoveredOver) => {
       const primitiveIdsInMousedOverNet = [];
       for (const primitive of primitivesHoveredOver) {
@@ -15027,11 +15330,11 @@ var PCBViewer = ({
   clickToInteractEnabled = false,
   disablePcbGroups = false
 }) => {
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState11(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState12(
     !clickToInteractEnabled
   );
   const [ref, refDimensions] = useMeasure_default();
-  const [transform, setTransformInternal] = useState11(defaultTransform);
+  const [transform, setTransformInternal] = useState12(defaultTransform);
   const {
     ref: transformRef,
     setTransform,
@@ -15041,10 +15344,10 @@ var PCBViewer = ({
     onSetTransform: setTransformInternal,
     enabled: isInteractionEnabled
   });
-  let [editEvents, setEditEvents] = useState11([]);
+  let [editEvents, setEditEvents] = useState12([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef12(false);
-  const touchStartRef = useRef12(null);
+  const initialRenderCompleted = useRef14(false);
+  const touchStartRef = useRef14(null);
   const circuitJsonKey = useMemo8(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
@@ -15070,7 +15373,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect16(() => {
+  useEffect17(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -15079,7 +15382,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }