@tscircuit/pcb-viewer 1.11.266 → 1.11.268

package/dist/index.js

@@ -6277,7 +6277,8 @@ import { useCallback } from "react";
 var STORAGE_KEYS = {
   IS_SHOWING_PCB_GROUPS: "pcb_viewer_is_showing_pcb_groups",
   PCB_GROUP_VIEW_MODE: "pcb_viewer_group_view_mode",
-  IS_SHOWING_COPPER_POURS: "pcb_viewer_is_showing_copper_pours"
+  IS_SHOWING_COPPER_POURS: "pcb_viewer_is_showing_copper_pours",
+  IS_SHOWING_GROUP_ANCHOR_OFFSETS: "pcb_viewer_is_showing_group_anchor_offsets"
 };
 var getStoredBoolean = (key, defaultValue) => {
   if (typeof window === "undefined") return defaultValue;
@@ -6333,6 +6334,10 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       true
     ),
     is_showing_pcb_groups: disablePcbGroups ? false : getStoredBoolean(STORAGE_KEYS.IS_SHOWING_PCB_GROUPS, true),
+    is_showing_group_anchor_offsets: getStoredBoolean(
+      STORAGE_KEYS.IS_SHOWING_GROUP_ANCHOR_OFFSETS,
+      true
+    ),
     pcb_group_view_mode: disablePcbGroups ? "all" : getStoredString(
       STORAGE_KEYS.PCB_GROUP_VIEW_MODE,
       DEFAULT_PCB_GROUP_VIEW_MODE
@@ -6363,6 +6368,13 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       setStoredBoolean(STORAGE_KEYS.IS_SHOWING_PCB_GROUPS, is_showing);
       set({ is_showing_pcb_groups: is_showing });
     },
