@tscircuit/pcb-viewer 1.11.281 → 1.11.282

package/dist/index.js

@@ -12389,7 +12389,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 +12666,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 +12680,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 +12691,236 @@ 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 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 isShowingAnchorOffsets = useGlobalStore(
+    (state) => state.is_showing_group_anchor_offsets
+  );
+  if (!isShowingAnchorOffsets && hoveredComponentIds.length === 0) {
+    return null;
+  }
+  const targets = 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 } : null;
+  }).filter(
+    (target) => Boolean(target)
+  );
+  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(
+    ({ component }) => shouldShowAllTargets || hoveredComponentIds.includes(component.pcb_component_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(({ component, board }) => {
+              const anchorPosition = board.center;
+              const componentCenter = component.center;
+              const anchorKey = board.pcb_board_id;
+              if (!boardAnchorScreens.has(anchorKey)) {
+                const screenPoint = applyToPoint12(transform, anchorPosition);
+                boardAnchorScreens.set(anchorKey, screenPoint);
+              }
+              const anchorMarkerScreen = boardAnchorScreens.get(anchorKey);
+              const componentScreen = applyToPoint12(transform, componentCenter);
+              const offsetX = componentCenter.x - anchorPosition.x;
+              const offsetY = componentCenter.y - anchorPosition.y;
+              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 xLabelText = component.display_offset_x ?? `Board \u0394x: ${offsetX.toFixed(2)}mm`;
+              const yLabelText = component.display_offset_y ?? `Board \u0394y: ${offsetY.toFixed(2)}mm`;
+              return /* @__PURE__ */ jsxs9("g", { 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",
+                  {
+                    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__ */ jsx12(
+                  "foreignObject",
+                  {
+                    x: Math.min(anchorMarkerScreen.x, componentScreen.x),
+                    y: anchorMarkerScreen.y + xLabelOffset,
+                    width: Math.abs(componentScreen.x - anchorMarkerScreen.x),
+                    height: 20,
+                    style: { overflow: "visible" },
+                    children: /* @__PURE__ */ jsx12("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                  }
+                ),
+                shouldShowYLabel && /* @__PURE__ */ jsx12(
+                  "foreignObject",
+                  {
+                    x: componentScreen.x + yLabelOffset,
+                    y: Math.min(anchorMarkerScreen.y, componentScreen.y),
+                    width: 20,
+                    height: Math.abs(componentScreen.y - anchorMarkerScreen.y),
+                    style: { overflow: "visible" },
+                    children: /* @__PURE__ */ jsx12(
+                      "div",
+                      {
+                        style: {
+                          ...labelStyle,
+                          display: "flex",
+                          alignItems: "center",
+                          height: "100%"
+                        },
+                        children: yLabelText
+                      }
+                    )
+                  }
+                )
+              ] }, `${board.pcb_board_id}-${component.pcb_component_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}`)
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/AnchorOffsetOverlay/Group/index.tsx
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+
+// src/components/AnchorOffsetOverlay/Group/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/AnchorOffsetOverlay/Group/index.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -12716,52 +12928,44 @@ 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 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 targets = 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 } : 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 } : 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;
+  if (targets.length === 0) return null;
+  const shouldShowAllTargets = hoveredComponentIds.length === 0;
   const labelStyle = {
     color: COLORS.LABEL_TEXT,
     mixBlendMode: "difference",
@@ -12770,7 +12974,17 @@ var GroupAnchorOffsetOverlay = ({
     fontFamily: "monospace",
     fontWeight: "bold"
   };
-  return /* @__PURE__ */ jsxs9(
+  const targetEntries = targets.filter(
+    ({ component }) => shouldShowAllTargets || hoveredComponentIds.includes(component.pcb_component_id)
+  );
+  if (targetEntries.length === 0) return null;
+  const groupAnchorScreens = /* @__PURE__ */ new Map();
+  targetEntries.forEach(({ parentGroup }) => {
+    if (!parentGroup.anchor_position) return;
+    const anchorScreen = applyToPoint13(transform, parentGroup.anchor_position);
+    groupAnchorScreens.set(parentGroup.pcb_group_id, anchorScreen);
+  });
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -12783,102 +12997,158 @@ 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(({ component, parentGroup }) => {
+              const anchor = parentGroup.anchor_position;
+              const center = component.center;
+              if (!anchor || !center) return null;
+              const anchorMarkerPosition = { x: anchor.x, y: anchor.y };
+              const targetCenter = { x: center.x, y: center.y };
+              const groupComponents = components.filter(
+                (comp) => comp.pcb_group_id === parentGroup.pcb_group_id
+              );
+              const boundingBox = calculateGroupBoundingBox(groupComponents);
+              if (!boundingBox) return null;
+              const offsetX = targetCenter.x - anchorMarkerPosition.x;
+              const offsetY = targetCenter.y - anchorMarkerPosition.y;
+              const anchorMarkerScreen = applyToPoint13(
+                transform,
+                anchorMarkerPosition
+              );
+              const componentScreen = applyToPoint13(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 xLabelText = component.display_offset_x ?? `\u0394x: ${offsetX.toFixed(2)}mm`;
+              const yLabelText = component.display_offset_y ?? `\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: componentScreen.x,
+                        y2: anchorMarkerScreen.y,
+                        stroke: COLORS.OFFSET_LINE,
+                        strokeWidth: VISUAL_CONFIG.LINE_STROKE_WIDTH,
+                        strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
+                      }
+                    ),
+                    /* @__PURE__ */ jsx13(
+                      "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__ */ jsx13(
+                      "circle",
+                      {
+                        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__ */ jsx13(
+                      "foreignObject",
+                      {
+                        x: Math.min(anchorMarkerScreen.x, componentScreen.x),
+                        y: anchorMarkerScreen.y + xLabelOffset,
+                        width: Math.abs(componentScreen.x - anchorMarkerScreen.x),
+                        height: 20,
+                        style: { overflow: "visible" },
+                        children: /* @__PURE__ */ jsx13("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                      }
+                    ),
+                    shouldShowYLabel && /* @__PURE__ */ jsx13(
+                      "foreignObject",
+                      {
+                        x: componentScreen.x + yLabelOffset,
+                        y: Math.min(anchorMarkerScreen.y, componentScreen.y),
+                        width: 20,
+                        height: Math.abs(componentScreen.y - anchorMarkerScreen.y),
+                        style: { overflow: "visible" },
+                        children: /* @__PURE__ */ jsx13(
+                          "div",
+                          {
+                            style: {
+                              ...labelStyle,
+                              display: "flex",
+                              alignItems: "center",
+                              height: "100%"
+                            },
+                            children: yLabelText
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                `${parentGroup.pcb_group_id}-${component.pcb_component_id}`
+              );
+            }),
+            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;
@@ -13024,7 +13294,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 +13319,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 +13334,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -13088,7 +13358,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           ElementOverlayBox,
           {
             elements,
@@ -13096,26 +13366,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 +13413,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 +13485,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 +13538,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 +13585,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 +13612,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 +13643,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(
@@ -13407,9 +13708,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 +13724,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 +13752,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.280",
+  version: "1.11.281",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13504,7 +13805,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 +13858,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 +13876,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 +13897,7 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsx17(
   "div",
   {
     ...props,
@@ -13633,7 +13934,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: css3`
@@ -13660,15 +13961,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 +13996,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 +14150,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       style: { position: "relative", zIndex: "999 !important" },
@@ -13857,7 +14158,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -13878,7 +14179,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -13901,7 +14202,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsxs14(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13912,10 +14213,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs13("div", { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           style: {
@@ -13927,7 +14228,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 +14242,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13950,13 +14251,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 +14277,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 +14335,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 }
                               },
                               children: [
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     style: {
@@ -14048,7 +14349,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.error_type
                                   }
                                 ),
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     style: {
@@ -14063,7 +14364,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.message
                                   }
                                 ),
-                                /* @__PURE__ */ jsx16(
+                                /* @__PURE__ */ jsx17(
                                   "div",
                                   {
                                     ref: (el) => {
@@ -14083,7 +14384,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx16(
+                          /* @__PURE__ */ jsx17(
                             "div",
                             {
                               ref: (el) => {
@@ -14096,7 +14397,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 backgroundColor: "#1a1a1a",
                                 borderTop: "1px solid #444"
                               },
-                              children: /* @__PURE__ */ jsx16(
+                              children: /* @__PURE__ */ jsx17(
                                 "div",
                                 {
                                   style: {
@@ -14119,58 +14420,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 +14481,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx16(
+                          /* @__PURE__ */ jsx17(
                             "span",
                             {
                               style: {
@@ -14195,8 +14496,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 +14509,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -14220,7 +14521,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -14230,7 +14531,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -14242,7 +14543,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -14252,7 +14553,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -14264,7 +14565,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -14274,8 +14575,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 +14586,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx16(
+                        /* @__PURE__ */ jsx17(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -14309,7 +14610,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 +14634,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 +14685,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 +14714,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 +14723,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 +14814,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 +14908,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 +14946,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx18(ToastContainer, {})
+              /* @__PURE__ */ jsx19(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx18(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx19(
           "div",
           {
             onClick: () => {
@@ -14667,7 +14987,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx19(
               "div",
               {
                 style: {