npm - @tscircuit/pcb-viewer - Versions diffs - 1.11.387 → 1.11.389 - Mend

@tscircuit/pcb-viewer 1.11.387 → 1.11.389

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -5112,10 +5112,10 @@ var require_src = __commonJS({
     var js_beautify = require_javascript();
     var css_beautify = require_css();
     var html_beautify = require_html();
-    function style_html(html_source, options, js, css4) {
+    function style_html(html_source, options, js, css3) {
       js = js || js_beautify;
-      css4 = css4 || css_beautify;
-      return html_beautify(html_source, options, js, css4);
+      css3 = css3 || css_beautify;
+      return html_beautify(html_source, options, js, css3);
     }
     style_html.defaultOptions = html_beautify.defaultOptions;
     module.exports.js = js_beautify;
@@ -6667,9 +6667,7 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
     pcb_viewer_id: `pcb_viewer_${Math.random().toString().slice(2, 10)}`,
     in_edit_mode: false,
     in_move_footprint_mode: false,
-    in_draw_trace_mode: false,
     is_moving_component: false,
-    is_drawing_trace: false,
     is_mouse_over_container: false,
     is_showing_multiple_traces_length: false,
     is_showing_rats_nest: false,
@@ -6715,13 +6713,10 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
     setEditMode: (mode) => set({
       in_edit_mode: mode !== "off",
       in_move_footprint_mode: mode === "move_footprint",
-      in_draw_trace_mode: mode === "draw_trace",
-      is_moving_component: false,
-      is_drawing_trace: false
+      is_moving_component: false
     }),
     setIsShowingRatsNest: (is_showing) => set({ is_showing_rats_nest: is_showing }),
     setIsMovingComponent: (is_moving) => set({ is_moving_component: is_moving }),
-    setIsDrawingTrace: (is_drawing) => set({ is_drawing_trace: is_drawing }),
     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 }),
@@ -6802,19 +6797,6 @@ import {
 } from "react-toastify";
 import { injectStyle } from "react-toastify/dist/inject-style";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var useToast = () => {
-  const pcb_viewer_id = useGlobalStore((s) => s.pcb_viewer_id);
-  const toast = (message, opts) => ogToast(message, {
-    containerId: pcb_viewer_id,
-    ...opts
-  });
-  toast.error = (message, opts) => ogToast.error(message, {
-    containerId: pcb_viewer_id,
-    ...opts
-  });
-  toast.promise = ogToast.promise;
-  return toast;
-};
 var ToastContainer = () => {
   useEffect(() => {
     injectStyle();
@@ -6824,7 +6806,7 @@ var ToastContainer = () => {
 };
 // src/PCBViewer.tsx
-import { useCallback as useCallback12, useEffect as useEffect20, useMemo as useMemo9, useRef as useRef16, useState as useState13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect18, useMemo as useMemo9, useRef as useRef15, useState as useState12 } from "react";
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -8621,7 +8603,7 @@ var animateTransform = ({
 };
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback11, useEffect as useEffect19, useMemo as useMemo8, useRef as useRef15, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo8, useRef as useRef14, useState as useState11 } from "react";
 // src/lib/Drawer.ts
 import colorParser from "color";
@@ -8884,7 +8866,6 @@ var scaleOnly = (mat, value = 1) => {
 var zIndexMap = {
   elementOverlay: 40,
   dimensionOverlay: 40,
-  editTraceHintOverlay: 40,
   errorOverlay: 40,
   pcbGroupOverlay: 35,
   ratsNestOverlay: 30,
@@ -9802,12 +9783,9 @@ var showTraceSegmentsInsideHiddenCopperPours = (trace) => ({
 });
 var getTraceClipContextElements = (elements, showCopperPours) => showCopperPours ? elements : [];
 var getHighlightedTraceElementIds = ({
-  primitives,
-  targetLayers,
-  selectedLayer
+  primitives
 }) => {
   const highlightedElementIds = /* @__PURE__ */ new Set();
-  if (!targetLayers.has(selectedLayer)) return highlightedElementIds;
   for (const primitive of primitives) {
     if ((primitive.is_mouse_over || primitive.is_in_highlighted_net) && primitive._element?.type === "pcb_trace") {
       highlightedElementIds.add(primitive._element.pcb_trace_id);
@@ -9819,7 +9797,6 @@ function drawPcbTraceElementsForLayer({
   canvas,
   elements,
   layers,
-  selectedLayer,
   realToCanvasMat,
   primitives,
   showCopperPours
@@ -9830,9 +9807,7 @@ function drawPcbTraceElementsForLayer({
   );
   if (traceElements.length === 0) return;
   const highlightedElementIds = getHighlightedTraceElementIds({
-    primitives: primitives ?? [],
-    targetLayers,
-    selectedLayer
+    primitives: primitives ?? []
   });
   const highlightedElements = [];
   const nonHighlightedElements = [];
@@ -10575,7 +10550,6 @@ var CanvasPrimitiveRenderer = ({
           canvas,
           elements,
           layers: [copperLayer],
-          selectedLayer,
           realToCanvasMat: transform,
           primitives,
           showCopperPours: isShowingCopperPours
@@ -12386,419 +12360,10 @@ var EditPlacementOverlay = ({
   );
 };
-// src/components/EditTraceHintOverlay.tsx
-import { Fragment as Fragment2, useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
-import {
-  applyToPoint as applyToPoint9,
-  identity as identity5,
-  inverse as inverse4
-} from "transformation-matrix";
-// src/components/HotkeyActionMenu.tsx
-import { css } from "@emotion/css";
-import { useEffect as useEffect9 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var HotkeyActionMenu = ({
-  hotkeys
-}) => {
-  useEffect9(() => {
-    const handleKeyDown = (event) => {
-      hotkeys.forEach((hotkey) => {
-        if (event.key === hotkey.key) {
-          hotkey.onUse();
-        }
-      });
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [hotkeys]);
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: css`
-        display: flex;
-        flex-direction: column;
-        font-family: sans-serif;
-        font-size: 12px;
-        margin: 8px;
-      `,
-      children: hotkeys.map((hotkey) => {
-        return /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            className: css`
-              display: flex;
-              align-items: center;
-              margin: 2px;
-              & .key {
-                padding: 1px;
-                margin: 2px;
-                color: rgba(255, 255, 255, 0.8);
-                font-size: 9px;
-                border-radius: 3px;
-                text-align: center;
-                width: 20px;
-                background-color: #444;
-              }
-              & .name {
-                margin-left: 4px;
-                color: rgba(255, 255, 255, 0.8);
-              }
-            `,
-            children: [
-              /* @__PURE__ */ jsx7("div", { className: "key", children: hotkey.key }),
-              " ",
-              /* @__PURE__ */ jsx7("div", { className: "name", children: hotkey.name })
-            ]
-          },
-          hotkey.name
-        );
-      })
-    }
-  );
-};
-// src/components/EditTraceHintOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var isInsideOfSmtpad = (elm, point, padding = 0) => {
-  if (elm.shape === "circle" || elm.shape === "polygon") {
-    return false;
-  }
-  const halfWidth = elm.width / 2;
-  const halfHeight = elm.height / 2;
-  const left = elm.x - halfWidth - padding;
-  const right = elm.x + halfWidth + padding;
-  const top = elm.y - halfHeight - padding;
-  const bottom = elm.y + halfHeight + padding;
-  return point.x > left && point.x < right && point.y > top && point.y < bottom;
-};
-var isInsideOfPlatedHole = (hole, point, padding = 0) => {
-  if (hole.shape === "circle") {
-    const distance3 = Math.sqrt(
-      (point.x - hole.x) ** 2 + (point.y - hole.y) ** 2
-    );
-    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);
-    if (dx < hole.rect_pad_width / 2 + padding && dy < hole.rect_pad_height / 2 + padding) {
-      return true;
-    }
-    return false;
-  } else if (hole.shape === "oval" || hole.shape === "pill") {
-    const halfWidth = hole.hole_width / 2;
-    const halfHeight = hole.hole_height / 2;
-    const left = hole.x - halfWidth - padding;
-    const right = hole.x + halfWidth + padding;
-    const top = hole.y - halfHeight - padding;
-    const bottom = hole.y + halfHeight + padding;
-    return point.x > left && point.x < right && point.y > top && point.y < bottom;
-  }
-  return false;
-};
-var EditTraceHintOverlay = ({
-  children,
-  disabled: disabledProp,
-  transform,
-  soup,
-  cancelPanDrag,
-  onCreateEditEvent,
-  onModifyEditEvent
-}) => {
-  if (!transform) transform = identity5();
-  const containerRef = useRef7(null);
-  const containerBounds = containerRef.current?.getBoundingClientRect();
-  const [selectedElement, setSelectedElement] = useState6(null);
-  const toast = useToast();
-  const [dragState, setDragState] = useState6(null);
-  const [shouldCreateAsVia, setShouldCreateAsVia] = useState6(false);
-  const isElementSelected = selectedElement !== null;
-  const in_edit_trace_mode = useGlobalStore((s) => s.in_draw_trace_mode);
-  const disabled = disabledProp || !in_edit_trace_mode;
-  let ogCenterScreen, dragEndScreen;
-  if (dragState?.originalCenter && dragState?.dragEnd) {
-    ogCenterScreen = applyToPoint9(transform, dragState?.originalCenter);
-    dragEndScreen = applyToPoint9(transform, dragState?.dragEnd);
-  }
-  useEffect10(() => {
-    if (!isElementSelected) return;
-    function keyDown(e) {
-      if (e.key === "Escape") {
-        setSelectedElement(null);
-        setDragState(null);
-      }
-    }
-    window.addEventListener("keydown", keyDown);
-    return () => window.removeEventListener("keydown", keyDown);
-  }, [isElementSelected]);
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      ref: containerRef,
-      style: {
-        position: "relative",
-        overflow: "hidden"
-      },
-      onMouseDown: (e) => {
-        if (disabled) return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint9(inverse4(transform), { x, y });
-        if (!isElementSelected) {
-          for (const e2 of soup) {
-            if (e2.type === "pcb_smtpad" && isInsideOfSmtpad(e2, rwMousePoint, 10 / transform.a) || e2.type === "pcb_plated_hole" && isInsideOfPlatedHole(e2, rwMousePoint, 10 / transform.a)) {
-              if (!e2.pcb_port_id) {
-                toast.error(`pcb_port_id is null on the selected "${e2.type}"`);
-                return;
-              }
-              const pcb_port = su(soup).pcb_port.get(e2.pcb_port_id);
-              if (!pcb_port) {
-                toast.error(
-                  `Could not find associated pcb_port for "${e2.pcb_port_id}"`
-                );
-                return;
-              }
-              setSelectedElement(e2);
-              setShouldCreateAsVia(false);
-              setDragState({
-                dragStart: rwMousePoint,
-                originalCenter: { x: pcb_port.x, y: pcb_port.y },
-                dragEnd: rwMousePoint,
-                editEvent: {
-                  pcb_edit_event_type: "edit_trace_hint",
-                  pcb_port_id: e2.pcb_port_id,
-                  pcb_trace_hint_id: Math.random().toString(),
-                  route: [],
-                  created_at: Date.now(),
-                  edit_event_id: Math.random().toString(),
-                  in_progress: true
-                },
-                shouldDrawRouteHint: false
-              });
-              cancelPanDrag();
-              break;
-            }
-          }
-        } else {
-          setDragState({
-            ...dragState,
-            dragStart: rwMousePoint,
-            shouldDrawRouteHint: true
-          });
-        }
-      },
-      onMouseMove: (e) => {
-        if (!isElementSelected || !dragState) return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint9(inverse4(transform), { x, y });
-        setDragState({
-          ...dragState,
-          dragEnd: rwMousePoint
-        });
-      },
-      onMouseUp: (e) => {
-        if (!isElementSelected) return;
-        if (!dragState?.shouldDrawRouteHint) return;
-        const { dragStart, dragEnd } = dragState;
-        const rwDist = Math.sqrt(
-          (dragEnd.x - dragStart.x) ** 2 + (dragEnd.y - dragStart.y) ** 2
-        );
-        const screenDist = rwDist * transform.a;
-        if (screenDist > 20) return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint9(inverse4(transform), { x, y });
-        if (dragState) {
-          cancelPanDrag();
-          const lastPointScreen = applyToPoint9(
-            transform,
-            dragState.editEvent.route.slice(-1)[0] ?? dragState.originalCenter
-          );
-          const distanceFromLastPoint = Math.sqrt(
-            (x - lastPointScreen.x) ** 2 + (y - lastPointScreen.y) ** 2
-          );
-          if (distanceFromLastPoint < 20) {
-            onCreateEditEvent({
-              ...dragState.editEvent,
-              in_progress: false
-            });
-            setDragState(null);
-            setSelectedElement(null);
-            return;
-          }
-          setDragState({
-            ...dragState,
-            editEvent: {
-              ...dragState.editEvent,
-              route: [
-                ...dragState.editEvent.route,
-                { ...rwMousePoint, via: shouldCreateAsVia }
-              ]
-            }
-          });
-        }
-      },
-      children: [
-        children,
-        in_edit_trace_mode && dragState?.editEvent && ogCenterScreen && dragEndScreen && /* @__PURE__ */ jsxs6(
-          "svg",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              pointerEvents: "none",
-              mixBlendMode: "difference",
-              zIndex: zIndexMap.editTraceHintOverlay
-            },
-            width: containerBounds?.width,
-            height: containerBounds?.height,
-            children: [
-              /* @__PURE__ */ jsx8(
-                "path",
-                {
-                  stroke: "red",
-                  d: `M ${ogCenterScreen.x} ${ogCenterScreen.y} ${dragState?.editEvent.route.map((p) => applyToPoint9(transform, p)).map((p) => `L ${p.x} ${p.y}`).join(" ")} L ${dragEndScreen.x} ${dragEndScreen.y}`
-                }
-              ),
-              dragState?.editEvent.route.map((r, i) => {
-                const rScreen = applyToPoint9(transform, r);
-                return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                  r.via && /* @__PURE__ */ jsx8("circle", { cx: rScreen.x, cy: rScreen.y, r: 16, stroke: "red" }),
-                  /* @__PURE__ */ jsx8("circle", { cx: rScreen.x, cy: rScreen.y, r: 8, stroke: "red" })
-                ] }, `r-${i}`);
-              }),
-              shouldCreateAsVia && /* @__PURE__ */ jsx8(
-                "circle",
-                {
-                  cx: dragEndScreen.x,
-                  cy: dragEndScreen.y,
-                  r: 16,
-                  stroke: "red"
-                },
-                "via-outer-circle"
-              ),
-              /* @__PURE__ */ jsx8(
-                "circle",
-                {
-                  cx: dragEndScreen.x,
-                  cy: dragEndScreen.y,
-                  r: 8,
-                  stroke: "red"
-                }
-              )
-            ]
-          }
-        ),
-        !disabled && /* @__PURE__ */ jsx8(
-          "svg",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              pointerEvents: "none",
-              mixBlendMode: "difference",
-              zIndex: zIndexMap.editTraceHintOverlay
-            },
-            width: containerBounds?.width,
-            height: containerBounds?.height,
-            children: soup.filter((e) => e.type === "pcb_trace_hint").map((e) => {
-              const { route } = e;
-              const pcb_port = su(soup).pcb_port.get(e.pcb_port_id);
-              const pcb_port_screen = applyToPoint9(transform, pcb_port);
-              return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                /* @__PURE__ */ jsx8(
-                  "rect",
-                  {
-                    x: pcb_port_screen.x - 10,
-                    y: pcb_port_screen.y - 10,
-                    width: 20,
-                    height: 20,
-                    stroke: "red"
-                  },
-                  `rect-${e.pcb_port_id}`
-                ),
-                /* @__PURE__ */ jsx8(
-                  "path",
-                  {
-                    stroke: "red",
-                    d: `M ${pcb_port_screen.x} ${pcb_port_screen.y} ${route.map((r) => applyToPoint9(transform, r)).map((r) => `L ${r.x} ${r.y}`).join(" ")}`
-                  },
-                  `path-${e.pcb_port_id}`
-                ),
-                route.map((r) => ({ ...r, ...applyToPoint9(transform, r) })).map((r, i) => /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                  /* @__PURE__ */ jsx8("circle", { cx: r.x, cy: r.y, r: 8, stroke: "red" }),
-                  r.via && /* @__PURE__ */ jsx8(
-                    "circle",
-                    {
-                      cx: r.x,
-                      cy: r.y,
-                      r: 16,
-                      stroke: "red",
-                      fill: "transparent"
-                    }
-                  )
-                ] }, i))
-              ] }, e.pcb_trace_hint_id);
-            })
-          },
-          "pcb-trace-hints"
-        ),
-        /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              right: 0,
-              bottom: 0
-            },
-            children: isElementSelected && /* @__PURE__ */ jsx8(
-              HotkeyActionMenu,
-              {
-                hotkeys: [
-                  {
-                    key: "v",
-                    name: "Toggle Via",
-                    onUse: () => {
-                      setShouldCreateAsVia(!shouldCreateAsVia);
-                    }
-                  }
-                  // {
-                  //   key: "del",
-                  //   name: "Delete Node",
-                  //   onUse: () => {},
-                  // },
-                  // {
-                  //   key: "r",
-                  //   name: "Delete Route",
-                  //   onUse: () => {},
-                  // },
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
 // src/components/ErrorOverlay.tsx
-import { useRef as useRef8, Fragment as Fragment3 } from "react";
-import { css as css2 } from "@emotion/css";
-import { applyToPoint as applyToPoint10, identity as identity6 } from "transformation-matrix";
+import { useRef as useRef7, Fragment as Fragment2 } from "react";
+import { css } from "@emotion/css";
+import { applyToPoint as applyToPoint9, identity as identity5 } from "transformation-matrix";
 // src/lib/util/getPopupPosition.ts
 var getPopupPosition = (errorCenter, containerRef) => {
@@ -12835,10 +12400,10 @@ var getPopupPosition = (errorCenter, containerRef) => {
 };
 // src/components/FocusMarkerSVG.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FocusMarkerSVG = ({
   center
-}) => /* @__PURE__ */ jsxs7(
+}) => /* @__PURE__ */ jsxs5(
   "svg",
   {
     style: {
@@ -12852,7 +12417,7 @@ var FocusMarkerSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "circle",
         {
           cx: center.x,
@@ -12864,8 +12429,8 @@ var FocusMarkerSVG = ({
           opacity: 0.95
         }
       ),
-      /* @__PURE__ */ jsx9("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x - 18,
@@ -12876,7 +12441,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x + 8,
@@ -12887,7 +12452,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x,
@@ -12898,7 +12463,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x,
@@ -12914,11 +12479,11 @@ var FocusMarkerSVG = ({
 );
 // src/components/ErrorOverlay.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var ErrorMarkerSVG = ({
   errorCenter,
   isHighlighted = false
-}) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx8(
   "svg",
   {
     style: {
@@ -12931,7 +12496,7 @@ var ErrorMarkerSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: /* @__PURE__ */ jsx10(
+    children: /* @__PURE__ */ jsx8(
       "rect",
       {
         x: errorCenter.x - 7,
@@ -12946,7 +12511,7 @@ var ErrorMarkerSVG = ({
     )
   }
 );
-var errorMessageStyles = css2`
+var errorMessageStyles = css`
   opacity: 0;
   pointer-events: none;
   background-color: rgba(0, 0, 0, 0.8);
@@ -12962,10 +12527,10 @@ var errorMessageStyles = css2`
 `;
 var ErrorOverlay = ({
   children,
-  transform = identity6(),
+  transform = identity5(),
   elements
 }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef7(null);
   const { isShowingDRCErrors, hoveredErrorId, focusedErrorId } = useGlobalStore(
     (state) => ({
       isShowingDRCErrors: state.is_showing_drc_errors,
@@ -12975,7 +12540,7 @@ var ErrorOverlay = ({
   );
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
   if (!elements) {
-    return /* @__PURE__ */ jsx10("div", { style: { position: "relative" }, ref: containerRef, children });
+    return /* @__PURE__ */ jsx8("div", { style: { position: "relative" }, ref: containerRef, children });
   }
   const traceErrors = elements.filter(
     (el) => el.type === "pcb_trace_error" && !el.message?.includes("Multiple components found with name")
@@ -12996,7 +12561,7 @@ var ErrorOverlay = ({
     if (!focusCenter || typeof focusCenter.x !== "number" || typeof focusCenter.y !== "number") {
       return null;
     }
-    const screenCenter = applyToPoint10(transform, focusCenter);
+    const screenCenter = applyToPoint9(transform, focusCenter);
     if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y)) {
       return null;
     }
@@ -13008,7 +12573,7 @@ var ErrorOverlay = ({
       focusedErrorElement
     );
   }
-  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     traceErrors.map((el, index) => {
       const errorId = getErrorId(el, index);
@@ -13017,15 +12582,15 @@ var ErrorOverlay = ({
       const errorCenter = getScreenErrorCenter(el);
       if (!errorCenter) return null;
       const popupPosition = getPopupPosition(errorCenter, containerRef);
-      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13060,7 +12625,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13078,7 +12643,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -13103,15 +12668,15 @@ var ErrorOverlay = ({
         { x: errorCenter.x, y: errorCenter.y },
         containerRef
       );
-      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13146,7 +12711,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13164,7 +12729,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -13201,7 +12766,7 @@ var ErrorOverlay = ({
           if (pcbComp && pcbComp.type === "pcb_component")
             center = pcbComp.center || { x: 0, y: 0 };
         }
-        const screenCenter = applyToPoint10(transform, center);
+        const screenCenter = applyToPoint9(transform, center);
         if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y))
           return null;
         const scale7 = Math.abs(transform.a);
@@ -13213,8 +12778,8 @@ var ErrorOverlay = ({
           Math.min(maxRadius, baseRadius * scale7)
         );
         const popupPosition = getPopupPosition(screenCenter, containerRef);
-        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx8(
             "svg",
             {
               style: {
@@ -13227,13 +12792,13 @@ var ErrorOverlay = ({
               },
               width: "100%",
               height: "100%",
-              children: isHighlighted ? /* @__PURE__ */ jsx10(
+              children: isHighlighted ? /* @__PURE__ */ jsx8(
                 "polygon",
                 {
                   points: `${screenCenter.x},${screenCenter.y - scaledRadius * 1.25} ${screenCenter.x + scaledRadius},${screenCenter.y} ${screenCenter.x},${screenCenter.y + scaledRadius * 1.25} ${screenCenter.x - scaledRadius},${screenCenter.y}`,
                   fill: "#ff4444"
                 }
-              ) : /* @__PURE__ */ jsx10(
+              ) : /* @__PURE__ */ jsx8(
                 "circle",
                 {
                   cx: screenCenter.x,
@@ -13247,7 +12812,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -13282,7 +12847,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -13300,7 +12865,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -13316,7 +12881,7 @@ var ErrorOverlay = ({
         ] }, `${errorId}_${compIndex}`);
       });
     }),
-    focusScreenCenter && /* @__PURE__ */ jsx10(FocusMarkerSVG, { center: focusScreenCenter })
+    focusScreenCenter && /* @__PURE__ */ jsx8(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
@@ -13331,8 +12896,8 @@ function ifSetsMatchExactly(set1, set2) {
 }
 // src/components/MouseElementTracker.tsx
-import { useEffect as useEffect12, useMemo as useMemo5, useState as useState8 } from "react";
-import { applyToPoint as applyToPoint13, inverse as inverse5 } from "transformation-matrix";
+import { useEffect as useEffect10, useMemo as useMemo5, useState as useState7 } from "react";
+import { applyToPoint as applyToPoint12, inverse as inverse4 } from "transformation-matrix";
 // src/components/AnchorOffsetOverlay/common/guards.ts
 var isPcbComponent = (element) => element?.type === "pcb_component";
@@ -13341,7 +12906,7 @@ var isPcbPanel = (element) => element?.type === "pcb_panel";
 var isPcbBoard = (element) => element?.type === "pcb_board";
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
 // src/components/AnchorOffsetOverlay/common/constants.ts
 var VISUAL_CONFIG = {
@@ -13367,7 +12932,7 @@ var COLORS = {
 };
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var AnchorOffsetOverlay = ({
   targets,
   transform,
@@ -13386,11 +12951,11 @@ var AnchorOffsetOverlay = ({
   const anchorScreens = /* @__PURE__ */ new Map();
   targets.forEach((target) => {
     if (!anchorScreens.has(target.anchor_id)) {
-      const screenPoint = applyToPoint11(transform, target.anchor);
+      const screenPoint = applyToPoint10(transform, target.anchor);
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       style: {
@@ -13403,7 +12968,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs7(
         "svg",
         {
           style: {
@@ -13420,7 +12985,7 @@ var AnchorOffsetOverlay = ({
               const anchorKey = target.anchor_id;
               const targetCenter = target.target;
               const anchorMarkerScreen = anchorScreens.get(anchorKey);
-              const targetScreen = applyToPoint11(transform, targetCenter);
+              const targetScreen = applyToPoint10(transform, targetCenter);
               const offsetX = targetCenter.x - anchorPosition.x;
               const offsetY = targetCenter.y - anchorPosition.y;
               const xLineLength = Math.abs(targetScreen.x - anchorMarkerScreen.x);
@@ -13433,8 +12998,8 @@ var AnchorOffsetOverlay = ({
               const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
               const xLabelText = `${target.display_offset_x ?? offsetX.toFixed(2)}mm`;
               const yLabelText = `${target.display_offset_y ?? offsetY.toFixed(2)}mm`;
-              return /* @__PURE__ */ jsxs9("g", { children: [
-                /* @__PURE__ */ jsx11(
+              return /* @__PURE__ */ jsxs7("g", { children: [
+                /* @__PURE__ */ jsx9(
                   "line",
                   {
                     x1: anchorMarkerScreen.x,
@@ -13446,7 +13011,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx9(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -13458,7 +13023,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx11(
+                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx9(
                   "circle",
                   {
                     cx: targetScreen.x,
@@ -13470,8 +13035,8 @@ var AnchorOffsetOverlay = ({
                   }
                 ) : (
                   // assumes "group"
-                  /* @__PURE__ */ jsxs9(Fragment4, { children: [
-                    /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsxs7(Fragment3, { children: [
+                    /* @__PURE__ */ jsx9(
                       "line",
                       {
                         x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -13482,7 +13047,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsx9(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -13495,7 +13060,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx11(
+                shouldShowXLabel && /* @__PURE__ */ jsx9(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -13503,10 +13068,10 @@ var AnchorOffsetOverlay = ({
                     width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
                     height: 20,
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx11("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                    children: /* @__PURE__ */ jsx9("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
                   }
                 ),
-                shouldShowYLabel && /* @__PURE__ */ jsx11(
+                shouldShowYLabel && /* @__PURE__ */ jsx9(
                   "foreignObject",
                   {
                     x: targetScreen.x + yLabelOffset,
@@ -13514,7 +13079,7 @@ var AnchorOffsetOverlay = ({
                     width: VISUAL_CONFIG.Y_LABEL_MIN_WIDTH,
                     height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx11(
+                    children: /* @__PURE__ */ jsx9(
                       "div",
                       {
                         style: {
@@ -13533,8 +13098,8 @@ var AnchorOffsetOverlay = ({
                 )
               ] }, target.id);
             }),
-            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs9("g", { children: [
-              /* @__PURE__ */ jsx11(
+            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs7("g", { children: [
+              /* @__PURE__ */ jsx9(
                 "line",
                 {
                   x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -13545,7 +13110,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx9(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -13565,7 +13130,7 @@ var AnchorOffsetOverlay = ({
 };
 // src/components/AnchorOffsetOverlay/BoardAnchorOffsetOverlay.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var BoardAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13652,7 +13217,7 @@ var BoardAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx10(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -13664,7 +13229,7 @@ var BoardAnchorOffsetOverlay = ({
 };
 // src/components/AnchorOffsetOverlay/GroupAnchorOffsetOverlay.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13780,7 +13345,7 @@ var GroupAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx11(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -13792,8 +13357,8 @@ var GroupAnchorOffsetOverlay = ({
 };
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
   const padsAndHoles = elements.filter(
@@ -13836,7 +13401,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -13849,18 +13414,18 @@ var ComponentBoundingBoxOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx12(
         "svg",
         {
           style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
           width: containerWidth,
           height: containerHeight,
           children: renderData.map(({ component, bbox, group }) => {
-            const topLeft = applyToPoint12(transform, {
+            const topLeft = applyToPoint11(transform, {
               x: bbox.minX,
               y: bbox.maxY
             });
-            const bottomRight = applyToPoint12(transform, {
+            const bottomRight = applyToPoint11(transform, {
               x: bbox.maxX,
               y: bbox.minY
             });
@@ -13874,9 +13439,9 @@ var ComponentBoundingBoxOverlay = ({
               x: (bbox.minX + bbox.maxX) / 2,
               y: (bbox.minY + bbox.maxY) / 2
             };
-            const componentCenterScreen = applyToPoint12(transform, componentCenter);
-            return /* @__PURE__ */ jsxs10("g", { children: [
-              /* @__PURE__ */ jsx14(
+            const componentCenterScreen = applyToPoint11(transform, componentCenter);
+            return /* @__PURE__ */ jsxs8("g", { children: [
+              /* @__PURE__ */ jsx12(
                 "rect",
                 {
                   x: screenBbox.x,
@@ -13889,7 +13454,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -13900,7 +13465,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -13911,7 +13476,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -13931,7 +13496,7 @@ var ComponentBoundingBoxOverlay = ({
 };
 // src/components/AnchorOffsetOverlay/PanelAnchorOffsetOverlay.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var PanelAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13980,7 +13545,7 @@ var PanelAnchorOffsetOverlay = ({
       display_offset_y: target.board.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx13(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -14069,8 +13634,8 @@ function filterTracesIfMultiple(filterTraces) {
 }
 // src/components/ElementOverlayBox.tsx
-import { useEffect as useEffect11, useState as useState7 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState6 } from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var containerStyle = {
   position: "absolute",
   left: 0,
@@ -14133,9 +13698,9 @@ var HighlightedPrimitiveBoxWithText = ({
   mousePos,
   elements
 }) => {
-  const [finalState, setFinalState] = useState7(false);
+  const [finalState, setFinalState] = useState6(false);
   const primitiveElement = primitive._element;
-  useEffect11(() => {
+  useEffect9(() => {
     setTimeout(() => {
       setFinalState(true);
     }, 100);
@@ -14161,7 +13726,7 @@ var HighlightedPrimitiveBoxWithText = ({
     const traceTextContext = { primitiveElement, elements };
     const overlayInfo = getTraceOverlayInfo(traceTextContext);
     if (!overlayInfo) return null;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         style: {
@@ -14172,7 +13737,7 @@ var HighlightedPrimitiveBoxWithText = ({
           color: color7,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsxs11(
+        children: /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -14189,8 +13754,8 @@ var HighlightedPrimitiveBoxWithText = ({
               whiteSpace: "nowrap"
             },
             children: [
-              overlayInfo.text && /* @__PURE__ */ jsx16("div", { children: overlayInfo.text }),
-              overlayInfo.name && /* @__PURE__ */ jsx16(
+              overlayInfo.text && /* @__PURE__ */ jsx14("div", { children: overlayInfo.text }),
+              overlayInfo.name && /* @__PURE__ */ jsx14(
                 "div",
                 {
                   style: {
@@ -14209,7 +13774,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -14223,7 +13788,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx14(
         "div",
         {
           style: {
@@ -14239,7 +13804,7 @@ var HighlightedPrimitiveBoxWithText = ({
             opacity: finalState ? 1 : si === 0 ? 1 : 0,
             transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
           },
-          children: /* @__PURE__ */ jsx16(
+          children: /* @__PURE__ */ jsx14(
             "div",
             {
               style: {
@@ -14287,7 +13852,7 @@ var ElementOverlayBox = ({
     is_showing_multiple_traces_length,
     elements
   });
-  return /* @__PURE__ */ jsx16("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx14(
     HighlightedPrimitiveBoxWithText,
     {
       primitive,
@@ -14299,7 +13864,7 @@ var ElementOverlayBox = ({
 };
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -14415,10 +13980,10 @@ var MouseElementTracker = ({
   selectedLayer,
   onMouseHoverOverPrimitives
 }) => {
-  const [mousedPrimitives, setMousedPrimitives] = useState8([]);
-  const [mousePos, setMousePos] = useState8({ x: 0, y: 0 });
+  const [mousedPrimitives, setMousedPrimitives] = useState7([]);
+  const [mousePos, setMousePos] = useState7({ x: 0, y: 0 });
   const [containerRef, { width, height }] = useMeasure_default();
-  useEffect12(() => {
+  useEffect10(() => {
     setMousedPrimitives([]);
     onMouseHoverOverPrimitives([]);
   }, [selectedLayer, onMouseHoverOverPrimitives]);
@@ -14461,7 +14026,7 @@ var MouseElementTracker = ({
         h = "h" in primitive ? primitive.h : "r" in primitive ? primitive.r * 2 : "rX" in primitive && "rY" in primitive ? primitive.rY * 2 : 0;
       }
       if (!basePoint) continue;
-      const screenPos = applyToPoint13(transform, basePoint);
+      const screenPos = applyToPoint12(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -14486,7 +14051,7 @@ var MouseElementTracker = ({
   }, [mousedPrimitives, transform]);
   const handleInteraction = (x, y, transform2, primitives2) => {
     setMousePos({ x, y });
-    const rwPoint = applyToPoint13(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint12(inverse4(transform2), { x, y });
     const newMousedPrimitives = getPrimitivesUnderPoint(
       primitives2,
       rwPoint,
@@ -14502,7 +14067,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: containerRef,
@@ -14526,7 +14091,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx15(
           ElementOverlayBox,
           {
             elements,
@@ -14534,8 +14099,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs12(Fragment5, { children: [
-          /* @__PURE__ */ jsx17(
+        transform && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          /* @__PURE__ */ jsx15(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -14545,7 +14110,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -14555,7 +14120,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -14565,7 +14130,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -14582,10 +14147,10 @@ var MouseElementTracker = ({
 };
 // src/components/PcbGroupOverlay.tsx
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-import { identity as identity7 } from "transformation-matrix";
-import { useRef as useRef9, useEffect as useEffect13 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { identity as identity6 } from "transformation-matrix";
+import { useRef as useRef8, useEffect as useEffect11 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -14600,12 +14165,12 @@ var GROUP_COLORS = [
 ];
 var PcbGroupOverlay = ({
   children,
-  transform = identity7(),
+  transform = identity6(),
   elements = [],
   hoveredComponentIds = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef9(null);
+  const canvasRef = useRef8(null);
   const {
     is_showing_pcb_groups,
     pcb_group_view_mode,
@@ -14615,7 +14180,7 @@ var PcbGroupOverlay = ({
     pcb_group_view_mode: s.pcb_group_view_mode,
     is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets
   }));
-  useEffect13(() => {
+  useEffect11(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -14743,10 +14308,10 @@ var PcbGroupOverlay = ({
         minY -= totalPadding;
         maxY += totalPadding;
       }
-      const topLeft = applyToPoint14(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint14(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint14(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint14(transform, { x: maxX, y: minY });
+      const topLeft = 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 groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
       ctx.strokeStyle = groupColor;
       ctx.lineWidth = 2;
@@ -14796,7 +14361,7 @@ var PcbGroupOverlay = ({
           x: group.anchor_position[0] ?? 0,
           y: group.anchor_position[1] ?? 0
         } : { x: group.anchor_position.x, y: group.anchor_position.y };
-        const anchorScreenPos = applyToPoint14(transform, anchorPositionValue);
+        const anchorScreenPos = applyToPoint13(transform, anchorPositionValue);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -14821,14 +14386,14 @@ var PcbGroupOverlay = ({
     is_showing_group_anchor_offsets,
     hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx16(
           "canvas",
           {
             ref: canvasRef,
@@ -14848,9 +14413,9 @@ var PcbGroupOverlay = ({
 };
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint15, identity as identity8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14, identity as identity7 } from "transformation-matrix";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, 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(
@@ -14912,10 +14477,10 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
     return lines;
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
-  if (!transform) transform = identity8();
-  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
+  if (!transform) transform = identity7();
+  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx17(
       "svg",
       {
         style: {
@@ -14929,9 +14494,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint15(transform, startPoint);
-          const transformedEnd = applyToPoint15(transform, endPoint);
-          return /* @__PURE__ */ jsx19(
+          const transformedStart = applyToPoint14(transform, startPoint);
+          const transformedEnd = applyToPoint14(transform, endPoint);
+          return /* @__PURE__ */ jsx17(
             "line",
             {
               x1: transformedStart.x,
@@ -14952,18 +14517,18 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 // src/components/ToolbarOverlay.tsx
 import {
-  useEffect as useEffect17,
-  useState as useState11,
+  useEffect as useEffect15,
+  useState as useState10,
   useCallback as useCallback10,
-  useRef as useRef13,
+  useRef as useRef12,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { css as css3 } from "@emotion/css";
+import { css as css2 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.386",
+  version: "1.11.388",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -15028,20 +14593,20 @@ var package_default = {
 };
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect14, useRef as useRef10 } from "react";
+import { useEffect as useEffect12, useRef as useRef9 } from "react";
 var useHotKey = (key, onUse, containerRef) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
-  const isMouseOverContainerRef = useRef10(isMouseOverContainer);
-  const onUseRef = useRef10(onUse);
-  useEffect14(() => {
+  const isMouseOverContainerRef = useRef9(isMouseOverContainer);
+  const onUseRef = useRef9(onUse);
+  useEffect12(() => {
     isMouseOverContainerRef.current = isMouseOverContainer;
   }, [isMouseOverContainer]);
-  useEffect14(() => {
+  useEffect12(() => {
     onUseRef.current = onUse;
   }, [onUse]);
-  useEffect14(() => {
+  useEffect12(() => {
     if (!key) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -15069,10 +14634,10 @@ var useHotKey = (key, onUse, containerRef) => {
 };
 // src/hooks/useIsSmallScreen.ts
-import { useEffect as useEffect15, useState as useState9 } from "react";
+import { useEffect as useEffect13, useState as useState8 } from "react";
 var useIsSmallScreen = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState9(false);
-  useEffect15(() => {
+  const [isSmallScreen, setIsSmallScreen] = useState8(false);
+  useEffect13(() => {
     const checkIsMobile = () => {
       setIsSmallScreen(window.innerWidth <= 768);
     };
@@ -15086,10 +14651,10 @@ var useIsSmallScreen = () => {
 // src/hooks/useMobileTouch.ts
 import {
   useCallback as useCallback7,
-  useRef as useRef11
+  useRef as useRef10
 } from "react";
 var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
-  const lastInteractionRef = useRef11(0);
+  const lastInteractionRef = useRef10(0);
   const handleInteraction = useCallback7(
     (e) => {
       if (options.stopPropagation) {
@@ -15118,7 +14683,7 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
 };
 // src/components/ToolbarButton.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -15126,7 +14691,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ...props,
@@ -15154,7 +14719,7 @@ var ToolbarButton = ({
 };
 // src/components/ToolbarErrorDropdown.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo7, useState as useState9 } from "react";
 // src/lib/util/group-errors-by-type.ts
 var groupErrorsByType = (errors) => {
@@ -15176,16 +14741,16 @@ var groupErrorsByType = (errors) => {
 };
 // src/components/useToolbarErrorFocus.ts
-import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef11 } from "react";
 var useToolbarErrorFocus = ({
   onClose,
   setHoveredErrorId,
   setFocusedErrorId,
   highlightDurationMs = 3e3
 }) => {
-  const clearHighlightTimeoutRef = useRef12(null);
-  const focusRequestRef = useRef12(null);
-  const selectedErrorIdRef = useRef12(null);
+  const clearHighlightTimeoutRef = useRef11(null);
+  const focusRequestRef = useRef11(null);
+  const selectedErrorIdRef = useRef11(null);
   const clearPendingSelection = useCallback8(() => {
     if (clearHighlightTimeoutRef.current !== null) {
       window.clearTimeout(clearHighlightTimeoutRef.current);
@@ -15196,7 +14761,7 @@ var useToolbarErrorFocus = ({
       focusRequestRef.current = null;
     }
   }, []);
-  useEffect16(() => clearPendingSelection, [clearPendingSelection]);
+  useEffect14(() => clearPendingSelection, [clearPendingSelection]);
   const handleErrorSelect = useCallback8(
     (errorId) => {
       clearPendingSelection();
@@ -15234,7 +14799,7 @@ var useToolbarErrorFocus = ({
 };
 // src/components/ToolbarErrorDropdown.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var CopyErrorButton = ({
   errorId,
   errorMessage,
@@ -15244,7 +14809,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -15264,7 +14829,7 @@ var CopyErrorButton = ({
         ...touchStyle
       },
       ...touchHandlers,
-      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx21("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx21("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
+      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx19("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx19("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx19("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
     }
   );
 };
@@ -15277,11 +14842,11 @@ var ToolbarErrorDropdown = ({
   setHoveredErrorId,
   setFocusedErrorId
 }) => {
-  const [copiedErrorId, setCopiedErrorId] = useState10(null);
-  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
+  const [copiedErrorId, setCopiedErrorId] = useState9(null);
+  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState9(
     /* @__PURE__ */ new Set()
   );
-  const [expandedErrorIds, setExpandedErrorIds] = useState10(
+  const [expandedErrorIds, setExpandedErrorIds] = useState9(
     /* @__PURE__ */ new Set()
   );
   const [, copyToClipboard] = useCopyToClipboard_default();
@@ -15323,20 +14888,20 @@ var ToolbarErrorDropdown = ({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxs15("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx19(
       ToolbarButton,
       {
         isSmallScreen,
         style: errorCount > 0 ? { color: "red" } : void 0,
         onClick: onToggle,
-        children: /* @__PURE__ */ jsxs15("div", { children: [
+        children: /* @__PURE__ */ jsxs13("div", { children: [
           errorCount,
           " errors"
         ] })
       }
     ),
-    isOpen && errorCount > 0 && /* @__PURE__ */ jsx21(
+    isOpen && errorCount > 0 && /* @__PURE__ */ jsx19(
       "div",
       {
         style: {
@@ -15356,14 +14921,14 @@ var ToolbarErrorDropdown = ({
         },
         children: groupedErrorElements.map(({ errorType, errors }, groupIndex) => {
           const isGroupCollapsed = collapsedErrorGroups.has(errorType);
-          return /* @__PURE__ */ jsxs15(
+          return /* @__PURE__ */ jsxs13(
             "div",
             {
               style: {
                 borderBottom: groupIndex < groupedErrorElements.length - 1 ? "1px solid #444" : "none"
               },
               children: [
-                /* @__PURE__ */ jsxs15(
+                /* @__PURE__ */ jsxs13(
                   "div",
                   {
                     style: {
@@ -15400,7 +14965,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs15(
+                      /* @__PURE__ */ jsxs13(
                         "div",
                         {
                           style: {
@@ -15410,7 +14975,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx19(
                               "div",
                               {
                                 style: {
@@ -15423,7 +14988,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx19(
                               "div",
                               {
                                 style: {
@@ -15436,7 +15001,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx19(
                         "div",
                         {
                           style: {
@@ -15454,14 +15019,14 @@ var ToolbarErrorDropdown = ({
                 !isGroupCollapsed && errors.map(({ error, index, errorId }) => {
                   const isExpanded = expandedErrorIds.has(errorId);
                   const errorMessage = error.message ?? "No error message";
-                  return /* @__PURE__ */ jsxs15(
+                  return /* @__PURE__ */ jsxs13(
                     "div",
                     {
                       style: {
                         borderTop: "1px solid #3a3a3a"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs15(
+                        /* @__PURE__ */ jsxs13(
                           "div",
                           {
                             style: {
@@ -15500,7 +15065,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "div",
                                 {
                                   style: {
@@ -15516,7 +15081,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "button",
                                 {
                                   type: "button",
@@ -15548,7 +15113,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs15(
+                        isExpanded && /* @__PURE__ */ jsxs13(
                           "div",
                           {
                             "data-error-id": index,
@@ -15560,7 +15125,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "div",
                                 {
                                   style: {
@@ -15578,7 +15143,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -15610,13 +15175,13 @@ var ToolbarErrorDropdown = ({
 };
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: css3`
+      className: css2`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -15630,8 +15195,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx20(
           "span",
           {
             style: {
@@ -15652,10 +15217,10 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: css3`
+      className: css2`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -15672,19 +15237,19 @@ var CheckboxMenuItem = ({
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx20("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: css3`
+      className: css2`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -15701,9 +15266,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx20("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -15767,12 +15332,12 @@ var ToolbarOverlay = ({ children, elements }) => {
     setHoveredErrorId: s.setHoveredErrorId,
     setFocusedErrorId: s.setFocusedErrorId
   }));
-  const [isViewMenuOpen, setViewMenuOpen] = useState11(false);
-  const [isLayerMenuOpen, setLayerMenuOpen] = useState11(false);
-  const [isErrorsOpen, setErrorsOpen] = useState11(false);
-  const [measureToolArmed, setMeasureToolArmed] = useState11(false);
-  const [boundsToolArmed, setBoundsToolArmed] = useState11(false);
-  useEffect17(() => {
+  const [isViewMenuOpen, setViewMenuOpen] = useState10(false);
+  const [isLayerMenuOpen, setLayerMenuOpen] = useState10(false);
+  const [isErrorsOpen, setErrorsOpen] = useState10(false);
+  const [measureToolArmed, setMeasureToolArmed] = useState10(false);
+  const [boundsToolArmed, setBoundsToolArmed] = useState10(false);
+  useEffect15(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     const armBounds = () => setBoundsToolArmed(true);
@@ -15790,8 +15355,8 @@ var ToolbarOverlay = ({ children, elements }) => {
   }, []);
   const availableLayers = getCopperLayerRefsFromElements(elements ?? []);
   const processedLayers = availableLayers;
-  const hasRunInitialMouseCheck = useRef13(false);
-  const hotkeyBoundaryRef = useRef13(null);
+  const hasRunInitialMouseCheck = useRef12(false);
+  const hotkeyBoundaryRef = useRef12(null);
   const hotKeyCallbacks = {
     "1": availableLayers[0] ? () => selectLayer(availableLayers[0]) : () => {
     },
@@ -15898,7 +15463,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     },
     []
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -15908,7 +15473,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -15929,7 +15494,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -15960,7 +15525,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs14(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -15971,10 +15536,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         "span",
                         {
                           style: {
@@ -15986,7 +15551,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx22("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx22(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx20("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx20(
                       LayerButton,
                       {
                         name: layer,
@@ -16000,7 +15565,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -16012,43 +15577,43 @@ var ToolbarOverlay = ({ children, elements }) => {
                   setFocusedErrorId
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs16("div", { children: [
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx22("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx20("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: boundsToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleBoundsToolClick,
-                  children: /* @__PURE__ */ jsx22("div", { children: "Bounds" })
+                  children: /* @__PURE__ */ jsx20("div", { children: "Bounds" })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs16("div", { children: [
-                    /* @__PURE__ */ jsxs16(
+                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsxs14(
                       "div",
                       {
                         style: {
@@ -16058,7 +15623,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx22(
+                          /* @__PURE__ */ jsx20(
                             "span",
                             {
                               style: {
@@ -16073,8 +15638,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx22(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs14("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -16086,7 +15651,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -16098,7 +15663,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -16108,7 +15673,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -16120,7 +15685,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -16130,7 +15695,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -16140,7 +15705,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -16150,7 +15715,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -16162,7 +15727,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -16172,7 +15737,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -16184,7 +15749,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -16194,8 +15759,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs16("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx22(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs14("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx20(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -16205,7 +15770,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx22(
+                        /* @__PURE__ */ jsx20(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -16229,17 +15794,17 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 // src/components/WarningGraphicsOverlay.tsx
-import { useEffect as useEffect18, useRef as useRef14 } from "react";
-import { applyToPoint as applyToPoint16, identity as identity9 } from "transformation-matrix";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useRef as useRef13 } from "react";
+import { applyToPoint as applyToPoint15, identity as identity8 } from "transformation-matrix";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
   children,
-  transform = identity9(),
+  transform = identity8(),
   elements = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef14(null);
-  useEffect18(() => {
+  const canvasRef = useRef13(null);
+  useEffect16(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -16261,7 +15826,7 @@ var WarningGraphicsOverlay = ({
       );
       if (!component) return;
       const { width: width2, height: height2, center } = component;
-      const transformedCenter = applyToPoint16(transform, center);
+      const transformedCenter = applyToPoint15(transform, center);
       const scaledWidth = width2 * Math.abs(transform.a);
       const scaledHeight = height2 * Math.abs(transform.d);
       const boxPadding = 0.1 * Math.abs(transform.a);
@@ -16291,14 +15856,14 @@ var WarningGraphicsOverlay = ({
       ctx.fillText(labelText, labelX + labelWidth / 2, labelY + labelHeight / 2);
     });
   }, [elements, transform, width, height]);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21(
           "canvas",
           {
             ref: canvasRef,
@@ -16317,7 +15882,7 @@ var WarningGraphicsOverlay = ({
 };
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const {
@@ -16345,13 +15910,13 @@ var CanvasElementsRenderer = (props) => {
     );
     return [primitivesWithoutInteractionMetadata2, connectivityMap2];
   }, [elementsToRender, props.elements]);
-  const [hoverState, setHoverState] = useState12({
+  const [hoverState, setHoverState] = useState11({
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const [hoveredComponentIds, setHoveredComponentIds] = useState12([]);
-  const currentTransformRef = useRef15(transform ?? null);
-  const zoomAnimationFrameRef = useRef15(null);
+  const [hoveredComponentIds, setHoveredComponentIds] = useState11([]);
+  const currentTransformRef = useRef14(transform ?? null);
+  const zoomAnimationFrameRef = useRef14(null);
   const elementIndexes = useMemo8(
     () => buildErrorPreviewElementIndexes(elements),
     [elements]
@@ -16367,17 +15932,17 @@ var CanvasElementsRenderer = (props) => {
     if (!activeError) return [];
     return getRelatedIdsForError(activeError);
   }, [activeErrorId, elements]);
-  useEffect19(() => {
+  useEffect17(() => {
     if (transform) {
       currentTransformRef.current = transform;
     }
   }, [transform]);
-  useEffect19(() => {
+  useEffect17(() => {
     return () => {
       cancelTransformAnimation(zoomAnimationFrameRef.current);
     };
   }, []);
-  useEffect19(() => {
+  useEffect17(() => {
     if (!props.width || !props.height || !props.setTransform || !focusedErrorId)
       return;
     const focusedError = findErrorElementById(elements, focusedErrorId);
@@ -16459,7 +16024,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx22(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -16467,7 +16032,7 @@ var CanvasElementsRenderer = (props) => {
       primitives: primitivesWithoutInteractionMetadata,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx22(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -16476,58 +16041,47 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx24(
-            EditTraceHintOverlay,
+          children: /* @__PURE__ */ jsx22(
+            DimensionOverlay,
             {
-              disabled: !props.allowEditing,
               transform,
-              soup: elements,
+              focusOnHover: props.focusOnHover,
+              primitives: primitivesWithoutInteractionMetadata,
+              onBoundsSelected: props.onBoundsSelected,
               cancelPanDrag: props.cancelPanDrag,
-              onCreateEditEvent: props.onCreateEditEvent,
-              onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx24(
-                DimensionOverlay,
+              children: /* @__PURE__ */ jsx22(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx22(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx22(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx22(
+                PcbGroupOverlay,
                 {
                   transform,
-                  focusOnHover: props.focusOnHover,
-                  primitives: primitivesWithoutInteractionMetadata,
-                  onBoundsSelected: props.onBoundsSelected,
-                  cancelPanDrag: props.cancelPanDrag,
-                  children: /* @__PURE__ */ jsx24(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx24(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx24(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx24(
-                    PcbGroupOverlay,
+                  elements,
+                  hoveredComponentIds,
+                  children: /* @__PURE__ */ jsx22(
+                    DebugGraphicsOverlay,
                     {
                       transform,
-                      elements,
-                      hoveredComponentIds,
-                      children: /* @__PURE__ */ jsx24(
-                        DebugGraphicsOverlay,
+                      debugGraphics: props.debugGraphics,
+                      children: /* @__PURE__ */ jsx22(
+                        WarningGraphicsOverlay,
                         {
                           transform,
-                          debugGraphics: props.debugGraphics,
-                          children: /* @__PURE__ */ jsx24(
-                            WarningGraphicsOverlay,
+                          elements,
+                          children: /* @__PURE__ */ jsx22(
+                            CanvasPrimitiveRenderer,
                             {
                               transform,
-                              elements,
-                              children: /* @__PURE__ */ jsx24(
-                                CanvasPrimitiveRenderer,
-                                {
-                                  transform,
-                                  primitives,
-                                  elements: elementsToRender,
-                                  width: props.width,
-                                  height: props.height,
-                                  grid: props.grid
-                                }
-                              )
+                              primitives,
+                              elements: elementsToRender,
+                              width: props.width,
+                              height: props.height,
+                              grid: props.grid
                             }
                           )
                         }
                       )
                     }
-                  ) }) }) })
+                  )
                 }
-              )
+              ) }) }) })
             }
           )
         }
@@ -16591,7 +16145,7 @@ var calculateBoardSizeKey = (circuitJson) => {
 };
 // src/PCBViewer.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultTransform = compose8(translate12(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -16606,11 +16160,11 @@ var PCBViewer = ({
   clickToInteractEnabled = false,
   disablePcbGroups = false
 }) => {
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState13(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState12(
     !clickToInteractEnabled
   );
   const [ref, refDimensions] = useMeasure_default();
-  const [transform, setTransformInternal] = useState13(defaultTransform);
+  const [transform, setTransformInternal] = useState12(defaultTransform);
   const shouldAllowCanvasInteraction = useCallback12(
     (event) => {
       const target = event.target;
@@ -16629,10 +16183,10 @@ var PCBViewer = ({
     enabled: isInteractionEnabled,
     shouldDrag: shouldAllowCanvasInteraction
   });
-  let [editEvents, setEditEvents] = useState13([]);
+  let [editEvents, setEditEvents] = useState12([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef16(false);
-  const touchStartRef = useRef16(null);
+  const initialRenderCompleted = useRef15(false);
+  const touchStartRef = useRef15(null);
   const circuitJsonKey = useMemo9(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
@@ -16658,7 +16212,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect20(() => {
+  useEffect18(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -16667,7 +16221,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect20(() => {
+  useEffect18(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
@@ -16701,20 +16255,20 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx25("div", { ref, children: /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsxs16(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx23(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -16741,11 +16295,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx25(ToastContainer, {})
+              /* @__PURE__ */ jsx23(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx23(
           "div",
           {
             onClick: () => {
@@ -16782,7 +16336,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx25(
+            children: /* @__PURE__ */ jsx23(
               "div",
               {
                 style: {