@tscircuit/pcb-viewer 1.11.267 → 1.11.269

package/dist/index.js

@@ -6277,7 +6277,9 @@ 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",
+  IS_SHOWING_SOLDER_MASK: "pcb_viewer_is_showing_solder_mask"
 };
 var getStoredBoolean = (key, defaultValue) => {
   if (typeof window === "undefined") return defaultValue;
@@ -6333,6 +6335,14 @@ 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
+    ),
+    is_showing_solder_mask: getStoredBoolean(
+      STORAGE_KEYS.IS_SHOWING_SOLDER_MASK,
+      false
+    ),
     pcb_group_view_mode: disablePcbGroups ? "all" : getStoredString(
       STORAGE_KEYS.PCB_GROUP_VIEW_MODE,
       DEFAULT_PCB_GROUP_VIEW_MODE
@@ -6363,6 +6373,17 @@ 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 });
+    },
+    setIsShowingSolderMask: (is_showing) => {
+      setStoredBoolean(STORAGE_KEYS.IS_SHOWING_SOLDER_MASK, is_showing);
+      set({ is_showing_solder_mask: is_showing });
+    },
     setPcbGroupViewMode: (mode) => {
       if (disablePcbGroups) return;
       setStoredString(STORAGE_KEYS.PCB_GROUP_VIEW_MODE, mode);
@@ -6766,6 +6787,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 +7074,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(
@@ -7126,76 +7148,123 @@ var convertElementToPrimitives = (element, allElements) => {
     }
     case "pcb_board": {
       const { width, height, center, outline } = element;
+      const primitives = [];
+      const hasSolderMask = allElements.some(
+        (elm) => elm.type === "pcb_smtpad" && elm.is_covered_with_solder_mask === true
+      );
+      if (hasSolderMask) {
+        if (outline && outline.length > 2) {
+          primitives.push({
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(outline),
+            layer: "soldermask_top",
+            _element: element
+          });
+          primitives.push({
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(outline),
+            layer: "soldermask_bottom",
+            _element: element
+          });
+        } else if (width && height) {
+          primitives.push({
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x: center.x,
+            y: center.y,
+            w: width,
+            h: height,
+            layer: "soldermask_top",
+            _element: element
+          });
+          primitives.push({
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x: center.x,
+            y: center.y,
+            w: width,
+            h: height,
+            layer: "soldermask_bottom",
+            _element: element
+          });
+        }
+      }
       if (outline && outline.length > 2) {
-        return outline.map((point, index, array) => ({
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: point.x,
-          y1: point.y,
-          x2: index === array.length - 1 ? array[0].x : array[index + 1].x,
-          y2: index === array.length - 1 ? array[0].y : array[index + 1].y,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        }));
+        primitives.push(
+          ...outline.map((point, index, array) => ({
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: point.x,
+            y1: point.y,
+            x2: index === array.length - 1 ? array[0].x : array[index + 1].x,
+            y2: index === array.length - 1 ? array[0].y : array[index + 1].y,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          }))
+        );
+      } else {
+        primitives.push(
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y - height / 2,
+            x2: center.x + width / 2,
+            y2: center.y - height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y + height / 2,
+            x2: center.x + width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y - height / 2,
+            x2: center.x - width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x + width / 2,
+            y1: center.y - height / 2,
+            x2: center.x + width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          }
+        );
       }
-      return [
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y - height / 2,
-          x2: center.x + width / 2,
-          y2: center.y - height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y + height / 2,
-          x2: center.x + width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y - height / 2,
-          x2: center.x - width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x + width / 2,
-          y1: center.y - height / 2,
-          x2: center.x + width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        }
-      ];
+      return primitives;
     }
     case "pcb_smtpad": {
       if (element.shape === "rect" || element.shape === "rotated_rect") {
         const { shape, x, y, width, height, layer, rect_border_radius } = element;
         const corner_radius = element.corner_radius ?? rect_border_radius ?? 0;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "rect",
@@ -7212,9 +7281,32 @@ var convertElementToPrimitives = (element, allElements) => {
             roundness: corner_radius
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x,
+            y,
+            w: width,
+            h: height,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port,
+            ccw_rotation: element.ccw_rotation,
+            roundness: corner_radius
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "circle") {
         const { x, y, radius, layer } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "circle",
@@ -7228,9 +7320,29 @@ var convertElementToPrimitives = (element, allElements) => {
             _source_port
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "circle",
+            x,
+            y,
+            r: radius,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "polygon") {
         const { layer, points } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "polygon",
@@ -7242,9 +7354,27 @@ var convertElementToPrimitives = (element, allElements) => {
             _source_port
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(points),
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "pill" || element.shape === "rotated_pill") {
         const { x, y, width, height, layer } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "pill",
@@ -7260,6 +7390,28 @@ var convertElementToPrimitives = (element, allElements) => {
             ccw_rotation: element.ccw_rotation
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "pill",
+            x,
+            y,
+            w: width,
+            h: height,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port,
+            ccw_rotation: element.ccw_rotation
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       }
       return [];
     }
@@ -7584,10 +7736,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;
@@ -8530,6 +8682,14 @@ var colors_default = {
     plated_hole: "rgb(26, 196, 210)",
     ratsnest: "rgba(245, 255, 213, 0.702)",
     select_overlay: "rgb(4, 255, 67)",
+    soldermaskWithCopper: {
+      top: "rgb(18, 82, 50)",
+      bottom: "rgb(77, 127, 196)"
+    },
+    soldermask: {
+      top: "rgb(12, 55, 33)",
+      bottom: "rgb(12, 55, 33)"
+    },
     through_via: "rgb(236, 236, 236)",
     user_1: "rgb(194, 194, 194)",
     user_2: "rgb(89, 148, 220)",
@@ -8726,6 +8886,10 @@ var LAYER_NAME_TO_COLOR = {
   bottom_silkscreen: colors_default.board.b_silks,
   top_fabrication: colors_default.board.f_fab,
   bottom_fabrication: colors_default.board.b_fab,
+  soldermask_top: colors_default.board.soldermask.top,
+  soldermask_bottom: colors_default.board.soldermask.bottom,
+  soldermask_with_copper_top: colors_default.board.soldermaskWithCopper.top,
+  soldermask_with_copper_bottom: colors_default.board.soldermaskWithCopper.bottom,
   notes: colors_default.board.user_2,
   ...colors_default.board
 };
@@ -8737,9 +8901,13 @@ var DEFAULT_DRAW_ORDER = [
   "inner2",
   "inner1",
   "bottom",
+  "soldermask_bottom",
   "bottom_silkscreen",
   "top",
+  "soldermask_top",
   "top_silkscreen",
+  "soldermask_with_copper_bottom",
+  "soldermask_with_copper_top",
   "board"
 ];
 var Drawer = class {
@@ -9031,23 +9199,27 @@ var Drawer = class {
    */
   orderAndFadeLayers() {
     const { canvasLayerMap, foregroundLayer } = this;
+    const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
+    const maskWithCopperLayerForForeground = foregroundLayer === "top" ? "soldermask_with_copper_top" : foregroundLayer === "bottom" ? "soldermask_with_copper_bottom" : void 0;
     const opaqueLayers = /* @__PURE__ */ new Set([
       foregroundLayer,
       "drill",
       "other",
       "board",
-      foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : ""
+      ...associatedSilkscreen ? [associatedSilkscreen] : [],
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
     ]);
-    const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
     const layersToShiftToTop = [
       foregroundLayer,
-      ...associatedSilkscreen ? [associatedSilkscreen] : []
+      ...associatedSilkscreen ? [associatedSilkscreen] : [],
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
     ];
     const order = [
       ...DEFAULT_DRAW_ORDER.filter(
         (l) => !layersToShiftToTop.includes(l)
       ),
       foregroundLayer,
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : [],
       "drill",
       ...associatedSilkscreen ? [associatedSilkscreen] : []
     ];
@@ -9484,7 +9656,11 @@ var orderedLayers = [
   "board",
   "bottom_silkscreen",
   "bottom",
+  "soldermask_bottom",
   "top",
+  "soldermask_top",
+  "soldermask_with_copper_bottom",
+  "soldermask_with_copper_top",
   "top_silkscreen",
   "inner1",
   "inner2",
@@ -9499,22 +9675,34 @@ var orderedLayers = [
 var CanvasPrimitiveRenderer = ({
   primitives,
   transform,
-  grid: grid3,
+  grid,
   width = 500,
   height = 500
 }) => {
   const canvasRefs = useRef2({});
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
+  const isShowingSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
   useEffect4(() => {
     if (!canvasRefs.current) return;
     if (Object.keys(canvasRefs.current).length === 0) return;
-    const drawer = new Drawer(canvasRefs.current);
+    const filteredCanvasRefs = Object.fromEntries(
+      Object.entries(canvasRefs.current).filter(([layer, canvas]) => {
+        if (!canvas) return false;
+        if (!isShowingSolderMask && layer.includes("soldermask")) {
+          return false;
+        }
+        return true;
+      })
+    );
+    if (Object.keys(filteredCanvasRefs).length === 0) return;
+    const drawer = new Drawer(filteredCanvasRefs);
     if (transform) drawer.transform = transform;
     drawer.clear();
     drawer.foregroundLayer = selectedLayer;
-    drawPrimitives(drawer, primitives);
+    const filteredPrimitives = isShowingSolderMask ? primitives : primitives.filter((p) => !p.layer?.includes("soldermask"));
+    drawPrimitives(drawer, filteredPrimitives);
     drawer.orderAndFadeLayers();
-  }, [primitives, transform, selectedLayer]);
+  }, [primitives, transform, selectedLayer, isShowingSolderMask]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9538,13 +9726,22 @@ var CanvasPrimitiveRenderer = ({
             stringifyCoord: (x, y, z) => `${toMMSI(x, z)}, ${toMMSI(y, z)}`
           }
         ),
-        orderedLayers.map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx3(
+        orderedLayers.filter((layer) => {
+          if (!isShowingSolderMask) {
+            return !layer.includes("soldermask");
+          }
+          return true;
+        }).map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx3(
           "canvas",
           {
             className: `pcb-layer-${layer}`,
             ref: (el) => {
               canvasRefs.current ??= {};
-              canvasRefs.current[layer] = el;
+              if (el) {
+                canvasRefs.current[layer] = el;
+              } else {
+                delete canvasRefs.current[layer];
+              }
             },
             style: {
               position: "absolute",
@@ -10047,6 +10244,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),
@@ -10183,7 +10381,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(
@@ -10225,11 +10423,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
   };
 }
 
@@ -10523,11 +10721,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
           };
@@ -11126,10 +11324,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);
@@ -11955,9 +12153,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";
@@ -12234,35 +12442,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;
@@ -12304,22 +12705,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;
@@ -12333,8 +12734,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;
@@ -12376,6 +12777,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) {
@@ -12407,7 +12809,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
@@ -12432,7 +12834,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,
@@ -12447,10 +12849,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();
@@ -12470,13 +12873,23 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           ElementOverlayBox,
           {
             elements,
             mousePos,
             highlightedPrimitives
           }
+        ),
+        transform && /* @__PURE__ */ jsx13(
+          GroupAnchorOffsetOverlay,
+          {
+            elements,
+            highlightedPrimitives,
+            transform,
+            containerWidth: width,
+            containerHeight: height
+          }
         )
       ]
     }
@@ -12484,10 +12897,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)",
@@ -12616,10 +13029,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;
@@ -12689,7 +13102,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([]);
@@ -12712,14 +13125,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,
@@ -12739,9 +13152,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(
@@ -12764,11 +13177,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;
           }
         }
@@ -12804,9 +13217,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: {
@@ -12820,9 +13233,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,
@@ -12842,18 +13255,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.268",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -12904,6 +13312,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",
@@ -12958,9 +13367,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`
@@ -12976,8 +13385,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: {
@@ -12997,7 +13406,7 @@ var ToolbarButton = ({
   isSmallScreen,
   onClick,
   ...props
-}) => /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx16(
   "div",
   {
     ...props,
@@ -13034,7 +13443,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -13061,15 +13470,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`
@@ -13096,9 +13505,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 })
       ]
     }
   );
@@ -13119,6 +13528,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingDrcErrors,
     setIsShowingCopperPours,
     setIsShowingPcbGroups,
+    setIsShowingGroupAnchorOffsets,
+    setIsShowingSolderMask,
     setPcbGroupViewMode,
     setHoveredErrorId
   } = useGlobalStore((s) => ({
@@ -13137,6 +13548,8 @@ 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,
+      is_showing_solder_mask: s.is_showing_solder_mask,
       pcb_group_view_mode: s.pcb_group_view_mode
     },
     setEditMode: s.setEditMode,
@@ -13146,6 +13559,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingDrcErrors: s.setIsShowingDrcErrors,
     setIsShowingCopperPours: s.setIsShowingCopperPours,
     setIsShowingPcbGroups: s.setIsShowingPcbGroups,
+    setIsShowingGroupAnchorOffsets: s.setIsShowingGroupAnchorOffsets,
+    setIsShowingSolderMask: s.setIsShowingSolderMask,
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId
   }));
@@ -13244,7 +13659,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       style: { position: "relative", zIndex: "999 !important" },
@@ -13252,7 +13667,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -13273,7 +13688,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -13296,7 +13711,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs13(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13307,10 +13722,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs12("div", { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         "span",
                         {
                           style: {
@@ -13322,7 +13737,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,
@@ -13336,7 +13751,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -13345,13 +13760,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: {
@@ -13369,14 +13784,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: {
@@ -13427,7 +13842,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 }
                               },
                               children: [
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     style: {
@@ -13441,7 +13856,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.error_type
                                   }
                                 ),
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     style: {
@@ -13456,7 +13871,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                     children: e.message
                                   }
                                 ),
-                                /* @__PURE__ */ jsx15(
+                                /* @__PURE__ */ jsx16(
                                   "div",
                                   {
                                     ref: (el) => {
@@ -13476,7 +13891,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx15(
+                          /* @__PURE__ */ jsx16(
                             "div",
                             {
                               ref: (el) => {
@@ -13489,7 +13904,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                                 backgroundColor: "#1a1a1a",
                                 borderTop: "1px solid #444"
                               },
-                              children: /* @__PURE__ */ jsx15(
+                              children: /* @__PURE__ */ jsx16(
                                 "div",
                                 {
                                   style: {
@@ -13512,58 +13927,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: {
@@ -13573,7 +13988,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx15(
+                          /* @__PURE__ */ jsx16(
                             "span",
                             {
                               style: {
@@ -13588,8 +14003,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",
@@ -13601,7 +14016,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -13613,7 +14028,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -13623,7 +14038,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -13635,7 +14050,29 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx16(
+                        CheckboxMenuItem,
+                        {
+                          label: "Show Solder Mask",
+                          checked: viewSettings.is_showing_solder_mask,
+                          onClick: () => {
+                            setIsShowingSolderMask(!viewSettings.is_showing_solder_mask);
+                          }
+                        }
+                      ),
+                      /* @__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",
@@ -13645,8 +14082,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",
@@ -13656,7 +14093,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx15(
+                        /* @__PURE__ */ jsx16(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -13680,7 +14117,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);
@@ -13757,14 +14194,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,
@@ -13773,7 +14210,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx17(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -13782,23 +14219,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,
@@ -13865,7 +14302,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,
@@ -13959,14 +14396,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,
@@ -13991,11 +14428,11 @@ var PCBViewer = ({
             },
             refDimensions.width
           ),
-          /* @__PURE__ */ jsx17(ToastContainer, {})
+          /* @__PURE__ */ jsx18(ToastContainer, {})
         ]
       }
     ) }),
-    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx17(
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx18(
       "div",
       {
         onClick: () => {
@@ -14032,7 +14469,7 @@ var PCBViewer = ({
           justifyContent: "center",
           touchAction: "pan-x pan-y pinch-zoom"
         },
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "div",
           {
             style: {