@tscircuit/3d-viewer 0.0.566 → 0.0.567

package/dist/index.js

@@ -14432,8 +14432,8 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState36, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect45 } from "react";
-import * as THREE43 from "three";
+import { useState as useState37, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect47 } from "react";
+import * as THREE44 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
@@ -32321,7 +32321,7 @@ import * as THREE20 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.565",
+  version: "0.0.566",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32351,7 +32351,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.421",
-    "circuit-to-canvas": "^0.0.102",
+    "circuit-to-canvas": "^0.0.110",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -35150,7 +35150,7 @@ import { su as su8 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -35255,7 +35255,7 @@ function createPadTextureForLayer({
       drill: transparent,
       boardOutline: transparent,
       substrate: transparent,
-      keepout: transparent,
+      keepout: { top: transparent, bottom: transparent },
       fabricationNote: transparent,
       courtyard: { top: transparent, bottom: transparent },
       silkscreen: { top: transparent, bottom: transparent },
@@ -35461,7 +35461,7 @@ function createTraceTextureForLayer({
       drill: transparent,
       boardOutline: transparent,
       substrate: transparent,
-      keepout: transparent,
+      keepout: { top: transparent, bottom: transparent },
       fabricationNote: transparent,
       courtyard: { top: transparent, bottom: transparent },
       silkscreen: { top: transparent, bottom: transparent },
@@ -35693,7 +35693,7 @@ function createCopperPourTextureForLayer({
         drill: transparent,
         boardOutline: transparent,
         substrate: transparent,
-        keepout: transparent,
+        keepout: { top: transparent, bottom: transparent },
         fabricationNote: transparent,
         courtyard: { top: transparent, bottom: transparent },
         silkscreen: { top: transparent, bottom: transparent },
@@ -35868,7 +35868,7 @@ var drawFabricationNoteLayer = ({
       drill: TRANSPARENT,
       boardOutline: TRANSPARENT,
       substrate: TRANSPARENT,
-      keepout: TRANSPARENT,
+      keepout: { top: TRANSPARENT, bottom: TRANSPARENT },
       courtyard: {
         top: TRANSPARENT,
         bottom: TRANSPARENT
@@ -35984,12 +35984,11 @@ function createFabricationNoteTextureForLayer({
   return texture;
 }
 
-// src/textures/create-pcb-note-texture-for-layer.ts
+// src/textures/create-keepout-texture-for-layer.ts
 import * as THREE29 from "three";
 
-// src/textures/pcb-note/pcb-note-drawing.ts
+// src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
-var TRANSPARENT2 = "rgba(0,0,0,0)";
 var setDrawerBounds3 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -35998,6 +35997,92 @@ var setDrawerBounds3 = (drawer, bounds) => {
     maxY: bounds.maxY
   });
 };
+var drawKeepoutLayer = ({
+  ctx,
+  layer,
+  bounds,
+  elements,
+  keepoutColor
+}) => {
+  const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
+  const drawer = new CircuitToCanvasDrawer6(ctx);
+  drawer.configure({
+    colorOverrides: {
+      keepout: {
+        top: keepoutColor,
+        bottom: keepoutColor
+      }
+    }
+  });
+  setDrawerBounds3(drawer, bounds);
+  drawer.drawElements(elements, {
+    layers: [renderLayer],
+    drawSoldermask: false,
+    drawSoldermaskTop: false,
+    drawSoldermaskBottom: false
+  });
+};
+
+// src/textures/create-keepout-texture-for-layer.ts
+var isKeepoutOnLayer = (element, layer) => {
+  if (element.type !== "pcb_keepout") return false;
+  if (!("layers" in element) || !Array.isArray(element.layers)) return true;
+  return element.layers.includes(layer);
+};
+function createKeepoutTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceTextureResolution = TRACE_TEXTURE_RESOLUTION,
+  keepoutColor = layer === "bottom" ? "#4b72d2" : "#d24b4b"
+}) {
+  const elements = circuitJson.filter(
+    (element) => isKeepoutOnLayer(element, layer)
+  );
+  if (elements.length === 0) return null;
+  const bounds = calculateOutlineBounds(boardData);
+  const canvasWidth = Math.floor(bounds.width * traceTextureResolution);
+  const canvasHeight = Math.floor(bounds.height * traceTextureResolution);
+  if (canvasWidth <= 0 || canvasHeight <= 0) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
+  }
+  drawKeepoutLayer({
+    ctx,
+    layer,
+    bounds,
+    elements,
+    keepoutColor
+  });
+  const texture = new THREE29.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
+}
+
+// src/textures/create-pcb-note-texture-for-layer.ts
+import * as THREE30 from "three";
+
+// src/textures/pcb-note/pcb-note-drawing.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
+var TRANSPARENT2 = "rgba(0,0,0,0)";
+var setDrawerBounds4 = (drawer, bounds) => {
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY
+  });
+};
 var normalizePcbNoteElement = (element) => {
   if (element.type === "pcb_note_line") {
     return {
@@ -36067,7 +36152,7 @@ var drawPcbNoteLayer = ({
   elements
 }) => {
   const normalizedElements = elements.map(normalizePcbNoteElement);
-  const drawer = new CircuitToCanvasDrawer6(ctx);
+  const drawer = new CircuitToCanvasDrawer7(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -36084,7 +36169,7 @@ var drawPcbNoteLayer = ({
       drill: TRANSPARENT2,
       boardOutline: TRANSPARENT2,
       substrate: TRANSPARENT2,
-      keepout: TRANSPARENT2,
+      keepout: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
       courtyard: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
       soldermask: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
       soldermaskWithCopperUnderneath: {
@@ -36099,7 +36184,7 @@ var drawPcbNoteLayer = ({
       fabricationNote: TRANSPARENT2
     }
   });
-  setDrawerBounds3(drawer, bounds);
+  setDrawerBounds4(drawer, bounds);
   drawer.drawElements(normalizedElements);
 };
 
@@ -36136,23 +36221,23 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE29.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE29.LinearMipmapLinearFilter;
-  texture.magFilter = THREE29.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
 var FABRICATION_NOTE_COLOR2 = "rgb(255,243,204)";
 var TRANSPARENT3 = "rgba(0,0,0,0)";
-var setDrawerBounds4 = (drawer, bounds) => {
+var setDrawerBounds5 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -36168,7 +36253,7 @@ var drawSilkscreenLayer = ({
   silkscreenColor
 }) => {
   const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
-  const drawer = new CircuitToCanvasDrawer7(ctx);
+  const drawer = new CircuitToCanvasDrawer8(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -36188,7 +36273,7 @@ var drawSilkscreenLayer = ({
       drill: TRANSPARENT3,
       boardOutline: TRANSPARENT3,
       substrate: TRANSPARENT3,
-      keepout: TRANSPARENT3,
+      keepout: { top: TRANSPARENT3, bottom: TRANSPARENT3 },
       courtyard: {
         top: TRANSPARENT3,
         bottom: TRANSPARENT3
@@ -36212,7 +36297,7 @@ var drawSilkscreenLayer = ({
       fabricationNote: FABRICATION_NOTE_COLOR2
     }
   });
-  setDrawerBounds4(drawer, bounds);
+  setDrawerBounds5(drawer, bounds);
   drawer.drawElements(elements, {
     layers: [renderLayer]
   });
@@ -36255,20 +36340,20 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -36287,7 +36372,7 @@ var getSoldermaskPalette = (material) => {
     transparent: "rgba(0,0,0,0)"
   };
 };
-var setDrawerBounds5 = (drawer, bounds) => {
+var setDrawerBounds6 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -36304,7 +36389,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardMaterial);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer8(ctx);
+  const drawer = new CircuitToCanvasDrawer9(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -36320,7 +36405,7 @@ var drawSoldermaskLayer = ({
       drill: palette.transparent,
       boardOutline: palette.transparent,
       substrate: palette.transparent,
-      keepout: palette.transparent,
+      keepout: { top: palette.transparent, bottom: palette.transparent },
       fabricationNote: palette.transparent,
       silkscreen: { top: palette.transparent, bottom: palette.transparent },
       courtyard: { top: palette.transparent, bottom: palette.transparent },
@@ -36335,20 +36420,23 @@ var drawSoldermaskLayer = ({
       }
     }
   });
-  setDrawerBounds5(drawer, bounds);
-  drawer.drawElements(elements, {
+  setDrawerBounds6(drawer, bounds);
+  const elementsWithoutKeepouts = elements.filter(
+    (element) => element.type !== "pcb_keepout"
+  );
+  drawer.drawElements(elementsWithoutKeepouts, {
     layers: [copperRenderLayer],
     drawSoldermask: true,
     drawSoldermaskTop: layer === "top",
     drawSoldermaskBottom: layer === "bottom"
   });
-  const uncoveredPours = elements.filter(
+  const uncoveredPours = elementsWithoutKeepouts.filter(
     (e) => e.type === "pcb_copper_pour" && e.layer === layer && e.covered_with_solder_mask === false
   );
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer8(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer9(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -36363,7 +36451,7 @@ var drawSoldermaskLayer = ({
         }
       }
     });
-    setDrawerBounds5(cutoutDrawer, bounds);
+    setDrawerBounds6(cutoutDrawer, bounds);
     cutoutDrawer.drawElements(uncoveredPours, { layers: [copperRenderLayer] });
     ctx.restore();
   }
@@ -36397,21 +36485,21 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
-var setDrawerBounds6 = (drawer, bounds) => {
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
+var setDrawerBounds7 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -36428,7 +36516,7 @@ var drawThroughHoleLayer = ({
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
   const transparent = "rgba(0,0,0,0)";
-  const drawer = new CircuitToCanvasDrawer9(ctx);
+  const drawer = new CircuitToCanvasDrawer10(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -36444,7 +36532,7 @@ var drawThroughHoleLayer = ({
       drill: transparent,
       boardOutline: transparent,
       substrate: transparent,
-      keepout: transparent,
+      keepout: { top: transparent, bottom: transparent },
       fabricationNote: transparent,
       silkscreen: { top: transparent, bottom: transparent },
       courtyard: { top: transparent, bottom: transparent },
@@ -36459,7 +36547,7 @@ var drawThroughHoleLayer = ({
       }
     }
   });
-  setDrawerBounds6(drawer, bounds);
+  setDrawerBounds7(drawer, bounds);
   drawer.drawElements(elements, {
     layers: [renderLayer]
   });
@@ -36500,10 +36588,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -36541,10 +36629,10 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   });
-  const combinedTexture = new THREE33.CanvasTexture(canvas);
+  const combinedTexture = new THREE34.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE33.LinearFilter;
-  combinedTexture.magFilter = THREE33.LinearFilter;
+  combinedTexture.minFilter = THREE34.LinearFilter;
+  combinedTexture.magFilter = THREE34.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -36631,6 +36719,12 @@ function createCombinedBoardTextures({
       panelData: boardData,
       traceTextureResolution
     }) : null;
+    const keepoutTexture = createKeepoutTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      traceTextureResolution
+    });
     return createCombinedTexture({
       textures: [
         copperPourTexture,
@@ -36642,7 +36736,8 @@ function createCombinedBoardTextures({
         silkscreenTexture,
         fabricationNoteTexture,
         pcbNoteTexture,
-        panelOutlineTexture
+        panelOutlineTexture,
+        keepoutTexture
       ],
       boardData,
       traceTextureResolution
@@ -36656,7 +36751,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 function createTexturePlane(config, boardData) {
   const {
     texture,
@@ -36668,15 +36763,15 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE34.PlaneGeometry(
+  const planeGeom = new THREE35.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  const material = new THREE34.MeshBasicMaterial({
+  const material = new THREE35.MeshBasicMaterial({
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE34.FrontSide,
+    side: THREE35.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -36684,7 +36779,7 @@ function createTexturePlane(config, boardData) {
     polygonOffsetUnits: usePolygonOffset ? -4 : 0,
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   });
-  const mesh = new THREE34.Mesh(planeGeom, material);
+  const mesh = new THREE35.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -36729,7 +36824,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -36825,7 +36920,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE35.Texture) {
+        if (texture && texture instanceof THREE36.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -36835,22 +36930,22 @@ function JscadBoardTextures({
     const createTexturePlane2 = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = true, renderOrder = 1) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE35.PlaneGeometry(
+      const planeGeom = new THREE36.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      const material = new THREE35.MeshBasicMaterial({
+      const material = new THREE36.MeshBasicMaterial({
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE35.FrontSide,
+        side: THREE36.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
         polygonOffsetUnits: usePolygonOffset ? -4 : 0,
         opacity: isFaux ? FAUX_BOARD_OPACITY : 1
       });
-      const mesh = new THREE35.Mesh(planeGeom, material);
+      const mesh = new THREE36.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -36895,7 +36990,7 @@ function JscadBoardTextures({
         mesh.geometry.dispose();
         if (Array.isArray(mesh.material)) {
           mesh.material.forEach((material) => disposeTextureMaterial(material));
-        } else if (mesh.material instanceof THREE35.Material) {
+        } else if (mesh.material instanceof THREE36.Material) {
           disposeTextureMaterial(mesh.material);
         }
       });
@@ -37128,12 +37223,12 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect26, useMemo as useMemo22, useState as useState16 } from "react";
-import * as THREE42 from "three";
+import * as THREE43 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef9, useState as useState15 } from "react";
-import * as THREE39 from "three";
+import * as THREE40 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -37482,17 +37577,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE36.BufferGeometry();
+  const geometry = new THREE37.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE36.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE37.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE36.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE37.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
   if (manifoldMesh.runIndex && manifoldMesh.runIndex.length > 1 && manifoldMesh.runOriginalID) {
     for (let i = 0; i < manifoldMesh.runIndex.length - 1; i++) {
       const start = manifoldMesh.runIndex[i];
@@ -37526,7 +37621,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE37.Color(...colors.copper);
+var COPPER_COLOR = new THREE38.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -38157,7 +38252,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -38195,7 +38290,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE38.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE39.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -38415,7 +38510,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE39.Color(
+              color: new THREE40.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -38445,7 +38540,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE39.Color(
+          color: new THREE40.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -38490,11 +38585,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE41 from "three";
+import * as THREE42 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE40 from "three";
-var DEFAULT_SIDE = THREE40.DoubleSide;
+import * as THREE41 from "three";
+var DEFAULT_SIDE = THREE41.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -38502,7 +38597,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE40.MeshPhysicalMaterial({
+    return new THREE41.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -38519,7 +38614,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE40.MeshStandardMaterial({
+  return new THREE41.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -38538,12 +38633,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE41.Mesh(
+    const mesh = new THREE42.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE41.DoubleSide,
+        side: THREE42.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -38553,11 +38648,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE41.Mesh(
+        const mesh = new THREE42.Mesh(
           comp.geometry,
-          new THREE41.MeshStandardMaterial({
+          new THREE42.MeshStandardMaterial({
             color: comp.color,
-            side: THREE41.DoubleSide,
+            side: THREE42.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -38601,7 +38696,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE42.Texture) {
+        if (texture && texture instanceof THREE43.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -39244,7 +39339,7 @@ var ToastProvider = ({
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
 import * as React43 from "react";
@@ -39304,6 +39399,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React13.createContext(defaultContext);
+    BaseContext.displayName = rootComponentName + "Context";
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
@@ -39439,52 +39535,69 @@ import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React16 from "react";
-import { Fragment as Fragment22, jsx as jsx21 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
   const Slot2 = React16.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React16.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React16.Children.count(newElement) > 1) return React16.Children.only(null);
-          return React16.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx21(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
+    let { children, ...slotProps } = props;
+    let slottableElement = null;
+    let hasSlottable = false;
+    const newChildren = [];
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    React16.Children.forEach(children, (maybeSlottable) => {
+      if (isSlottable(maybeSlottable)) {
+        hasSlottable = true;
+        const slottable = maybeSlottable;
+        let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+        if (isLazyComponent(child) && typeof use === "function") {
+          child = use(child._payload);
+        }
+        slottableElement = getSlottableElementFromSlottable(slottable, child);
+        newChildren.push(slottableElement?.props?.children);
+      } else {
+        newChildren.push(maybeSlottable);
+      }
+    });
+    if (slottableElement) {
+      slottableElement = React16.cloneElement(slottableElement, void 0, newChildren);
+    } else if (
+      // A `Slottable` was found but it didn't resolve to a single element (e.g.
+      // it wrapped multiple elements, text, or a render-prop `child` that
+      // wasn't an element). Don't fall back to treating the `Slottable` wrapper
+      // itself as the slot target — throw a descriptive error below instead.
+      !hasSlottable && React16.Children.count(children) === 1 && React16.isValidElement(children)
+    ) {
+      slottableElement = children;
+    }
+    const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+    const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+    if (!slottableElement) {
+      if (children || children === 0) {
+        throw new Error(
+          hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName)
+        );
+      }
+      return children;
     }
-    return /* @__PURE__ */ jsx21(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+    if (slottableElement.type !== React16.Fragment) {
+      mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+    }
+    return React16.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
 }
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React16.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (React16.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React16.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React16.cloneElement(children, props2);
-    }
-    return React16.Children.count(children) > 1 ? React16.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
-function isSlottable(child) {
-  return React16.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol.for("radix.slottable");
+var getSlottableElementFromSlottable = (slottable, child) => {
+  if ("child" in slottable.props) {
+    const child2 = slottable.props.child;
+    if (!React16.isValidElement(child2)) return null;
+    return React16.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+  }
+  return React16.isValidElement(child) ? child : null;
+};
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
   for (const propName in childProps) {
@@ -39522,9 +39635,26 @@ function getElementRef(element) {
   }
   return element.props.ref || element.ref;
 }
+function isSlottable(child) {
+  return React16.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+var createSlotError = (ownerName) => {
+  return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+};
+var createSlottableError = (ownerName) => {
+  return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+};
+var use = React16[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var NODES = [
   "a",
   "button",
@@ -39552,7 +39682,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx22(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx21(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -39565,10 +39695,10 @@ function dispatchDiscreteCustomEvent(target, event) {
 import * as React42 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
-import React18 from "react";
+import * as React18 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import * as React23 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-import React23 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope3] = createContextScope(PROVIDER_NAME);
@@ -39580,7 +39710,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx23(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -39590,7 +39720,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx23(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -39607,7 +39737,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx23(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -39634,7 +39764,7 @@ function createCollection(name) {
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React19.useContext(DirectionContext);
@@ -39651,7 +39781,7 @@ function useCallbackRef(callback) {
   React20.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React20.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React20.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 
 // node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
@@ -39670,7 +39800,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -39679,12 +39809,19 @@ var originalBodyPointerEvents;
 var DismissableLayerContext = React24.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
-  branches: /* @__PURE__ */ new Set()
+  branches: /* @__PURE__ */ new Set(),
+  // Outside elements that belong to a layer's own dismiss affordance (eg, a
+  // dialog overlay). Pressing them should dismiss the layer regardless of
+  // whether or not they stop propagation.
+  //
+  // See https://github.com/radix-ui/primitives/issues/3346
+  dismissableSurfaces: /* @__PURE__ */ new Set()
 });
 var DismissableLayer = React24.forwardRef(
   (props, forwardedRef) => {
     const {
       disableOutsidePointerEvents = false,
+      deferPointerDownOutside = false,
       onEscapeKeyDown,
       onPointerDownOutside,
       onFocusOutside,
@@ -39703,15 +39840,32 @@ var DismissableLayer = React24.forwardRef(
     const index2 = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = usePointerDownOutside((event) => {
-      const target = event.target;
-      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
-      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-      onPointerDownOutside?.(event);
-      onInteractOutside?.(event);
-      if (!event.defaultPrevented) onDismiss?.();
-    }, ownerDocument);
+    const isDeferredPointerDownOutsideRef = React24.useRef(false);
+    const pointerDownOutside = usePointerDownOutside(
+      (event) => {
+        const target = event.target;
+        if (!(target instanceof Node)) {
+          return;
+        }
+        const isPointerDownOnBranch = [...context.branches].some(
+          (branch) => branch.contains(target)
+        );
+        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+        onPointerDownOutside?.(event);
+        onInteractOutside?.(event);
+        if (!event.defaultPrevented) onDismiss?.();
+      },
+      {
+        ownerDocument,
+        deferPointerDownOutside,
+        isDeferredPointerDownOutsideRef,
+        dismissableSurfaces: context.dismissableSurfaces
+      }
+    );
     const focusOutside = useFocusOutside((event) => {
+      if (deferPointerDownOutside && isDeferredPointerDownOutsideRef.current) {
+        return;
+      }
       const target = event.target;
       const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
       if (isFocusInBranch) return;
@@ -39740,8 +39894,11 @@ var DismissableLayer = React24.forwardRef(
       context.layers.add(node);
       dispatchUpdate();
       return () => {
-        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        if (disableOutsidePointerEvents) {
+          context.layersWithOutsidePointerEventsDisabled.delete(node);
+          if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+            ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+          }
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
@@ -39758,7 +39915,7 @@ var DismissableLayer = React24.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       Primitive.div,
       {
         ...layerProps,
@@ -39792,39 +39949,98 @@ var DismissableLayerBranch = React24.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx26(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx25(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
-function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
+function usePointerDownOutside(onPointerDownOutside, args) {
+  const {
+    ownerDocument = globalThis?.document,
+    deferPointerDownOutside = false,
+    isDeferredPointerDownOutsideRef,
+    dismissableSurfaces
+  } = args;
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
   const isPointerInsideReactTreeRef = React24.useRef(false);
+  const isPointerDownOutsideRef = React24.useRef(false);
+  const interceptedOutsideInteractionEventsRef = React24.useRef(/* @__PURE__ */ new Map());
   const handleClickRef = React24.useRef(() => {
   });
   React24.useEffect(() => {
+    function resetOutsideInteraction() {
+      isPointerDownOutsideRef.current = false;
+      isDeferredPointerDownOutsideRef.current = false;
+      interceptedOutsideInteractionEventsRef.current.clear();
+    }
+    function isOutsideInteractionIntercepted() {
+      return Array.from(interceptedOutsideInteractionEventsRef.current.values()).some(Boolean);
+    }
+    function handleInteractionCapture(event) {
+      if (!isPointerDownOutsideRef.current) {
+        return;
+      }
+      const target = event.target;
+      const isDismissableSurface = target instanceof Node && [...dismissableSurfaces].some((surface) => surface.contains(target));
+      if (!isDismissableSurface) {
+        interceptedOutsideInteractionEventsRef.current.set(event.type, true);
+      }
+      if (event.type === "click") {
+        window.setTimeout(() => {
+          if (isPointerDownOutsideRef.current) {
+            handleClickRef.current();
+          }
+        }, 0);
+      }
+    }
+    function handleInteractionBubble(event) {
+      if (isPointerDownOutsideRef.current) {
+        interceptedOutsideInteractionEventsRef.current.set(event.type, false);
+      }
+    }
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
-          handleAndDispatchCustomEvent(
-            POINTER_DOWN_OUTSIDE,
-            handlePointerDownOutside,
-            eventDetail,
-            { discrete: true }
-          );
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          const wasOutsideInteractionIntercepted = isOutsideInteractionIntercepted();
+          resetOutsideInteraction();
+          if (!wasOutsideInteractionIntercepted) {
+            handleAndDispatchCustomEvent(
+              POINTER_DOWN_OUTSIDE,
+              handlePointerDownOutside,
+              eventDetail,
+              { discrete: true }
+            );
+          }
         };
         var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
         const eventDetail = { originalEvent: event };
-        if (event.pointerType === "touch") {
+        isPointerDownOutsideRef.current = true;
+        isDeferredPointerDownOutsideRef.current = deferPointerDownOutside && event.button === 0;
+        interceptedOutsideInteractionEventsRef.current.clear();
+        if (!deferPointerDownOutside || event.button !== 0) {
+          handleAndDispatchPointerDownOutsideEvent2();
+        } else {
           ownerDocument.removeEventListener("click", handleClickRef.current);
           handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
           ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
-        } else {
-          handleAndDispatchPointerDownOutsideEvent2();
         }
       } else {
         ownerDocument.removeEventListener("click", handleClickRef.current);
+        resetOutsideInteraction();
       }
       isPointerInsideReactTreeRef.current = false;
     };
+    const outsideInteractionEvents = [
+      "pointerup",
+      "mousedown",
+      "mouseup",
+      "touchstart",
+      "touchend",
+      "click"
+    ];
+    for (const eventName of outsideInteractionEvents) {
+      ownerDocument.addEventListener(eventName, handleInteractionCapture, true);
+      ownerDocument.addEventListener(eventName, handleInteractionBubble);
+    }
     const timerId = window.setTimeout(() => {
       ownerDocument.addEventListener("pointerdown", handlePointerDown);
     }, 0);
@@ -39832,8 +40048,18 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
       window.clearTimeout(timerId);
       ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       ownerDocument.removeEventListener("click", handleClickRef.current);
+      for (const eventName of outsideInteractionEvents) {
+        ownerDocument.removeEventListener(eventName, handleInteractionCapture, true);
+        ownerDocument.removeEventListener(eventName, handleInteractionBubble);
+      }
     };
-  }, [ownerDocument, handlePointerDownOutside]);
+  }, [
+    ownerDocument,
+    handlePointerDownOutside,
+    deferPointerDownOutside,
+    isDeferredPointerDownOutsideRef,
+    dismissableSurfaces
+  ]);
   return {
     // ensures we check React component tree (not just DOM tree)
     onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
@@ -39877,17 +40103,27 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 // node_modules/@radix-ui/react-focus-guards/dist/index.mjs
 import * as React25 from "react";
 var count = 0;
+var guards = null;
 function useFocusGuards() {
   React25.useEffect(() => {
-    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
-    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
-    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+    if (!guards) {
+      guards = { start: createFocusGuard(), end: createFocusGuard() };
+    }
+    const { start, end } = guards;
+    if (document.body.firstElementChild !== start) {
+      document.body.insertAdjacentElement("afterbegin", start);
+    }
+    if (document.body.lastElementChild !== end) {
+      document.body.insertAdjacentElement("beforeend", end);
+    }
     count++;
     return () => {
       if (count === 1) {
-        document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
+        guards?.start.remove();
+        guards?.end.remove();
+        guards = null;
       }
-      count--;
+      count = Math.max(0, count - 1);
     };
   }, []);
 }
@@ -39904,7 +40140,7 @@ function createFocusGuard() {
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React26 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -40023,7 +40259,7 @@ var FocusScope = React26.forwardRef((props, forwardedRef) => {
     },
     [loop, trapped, focusScope.paused]
   );
-  return /* @__PURE__ */ jsx27(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx26(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -42051,11 +42287,11 @@ var arrow3 = (options, deps) => {
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 import * as React29 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var NAME = "Arrow";
 var Arrow = React29.forwardRef((props, forwardedRef) => {
   const { children, width: width10 = 10, height: height10 = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx27(
     Primitive.svg,
     {
       ...arrowProps,
@@ -42064,7 +42300,7 @@ var Arrow = React29.forwardRef((props, forwardedRef) => {
       height: height10,
       viewBox: "0 0 30 10",
       preserveAspectRatio: "none",
-      children: props.asChild ? children : /* @__PURE__ */ jsx28("polygon", { points: "0,0 30,0 15,10" })
+      children: props.asChild ? children : /* @__PURE__ */ jsx27("polygon", { points: "0,0 30,0 15,10" })
     }
   );
 });
@@ -42109,14 +42345,25 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React31.useState(null);
-  return /* @__PURE__ */ jsx29(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  const [placementState, setPlacementState] = React31.useState(void 0);
+  return /* @__PURE__ */ jsx28(
+    PopperProvider,
+    {
+      scope: __scopePopper,
+      anchor,
+      onAnchorChange: setAnchor,
+      placementState,
+      setPlacementState,
+      children
+    }
+  );
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -42125,16 +42372,40 @@ var PopperAnchor = React31.forwardRef(
     const { __scopePopper, virtualRef, ...anchorProps } = props;
     const context = usePopperContext(ANCHOR_NAME, __scopePopper);
     const ref = React31.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const onAnchorChange = context.onAnchorChange;
+    const callbackRef = React31.useCallback(
+      (node) => {
+        ref.current = node;
+        if (node) {
+          onAnchorChange(node);
+        }
+      },
+      [onAnchorChange]
+    );
+    const composedRefs = useComposedRefs(forwardedRef, callbackRef);
     const anchorRef = React31.useRef(null);
     React31.useEffect(() => {
+      if (!virtualRef) {
+        return;
+      }
       const previousAnchor = anchorRef.current;
-      anchorRef.current = virtualRef?.current || ref.current;
+      anchorRef.current = virtualRef.current;
       if (previousAnchor !== anchorRef.current) {
-        context.onAnchorChange(anchorRef.current);
+        onAnchorChange(anchorRef.current);
       }
     });
-    return virtualRef ? null : /* @__PURE__ */ jsx29(Primitive.div, { ...anchorProps, ref: composedRefs });
+    const sideAndAlign = context.placementState && getSideAndAlignFromPlacement(context.placementState);
+    const placedSide = sideAndAlign?.[0];
+    const placedAlign = sideAndAlign?.[1];
+    return virtualRef ? null : /* @__PURE__ */ jsx28(
+      Primitive.div,
+      {
+        "data-radix-popper-side": placedSide,
+        "data-radix-popper-align": placedAlign,
+        ...anchorProps,
+        ref: composedRefs
+      }
+    );
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME;
@@ -42210,9 +42481,27 @@ var PopperContent = React31.forwardRef(
         }),
         arrow4 && arrow3({ element: arrow4, padding: arrowPadding }),
         transformOrigin({ arrowWidth, arrowHeight }),
-        hideWhenDetached && hide3({ strategy: "referenceHidden", ...detectOverflowOptions })
+        hideWhenDetached && hide3({
+          strategy: "referenceHidden",
+          ...detectOverflowOptions,
+          // `hide` detects whether the anchor (reference) is clipped, so when
+          // no explicit `collisionBoundary` is set we fall back to Floating
+          // UI's default clipping ancestors (e.g. a scrollable menu). This
+          // lets an occluded submenu hide once its anchor scrolls out of view
+          // (#3237). The collision/size middlewares deliberately keep the
+          // viewport-based default to avoid clamping content rendered inside
+          // transformed or overflow-clipping portal containers.
+          boundary: hasExplicitBoundaries ? detectOverflowOptions.boundary : void 0
+        })
       ]
     });
+    const setPlacementState = context.setPlacementState;
+    useLayoutEffect2(() => {
+      setPlacementState(placement);
+      return () => {
+        setPlacementState(void 0);
+      };
+    }, [placement, setPlacementState]);
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
     const handlePlaced = useCallbackRef(onPlaced);
     useLayoutEffect2(() => {
@@ -42227,7 +42516,7 @@ var PopperContent = React31.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         ref: refs.setFloating,
@@ -42238,7 +42527,7 @@ var PopperContent = React31.forwardRef(
           // keep off the page when measuring
           minWidth: "max-content",
           zIndex: contentZIndex,
-          ["--radix-popper-transform-origin"]: [
+          "--radix-popper-transform-origin": [
             middlewareData.transformOrigin?.x,
             middlewareData.transformOrigin?.y
           ].join(" "),
@@ -42251,16 +42540,17 @@ var PopperContent = React31.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx28(
           PopperContentProvider,
           {
             scope: __scopePopper,
             placedSide,
+            placedAlign,
             onArrowChange: setArrow,
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx29(
+            children: /* @__PURE__ */ jsx28(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -42297,7 +42587,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28(
       "span",
       {
         ref: contentContext.onArrowChange,
@@ -42320,7 +42610,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
           }[contentContext.placedSide],
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx28(
           Root,
           {
             ...arrowProps,
@@ -42382,15 +42672,15 @@ var Arrow2 = PopperArrow;
 
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React32 from "react";
-import ReactDOM4 from "react-dom";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import * as ReactDOM4 from "react-dom";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
 var Portal = React32.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React32.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx30(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx29(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -42407,7 +42697,7 @@ var Presence = (props) => {
   const { present, children } = props;
   const presence = usePresence(present);
   const child = typeof children === "function" ? children({ present: presence.isPresent }) : React210.Children.only(children);
-  const ref = useComposedRefs(presence.ref, getElementRef2(child));
+  const ref = useStableComposedRefs(presence.ref, getElementRef2(child));
   const forceMount = typeof children === "function";
   return forceMount || presence.isPresent ? React210.cloneElement(child, { ref }) : null;
 };
@@ -42503,6 +42793,40 @@ function usePresence(present) {
     }, [])
   };
 }
+function setRef2(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function useStableComposedRefs(...refs) {
+  const refsRef = React210.useRef(refs);
+  refsRef.current = refs;
+  return React210.useCallback((node) => {
+    const currentRefs = refsRef.current;
+    let hasCleanup = false;
+    const cleanups = currentRefs.map((ref) => {
+      const cleanup = setRef2(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef2(currentRefs[i], null);
+          }
+        }
+      };
+    }
+  }, []);
+}
 function getAnimationName(styles) {
   return styles?.animationName || "none";
 }
@@ -42522,7 +42846,7 @@ function getElementRef2(element) {
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import * as React34 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
 var GROUP_NAME = "RovingFocusGroup";
@@ -42534,7 +42858,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
 var RovingFocusGroup = React34.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx31(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx31(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx31(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+    return /* @__PURE__ */ jsx30(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }
 );
 RovingFocusGroup.displayName = GROUP_NAME;
@@ -42572,7 +42896,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -42593,7 +42917,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx30(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -42651,14 +42975,14 @@ var RovingFocusGroupItem = React34.forwardRef(
         return () => onFocusableItemRemove();
       }
     }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx30(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx30(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -42909,9 +43233,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState29 } from "react";
+import { useState as useState30 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState29(function() {
+  var ref = useState30(function() {
     return {
       // value
       value: initialValue,
@@ -43575,7 +43899,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -43620,7 +43944,15 @@ var Menu = (props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsx32(Root2, { ...popperScope, children: /* @__PURE__ */ jsx32(
+  React42.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleBlur = () => handleOpenChange(false);
+    window.addEventListener("blur", handleBlur);
+    return () => window.removeEventListener("blur", handleBlur);
+  }, [open, handleOpenChange]);
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -43628,7 +43960,7 @@ var Menu = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx31(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -43648,7 +43980,7 @@ var MenuAnchor = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx32(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
 MenuAnchor.displayName = ANCHOR_NAME2;
@@ -43659,7 +43991,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME2, {
 var MenuPortal = (props) => {
   const { __scopeMenu, forceMount, children, container } = props;
   const context = useMenuContext(PORTAL_NAME2, __scopeMenu);
-  return /* @__PURE__ */ jsx32(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx32(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx32(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx31(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Portal, { asChild: true, container, children }) }) });
 };
 MenuPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "MenuContent";
@@ -43670,7 +44002,7 @@ var MenuContent = React42.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
-    return /* @__PURE__ */ jsx32(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx32(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx32(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx32(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx32(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx31(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx31(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React42.forwardRef(
@@ -43682,7 +44014,7 @@ var MenuRootContentModal = React42.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         ...props,
@@ -43702,7 +44034,7 @@ var MenuRootContentModal = React42.forwardRef(
 );
 var MenuRootContentNonModal = React42.forwardRef((props, forwardedRef) => {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     MenuContentImpl,
     {
       ...props,
@@ -43774,7 +44106,7 @@ var MenuContentImpl = React42.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -43803,7 +44135,7 @@ var MenuContentImpl = React42.forwardRef(
         onPointerGraceIntentChange: React42.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx32(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
           FocusScope,
           {
             asChild: true,
@@ -43813,7 +44145,7 @@ var MenuContentImpl = React42.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx32(
+            children: /* @__PURE__ */ jsx31(
               DismissableLayer,
               {
                 asChild: true,
@@ -43823,7 +44155,7 @@ var MenuContentImpl = React42.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx32(
+                children: /* @__PURE__ */ jsx31(
                   Root3,
                   {
                     asChild: true,
@@ -43837,7 +44169,7 @@ var MenuContentImpl = React42.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx32(
+                    children: /* @__PURE__ */ jsx31(
                       Content,
                       {
                         role: "menu",
@@ -43902,7 +44234,7 @@ var GROUP_NAME2 = "MenuGroup";
 var MenuGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...groupProps } = props;
-    return /* @__PURE__ */ jsx32(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
   }
 );
 MenuGroup.displayName = GROUP_NAME2;
@@ -43910,7 +44242,7 @@ var LABEL_NAME = "MenuLabel";
 var MenuLabel = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...labelProps } = props;
-    return /* @__PURE__ */ jsx32(Primitive.div, { ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { ...labelProps, ref: forwardedRef });
   }
 );
 MenuLabel.displayName = LABEL_NAME;
@@ -43937,7 +44269,7 @@ var MenuItem = React42.forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         ...itemProps,
@@ -43979,13 +44311,13 @@ var MenuItemImpl = React42.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx32(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx31(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
           Primitive.div,
           {
             role: "menuitem",
@@ -44024,7 +44356,7 @@ var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
 var MenuCheckboxItem = React42.forwardRef(
   (props, forwardedRef) => {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
-    return /* @__PURE__ */ jsx32(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -44052,7 +44384,7 @@ var MenuRadioGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef(onValueChange);
-    return /* @__PURE__ */ jsx32(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx32(MenuGroup, { ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx31(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx31(MenuGroup, { ...groupProps, ref: forwardedRef }) });
   }
 );
 MenuRadioGroup.displayName = RADIO_GROUP_NAME;
@@ -44062,7 +44394,7 @@ var MenuRadioItem = React42.forwardRef(
     const { value, ...radioItemProps } = props;
     const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
     const checked = value === context.value;
-    return /* @__PURE__ */ jsx32(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemradio",
@@ -44089,11 +44421,11 @@ var MenuItemIndicator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
     const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       Presence,
       {
         present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx31(
           Primitive.span,
           {
             ...itemIndicatorProps,
@@ -44110,7 +44442,7 @@ var SEPARATOR_NAME = "MenuSeparator";
 var MenuSeparator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       Primitive.div,
       {
         role: "separator",
@@ -44127,7 +44459,7 @@ var MenuArrow = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx32(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 MenuArrow.displayName = ARROW_NAME2;
@@ -44144,7 +44476,7 @@ var MenuSub = (props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx32(Root2, { ...popperScope, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -44152,7 +44484,7 @@ var MenuSub = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx31(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -44189,13 +44521,13 @@ var MenuSubTrigger = React42.forwardRef(
         onPointerGraceIntentChange(null);
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
-    return /* @__PURE__ */ jsx32(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         id: subContext.triggerId,
         "aria-haspopup": "menu",
         "aria-expanded": context.open,
-        "aria-controls": subContext.contentId,
+        "aria-controls": context.open ? subContext.contentId : void 0,
         "data-state": getOpenState(context.open),
         ...props,
         ref: composeRefs(forwardedRef, subContext.onTriggerChange),
@@ -44272,20 +44604,20 @@ var SUB_CONTENT_NAME = "MenuSubContent";
 var MenuSubContent = React42.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME2, props.__scopeMenu);
-    const { forceMount = portalContext.forceMount, ...subContentProps } = props;
+    const { forceMount = portalContext.forceMount, align = "start", ...subContentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
     const ref = React42.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx32(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx32(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx32(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         id: subContext.contentId,
         "aria-labelledby": subContext.triggerId,
         ...subContentProps,
         ref: composedRefs,
-        align: "start",
+        align,
         side: rootContext.dir === "rtl" ? "left" : "right",
         disableOutsidePointerEvents: false,
         disableOutsideScroll: false,
@@ -44389,7 +44721,7 @@ var SubTrigger = MenuSubTrigger;
 var SubContent = MenuSubContent;
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
   DROPDOWN_MENU_NAME,
@@ -44415,7 +44747,7 @@ var DropdownMenu = (props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -44426,7 +44758,7 @@ var DropdownMenu = (props) => {
       onOpenChange: setOpen,
       onOpenToggle: React43.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx33(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx32(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 };
@@ -44437,7 +44769,7 @@ var DropdownMenuTrigger = React43.forwardRef(
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx32(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
         type: "button",
@@ -44471,7 +44803,7 @@ var PORTAL_NAME3 = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(Portal2, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx32(Portal2, { ...menuScope, ...portalProps });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME3;
 var CONTENT_NAME3 = "DropdownMenuContent";
@@ -44481,7 +44813,7 @@ var DropdownMenuContent = React43.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React43.useRef(false);
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx32(
       Content2,
       {
         id: context.contentId,
@@ -44521,7 +44853,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Group6, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Group6, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -44530,7 +44862,7 @@ var DropdownMenuLabel = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...labelProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
   }
 );
 DropdownMenuLabel.displayName = LABEL_NAME2;
@@ -44539,7 +44871,7 @@ var DropdownMenuItem = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }
 );
 DropdownMenuItem.displayName = ITEM_NAME3;
@@ -44547,35 +44879,35 @@ var CHECKBOX_ITEM_NAME2 = "DropdownMenuCheckboxItem";
 var DropdownMenuCheckboxItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME2;
 var RADIO_GROUP_NAME2 = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME2;
 var RADIO_ITEM_NAME2 = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME2;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME2 = "DropdownMenuSeparator";
 var DropdownMenuSeparator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME2;
 var ARROW_NAME3 = "DropdownMenuArrow";
@@ -44583,7 +44915,7 @@ var DropdownMenuArrow = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...arrowProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx33(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
   }
 );
 DropdownMenuArrow.displayName = ARROW_NAME3;
@@ -44596,20 +44928,20 @@ var DropdownMenuSub = (props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx33(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx32(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 };
 var SUB_TRIGGER_NAME2 = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME2;
 var SUB_CONTENT_NAME2 = "DropdownMenuSubContent";
 var DropdownMenuSubContent = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     SubContent,
     {
       ...menuScope,
@@ -44641,11 +44973,11 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState33 } from "react";
+import { useState as useState34 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx34(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -44657,10 +44989,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx34(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx34("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx33("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx34(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -44677,10 +45009,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx34(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx34("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx34(
+var DotIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -44693,12 +45025,12 @@ var DotIcon = () => /* @__PURE__ */ jsx34(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx34("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx33("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -44747,10 +45079,10 @@ var iconContainerStyles = {
 };
 var AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState33(false);
-  const [hoveredItem, setHoveredItem] = useState33(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState34(false);
+  const [hoveredItem, setHoveredItem] = useState34(null);
   return /* @__PURE__ */ jsxs8(Fragment11, { children: [
-    /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
+    /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
       /* @__PURE__ */ jsxs8(
         SubTrigger2,
@@ -44764,8 +45096,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx34(
               "div",
               {
                 style: {
@@ -44774,13 +45106,13 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
         SubContent2,
         {
           style: { ...contentStyles, marginLeft: -2 },
@@ -44803,8 +45135,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                 ]
               }
             ),
@@ -44824,8 +45156,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                 ]
               }
             ),
@@ -44845,8 +45177,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                 ]
               }
             ),
@@ -44866,8 +45198,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                 ]
               }
             ),
@@ -44890,8 +45222,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                 ]
               }
             ),
@@ -44911,8 +45243,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topMask"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
                 ]
               }
             ),
@@ -44932,8 +45264,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomMask"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
                 ]
               }
             ),
@@ -44953,8 +45285,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("pcbNotes"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
                 ]
               }
             ),
@@ -44974,8 +45306,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
                 ]
               }
             ),
@@ -44998,8 +45330,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("throughHoleModels"),
                 children: [
-                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
             )
@@ -45011,7 +45343,7 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -45093,9 +45425,9 @@ var ContextMenu = ({
   onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
-  const [cameraSubOpen, setCameraSubOpen] = useState34(false);
-  const [hoveredItem, setHoveredItem] = useState34(null);
-  return /* @__PURE__ */ jsx36(
+  const [cameraSubOpen, setCameraSubOpen] = useState35(false);
+  const [hoveredItem, setHoveredItem] = useState35(null);
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ref: menuRef,
@@ -45107,8 +45439,8 @@ var ContextMenu = ({
         height: 0
       },
       children: /* @__PURE__ */ jsxs9(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx36(Trigger, { asChild: true, children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsx35(Trigger, { asChild: true, children: /* @__PURE__ */ jsx35("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs9(
           Content22,
           {
             style: contentStyles2,
@@ -45130,7 +45462,7 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx36(
+                      /* @__PURE__ */ jsx35(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
@@ -45147,15 +45479,15 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx36("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx36(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx35("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsx35(
                   SubContent2,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -45177,8 +45509,8 @@ var ContextMenu = ({
                         onMouseLeave: () => setHoveredItem(null),
                         onTouchStart: () => setHoveredItem(option),
                         children: [
-                          /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx36(DotIcon, {}) }),
-                          /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                          /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx35(DotIcon, {}) }),
+                          /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option })
                         ]
                       },
                       option
@@ -45202,8 +45534,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("autorotate"),
                   children: [
-                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
                   ]
                 }
               ),
@@ -45225,14 +45557,14 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("cameratype"),
                   children: [
-                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx36(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx35(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 Item22,
                 {
                   style: {
@@ -45244,10 +45576,10 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs9(
                 Item22,
                 {
@@ -45270,7 +45602,7 @@ var ContextMenu = ({
                       engine === "jscad" ? "Manifold" : "JSCAD",
                       " Engine"
                     ] }),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -45284,7 +45616,7 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs9(
                 Item22,
                 {
@@ -45298,8 +45630,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx36("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -45313,8 +45645,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   style: {
@@ -45352,16 +45684,16 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect44, useMemo as useMemo29, useRef as useRef25, useState as useState35 } from "react";
-import { jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect46, useMemo as useMemo29, useRef as useRef27, useState as useState36 } from "react";
+import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState35("");
-  const inputRef = useRef25(null);
+  const [query, setQuery] = useState36("");
+  const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect44(() => {
+  useEffect46(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -45372,7 +45704,7 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect44(() => {
+  useEffect46(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -45392,7 +45724,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       role: "dialog",
@@ -45432,7 +45764,7 @@ var KeyboardShortcutsDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx36(
                       "h2",
                       {
                         style: {
@@ -45444,7 +45776,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx36(
                       "button",
                       {
                         type: "button",
@@ -45460,7 +45792,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx37(
+                  /* @__PURE__ */ jsx36(
                     "input",
                     {
                       ref: inputRef,
@@ -45483,7 +45815,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx37("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs10(
+            /* @__PURE__ */ jsx36("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs10(
               "table",
               {
                 style: {
@@ -45492,11 +45824,11 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs10("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs10("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx37("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37(
+                  /* @__PURE__ */ jsx36("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
                     "td",
                     {
                       colSpan: 2,
@@ -45508,7 +45840,7 @@ var KeyboardShortcutsDialog = ({
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx37(
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx36(
                           "span",
                           {
                             style: {
@@ -45526,7 +45858,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -45542,8 +45874,8 @@ var KeyboardShortcutsDialog = ({
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE43.Vector3(0, 0, 0);
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_TARGET = new THREE44.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -45551,25 +45883,25 @@ var readStoredCameraType = () => {
   return stored === "orthographic" || stored === "perspective" ? stored : void 0;
 };
 var CadViewerInner = (props) => {
-  const [engine, setEngine] = useState36(() => {
+  const [engine, setEngine] = useState37(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
-  const containerRef = useRef26(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState36(false);
-  const [autoRotate, setAutoRotate] = useState36(() => {
+  const containerRef = useRef28(null);
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState37(false);
+  const [autoRotate, setAutoRotate] = useState37(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored === "false" ? false : true;
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState36(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState37(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState36("Custom");
+  const [cameraPreset, setCameraPreset] = useState37("Custom");
   const { cameraType, setCameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
-  const cameraControllerRef = useRef26(null);
+  const cameraControllerRef = useRef28(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -45578,12 +45910,12 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef26(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef28(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef26(false);
-  const lastPresetSelectTime = useRef26(0);
+  const isAnimatingRef = useRef28(false);
+  const lastPresetSelectTime = useRef28(0);
   const PRESET_COOLDOWN = 1e3;
-  const handleUserInteraction = useCallback21(() => {
+  const handleUserInteraction = useCallback23(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
       return;
     }
@@ -45594,15 +45926,15 @@ var CadViewerInner = (props) => {
       setCameraPreset("Custom");
     }
   }, [menuVisible]);
-  const toggleAutoRotate = useCallback21(() => {
+  const toggleAutoRotate = useCallback23(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
   const downloadGltf = useGlobalDownloadGltf();
-  const closeMenu = useCallback21(() => {
+  const closeMenu = useCallback23(() => {
     setMenuVisible(false);
   }, [setMenuVisible]);
-  const handleCameraControllerReady = useCallback21(
+  const handleCameraControllerReady = useCallback23(
     (controller) => {
       cameraControllerRef.current = controller;
       externalCameraControllerReady?.(controller);
@@ -45676,24 +46008,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect45(() => {
+  useEffect47(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect45(() => {
+  useEffect47(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect45(() => {
+  useEffect47(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect45(() => {
+  useEffect47(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect45(() => {
+  useEffect47(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -45713,7 +46045,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx38(
+        engine === "jscad" ? /* @__PURE__ */ jsx37(
           CadViewerJscad,
           {
             ...props,
@@ -45722,7 +46054,7 @@ var CadViewerInner = (props) => {
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx38(
+        ) : /* @__PURE__ */ jsx37(
           CadViewerManifold_default,
           {
             ...props,
@@ -45749,11 +46081,11 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx38("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx37("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx38(
+        menuVisible && /* @__PURE__ */ jsx37(
           ContextMenu,
           {
             menuRef,
@@ -45780,7 +46112,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx37(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -45793,13 +46125,13 @@ var CadViewerInner = (props) => {
   );
 };
 var CadViewer = (props) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx37(
     CameraControllerProvider,
     {
       defaultTarget: DEFAULT_TARGET,
       initialCameraPosition: INITIAL_CAMERA_POSITION,
       initialCameraType: readStoredCameraType(),
-      children: /* @__PURE__ */ jsx38(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx38(ToastProvider, { children: /* @__PURE__ */ jsx38(CadViewerInner, { ...props }) }) })
+      children: /* @__PURE__ */ jsx37(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx37(ToastProvider, { children: /* @__PURE__ */ jsx37(CadViewerInner, { ...props }) }) })
     }
   );
 };
@@ -45807,11 +46139,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE47 from "three";
+import * as THREE48 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE44 from "three";
+import * as THREE45 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -45825,12 +46157,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE44.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE44.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE44.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE44.Vector3().crossVectors(
-        new THREE44.Vector3().subVectors(v2, v1),
-        new THREE44.Vector3().subVectors(v3, v1)
+      const v1 = new THREE45.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE45.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE45.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE45.Vector3().crossVectors(
+        new THREE45.Vector3().subVectors(v2, v1),
+        new THREE45.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -45854,10 +46186,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE46 from "three";
+import * as THREE47 from "three";
 
 // src/utils/load-model.ts
-import * as THREE45 from "three";
+import * as THREE46 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -45865,12 +46197,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE45.MeshStandardMaterial({
+    const material = new THREE46.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE45.Mesh(geometry, material);
+    return new THREE46.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -45903,9 +46235,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE47.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -45919,13 +46251,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE46.MeshStandardMaterial({
+      const material2 = new THREE47.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE46.DoubleSide
+        side: THREE47.DoubleSide
       });
-      const mesh2 = new THREE46.Mesh(threeGeom, material2);
+      const mesh2 = new THREE47.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -45935,9 +46267,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE47.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -45954,17 +46286,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE46.Color(geomInfo.color);
+      const color = new THREE47.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE46.MeshStandardMaterial({
+      const material2 = new THREE47.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE46.DoubleSide
+        side: THREE47.DoubleSide
       });
-      const mesh2 = new THREE46.Mesh(threeGeom, material2);
+      const mesh2 = new THREE47.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -45974,22 +46306,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE46.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE46.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE47.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE47.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE46.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE46.MeshStandardMaterial({
+  const geometry = new THREE47.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE47.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE46.Mesh(geometry, material);
+  const mesh = new THREE47.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -46010,11 +46342,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE47.Scene();
+  const scene = new THREE48.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE47.Color(backgroundColor), 1);
-  const camera = new THREE47.OrthographicCamera();
+  renderer.setClearColor(new THREE48.Color(backgroundColor), 1);
+  const camera = new THREE48.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -46028,11 +46360,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE47.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE48.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE47.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE48.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE47.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE48.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -46043,7 +46375,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createSimplifiedBoardGeom(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE47.Color(
+    const baseColor = new THREE48.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -46055,28 +46387,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE47.DoubleSide
+        side: THREE48.DoubleSide
       });
-      const mesh = new THREE47.Mesh(geometry, material);
+      const mesh = new THREE48.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE47.Color(8947848);
-  const gridHelper = new THREE47.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE48.Color(8947848);
+  const gridHelper = new THREE48.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE47.LineBasicMaterial) {
+    if (mat instanceof THREE48.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE47.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE47.Vector3());
-  const size4 = box.getSize(new THREE47.Vector3());
+  const box = new THREE48.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE48.Vector3());
+  const size4 = box.getSize(new THREE48.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -46094,7 +46426,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect46, useState as useState37, useMemo as useMemo30, useCallback as useCallback22 } from "react";
+import { useEffect as useEffect48, useState as useState38, useMemo as useMemo30, useCallback as useCallback24 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo30(() => document.createElement("a"), []);
@@ -46107,7 +46439,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect46(
+  useEffect48(
     () => () => {
       link.remove();
       instance = null;
@@ -46115,20 +46447,20 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback22((obj3D) => {
+  const ref = useCallback24((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState37();
-  const [error, setError] = useState37();
-  const ref = useCallback22(
+  const [url, setUrl] = useState38();
+  const [error, setError] = useState38();
+  const ref = useCallback24(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect46(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect48(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {