@tscircuit/pcb-viewer 1.11.238 → 1.11.240

package/dist/index.js

@@ -6412,7 +6412,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect16, useMemo as useMemo6, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo7, useRef as useRef11, useState as useState11 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -6963,7 +6963,7 @@ function addInteractionMetadataToPrimitives({
 }
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState10 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo6, useState as useState10 } from "react";
 
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
@@ -7062,6 +7062,59 @@ var convertElementToPrimitives = (element, allElements) => {
     (e) => e.type === "source_port" && e.source_port_id === _source_port_id
   ) : void 0;
   switch (element.type) {
+    case "pcb_panel": {
+      const { width, height } = element;
+      return [
+        {
+          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+          pcb_drawing_type: "line",
+          x1: 0,
+          y1: 0,
+          x2: width,
+          y2: 0,
+          width: 1,
+          zoomIndependent: true,
+          layer: "board",
+          _element: element
+        },
+        {
+          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+          pcb_drawing_type: "line",
+          x1: 0,
+          y1: height,
+          x2: width,
+          y2: height,
+          width: 1,
+          zoomIndependent: true,
+          layer: "board",
+          _element: element
+        },
+        {
+          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+          pcb_drawing_type: "line",
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: height,
+          width: 1,
+          zoomIndependent: true,
+          layer: "board",
+          _element: element
+        },
+        {
+          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+          pcb_drawing_type: "line",
+          x1: width,
+          y1: 0,
+          x2: width,
+          y2: height,
+          width: 1,
+          zoomIndependent: true,
+          layer: "board",
+          _element: element
+        }
+      ];
+    }
     case "pcb_board": {
       const { width, height, center, outline } = element;
       if (outline && outline.length > 2) {
@@ -8017,7 +8070,7 @@ var convertElementToPrimitives = (element, allElements) => {
           y: noteTextElement.anchor_position.y,
           layer: "notes",
           align: noteTextElement.anchor_alignment ?? "center",
-          text: noteTextElement.text,
+          text: noteTextElement.text || "",
           size: noteTextElement.font_size,
           color: noteTextElement.color,
           _element: element,
@@ -9702,43 +9755,306 @@ var WarningGraphicsOverlay = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useEffect as useEffect7, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
 import { applyToPoint as applyToPoint8, identity as identity4, inverse as inverse2 } from "transformation-matrix";
+
+// src/lib/util/get-primitive-bounding-box.ts
+var mergeNumber = (a, b, fn) => fn(a, b);
+var rotatePoint = (x, y, centerX, centerY, rotationDeg) => {
+  const radians = rotationDeg * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const translatedX = x - centerX;
+  const translatedY = y - centerY;
+  const rotatedX = translatedX * cos - translatedY * sin;
+  const rotatedY = translatedX * sin + translatedY * cos;
+  return {
+    x: rotatedX + centerX,
+    y: rotatedY + centerY
+  };
+};
+var createBoxFromPoints = (points) => {
+  if (points.length === 0) return null;
+  let minX = points[0].x;
+  let maxX = points[0].x;
+  let minY = points[0].y;
+  let maxY = points[0].y;
+  for (const point of points) {
+    minX = mergeNumber(minX, point.x, Math.min);
+    maxX = mergeNumber(maxX, point.x, Math.max);
+    minY = mergeNumber(minY, point.y, Math.min);
+    maxY = mergeNumber(maxY, point.y, Math.max);
+  }
+  return { minX, maxX, minY, maxY };
+};
+var mergeBoundingBoxesInternal = (a, b) => ({
+  minX: Math.min(a.minX, b.minX),
+  maxX: Math.max(a.maxX, b.maxX),
+  minY: Math.min(a.minY, b.minY),
+  maxY: Math.max(a.maxY, b.maxY)
+});
+var mergeBoundingBoxes = (existing, next) => {
+  if (!existing) return next;
+  return mergeBoundingBoxesInternal(existing, next);
+};
+var getPrimitiveBoundingBox = (primitive) => {
+  switch (primitive.pcb_drawing_type) {
+    case "line": {
+      const halfWidth = (primitive.width ?? 0) / 2;
+      const points = [
+        { x: primitive.x1, y: primitive.y1 },
+        { x: primitive.x2, y: primitive.y2 }
+      ];
+      const baseBox = createBoxFromPoints(points);
+      if (!baseBox) return null;
+      return {
+        minX: baseBox.minX - halfWidth,
+        maxX: baseBox.maxX + halfWidth,
+        minY: baseBox.minY - halfWidth,
+        maxY: baseBox.maxY + halfWidth
+      };
+    }
+    case "rect": {
+      const halfW = primitive.w / 2;
+      const halfH = primitive.h / 2;
+      const corners = [
+        { x: primitive.x - halfW, y: primitive.y - halfH },
+        { x: primitive.x + halfW, y: primitive.y - halfH },
+        { x: primitive.x + halfW, y: primitive.y + halfH },
+        { x: primitive.x - halfW, y: primitive.y + halfH }
+      ];
+      const rotation = primitive.ccw_rotation ?? 0;
+      const rotatedCorners = rotation === 0 ? corners : corners.map(
+        (corner) => rotatePoint(
+          corner.x,
+          corner.y,
+          primitive.x,
+          primitive.y,
+          rotation
+        )
+      );
+      return createBoxFromPoints(rotatedCorners);
+    }
+    case "circle": {
+      return {
+        minX: primitive.x - primitive.r,
+        maxX: primitive.x + primitive.r,
+        minY: primitive.y - primitive.r,
+        maxY: primitive.y + primitive.r
+      };
+    }
+    case "oval": {
+      return {
+        minX: primitive.x - primitive.rX,
+        maxX: primitive.x + primitive.rX,
+        minY: primitive.y - primitive.rY,
+        maxY: primitive.y + primitive.rY
+      };
+    }
+    case "pill": {
+      const halfW = primitive.w / 2;
+      const halfH = primitive.h / 2;
+      const corners = [
+        { x: primitive.x - halfW, y: primitive.y - halfH },
+        { x: primitive.x + halfW, y: primitive.y - halfH },
+        { x: primitive.x + halfW, y: primitive.y + halfH },
+        { x: primitive.x - halfW, y: primitive.y + halfH }
+      ];
+      const rotation = primitive.ccw_rotation ?? 0;
+      const rotatedCorners = rotation === 0 ? corners : corners.map(
+        (corner) => rotatePoint(
+          corner.x,
+          corner.y,
+          primitive.x,
+          primitive.y,
+          rotation
+        )
+      );
+      return createBoxFromPoints(rotatedCorners);
+    }
+    case "polygon": {
+      return createBoxFromPoints(primitive.points);
+    }
+    case "polygon_with_arcs": {
+      const points = primitive.brep_shape.outer_ring.vertices.map((vertex) => ({
+        x: vertex.x,
+        y: vertex.y
+      }));
+      return createBoxFromPoints(points);
+    }
+    case "text": {
+      const size = primitive.size ?? 0;
+      const width = primitive.text ? primitive.text.length * size * 0.6 : 0;
+      const height = size;
+      if (width === 0 && height === 0) {
+        return {
+          minX: primitive.x,
+          maxX: primitive.x,
+          minY: primitive.y,
+          maxY: primitive.y
+        };
+      }
+      const halfW = width / 2;
+      const halfH = height / 2;
+      return {
+        minX: primitive.x - halfW,
+        maxX: primitive.x + halfW,
+        minY: primitive.y - halfH,
+        maxY: primitive.y + halfH
+      };
+    }
+    default:
+      return null;
+  }
+};
+
+// src/components/DimensionOverlay.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SNAP_THRESHOLD_PX = 16;
+var SNAP_MARKER_SIZE = 5;
+var shouldExcludePrimitiveFromSnapping = (primitive) => {
+  if (primitive.pcb_drawing_type === "text") return true;
+  const element = primitive._element;
+  if (!element || typeof element !== "object") {
+    return false;
+  }
+  const elementType = typeof element.type === "string" ? element.type : void 0;
+  if (!elementType) return false;
+  if (elementType.startsWith("pcb_silkscreen_")) return true;
+  if (elementType.startsWith("pcb_note_")) return true;
+  if (elementType === "pcb_text") return true;
+  if (elementType.startsWith("pcb_fabrication_note_") && elementType !== "pcb_fabrication_note_rect") {
+    return true;
+  }
+  return false;
+};
 var DimensionOverlay = ({
   children,
   transform,
-  focusOnHover = false
+  focusOnHover = false,
+  primitives = []
 }) => {
   if (!transform) transform = identity4();
   const [dimensionToolVisible, setDimensionToolVisible] = useState3(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState3(false);
   const [measureToolArmed, setMeasureToolArmed] = useState3(false);
-  const disarmMeasure = () => {
+  const [activeSnapIds, setActiveSnapIds] = useState3({
+    start: null,
+    end: null
+  });
+  const disarmMeasure = useCallback3(() => {
     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 container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
+  const elementBoundingBoxes = useMemo3(() => {
+    const boundingBoxes = /* @__PURE__ */ new Map();
+    for (const primitive of primitives) {
+      if (!primitive._element) continue;
+      if (shouldExcludePrimitiveFromSnapping(primitive)) continue;
+      const bbox = getPrimitiveBoundingBox(primitive);
+      if (!bbox) continue;
+      const existing = boundingBoxes.get(primitive._element);
+      boundingBoxes.set(
+        primitive._element,
+        mergeBoundingBoxes(existing ?? void 0, bbox)
+      );
+    }
+    return boundingBoxes;
+  }, [primitives]);
+  const snappingPoints = useMemo3(() => {
+    const points = [];
+    elementBoundingBoxes.forEach((bounds, element) => {
+      if (!bounds) return;
+      const centerX = (bounds.minX + bounds.maxX) / 2;
+      const centerY = (bounds.minY + bounds.maxY) / 2;
+      const anchorPoints = {
+        top_left: { x: bounds.minX, y: bounds.minY },
+        top_center: { x: centerX, y: bounds.minY },
+        top_right: { x: bounds.maxX, y: bounds.minY },
+        center_left: { x: bounds.minX, y: centerY },
+        center: { x: centerX, y: centerY },
+        center_right: { x: bounds.maxX, y: centerY },
+        bottom_left: { x: bounds.minX, y: bounds.maxY },
+        bottom_center: { x: centerX, y: bounds.maxY },
+        bottom_right: { x: bounds.maxX, y: bounds.maxY }
+      };
+      for (const [anchor, point] of Object.entries(anchorPoints)) {
+        points.push({
+          anchor,
+          point,
+          element
+        });
+      }
+    });
+    return points;
+  }, [elementBoundingBoxes]);
+  const snappingPointsWithScreen = useMemo3(() => {
+    return snappingPoints.map((snap, index) => ({
+      ...snap,
+      id: `${index}-${snap.anchor}`,
+      screenPoint: applyToPoint8(transform, snap.point)
+    }));
+  }, [snappingPoints, transform]);
+  const findSnap = useCallback3(
+    (rwPoint) => {
+      if (snappingPointsWithScreen.length === 0) {
+        return { point: rwPoint, id: null };
+      }
+      const screenPoint = applyToPoint8(transform, rwPoint);
+      let bestMatch = null;
+      for (const snap of snappingPointsWithScreen) {
+        const dx = snap.screenPoint.x - screenPoint.x;
+        const dy = snap.screenPoint.y - screenPoint.y;
+        const distance5 = Math.hypot(dx, dy);
+        if (distance5 > SNAP_THRESHOLD_PX) continue;
+        if (!bestMatch || distance5 < bestMatch.distance) {
+          bestMatch = {
+            distance: distance5,
+            id: snap.id,
+            point: snap.point
+          };
+        }
+      }
+      if (!bestMatch) {
+        return { point: rwPoint, id: null };
+      }
+      return { point: bestMatch.point, id: bestMatch.id };
+    },
+    [snappingPointsWithScreen, transform]
+  );
   useEffect7(() => {
     const container2 = containerRef.current;
     const down = (e) => {
       if (e.key === "d") {
-        setDStart({ x: mousePosRef.current.x, y: mousePosRef.current.y });
-        setDEnd({ x: mousePosRef.current.x, y: mousePosRef.current.y });
-        setDimensionToolVisible((visible) => !visible);
-        setDimensionToolStretching(true);
+        const snap = findSnap({
+          x: mousePosRef.current.x,
+          y: mousePosRef.current.y
+        });
+        setDStart({ x: snap.point.x, y: snap.point.y });
+        setDEnd({ x: snap.point.x, y: snap.point.y });
+        setActiveSnapIds({ start: snap.id, end: snap.id });
+        if (dimensionToolVisible) {
+          setDimensionToolVisible(false);
+          setDimensionToolStretching(false);
+          setActiveSnapIds({ start: null, end: null });
+        } else {
+          setDimensionToolVisible(true);
+          setDimensionToolStretching(true);
+        }
         disarmMeasure();
       }
       if (e.key === "Escape") {
         setDimensionToolVisible(false);
         setDimensionToolStretching(false);
+        setActiveSnapIds({ start: null, end: null });
         disarmMeasure();
       }
     };
@@ -9772,7 +10088,7 @@ var DimensionOverlay = ({
         container2.removeEventListener("mouseleave", removeKeyListener);
       }
     };
-  }, [containerRef]);
+  }, [containerRef, dimensionToolVisible, disarmMeasure, findSnap]);
   const screenDStart = applyToPoint8(transform, dStart);
   const screenDEnd = applyToPoint8(transform, dEnd);
   const arrowScreenBounds = {
@@ -9811,7 +10127,9 @@ var DimensionOverlay = ({
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
-          setDEnd({ x: rwPoint.x, y: rwPoint.y });
+          const snap = findSnap(rwPoint);
+          setDEnd({ x: snap.point.x, y: snap.point.y });
+          setActiveSnapIds((prev) => ({ ...prev, end: snap.id }));
         }
       },
       onMouseDown: (e) => {
@@ -9820,15 +10138,19 @@ var DimensionOverlay = ({
         const y = e.clientY - rect.top;
         const rwPoint = applyToPoint8(inverse2(transform), { x, y });
         if (measureToolArmed && !dimensionToolVisible) {
-          setDStart({ x: rwPoint.x, y: rwPoint.y });
-          setDEnd({ x: rwPoint.x, y: rwPoint.y });
+          const snap = findSnap(rwPoint);
+          setDStart({ x: snap.point.x, y: snap.point.y });
+          setDEnd({ x: snap.point.x, y: snap.point.y });
+          setActiveSnapIds({ start: snap.id, end: snap.id });
           setDimensionToolVisible(true);
           setDimensionToolStretching(true);
           disarmMeasure();
         } else if (dimensionToolStretching) {
           setDimensionToolStretching(false);
+          setActiveSnapIds((prev) => ({ ...prev, end: null }));
         } else if (dimensionToolVisible) {
           setDimensionToolVisible(false);
+          setActiveSnapIds({ start: null, end: null });
         }
       },
       children: [
@@ -9952,6 +10274,49 @@ var DimensionOverlay = ({
               ]
             }
           ),
+          dimensionToolStretching && snappingPointsWithScreen.map((snap) => {
+            const isActive = snap.id === activeSnapIds.start || snap.id === activeSnapIds.end;
+            const half = SNAP_MARKER_SIZE / 2;
+            return /* @__PURE__ */ jsxs4(
+              "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__ */ jsx6(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: SNAP_MARKER_SIZE,
+                      y2: SNAP_MARKER_SIZE,
+                      stroke: isActive ? "#66ccff" : "white",
+                      strokeWidth: 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "line",
+                    {
+                      x1: SNAP_MARKER_SIZE,
+                      y1: 0,
+                      x2: 0,
+                      y2: SNAP_MARKER_SIZE,
+                      stroke: isActive ? "#66ccff" : "white",
+                      strokeWidth: 1
+                    }
+                  )
+                ]
+              },
+              snap.id
+            );
+          }),
           /* @__PURE__ */ jsxs4(
             "div",
             {
@@ -11055,7 +11420,7 @@ var ErrorOverlay = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { useState as useState7, useMemo as useMemo3 } from "react";
+import { useState as useState7, useMemo as useMemo4 } from "react";
 import { applyToPoint as applyToPoint12, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
@@ -11472,7 +11837,7 @@ var MouseElementTracker = ({
 }) => {
   const [mousedPrimitives, setMousedPrimitives] = useState7([]);
   const [mousePos, setMousePos] = useState7({ x: 0, y: 0 });
-  const highlightedPrimitives = useMemo3(() => {
+  const highlightedPrimitives = useMemo4(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
       if (primitive._element?.type === "pcb_via") continue;
@@ -11836,15 +12201,15 @@ var PcbGroupOverlay = ({
 
 // src/components/RatsNestOverlay.tsx
 import { applyToPoint as applyToPoint14, identity as identity9 } from "transformation-matrix";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
-  const { netMap, idToNetMap } = useMemo4(
+  const { netMap, idToNetMap } = useMemo5(
     () => getFullConnectivityMapFromCircuitJson(soup || []),
     [soup]
   );
-  const ratsNestLines = useMemo4(() => {
+  const ratsNestLines = useMemo5(() => {
     if (!soup || !isShowingRatsNest) return [];
     const getElementPosition = (id) => {
       const element = su(soup)[id.replace(/_\d+$/, "")].get(id);
@@ -11941,7 +12306,7 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 import {
   useEffect as useEffect15,
   useState as useState9,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useRef as useRef10
 } from "react";
 import { css as css3 } from "@emotion/css";
@@ -11949,7 +12314,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.237",
+  version: "1.11.239",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -12001,7 +12366,7 @@ var package_default = {
     "@emotion/css": "^11.11.2",
     "@tscircuit/alphabet": "^0.0.3",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.282",
+    "circuit-json": "^0.0.295",
     "circuit-to-svg": "^0.0.240",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -12294,20 +12659,20 @@ var ToolbarOverlay = ({ children, elements }) => {
   useHotKey("6", hotKeyCallbacks["6"]);
   useHotKey("7", hotKeyCallbacks["7"]);
   useHotKey("8", hotKeyCallbacks["8"]);
-  const handleMouseEnter = useCallback3(() => {
+  const handleMouseEnter = useCallback4(() => {
     setIsMouseOverContainer(true);
   }, [setIsMouseOverContainer]);
-  const handleMouseLeave = useCallback3(() => {
+  const handleMouseLeave = useCallback4(() => {
     setIsMouseOverContainer(false);
     setLayerMenuOpen(false);
     setViewMenuOpen(false);
     setErrorsOpen(false);
     setHoveredErrorId(null);
   }, [setIsMouseOverContainer, setHoveredErrorId]);
-  const handleLayerMenuToggle = useCallback3(() => {
+  const handleLayerMenuToggle = useCallback4(() => {
     setLayerMenuOpen(!isLayerMenuOpen);
   }, [isLayerMenuOpen]);
-  const handleErrorsToggle = useCallback3(() => {
+  const handleErrorsToggle = useCallback4(() => {
     const newErrorsOpen = !isErrorsOpen;
     setErrorsOpen(newErrorsOpen);
     if (newErrorsOpen) {
@@ -12317,20 +12682,20 @@ var ToolbarOverlay = ({ children, elements }) => {
       setHoveredErrorId(null);
     }
   }, [isErrorsOpen, setHoveredErrorId]);
-  const handleEditTraceToggle = useCallback3(() => {
+  const handleEditTraceToggle = useCallback4(() => {
     setEditMode(editModes.in_draw_trace_mode ? "off" : "draw_trace");
   }, [editModes.in_draw_trace_mode, setEditMode]);
-  const handleMoveComponentToggle = useCallback3(() => {
+  const handleMoveComponentToggle = useCallback4(() => {
     setEditMode(editModes.in_move_footprint_mode ? "off" : "move_footprint");
   }, [editModes.in_move_footprint_mode, setEditMode]);
-  const handleRatsNestToggle = useCallback3(() => {
+  const handleRatsNestToggle = useCallback4(() => {
     setIsShowingRatsNest(!viewSettings.is_showing_rats_nest);
   }, [viewSettings.is_showing_rats_nest, setIsShowingRatsNest]);
-  const handleMeasureToolClick = useCallback3(() => {
+  const handleMeasureToolClick = useCallback4(() => {
     setMeasureToolArmed(true);
     window.dispatchEvent(new Event("arm-dimension-tool"));
   }, []);
-  const handleViewMenuToggle = useCallback3(() => {
+  const handleViewMenuToggle = useCallback4(() => {
     const newViewMenuOpen = !isViewMenuOpen;
     setViewMenuOpen(newViewMenuOpen);
     if (newViewMenuOpen) {
@@ -12765,7 +13130,7 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
-  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo5(() => {
+  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo6(() => {
     const primitivesWithoutInteractionMetadata2 = props.elements.flatMap(
       (elm) => convertElementToPrimitives(elm, props.elements)
     );
@@ -12778,7 +13143,7 @@ var CanvasElementsRenderer = (props) => {
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const errorRelatedIds = useMemo5(() => {
+  const errorRelatedIds = useMemo6(() => {
     if (!hoveredErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -12797,7 +13162,7 @@ var CanvasElementsRenderer = (props) => {
     }
     return relatedIds;
   }, [hoveredErrorId, elements]);
-  const primitives = useMemo5(() => {
+  const primitives = useMemo6(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -12808,7 +13173,7 @@ var CanvasElementsRenderer = (props) => {
       primitiveIdsInMousedOverNet: combinedPrimitiveIds
     });
   }, [primitivesWithoutInteractionMetadata, hoverState, errorRelatedIds]);
-  const onMouseOverPrimitives = useCallback4(
+  const onMouseOverPrimitives = useCallback5(
     (primitivesHoveredOver) => {
       const primitiveIdsInMousedOverNet = [];
       for (const primitive of primitivesHoveredOver) {
@@ -12861,6 +13226,7 @@ var CanvasElementsRenderer = (props) => {
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
+                  primitives: primitivesWithoutInteractionMetadata,
                   children: /* @__PURE__ */ jsx16(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx16(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx16(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx16(PcbGroupOverlay, { transform, elements, children: /* @__PURE__ */ jsx16(
                     DebugGraphicsOverlay,
                     {
@@ -12970,7 +13336,7 @@ var PCBViewer = ({
   editEvents = editEventsProp ?? editEvents;
   const initialRenderCompleted = useRef11(false);
   const touchStartRef = useRef11(null);
-  const circuitJsonKey = useMemo6(
+  const circuitJsonKey = useMemo7(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -13003,12 +13369,12 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  const pcbElmsPreEdit = useMemo6(() => {
+  const pcbElmsPreEdit = useMemo7(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
   }, [circuitJsonKey]);
-  const elements = useMemo6(() => {
+  const elements = useMemo7(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
@@ -13025,7 +13391,7 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo6(
+  const mergedInitialState = useMemo7(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }