@tscircuit/pcb-viewer 1.11.361 → 1.11.363

package/dist/index.js

@@ -6788,7 +6788,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback10, useEffect as useEffect17, useMemo as useMemo8, useRef as useRef14, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo9, useRef as useRef14, useState as useState13 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -7427,7 +7427,7 @@ function addInteractionMetadataToPrimitives({
 }
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useState as useState11 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo8, useState as useState12 } from "react";
 
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
@@ -8821,19 +8821,16 @@ var Drawer = class {
       ...associatedFabrication ? [associatedFabrication] : [],
       ...associatedCourtyard ? [associatedCourtyard] : []
     ];
-    const drillBeforeForeground = foregroundLayer === "drill" ? [] : ["drill"];
-    const drillAfterForeground = foregroundLayer === "drill" ? ["drill"] : [];
     const order = [
       ...DEFAULT_DRAW_ORDER.filter((l) => !layersToShiftToTop.includes(l)),
-      ...drillBeforeForeground,
-      foregroundLayer,
+      ...foregroundLayer === "drill" ? [] : [foregroundLayer],
       ...associatedSoldermask ? [associatedSoldermask] : [],
-      ...drillAfterForeground,
       "edge_cuts",
       ...associatedSilkscreen ? [associatedSilkscreen] : [],
       ...associatedNotes ? [associatedNotes] : [],
       ...associatedFabrication ? [associatedFabrication] : [],
-      ...associatedCourtyard ? [associatedCourtyard] : []
+      ...associatedCourtyard ? [associatedCourtyard] : [],
+      "drill"
     ];
     order.forEach((layer, i) => {
       const canvas = canvasLayerMap[layer];
@@ -14361,8 +14358,8 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 // src/components/ToolbarOverlay.tsx
 import {
   useEffect as useEffect16,
-  useState as useState10,
-  useCallback as useCallback8,
+  useState as useState11,
+  useCallback as useCallback9,
   useRef as useRef13,
   useLayoutEffect as useLayoutEffect2
 } from "react";
@@ -14371,7 +14368,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.360",
+  version: "1.11.362",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -14525,43 +14522,8 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
   };
 };
 
-// src/components/ToolbarOverlay.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-var LayerButton = ({ name, selected, onClick }) => {
-  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs14(
-    "div",
-    {
-      className: css3`
-        margin-top: 2px;
-        padding: 4px;
-        padding-left: 8px;
-        padding-right: 18px;
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgba(255, 255, 255, 0.1);
-        }
-      `,
-      ...touchHandlers,
-      style: touchStyle,
-      children: [
-        /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx20(
-          "span",
-          {
-            style: {
-              marginLeft: 2,
-              fontWeight: 500,
-              color: LAYER_NAME_TO_COLOR[name.replace(/-/, "")]
-            },
-            children: name
-          }
-        )
-      ]
-    }
-  );
-};
+// src/components/ToolbarButton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -14595,13 +14557,425 @@ var ToolbarButton = ({
     }
   );
 };
+
+// src/components/ToolbarErrorDropdown.tsx
+import { useCallback as useCallback8, useMemo as useMemo7, useState as useState10 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var CopyErrorButton = ({
+  errorId,
+  errorMessage,
+  copiedErrorId,
+  onCopy
+}) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(
+    () => onCopy(errorMessage, errorId)
+  );
+  return /* @__PURE__ */ jsx21(
+    "button",
+    {
+      type: "button",
+      "aria-label": copiedErrorId === errorId ? "Error message copied" : "Copy error message",
+      style: {
+        position: "absolute",
+        top: 12,
+        right: 16,
+        cursor: "pointer",
+        color: "#888",
+        fontSize: 16,
+        background: "none",
+        border: "none",
+        padding: 0,
+        display: "flex",
+        alignItems: "center",
+        ...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" }) })
+    }
+  );
+};
+var ToolbarErrorDropdown = ({
+  elements,
+  isOpen,
+  isSmallScreen,
+  onToggle,
+  setHoveredErrorId
+}) => {
+  const [copiedErrorId, setCopiedErrorId] = useState10(null);
+  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
+    /* @__PURE__ */ new Set()
+  );
+  const [expandedErrorIds, setExpandedErrorIds] = useState10(
+    /* @__PURE__ */ new Set()
+  );
+  const [, copyToClipboard] = useCopyToClipboard_default();
+  const errorElements = useMemo7(
+    () => elements?.filter(
+      (el) => el.type.includes("error")
+    ) ?? [],
+    [elements]
+  );
+  const errorCount = errorElements.length;
+  const getErrorId = useCallback8(
+    (error, index) => {
+      return error.pcb_trace_error_id || `error_${index}_${error.error_type}_${error.message?.slice(0, 20)}`;
+    },
+    []
+  );
+  const groupedErrorElements = useMemo7(() => {
+    const groups = /* @__PURE__ */ new Map();
+    errorElements.forEach((error, index) => {
+      const errorType = error.error_type || "unknown_error";
+      const existingGroup = groups.get(errorType) || [];
+      existingGroup.push({
+        error,
+        index,
+        errorId: getErrorId(error, index)
+      });
+      groups.set(errorType, existingGroup);
+    });
+    return Array.from(groups.entries()).map(([errorType, errors]) => ({
+      errorType,
+      errors
+    }));
+  }, [errorElements, getErrorId]);
+  const toggleErrorGroup = useCallback8((errorType) => {
+    setCollapsedErrorGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(errorType)) {
+        next.delete(errorType);
+      } else {
+        next.add(errorType);
+      }
+      return next;
+    });
+  }, []);
+  const toggleExpandedError = useCallback8((errorId) => {
+    setExpandedErrorIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(errorId)) {
+        next.delete(errorId);
+      } else {
+        next.add(errorId);
+      }
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx21(
+      ToolbarButton,
+      {
+        isSmallScreen,
+        style: errorCount > 0 ? { color: "red" } : void 0,
+        onClick: onToggle,
+        children: /* @__PURE__ */ jsxs14("div", { children: [
+          errorCount,
+          " errors"
+        ] })
+      }
+    ),
+    isOpen && errorCount > 0 && /* @__PURE__ */ jsx21(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          backgroundColor: "#2a2a2a",
+          border: "1px solid #666",
+          borderRadius: 4,
+          marginTop: 4,
+          zIndex: 1e3,
+          minWidth: isSmallScreen ? "280px" : "400px",
+          maxWidth: isSmallScreen ? "90vw" : "600px",
+          maxHeight: "400px",
+          overflow: "auto",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+        },
+        children: groupedErrorElements.map(({ errorType, errors }, groupIndex) => {
+          const isGroupCollapsed = collapsedErrorGroups.has(errorType);
+          return /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              style: {
+                borderBottom: groupIndex < groupedErrorElements.length - 1 ? "1px solid #444" : "none"
+              },
+              children: [
+                /* @__PURE__ */ jsxs14(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      padding: "12px 16px",
+                      cursor: "pointer",
+                      backgroundColor: "#232323",
+                      transition: "background-color 0.2s ease",
+                      touchAction: "manipulation",
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "#303030";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "#232323";
+                    },
+                    onTouchStart: (e) => {
+                      e.stopPropagation();
+                      e.currentTarget.style.backgroundColor = "#303030";
+                    },
+                    onTouchEnd: (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      e.currentTarget.style.backgroundColor = "#232323";
+                      toggleErrorGroup(errorType);
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleErrorGroup(errorType);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs14(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            color: "#ff6b6b"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx21(
+                              "div",
+                              {
+                                style: {
+                                  color: "#888",
+                                  fontSize: "16px",
+                                  transform: isGroupCollapsed ? "rotate(90deg)" : "rotate(0deg)",
+                                  transition: "transform 0.2s ease",
+                                  flexShrink: 0
+                                },
+                                children: "\u203A"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx21(
+                              "div",
+                              {
+                                style: {
+                                  fontWeight: "bold",
+                                  fontSize: isSmallScreen ? "12px" : "13px"
+                                },
+                                children: errorType
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx21(
+                        "div",
+                        {
+                          style: {
+                            fontSize: isSmallScreen ? "12px" : "13px",
+                            color: "#aaa",
+                            whiteSpace: "nowrap",
+                            marginLeft: 12
+                          },
+                          children: errors.length
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isGroupCollapsed && errors.map(({ error, index, errorId }) => {
+                  const isExpanded = expandedErrorIds.has(errorId);
+                  const errorMessage = error.message ?? "No error message";
+                  return /* @__PURE__ */ jsxs14(
+                    "div",
+                    {
+                      style: {
+                        borderTop: "1px solid #3a3a3a"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs14(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 12,
+                              padding: "12px 16px 12px 24px",
+                              cursor: "pointer",
+                              backgroundColor: "#2a2a2a",
+                              transition: "background-color 0.2s ease",
+                              touchAction: "manipulation"
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.backgroundColor = "#333";
+                              setHoveredErrorId(errorId);
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.backgroundColor = "#2a2a2a";
+                              setHoveredErrorId(null);
+                            },
+                            onTouchStart: (e) => {
+                              e.stopPropagation();
+                              e.currentTarget.style.backgroundColor = "#333";
+                              setHoveredErrorId(errorId);
+                            },
+                            onTouchEnd: (e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              e.currentTarget.style.backgroundColor = "#2a2a2a";
+                              setHoveredErrorId(null);
+                              toggleExpandedError(errorId);
+                            },
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleExpandedError(errorId);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx21(
+                                "div",
+                                {
+                                  style: {
+                                    flex: 1,
+                                    fontSize: isSmallScreen ? "12px" : "13px",
+                                    color: "#ddd",
+                                    lineHeight: 1.4,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    userSelect: "text"
+                                  },
+                                  onMouseDown: (event) => event.stopPropagation(),
+                                  onClick: (event) => event.stopPropagation(),
+                                  children: errorMessage
+                                }
+                              ),
+                              /* @__PURE__ */ jsx21(
+                                "div",
+                                {
+                                  style: {
+                                    color: "#888",
+                                    fontSize: "16px",
+                                    transform: isExpanded ? "rotate(0deg)" : "rotate(90deg)",
+                                    transition: "transform 0.2s ease",
+                                    flexShrink: 0
+                                  },
+                                  children: "\u203A"
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        isExpanded && /* @__PURE__ */ jsxs14(
+                          "div",
+                          {
+                            "data-error-id": index,
+                            style: {
+                              display: "block",
+                              padding: "12px 16px 12px 24px",
+                              backgroundColor: "#1a1a1a",
+                              borderTop: "1px solid #444",
+                              position: "relative"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx21(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: isSmallScreen ? "11px" : "12px",
+                                    color: "#ccc",
+                                    lineHeight: 1.5,
+                                    wordWrap: "break-word",
+                                    overflowWrap: "break-word",
+                                    hyphens: "auto",
+                                    userSelect: "text",
+                                    paddingRight: 30
+                                  },
+                                  onMouseDown: (event) => event.stopPropagation(),
+                                  onClick: (event) => event.stopPropagation(),
+                                  children: errorMessage
+                                }
+                              ),
+                              /* @__PURE__ */ jsx21(
+                                CopyErrorButton,
+                                {
+                                  errorId,
+                                  errorMessage,
+                                  copiedErrorId,
+                                  onCopy: (message, id) => {
+                                    copyToClipboard(message);
+                                    setCopiedErrorId(id);
+                                    setTimeout(() => setCopiedErrorId(null), 2e3);
+                                  }
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    errorId
+                  );
+                })
+              ]
+            },
+            errorType
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// src/components/ToolbarOverlay.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var LayerButton = ({ name, selected, onClick }) => {
+  const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: css3`
+        margin-top: 2px;
+        padding: 4px;
+        padding-left: 8px;
+        padding-right: 18px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+      `,
+      ...touchHandlers,
+      style: touchStyle,
+      children: [
+        /* @__PURE__ */ jsx22("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx22(
+          "span",
+          {
+            style: {
+              marginLeft: 2,
+              fontWeight: 500,
+              color: LAYER_NAME_TO_COLOR[name.replace(/-/, "")]
+            },
+            children: name
+          }
+        )
+      ]
+    }
+  );
+};
 var CheckboxMenuItem = ({
   label,
   checked,
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: css3`
@@ -14621,16 +14995,16 @@ var CheckboxMenuItem = ({
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx20("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx22("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: css3`
@@ -14650,46 +15024,13 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx20("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx22("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx20("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
-var CopyErrorButton = ({
-  errorId,
-  errorMessage,
-  copiedErrorId,
-  onCopy
-}) => {
-  const { style: touchStyle, ...touchHandlers } = useMobileTouch(
-    () => onCopy(errorMessage, errorId)
-  );
-  return /* @__PURE__ */ jsx20(
-    "button",
-    {
-      type: "button",
-      "aria-label": copiedErrorId === errorId ? "Error message copied" : "Copy error message",
-      style: {
-        position: "absolute",
-        top: 12,
-        right: 16,
-        cursor: "pointer",
-        color: "#888",
-        fontSize: 16,
-        background: "none",
-        border: "none",
-        padding: 0,
-        display: "flex",
-        alignItems: "center",
-        ...touchStyle
-      },
-      ...touchHandlers,
-      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx20("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx20("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx20("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" }) })
-    }
-  );
-};
 var ToolbarOverlay = ({ children, elements }) => {
   const isSmallScreen = useIsSmallScreen();
   const {
@@ -14751,14 +15092,10 @@ var ToolbarOverlay = ({ children, elements }) => {
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId
   }));
-  const [isViewMenuOpen, setViewMenuOpen] = useState10(false);
-  const [isLayerMenuOpen, setLayerMenuOpen] = useState10(false);
-  const [isErrorsOpen, setErrorsOpen] = useState10(false);
-  const [measureToolArmed, setMeasureToolArmed] = useState10(false);
-  const [copiedErrorId, setCopiedErrorId] = useState10(null);
-  const [, copyToClipboard] = useCopyToClipboard_default();
-  const errorElementsRef = useRef13(/* @__PURE__ */ new Map());
-  const arrowElementsRef = useRef13(/* @__PURE__ */ new Map());
+  const [isViewMenuOpen, setViewMenuOpen] = useState11(false);
+  const [isLayerMenuOpen, setLayerMenuOpen] = useState11(false);
+  const [isErrorsOpen, setErrorsOpen] = useState11(false);
+  const [measureToolArmed, setMeasureToolArmed] = useState11(false);
   useEffect16(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
@@ -14769,8 +15106,6 @@ var ToolbarOverlay = ({ children, elements }) => {
       window.removeEventListener("disarm-dimension-tool", disarm);
     };
   }, []);
-  const errorCount = elements?.filter((e) => e.type.includes("error")).length ?? 0;
-  const errorElements = elements?.filter((el) => el.type.includes("error")) || [];
   const pcbBoard = elements?.find((el) => el.type === "pcb_board");
   const numLayers = pcbBoard?.num_layers || 2;
   const availableLayers = numLayers <= 2 ? ["top", "bottom"] : [
@@ -14825,25 +15160,25 @@ var ToolbarOverlay = ({ children, elements }) => {
       document.removeEventListener("mousemove", checkMousePosition);
     };
   }, [setIsMouseOverContainer]);
-  const handleMouseEnter = useCallback8(() => {
+  const handleMouseEnter = useCallback9(() => {
     setIsMouseOverContainer(true);
   }, [setIsMouseOverContainer]);
-  const handleMouseMove = useCallback8(() => {
+  const handleMouseMove = useCallback9(() => {
     if (!isMouseOverContainer) {
       setIsMouseOverContainer(true);
     }
   }, [isMouseOverContainer, setIsMouseOverContainer]);
-  const handleMouseLeave = useCallback8(() => {
+  const handleMouseLeave = useCallback9(() => {
     setIsMouseOverContainer(false);
     setLayerMenuOpen(false);
     setViewMenuOpen(false);
     setErrorsOpen(false);
     setHoveredErrorId(null);
   }, [setIsMouseOverContainer, setHoveredErrorId]);
-  const handleLayerMenuToggle = useCallback8(() => {
+  const handleLayerMenuToggle = useCallback9(() => {
     setLayerMenuOpen(!isLayerMenuOpen);
   }, [isLayerMenuOpen]);
-  const handleErrorsToggle = useCallback8(() => {
+  const handleErrorsToggle = useCallback9(() => {
     const newErrorsOpen = !isErrorsOpen;
     setErrorsOpen(newErrorsOpen);
     if (newErrorsOpen) {
@@ -14853,33 +15188,33 @@ var ToolbarOverlay = ({ children, elements }) => {
       setHoveredErrorId(null);
     }
   }, [isErrorsOpen, setHoveredErrorId]);
-  const handleEditTraceToggle = useCallback8(() => {
+  const handleEditTraceToggle = useCallback9(() => {
     setEditMode(editModes.in_draw_trace_mode ? "off" : "draw_trace");
   }, [editModes.in_draw_trace_mode, setEditMode]);
-  const handleMoveComponentToggle = useCallback8(() => {
+  const handleMoveComponentToggle = useCallback9(() => {
     setEditMode(editModes.in_move_footprint_mode ? "off" : "move_footprint");
   }, [editModes.in_move_footprint_mode, setEditMode]);
-  const handleRatsNestToggle = useCallback8(() => {
+  const handleRatsNestToggle = useCallback9(() => {
     setIsShowingRatsNest(!viewSettings.is_showing_rats_nest);
   }, [viewSettings.is_showing_rats_nest, setIsShowingRatsNest]);
-  const handleMeasureToolClick = useCallback8(() => {
+  const handleMeasureToolClick = useCallback9(() => {
     setMeasureToolArmed(true);
     window.dispatchEvent(new Event("arm-dimension-tool"));
   }, []);
-  const handleViewMenuToggle = useCallback8(() => {
+  const handleViewMenuToggle = useCallback9(() => {
     const newViewMenuOpen = !isViewMenuOpen;
     setViewMenuOpen(newViewMenuOpen);
     if (newViewMenuOpen) {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  const stopCanvasInteractionPropagation = useCallback8(
+  const stopCanvasInteractionPropagation = useCallback9(
     (event) => {
       event.stopPropagation();
     },
     []
   );
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -14889,7 +15224,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             style: {
@@ -14910,7 +15245,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -14940,7 +15275,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs14(
+              /* @__PURE__ */ jsxs15(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -14951,10 +15286,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsxs15("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         "span",
                         {
                           style: {
@@ -14966,7 +15301,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx20("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx20(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx22("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx22(
                       LayerButton,
                       {
                         name: layer,
@@ -14980,259 +15315,68 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx20(
-                ToolbarButton,
+              /* @__PURE__ */ jsx22(
+                ToolbarErrorDropdown,
                 {
+                  elements,
+                  isOpen: isErrorsOpen,
                   isSmallScreen,
-                  style: {
-                    position: "relative",
-                    ...errorCount > 0 ? { color: "red" } : {}
-                  },
-                  onClick: handleErrorsToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
-                    errorCount,
-                    " errors"
-                  ] })
+                  onToggle: handleErrorsToggle,
+                  setHoveredErrorId
                 }
               ),
-              isErrorsOpen && errorCount > 0 && /* @__PURE__ */ jsx20(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "100%",
-                    left: 0,
-                    backgroundColor: "#2a2a2a",
-                    border: "1px solid #666",
-                    borderRadius: 4,
-                    marginTop: 4,
-                    zIndex: 1e3,
-                    minWidth: isSmallScreen ? "280px" : "400px",
-                    maxWidth: isSmallScreen ? "90vw" : "600px",
-                    maxHeight: "400px",
-                    overflow: "auto",
-                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
-                  },
-                  children: errorElements.map((e, i) => {
-                    const errorId = e.pcb_trace_error_id || `error_${i}_${e.error_type}_${e.message?.slice(0, 20)}`;
-                    return /* @__PURE__ */ jsxs14(
-                      "div",
-                      {
-                        style: {
-                          borderBottom: i < errorElements.length - 1 ? "1px solid #444" : "none"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs14(
-                            "div",
-                            {
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 12,
-                                padding: "12px 16px",
-                                cursor: "pointer",
-                                backgroundColor: "#2a2a2a",
-                                transition: "background-color 0.2s ease",
-                                touchAction: "manipulation"
-                              },
-                              onMouseEnter: (e2) => {
-                                e2.currentTarget.style.backgroundColor = "#333";
-                                setHoveredErrorId(errorId);
-                              },
-                              onMouseLeave: (e2) => {
-                                e2.currentTarget.style.backgroundColor = "#2a2a2a";
-                                setHoveredErrorId(null);
-                              },
-                              onTouchStart: (e2) => {
-                                e2.stopPropagation();
-                                e2.currentTarget.style.backgroundColor = "#333";
-                                setHoveredErrorId(errorId);
-                              },
-                              onTouchEnd: (e2) => {
-                                e2.stopPropagation();
-                                e2.preventDefault();
-                                e2.currentTarget.style.backgroundColor = "#2a2a2a";
-                                setHoveredErrorId(null);
-                                const errorElement = errorElementsRef.current.get(i);
-                                const arrow = arrowElementsRef.current.get(i);
-                                if (errorElement && arrow) {
-                                  const isVisible = errorElement.style.display !== "none";
-                                  errorElement.style.display = isVisible ? "none" : "block";
-                                  arrow.style.transform = isVisible ? "rotate(90deg)" : "rotate(0deg)";
-                                }
-                              },
-                              onClick: (e2) => {
-                                e2.stopPropagation();
-                                const errorElement = errorElementsRef.current.get(i);
-                                const arrow = arrowElementsRef.current.get(i);
-                                if (errorElement && arrow) {
-                                  const isVisible = errorElement.style.display !== "none";
-                                  errorElement.style.display = isVisible ? "none" : "block";
-                                  arrow.style.transform = isVisible ? "rotate(90deg)" : "rotate(0deg)";
-                                }
-                              },
-                              children: [
-                                /* @__PURE__ */ jsx20(
-                                  "div",
-                                  {
-                                    style: {
-                                      fontWeight: "bold",
-                                      fontSize: isSmallScreen ? "12px" : "13px",
-                                      whiteSpace: "nowrap",
-                                      flexShrink: 0,
-                                      color: "#ff6b6b",
-                                      display: isSmallScreen ? "none" : "block"
-                                    },
-                                    children: e.error_type
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx20(
-                                  "div",
-                                  {
-                                    style: {
-                                      flex: 1,
-                                      fontSize: isSmallScreen ? "12px" : "13px",
-                                      color: "#ddd",
-                                      lineHeight: 1.4,
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap",
-                                      userSelect: "text"
-                                    },
-                                    onMouseDown: (event) => event.stopPropagation(),
-                                    onClick: (event) => event.stopPropagation(),
-                                    children: e.message
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx20(
-                                  "div",
-                                  {
-                                    ref: (el) => {
-                                      if (el) arrowElementsRef.current.set(i, el);
-                                    },
-                                    "data-arrow-id": i,
-                                    style: {
-                                      color: "#888",
-                                      fontSize: "16px",
-                                      transform: "rotate(90deg)",
-                                      transition: "transform 0.2s ease",
-                                      flexShrink: 0
-                                    },
-                                    children: "\u203A"
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs14(
-                            "div",
-                            {
-                              ref: (el) => {
-                                if (el) errorElementsRef.current.set(i, el);
-                              },
-                              "data-error-id": i,
-                              style: {
-                                display: "none",
-                                padding: "12px 16px",
-                                backgroundColor: "#1a1a1a",
-                                borderTop: "1px solid #444",
-                                position: "relative"
-                              },
-                              children: [
-                                /* @__PURE__ */ jsx20(
-                                  "div",
-                                  {
-                                    style: {
-                                      fontSize: isSmallScreen ? "11px" : "12px",
-                                      color: "#ccc",
-                                      lineHeight: 1.5,
-                                      wordWrap: "break-word",
-                                      overflowWrap: "break-word",
-                                      hyphens: "auto",
-                                      userSelect: "text",
-                                      paddingRight: 30
-                                      // Space for the copy icon
-                                    },
-                                    onMouseDown: (event) => event.stopPropagation(),
-                                    onClick: (event) => event.stopPropagation(),
-                                    children: e.message
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx20(
-                                  CopyErrorButton,
-                                  {
-                                    errorId,
-                                    errorMessage: e.message,
-                                    copiedErrorId,
-                                    onCopy: (msg, id) => {
-                                      copyToClipboard(msg);
-                                      setCopiedErrorId(id);
-                                      setTimeout(() => setCopiedErrorId(null), 2e3);
-                                    }
-                                  }
-                                )
-                              ]
-                            }
-                          )
-                        ]
-                      },
-                      errorId
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleEditTraceToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                  children: /* @__PURE__ */ jsxs15("div", { children: [
                     editModes.in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleMoveComponentToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                  children: /* @__PURE__ */ jsxs15("div", { children: [
                     editModes.in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                  children: /* @__PURE__ */ jsxs15("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx20("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx22("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
-                    /* @__PURE__ */ jsxs14(
+                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs15(
                       "div",
                       {
                         style: {
@@ -15242,7 +15386,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx20(
+                          /* @__PURE__ */ jsx22(
                             "span",
                             {
                               style: {
@@ -15257,8 +15401,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs14("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx20(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs15("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -15270,7 +15414,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -15282,7 +15426,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -15292,7 +15436,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -15304,7 +15448,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -15314,7 +15458,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -15324,7 +15468,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -15334,7 +15478,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -15346,7 +15490,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -15358,7 +15502,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -15368,8 +15512,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs14("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx20(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs15("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -15379,7 +15523,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx20(
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -15403,18 +15547,18 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
   const isShowingCopperPours = useGlobalStore(
     (state) => state.is_showing_copper_pours
   );
-  const elementsToRender = useMemo7(
+  const elementsToRender = useMemo8(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
   );
-  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo7(() => {
+  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo8(() => {
     const primitivesWithoutInteractionMetadata2 = elementsToRender.flatMap(
       (elm) => convertElementToPrimitives(elm, props.elements)
     );
@@ -15423,12 +15567,12 @@ var CanvasElementsRenderer = (props) => {
     );
     return [primitivesWithoutInteractionMetadata2, connectivityMap2];
   }, [elementsToRender, props.elements]);
-  const [hoverState, setHoverState] = useState11({
+  const [hoverState, setHoverState] = useState12({
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const [hoveredComponentIds, setHoveredComponentIds] = useState11([]);
-  const errorRelatedIds = useMemo7(() => {
+  const [hoveredComponentIds, setHoveredComponentIds] = useState12([]);
+  const errorRelatedIds = useMemo8(() => {
     if (!hoveredErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -15447,7 +15591,7 @@ var CanvasElementsRenderer = (props) => {
     }
     return relatedIds;
   }, [hoveredErrorId, elements]);
-  const primitives = useMemo7(() => {
+  const primitives = useMemo8(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -15458,7 +15602,7 @@ var CanvasElementsRenderer = (props) => {
       primitiveIdsInMousedOverNet: combinedPrimitiveIds
     });
   }, [primitivesWithoutInteractionMetadata, hoverState, errorRelatedIds]);
-  const onMouseOverPrimitives = useCallback9(
+  const onMouseOverPrimitives = useCallback10(
     (primitivesHoveredOver) => {
       const primitiveIdsInMousedOverNet = [];
       for (const primitive of primitivesHoveredOver) {
@@ -15491,14 +15635,14 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     MouseElementTracker,
     {
       elements: elementsToRender,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx23(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -15507,7 +15651,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx23(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -15516,29 +15660,29 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx21(
+              children: /* @__PURE__ */ jsx23(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
-                  children: /* @__PURE__ */ jsx21(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx21(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx21(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx21(
+                  children: /* @__PURE__ */ jsx23(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx23(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx23(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx23(
                     PcbGroupOverlay,
                     {
                       transform,
                       elements,
                       hoveredComponentIds,
-                      children: /* @__PURE__ */ jsx21(
+                      children: /* @__PURE__ */ jsx23(
                         DebugGraphicsOverlay,
                         {
                           transform,
                           debugGraphics: props.debugGraphics,
-                          children: /* @__PURE__ */ jsx21(
+                          children: /* @__PURE__ */ jsx23(
                             WarningGraphicsOverlay,
                             {
                               transform,
                               elements,
-                              children: /* @__PURE__ */ jsx21(
+                              children: /* @__PURE__ */ jsx23(
                                 CanvasPrimitiveRenderer,
                                 {
                                   transform,
@@ -15620,7 +15764,7 @@ var calculateBoardSizeKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultTransform = compose7(translate11(400, 300), scale5(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -15634,12 +15778,12 @@ var PCBViewer = ({
   clickToInteractEnabled = false,
   disablePcbGroups = false
 }) => {
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState12(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState13(
     !clickToInteractEnabled
   );
   const [ref, refDimensions] = useMeasure_default();
-  const [transform, setTransformInternal] = useState12(defaultTransform);
-  const shouldAllowCanvasInteraction = useCallback10(
+  const [transform, setTransformInternal] = useState13(defaultTransform);
+  const shouldAllowCanvasInteraction = useCallback11(
     (event) => {
       const target = event.target;
       if (!(target instanceof Element)) return true;
@@ -15657,11 +15801,11 @@ var PCBViewer = ({
     enabled: isInteractionEnabled,
     shouldDrag: shouldAllowCanvasInteraction
   });
-  let [editEvents, setEditEvents] = useState12([]);
+  let [editEvents, setEditEvents] = useState13([]);
   editEvents = editEventsProp ?? editEvents;
   const initialRenderCompleted = useRef14(false);
   const touchStartRef = useRef14(null);
-  const circuitJsonKey = useMemo8(
+  const circuitJsonKey = useMemo9(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -15700,12 +15844,12 @@ var PCBViewer = ({
       resetTransform();
     }
   }, [boardSizeKey]);
-  const pcbElmsPreEdit = useMemo8(() => {
+  const pcbElmsPreEdit = useMemo9(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
   }, [circuitJsonKey]);
-  const elements = useMemo8(() => {
+  const elements = useMemo9(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
@@ -15722,27 +15866,27 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo8(
+  const mergedInitialState = useMemo9(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx22("div", { ref, children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx24("div", { ref, children: /* @__PURE__ */ jsxs16(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx24(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -15767,11 +15911,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx22(ToastContainer, {})
+              /* @__PURE__ */ jsx24(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx22(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx24(
           "div",
           {
             onClick: () => {
@@ -15808,7 +15952,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx24(
               "div",
               {
                 style: {