+    setIsShowingGroupAnchorOffsets: (is_showing) => {
+      setStoredBoolean(
+        STORAGE_KEYS.IS_SHOWING_GROUP_ANCHOR_OFFSETS,
+        is_showing
+      );
+      set({ is_showing_group_anchor_offsets: is_showing });
+    },
     setPcbGroupViewMode: (mode) => {
       if (disablePcbGroups) return;
       setStoredString(STORAGE_KEYS.PCB_GROUP_VIEW_MODE, mode);
@@ -6766,6 +6778,7 @@ var useMouseMatrixTransform = (props = {}) => {
 var src_default = useMouseMatrixTransform;
 
 // node_modules/circuit-json-to-connectivity-map/dist/index.js
+import { doesLineIntersectLine } from "@tscircuit/math-utils";
 function findConnectedNetworks(connections) {
   const networks = /* @__PURE__ */ new Map();
   let netCounter = 0;
@@ -7052,12 +7065,12 @@ function getExpandedStroke(strokeInput, defaultWidth) {
 }
 
 // src/lib/convert-element-to-primitive.ts
-import { distance as distance2 } from "circuit-json";
+import { distance } from "circuit-json";
 var globalPcbDrawingObjectCount = 0;
 var getNewPcbDrawingObjectId = (prefix) => `${prefix}_${globalPcbDrawingObjectCount++}`;
 var normalizePolygonPoints = (points) => (points ?? []).map((point) => ({
-  x: distance2.parse(point.x),
-  y: distance2.parse(point.y)
+  x: distance.parse(point.x),
+  y: distance.parse(point.y)
 }));
 var convertElementToPrimitives = (element, allElements) => {
   const _parent_pcb_component = "pcb_component_id" in element ? allElements.find(
@@ -7584,10 +7597,10 @@ var convertElementToPrimitives = (element, allElements) => {
           hole_height,
           layers
         } = element;
-        const hole_offset_x = distance2.parse(
+        const hole_offset_x = distance.parse(
           element.hole_offset_x ?? 0
         );
-        const hole_offset_y = distance2.parse(
+        const hole_offset_y = distance.parse(
           element.hole_offset_y ?? 0
         );
         const pcb_outline = pad_outline;
@@ -8168,7 +8181,12 @@ var convertElementToPrimitives = (element, allElements) => {
           layer: element.layer === "bottom" ? "bottom_fabrication" : "top_fabrication",
           size: element.font_size,
           align: element.anchor_alignment ?? "center",
-          text: element.text
+          text: element.text,
+          color: element.color,
+          _element: element,
+          _parent_pcb_component,
+          _parent_source_component,
+          _source_port
         }
       ];
     }
@@ -9250,7 +9268,8 @@ var convertTextToLines = (text) => {
         y2: text.y + y_baseline_offset + centerline_span_y * norm_y2,
         width: strokeWidth,
         layer: text.layer,
-        unit: text.unit
+        unit: text.unit,
+        color: text.color
       });
     }
     current_x_origin_for_char_box += target_width_char + space_between_chars;
@@ -9493,7 +9512,7 @@ var orderedLayers = [
 var CanvasPrimitiveRenderer = ({
   primitives,
   transform,
-  grid: grid3,
+  grid,
   width = 500,
   height = 500
 }) => {
@@ -10041,6 +10060,7 @@ 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),
@@ -10177,7 +10197,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 distance3 = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
   const screenDeltaX = screenDimensionEnd.x - screenDimensionStart.x;
   const screenDeltaY = screenDimensionEnd.y - screenDimensionStart.y;
   const screenDistance = Math.sqrt(
@@ -10219,11 +10239,11 @@ function calculateDiagonalLabel(params) {
   const x = midX + offsetX;
   const y = midY + offsetY;
   return {
-    distance: distance5,
+    distance: distance3,
     screenDistance,
     x,
     y,
-    show: distance5 > 0.01 && screenDistance > 30 && isDiagonal
+    show: distance3 > 0.01 && screenDistance > 30 && isDiagonal
   };
 }
 
@@ -10517,11 +10537,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 distance3 = Math.hypot(dx, dy);
+        if (distance3 > SNAP_THRESHOLD_PX) continue;
+        if (!bestMatch || distance3 < bestMatch.distance) {
           bestMatch = {
-            distance: distance5,
+            distance: distance3,
             id: snap.id,
             point: snap.point
           };
@@ -11120,10 +11140,10 @@ var isInsideOfSmtpad = (elm, point, padding = 0) => {
 };
 var isInsideOfPlatedHole = (hole, point, padding = 0) => {
   if (hole.shape === "circle") {
-    const distance5 = Math.sqrt(
+    const distance3 = Math.sqrt(
       (point.x - hole.x) ** 2 + (point.y - hole.y) ** 2
     );
-    return distance5 <= hole.outer_diameter / 2 + padding;
+    return distance3 <= 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);
@@ -11949,9 +11969,19 @@ var ErrorOverlay = ({
   ] });
 };
 
+// src/components/MouseElementTracker.tsx
+import { pointToSegmentDistance } from "@tscircuit/math-utils";
+import { distance as distance2 } from "circuit-json";
+
+// src/lib/util/if-sets-match-exactly.ts
+function ifSetsMatchExactly(set1, set2) {
+  if (set1.size !== set2.size) return false;
+  return Array.from(set1).every((item) => set2.has(item));
+}
+
 // src/components/MouseElementTracker.tsx
 import { useState as useState7, useMemo as useMemo5 } from "react";
-import { applyToPoint as applyToPoint12, inverse as inverse5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
 import { useEffect as useEffect11, useState as useState6 } from "react";
@@ -12228,35 +12258,228 @@ var ElementOverlayBox = ({
   )) });
 };
 
-// src/components/MouseElementTracker.tsx
-import { distance as distance4 } from "circuit-json";
+// src/components/GroupAnchorOffsetOverlay/index.tsx
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 
-// src/lib/util/if-sets-match-exactly.ts
-function ifSetsMatchExactly(set1, set2) {
-  if (set1.size !== set2.size) return false;
-  return Array.from(set1).every((item) => set2.has(item));
-}
+// src/components/GroupAnchorOffsetOverlay/calculateGroupBoundingBox.ts
+var calculateGroupBoundingBox = (groupComponents) => {
+  const points = [];
+  for (const comp of groupComponents) {
+    if (!comp.center || typeof comp.width !== "number" || typeof comp.height !== "number") {
+      continue;
+    }
+    const halfWidth = comp.width / 2;
+    const halfHeight = comp.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);
+};
 
-// node_modules/@tscircuit/math-utils/dist/chunk-EFLPMB4J.js
-function pointToSegmentDistance2(p, v, w) {
-  const l2 = (w.x - v.x) ** 2 + (w.y - v.y) ** 2;
-  if (l2 === 0) return distance3(p, v);
-  let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
-  t = Math.max(0, Math.min(1, t));
-  const projection = {
-    x: v.x + t * (w.x - v.x),
-    y: v.y + t * (w.y - v.y)
+// src/components/GroupAnchorOffsetOverlay/constants.ts
+var VISUAL_CONFIG = {
+  GROUP_PADDING: 1,
+  MIN_LINE_LENGTH_FOR_LABEL: 40,
+  LABEL_OFFSET_ABOVE: 2,
+  LABEL_OFFSET_BELOW: -18,
+  LABEL_OFFSET_RIGHT: 8,
+  LABEL_OFFSET_LEFT: -80,
+  LINE_STROKE_WIDTH: 1.5,
+  LINE_DASH_PATTERN: "4,4",
+  COMPONENT_MARKER_RADIUS: 3,
+  LABEL_FONT_SIZE: 11
+};
+var COLORS = {
+  OFFSET_LINE: "white",
+  COMPONENT_MARKER_FILL: "#66ccff",
+  COMPONENT_MARKER_STROKE: "white",
+  LABEL_TEXT: "white"
+};
+
+// src/components/GroupAnchorOffsetOverlay/findAnchorMarkerPosition.ts
+var findAnchorMarkerPosition = (anchor, bounds) => {
+  const { minX, maxX, minY, maxY } = bounds;
+  const distToLeft = Math.abs(anchor.x - minX);
+  const distToRight = Math.abs(anchor.x - maxX);
+  const distToTop = Math.abs(anchor.y - maxY);
+  const distToBottom = Math.abs(anchor.y - minY);
+  const minDist = Math.min(distToLeft, distToRight, distToTop, distToBottom);
+  if (minDist === distToLeft) return { x: minX, y: anchor.y };
+  if (minDist === distToRight) return { x: maxX, y: anchor.y };
+  if (minDist === distToTop) return { x: anchor.x, y: maxY };
+  return { x: anchor.x, y: minY };
+};
+
+// src/components/GroupAnchorOffsetOverlay/index.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var GroupAnchorOffsetOverlay = ({
+  elements,
+  highlightedPrimitives,
+  transform,
+  containerWidth,
+  containerHeight,
+  children
+}) => {
+  const is_showing_group_anchor_offsets = useGlobalStore(
+    (s) => s.is_showing_group_anchor_offsets
+  );
+  if (!is_showing_group_anchor_offsets || highlightedPrimitives.length === 0) {
+    return null;
+  }
+  const hoveredPrimitive = highlightedPrimitives.find(
+    (p) => p._parent_pcb_component?.type === "pcb_component" || p._element?.type === "pcb_component"
+  );
+  if (!hoveredPrimitive) return null;
+  const pcbComponent = hoveredPrimitive._parent_pcb_component || hoveredPrimitive._element;
+  if (!pcbComponent?.pcb_group_id) return null;
+  const parentGroup = elements.filter((el) => el.type === "pcb_group").find((group) => group.pcb_group_id === pcbComponent.pcb_group_id);
+  if (!parentGroup?.anchor_position) return null;
+  const targetCenter = hoveredPrimitive._element?.type === "pcb_smtpad" ? { x: hoveredPrimitive.x, y: hoveredPrimitive.y } : pcbComponent.center || {
+    x: hoveredPrimitive.x,
+    y: hoveredPrimitive.y
   };
-  return distance3(p, projection);
-}
-function distance3(p1, p2) {
-  const dx = p1.x - p2.x;
-  const dy = p1.y - p2.y;
-  return Math.sqrt(dx * dx + dy * dy);
-}
+  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 = findAnchorMarkerPosition(
+    parentGroup.anchor_position,
+    groupBounds
+  );
+  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 labelStyle = {
+    color: COLORS.LABEL_TEXT,
+    mixBlendMode: "difference",
+    pointerEvents: "none",
+    fontSize: VISUAL_CONFIG.LABEL_FONT_SIZE,
+    fontFamily: "monospace",
+    fontWeight: "bold"
+  };
+  return /* @__PURE__ */ jsxs9(
+    "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: [
+              /* @__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__ */ 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"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/MouseElementTracker.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -12298,22 +12521,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 = pointToSegmentDistance2(
+      const distance3 = 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 (distance3 < 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: distance2.parse(point.x),
+        y: distance2.parse(point.y)
       }));
       const boundingBox = getPolygonBoundingBox(points);
       if (!boundingBox) continue;
@@ -12327,8 +12550,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: distance2.parse(v.x),
+        y: distance2.parse(v.y)
       }));
       const boundingBox = getPolygonBoundingBox(points);
       if (!boundingBox) continue;
