@tscircuit/pcb-viewer 1.11.199 → 1.11.201

package/dist/index.js

@@ -101565,6 +101565,7 @@ var createStore = (initialState = {}) => createZustandStore(
     is_showing_rats_nest: false,
     is_showing_autorouting: true,
     is_showing_drc_errors: true,
+    is_showing_pcb_groups: false,
     ...initialState,
     selectLayer: (layer) => set({ selected_layer: layer }),
     setEditMode: (mode) => set({
@@ -101580,7 +101581,8 @@ var createStore = (initialState = {}) => createZustandStore(
     setIsMouseOverContainer: (is_focused) => set({ is_mouse_over_container: is_focused }),
     setIsShowingMultipleTracesLength: (is_showing) => set({ is_showing_multiple_traces_length: is_showing }),
     setIsShowingAutorouting: (is_showing) => set({ is_showing_autorouting: is_showing }),
-    setIsShowingDrcErrors: (is_showing) => set({ is_showing_drc_errors: is_showing })
+    setIsShowingDrcErrors: (is_showing) => set({ is_showing_drc_errors: is_showing }),
+    setIsShowingPcbGroups: (is_showing) => set({ is_showing_pcb_groups: is_showing })
   })
 );
 var useGlobalStore = (s) => {
@@ -101629,7 +101631,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect14, useMemo as useMemo6, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo6, useRef as useRef10, useState as useState10 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -102186,7 +102188,8 @@ var convertElementToPrimitives = (element, allElements) => {
             _element: element,
             _parent_pcb_component,
             _parent_source_component,
-            _source_port
+            _source_port,
+            ccw_rotation: element.ccw_rotation
           }
         ];
       } else if (element.shape === "circle") {
@@ -102377,6 +102380,46 @@ var convertElementToPrimitives = (element, allElements) => {
             // Pill-shaped hole in drill layer
           }
         ];
+      } else if (element.shape === "rotated_pill_hole_with_rect_pad") {
+        const {
+          x,
+          y,
+          hole_width,
+          hole_height,
+          hole_ccw_rotation,
+          rect_pad_width,
+          rect_pad_height,
+          rect_ccw_rotation
+        } = element;
+        return [
+          {
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x,
+            y,
+            w: rect_pad_width,
+            h: rect_pad_height,
+            layer: "top",
+            // Rectangular pad on top layer
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port,
+            ccw_rotation: rect_ccw_rotation
+          },
+          {
+            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
+            _element: element,
+            pcb_drawing_type: "pill",
+            x,
+            y,
+            w: hole_width,
+            h: hole_height,
+            layer: "drill",
+            // Pill-shaped hole in drill layer
+            ccw_rotation: hole_ccw_rotation
+          }
+        ];
       } else {
         return [];
       }
@@ -102972,6 +103015,7 @@ var zIndexMap = {
   dimensionOverlay: 30,
   editTraceHintOverlay: 30,
   errorOverlay: 30,
+  pcbGroupOverlay: 25,
   ratsNestOverlay: 20,
   toolbarOverlay: 60,
   warnings: 20,
@@ -103160,6 +103204,18 @@ var Drawer = class {
     }
     ctx.restore();
   }
+  rotatedPill(x, y, w, h, ccw_rotation) {
+    const ctx = this.getLayerCtx();
+    this.applyAperture();
+    ctx.save();
+    const [centerX, centerY] = applyToPoint9(this.transform, [x, y]);
+    ctx.translate(centerX, centerY);
+    const cw_rotation = 360 - ccw_rotation;
+    if (ccw_rotation) ctx.rotate(cw_rotation * Math.PI / 180);
+    ctx.translate(-centerX, -centerY);
+    this.pill(x, y, w, h);
+    ctx.restore();
+  }
   circle(x, y, r, mesh_fill) {
     const r$ = scaleOnly(this.transform, r);
     const [x$, y$] = applyToPoint9(this.transform, [x, y]);
@@ -103606,6 +103662,13 @@ var drawRotatedRect = (drawer, rect) => {
   });
   drawer.rotatedRect(rect.x, rect.y, rect.w, rect.h, rect.ccw_rotation);
 };
