@tscircuit/pcb-viewer 1.11.281 → 1.11.283

package/dist/index.js

@@ -10468,7 +10468,6 @@ var createBoxFromPoints = (points) => {
   }
   return { minX, maxX, minY, maxY };
 };
-var getBoundsFromPoints = createBoxFromPoints;
 var mergeBoundingBoxesInternal = (a, b) => ({
   minX: Math.min(a.minX, b.minX),
   maxX: Math.max(a.maxX, b.maxX),
@@ -10605,7 +10604,7 @@ function calculateDiagonalLabel(params) {
   } = params;
   const deltaX = dimensionEnd.x - dimensionStart.x;
   const deltaY = dimensionEnd.y - dimensionStart.y;
-  const distance5 = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+  const distance4 = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
   const screenDeltaX = screenDimensionEnd.x - screenDimensionStart.x;
   const screenDeltaY = screenDimensionEnd.y - screenDimensionStart.y;
   const screenDistance = Math.sqrt(
@@ -10647,11 +10646,11 @@ function calculateDiagonalLabel(params) {
   const x = midX + offsetX;
   const y = midY + offsetY;
   return {
-    distance: distance5,
+    distance: distance4,
     screenDistance,
     x,
     y,
-    show: distance5 > 0.01 && screenDistance > 30 && isDiagonal
+    show: distance4 > 0.01 && screenDistance > 30 && isDiagonal
   };
 }
 
@@ -10945,11 +10944,11 @@ var DimensionOverlay = ({
       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) {
+        const distance4 = Math.hypot(dx, dy);
+        if (distance4 > SNAP_THRESHOLD_PX) continue;
+        if (!bestMatch || distance4 < bestMatch.distance) {
           bestMatch = {
-            distance: distance5,
+            distance: distance4,
             id: snap.id,
             point: snap.point
           };
@@ -11548,10 +11547,10 @@ var isInsideOfSmtpad = (elm, point, padding = 0) => {
 };
 var isInsideOfPlatedHole = (hole, point, padding = 0) => {
   if (hole.shape === "circle") {
-    const distance5 = Math.sqrt(
+    const distance4 = Math.sqrt(
       (point.x - hole.x) ** 2 + (point.y - hole.y) ** 2
     );
-    return distance5 <= hole.outer_diameter / 2 + padding;
+    return distance4 <= hole.outer_diameter / 2 + padding;
   } else if (hole.shape === "circular_hole_with_rect_pad") {
     const dx = Math.abs(point.x - hole.x);
     const dy = Math.abs(point.y - hole.y);
@@ -12379,7 +12378,7 @@ var ErrorOverlay = ({
 
 // src/components/MouseElementTracker.tsx
 import { pointToSegmentDistance } from "@tscircuit/math-utils";
-import { distance as distance4 } from "circuit-json";
+import { distance as distance3 } from "circuit-json";
 
 // src/lib/util/if-sets-match-exactly.ts
 function ifSetsMatchExactly(set1, set2) {
@@ -12389,7 +12388,7 @@ function ifSetsMatchExactly(set1, set2) {
 
 // src/components/MouseElementTracker.tsx
 import { useState as useState7, useMemo as useMemo5 } from "react";
-import { applyToPoint as applyToPoint13, 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";
@@ -12666,28 +12665,10 @@ var ElementOverlayBox = ({
   )) });
 };
 
-// src/components/GroupAnchorOffsetOverlay/index.tsx
+// src/components/AnchorOffsetOverlay/Board/index.tsx
 import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 
-// src/components/GroupAnchorOffsetOverlay/calculateGroupBoundingBox.ts
-import { distance as distance3 } from "circuit-json";
-var calculateGroupBoundingBox = (groupComponents) => {
-  const points = [];
-  for (const comp of groupComponents) {
-    if (!comp.center) {
-      continue;
-    }
-    const width = typeof comp.width === "number" ? comp.width : distance3.parse(comp.width);
-    const height = typeof comp.height === "number" ? comp.height : distance3.parse(comp.height);
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    points.push({ x: comp.center.x - halfWidth, y: comp.center.y - halfHeight });
-    points.push({ x: comp.center.x + halfWidth, y: comp.center.y + halfHeight });
-  }
-  return getBoundsFromPoints(points);
-};
-
-// src/components/GroupAnchorOffsetOverlay/constants.ts
+// src/components/AnchorOffsetOverlay/common/constants.ts
 var VISUAL_CONFIG = {
   GROUP_PADDING: 1,
   MIN_LINE_LENGTH_FOR_LABEL: 40,
@@ -12698,7 +12679,9 @@ var VISUAL_CONFIG = {
   LINE_STROKE_WIDTH: 1.5,
   LINE_DASH_PATTERN: "4,4",
   COMPONENT_MARKER_RADIUS: 3,
-  LABEL_FONT_SIZE: 11
+  LABEL_FONT_SIZE: 11,
+  ANCHOR_MARKER_SIZE: 6,
+  ANCHOR_MARKER_STROKE_WIDTH: 1.5
 };
 var COLORS = {
   OFFSET_LINE: "white",
@@ -12707,8 +12690,255 @@ var COLORS = {
   LABEL_TEXT: "white"
 };
 
-// src/components/GroupAnchorOffsetOverlay/index.tsx
+// src/components/AnchorOffsetOverlay/common/guards.ts
+var isPcbComponent = (element) => element?.type === "pcb_component";
+var isPcbGroup = (element) => element?.type === "pcb_group";
+var isPcbBoard = (element) => element?.type === "pcb_board";
+
+// src/components/AnchorOffsetOverlay/Board/index.tsx
 import { jsx as jsx12, jsxs as jsxs9 } 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 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);
+    } else {
+      return shouldShowAllTargets || hoveredGroupIds.has(target.group.pcb_group_id);
+    }
+  });
+  if (targetEntries.length === 0) return null;
+  const boardAnchorScreens = /* @__PURE__ */ new Map();
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: containerWidth,
+        height: containerHeight,
+        overflow: "hidden",
+        pointerEvents: "none",
+        zIndex: zIndexMap.dimensionOverlay
+      },
+      children: /* @__PURE__ */ jsxs9(
+        "svg",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            pointerEvents: "none"
+          },
+          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.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;
+              }
+              if (!boardAnchorScreens.has(anchorKey)) {
+                const screenPoint = applyToPoint12(transform, anchorPosition);
+                boardAnchorScreens.set(anchorKey, screenPoint);
+              }
+              const anchorMarkerScreen = boardAnchorScreens.get(anchorKey);
+              const targetScreen = applyToPoint12(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 ?? `Board \u0394x: ${offsetX.toFixed(2)}mm`;
+              const yLabelText = displayOffsetY ?? `Board \u0394y: ${offsetY.toFixed(2)}mm`;
+              return /* @__PURE__ */ jsxs9("g", { children: [
+                /* @__PURE__ */ jsx12(
+                  "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__ */ jsx12(
+                  "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__ */ jsx12(
+                  "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__ */ jsx12(
+                  "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__ */ jsx12("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                  }
+                ),
+                shouldShowYLabel && /* @__PURE__ */ jsx12(
+                  "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__ */ jsx12(
+                      "div",
+                      {
+                        style: {
+                          ...labelStyle,
+                          display: "flex",
+                          alignItems: "center",
+                          height: "100%"
+                        },
+                        children: yLabelText
+                      }
+                    )
+                  }
+                )
+              ] }, `${target.board.pcb_board_id}-${targetId}-${target.type}`);
+            }),
+            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}`)
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/AnchorOffsetOverlay/Group/index.tsx
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -12716,52 +12946,68 @@ var GroupAnchorOffsetOverlay = ({
   containerWidth,
   containerHeight
 }) => {
-  const is_showing_group_anchor_offsets = useGlobalStore(
+  const groups = elements.filter((el) => isPcbGroup(el));
+  const components = elements.filter(
+    (el) => isPcbComponent(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);
+    }
+    if (component?.position_mode === "relative_to_group_anchor" && component.positioned_relative_to_pcb_group_id) {
+      hoveredGroupIds.add(component.positioned_relative_to_pcb_group_id);
+    }
+  });
+  const isShowingAnchorOffsets = useGlobalStore(
     (s) => s.is_showing_group_anchor_offsets
   );
-  if (!is_showing_group_anchor_offsets || highlightedPrimitives.length === 0) {
+  if (!isShowingAnchorOffsets && hoveredComponentIds.length === 0) {
     return null;
   }
-  const hoveredPrimitive = highlightedPrimitives.find(
-    (p) => p._parent_pcb_component?.type === "pcb_component" || p._element?.type === "pcb_component"
+  const componentTargets = components.map((component) => {
+    if (component.position_mode === "relative_to_group_anchor" && component.positioned_relative_to_pcb_group_id) {
+      const parentGroup = groups.find(
+        (group) => group.pcb_group_id === component.positioned_relative_to_pcb_group_id
+      );
+      return parentGroup && parentGroup.anchor_position ? { component, parentGroup, type: "component" } : null;
+    }
+    if (component.pcb_group_id) {
+      const parentGroup = groups.find(
+        (group) => group.pcb_group_id === component.pcb_group_id
+      );
+      return parentGroup && parentGroup.anchor_position ? { component, parentGroup, type: "component" } : null;
+    }
+    return null;
+  }).filter(
+    (target) => Boolean(target)
   );
-  if (!hoveredPrimitive) return null;
-  const hoveredElement = hoveredPrimitive._parent_pcb_component || hoveredPrimitive._element;
-  if (!hoveredElement) return null;
-  let parentGroup;
-  let targetCenter;
-  if (hoveredElement.type === "pcb_component" && hoveredElement.position_mode === "relative_to_group_anchor") {
-    parentGroup = elements.filter((el) => el.type === "pcb_group").find(
-      (group) => group.pcb_group_id === hoveredElement.positioned_relative_to_pcb_group_id
-    );
-    targetCenter = hoveredElement.center;
-  } else if ("pcb_group_id" in hoveredElement) {
-    parentGroup = elements.filter((el) => el.type === "pcb_group").find((group) => group.pcb_group_id === hoveredElement.pcb_group_id);
-    targetCenter = hoveredElement.center;
-  }
-  if (!parentGroup?.anchor_position || !targetCenter) return null;
-  const groupComponents = elements.filter((el) => el.type === "pcb_component").filter((comp) => comp.pcb_group_id === parentGroup.pcb_group_id);
-  const boundingBox = calculateGroupBoundingBox(groupComponents);
-  if (!boundingBox) return null;
-  const groupBounds = {
-    minX: boundingBox.minX - VISUAL_CONFIG.GROUP_PADDING,
-    maxX: boundingBox.maxX + VISUAL_CONFIG.GROUP_PADDING,
-    minY: boundingBox.minY - VISUAL_CONFIG.GROUP_PADDING,
-    maxY: boundingBox.maxY + VISUAL_CONFIG.GROUP_PADDING
-  };
-  const anchorMarkerPosition = parentGroup.anchor_position;
-  const offsetX = targetCenter.x - anchorMarkerPosition.x;
-  const offsetY = targetCenter.y - anchorMarkerPosition.y;
-  const anchorMarkerScreen = applyToPoint12(transform, anchorMarkerPosition);
-  const componentScreen = applyToPoint12(transform, targetCenter);
-  const xLineLength = Math.abs(componentScreen.x - anchorMarkerScreen.x);
-  const yLineLength = Math.abs(componentScreen.y - anchorMarkerScreen.y);
-  const isComponentAboveAnchor = componentScreen.y < anchorMarkerScreen.y;
-  const isComponentRightOfAnchor = componentScreen.x > anchorMarkerScreen.x;
-  const xLabelOffset = isComponentAboveAnchor ? VISUAL_CONFIG.LABEL_OFFSET_ABOVE : VISUAL_CONFIG.LABEL_OFFSET_BELOW;
-  const yLabelOffset = isComponentRightOfAnchor ? 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 groupTargets = groups.map((group) => {
+    if (group.position_mode === "relative_to_group_anchor" && group.positioned_relative_to_pcb_group_id) {
+      const parentGroup = groups.find(
+        (g) => g.pcb_group_id === group.positioned_relative_to_pcb_group_id
+      );
+      if (parentGroup && parentGroup.anchor_position && group.center) {
+        return { group, parentGroup, type: "group" };
+      }
+    }
+    return 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",
@@ -12770,7 +13016,24 @@ var GroupAnchorOffsetOverlay = ({
     fontFamily: "monospace",
     fontWeight: "bold"
   };
-  return /* @__PURE__ */ jsxs9(
+  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) || hoveredGroupIds.has(target.parentGroup.pcb_group_id);
+    }
+  });
+  if (targetEntries.length === 0) return null;
+  const groupAnchorScreens = /* @__PURE__ */ new Map();
+  targetEntries.forEach((target) => {
+    if (!target.parentGroup.anchor_position) return;
+    const anchorScreen = applyToPoint13(
+      transform,
+      target.parentGroup.anchor_position
+    );
+    groupAnchorScreens.set(target.parentGroup.pcb_group_id, anchorScreen);
+  });
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -12783,102 +13046,172 @@ var GroupAnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: [
-        /* @__PURE__ */ jsxs9(
-          "svg",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              pointerEvents: "none"
-            },
-            width: containerWidth,
-            height: containerHeight,
-            children: [
-              /* @__PURE__ */ jsx12(
-                "line",
-                {
-                  x1: anchorMarkerScreen.x,
-                  y1: anchorMarkerScreen.y,
-                  x2: componentScreen.x,
-                  y2: anchorMarkerScreen.y,
-                  stroke: COLORS.OFFSET_LINE,
-                  strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                  strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "line",
-                {
-                  x1: componentScreen.x,
-                  y1: anchorMarkerScreen.y,
-                  x2: componentScreen.x,
-                  y2: componentScreen.y,
-                  stroke: COLORS.OFFSET_LINE,
-                  strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
-                  strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "circle",
+      children: /* @__PURE__ */ jsxs10(
+        "svg",
+        {
+          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 ?? `\u0394x: ${offsetX.toFixed(2)}mm`;
+              const yLabelText = displayOffsetY ?? `\u0394y: ${offsetY.toFixed(2)}mm`;
+              return /* @__PURE__ */ jsxs10(
+                "g",
                 {
-                  cx: componentScreen.x,
-                  cy: componentScreen.y,
-                  r: VISUAL_CONFIG.COMPONENT_MARKER_RADIUS,
-                  fill: COLORS.COMPONENT_MARKER_FILL,
-                  stroke: COLORS.COMPONENT_MARKER_STROKE,
-                  strokeWidth: 1
-                }
-              )
-            ]
-          }
-        ),
-        shouldShowXLabel && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            style: {
-              ...labelStyle,
-              position: "absolute",
-              left: Math.min(anchorMarkerScreen.x, componentScreen.x),
-              top: anchorMarkerScreen.y + xLabelOffset,
-              width: Math.abs(componentScreen.x - anchorMarkerScreen.x),
-              textAlign: "center"
-            },
-            children: [
-              "\u0394x: ",
-              offsetX.toFixed(2),
-              "mm"
-            ]
-          }
-        ),
-        shouldShowYLabel && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            style: {
-              ...labelStyle,
-              position: "absolute",
-              left: componentScreen.x + yLabelOffset,
-              top: Math.min(anchorMarkerScreen.y, componentScreen.y),
-              height: Math.abs(componentScreen.y - anchorMarkerScreen.y),
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center"
-            },
-            children: [
-              "\u0394y: ",
-              offsetY.toFixed(2),
-              "mm"
-            ]
-          }
-        )
-      ]
+                  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
+                      }
+                    ),
+                    /* @__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
+                      }
+                    ),
+                    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}`)
+            )
+          ]
+        }
+      )
     }
   );
 };
 
 // src/components/MouseElementTracker.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -12920,22 +13253,22 @@ var getPrimitivesUnderPoint = (primitives, rwPoint, transform) => {
   for (const primitive of primitives) {
     if (!primitive._element) continue;
     if ("x1" in primitive && primitive._element?.type === "pcb_trace") {
-      const distance5 = pointToSegmentDistance(
+      const distance4 = pointToSegmentDistance(
         { x: rwPoint.x, y: rwPoint.y },
         { x: primitive.x1, y: primitive.y1 },
         { x: primitive.x2, y: primitive.y2 }
       );
       const lineWidth = primitive.width || 0.5;
       const detectionThreshold = Math.max(lineWidth * 25, 2) / transform.a;
-      if (distance5 < detectionThreshold) {
+      if (distance4 < detectionThreshold) {
         newMousedPrimitives.push(primitive);
       }
       continue;
     }
     if (primitive.pcb_drawing_type === "polygon") {
       const points = primitive.points.map((point) => ({
-        x: distance4.parse(point.x),
-        y: distance4.parse(point.y)
+        x: distance3.parse(point.x),
+        y: distance3.parse(point.y)
       }));
       const boundingBox = getPolygonBoundingBox(points);
       if (!boundingBox) continue;
@@ -12949,8 +13282,8 @@ var getPrimitivesUnderPoint = (primitives, rwPoint, transform) => {
     }
     if (primitive.pcb_drawing_type === "polygon_with_arcs") {
       const points = primitive.brep_shape.outer_ring.vertices.map((v) => ({
-        x: distance4.parse(v.x),
-        y: distance4.parse(v.y)
+        x: distance3.parse(v.x),
+        y: distance3.parse(v.y)
       }));
       const boundingBox = getPolygonBoundingBox(points);
       if (!boundingBox) continue;
@@ -13024,7 +13357,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 = applyToPoint13(transform, basePoint);
+      const screenPos = applyToPoint14(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -13049,7 +13382,7 @@ var MouseElementTracker = ({
   }, [mousedPrimitives, transform]);
   const handleInteraction = (x, y, transform2, primitives2) => {
     setMousePos({ x, y });
-    const rwPoint = applyToPoint13(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint14(inverse5(transform2), { x, y });
     const newMousedPrimitives = getPrimitivesUnderPoint(
       primitives2,
       rwPoint,
@@ -13064,7 +13397,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -13088,7 +13421,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           ElementOverlayBox,
           {
             elements,
@@ -13096,26 +13429,38 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsx13(
-          GroupAnchorOffsetOverlay,
-          {
-            elements,
-            highlightedPrimitives,
-            transform,
-            containerWidth: width,
-            containerHeight: height
-          }
-        )
+        transform && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx14(
+            BoardAnchorOffsetOverlay,
+            {
+              elements,
+              highlightedPrimitives,
+              transform,
+              containerWidth: width,
+              containerHeight: height
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            GroupAnchorOffsetOverlay,
+            {
+              elements,
+              highlightedPrimitives,
+              transform,
+              containerWidth: width,
+              containerHeight: height
+            }
+          )
+        ] })
       ]
     }
   );
 };
 
 // src/components/PcbGroupOverlay.tsx
-import { applyToPoint as applyToPoint14 } 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 jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -13131,16 +13476,20 @@ var GROUP_COLORS = [
 var PcbGroupOverlay = ({
   children,
   transform = identity8(),
-  elements = []
+  elements = [],
+  hoveredComponentIds = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
   const canvasRef = useRef9(null);
-  const { is_showing_pcb_groups, pcb_group_view_mode } = useGlobalStore(
-    (s) => ({
-      is_showing_pcb_groups: s.is_showing_pcb_groups,
-      pcb_group_view_mode: s.pcb_group_view_mode
-    })
-  );
+  const {
+    is_showing_pcb_groups,
+    pcb_group_view_mode,
+    is_showing_group_anchor_offsets
+  } = useGlobalStore((s) => ({
+    is_showing_pcb_groups: s.is_showing_pcb_groups,
+    pcb_group_view_mode: s.pcb_group_view_mode,
+    is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets
+  }));
   useEffect12(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
@@ -13199,6 +13548,14 @@ var PcbGroupOverlay = ({
       }
       return 1 + getGroupDepthLevel(groupWithParent.parent_source_group_id);
     };
+    const hoveredGroupIds = /* @__PURE__ */ new Set();
+    if (hoveredComponentIds.length > 0) {
+      for (const comp of pcbComponents) {
+        if (!hoveredComponentIds.includes(comp.pcb_component_id)) continue;
+        const targetGroupId = comp.positioned_relative_to_pcb_group_id ?? comp.pcb_group_id;
+        if (targetGroupId) hoveredGroupIds.add(targetGroupId);
+      }
+    }
     visiblePcbGroups.forEach((group, groupIndex) => {
       let groupComponents = pcbComponents.filter(
         (comp) => comp.pcb_group_id === group.pcb_group_id
@@ -13244,10 +13601,10 @@ var PcbGroupOverlay = ({
       maxX += totalPadding;
       minY -= totalPadding;
       maxY += totalPadding;
-      const topLeft = applyToPoint14(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint14(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint14(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint14(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;
@@ -13291,8 +13648,13 @@ var PcbGroupOverlay = ({
       ctx.textAlign = "left";
       ctx.textBaseline = "middle";
       ctx.fillText(labelText, labelX + labelPadding, labelY - labelHeight / 2);
-      if (group.anchor_position) {
-        const anchorScreenPos = applyToPoint14(transform, group.anchor_position);
+      const shouldShowAnchorMarker = is_showing_group_anchor_offsets && hoveredGroupIds.has(group.pcb_group_id) && Boolean(group.anchor_position);
+      if (shouldShowAnchorMarker && group.anchor_position) {
+        const anchorPositionValue = Array.isArray(group.anchor_position) ? {
+          x: group.anchor_position[0] ?? 0,
+          y: group.anchor_position[1] ?? 0
+        } : { x: group.anchor_position.x, y: group.anchor_position.y };
+        const anchorScreenPos = applyToPoint15(transform, anchorPositionValue);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -13313,16 +13675,18 @@ var PcbGroupOverlay = ({
     width,
     height,
     is_showing_pcb_groups,
-    pcb_group_view_mode
+    pcb_group_view_mode,
+    is_showing_group_anchor_offsets,
+    hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "canvas",
           {
             ref: canvasRef,
@@ -13342,9 +13706,9 @@ var PcbGroupOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint15, 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 jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, 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(
@@ -13367,11 +13731,11 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
       connectedIds.forEach((id) => {
         const pos = getElementPosition(id);
         if (pos) {
-          const distance5 = Math.sqrt(
+          const distance4 = Math.sqrt(
             (sourcePoint.x - pos.x) ** 2 + (sourcePoint.y - pos.y) ** 2
           );
-          if (distance5 < minDistance && distance5 > 0) {
-            minDistance = distance5;
+          if (distance4 < minDistance && distance4 > 0) {
+            minDistance = distance4;
             nearestPoint = pos;
           }
         }
@@ -13407,9 +13771,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity9();
-  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "svg",
       {
         style: {
@@ -13423,9 +13787,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint15(transform, startPoint);
-          const transformedEnd = applyToPoint15(transform, endPoint);
-          return /* @__PURE__ */ jsx15(
+          const transformedStart = applyToPoint16(transform, startPoint);
+          const transformedEnd = applyToPoint16(transform, endPoint);
+          return /* @__PURE__ */ jsx16(
             "line",
             {
               x1: transformedStart.x,
@@ -13451,7 +13815,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.280",
+  version: "1.11.282",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13504,7 +13868,7 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.8",
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.321",
+    "circuit-json": "^0.0.333",
     "circuit-to-svg": "^0.0.271",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -13557,9 +13921,9 @@ var useIsSmallScreen = () => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -13575,8 +13939,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       `,
       onClick,
       children: [
-        /* @__PURE__ */ jsx16("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx17(
           "span",
           {
             style: {
@@ -13596,7 +13960,7 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsx17(
   "div",
   {
     ...props,
@@ -13633,7 +13997,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -13660,15 +14024,15 @@ var CheckboxMenuItem = ({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx16("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx17("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx16("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx17("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -13695,9 +14059,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx16("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx17("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx16("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx17("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -13849,7 +14213,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       style: { position: "relative", zIndex: "999 !important" },
@@ -13857,7 +14221,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -13878,7 +14242,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -13901,7 +14265,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsxs14(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13912,10 +14276,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs13("div", { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           style: {
@@ -13927,7 +14291,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx16("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx16(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx17("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx17(
                       LayerButton,
                       {
                         name: layer,
@@ -13941,7 +14305,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13950,13 +14314,13 @@ var ToolbarOverlay = ({ children, elements }) => {
                     ...errorCount > 0 ? { color: "red" } : {}
                   },
                   onClick: handleErrorsToggle,
-                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     errorCount,
                     " errors"
                   ] })
                 }
               ),
-              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx16(
+              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx17(
                 "div",
                 {
                   style: {
@@ -13976,14 +14340,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__ */ jsxs13(
+                    return /* @__PURE__ */ jsxs14(
                       "div",
                       {
                         style: {
                           borderBottom: i < errorElements.length - 1 ? "1px solid #444" : "none"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs13(
+                          /* @__PURE__ */ jsxs14(
                             "div",
                             {
                               style: {
@@ -14034,7 +14398,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 }
                               },
                               children: [
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     style: {
@@ -14048,7 +14412,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.error_type
                                   }
                                 ),
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     style: {
@@ -14063,7 +14427,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.message
                                   }
                                 ),
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     ref: (el) => {
@@ -14083,7 +14447,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx16(
+                          /* @__PURE__ */ jsx17(
                             "div",
                             {
                               ref: (el) => {
@@ -14096,7 +14460,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 backgroundColor: "#1a1a1a",
                                 borderTop: "1px solid #444"
                               },
-                              children: /* @__PURE__ */ jsx16(
+                              children: /* @__PURE__ */ jsx17(
                                 "div",
                                 {
                                   style: {
@@ -14119,58 +14483,58 @@ var ToolbarOverlay = ({ children, elements }) => {
                   })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleEditTraceToggle,
-                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     editModes.in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleMoveComponentToggle,
-                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     editModes.in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx16("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx17("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs13("div", { children: [
-                    /* @__PURE__ */ jsxs13(
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsxs14(
                       "div",
                       {
                         style: {
@@ -14180,7 +14544,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx16(
+                          /* @__PURE__ */ jsx17(
                             "span",
                             {
                               style: {
@@ -14195,8 +14559,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs13("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx16(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs14("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -14208,7 +14572,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -14220,7 +14584,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -14230,7 +14594,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -14242,7 +14606,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -14252,7 +14616,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -14264,7 +14628,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -14274,8 +14638,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs13("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx16(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs14("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx17(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -14285,7 +14649,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx16(
+                        /* @__PURE__ */ jsx17(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -14309,7 +14673,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
@@ -14333,6 +14697,7 @@ var CanvasElementsRenderer = (props) => {
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
+  const [hoveredComponentIds, setHoveredComponentIds] = useState10([]);
   const errorRelatedIds = useMemo7(() => {
     if (!hoveredErrorId) return [];
     const errorElements = elements.filter(
@@ -14383,17 +14748,27 @@ var CanvasElementsRenderer = (props) => {
         drawingObjectIdsWithMouseOver,
         primitiveIdsInMousedOverNet
       });
+      const componentIds = primitivesHoveredOver.map((primitive) => {
+        if (primitive._parent_pcb_component?.type === "pcb_component" && primitive._parent_pcb_component.pcb_component_id) {
+          return primitive._parent_pcb_component.pcb_component_id;
+        }
+        if (primitive._element?.type === "pcb_component" && primitive._element.pcb_component_id) {
+          return primitive._element.pcb_component_id;
+        }
+        return null;
+      }).filter((id) => Boolean(id));
+      setHoveredComponentIds(Array.from(new Set(componentIds)));
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     MouseElementTracker,
     {
       elements: elementsToRender,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -14402,7 +14777,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx18(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -14411,36 +14786,44 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx17(
+              children: /* @__PURE__ */ jsx18(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
-                  children: /* @__PURE__ */ jsx17(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx17(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx17(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx17(PcbGroupOverlay, { transform, elements, children: /* @__PURE__ */ jsx17(
-                    DebugGraphicsOverlay,
+                  children: /* @__PURE__ */ jsx18(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx18(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx18(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx18(
+                    PcbGroupOverlay,
                     {
                       transform,
-                      debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx17(
-                        WarningGraphicsOverlay,
+                      elements,
+                      hoveredComponentIds,
+                      children: /* @__PURE__ */ jsx18(
+                        DebugGraphicsOverlay,
                         {
                           transform,
-                          elements,
-                          children: /* @__PURE__ */ jsx17(
-                            CanvasPrimitiveRenderer,
+                          debugGraphics: props.debugGraphics,
+                          children: /* @__PURE__ */ jsx18(
+                            WarningGraphicsOverlay,
                             {
                               transform,
-                              primitives,
-                              width: props.width,
-                              height: props.height,
-                              grid: props.grid
+                              elements,
+                              children: /* @__PURE__ */ jsx18(
+                                CanvasPrimitiveRenderer,
+                                {
+                                  transform,
+                                  primitives,
+                                  width: props.width,
+                                  height: props.height,
+                                  grid: props.grid
+                                }
+                              )
                             }
                           )
                         }
                       )
                     }
-                  ) }) }) }) })
+                  ) }) }) })
                 }
               )
             }
@@ -14494,7 +14877,7 @@ var calculateCircuitJsonKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultTransform = compose7(translate11(400, 300), scale5(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -14588,20 +14971,20 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx18("div", { ref, children: /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsx19("div", { ref, children: /* @__PURE__ */ jsxs15(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -14626,11 +15009,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx18(ToastContainer, {})
+              /* @__PURE__ */ jsx19(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx18(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx19(
           "div",
           {
             onClick: () => {
@@ -14667,7 +15050,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx19(
               "div",
               {
                 style: {