@tscircuit/pcb-viewer 1.11.394 → 1.11.396

package/dist/index.js

@@ -4,7 +4,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from, except, desc) => {
@@ -918,6 +924,263 @@ var require_svgson_umd = __commonJS({
   }
 });
 
+// node_modules/react-dom/cjs/react-dom.development.js
+var require_react_dom_development = __commonJS({
+  "node_modules/react-dom/cjs/react-dom.development.js"(exports) {
+    "use strict";
+    (function() {
+      function noop2() {
+      }
+      function testStringCoercion(value) {
+        return "" + value;
+      }
+      function createPortal$1(children, containerInfo, implementation) {
+        var key = 3 < arguments.length && void 0 !== arguments[3] ? arguments[3] : null;
+        try {
+          testStringCoercion(key);
+          var JSCompiler_inline_result = false;
+        } catch (e) {
+          JSCompiler_inline_result = true;
+        }
+        JSCompiler_inline_result && (console.error(
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          "function" === typeof Symbol && Symbol.toStringTag && key[Symbol.toStringTag] || key.constructor.name || "Object"
+        ), testStringCoercion(key));
+        return {
+          $$typeof: REACT_PORTAL_TYPE,
+          key: null == key ? null : "" + key,
+          children,
+          containerInfo,
+          implementation
+        };
+      }
+      function getCrossOriginStringAs(as, input) {
+        if ("font" === as) return "";
+        if ("string" === typeof input)
+          return "use-credentials" === input ? input : "";
+      }
+      function getValueDescriptorExpectingObjectForWarning(thing) {
+        return null === thing ? "`null`" : void 0 === thing ? "`undefined`" : "" === thing ? "an empty string" : 'something with type "' + typeof thing + '"';
+      }
+      function getValueDescriptorExpectingEnumForWarning(thing) {
+        return null === thing ? "`null`" : void 0 === thing ? "`undefined`" : "" === thing ? "an empty string" : "string" === typeof thing ? JSON.stringify(thing) : "number" === typeof thing ? "`" + thing + "`" : 'something with type "' + typeof thing + '"';
+      }
+      function resolveDispatcher() {
+        var dispatcher = ReactSharedInternals.H;
+        null === dispatcher && console.error(
+          "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."
+        );
+        return dispatcher;
+      }
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+      var React4 = __require("react"), Internals = {
+        d: {
+          f: noop2,
+          r: function() {
+            throw Error(
+              "Invalid form element. requestFormReset must be passed a form that was rendered by React."
+            );
+          },
+          D: noop2,
+          C: noop2,
+          L: noop2,
+          m: noop2,
+          X: noop2,
+          S: noop2,
+          M: noop2
+        },
+        p: 0,
+        findDOMNode: null
+      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React4.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+      "function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error(
+        "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
+      );
+      exports.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = Internals;
+      exports.createPortal = function(children, container) {
+        var key = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
+        if (!container || 1 !== container.nodeType && 9 !== container.nodeType && 11 !== container.nodeType)
+          throw Error("Target container is not a DOM element.");
+        return createPortal$1(children, container, null, key);
+      };
+      exports.flushSync = function(fn) {
+        var previousTransition = ReactSharedInternals.T, previousUpdatePriority = Internals.p;
+        try {
+          if (ReactSharedInternals.T = null, Internals.p = 2, fn)
+            return fn();
+        } finally {
+          ReactSharedInternals.T = previousTransition, Internals.p = previousUpdatePriority, Internals.d.f() && console.error(
+            "flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task."
+          );
+        }
+      };
+      exports.preconnect = function(href, options) {
+        "string" === typeof href && href ? null != options && "object" !== typeof options ? console.error(
+          "ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.",
+          getValueDescriptorExpectingEnumForWarning(options)
+        ) : null != options && "string" !== typeof options.crossOrigin && console.error(
+          "ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.",
+          getValueDescriptorExpectingObjectForWarning(options.crossOrigin)
+        ) : console.error(
+          "ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
+          getValueDescriptorExpectingObjectForWarning(href)
+        );
+        "string" === typeof href && (options ? (options = options.crossOrigin, options = "string" === typeof options ? "use-credentials" === options ? options : "" : void 0) : options = null, Internals.d.C(href, options));
+      };
+      exports.prefetchDNS = function(href) {
+        if ("string" !== typeof href || !href)
+          console.error(
+            "ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
+            getValueDescriptorExpectingObjectForWarning(href)
+          );
+        else if (1 < arguments.length) {
+          var options = arguments[1];
+          "object" === typeof options && options.hasOwnProperty("crossOrigin") ? console.error(
+            "ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.",
+            getValueDescriptorExpectingEnumForWarning(options)
+          ) : console.error(
+            "ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.",
+            getValueDescriptorExpectingEnumForWarning(options)
+          );
+        }
+        "string" === typeof href && Internals.d.D(href);
+      };
+      exports.preinit = function(href, options) {
+        "string" === typeof href && href ? null == options || "object" !== typeof options ? console.error(
+          "ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.",
+          getValueDescriptorExpectingEnumForWarning(options)
+        ) : "style" !== options.as && "script" !== options.as && console.error(
+          'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
+          getValueDescriptorExpectingEnumForWarning(options.as)
+        ) : console.error(
+          "ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
+          getValueDescriptorExpectingObjectForWarning(href)
+        );
+        if ("string" === typeof href && options && "string" === typeof options.as) {
+          var as = options.as, crossOrigin = getCrossOriginStringAs(as, options.crossOrigin), integrity = "string" === typeof options.integrity ? options.integrity : void 0, fetchPriority = "string" === typeof options.fetchPriority ? options.fetchPriority : void 0;
+          "style" === as ? Internals.d.S(
+            href,
+            "string" === typeof options.precedence ? options.precedence : void 0,
+            {
+              crossOrigin,
+              integrity,
+              fetchPriority
+            }
+          ) : "script" === as && Internals.d.X(href, {
+            crossOrigin,
+            integrity,
+            fetchPriority,
+            nonce: "string" === typeof options.nonce ? options.nonce : void 0
+          });
+        }
+      };
+      exports.preinitModule = function(href, options) {
+        var encountered = "";
+        "string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+        void 0 !== options && "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : options && "as" in options && "script" !== options.as && (encountered += " The `as` option encountered was " + getValueDescriptorExpectingEnumForWarning(options.as) + ".");
+        if (encountered)
+          console.error(
+            "ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property.%s",
+            encountered
+          );
+        else
+          switch (encountered = options && "string" === typeof options.as ? options.as : "script", encountered) {
+            case "script":
+              break;
+            default:
+              encountered = getValueDescriptorExpectingEnumForWarning(encountered), console.error(
+                'ReactDOM.preinitModule(): Currently the only supported "as" type for this function is "script" but received "%s" instead. This warning was generated for `href` "%s". In the future other module types will be supported, aligning with the import-attributes proposal. Learn more here: (https://github.com/tc39/proposal-import-attributes)',
+                encountered,
+                href
+              );
+          }
+        if ("string" === typeof href)
+          if ("object" === typeof options && null !== options) {
+            if (null == options.as || "script" === options.as)
+              encountered = getCrossOriginStringAs(
+                options.as,
+                options.crossOrigin
+              ), Internals.d.M(href, {
+                crossOrigin: encountered,
+                integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+                nonce: "string" === typeof options.nonce ? options.nonce : void 0
+              });
+          } else null == options && Internals.d.M(href);
+      };
+      exports.preload = function(href, options) {
+        var encountered = "";
+        "string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+        null == options || "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : "string" === typeof options.as && options.as || (encountered += " The `as` option encountered was " + getValueDescriptorExpectingObjectForWarning(options.as) + ".");
+        encountered && console.error(
+          'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
+          encountered
+        );
+        if ("string" === typeof href && "object" === typeof options && null !== options && "string" === typeof options.as) {
+          encountered = options.as;
+          var crossOrigin = getCrossOriginStringAs(
+            encountered,
+            options.crossOrigin
+          );
+          Internals.d.L(href, encountered, {
+            crossOrigin,
+            integrity: "string" === typeof options.integrity ? options.integrity : void 0,
+            nonce: "string" === typeof options.nonce ? options.nonce : void 0,
+            type: "string" === typeof options.type ? options.type : void 0,
+            fetchPriority: "string" === typeof options.fetchPriority ? options.fetchPriority : void 0,
+            referrerPolicy: "string" === typeof options.referrerPolicy ? options.referrerPolicy : void 0,
+            imageSrcSet: "string" === typeof options.imageSrcSet ? options.imageSrcSet : void 0,
+            imageSizes: "string" === typeof options.imageSizes ? options.imageSizes : void 0,
+            media: "string" === typeof options.media ? options.media : void 0
+          });
+        }
+      };
+      exports.preloadModule = function(href, options) {
+        var encountered = "";
+        "string" === typeof href && href || (encountered += " The `href` argument encountered was " + getValueDescriptorExpectingObjectForWarning(href) + ".");
+        void 0 !== options && "object" !== typeof options ? encountered += " The `options` argument encountered was " + getValueDescriptorExpectingObjectForWarning(options) + "." : options && "as" in options && "string" !== typeof options.as && (encountered += " The `as` option encountered was " + getValueDescriptorExpectingObjectForWarning(options.as) + ".");
+        encountered && console.error(
+          'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag.%s',
+          encountered
+        );
+        "string" === typeof href && (options ? (encountered = getCrossOriginStringAs(
+          options.as,
+          options.crossOrigin
+        ), Internals.d.m(href, {
+          as: "string" === typeof options.as && "script" !== options.as ? options.as : void 0,
+          crossOrigin: encountered,
+          integrity: "string" === typeof options.integrity ? options.integrity : void 0
+        })) : Internals.d.m(href));
+      };
+      exports.requestFormReset = function(form) {
+        Internals.d.r(form);
+      };
+      exports.unstable_batchedUpdates = function(fn, a) {
+        return fn(a);
+      };
+      exports.useFormState = function(action, initialState, permalink) {
+        return resolveDispatcher().useFormState(action, initialState, permalink);
+      };
+      exports.useFormStatus = function() {
+        return resolveDispatcher().useHostTransitionStatus();
+      };
+      exports.version = "19.1.0";
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    })();
+  }
+});
+
+// node_modules/react-dom/index.js
+var require_react_dom = __commonJS({
+  "node_modules/react-dom/index.js"(exports, module) {
+    "use strict";
+    if (false) {
+      checkDCE();
+      module.exports = null;
+    } else {
+      module.exports = require_react_dom_development();
+    }
+  }
+});
+
 // src/PCBViewer.tsx
 import { applyEditEvents } from "@tscircuit/core";
 
@@ -2233,6 +2496,8 @@ var setStoredString = (key, value) => {
 var DEFAULT_PCB_GROUP_VIEW_MODE = true ? "named_only" : "all";
 var createStore = (initialState = {}, disablePcbGroups = false) => createZustandStore(
   (set) => ({
+    hidden_layer_opacity: 0.4,
+    setHiddenLayerOpacity: (opacity) => set({ hidden_layer_opacity: Math.max(0, Math.min(1, opacity)) }),
     selected_layer: "top",
     pcb_viewer_id: `pcb_viewer_${Math.random().toString().slice(2, 10)}`,
     in_edit_mode: false,
@@ -2378,7 +2643,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback12, useEffect as useEffect18, useMemo as useMemo9, useRef as useRef15, useState as useState12 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo10, useRef as useRef16, useState as useState13 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -4182,7 +4447,7 @@ var animateTransform = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo8, useRef as useRef14, useState as useState11 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo9, useRef as useRef15, useState as useState12 } from "react";
 
 // src/lib/Drawer.ts
 import colorParser from "color";
@@ -4516,6 +4781,7 @@ var Drawer = class {
   aperture;
   transform;
   foregroundLayer = "top";
+  hiddenLayerOpacity = 0.4;
   lastPoint;
   constructor(canvasLayerMap) {
     this.canvasLayerMap = canvasLayerMap;
@@ -4790,11 +5056,19 @@ var Drawer = class {
     }
     return ctx;
   }
+  getLayerOpacity(layer) {
+    const side = this.foregroundLayer;
+    const isSelectedSideDetail = (side === "top" || side === "bottom") && (layer.startsWith(`${side}_`) || layer.endsWith(`_${side}`));
+    const isSharedLayer = ["board", "drill", "edge_cuts", "other"].includes(
+      layer
+    );
+    return layer === side || isSelectedSideDetail || isSharedLayer ? 1 : this.hiddenLayerOpacity;
+  }
   /**
    * Iterate over each canvas and set the z index based on the layer order, but
    * always render the foreground layer on top.
    *
-   * Also: Set the opacity of every non-foreground layer to 0.5
+   * Fade inactive layers using the configured hidden-layer opacity.
    */
   orderAndFadeLayers() {
     const { canvasLayerMap, foregroundLayer } = this;
@@ -4811,18 +5085,6 @@ var Drawer = class {
     const associatedNotes = foregroundLayer === "top" ? "top_notes" : foregroundLayer === "bottom" ? "bottom_notes" : void 0;
     const associatedFabrication = foregroundLayer === "top" ? "top_fabrication" : foregroundLayer === "bottom" ? "bottom_fabrication" : void 0;
     const associatedCourtyard = foregroundLayer === "top" ? "top_courtyard" : foregroundLayer === "bottom" ? "bottom_courtyard" : void 0;
-    const opaqueLayers = /* @__PURE__ */ new Set([
-      foregroundLayer,
-      "drill",
-      "edge_cuts",
-      "other",
-      "board",
-      ...associatedSoldermask ? [associatedSoldermask] : [],
-      ...associatedSilkscreen ? [associatedSilkscreen] : [],
-      ...associatedNotes ? [associatedNotes] : [],
-      ...associatedFabrication ? [associatedFabrication] : [],
-      ...associatedCourtyard ? [associatedCourtyard] : []
-    ]);
     const layersToShiftToTop = [
       foregroundLayer,
       "edge_cuts",
@@ -4847,8 +5109,12 @@ var Drawer = class {
       const canvas = canvasLayerMap[layer];
       if (!canvas) return;
       canvas.style.zIndex = `${zIndexMap.topLayer - (order.length - i)}`;
-      canvas.style.opacity = opaqueLayers.has(layer) ? "1" : "0.5";
     });
+    for (const [layer, canvas] of Object.entries(canvasLayerMap)) {
+      const opacity = this.getLayerOpacity(layer);
+      canvas.style.opacity = String(opacity);
+      canvas.style.display = opacity === 0 ? "none" : "";
+    }
   }
   applyAperture() {
     const { transform, aperture } = this;
@@ -6112,6 +6378,7 @@ var CanvasPrimitiveRenderer = ({
   height = 500
 }) => {
   const canvasRefs = useRef3({});
+  const hiddenLayerOpacity = useGlobalStore((s) => s.hidden_layer_opacity);
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
   const isShowingCopperPours = useGlobalStore((s) => s.is_showing_copper_pours);
   const isShowingSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
@@ -6135,16 +6402,27 @@ var CanvasPrimitiveRenderer = ({
     if (transform) drawer.transform = transform;
     drawer.clear();
     drawer.foregroundLayer = selectedLayer;
+    drawer.hiddenLayerOpacity = hiddenLayerOpacity;
+    const visibleCanvasRefs = Object.fromEntries(
+      Object.entries(availableCanvasRefs).filter(
+        ([layer]) => drawer.getLayerOpacity(layer) > 0
+      )
+    );
     const filteredPrimitives = getPrimitivesForDrawer({
       primitives,
       isShowingSolderMask,
       isShowingSilkscreen,
       isShowingFabricationNotes
     });
-    drawPrimitives(drawer, filteredPrimitives);
+    drawPrimitives(
+      drawer,
+      filteredPrimitives.filter(
+        (p) => drawer.getLayerOpacity(p.layer ?? "other") > 0
+      )
+    );
     if (transform) {
       const copperLayers = getCopperLayerRefsFromElements(elements).map((layer) => ({
-        canvas: canvasRefs.current[layer],
+        canvas: visibleCanvasRefs[layer],
         layer,
         copperLayer: getCopperRenderLayer(layer)
       }));
@@ -6214,7 +6492,7 @@ var CanvasPrimitiveRenderer = ({
         const soldermaskLayer = selectedLayer === "bottom" ? "bottom" : "top";
         const drawSoldermaskTop = soldermaskLayer === "top";
         const drawSoldermaskBottom = soldermaskLayer === "bottom";
-        const topSoldermaskCanvas = canvasRefs.current.soldermask_top;
+        const topSoldermaskCanvas = visibleCanvasRefs.soldermask_top;
         if (topSoldermaskCanvas && soldermaskLayer === "top") {
           drawSoldermaskElementsForLayer({
             canvas: topSoldermaskCanvas,
@@ -6226,7 +6504,7 @@ var CanvasPrimitiveRenderer = ({
             primitives
           });
         }
-        const bottomSoldermaskCanvas = canvasRefs.current.soldermask_bottom;
+        const bottomSoldermaskCanvas = visibleCanvasRefs.soldermask_bottom;
         if (bottomSoldermaskCanvas && soldermaskLayer === "bottom") {
           drawSoldermaskElementsForLayer({
             canvas: bottomSoldermaskCanvas,
@@ -6239,7 +6517,7 @@ var CanvasPrimitiveRenderer = ({
           });
         }
       }
-      const drillCanvas = canvasRefs.current.drill;
+      const drillCanvas = visibleCanvasRefs.drill;
       if (drillCanvas) {
         drawPcbHoleElementsForLayer({
           canvas: drillCanvas,
@@ -6249,7 +6527,7 @@ var CanvasPrimitiveRenderer = ({
         });
       }
       if (isShowingSilkscreen) {
-        const topSilkscreenCanvas = canvasRefs.current.top_silkscreen;
+        const topSilkscreenCanvas = visibleCanvasRefs.top_silkscreen;
         if (topSilkscreenCanvas) {
           drawSilkscreenElementsForLayer({
             canvas: topSilkscreenCanvas,
@@ -6258,7 +6536,7 @@ var CanvasPrimitiveRenderer = ({
             realToCanvasMat: transform
           });
         }
-        const bottomSilkscreenCanvas = canvasRefs.current.bottom_silkscreen;
+        const bottomSilkscreenCanvas = visibleCanvasRefs.bottom_silkscreen;
         if (bottomSilkscreenCanvas) {
           drawSilkscreenElementsForLayer({
             canvas: bottomSilkscreenCanvas,
@@ -6269,7 +6547,7 @@ var CanvasPrimitiveRenderer = ({
         }
       }
       if (isShowingFabricationNotes) {
-        const topFabCanvas = canvasRefs.current.top_fabrication;
+        const topFabCanvas = visibleCanvasRefs.top_fabrication;
         if (topFabCanvas) {
           drawFabricationNoteElementsForLayer({
             canvas: topFabCanvas,
@@ -6278,7 +6556,7 @@ var CanvasPrimitiveRenderer = ({
             realToCanvasMat: transform
           });
         }
-        const bottomFabCanvas = canvasRefs.current.bottom_fabrication;
+        const bottomFabCanvas = visibleCanvasRefs.bottom_fabrication;
         if (bottomFabCanvas) {
           drawFabricationNoteElementsForLayer({
             canvas: bottomFabCanvas,
@@ -6289,7 +6567,7 @@ var CanvasPrimitiveRenderer = ({
         }
       }
       if (isShowingPcbNotes) {
-        const bottomNotesCanvas = canvasRefs.current.bottom_notes;
+        const bottomNotesCanvas = visibleCanvasRefs.bottom_notes;
         if (bottomNotesCanvas) {
           drawPcbNoteElementsForLayer({
             canvas: bottomNotesCanvas,
@@ -6298,7 +6576,7 @@ var CanvasPrimitiveRenderer = ({
             realToCanvasMat: transform
           });
         }
-        const topNotesCanvas = canvasRefs.current.top_notes;
+        const topNotesCanvas = visibleCanvasRefs.top_notes;
         if (topNotesCanvas) {
           drawPcbNoteElementsForLayer({
             canvas: topNotesCanvas,
@@ -6309,7 +6587,7 @@ var CanvasPrimitiveRenderer = ({
         }
       }
       if (isShowingCourtyards) {
-        const topCourtyardCanvas = canvasRefs.current.top_courtyard;
+        const topCourtyardCanvas = visibleCanvasRefs.top_courtyard;
         if (topCourtyardCanvas) {
           drawCourtyardElementsForLayer({
             canvas: topCourtyardCanvas,
@@ -6318,7 +6596,7 @@ var CanvasPrimitiveRenderer = ({
             realToCanvasMat: transform
           });
         }
-        const bottomCourtyardCanvas = canvasRefs.current.bottom_courtyard;
+        const bottomCourtyardCanvas = visibleCanvasRefs.bottom_courtyard;
         if (bottomCourtyardCanvas) {
           drawCourtyardElementsForLayer({
             canvas: bottomCourtyardCanvas,
@@ -6328,7 +6606,7 @@ var CanvasPrimitiveRenderer = ({
           });
         }
       }
-      const boardCanvas = canvasRefs.current.board;
+      const boardCanvas = visibleCanvasRefs.board;
       if (boardCanvas) {
         drawPcbPanelElements({
           canvas: boardCanvas,
@@ -6345,7 +6623,7 @@ var CanvasPrimitiveRenderer = ({
           drawSoldermask: isShowingSolderMask
         });
       }
-      const edgeCutsCanvas = canvasRefs.current.edge_cuts;
+      const edgeCutsCanvas = visibleCanvasRefs.edge_cuts;
       if (edgeCutsCanvas) {
         drawPcbCutoutElementsForLayer({
           canvas: edgeCutsCanvas,
@@ -6370,6 +6648,7 @@ var CanvasPrimitiveRenderer = ({
     elements,
     transform,
     selectedLayer,
+    hiddenLayerOpacity,
     isShowingCopperPours,
     isShowingSolderMask,
     isShowingFabricationNotes,
@@ -7299,7 +7578,7 @@ var DebugGraphicsOverlay = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
 import { applyToPoint as applyToPoint10, identity as identity3, inverse as inverse3 } from "transformation-matrix";
 
 // src/lib/util/get-primitive-bounding-box.ts
@@ -7674,10 +7953,55 @@ var getPrimitiveSnapPoints = (primitive) => {
   }
 };
 
+// src/components/DimensionSnapGuides.tsx
+import { memo, useMemo as useMemo4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var markerPath = ({ screenPoint: { x, y } }) => `M${x - 2.5},${y - 2.5}l5,5m0,-5l-5,5`;
+var DimensionSnapGuides = memo(function DimensionSnapGuides2({
+  points,
+  startId,
+  endId
+}) {
+  const { path, pointsById } = useMemo4(
+    () => ({
+      path: points.map(markerPath).join(""),
+      pointsById: new Map(points.map((point) => [point.id, point]))
+    }),
+    [points]
+  );
+  const activePath = [.../* @__PURE__ */ new Set([startId, endId])].flatMap((id) => {
+    const point = id === null ? void 0 : pointsById.get(id);
+    return point ? [markerPath(point)] : [];
+  }).join("");
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "100%",
+      height: "100%",
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: zIndexMap.dimensionOverlay
+      },
+      fill: "none",
+      strokeWidth: 1,
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: path, stroke: "white" }),
+        /* @__PURE__ */ jsx5("path", { d: activePath, stroke: "#66ccff" })
+      ]
+    }
+  );
+});
+
 // src/components/DimensionOverlay.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_PX = 16;
-var SNAP_MARKER_SIZE = 5;
+var EMPTY_PRIMITIVES = [];
+var DEFAULT_TRANSFORM = identity3();
 var shouldExcludePrimitiveFromSnapping = (primitive) => {
   if (primitive.pcb_drawing_type === "text") return true;
   const element = primitive._element;
@@ -7698,11 +8022,11 @@ var DimensionOverlay = ({
   children,
   transform,
   focusOnHover = false,
-  primitives = [],
+  primitives = EMPTY_PRIMITIVES,
   onBoundsSelected,
   cancelPanDrag
 }) => {
-  if (!transform) transform = identity3();
+  if (!transform) transform = DEFAULT_TRANSFORM;
   const [dimensionToolVisible, setDimensionToolVisible] = useState4(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState4(false);
   const [measureToolArmed, setMeasureToolArmed] = useState4(false);
@@ -7734,7 +8058,7 @@ var DimensionOverlay = ({
   const containerRef = useRef5(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
-  const elementBoundingBoxes = useMemo4(() => {
+  const elementBoundingBoxes = useMemo5(() => {
     const boundingBoxes = /* @__PURE__ */ new Map();
     for (const primitive of primitives) {
       if (!primitive._element) continue;
@@ -7752,7 +8076,7 @@ var DimensionOverlay = ({
     }
     return boundingBoxes;
   }, [primitives]);
-  const primitiveSnappingPoints = useMemo4(() => {
+  const primitiveSnappingPoints = useMemo5(() => {
     const snapPoints = [];
     for (const primitive of primitives) {
       if (!primitive._element) continue;
@@ -7769,7 +8093,7 @@ var DimensionOverlay = ({
     }
     return snapPoints;
   }, [primitives]);
-  const snappingPoints = useMemo4(() => {
+  const snappingPoints = useMemo5(() => {
     const points = [];
     elementBoundingBoxes.forEach((bounds, element) => {
       if (!bounds) return;
@@ -7804,7 +8128,7 @@ var DimensionOverlay = ({
     });
     return points;
   }, [elementBoundingBoxes, primitiveSnappingPoints]);
-  const snappingPointsWithScreen = useMemo4(() => {
+  const snappingPointsWithScreen = useMemo5(() => {
     return snappingPoints.map((snap, index) => ({
       ...snap,
       id: `${index}-${snap.anchor}`,
@@ -7956,7 +8280,7 @@ var DimensionOverlay = ({
     flipX: arrowScreenBounds.flipX,
     flipY: arrowScreenBounds.flipY
   });
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
@@ -8041,8 +8365,8 @@ var DimensionOverlay = ({
       },
       children: [
         children,
-        boundsToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx5(
+        boundsToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
             "svg",
             {
               style: {
@@ -8055,7 +8379,7 @@ var DimensionOverlay = ({
               },
               width: containerBounds.width,
               height: containerBounds.height,
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "rect",
                 {
                   x: boundsScreenRect.left,
@@ -8070,7 +8394,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8091,7 +8415,7 @@ var DimensionOverlay = ({
                 ", minY:",
                 " ",
                 selectedBounds.minY.toFixed(2),
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "maxX: ",
                 selectedBounds.maxX.toFixed(2),
                 ", maxY:",
@@ -8101,8 +8425,8 @@ var DimensionOverlay = ({
             }
           )
         ] }),
-        dimensionToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          diagonalLabel.show && /* @__PURE__ */ jsx5(
+        dimensionToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          diagonalLabel.show && /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8120,7 +8444,7 @@ var DimensionOverlay = ({
               children: diagonalLabel.distance.toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8140,7 +8464,7 @@ var DimensionOverlay = ({
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -8158,7 +8482,7 @@ var DimensionOverlay = ({
                 fontFamily: "sans-serif",
                 zIndex: zIndexMap.dimensionOverlay
               },
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -8170,7 +8494,7 @@ var DimensionOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "svg",
             {
               style: {
@@ -8184,7 +8508,7 @@ var DimensionOverlay = ({
               width: containerBounds.width,
               height: containerBounds.height,
               children: [
-                /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6(
                   "marker",
                   {
                     id: "head",
@@ -8193,10 +8517,10 @@ var DimensionOverlay = ({
                     markerHeight: "4",
                     refX: "2",
                     refY: "2",
-                    children: /* @__PURE__ */ jsx5("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
+                    children: /* @__PURE__ */ jsx6("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -8209,7 +8533,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -8222,7 +8546,7 @@ var DimensionOverlay = ({
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -8238,50 +8562,15 @@ var DimensionOverlay = ({
               ]
             }
           ),
-          dimensionToolStretching && snappingPointsWithScreen.map((snap) => {
-            const isActive = snap.id === activeSnapIds.start || snap.id === activeSnapIds.end;
-            const half = SNAP_MARKER_SIZE / 2;
-            return /* @__PURE__ */ jsxs3(
-              "svg",
-              {
-                width: SNAP_MARKER_SIZE,
-                height: SNAP_MARKER_SIZE,
-                style: {
-                  position: "absolute",
-                  left: snap.screenPoint.x - half,
-                  top: snap.screenPoint.y - half,
-                  pointerEvents: "none",
-                  zIndex: zIndexMap.dimensionOverlay
-                },
-                children: [
-                  /* @__PURE__ */ jsx5(
-                    "line",
-                    {
-                      x1: 0,
-                      y1: 0,
-                      x2: SNAP_MARKER_SIZE,
-                      y2: SNAP_MARKER_SIZE,
-                      stroke: isActive ? "#66ccff" : "white",
-                      strokeWidth: 1
-                    }
-                  ),
-                  /* @__PURE__ */ jsx5(
-                    "line",
-                    {
-                      x1: SNAP_MARKER_SIZE,
-                      y1: 0,
-                      x2: 0,
-                      y2: SNAP_MARKER_SIZE,
-                      stroke: isActive ? "#66ccff" : "white",
-                      strokeWidth: 1
-                    }
-                  )
-                ]
-              },
-              snap.id
-            );
-          }),
-          /* @__PURE__ */ jsxs3(
+          dimensionToolStretching && /* @__PURE__ */ jsx6(
+            DimensionSnapGuides,
+            {
+              points: snappingPointsWithScreen,
+              startId: activeSnapIds.start,
+              endId: activeSnapIds.end
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               style: {
@@ -8299,13 +8588,13 @@ var DimensionOverlay = ({
                 ",",
                 dStart.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "(",
                 dEnd.x.toFixed(2),
                 ",",
                 dEnd.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx6("br", {}),
                 "dist:",
                 " ",
                 Math.sqrt(
@@ -8323,7 +8612,7 @@ var DimensionOverlay = ({
 // src/components/EditPlacementOverlay.tsx
 import { useRef as useRef6, useState as useState5 } from "react";
 import { applyToPoint as applyToPoint11, identity as identity4, inverse as inverse4 } from "transformation-matrix";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component, point, padding = 0) => {
   const halfWidth = pcb_component.width / 2;
   const halfHeight = pcb_component.height / 2;
@@ -8353,7 +8642,7 @@ var EditPlacementOverlay = ({
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode);
   const setIsMovingComponent = useGlobalStore((s) => s.setIsMovingComponent);
   const disabled = disabledProp || !in_move_footprint_mode;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: containerRef,
@@ -8439,7 +8728,7 @@ var EditPlacementOverlay = ({
         !disabled && soup.filter((e) => e.type === "pcb_component").map((e) => {
           if (!e?.center) return null;
           const projectedCenter = applyToPoint11(transform, e.center);
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             "div",
             {
               style: {
@@ -8502,10 +8791,10 @@ var getPopupPosition = (errorCenter, containerRef) => {
 };
 
 // src/components/FocusMarkerSVG.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FocusMarkerSVG = ({
   center
-}) => /* @__PURE__ */ jsxs5(
+}) => /* @__PURE__ */ jsxs6(
   "svg",
   {
     style: {
@@ -8519,7 +8808,7 @@ var FocusMarkerSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "circle",
         {
           cx: center.x,
@@ -8531,8 +8820,8 @@ var FocusMarkerSVG = ({
           opacity: 0.95
         }
       ),
-      /* @__PURE__ */ jsx7("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x - 18,
@@ -8543,7 +8832,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x + 8,
@@ -8554,7 +8843,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8565,7 +8854,7 @@ var FocusMarkerSVG = ({
           strokeWidth: 2
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "line",
         {
           x1: center.x,
@@ -8581,11 +8870,11 @@ var FocusMarkerSVG = ({
 );
 
 // src/components/ErrorOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var ErrorMarkerSVG = ({
   errorCenter,
   isHighlighted = false
-}) => /* @__PURE__ */ jsx8(
+}) => /* @__PURE__ */ jsx9(
   "svg",
   {
     style: {
@@ -8598,7 +8887,7 @@ var ErrorMarkerSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx9(
       "rect",
       {
         x: errorCenter.x - 7,
@@ -8642,7 +8931,7 @@ var ErrorOverlay = ({
   );
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
   if (!elements) {
-    return /* @__PURE__ */ jsx8("div", { style: { position: "relative" }, ref: containerRef, children });
+    return /* @__PURE__ */ jsx9("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")
@@ -8675,7 +8964,7 @@ var ErrorOverlay = ({
       focusedErrorElement
     );
   }
-  return /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     traceErrors.map((el, index) => {
       const errorId = getErrorId(el, index);
@@ -8684,15 +8973,15 @@ var ErrorOverlay = ({
       const errorCenter = getScreenErrorCenter(el);
       if (!errorCenter) return null;
       const popupPosition = getPopupPosition(errorCenter, containerRef);
-      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -8727,7 +9016,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -8745,7 +9034,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -8770,15 +9059,15 @@ var ErrorOverlay = ({
         { x: errorCenter.x, y: errorCenter.y },
         containerRef
       );
-      return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
           ErrorMarkerSVG,
           {
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -8813,7 +9102,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -8831,7 +9120,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -8880,8 +9169,8 @@ var ErrorOverlay = ({
           Math.min(maxRadius, baseRadius * scale7)
         );
         const popupPosition = getPopupPosition(screenCenter, containerRef);
-        return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsx9(
             "svg",
             {
               style: {
@@ -8894,13 +9183,13 @@ var ErrorOverlay = ({
               },
               width: "100%",
               height: "100%",
-              children: isHighlighted ? /* @__PURE__ */ jsx8(
+              children: isHighlighted ? /* @__PURE__ */ jsx9(
                 "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__ */ jsx8(
+              ) : /* @__PURE__ */ jsx9(
                 "circle",
                 {
                   cx: screenCenter.x,
@@ -8914,7 +9203,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -8949,7 +9238,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -8967,7 +9256,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -8983,7 +9272,7 @@ var ErrorOverlay = ({
         ] }, `${errorId}_${compIndex}`);
       });
     }),
-    focusScreenCenter && /* @__PURE__ */ jsx8(FocusMarkerSVG, { center: focusScreenCenter })
+    focusScreenCenter && /* @__PURE__ */ jsx9(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
 
@@ -8998,7 +9287,7 @@ function ifSetsMatchExactly(set1, set2) {
 }
 
 // src/components/MouseElementTracker.tsx
-import { useEffect as useEffect10, useMemo as useMemo5, useState as useState7 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useState as useState7 } from "react";
 import { applyToPoint as applyToPoint15, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/common/guards.ts
@@ -9034,7 +9323,7 @@ var COLORS = {
 };
 
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var AnchorOffsetOverlay = ({
   targets,
   transform,
@@ -9057,7 +9346,7 @@ var AnchorOffsetOverlay = ({
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       style: {
@@ -9070,7 +9359,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         "svg",
         {
           style: {
@@ -9100,8 +9389,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__ */ jsxs7("g", { children: [
-                /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsxs8("g", { children: [
+                /* @__PURE__ */ jsx10(
                   "line",
                   {
                     x1: anchorMarkerScreen.x,
@@ -9113,7 +9402,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -9125,7 +9414,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx9(
+                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx10(
                   "circle",
                   {
                     cx: targetScreen.x,
@@ -9137,8 +9426,8 @@ var AnchorOffsetOverlay = ({
                   }
                 ) : (
                   // assumes "group"
-                  /* @__PURE__ */ jsxs7(Fragment3, { children: [
-                    /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                    /* @__PURE__ */ jsx10(
                       "line",
                       {
                         x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -9149,7 +9438,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -9162,7 +9451,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx9(
+                shouldShowXLabel && /* @__PURE__ */ jsx10(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -9170,10 +9459,10 @@ var AnchorOffsetOverlay = ({
                     width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
                     height: 20,
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx9("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                    children: /* @__PURE__ */ jsx10("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
                   }
                 ),
-                shouldShowYLabel && /* @__PURE__ */ jsx9(
+                shouldShowYLabel && /* @__PURE__ */ jsx10(
                   "foreignObject",
                   {
                     x: targetScreen.x + yLabelOffset,
@@ -9181,7 +9470,7 @@ var AnchorOffsetOverlay = ({
                     width: VISUAL_CONFIG.Y_LABEL_MIN_WIDTH,
                     height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx10(
                       "div",
                       {
                         style: {
@@ -9200,8 +9489,8 @@ var AnchorOffsetOverlay = ({
                 )
               ] }, target.id);
             }),
-            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs7("g", { children: [
-              /* @__PURE__ */ jsx9(
+            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs8("g", { children: [
+              /* @__PURE__ */ jsx10(
                 "line",
                 {
                   x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -9212,7 +9501,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -9232,7 +9521,7 @@ var AnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/BoardAnchorOffsetOverlay.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var BoardAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9319,7 +9608,7 @@ var BoardAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -9331,7 +9620,7 @@ var BoardAnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/GroupAnchorOffsetOverlay.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9447,7 +9736,7 @@ var GroupAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -9460,7 +9749,7 @@ var GroupAnchorOffsetOverlay = ({
 
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
 import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
   const padsAndHoles = elements.filter(
@@ -9503,7 +9792,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -9516,7 +9805,7 @@ var ComponentBoundingBoxOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "svg",
         {
           style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
@@ -9542,8 +9831,8 @@ var ComponentBoundingBoxOverlay = ({
               y: (bbox.minY + bbox.maxY) / 2
             };
             const componentCenterScreen = applyToPoint14(transform, componentCenter);
-            return /* @__PURE__ */ jsxs8("g", { children: [
-              /* @__PURE__ */ jsx12(
+            return /* @__PURE__ */ jsxs9("g", { children: [
+              /* @__PURE__ */ jsx13(
                 "rect",
                 {
                   x: screenBbox.x,
@@ -9556,7 +9845,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -9567,7 +9856,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -9578,7 +9867,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -9598,7 +9887,7 @@ var ComponentBoundingBoxOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/PanelAnchorOffsetOverlay.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var PanelAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -9647,7 +9936,7 @@ var PanelAnchorOffsetOverlay = ({
       display_offset_y: target.board.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -9737,7 +10026,7 @@ function filterTracesIfMultiple(filterTraces) {
 
 // src/components/ElementOverlayBox.tsx
 import { useEffect as useEffect9, useState as useState6 } from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var containerStyle = {
   position: "absolute",
   left: 0,
@@ -9828,7 +10117,7 @@ var HighlightedPrimitiveBoxWithText = ({
     const traceTextContext = { primitiveElement, elements };
     const overlayInfo = getTraceOverlayInfo(traceTextContext);
     if (!overlayInfo) return null;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         style: {
@@ -9839,7 +10128,7 @@ var HighlightedPrimitiveBoxWithText = ({
           color: color8,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -9856,8 +10145,8 @@ var HighlightedPrimitiveBoxWithText = ({
               whiteSpace: "nowrap"
             },
             children: [
-              overlayInfo.text && /* @__PURE__ */ jsx14("div", { children: overlayInfo.text }),
-              overlayInfo.name && /* @__PURE__ */ jsx14(
+              overlayInfo.text && /* @__PURE__ */ jsx15("div", { children: overlayInfo.text }),
+              overlayInfo.name && /* @__PURE__ */ jsx15(
                 "div",
                 {
                   style: {
@@ -9876,7 +10165,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       style: {
@@ -9890,7 +10179,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -9906,7 +10195,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__ */ jsx14(
+          children: /* @__PURE__ */ jsx15(
             "div",
             {
               style: {
@@ -9954,7 +10243,7 @@ var ElementOverlayBox = ({
     is_showing_multiple_traces_length,
     elements
   });
-  return /* @__PURE__ */ jsx14("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive) => /* @__PURE__ */ jsx15(
     HighlightedPrimitiveBoxWithText,
     {
       primitive,
@@ -9966,7 +10255,7 @@ var ElementOverlayBox = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -10089,7 +10378,7 @@ var MouseElementTracker = ({
     setMousedPrimitives([]);
     onMouseHoverOverPrimitives([]);
   }, [selectedLayer, onMouseHoverOverPrimitives]);
-  const highlightedPrimitives = useMemo5(() => {
+  const highlightedPrimitives = useMemo6(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
       if (primitive._element?.type === "pcb_via") continue;
@@ -10169,7 +10458,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -10193,7 +10482,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           ElementOverlayBox,
           {
             elements,
@@ -10201,8 +10490,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-          /* @__PURE__ */ jsx15(
+        transform && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx16(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -10212,7 +10501,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -10222,7 +10511,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -10232,7 +10521,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -10252,7 +10541,7 @@ var MouseElementTracker = ({
 import { applyToPoint as applyToPoint16 } 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";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -10488,14 +10777,14 @@ var PcbGroupOverlay = ({
     is_showing_group_anchor_offsets,
     hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "canvas",
           {
             ref: canvasRef,
@@ -10516,15 +10805,15 @@ var PcbGroupOverlay = ({
 
 // src/components/RatsNestOverlay.tsx
 import { applyToPoint as applyToPoint17, identity as identity7 } from "transformation-matrix";
-import { useMemo as useMemo6 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
-  const { netMap, idToNetMap } = useMemo6(
+  const { netMap, idToNetMap } = useMemo7(
     () => getFullConnectivityMapFromCircuitJson(soup || []),
     [soup]
   );
-  const ratsNestLines = useMemo6(() => {
+  const ratsNestLines = useMemo7(() => {
     if (!soup || !isShowingRatsNest) return [];
     const getElementPosition = (id) => {
       const element = su(soup)[id.replace(/_\d+$/, "")].get(id);
@@ -10580,9 +10869,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity7();
-  return /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "svg",
       {
         style: {
@@ -10598,7 +10887,7 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
           const transformedStart = applyToPoint17(transform, startPoint);
           const transformedEnd = applyToPoint17(transform, endPoint);
-          return /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsx18(
             "line",
             {
               x1: transformedStart.x,
@@ -10619,18 +10908,18 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 
 // src/components/ToolbarOverlay.tsx
 import {
-  useEffect as useEffect15,
-  useState as useState10,
+  useEffect as useEffect16,
+  useState as useState11,
   useCallback as useCallback10,
-  useRef as useRef12,
+  useRef as useRef13,
   useLayoutEffect as useLayoutEffect2
 } from "react";
-import { css as css2 } from "@emotion/css";
+import { css as css3 } from "@emotion/css";
 
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.393",
+  version: "1.11.395",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -10663,6 +10952,7 @@ var package_default = {
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
     "@types/react": "19",
+    "@types/react-dom": "~19.1.0",
     "format-si-unit": "^0.0.12",
     next: "^14.1.4",
     "pixi.js": "^8.6.6",
@@ -10787,8 +11077,228 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
   };
 };
 
+// src/components/VisibilityContextMenu.tsx
+var import_react_dom = __toESM(require_react_dom(), 1);
+import { css as css2 } from "@emotion/css";
+import { useEffect as useEffect14, useRef as useRef11, useState as useState9 } from "react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var menuStyle = css2`
+  background: #222;
+  color: #eee;
+  border: 1px solid #555;
+  border-radius: 4px;
+  padding: 4px;
+  font: 12px sans-serif;
+  box-shadow: 0 4px 16px #0008;
+`;
+var itemStyle = css2`
+  display: block;
+  width: 100%;
+  padding: 8px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  &:hover, &:focus-visible { background: #444; }
+`;
+var VisibilityContextMenu = ({
+  position,
+  onClose
+}) => {
+  const opacity = useGlobalStore((s) => s.hidden_layer_opacity);
+  const setOpacity = useGlobalStore((s) => s.setHiddenLayerOpacity);
+  const [visibilityOpen, setVisibilityOpen] = useState9(false);
+  const [opacityOpen, setOpacityOpen] = useState9(false);
+  const ref = useRef11(null);
+  const stacked = window.innerWidth < 480;
+  const openLeft = !stacked && position.x + 460 > window.innerWidth;
+  const submenuStyle = stacked ? { position: "relative" } : {
+    position: "absolute",
+    top: 0,
+    ...openLeft ? { right: "100%" } : { left: "100%" }
+  };
+  useEffect14(() => {
+    const dismiss = (event) => {
+      if (!ref.current?.contains(event.target)) onClose();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    ref.current?.querySelector("button")?.focus();
+    window.addEventListener("pointerdown", dismiss, true);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", onClose);
+    window.addEventListener("scroll", onClose, true);
+    return () => {
+      window.removeEventListener("pointerdown", dismiss, true);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", onClose);
+      window.removeEventListener("scroll", onClose, true);
+    };
+  }, [onClose]);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ jsx19(
+      "div",
+      {
+        ref,
+        role: "menu",
+        "aria-label": "PCB context menu",
+        className: menuStyle,
+        onContextMenu: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onPointerDown: (event) => event.stopPropagation(),
+        onMouseDown: (event) => event.stopPropagation(),
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          event.stopPropagation();
+          const button = event.target.closest("button");
+          if (!button) return;
+          const menu = button.closest('[role="menu"]');
+          const items = Array.from(menu.querySelectorAll("button")).filter(
+            (item) => item.closest('[role="menu"]') === menu
+          );
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            items[(items.indexOf(button) + step + items.length) % items.length]?.focus();
+          } else if (event.key === "ArrowRight" && button.hasAttribute("aria-haspopup")) {
+            event.preventDefault();
+            button.click();
+            requestAnimationFrame(
+              () => button.parentElement?.querySelector('[role="menu"] button')?.focus()
+            );
+          } else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            menu.parentElement?.querySelector(":scope > button")?.focus();
+            if (menu.getAttribute("aria-label") === "Hidden Layer Visibility")
+              setOpacityOpen(false);
+            else if (menu.getAttribute("aria-label") === "Visibility")
+              setVisibilityOpen(false);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            onClose();
+          }
+        },
+        style: {
+          position: "fixed",
+          zIndex: 1e4,
+          left: Math.max(
+            openLeft ? 310 : 4,
+            Math.min(position.x, window.innerWidth - (stacked ? 248 : 148))
+          ),
+          top: Math.max(
+            4,
+            Math.min(position.y, window.innerHeight - (stacked ? 340 : 260))
+          ),
+          width: stacked ? 230 : 130,
+          maxHeight: window.innerHeight - 8,
+          ...stacked ? { overflowY: "auto" } : {}
+        },
+        children: /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            style: { position: "relative" },
+            onMouseEnter: () => setVisibilityOpen(true),
+            children: [
+              /* @__PURE__ */ jsx19(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  "aria-haspopup": "menu",
+                  "aria-expanded": visibilityOpen,
+                  className: itemStyle,
+                  onClick: () => setVisibilityOpen(true),
+                  children: "Visibility \u25B8"
+                }
+              ),
+              visibilityOpen && /* @__PURE__ */ jsx19(
+                "div",
+                {
+                  role: "menu",
+                  "aria-label": "Visibility",
+                  className: menuStyle,
+                  style: submenuStyle,
+                  children: /* @__PURE__ */ jsxs14(
+                    "div",
+                    {
+                      style: { position: "relative" },
+                      onMouseEnter: () => setOpacityOpen(true),
+                      children: [
+                        /* @__PURE__ */ jsx19(
+                          "button",
+                          {
+                            type: "button",
+                            role: "menuitem",
+                            "aria-haspopup": "menu",
+                            "aria-expanded": opacityOpen,
+                            className: itemStyle,
+                            onClick: () => setOpacityOpen(true),
+                            children: "Hidden Layer Visibility \u25B8"
+                          }
+                        ),
+                        opacityOpen && /* @__PURE__ */ jsx19(
+                          "div",
+                          {
+                            role: "menu",
+                            "aria-label": "Hidden Layer Visibility",
+                            className: menuStyle,
+                            style: {
+                              minWidth: 80,
+                              ...submenuStyle
+                            },
+                            children: [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs14(
+                              "button",
+                              {
+                                type: "button",
+                                role: "menuitemradio",
+                                "aria-checked": opacity === value,
+                                className: itemStyle,
+                                onClick: () => {
+                                  setOpacity(value);
+                                  onClose();
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx19(
+                                    "span",
+                                    {
+                                      "aria-hidden": "true",
+                                      style: { display: "inline-block", width: 16 },
+                                      children: opacity === value ? "\u2713" : ""
+                                    }
+                                  ),
+                                  value === 0 ? "Hide" : `${value * 100}%`
+                                ]
+                              },
+                              value
+                            ))
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+
 // src/components/ToolbarButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -10796,7 +11306,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...props,
@@ -10824,7 +11334,7 @@ var ToolbarButton = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useState as useState9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo8, useState as useState10 } from "react";
 
 // src/lib/util/group-errors-by-type.ts
 var groupErrorsByType = (errors) => {
@@ -10846,16 +11356,16 @@ var groupErrorsByType = (errors) => {
 };
 
 // src/components/useToolbarErrorFocus.ts
-import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef12 } from "react";
 var useToolbarErrorFocus = ({
   onClose,
   setHoveredErrorId,
   setFocusedErrorId,
   highlightDurationMs = 3e3
 }) => {
-  const clearHighlightTimeoutRef = useRef11(null);
-  const focusRequestRef = useRef11(null);
-  const selectedErrorIdRef = useRef11(null);
+  const clearHighlightTimeoutRef = useRef12(null);
+  const focusRequestRef = useRef12(null);
+  const selectedErrorIdRef = useRef12(null);
   const clearPendingSelection = useCallback8(() => {
     if (clearHighlightTimeoutRef.current !== null) {
       window.clearTimeout(clearHighlightTimeoutRef.current);
@@ -10866,7 +11376,7 @@ var useToolbarErrorFocus = ({
       focusRequestRef.current = null;
     }
   }, []);
-  useEffect14(() => clearPendingSelection, [clearPendingSelection]);
+  useEffect15(() => clearPendingSelection, [clearPendingSelection]);
   const handleErrorSelect = useCallback8(
     (errorId) => {
       clearPendingSelection();
@@ -10904,7 +11414,7 @@ var useToolbarErrorFocus = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var CopyErrorButton = ({
   errorId,
   errorMessage,
@@ -10914,7 +11424,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -10934,7 +11444,7 @@ var CopyErrorButton = ({
         ...touchStyle
       },
       ...touchHandlers,
-      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" }) })
+      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" }) })
     }
   );
 };
@@ -10947,11 +11457,11 @@ var ToolbarErrorDropdown = ({
   setHoveredErrorId,
   setFocusedErrorId
 }) => {
-  const [copiedErrorId, setCopiedErrorId] = useState9(null);
-  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState9(
+  const [copiedErrorId, setCopiedErrorId] = useState10(null);
+  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
     /* @__PURE__ */ new Set()
   );
-  const [expandedErrorIds, setExpandedErrorIds] = useState9(
+  const [expandedErrorIds, setExpandedErrorIds] = useState10(
     /* @__PURE__ */ new Set()
   );
   const [, copyToClipboard] = useCopyToClipboard_default();
@@ -10960,14 +11470,14 @@ var ToolbarErrorDropdown = ({
     setHoveredErrorId,
     setFocusedErrorId
   });
-  const errorElements = useMemo7(
+  const errorElements = useMemo8(
     () => elements?.filter(
       (el) => el.type.includes("error")
     ) ?? [],
     [elements]
   );
   const errorCount = errorElements.length;
-  const groupedErrorElements = useMemo7(
+  const groupedErrorElements = useMemo8(
     () => groupErrorsByType(errorElements),
     [errorElements]
   );
@@ -10993,20 +11503,20 @@ var ToolbarErrorDropdown = ({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs15("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx21(
       ToolbarButton,
       {
         isSmallScreen,
         style: errorCount > 0 ? { color: "red" } : void 0,
         onClick: onToggle,
-        children: /* @__PURE__ */ jsxs13("div", { children: [
+        children: /* @__PURE__ */ jsxs15("div", { children: [
           errorCount,
           " errors"
         ] })
       }
     ),
-    isOpen && errorCount > 0 && /* @__PURE__ */ jsx19(
+    isOpen && errorCount > 0 && /* @__PURE__ */ jsx21(
       "div",
       {
         style: {
@@ -11026,14 +11536,14 @@ var ToolbarErrorDropdown = ({
         },
         children: groupedErrorElements.map(({ errorType, errors }, groupIndex) => {
           const isGroupCollapsed = collapsedErrorGroups.has(errorType);
-          return /* @__PURE__ */ jsxs13(
+          return /* @__PURE__ */ jsxs15(
             "div",
             {
               style: {
                 borderBottom: groupIndex < groupedErrorElements.length - 1 ? "1px solid #444" : "none"
               },
               children: [
-                /* @__PURE__ */ jsxs13(
+                /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     style: {
@@ -11070,7 +11580,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs13(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -11080,7 +11590,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx19(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11093,7 +11603,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx19(
+                            /* @__PURE__ */ jsx21(
                               "div",
                               {
                                 style: {
@@ -11106,7 +11616,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx19(
+                      /* @__PURE__ */ jsx21(
                         "div",
                         {
                           style: {
@@ -11124,14 +11634,14 @@ var ToolbarErrorDropdown = ({
                 !isGroupCollapsed && errors.map(({ error, index, errorId }) => {
                   const isExpanded = expandedErrorIds.has(errorId);
                   const errorMessage = error.message ?? "No error message";
-                  return /* @__PURE__ */ jsxs13(
+                  return /* @__PURE__ */ jsxs15(
                     "div",
                     {
                       style: {
                         borderTop: "1px solid #3a3a3a"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs13(
+                        /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             style: {
@@ -11170,7 +11680,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx19(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11186,7 +11696,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx19(
+                              /* @__PURE__ */ jsx21(
                                 "button",
                                 {
                                   type: "button",
@@ -11218,7 +11728,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs13(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -11230,7 +11740,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx19(
+                              /* @__PURE__ */ jsx21(
                                 "div",
                                 {
                                   style: {
@@ -11248,7 +11758,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx19(
+                              /* @__PURE__ */ jsx21(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -11280,13 +11790,13 @@ var ToolbarErrorDropdown = ({
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: css2`
+      className: css3`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -11300,8 +11810,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx20("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx22(
           "span",
           {
             style: {
@@ -11322,10 +11832,10 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      className: css2`
+      className: css3`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -11342,19 +11852,19 @@ 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__ */ jsxs16(
     "div",
     {
-      className: css2`
+      className: css3`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -11371,9 +11881,9 @@ 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 })
       ]
     }
   );
@@ -11440,12 +11950,14 @@ var ToolbarOverlay = ({ children, elements }) => {
     setHoveredErrorId: s.setHoveredErrorId,
     setFocusedErrorId: s.setFocusedErrorId
   }));
-  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 [contextMenuPosition, setContextMenuPosition] = useState11(null);
+  const closeContextMenu = useCallback10(() => setContextMenuPosition(null), []);
+  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);
+  useEffect16(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     const armBounds = () => setBoundsToolArmed(true);
@@ -11463,8 +11975,8 @@ var ToolbarOverlay = ({ children, elements }) => {
   }, []);
   const availableLayers = getCopperLayerRefsFromElements(elements ?? []);
   const processedLayers = availableLayers;
-  const hasRunInitialMouseCheck = useRef12(false);
-  const hotkeyBoundaryRef = useRef12(null);
+  const hasRunInitialMouseCheck = useRef13(false);
+  const hotkeyBoundaryRef = useRef13(null);
   const hotKeyCallbacks = {
     "1": availableLayers[0] ? () => selectLayer(availableLayers[0]) : () => {
     },
@@ -11571,17 +12083,29 @@ var ToolbarOverlay = ({ children, elements }) => {
     },
     []
   );
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: hotkeyBoundaryRef,
+      onContextMenu: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+      },
       style: { position: "relative", zIndex: "999 !important" },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs14(
+        contextMenuPosition && /* @__PURE__ */ jsx22(
+          VisibilityContextMenu,
+          {
+            position: contextMenuPosition,
+            onClose: closeContextMenu
+          }
+        ),
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
@@ -11602,7 +12126,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -11633,7 +12157,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs14(
+              /* @__PURE__ */ jsxs16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -11644,10 +12168,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsxs16("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         "span",
                         {
                           style: {
@@ -11659,7 +12183,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,
@@ -11673,7 +12197,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -11685,43 +12209,43 @@ var ToolbarOverlay = ({ children, elements }) => {
                   setFocusedErrorId
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
+                  children: /* @__PURE__ */ jsxs16("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,
                   style: boundsToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleBoundsToolClick,
-                  children: /* @__PURE__ */ jsx20("div", { children: "Bounds" })
+                  children: /* @__PURE__ */ jsx22("div", { children: "Bounds" })
                 }
               ),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs14("div", { children: [
-                    /* @__PURE__ */ jsxs14(
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs16(
                       "div",
                       {
                         style: {
@@ -11731,7 +12255,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx20(
+                          /* @__PURE__ */ jsx22(
                             "span",
                             {
                               style: {
@@ -11746,8 +12270,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs14("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx20(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -11759,7 +12283,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -11771,7 +12295,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -11781,7 +12305,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Warnings",
@@ -11793,7 +12317,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -11805,7 +12329,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -11815,7 +12339,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -11825,7 +12349,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -11835,7 +12359,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -11847,7 +12371,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -11857,7 +12381,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -11869,7 +12393,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx20(
+                      /* @__PURE__ */ jsx22(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -11879,8 +12403,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__ */ jsxs16("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -11890,7 +12414,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx20(
+                        /* @__PURE__ */ jsx22(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -11914,7 +12438,7 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/WarningGraphicsOverlay.tsx
-import { useEffect as useEffect16, useRef as useRef13 } from "react";
+import { useEffect as useEffect17, useRef as useRef14 } from "react";
 import { applyToPoint as applyToPoint18, identity as identity8 } from "transformation-matrix";
 
 // src/lib/util/get-pcb-warning-highlight.ts
@@ -11927,18 +12451,18 @@ var getPcbWarningHighlightLabel = (warning) => {
 };
 
 // src/components/WarningGraphicsOverlay.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
   children,
   transform = identity8(),
   elements = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef13(null);
+  const canvasRef = useRef14(null);
   const isShowingDrcWarnings = useGlobalStore(
     (state) => state.is_showing_drc_warnings
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -11989,7 +12513,7 @@ var WarningGraphicsOverlay = ({
     });
   }, [elements, transform, width, height, isShowingDrcWarnings]);
   if (!isShowingDrcWarnings) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref: containerRef,
@@ -11998,14 +12522,14 @@ var WarningGraphicsOverlay = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "canvas",
           {
             ref: canvasRef,
@@ -12024,7 +12548,7 @@ var WarningGraphicsOverlay = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const {
@@ -12039,11 +12563,11 @@ var CanvasElementsRenderer = (props) => {
     selectedLayer: state.selected_layer
   }));
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
-  const elementsToRender = useMemo8(
+  const elementsToRender = useMemo9(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
   );
-  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo8(() => {
+  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo9(() => {
     const primitivesWithoutInteractionMetadata2 = elementsToRender.flatMap(
       (elm) => convertElementToPrimitives(elm, props.elements)
     );
@@ -12052,18 +12576,18 @@ 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 currentTransformRef = useRef14(transform ?? null);
-  const zoomAnimationFrameRef = useRef14(null);
-  const elementIndexes = useMemo8(
+  const [hoveredComponentIds, setHoveredComponentIds] = useState12([]);
+  const currentTransformRef = useRef15(transform ?? null);
+  const zoomAnimationFrameRef = useRef15(null);
+  const elementIndexes = useMemo9(
     () => buildErrorPreviewElementIndexes(elements),
     [elements]
   );
-  const errorRelatedIds = useMemo8(() => {
+  const errorRelatedIds = useMemo9(() => {
     if (!activeErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -12074,17 +12598,17 @@ var CanvasElementsRenderer = (props) => {
     if (!activeError) return [];
     return getRelatedIdsForError(activeError);
   }, [activeErrorId, elements]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (transform) {
       currentTransformRef.current = transform;
     }
   }, [transform]);
-  useEffect17(() => {
+  useEffect18(() => {
     return () => {
       cancelTransformAnimation(zoomAnimationFrameRef.current);
     };
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!props.width || !props.height || !props.setTransform || !focusedErrorId)
       return;
     const focusedError = findErrorElementById(elements, focusedErrorId);
@@ -12122,7 +12646,7 @@ var CanvasElementsRenderer = (props) => {
     props.setTransform,
     props.width
   ]);
-  const primitives = useMemo8(() => {
+  const primitives = useMemo9(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -12166,7 +12690,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -12174,7 +12698,7 @@ var CanvasElementsRenderer = (props) => {
       primitives: primitivesWithoutInteractionMetadata,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx24(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -12183,7 +12707,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx24(
             DimensionOverlay,
             {
               transform,
@@ -12191,23 +12715,23 @@ var CanvasElementsRenderer = (props) => {
               primitives: primitivesWithoutInteractionMetadata,
               onBoundsSelected: props.onBoundsSelected,
               cancelPanDrag: props.cancelPanDrag,
-              children: /* @__PURE__ */ jsx22(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx22(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx22(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx22(
+              children: /* @__PURE__ */ jsx24(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx24(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx24(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx24(
                 PcbGroupOverlay,
                 {
                   transform,
                   elements,
                   hoveredComponentIds,
-                  children: /* @__PURE__ */ jsx22(
+                  children: /* @__PURE__ */ jsx24(
                     DebugGraphicsOverlay,
                     {
                       transform,
                       debugGraphics: props.debugGraphics,
-                      children: /* @__PURE__ */ jsx22(
+                      children: /* @__PURE__ */ jsx24(
                         WarningGraphicsOverlay,
                         {
                           transform,
                           elements,
-                          children: /* @__PURE__ */ jsx22(
+                          children: /* @__PURE__ */ jsx24(
                             CanvasPrimitiveRenderer,
                             {
                               transform,
@@ -12287,7 +12811,7 @@ var calculateBoardSizeKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var defaultTransform = compose8(translate12(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -12302,11 +12826,11 @@ 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 [transform, setTransformInternal] = useState13(defaultTransform);
   const shouldAllowCanvasInteraction = useCallback12(
     (event) => {
       const target = event.target;
@@ -12325,11 +12849,11 @@ var PCBViewer = ({
     enabled: isInteractionEnabled,
     shouldDrag: shouldAllowCanvasInteraction
   });
-  let [editEvents, setEditEvents] = useState12([]);
+  let [editEvents, setEditEvents] = useState13([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef15(false);
-  const touchStartRef = useRef15(null);
-  const circuitJsonKey = useMemo9(
+  const initialRenderCompleted = useRef16(false);
+  const touchStartRef = useRef16(null);
+  const circuitJsonKey = useMemo10(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -12354,7 +12878,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -12363,17 +12887,17 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
   }, [boardSizeKey]);
-  const pcbElmsPreEdit = useMemo9(() => {
+  const pcbElmsPreEdit = useMemo10(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
   }, [circuitJsonKey]);
-  const elements = useMemo9(() => {
+  const elements = useMemo10(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
@@ -12390,27 +12914,27 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo9(
+  const mergedInitialState = useMemo10(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx25("div", { ref, children: /* @__PURE__ */ jsxs18(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx25(
                 CanvasElementsRenderer,
                 {
                   transform,
@@ -12437,11 +12961,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx23(ToastContainer, {})
+              /* @__PURE__ */ jsx25(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx23(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
           "div",
           {
             onClick: () => {
@@ -12478,7 +13002,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {
@@ -12511,5 +13035,16 @@ svgson/dist/svgson.umd.js:
    * @author   Feross Aboukhadijeh <https://feross.org>
    * @license  MIT
    *)
+
+react-dom/cjs/react-dom.development.js:
+  (**
+   * @license React
+   * react-dom.development.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
 */
 //# sourceMappingURL=index.js.map