@@ -12370,6 +12593,7 @@ var MouseElementTracker = ({
 }) => {
   const [mousedPrimitives, setMousedPrimitives] = useState7([]);
   const [mousePos, setMousePos] = useState7({ x: 0, y: 0 });
+  const [containerRef, { width, height }] = useMeasure_default();
   const highlightedPrimitives = useMemo5(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
@@ -12401,7 +12625,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 = applyToPoint12(transform, basePoint);
+      const screenPos = applyToPoint13(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -12426,7 +12650,7 @@ var MouseElementTracker = ({
   }, [mousedPrimitives, transform]);
   const handleInteraction = (x, y, transform2, primitives2) => {
     setMousePos({ x, y });
-    const rwPoint = applyToPoint12(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint13(inverse5(transform2), { x, y });
     const newMousedPrimitives = getPrimitivesUnderPoint(
       primitives2,
       rwPoint,
@@ -12441,10 +12665,11 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
-      style: { position: "relative" },
+      ref: containerRef,
+      style: { position: "relative", width: "100%", height: "100%" },
       onMouseMove: (e) => {
         if (transform) {
           const rect = e.currentTarget.getBoundingClientRect();
@@ -12464,13 +12689,23 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           ElementOverlayBox,
           {
             elements,
             mousePos,
             highlightedPrimitives
           }
+        ),
+        transform && /* @__PURE__ */ jsx13(
+          GroupAnchorOffsetOverlay,
+          {
+            elements,
+            highlightedPrimitives,
+            transform,
+            containerWidth: width,
+            containerHeight: height
+          }
         )
       ]
     }
@@ -12478,10 +12713,10 @@ var MouseElementTracker = ({
 };
 
 // src/components/PcbGroupOverlay.tsx
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 import { identity as identity8 } from "transformation-matrix";
 import { useRef as useRef9, useEffect as useEffect12 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -12610,10 +12845,10 @@ var PcbGroupOverlay = ({
       maxX += totalPadding;
       minY -= totalPadding;
       maxY += totalPadding;
-      const topLeft = applyToPoint13(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint13(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint13(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint13(transform, { x: maxX, y: minY });
+      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 groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
       ctx.strokeStyle = groupColor;
       ctx.lineWidth = 2;
@@ -12683,7 +12918,7 @@ var PcbGroupOverlay = ({
         } else {
           edgePoint = { x: anchor.x, y: groupBottom };
         }
-        const anchorScreenPos = applyToPoint13(transform, edgePoint);
+        const anchorScreenPos = applyToPoint14(transform, edgePoint);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -12706,14 +12941,14 @@ var PcbGroupOverlay = ({
     is_showing_pcb_groups,
     pcb_group_view_mode
   ]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "canvas",
           {
             ref: canvasRef,
@@ -12733,9 +12968,9 @@ var PcbGroupOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint14, identity as identity9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint15, identity as identity9 } from "transformation-matrix";
 import { useMemo as useMemo6 } 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 RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
   const { netMap, idToNetMap } = useMemo6(
@@ -12758,11 +12993,11 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
       connectedIds.forEach((id) => {
         const pos = getElementPosition(id);
         if (pos) {
-          const distance5 = Math.sqrt(
+          const distance3 = Math.sqrt(
             (sourcePoint.x - pos.x) ** 2 + (sourcePoint.y - pos.y) ** 2
           );
-          if (distance5 < minDistance && distance5 > 0) {
-            minDistance = distance5;
+          if (distance3 < minDistance && distance3 > 0) {
+            minDistance = distance3;
             nearestPoint = pos;
           }
         }
@@ -12798,9 +13033,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity9();
-  return /* @__PURE__ */ jsxs11("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "svg",
       {
         style: {
@@ -12814,9 +13049,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint14(transform, startPoint);
-          const transformedEnd = applyToPoint14(transform, endPoint);
-          return /* @__PURE__ */ jsx14(
+          const transformedStart = applyToPoint15(transform, startPoint);
+          const transformedEnd = applyToPoint15(transform, endPoint);
+          return /* @__PURE__ */ jsx15(
             "line",
             {
               x1: transformedStart.x,
@@ -12836,18 +13071,13 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import {
-  useEffect as useEffect15,
-  useState as useState9,
-  useCallback as useCallback4,
-  useRef as useRef10
-} from "react";
+import { useEffect as useEffect15, useState as useState9, useCallback as useCallback4, useRef as useRef10 } from "react";
 import { css as css3 } from "@emotion/css";
 
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.265",
+  version: "1.11.266",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -12898,6 +13128,7 @@ var package_default = {
   dependencies: {
     "@emotion/css": "^11.11.2",
     "@tscircuit/alphabet": "^0.0.3",
+    "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
     "circuit-json": "^0.0.321",
     "circuit-to-svg": "^0.0.271",
@@ -12952,9 +13183,9 @@ var useIsSmallScreen = () => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -12970,8 +13201,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       `,
       onClick,
       children: [
-        /* @__PURE__ */ jsx15("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx16(
           "span",
           {
             style: {
@@ -12991,7 +13222,7 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx16(
   "div",
   {
     ...props,
@@ -13028,7 +13259,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -13055,15 +13286,15 @@ var CheckboxMenuItem = ({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx15("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx16("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx15("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx16("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -13090,9 +13321,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx15("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx16("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx15("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx16("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -13113,6 +13344,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingDrcErrors,
     setIsShowingCopperPours,
     setIsShowingPcbGroups,
+    setIsShowingGroupAnchorOffsets,
     setPcbGroupViewMode,
     setHoveredErrorId
   } = useGlobalStore((s) => ({
@@ -13131,6 +13363,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       is_showing_drc_errors: s.is_showing_drc_errors,
       is_showing_copper_pours: s.is_showing_copper_pours,
       is_showing_pcb_groups: s.is_showing_pcb_groups,
+      is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets,
       pcb_group_view_mode: s.pcb_group_view_mode
     },
     setEditMode: s.setEditMode,
@@ -13140,6 +13373,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingDrcErrors: s.setIsShowingDrcErrors,
     setIsShowingCopperPours: s.setIsShowingCopperPours,
     setIsShowingPcbGroups: s.setIsShowingPcbGroups,
+    setIsShowingGroupAnchorOffsets: s.setIsShowingGroupAnchorOffsets,
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId
   }));
@@ -13238,7 +13472,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       style: { position: "relative", zIndex: "999 !important" },
@@ -13246,7 +13480,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -13267,7 +13501,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -13290,7 +13524,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs13(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13301,10 +13535,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs12("div", { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         "span",
                         {
                           style: {
@@ -13316,7 +13550,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx15("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx15(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx16("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx16(
                       LayerButton,
                       {
                         name: layer,
@@ -13330,7 +13564,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13339,13 +13573,13 @@ var ToolbarOverlay = ({ children, elements }) => {
                     ...errorCount > 0 ? { color: "red" } : {}
                   },
                   onClick: handleErrorsToggle,
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     errorCount,
                     " errors"
                   ] })
                 }
               ),
-              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx15(
+              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx16(
                 "div",
                 {
                   style: {
@@ -13363,14 +13597,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__ */ jsxs12(
+                    return /* @__PURE__ */ jsxs13(
                       "div",
                       {
                         style: {
                           borderBottom: i < errorElements.length - 1 ? "1px solid #444" : "none"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs12(
+                          /* @__PURE__ */ jsxs13(
                             "div",
                             {
                               style: {
@@ -13421,7 +13655,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 }
                               },
                               children: [
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     style: {
@@ -13435,7 +13669,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.error_type
                                   }
                                 ),
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     style: {
@@ -13450,7 +13684,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.message
                                   }
                                 ),
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     ref: (el) => {
@@ -13470,7 +13704,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx15(
+                          /* @__PURE__ */ jsx16(
                             "div",
                             {
                               ref: (el) => {
@@ -13483,7 +13717,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 backgroundColor: "#1a1a1a",
                                 borderTop: "1px solid #444"
                               },
-                              children: /* @__PURE__ */ jsx15(
+                              children: /* @__PURE__ */ jsx16(
                                 "div",
                                 {
                                   style: {
@@ -13506,58 +13740,58 @@ var ToolbarOverlay = ({ children, elements }) => {
                   })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleEditTraceToggle,
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     editModes.in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleMoveComponentToggle,
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     editModes.in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx15("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx16("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
-                    /* @__PURE__ */ jsxs12(
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                    /* @__PURE__ */ jsxs13(
                       "div",
                       {
                         style: {
@@ -13567,7 +13801,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx15(
+                          /* @__PURE__ */ jsx16(
                             "span",
                             {
                               style: {
@@ -13582,8 +13816,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs12("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx15(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs13("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -13595,7 +13829,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -13607,7 +13841,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -13617,7 +13851,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -13629,7 +13863,19 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
+                        CheckboxMenuItem,
+                        {
+                          label: "Show Group Anchor Offsets",
+                          checked: viewSettings.is_showing_group_anchor_offsets,
+                          onClick: () => {
+                            setIsShowingGroupAnchorOffsets(
+                              !viewSettings.is_showing_group_anchor_offsets
+                            );
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -13639,8 +13885,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs12("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx15(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs13("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx16(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -13650,7 +13896,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx15(
+                        /* @__PURE__ */ jsx16(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -13674,7 +13920,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
@@ -13751,14 +13997,14 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     MouseElementTracker,
     {
       elements: elementsToRender,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx17(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -13767,7 +14013,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx17(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -13776,23 +14022,23 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx16(
+              children: /* @__PURE__ */ jsx17(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
-                  children: /* @__PURE__ */ jsx16(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx16(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx16(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx16(PcbGroupOverlay, { transform, elements, children: /* @__PURE__ */ jsx16(
+                  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,
                     {
                       transform,
                       debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx16(
+                      children: /* @__PURE__ */ jsx17(
                         WarningGraphicsOverlay,
                         {
                           transform,
                           elements,
-                          children: /* @__PURE__ */ jsx16(
+                          children: /* @__PURE__ */ jsx17(
                             CanvasPrimitiveRenderer,
                             {
                               transform,
@@ -13859,7 +14105,7 @@ var calculateCircuitJsonKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var defaultTransform = compose7(translate11(400, 300), scale5(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -13953,14 +14199,14 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs13("div", { ref: transformRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx17("div", { ref, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14("div", { ref: transformRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx18("div", { ref, children: /* @__PURE__ */ jsxs14(
       ContextProviders,
       {
         initialState: mergedInitialState,
         disablePcbGroups,
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             CanvasElementsRenderer,
             {
               transform,
@@ -13985,11 +14231,11 @@ var PCBViewer = ({
             },
             refDimensions.width
           ),
-          /* @__PURE__ */ jsx17(ToastContainer, {})
+          /* @__PURE__ */ jsx18(ToastContainer, {})
         ]
       }
     ) }),
-    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx17(
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx18(
       "div",
       {
         onClick: () => {
@@ -14026,7 +14272,7 @@ var PCBViewer = ({
           justifyContent: "center",
           touchAction: "pan-x pan-y pinch-zoom"
         },
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "div",
           {
             style: {