@tscircuit/pcb-viewer 1.11.292 → 1.11.294

package/dist/index.js

@@ -12373,7 +12373,7 @@ function ifSetsMatchExactly(set1, set2) {
 
 // src/components/MouseElementTracker.tsx
 import { useState as useState7, useMemo as useMemo5 } from "react";
-import { applyToPoint as applyToPoint15, inverse as inverse5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
 import { useEffect as useEffect11, useState as useState6 } from "react";
@@ -12650,7 +12650,13 @@ var ElementOverlayBox = ({
   )) });
 };
 
-// src/components/AnchorOffsetOverlay/Board/index.tsx
+// src/components/AnchorOffsetOverlay/common/guards.ts
+var isPcbComponent = (element) => element?.type === "pcb_component";
+var isPcbGroup = (element) => element?.type === "pcb_group";
+var isPcbPanel = (element) => element?.type === "pcb_panel";
+var isPcbBoard = (element) => element?.type === "pcb_board";
+
+// src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
 import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/common/constants.ts
@@ -12676,67 +12682,15 @@ var COLORS = {
   LABEL_TEXT: "white"
 };
 
-// src/components/AnchorOffsetOverlay/common/guards.ts
-var isPcbComponent = (element) => element?.type === "pcb_component";
-var isPcbGroup = (element) => element?.type === "pcb_group";
-var isPcbPanel = (element) => element?.type === "pcb_panel";
-var isPcbBoard = (element) => element?.type === "pcb_board";
-
-// src/components/AnchorOffsetOverlay/Board/index.tsx
+// src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var BoardAnchorOffsetOverlay = ({
-  elements,
-  highlightedPrimitives,
+var AnchorOffsetOverlay = ({
+  targets,
   transform,
   containerWidth,
   containerHeight
 }) => {
-  const boards = elements.filter((el) => isPcbBoard(el));
-  const components = elements.filter(
-    (el) => isPcbComponent(el)
-  );
-  const groups = elements.filter((el) => isPcbGroup(el));
-  const hoveredComponentIds = highlightedPrimitives.map((primitive) => {
-    if (isPcbComponent(primitive._parent_pcb_component)) {
-      return primitive._parent_pcb_component.pcb_component_id;
-    }
-    if (isPcbComponent(primitive._element)) {
-      return primitive._element.pcb_component_id;
-    }
-    return null;
-  }).filter((id) => Boolean(id));
-  const hoveredGroupIds = /* @__PURE__ */ new Set();
-  hoveredComponentIds.forEach((componentId) => {
-    const component = components.find((c) => c.pcb_component_id === componentId);
-    if (component?.pcb_group_id) {
-      hoveredGroupIds.add(component.pcb_group_id);
-    }
-  });
-  const isShowingAnchorOffsets = useGlobalStore(
-    (state) => state.is_showing_group_anchor_offsets
-  );
-  if (!isShowingAnchorOffsets && hoveredComponentIds.length === 0) {
-    return null;
-  }
-  const componentTargets = components.map((component) => {
-    const boardId = component.positioned_relative_to_pcb_board_id;
-    if (!boardId) return null;
-    const board = boards.find((b) => b.pcb_board_id === boardId);
-    return board ? { component, board, type: "component" } : null;
-  }).filter(
-    (target) => Boolean(target)
-  );
-  const groupTargets = groups.map((group) => {
-    const boardId = group.positioned_relative_to_pcb_board_id;
-    if (!boardId || !group.center) return null;
-    const board = boards.find((b) => b.pcb_board_id === boardId);
-    return board ? { group, board, type: "group" } : null;
-  }).filter(
-    (target) => Boolean(target)
-  );
-  const targets = [...componentTargets, ...groupTargets];
   if (targets.length === 0) return null;
-  const shouldShowAllTargets = hoveredComponentIds.length === 0;
   const labelStyle = {
     color: COLORS.LABEL_TEXT,
     mixBlendMode: "difference",
@@ -12745,15 +12699,13 @@ var BoardAnchorOffsetOverlay = ({
     fontFamily: "monospace",
     fontWeight: "bold"
   };
-  const targetEntries = targets.filter((target) => {
-    if (target.type === "component") {
-      return shouldShowAllTargets || hoveredComponentIds.includes(target.component.pcb_component_id);
-    } else {
-      return shouldShowAllTargets || hoveredGroupIds.has(target.group.pcb_group_id);
+  const anchorScreens = /* @__PURE__ */ new Map();
+  targets.forEach((target) => {
+    if (!anchorScreens.has(target.anchor_id)) {
+      const screenPoint = applyToPoint12(transform, target.anchor);
+      anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  if (targetEntries.length === 0) return null;
-  const boardAnchorScreens = /* @__PURE__ */ new Map();
   return /* @__PURE__ */ jsx12(
     "div",
     {
@@ -12779,33 +12731,11 @@ var BoardAnchorOffsetOverlay = ({
           width: containerWidth,
           height: containerHeight,
           children: [
-            targetEntries.map((target) => {
-              const anchorPosition = target.board.center;
-              const anchorKey = target.board.pcb_board_id;
-              let targetCenter;
-              let targetId;
-              let displayOffsetX;
-              let displayOffsetY;
-              if (target.type === "component") {
-                targetCenter = target.component.center;
-                targetId = target.component.pcb_component_id;
-                displayOffsetX = target.component.display_offset_x;
-                displayOffsetY = target.component.display_offset_y;
-              } else {
-                if (!target.group.center) return null;
-                targetCenter = {
-                  x: target.group.anchor_position?.x ?? target.group.center.x,
-                  y: target.group.anchor_position?.y ?? target.group.center.y
-                };
-                targetId = target.group.pcb_group_id;
-                displayOffsetX = target.group.display_offset_x;
-                displayOffsetY = target.group.display_offset_y;
-              }
-              if (!boardAnchorScreens.has(anchorKey)) {
-                const screenPoint = applyToPoint12(transform, anchorPosition);
-                boardAnchorScreens.set(anchorKey, screenPoint);
-              }
-              const anchorMarkerScreen = boardAnchorScreens.get(anchorKey);
+            targets.map((target) => {
+              const anchorPosition = target.anchor;
+              const anchorKey = target.anchor_id;
+              const targetCenter = target.target;
+              const anchorMarkerScreen = anchorScreens.get(anchorKey);
               const targetScreen = applyToPoint12(transform, targetCenter);
               const offsetX = targetCenter.x - anchorPosition.x;
               const offsetY = targetCenter.y - anchorPosition.y;
@@ -12817,8 +12747,8 @@ var BoardAnchorOffsetOverlay = ({
               const yLabelOffset = isTargetRightOfAnchor ? VISUAL_CONFIG.LABEL_OFFSET_RIGHT : VISUAL_CONFIG.LABEL_OFFSET_LEFT;
               const shouldShowXLabel = xLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
               const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
-              const xLabelText = `${displayOffsetX ?? offsetX.toFixed(2)}mm`;
-              const yLabelText = `${displayOffsetY ?? offsetY.toFixed(2)}mm`;
+              const xLabelText = `${target.display_offset_x ?? offsetX.toFixed(2)}mm`;
+              const yLabelText = `${target.display_offset_y ?? offsetY.toFixed(2)}mm`;
               return /* @__PURE__ */ jsxs9("g", { children: [
                 /* @__PURE__ */ jsx12(
                   "line",
@@ -12844,7 +12774,7 @@ var BoardAnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                target.type === "component" ? /* @__PURE__ */ jsx12(
+                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx12(
                   "circle",
                   {
                     cx: targetScreen.x,
@@ -12854,30 +12784,33 @@ var BoardAnchorOffsetOverlay = ({
                     stroke: COLORS.COMPONENT_MARKER_STROKE,
                     strokeWidth: 1
                   }
-                ) : /* @__PURE__ */ jsxs9(Fragment5, { children: [
-                  /* @__PURE__ */ jsx12(
-                    "line",
-                    {
-                      x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                      y1: targetScreen.y,
-                      x2: targetScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                      y2: targetScreen.y,
-                      stroke: COLORS.OFFSET_LINE,
-                      strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                    }
-                  ),
-                  /* @__PURE__ */ jsx12(
-                    "line",
-                    {
-                      x1: targetScreen.x,
-                      y1: targetScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                      x2: targetScreen.x,
-                      y2: targetScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                      stroke: COLORS.OFFSET_LINE,
-                      strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                    }
-                  )
-                ] }),
+                ) : (
+                  // assumes "group"
+                  /* @__PURE__ */ jsxs9(Fragment5, { children: [
+                    /* @__PURE__ */ jsx12(
+                      "line",
+                      {
+                        x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                        y1: targetScreen.y,
+                        x2: targetScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                        y2: targetScreen.y,
+                        stroke: COLORS.OFFSET_LINE,
+                        strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12(
+                      "line",
+                      {
+                        x1: targetScreen.x,
+                        y1: targetScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                        x2: targetScreen.x,
+                        y2: targetScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                        stroke: COLORS.OFFSET_LINE,
+                        strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
+                      }
+                    )
+                  ] })
+                ),
                 shouldShowXLabel && /* @__PURE__ */ jsx12(
                   "foreignObject",
                   {
@@ -12914,34 +12847,32 @@ var BoardAnchorOffsetOverlay = ({
                     )
                   }
                 )
-              ] }, `${target.board.pcb_board_id}-${targetId}-${target.type}`);
+              ] }, target.id);
             }),
-            Array.from(boardAnchorScreens.entries()).map(
-              ([boardId, anchorScreen]) => /* @__PURE__ */ jsxs9("g", { children: [
-                /* @__PURE__ */ jsx12(
-                  "line",
-                  {
-                    x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y1: anchorScreen.y,
-                    x2: anchorScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y2: anchorScreen.y,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                ),
-                /* @__PURE__ */ jsx12(
-                  "line",
-                  {
-                    x1: anchorScreen.x,
-                    y1: anchorScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    x2: anchorScreen.x,
-                    y2: anchorScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                )
-              ] }, `anchor-${boardId}`)
-            )
+            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs9("g", { children: [
+              /* @__PURE__ */ jsx12(
+                "line",
+                {
+                  x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                  y1: anchorScreen.y,
+                  x2: anchorScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                  y2: anchorScreen.y,
+                  stroke: COLORS.OFFSET_LINE,
+                  strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                "line",
+                {
+                  x1: anchorScreen.x,
+                  y1: anchorScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                  x2: anchorScreen.x,
+                  y2: anchorScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
+                  stroke: COLORS.OFFSET_LINE,
+                  strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
+                }
+              )
+            ] }, `anchor-${anchorId}`))
           ]
         }
       )
@@ -12949,9 +12880,107 @@ var BoardAnchorOffsetOverlay = ({
   );
 };
 
-// src/components/AnchorOffsetOverlay/Group/index.tsx
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+// src/components/AnchorOffsetOverlay/BoardAnchorOffsetOverlay.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var BoardAnchorOffsetOverlay = ({
+  elements,
+  highlightedPrimitives,
+  transform,
+  containerWidth,
+  containerHeight
+}) => {
+  const boards = elements.filter((el) => isPcbBoard(el));
+  const components = elements.filter(
+    (el) => isPcbComponent(el)
+  );
+  const groups = elements.filter((el) => isPcbGroup(el));
+  const hoveredComponentIds = highlightedPrimitives.map((primitive) => {
+    if (isPcbComponent(primitive._parent_pcb_component)) {
+      return primitive._parent_pcb_component.pcb_component_id;
+    }
+    if (isPcbComponent(primitive._element)) {
+      return primitive._element.pcb_component_id;
+    }
+    return null;
+  }).filter((id) => Boolean(id));
+  const hoveredGroupIds = /* @__PURE__ */ new Set();
+  hoveredComponentIds.forEach((componentId) => {
+    const component = components.find((c) => c.pcb_component_id === componentId);
+    if (component?.pcb_group_id) {
+      hoveredGroupIds.add(component.pcb_group_id);
+    }
+  });
+  const isShowingAnchorOffsets = useGlobalStore(
+    (state) => state.is_showing_group_anchor_offsets
+  );
+  if (!isShowingAnchorOffsets && hoveredComponentIds.length === 0) {
+    return null;
+  }
+  const componentTargets = components.map((component) => {
+    const boardId = component.positioned_relative_to_pcb_board_id;
+    if (!boardId) return null;
+    const board = boards.find((b) => b.pcb_board_id === boardId);
+    return board ? { component, board, type: "component" } : null;
+  }).filter(
+    (target) => Boolean(target)
+  );
+  const groupTargets = groups.map((group) => {
+    const boardId = group.positioned_relative_to_pcb_board_id;
+    if (!boardId || !group.center) return null;
+    const board = boards.find((b) => b.pcb_board_id === boardId);
+    return board ? { group, board, type: "group" } : null;
+  }).filter(
+    (target) => Boolean(target)
+  );
+  const targets = [...componentTargets, ...groupTargets];
+  if (targets.length === 0) return null;
+  const shouldShowAllTargets = hoveredComponentIds.length === 0;
+  const targetEntries = targets.filter((target) => {
+    if (target.type === "component") {
+      return shouldShowAllTargets || hoveredComponentIds.includes(target.component.pcb_component_id);
+    } else {
+      return shouldShowAllTargets || hoveredGroupIds.has(target.group.pcb_group_id);
+    }
+  });
+  if (targetEntries.length === 0) return null;
+  const sharedTargets = targetEntries.map((target) => {
+    if (target.type === "component") {
+      return {
+        id: `${target.board.pcb_board_id}-${target.component.pcb_component_id}-${target.type}`,
+        anchor: target.board.center,
+        anchor_id: target.board.pcb_board_id,
+        target: target.component.center,
+        type: "component",
+        display_offset_x: target.component.display_offset_x,
+        display_offset_y: target.component.display_offset_y
+      };
+    }
+    return {
+      id: `${target.board.pcb_board_id}-${target.group.pcb_group_id}-${target.type}`,
+      anchor: target.board.center,
+      anchor_id: target.board.pcb_board_id,
+      target: {
+        x: target.group.anchor_position?.x ?? target.group.center.x,
+        y: target.group.anchor_position?.y ?? target.group.center.y
+      },
+      type: "group",
+      display_offset_x: target.group.display_offset_x,
+      display_offset_y: target.group.display_offset_y
+    };
+  }).filter((t) => Boolean(t));
+  return /* @__PURE__ */ jsx13(
+    AnchorOffsetOverlay,
+    {
+      targets: sharedTargets,
+      transform,
+      containerWidth,
+      containerHeight
+    }
+  );
+};
+
+// src/components/AnchorOffsetOverlay/GroupAnchorOffsetOverlay.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13033,14 +13062,6 @@ var GroupAnchorOffsetOverlay = ({
   const targets = [...componentTargets, ...groupTargets];
   if (targets.length === 0) return null;
   const shouldShowAllTargets = hoveredComponentIds.length === 0;
-  const labelStyle = {
-    color: COLORS.LABEL_TEXT,
-    mixBlendMode: "difference",
-    pointerEvents: "none",
-    fontSize: VISUAL_CONFIG.LABEL_FONT_SIZE,
-    fontFamily: "monospace",
-    fontWeight: "bold"
-  };
   const targetEntries = targets.filter((target) => {
     if (target.type === "component") {
       return shouldShowAllTargets || hoveredComponentIds.includes(target.component.pcb_component_id);
@@ -13049,16 +13070,89 @@ var GroupAnchorOffsetOverlay = ({
     }
   });
   if (targetEntries.length === 0) return null;
-  const groupAnchorScreens = /* @__PURE__ */ new Map();
-  targetEntries.forEach((target) => {
-    if (!target.parentGroup.anchor_position) return;
-    const anchorScreen = applyToPoint13(
+  const sharedTargets = targetEntries.map((target) => {
+    const anchor = target.parentGroup.anchor_position;
+    if (!anchor) return null;
+    if (target.type === "component") {
+      if (!target.component.center) return null;
+      return {
+        id: `${target.parentGroup.pcb_group_id}-${target.component.pcb_component_id}-${target.type}`,
+        anchor,
+        anchor_id: target.parentGroup.pcb_group_id,
+        target: target.component.center,
+        type: "component",
+        display_offset_x: target.component.display_offset_x,
+        display_offset_y: target.component.display_offset_y
+      };
+    }
+    if (!target.group.center) return null;
+    return {
+      id: `${target.parentGroup.pcb_group_id}-${target.group.pcb_group_id}-${target.type}`,
+      anchor,
+      anchor_id: target.parentGroup.pcb_group_id,
+      target: target.group.center,
+      type: "group",
+      display_offset_x: target.group.display_offset_x,
+      display_offset_y: target.group.display_offset_y
+    };
+  }).filter((t) => Boolean(t));
+  return /* @__PURE__ */ jsx14(
+    AnchorOffsetOverlay,
+    {
+      targets: sharedTargets,
       transform,
-      target.parentGroup.anchor_position
-    );
-    groupAnchorScreens.set(target.parentGroup.pcb_group_id, anchorScreen);
-  });
-  return /* @__PURE__ */ jsx13(
+      containerWidth,
+      containerHeight
+    }
+  );
+};
+
+// src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var calculateComponentBoundingBox = (component, elements) => {
+  const componentId = component.pcb_component_id;
+  const padsAndHoles = elements.filter(
+    (el) => (el.type === "pcb_smtpad" || el.type === "pcb_plated_hole") && el.pcb_component_id === componentId || el.type === "pcb_hole" && el.pcb_component_id === componentId
+  );
+  if (padsAndHoles.length === 0) {
+    return getBoundsOfPcbElements([component]);
+  }
+  return getBoundsOfPcbElements(padsAndHoles);
+};
+var ComponentBoundingBoxOverlay = ({
+  elements,
+  highlightedPrimitives,
+  transform,
+  containerWidth,
+  containerHeight
+}) => {
+  const hoveredComponents = /* @__PURE__ */ new Map();
+  for (const primitive of highlightedPrimitives) {
+    if (isPcbComponent(primitive._parent_pcb_component)) {
+      hoveredComponents.set(
+        primitive._parent_pcb_component.pcb_component_id,
+        primitive._parent_pcb_component
+      );
+    }
+    if (isPcbComponent(primitive._element)) {
+      hoveredComponents.set(
+        primitive._element.pcb_component_id,
+        primitive._element
+      );
+    }
+  }
+  if (hoveredComponents.size === 0) return null;
+  const renderData = [];
+  for (const component of hoveredComponents.values()) {
+    const bbox = calculateComponentBoundingBox(component, elements);
+    if (!bbox) continue;
+    const groupId = component.positioned_relative_to_pcb_group_id ?? component.pcb_group_id;
+    const group = groupId ? su(elements).pcb_group.get(groupId) : null;
+    renderData.push({ component, bbox, group });
+  }
+  if (renderData.length === 0) return null;
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       style: {
@@ -13071,196 +13165,89 @@ var GroupAnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsx15(
         "svg",
         {
-          style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            pointerEvents: "none"
-          },
+          style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
           width: containerWidth,
           height: containerHeight,
-          children: [
-            targetEntries.map((target) => {
-              const anchor = target.parentGroup.anchor_position;
-              if (!anchor) return null;
-              const anchorMarkerPosition = { x: anchor.x, y: anchor.y };
-              let targetCenter = null;
-              let targetId;
-              let displayOffsetX;
-              let displayOffsetY;
-              if (target.type === "component") {
-                const center = target.component.center;
-                if (!center) return null;
-                targetCenter = { x: center.x, y: center.y };
-                targetId = target.component.pcb_component_id;
-                displayOffsetX = target.component.display_offset_x;
-                displayOffsetY = target.component.display_offset_y;
-              } else {
-                if (!target.group.center) return null;
-                targetCenter = {
-                  x: target.group.center.x,
-                  y: target.group.center.y
-                };
-                targetId = target.group.pcb_group_id;
-                displayOffsetX = target.group.display_offset_x;
-                displayOffsetY = target.group.display_offset_y;
-              }
-              const offsetX = targetCenter.x - anchorMarkerPosition.x;
-              const offsetY = targetCenter.y - anchorMarkerPosition.y;
-              const anchorMarkerScreen = applyToPoint13(
-                transform,
-                anchorMarkerPosition
-              );
-              const targetScreen = applyToPoint13(transform, targetCenter);
-              const xLineLength = Math.abs(targetScreen.x - anchorMarkerScreen.x);
-              const yLineLength = Math.abs(targetScreen.y - anchorMarkerScreen.y);
-              const isTargetAboveAnchor = targetScreen.y < anchorMarkerScreen.y;
-              const isTargetRightOfAnchor = targetScreen.x > anchorMarkerScreen.x;
-              const xLabelOffset = isTargetAboveAnchor ? VISUAL_CONFIG.LABEL_OFFSET_ABOVE : VISUAL_CONFIG.LABEL_OFFSET_BELOW;
-              const yLabelOffset = isTargetRightOfAnchor ? VISUAL_CONFIG.LABEL_OFFSET_RIGHT : VISUAL_CONFIG.LABEL_OFFSET_LEFT;
-              const shouldShowXLabel = xLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
-              const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
-              const xLabelText = displayOffsetX ? displayOffsetX : `${offsetX.toFixed(2)}mm`;
-              const yLabelText = displayOffsetY ? displayOffsetY : `${offsetY.toFixed(2)}mm`;
-              return /* @__PURE__ */ jsxs10(
-                "g",
+          children: renderData.map(({ component, bbox, group }) => {
+            const topLeft = applyToPoint13(transform, {
+              x: bbox.minX,
+              y: bbox.maxY
+            });
+            const bottomRight = applyToPoint13(transform, {
+              x: bbox.maxX,
+              y: bbox.minY
+            });
+            const screenBbox = {
+              x: Math.min(topLeft.x, bottomRight.x),
+              y: Math.min(topLeft.y, bottomRight.y),
+              width: Math.abs(bottomRight.x - topLeft.x),
+              height: Math.abs(bottomRight.y - topLeft.y)
+            };
+            const componentCenter = component.center ?? {
+              x: (bbox.minX + bbox.maxX) / 2,
+              y: (bbox.minY + bbox.maxY) / 2
+            };
+            const componentCenterScreen = applyToPoint13(transform, componentCenter);
+            return /* @__PURE__ */ jsxs10("g", { children: [
+              /* @__PURE__ */ jsx15(
+                "rect",
                 {
-                  children: [
-                    /* @__PURE__ */ jsx13(
-                      "line",
-                      {
-                        x1: anchorMarkerScreen.x,
-                        y1: anchorMarkerScreen.y,
-                        x2: targetScreen.x,
-                        y2: anchorMarkerScreen.y,
-                        stroke: COLORS.OFFSET_LINE,
-                        strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                        strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                      }
-                    ),
-                    /* @__PURE__ */ jsx13(
-                      "line",
-                      {
-                        x1: targetScreen.x,
-                        y1: anchorMarkerScreen.y,
-                        x2: targetScreen.x,
-                        y2: targetScreen.y,
-                        stroke: COLORS.OFFSET_LINE,
-                        strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                        strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                      }
-                    ),
-                    target.type === "component" ? /* @__PURE__ */ jsx13(
-                      "circle",
-                      {
-                        cx: targetScreen.x,
-                        cy: targetScreen.y,
-                        r: VISUAL_CONFIG.COMPONENT_MARKER_RADIUS,
-                        fill: COLORS.COMPONENT_MARKER_FILL,
-                        stroke: COLORS.COMPONENT_MARKER_STROKE,
-                        strokeWidth: 1
-                      }
-                    ) : /* @__PURE__ */ jsxs10(Fragment6, { children: [
-                      /* @__PURE__ */ jsx13(
-                        "line",
-                        {
-                          x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                          y1: targetScreen.y,
-                          x2: targetScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                          y2: targetScreen.y,
-                          stroke: COLORS.OFFSET_LINE,
-                          strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                        }
-                      ),
-                      /* @__PURE__ */ jsx13(
-                        "line",
-                        {
-                          x1: targetScreen.x,
-                          y1: targetScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                          x2: targetScreen.x,
-                          y2: targetScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                          stroke: COLORS.OFFSET_LINE,
-                          strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                        }
-                      )
-                    ] }),
-                    shouldShowXLabel && /* @__PURE__ */ jsx13(
-                      "foreignObject",
-                      {
-                        x: Math.min(anchorMarkerScreen.x, targetScreen.x),
-                        y: anchorMarkerScreen.y + xLabelOffset,
-                        width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
-                        height: 20,
-                        style: { overflow: "visible" },
-                        children: /* @__PURE__ */ jsx13("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
-                      }
-                    ),
-                    shouldShowYLabel && /* @__PURE__ */ jsx13(
-                      "foreignObject",
-                      {
-                        x: targetScreen.x + yLabelOffset,
-                        y: Math.min(anchorMarkerScreen.y, targetScreen.y),
-                        width: 20,
-                        height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
-                        style: { overflow: "visible" },
-                        children: /* @__PURE__ */ jsx13(
-                          "div",
-                          {
-                            style: {
-                              ...labelStyle,
-                              display: "flex",
-                              alignItems: "center",
-                              height: "100%"
-                            },
-                            children: yLabelText
-                          }
-                        )
-                      }
-                    )
-                  ]
-                },
-                `${target.parentGroup.pcb_group_id}-${targetId}-${target.type}`
-              );
-            }),
-            Array.from(groupAnchorScreens.entries()).map(
-              ([groupId, anchorScreen]) => /* @__PURE__ */ jsxs10("g", { children: [
-                /* @__PURE__ */ jsx13(
-                  "line",
-                  {
-                    x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y1: anchorScreen.y,
-                    x2: anchorScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y2: anchorScreen.y,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                ),
-                /* @__PURE__ */ jsx13(
-                  "line",
-                  {
-                    x1: anchorScreen.x,
-                    y1: anchorScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    x2: anchorScreen.x,
-                    y2: anchorScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                )
-              ] }, `anchor-${groupId}`)
-            )
-          ]
+                  x: screenBbox.x,
+                  y: screenBbox.y,
+                  width: screenBbox.width,
+                  height: screenBbox.height,
+                  fill: "none",
+                  stroke: "white",
+                  strokeWidth: 1.5,
+                  strokeDasharray: "4,4"
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "line",
+                {
+                  x1: componentCenterScreen.x - 6,
+                  y1: componentCenterScreen.y,
+                  x2: componentCenterScreen.x + 6,
+                  y2: componentCenterScreen.y,
+                  stroke: COLORS.COMPONENT_MARKER_STROKE,
+                  strokeWidth: 1.5
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "line",
+                {
+                  x1: componentCenterScreen.x,
+                  y1: componentCenterScreen.y - 6,
+                  x2: componentCenterScreen.x,
+                  y2: componentCenterScreen.y + 6,
+                  stroke: COLORS.COMPONENT_MARKER_STROKE,
+                  strokeWidth: 1.5
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "circle",
+                {
+                  cx: componentCenterScreen.x,
+                  cy: componentCenterScreen.y,
+                  r: VISUAL_CONFIG.COMPONENT_MARKER_RADIUS,
+                  fill: COLORS.COMPONENT_MARKER_FILL,
+                  stroke: COLORS.COMPONENT_MARKER_STROKE,
+                  strokeWidth: 1
+                }
+              )
+            ] }, component.pcb_component_id);
+          })
         }
       )
     }
   );
 };
 
-// src/components/AnchorOffsetOverlay/Panel/index.tsx
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+// src/components/AnchorOffsetOverlay/PanelAnchorOffsetOverlay.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
 var PanelAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13293,182 +13280,35 @@ var PanelAnchorOffsetOverlay = ({
   );
   if (boardTargets.length === 0) return null;
   const shouldShowAllTargets = hoveredBoardIds.length === 0;
-  const labelStyle = {
-    color: COLORS.LABEL_TEXT,
-    mixBlendMode: "difference",
-    pointerEvents: "none",
-    fontSize: VISUAL_CONFIG.LABEL_FONT_SIZE,
-    fontFamily: "monospace",
-    fontWeight: "bold"
-  };
   const targetEntries = boardTargets.filter((target) => {
     return shouldShowAllTargets || hoveredBoardIds.includes(target.board.pcb_board_id);
   });
   if (targetEntries.length === 0) return null;
-  const panelAnchorScreens = /* @__PURE__ */ new Map();
-  return /* @__PURE__ */ jsx14(
-    "div",
+  const sharedTargets = targetEntries.map((target) => {
+    if (!target.board.center) return null;
+    return {
+      id: `${target.panel.pcb_panel_id}-${target.board.pcb_board_id}-${target.type}`,
+      anchor: target.panel.center,
+      anchor_id: target.panel.pcb_panel_id,
+      target: target.board.center,
+      type: "board",
+      display_offset_x: target.board.display_offset_x,
+      display_offset_y: target.board.display_offset_y
+    };
+  }).filter((t) => Boolean(t));
+  return /* @__PURE__ */ jsx16(
+    AnchorOffsetOverlay,
     {
-      style: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: containerWidth,
-        height: containerHeight,
-        overflow: "hidden",
-        pointerEvents: "none",
-        zIndex: zIndexMap.dimensionOverlay
-      },
-      children: /* @__PURE__ */ jsxs11(
-        "svg",
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            pointerEvents: "none"
-          },
-          width: containerWidth,
-          height: containerHeight,
-          children: [
-            targetEntries.map((target) => {
-              const anchorPosition = target.panel.center;
-              const anchorKey = target.panel.pcb_panel_id;
-              let targetCenter;
-              let targetId;
-              let displayOffsetX;
-              let displayOffsetY;
-              targetCenter = target.board.center;
-              targetId = target.board.pcb_board_id;
-              displayOffsetX = target.board.display_offset_x;
-              displayOffsetY = target.board.display_offset_y;
-              if (!panelAnchorScreens.has(anchorKey)) {
-                const screenPoint = applyToPoint14(transform, anchorPosition);
-                panelAnchorScreens.set(anchorKey, screenPoint);
-              }
-              const anchorMarkerScreen = panelAnchorScreens.get(anchorKey);
-              const targetScreen = applyToPoint14(transform, targetCenter);
-              const offsetX = targetCenter.x - anchorPosition.x;
-              const offsetY = targetCenter.y - anchorPosition.y;
-              const xLineLength = Math.abs(targetScreen.x - anchorMarkerScreen.x);
-              const yLineLength = Math.abs(targetScreen.y - anchorMarkerScreen.y);
-              const isTargetAboveAnchor = targetScreen.y < anchorMarkerScreen.y;
-              const isTargetRightOfAnchor = targetScreen.x > anchorMarkerScreen.x;
-              const xLabelOffset = isTargetAboveAnchor ? VISUAL_CONFIG.LABEL_OFFSET_ABOVE : VISUAL_CONFIG.LABEL_OFFSET_BELOW;
-              const yLabelOffset = isTargetRightOfAnchor ? VISUAL_CONFIG.LABEL_OFFSET_RIGHT : VISUAL_CONFIG.LABEL_OFFSET_LEFT;
-              const shouldShowXLabel = xLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
-              const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
-              const xLabelText = `${displayOffsetX ?? offsetX.toFixed(2)}mm`;
-              const yLabelText = `${displayOffsetY ?? offsetY.toFixed(2)}mm`;
-              return /* @__PURE__ */ jsxs11("g", { children: [
-                /* @__PURE__ */ jsx14(
-                  "line",
-                  {
-                    x1: anchorMarkerScreen.x,
-                    y1: anchorMarkerScreen.y,
-                    x2: targetScreen.x,
-                    y2: anchorMarkerScreen.y,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                    strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  "line",
-                  {
-                    x1: targetScreen.x,
-                    y1: anchorMarkerScreen.y,
-                    x2: targetScreen.x,
-                    y2: targetScreen.y,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                    strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  "circle",
-                  {
-                    cx: targetScreen.x,
-                    cy: targetScreen.y,
-                    r: VISUAL_CONFIG.COMPONENT_MARKER_RADIUS,
-                    fill: COLORS.COMPONENT_MARKER_FILL,
-                    stroke: COLORS.COMPONENT_MARKER_STROKE,
-                    strokeWidth: 1
-                  }
-                ),
-                shouldShowXLabel && /* @__PURE__ */ jsx14(
-                  "foreignObject",
-                  {
-                    x: Math.min(anchorMarkerScreen.x, targetScreen.x),
-                    y: anchorMarkerScreen.y + xLabelOffset,
-                    width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
-                    height: 20,
-                    style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx14("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
-                  }
-                ),
-                shouldShowYLabel && /* @__PURE__ */ jsx14(
-                  "foreignObject",
-                  {
-                    x: targetScreen.x + yLabelOffset,
-                    y: Math.min(anchorMarkerScreen.y, targetScreen.y),
-                    width: VISUAL_CONFIG.Y_LABEL_MIN_WIDTH,
-                    height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
-                    style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx14(
-                      "div",
-                      {
-                        style: {
-                          ...labelStyle,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: isTargetRightOfAnchor ? "flex-start" : "flex-end",
-                          whiteSpace: "nowrap",
-                          padding: "0 4px",
-                          height: "100%"
-                        },
-                        children: yLabelText
-                      }
-                    )
-                  }
-                )
-              ] }, `${target.panel.pcb_panel_id}-${targetId}-${target.type}`);
-            }),
-            Array.from(panelAnchorScreens.entries()).map(
-              ([panelId, anchorScreen]) => /* @__PURE__ */ jsxs11("g", { children: [
-                /* @__PURE__ */ jsx14(
-                  "line",
-                  {
-                    x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y1: anchorScreen.y,
-                    x2: anchorScreen.x + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    y2: anchorScreen.y,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  "line",
-                  {
-                    x1: anchorScreen.x,
-                    y1: anchorScreen.y - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    x2: anchorScreen.x,
-                    y2: anchorScreen.y + VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
-                    stroke: COLORS.OFFSET_LINE,
-                    strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
-                  }
-                )
-              ] }, `anchor-${panelId}`)
-            )
-          ]
-        }
-      )
+      targets: sharedTargets,
+      transform,
+      containerWidth,
+      containerHeight
     }
   );
 };
 
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -13614,7 +13454,7 @@ var MouseElementTracker = ({
         h = "h" in primitive ? primitive.h : "r" in primitive ? primitive.r * 2 : "rX" in primitive && "rY" in primitive ? primitive.rY * 2 : 0;
       }
       if (!basePoint) continue;
-      const screenPos = applyToPoint15(transform, basePoint);
+      const screenPos = applyToPoint14(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -13639,7 +13479,7 @@ var MouseElementTracker = ({
   }, [mousedPrimitives, transform]);
   const handleInteraction = (x, y, transform2, primitives2) => {
     setMousePos({ x, y });
-    const rwPoint = applyToPoint15(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint14(inverse5(transform2), { x, y });
     const newMousedPrimitives = getPrimitivesUnderPoint(
       primitives2,
       rwPoint,
@@ -13654,7 +13494,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -13678,7 +13518,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           ElementOverlayBox,
           {
             elements,
@@ -13686,8 +13526,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs12(Fragment7, { children: [
-          /* @__PURE__ */ jsx15(
+        transform && /* @__PURE__ */ jsxs11(Fragment6, { children: [
+          /* @__PURE__ */ jsx17(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -13697,7 +13537,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx17(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -13707,7 +13547,17 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx17(
+            ComponentBoundingBoxOverlay,
+            {
+              elements,
+              highlightedPrimitives,
+              transform,
+              containerWidth: width,
+              containerHeight: height
+            }
+          ),
+          /* @__PURE__ */ jsx17(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -13724,10 +13574,10 @@ var MouseElementTracker = ({
 };
 
 // src/components/PcbGroupOverlay.tsx
-import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+import { applyToPoint as applyToPoint15 } from "transformation-matrix";
 import { identity as identity8 } from "transformation-matrix";
 import { useRef as useRef9, useEffect as useEffect12 } from "react";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -13882,10 +13732,10 @@ var PcbGroupOverlay = ({
         minY -= totalPadding;
         maxY += totalPadding;
       }
-      const topLeft = applyToPoint16(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint16(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint16(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint16(transform, { x: maxX, y: minY });
+      const topLeft = applyToPoint15(transform, { x: minX, y: maxY });
+      const topRight = applyToPoint15(transform, { x: maxX, y: maxY });
+      const bottomLeft = applyToPoint15(transform, { x: minX, y: minY });
+      const bottomRight = applyToPoint15(transform, { x: maxX, y: minY });
       const groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
       ctx.strokeStyle = groupColor;
       ctx.lineWidth = 2;
@@ -13935,7 +13785,7 @@ var PcbGroupOverlay = ({
           x: group.anchor_position[0] ?? 0,
           y: group.anchor_position[1] ?? 0
         } : { x: group.anchor_position.x, y: group.anchor_position.y };
-        const anchorScreenPos = applyToPoint16(transform, anchorPositionValue);
+        const anchorScreenPos = applyToPoint15(transform, anchorPositionValue);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -13960,14 +13810,14 @@ var PcbGroupOverlay = ({
     is_showing_group_anchor_offsets,
     hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "canvas",
           {
             ref: canvasRef,
@@ -13987,9 +13837,9 @@ var PcbGroupOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint17, identity as identity9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint16, identity as identity9 } from "transformation-matrix";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, 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(
@@ -14052,9 +13902,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity9();
-  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx19(
       "svg",
       {
         style: {
@@ -14068,9 +13918,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint17(transform, startPoint);
-          const transformedEnd = applyToPoint17(transform, endPoint);
-          return /* @__PURE__ */ jsx17(
+          const transformedStart = applyToPoint16(transform, startPoint);
+          const transformedEnd = applyToPoint16(transform, endPoint);
+          return /* @__PURE__ */ jsx19(
             "line",
             {
               x1: transformedStart.x,
@@ -14096,7 +13946,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.291",
+  version: "1.11.293",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -14202,9 +14052,9 @@ var useIsSmallScreen = () => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -14220,8 +14070,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       `,
       onClick,
       children: [
-        /* @__PURE__ */ jsx18("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx20(
           "span",
           {
             style: {
@@ -14241,7 +14091,7 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx20(
   "div",
   {
     ...props,
@@ -14278,7 +14128,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -14305,15 +14155,15 @@ var CheckboxMenuItem = ({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx18("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx20("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx18("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -14340,9 +14190,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx18("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx20("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx18("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -14494,7 +14344,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       style: { position: "relative", zIndex: "999 !important" },
@@ -14502,7 +14352,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -14523,7 +14373,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -14546,7 +14396,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs14(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -14557,10 +14407,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         "span",
                         {
                           style: {
@@ -14572,7 +14422,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx18("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx18(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx20("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx20(
                       LayerButton,
                       {
                         name: layer,
@@ -14586,7 +14436,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -14595,13 +14445,13 @@ var ToolbarOverlay = ({ children, elements }) => {
                     ...errorCount > 0 ? { color: "red" } : {}
                   },
                   onClick: handleErrorsToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     errorCount,
                     " errors"
                   ] })
                 }
               ),
-              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx18(
+              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx20(
                 "div",
                 {
                   style: {
@@ -14621,14 +14471,14 @@ var ToolbarOverlay = ({ children, elements }) => {
                   },
                   children: errorElements.map((e, i) => {
                     const errorId = e.pcb_trace_error_id || `error_${i}_${e.error_type}_${e.message?.slice(0, 20)}`;
-                    return /* @__PURE__ */ jsxs15(
+                    return /* @__PURE__ */ jsxs14(
                       "div",
                       {
                         style: {
                           borderBottom: i < errorElements.length - 1 ? "1px solid #444" : "none"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs15(
+                          /* @__PURE__ */ jsxs14(
                             "div",
                             {
                               style: {
@@ -14679,7 +14529,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 }
                               },
                               children: [
-                                /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx20(
                                   "div",
                                   {
                                     style: {
@@ -14693,7 +14543,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.error_type
                                   }
                                 ),
-                                /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx20(
                                   "div",
                                   {
                                     style: {
@@ -14708,7 +14558,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.message
                                   }
                                 ),
-                                /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx20(
                                   "div",
                                   {
                                     ref: (el) => {
@@ -14728,7 +14578,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx18(
+                          /* @__PURE__ */ jsx20(
                             "div",
                             {
                               ref: (el) => {
@@ -14741,7 +14591,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 backgroundColor: "#1a1a1a",
                                 borderTop: "1px solid #444"
                               },
-                              children: /* @__PURE__ */ jsx18(
+                              children: /* @__PURE__ */ jsx20(
                                 "div",
                                 {
                                   style: {
@@ -14764,58 +14614,58 @@ var ToolbarOverlay = ({ children, elements }) => {
                   })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleEditTraceToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     editModes.in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleMoveComponentToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     editModes.in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx18("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx20("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
-                    /* @__PURE__ */ jsxs15(
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsxs14(
                       "div",
                       {
                         style: {
@@ -14825,7 +14675,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx18(
+                          /* @__PURE__ */ jsx20(
                             "span",
                             {
                               style: {
@@ -14840,8 +14690,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs15("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx18(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs14("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -14853,7 +14703,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -14865,7 +14715,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -14875,7 +14725,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -14887,7 +14737,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -14897,7 +14747,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -14909,7 +14759,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -14919,8 +14769,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs15("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx18(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs14("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx20(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -14930,7 +14780,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx20(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -14954,7 +14804,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
@@ -15042,14 +14892,14 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     MouseElementTracker,
     {
       elements: elementsToRender,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx21(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -15058,7 +14908,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx19(
+          children: /* @__PURE__ */ jsx21(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -15067,29 +14917,29 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx19(
+              children: /* @__PURE__ */ jsx21(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
-                  children: /* @__PURE__ */ jsx19(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx19(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx19(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx19(
+                  children: /* @__PURE__ */ jsx21(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx21(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx21(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx21(
                     PcbGroupOverlay,
                     {
                       transform,
                       elements,
                       hoveredComponentIds,
-                      children: /* @__PURE__ */ jsx19(
+                      children: /* @__PURE__ */ jsx21(
                         DebugGraphicsOverlay,
                         {
                           transform,
                           debugGraphics: props.debugGraphics,
-                          children: /* @__PURE__ */ jsx19(
+                          children: /* @__PURE__ */ jsx21(
                             WarningGraphicsOverlay,
                             {
                               transform,
                               elements,
-                              children: /* @__PURE__ */ jsx19(
+                              children: /* @__PURE__ */ jsx21(
                                 CanvasPrimitiveRenderer,
                                 {
                                   transform,
@@ -15158,7 +15008,7 @@ var calculateCircuitJsonKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultTransform = compose7(translate11(400, 300), scale5(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -15252,20 +15102,20 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx20("div", { ref, children: /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx22("div", { ref, children: /* @__PURE__ */ jsxs15(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -15290,11 +15140,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx20(ToastContainer, {})
+              /* @__PURE__ */ jsx22(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx20(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx22(
           "div",
           {
             onClick: () => {
@@ -15331,7 +15181,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx22(
               "div",
               {
                 style: {