@tscircuit/pcb-viewer 1.11.387 → 1.11.388

package/dist/index.js

@@ -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,
@@ -12386,419 +12367,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 +12407,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 +12424,7 @@ var FocusMarkerSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "circle",
         {
           cx: center.x,
@@ -12864,8 +12436,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 +12448,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x + 8,
@@ -12887,7 +12459,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x,
@@ -12898,7 +12470,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx7(
         "line",
         {
           x1: center.x,
@@ -12914,11 +12486,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 +12503,7 @@ var ErrorMarkerSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: /* @__PURE__ */ jsx10(
+    children: /* @__PURE__ */ jsx8(
       "rect",
       {
         x: errorCenter.x - 7,
@@ -12946,7 +12518,7 @@ var ErrorMarkerSVG = ({
     )
   }
 );
-var errorMessageStyles = css2`
+var errorMessageStyles = css`
   opacity: 0;
   pointer-events: none;
   background-color: rgba(0, 0, 0, 0.8);
@@ -12962,10 +12534,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 +12547,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 +12568,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 +12580,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 +12589,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 +12632,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13078,7 +12650,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -13103,15 +12675,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 +12718,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -13164,7 +12736,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -13201,7 +12773,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 +12785,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 +12799,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 +12819,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -13282,7 +12854,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -13300,7 +12872,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -13316,7 +12888,7 @@ var ErrorOverlay = ({
         ] }, `${errorId}_${compIndex}`);
       });
     }),
-    focusScreenCenter && /* @__PURE__ */ jsx10(FocusMarkerSVG, { center: focusScreenCenter })
+    focusScreenCenter && /* @__PURE__ */ jsx8(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
 
@@ -13331,8 +12903,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 +12913,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 +12939,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 +12958,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 +12975,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs7(
         "svg",
         {
           style: {
@@ -13420,7 +12992,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 +13005,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 +13018,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx9(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -13458,7 +13030,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 +13042,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 +13054,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsx9(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -13495,7 +13067,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx11(
+                shouldShowXLabel && /* @__PURE__ */ jsx9(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -13503,10 +13075,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 +13086,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 +13105,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 +13117,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx9(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -13565,7 +13137,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 +13224,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 +13236,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 +13352,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 +13364,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 +13408,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -13849,18 +13421,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 +13446,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 +13461,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -13900,7 +13472,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -13911,7 +13483,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx12(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -13931,7 +13503,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 +13552,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 +13641,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 +13705,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 +13733,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 +13744,7 @@ var HighlightedPrimitiveBoxWithText = ({
           color: color7,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsxs11(
+        children: /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -14189,8 +13761,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 +13781,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -14223,7 +13795,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx14(
         "div",
         {
           style: {
@@ -14239,7 +13811,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 +13859,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 +13871,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 +13987,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 +14033,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 +14058,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 +14074,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: containerRef,
@@ -14526,7 +14098,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx15(
           ElementOverlayBox,
           {
             elements,
@@ -14534,8 +14106,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs12(Fragment5, { children: [
-          /* @__PURE__ */ jsx17(
+        transform && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          /* @__PURE__ */ jsx15(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -14545,7 +14117,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -14555,7 +14127,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -14565,7 +14137,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx15(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -14582,10 +14154,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 +14172,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 +14187,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 +14315,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 +14368,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 +14393,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 +14420,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 +14484,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 +14501,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 +14524,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.387",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -15028,20 +14600,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 +14641,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 +14658,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 +14690,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 +14698,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ...props,
@@ -15154,7 +14726,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 +14748,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 +14768,7 @@ var useToolbarErrorFocus = ({
       focusRequestRef.current = null;
     }
   }, []);
-  useEffect16(() => clearPendingSelection, [clearPendingSelection]);
+  useEffect14(() => clearPendingSelection, [clearPendingSelection]);
   const handleErrorSelect = useCallback8(
     (errorId) => {
       clearPendingSelection();
@@ -15234,7 +14806,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 +14816,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -15264,7 +14836,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 +14849,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 +14895,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 +14928,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 +14972,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs15(
+                      /* @__PURE__ */ jsxs13(
                         "div",
                         {
                           style: {
@@ -15410,7 +14982,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx19(
                               "div",
                               {
                                 style: {
@@ -15423,7 +14995,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx19(
                               "div",
                               {
                                 style: {
@@ -15436,7 +15008,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx19(
                         "div",
                         {
                           style: {
@@ -15454,14 +15026,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 +15072,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "div",
                                 {
                                   style: {
@@ -15516,7 +15088,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "button",
                                 {
                                   type: "button",
@@ -15548,7 +15120,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs15(
+                        isExpanded && /* @__PURE__ */ jsxs13(
                           "div",
                           {
                             "data-error-id": index,
@@ -15560,7 +15132,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 "div",
                                 {
                                   style: {
@@ -15578,7 +15150,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx19(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -15610,13 +15182,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 +15202,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 +15224,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 +15244,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 +15273,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 +15339,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 +15362,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 +15470,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     },
     []
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -15908,7 +15480,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -15929,7 +15501,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -15960,7 +15532,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs14(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -15971,10 +15543,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs14("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         "span",
                         {
                           style: {
@@ -15986,7 +15558,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 +15572,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx20(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -16012,43 +15584,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 +15630,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx22(
+                          /* @__PURE__ */ jsx20(
                             "span",
                             {
                               style: {
@@ -16073,8 +15645,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 +15658,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -16098,7 +15670,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -16108,7 +15680,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -16120,7 +15692,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -16130,7 +15702,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -16140,7 +15712,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -16150,7 +15722,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -16162,7 +15734,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -16172,7 +15744,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -16184,7 +15756,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx20(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -16194,8 +15766,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 +15777,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx22(
+                        /* @__PURE__ */ jsx20(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -16229,17 +15801,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 +15833,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 +15863,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 +15889,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 +15917,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 +15939,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 +16031,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx22(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -16467,7 +16039,7 @@ var CanvasElementsRenderer = (props) => {
       primitives: primitivesWithoutInteractionMetadata,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx22(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -16476,58 +16048,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 +16152,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 +16167,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 +16190,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 +16219,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect20(() => {
+  useEffect18(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -16667,7 +16228,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect20(() => {
+  useEffect18(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
@@ -16701,20 +16262,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 +16302,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx25(ToastContainer, {})
+              /* @__PURE__ */ jsx23(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx23(
           "div",
           {
             onClick: () => {
@@ -16782,7 +16343,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx25(
+            children: /* @__PURE__ */ jsx23(
               "div",
               {
                 style: {