+var drawRotatedPill = (drawer, pill) => {
+  drawer.equip({
+    color: getColor(pill),
+    layer: pill.layer
+  });
+  drawer.rotatedPill(pill.x, pill.y, pill.w, pill.h, pill.ccw_rotation);
+};
 var drawCircle = (drawer, circle) => {
   drawer.equip({
     color: getColor(circle),
@@ -103641,13 +103704,8 @@ var drawPrimitive = (drawer, primitive) => {
     case "text":
       return drawText(drawer, primitive);
     case "rect":
-      if (primitive._element?.shape === "rotated_rect") {
-        return drawRotatedRect(drawer, {
-          ...primitive,
-          // @ts-ignore
-          ccw_rotation: primitive._element.ccw_rotation,
-          mesh_fill: primitive.mesh_fill
-        });
+      if (primitive.ccw_rotation) {
+        return drawRotatedRect(drawer, primitive);
       }
       return drawRect(drawer, primitive);
     case "circle":
@@ -103655,6 +103713,9 @@ var drawPrimitive = (drawer, primitive) => {
     case "oval":
       return drawOval(drawer, primitive);
     case "pill":
+      if (primitive.ccw_rotation) {
+        return drawRotatedPill(drawer, primitive);
+      }
       return drawPill(drawer, primitive);
     case "polygon":
       return drawPolygon(drawer, primitive);
@@ -105374,10 +105435,203 @@ var MouseElementTracker = ({
   );
 };
 
+// src/components/PcbGroupOverlay.tsx
+import { applyToPoint as applyToPoint17 } from "transformation-matrix";
+import { identity as identity12 } from "transformation-matrix";
+import { useRef as useRef9, useEffect as useEffect12 } from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var GROUP_COLORS = [
+  "rgb(255, 100, 100)",
+  "rgb(100, 255, 100)",
+  "rgb(100, 100, 255)",
+  "rgb(255, 255, 100)",
+  "rgb(255, 100, 255)",
+  "rgb(100, 255, 255)",
+  "rgb(255, 150, 100)",
+  "rgb(150, 100, 255)",
+  "rgb(100, 255, 150)",
+  "rgb(255, 100, 150)"
+];
+var PcbGroupOverlay = ({
+  children,
+  transform: transform2 = identity12(),
+  elements = []
+}) => {
+  const [containerRef, { width, height }] = useMeasure_default();
+  const canvasRef = useRef9(null);
+  const is_showing_pcb_groups = useGlobalStore((s) => s.is_showing_pcb_groups);
+  useEffect12(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !width || !height) return;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, width, height);
+    if (!is_showing_pcb_groups) return;
+    const pcbGroups = elements.filter(
+      (el) => el.type === "pcb_group"
+    );
+    const pcbComponents = elements.filter(
+      (el) => el.type === "pcb_component"
+    );
+    const sourceGroups = elements.filter(
+      (el) => el.type === "source_group"
+    );
+    const sourceGroupHierarchy = /* @__PURE__ */ new Map();
+    sourceGroups.forEach((group) => {
+      const groupWithParent = group;
+      if (groupWithParent.parent_source_group_id) {
+        const children2 = sourceGroupHierarchy.get(groupWithParent.parent_source_group_id) || [];
+        children2.push(group.source_group_id);
+        sourceGroupHierarchy.set(
+          groupWithParent.parent_source_group_id,
+          children2
+        );
+      }
+    });
+    const getAllDescendantSourceGroups = (sourceGroupId) => {
+      const descendants = [];
+      const children2 = sourceGroupHierarchy.get(sourceGroupId) || [];
+      for (const child of children2) {
+        descendants.push(child);
+        descendants.push(...getAllDescendantSourceGroups(child));
+      }
+      return descendants;
+    };
+    const getGroupDepthLevel = (sourceGroupId) => {
+      const groupWithParent = sourceGroups.find(
+        (g) => g.source_group_id === sourceGroupId
+      );
+      if (!groupWithParent?.parent_source_group_id) {
+        return 0;
+      }
+      return 1 + getGroupDepthLevel(groupWithParent.parent_source_group_id);
+    };
+    pcbGroups.forEach((group, groupIndex) => {
+      let groupComponents = pcbComponents.filter(
+        (comp) => comp.pcb_group_id === group.pcb_group_id
+      );
+      if (group.source_group_id) {
+        const descendantSourceGroups = getAllDescendantSourceGroups(
+          group.source_group_id
+        );
+        const childPcbGroups = pcbGroups.filter(
+          (pcbGroup) => pcbGroup.source_group_id && descendantSourceGroups.includes(pcbGroup.source_group_id)
+        );
+        for (const childPcbGroup of childPcbGroups) {
+          const childComponents = pcbComponents.filter(
+            (comp) => comp.pcb_group_id === childPcbGroup.pcb_group_id
+          );
+          groupComponents = [...groupComponents, ...childComponents];
+        }
+      }
+      if (groupComponents.length === 0) return;
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      groupComponents.forEach((comp) => {
+        if (comp.center && typeof comp.width === "number" && typeof comp.height === "number") {
+          const left = comp.center.x - comp.width / 2;
+          const right = comp.center.x + comp.width / 2;
+          const top = comp.center.y + comp.height / 2;
+          const bottom = comp.center.y - comp.height / 2;
+          minX = Math.min(minX, left);
+          maxX = Math.max(maxX, right);
+          minY = Math.min(minY, bottom);
+          maxY = Math.max(maxY, top);
+        }
+      });
+      if (minX === Infinity || maxX === -Infinity) return;
+      const depthLevel = group.source_group_id ? getGroupDepthLevel(group.source_group_id) : 0;
+      const hasChildren2 = group.source_group_id ? getAllDescendantSourceGroups(group.source_group_id).length > 0 : false;
+      const basePadding = 1;
+      const hierarchyPadding = hasChildren2 ? 0.5 : 0;
+      const totalPadding = basePadding + hierarchyPadding;
+      minX -= totalPadding;
+      maxX += totalPadding;
+      minY -= totalPadding;
+      maxY += totalPadding;
+      const topLeft = applyToPoint17(transform2, { x: minX, y: maxY });
+      const topRight = applyToPoint17(transform2, { x: maxX, y: maxY });
+      const bottomLeft = applyToPoint17(transform2, { x: minX, y: minY });
+      const bottomRight = applyToPoint17(transform2, { x: maxX, y: minY });
+      const groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
+      ctx.strokeStyle = groupColor;
+      ctx.lineWidth = 2;
+      const baseDashSize = Math.max(4, Math.min(12, 8 * Math.abs(transform2.a)));
+      const baseGapSize = Math.max(2, Math.min(6, 4 * Math.abs(transform2.a)));
+      const dashMultiplier = hasChildren2 ? 1.3 : 1;
+      const dashSize = baseDashSize * dashMultiplier;
+      const gapSize = baseGapSize;
+      ctx.setLineDash([dashSize, gapSize]);
+      ctx.beginPath();
+      ctx.moveTo(topLeft.x, topLeft.y);
+      ctx.lineTo(topRight.x, topRight.y);
+      ctx.lineTo(bottomRight.x, bottomRight.y);
+      ctx.lineTo(bottomLeft.x, bottomLeft.y);
+      ctx.closePath();
+      ctx.stroke();
+      const baseFontSize = Math.max(8, Math.min(12, 10 * Math.abs(transform2.a)));
+      const fontSizeReduction = depthLevel == 0 || depthLevel == 1 ? 0 : depthLevel * 0.11;
+      const fontSize = baseFontSize * (1 - fontSizeReduction);
+      const labelPadding = 4;
+      const labelText = group.name || `Group ${groupIndex + 1}`;
+      ctx.font = `${fontSize}px sans-serif`;
+      ctx.setLineDash([]);
+      const labelMetrics = ctx.measureText(labelText);
+      const labelWidth = labelMetrics.width + labelPadding * 2;
+      const labelHeight = fontSize + labelPadding * 2;
+      const labelX = topLeft.x - 5;
+      const labelY = topLeft.y - 5;
+      const borderRadius = 3;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
+      ctx.beginPath();
+      ctx.roundRect(
+        labelX,
+        labelY - labelHeight,
+        labelWidth,
+        labelHeight,
+        borderRadius
+      );
+      ctx.fill();
+      ctx.fillStyle = groupColor;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "middle";
+      ctx.fillText(labelText, labelX + labelPadding, labelY - labelHeight / 2);
+    });
+  }, [elements, transform2, width, height, is_showing_pcb_groups]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: containerRef,
+      style: { position: "relative", width: "100%", height: "100%" },
+      children: [
+        children,
+        /* @__PURE__ */ jsx19(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              zIndex: zIndexMap.pcbGroupOverlay,
+              display: is_showing_pcb_groups ? "block" : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint17, identity as identity12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint18, identity as identity13 } from "transformation-matrix";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform: transform2, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
   const { netMap, idToNetMap } = useMemo4(
@@ -105439,10 +105693,10 @@ var RatsNestOverlay = ({ transform: transform2, soup, children }) => {
     return lines;
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
-  if (!transform2) transform2 = identity12();
-  return /* @__PURE__ */ jsxs11("div", { style: { position: "relative" }, children: [
+  if (!transform2) transform2 = identity13();
+  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       "svg",
       {
         style: {
@@ -105456,9 +105710,9 @@ var RatsNestOverlay = ({ transform: transform2, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint17(transform2, startPoint);
-          const transformedEnd = applyToPoint17(transform2, endPoint);
-          return /* @__PURE__ */ jsx19(
+          const transformedStart = applyToPoint18(transform2, startPoint);
+          const transformedEnd = applyToPoint18(transform2, endPoint);
+          return /* @__PURE__ */ jsx20(
             "line",
             {
               x1: transformedStart.x,
@@ -105478,13 +105732,13 @@ var RatsNestOverlay = ({ transform: transform2, soup, children }) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { Fragment as Fragment5, useEffect as useEffect13, useState as useState8 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect14, useState as useState8 } from "react";
 import { css as css3 } from "@emotion/css";
 
 // package.json
 var package_default2 = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.198",
+  version: "1.11.200",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -105545,12 +105799,12 @@ var package_default2 = {
 };
 
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 var useHotKey = (key, onUse) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (!key || typeof onUse !== "function") return;
     const handleKeyDown = (event) => {
       const keyParts = key.split("+");
@@ -105572,13 +105826,13 @@ var useHotKey = (key, onUse) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var LayerButton = ({
   name,
   selected,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -105594,8 +105848,8 @@ var LayerButton = ({
       `,
       onClick,
       children: [
-        /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx21(
           "span",
           {
             style: {
@@ -105610,7 +105864,7 @@ var LayerButton = ({
     }
   );
 };
-var ToolbarButton = ({ children, ...props }) => /* @__PURE__ */ jsx20(
+var ToolbarButton = ({ children, ...props }) => /* @__PURE__ */ jsx21(
   "div",
   {
     ...props,
@@ -105635,7 +105889,7 @@ var CheckboxMenuItem = ({
   checked,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: css3`
@@ -105657,8 +105911,9 @@ var CheckboxMenuItem = ({
         onClick();
       },
       children: [
-        /* @__PURE__ */ jsx20("input", { type: "checkbox", checked }),
-        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx21("input", { type: "checkbox", checked, onChange: () => {
+        }, readOnly: true }),
+        /* @__PURE__ */ jsx21("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -105680,14 +105935,16 @@ var ToolbarOverlay = ({ children, elements }) => {
     is_showing_rats_nest,
     is_showing_multiple_traces_length,
     is_showing_autorouting,
-    is_showing_drc_errors
+    is_showing_drc_errors,
+    is_showing_pcb_groups
   ] = useGlobalStore((s) => [
     s.in_move_footprint_mode,
     s.in_draw_trace_mode,
     s.is_showing_rats_nest,
     s.is_showing_multiple_traces_length,
     s.is_showing_autorouting,
-    s.is_showing_drc_errors
+    s.is_showing_drc_errors,
+    s.is_showing_pcb_groups
   ]);
   const setEditMode = useGlobalStore((s) => s.setEditMode);
   const setIsShowingRatsNest = useGlobalStore((s) => s.setIsShowingRatsNest);
@@ -105698,7 +105955,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     (s) => s.setIsShowingAutorouting
   );
   const setIsShowingDrcErrors = useGlobalStore((s) => s.setIsShowingDrcErrors);
-  useEffect13(() => {
+  const setIsShowingPcbGroups = useGlobalStore((s) => s.setIsShowingPcbGroups);
+  useEffect14(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     window.addEventListener("arm-dimension-tool", arm);
@@ -105717,7 +105975,7 @@ var ToolbarOverlay = ({ children, elements }) => {
   useHotKey("7", () => selectLayer("inner5"));
   useHotKey("8", () => selectLayer("inner6"));
   const errorCount = elements?.filter((e) => e.type.includes("error")).length ?? 0;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       style: { position: "relative" },
@@ -105730,7 +105988,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -105751,7 +106009,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -105768,7 +106026,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs13(
                 ToolbarButton,
                 {
                   onClick: () => {
@@ -105780,10 +106038,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs12("div", { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         "span",
                         {
                           style: {
@@ -105795,7 +106053,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx20("div", { style: { marginTop: 4, minWidth: 120 }, children: all_layers.map((l) => l.replace(/-/g, "")).map((layer) => /* @__PURE__ */ jsx20(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx21("div", { style: { marginTop: 4, minWidth: 120 }, children: all_layers.map((l) => l.replace(/-/g, "")).map((layer) => /* @__PURE__ */ jsx21(
                       LayerButton,
                       {
                         name: layer,
@@ -105809,70 +106067,70 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs13(
                 ToolbarButton,
                 {
                   style: errorCount > 0 ? { color: "red" } : {},
                   onClick: () => setErrorsOpen(!isErrorsOpen),
                   onMouseLeave: () => setErrorsOpen(false),
                   children: [
-                    /* @__PURE__ */ jsxs12("div", { children: [
+                    /* @__PURE__ */ jsxs13("div", { children: [
                       errorCount,
                       " errors"
                     ] }),
-                    isErrorsOpen && /* @__PURE__ */ jsx20(
+                    isErrorsOpen && /* @__PURE__ */ jsx21(
                       "div",
                       {
                         style: { display: "grid", gridTemplateColumns: "100px 300px" },
-                        children: elements?.filter((e) => e.type.includes("error")).map((e, i) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
-                          /* @__PURE__ */ jsx20("div", { children: e.error_type }),
-                          /* @__PURE__ */ jsx20("div", { children: e.message })
+                        children: elements?.filter((e) => e.type.includes("error")).map((e, i) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
+                          /* @__PURE__ */ jsx21("div", { children: e.error_type }),
+                          /* @__PURE__ */ jsx21("div", { children: e.message })
                         ] }, i))
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setEditMode(in_draw_trace_mode ? "off" : "draw_trace");
                   },
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setEditMode(in_move_footprint_mode ? "off" : "move_footprint");
                   },
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 ToolbarButton,
                 {
                   style: {},
                   onClick: () => {
                     setIsShowingRatsNest(!is_showing_rats_nest);
                   },
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
                     is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 ToolbarButton,
                 {
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
@@ -105880,17 +106138,17 @@ var ToolbarOverlay = ({ children, elements }) => {
                     setMeasureToolArmed(true);
                     window.dispatchEvent(new Event("arm-dimension-tool"));
                   },
-                  children: /* @__PURE__ */ jsx20("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx21("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx21(
                 ToolbarButton,
                 {
                   onClick: () => {
                     setViewMenuOpen(!isViewMenuOpen);
                   },
-                  children: /* @__PURE__ */ jsxs12("div", { children: [
-                    /* @__PURE__ */ jsxs12(
+                  children: /* @__PURE__ */ jsxs13("div", { children: [
+                    /* @__PURE__ */ jsxs13(
                       "div",
                       {
                         style: {
@@ -105901,7 +106159,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         children: [
                           "View",
                           " ",
-                          /* @__PURE__ */ jsx20(
+                          /* @__PURE__ */ jsx21(
                             "span",
                             {
                               style: {
@@ -105916,8 +106174,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs12("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx20(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs13("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx21(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -105929,7 +106187,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -105939,7 +106197,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx21(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -105948,6 +106206,16 @@ var ToolbarOverlay = ({ children, elements }) => {
                             setIsShowingDrcErrors(!is_showing_drc_errors);
                           }
                         }
+                      ),
+                      /* @__PURE__ */ jsx21(
+                        CheckboxMenuItem,
+                        {
+                          label: "Show PCB Groups",
+                          checked: is_showing_pcb_groups,
+                          onClick: () => {
+                            setIsShowingPcbGroups(!is_showing_pcb_groups);
+                          }
+                        }
                       )
                     ] })
                   ] })
@@ -105962,7 +106230,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform: transform2, elements } = props;
   const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo5(() => {
@@ -106008,14 +106276,14 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     MouseElementTracker,
     {
       elements,
       transform: transform2,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -106024,7 +106292,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx22(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -106033,22 +106301,22 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx21(
+              children: /* @__PURE__ */ jsx22(
                 DimensionOverlay,
                 {
                   transform: transform2,
                   focusOnHover: props.focusOnHover,
-                  children: /* @__PURE__ */ jsx21(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx21(ErrorOverlay, { transform: transform2, elements, children: /* @__PURE__ */ jsx21(RatsNestOverlay, { transform: transform2, soup: elements, children: /* @__PURE__ */ jsx21(
+                  children: /* @__PURE__ */ jsx22(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx22(ErrorOverlay, { transform: transform2, elements, children: /* @__PURE__ */ jsx22(RatsNestOverlay, { transform: transform2, soup: elements, children: /* @__PURE__ */ jsx22(PcbGroupOverlay, { transform: transform2, elements, children: /* @__PURE__ */ jsx22(
                     DebugGraphicsOverlay,
                     {
                       transform: transform2,
                       debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx21(
+                      children: /* @__PURE__ */ jsx22(
                         WarningGraphicsOverlay,
                         {
                           transform: transform2,
                           elements,
-                          children: /* @__PURE__ */ jsx21(
+                          children: /* @__PURE__ */ jsx22(
                             CanvasPrimitiveRenderer,
                             {
                               transform: transform2,
@@ -106061,7 +106329,7 @@ var CanvasElementsRenderer = (props) => {
                         }
                       )
                     }
-                  ) }) }) })
+                  ) }) }) }) })
                 }
               )
             }
@@ -106073,7 +106341,7 @@ var CanvasElementsRenderer = (props) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var defaultTransform = compose8(translate10(400, 300), scale5(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -106102,8 +106370,8 @@ var PCBViewer = ({
   });
   let [editEvents, setEditEvents] = useState10([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef9(false);
-  const touchStartRef = useRef9(null);
+  const initialRenderCompleted = useRef10(false);
+  const touchStartRef = useRef10(null);
   const circuitJsonKey = `${circuitJson?.length || 0}_${circuitJson?.editCount || 0}`;
   const resetTransform = () => {
     const elmBounds = refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 };
@@ -106125,7 +106393,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -106156,9 +106424,9 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  return /* @__PURE__ */ jsxs13("div", { ref: transformRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx22("div", { ref: ref65, children: /* @__PURE__ */ jsxs13(ContextProviders, { initialState, children: [
-      /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs14("div", { ref: transformRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx23("div", { ref: ref65, children: /* @__PURE__ */ jsxs14(ContextProviders, { initialState, children: [
+      /* @__PURE__ */ jsx23(
         CanvasElementsRenderer,
         {
           transform: transform2,
@@ -106183,9 +106451,9 @@ var PCBViewer = ({
         },
         refDimensions.width
       ),
-      /* @__PURE__ */ jsx22(ToastContainer, {})
+      /* @__PURE__ */ jsx23(ToastContainer, {})
     ] }) }),
-    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx22(
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx23(
       "div",
       {
         onClick: () => {
@@ -106222,7 +106490,7 @@ var PCBViewer = ({
           justifyContent: "center",
           touchAction: "pan-x pan-y pinch-zoom"
         },
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           "div",
           {
             style: {