@tscircuit/3d-viewer 0.0.581 → 0.0.583

package/dist/index.js

@@ -14432,12 +14432,12 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useEffect as useEffect47, useRef as useRef29, useState as useState39 } from "react";
-import * as THREE45 from "three";
+import { useCallback as useCallback24, useEffect as useEffect48, useRef as useRef29, useState as useState39 } from "react";
+import * as THREE46 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo20 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo21 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
@@ -32704,13 +32704,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect18, useMemo as useMemo14, useState as useState11 } from "react";
-import * as THREE20 from "three";
+import { forwardRef as forwardRef2, useEffect as useEffect19, useMemo as useMemo15, useState as useState11 } from "react";
+import * as THREE21 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.580",
+  version: "0.0.582",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32740,7 +32740,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.446",
-    "circuit-to-canvas": "^0.0.111",
+    "circuit-to-canvas": "^0.0.118",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -32801,6 +32801,7 @@ var AppearanceProvider = ({
   children
 }) => {
   const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState8(false);
+  const [gridEnabled, setGridEnabled] = useState8(false);
   const [lightingEnabled, setLightingEnabled] = useState8(
     readStoredLightingEnabled
   );
@@ -32814,10 +32815,12 @@ var AppearanceProvider = ({
     () => ({
       darkBackgroundEnabled,
       setDarkBackgroundEnabled,
+      gridEnabled,
+      setGridEnabled,
       lightingEnabled,
       setLightingEnabled
     }),
-    [darkBackgroundEnabled, lightingEnabled]
+    [darkBackgroundEnabled, gridEnabled, lightingEnabled]
   );
   return /* @__PURE__ */ jsx11(AppearanceContext.Provider, { value, children });
 };
@@ -33385,9 +33388,101 @@ var Canvas = forwardRef(
   }
 );
 
-// src/react-three/Lights.tsx
+// src/react-three/Grid.tsx
 import { useEffect as useEffect15, useMemo as useMemo12 } from "react";
 import * as THREE17 from "three";
+var vertexShader = `
+  varying vec3 worldPosition;
+  void main() {
+    worldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+var fragmentShader = `
+  varying vec3 worldPosition;
+  uniform float cellSize;
+  uniform float sectionSize;
+  uniform vec3 gridColor;
+  uniform vec3 sectionColor;
+  uniform float fadeDistance;
+  uniform float fadeStrength;
+
+  float getGrid(float size) {
+    vec2 r = worldPosition.xy / size;
+    vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
+    float line = min(grid.x, grid.y);
+    return 1.0 - min(line * 1.5, 1.0);
+  }
+
+  void main() {
+    float g1 = getGrid(cellSize);
+    float g2 = getGrid(sectionSize);
+
+    float d = distance(worldPosition.xy, cameraPosition.xy);
+    float a = 1.0 - smoothstep(fadeDistance, fadeDistance * fadeStrength, d);
+
+    vec3 color = mix(gridColor, sectionColor, g2);
+
+    gl_FragColor = vec4(color, max(g1, g2) * a);
+    if (gl_FragColor.a <= 0.0) discard;
+  }
+`;
+var Grid = ({
+  rotation,
+  infiniteGrid,
+  cellSize = 1,
+  sectionSize = 10
+}) => {
+  const { scene, camera } = useThree();
+  const size4 = 1e3;
+  const gridMesh = useMemo12(() => {
+    const geometry = new THREE17.PlaneGeometry(size4, size4);
+    geometry.rotateX(-Math.PI / 2);
+    const material = new THREE17.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        cellSize: { value: cellSize },
+        sectionSize: { value: sectionSize },
+        gridColor: { value: new THREE17.Color(15658734) },
+        sectionColor: { value: new THREE17.Color(13421823) },
+        fadeDistance: { value: 100 },
+        // Fade out based on sectionSize
+        fadeStrength: { value: 1.5 }
+      },
+      transparent: true,
+      side: THREE17.DoubleSide
+    });
+    const mesh = new THREE17.Mesh(geometry, material);
+    if (rotation) {
+      mesh.rotation.fromArray(rotation);
+    }
+    return mesh;
+  }, [size4, cellSize, sectionSize, rotation]);
+  useFrame(() => {
+    if (infiniteGrid) {
+      gridMesh.position.set(camera.position.x, camera.position.y, 0);
+    }
+  });
+  useEffect15(() => {
+    if (!scene || !gridMesh) return;
+    scene.add(gridMesh);
+    return () => {
+      scene.remove(gridMesh);
+      gridMesh.geometry.dispose();
+      if (Array.isArray(gridMesh.material)) {
+        gridMesh.material.forEach((m) => m.dispose());
+      } else {
+        gridMesh.material.dispose();
+      }
+    };
+  }, [scene, gridMesh]);
+  return null;
+};
+
+// src/react-three/Lights.tsx
+import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
+import * as THREE18 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
   boardDimensions,
@@ -33396,8 +33491,8 @@ var Lights = ({
   shadowsEnabled = false
 }) => {
   const { scene } = useThree();
-  const lightRig = useMemo12(() => {
-    const rig = new THREE17.Group();
+  const lightRig = useMemo13(() => {
+    const rig = new THREE18.Group();
     rig.name = "cad-viewer-light-rig";
     const centerX = boardCenter?.x ?? 0;
     const centerY = boardCenter?.y ?? 0;
@@ -33409,14 +33504,14 @@ var Lights = ({
     const shadowHalfSize = largestBoardDimension * 0.8;
     const lightDistance = largestBoardDimension;
     const keyLightDistance = largestBoardDimension * 1.7;
-    const ambientLight = new THREE17.AmbientLight(16186360, 0.22);
+    const ambientLight = new THREE18.AmbientLight(16186360, 0.22);
     ambientLight.name = "cad-viewer-soft-ambient";
     rig.add(ambientLight);
-    const hemisphereLight = new THREE17.HemisphereLight(15004141, 1581597, 0.2);
+    const hemisphereLight = new THREE18.HemisphereLight(15004141, 1581597, 0.2);
     hemisphereLight.name = "cad-viewer-hemisphere";
     rig.add(hemisphereLight);
     const addDirectionalLight = (name, color, intensity, position, castShadow = false) => {
-      const light = new THREE17.DirectionalLight(color, intensity);
+      const light = new THREE18.DirectionalLight(color, intensity);
       light.name = name;
       light.position.set(
         centerX + position[0],
@@ -33490,17 +33585,17 @@ var Lights = ({
     );
     return rig;
   }, [boardCenter, boardDimensions, shadowsEnabled]);
-  useEffect15(() => {
+  useEffect16(() => {
     const previousBackground = scene.background;
     const previousEnvironment = scene.environment;
-    scene.background = darkBackgroundEnabled ? new THREE17.Color(1053456) : null;
+    scene.background = darkBackgroundEnabled ? new THREE18.Color(1053456) : null;
     scene.environment = null;
     return () => {
       scene.background = previousBackground;
       scene.environment = previousEnvironment;
     };
   }, [darkBackgroundEnabled, scene]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!scene) return;
     scene.add(lightRig);
     return () => {
@@ -33511,8 +33606,8 @@ var Lights = ({
 };
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
-import * as THREE18 from "three";
+import { useEffect as useEffect17, useMemo as useMemo14 } from "react";
+import * as THREE19 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -33527,15 +33622,15 @@ var OrbitControls = ({
   onControlsChange
 }) => {
   const { camera, renderer } = useThree();
-  const controls = useMemo13(() => {
+  const controls = useMemo14(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
-  useEffect16(() => {
+  useEffect17(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
   }, [controls, onControlsChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     const handleChange = () => {
       onControlsChange?.(controls);
@@ -33545,7 +33640,7 @@ var OrbitControls = ({
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -33556,9 +33651,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE18.MOUSE.ROTATE,
+      LEFT: THREE19.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE18.MOUSE.PAN,
+      MIDDLE: THREE19.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -33578,14 +33673,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -33598,15 +33693,15 @@ var OrbitControls = ({
 };
 
 // src/three-components/OrientationCubeCanvas.tsx
-import { useEffect as useEffect17, useRef as useRef7 } from "react";
-import * as THREE19 from "three";
+import { useEffect as useEffect18, useRef as useRef7 } from "react";
+import * as THREE20 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance5) {
-  const quaternion = new THREE19.Quaternion().setFromEuler(
-    new THREE19.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE20.Quaternion().setFromEuler(
+    new THREE20.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE19.Vector3(0, 0, 1);
+  const forwardVector = new THREE20.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -33614,36 +33709,36 @@ function computePointInFront(rotationVector, distance5) {
 var OrientationCubeCanvas = () => {
   const { mainCameraRef } = useCameraController();
   const containerRef = useRef7(null);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
     container.appendChild(canvas);
-    const renderer = new THREE19.WebGLRenderer({
+    const renderer = new THREE20.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
     });
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
-    const scene = new THREE19.Scene();
-    const camera = new THREE19.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const scene = new THREE20.Scene();
+    const camera = new THREE20.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
-    const ambientLight = new THREE19.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE20.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE19.Group();
+    const group = new THREE20.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE19.Mesh(
-      new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE19.MeshStandardMaterial({ color: "white" })
+    const box = new THREE20.Mesh(
+      new THREE20.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE20.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE19.LineSegments(
-      new THREE19.EdgesGeometry(
-        new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE20.LineSegments(
+      new THREE20.EdgesGeometry(
+        new THREE20.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE19.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE20.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -33698,7 +33793,7 @@ var OrientationCubeCanvas = () => {
     const animate = () => {
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE19.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE20.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -33773,17 +33868,23 @@ var CadViewerContainer = forwardRef2(
       !clickToInteractEnabled
     );
     const { mainCameraRef, handleControlsChange, controller } = useCameraController();
-    const { darkBackgroundEnabled, lightingEnabled } = useAppearance();
+    const { darkBackgroundEnabled, gridEnabled, lightingEnabled } = useAppearance();
     const {
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
     } = useCameraSession();
-    useEffect18(() => {
+    useEffect19(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
     }, [controller, onCameraControllerReady]);
-    const orbitTarget = useMemo14(() => {
+    const gridSectionSize = useMemo15(() => {
+      if (!boardDimensions) return 10;
+      const width10 = boardDimensions.width ?? 0;
+      const height10 = boardDimensions.height ?? 0;
+      return Math.max(Math.max(width10, height10) * 1.5, 10);
+    }, [boardDimensions]);
+    const orbitTarget = useMemo15(() => {
       if (!boardCenter) return void 0;
       return [boardCenter.x, boardCenter.y, 0];
     }, [boardCenter]);
@@ -33793,7 +33894,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE20.Vector3(0, 0, 1) },
+          scene: { up: new THREE21.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -33829,6 +33930,15 @@ var CadViewerContainer = forwardRef2(
                 shadowsEnabled: lightingEnabled
               }
             ),
+            gridEnabled && /* @__PURE__ */ jsx15(
+              Grid,
+              {
+                rotation: [Math.PI / 2, 0, 0],
+                infiniteGrid: true,
+                cellSize: 3,
+                sectionSize: gridSectionSize
+              }
+            ),
             children
           ]
         }
@@ -33893,9 +34003,9 @@ var CadViewerContainer = forwardRef2(
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo15(() => {
+  return useMemo16(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -33905,12 +34015,12 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState12, useEffect as useEffect19 } from "react";
+import { useState as useState12, useEffect as useEffect20 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
   const [stls, setStls] = useState12([]);
   const [loading, setLoading] = useState12(true);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -33939,7 +34049,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState13, useEffect as useEffect20, useRef as useRef8 } from "react";
+import { useState as useState13, useEffect as useEffect21, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -35253,7 +35363,7 @@ var BoardGeomBuilder = class {
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState13(null);
   const isProcessingRef = useRef8(false);
-  useEffect20(() => {
+  useEffect21(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -35299,10 +35409,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState14, useCallback as useCallback8, useEffect as useEffect22, useMemo as useMemo17 } from "react";
+import { useState as useState14, useCallback as useCallback8, useEffect as useEffect23, useMemo as useMemo18 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo17 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -35317,7 +35427,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo16(() => {
+  const mesh = useMemo17(() => {
     const textMesh = new TroikaText2();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -35342,7 +35452,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect21(() => {
+  useEffect22(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -35355,7 +35465,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -35377,7 +35487,7 @@ var Error3d = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo17(() => {
+  const position = useMemo18(() => {
     if (cad_component?.position) {
       const p = [
         cad_component.position.x,
@@ -35388,12 +35498,12 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component]);
-  const group = useMemo17(() => {
-    const g = new THREE21.Group();
+  const group = useMemo18(() => {
+    const g = new THREE22.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -35448,10 +35558,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo17(() => {
-    const m = new THREE21.Mesh(
-      new THREE21.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE21.MeshStandardMaterial({
+  const mesh = useMemo18(() => {
+    const m = new THREE22.Mesh(
+      new THREE22.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE22.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -35462,7 +35572,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -35472,8 +35582,8 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/STLModel.tsx
-import { useState as useState15, useEffect as useEffect23, useMemo as useMemo18 } from "react";
-import * as THREE22 from "three";
+import { useState as useState15, useEffect as useEffect24, useMemo as useMemo19 } from "react";
+import * as THREE23 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -35485,7 +35595,7 @@ function STLModel({
 }) {
   const { rootObject } = useThree();
   const [geom, setGeom] = useState15(null);
-  useEffect23(() => {
+  useEffect24(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -35503,18 +35613,18 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo18(() => {
+  const mesh = useMemo19(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE22.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE22.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE23.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE23.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity,
       polygonOffset: isBoardLayer,
       polygonOffsetFactor: isBoardLayer ? 6 : 0,
       polygonOffsetUnits: isBoardLayer ? 6 : 0
     });
-    const createdMesh = new THREE22.Mesh(geom, material);
+    const createdMesh = new THREE23.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -35522,7 +35632,7 @@ function STLModel({
     });
     return createdMesh;
   }, [geom, color, opacity, layerType]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -35575,10 +35685,10 @@ function VisibleSTLModel({
 
 // src/three-components/JscadBoardTextures.tsx
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo20 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -35633,7 +35743,7 @@ function calculateOutlineBounds(boardData) {
 // src/utils/pad-texture.ts
 import { su as su5 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -35711,10 +35821,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE23.CanvasTexture(canvas);
+  const texture = new THREE24.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE23.LinearMipmapLinearFilter;
-  texture.magFilter = THREE23.LinearFilter;
+  texture.minFilter = THREE24.LinearMipmapLinearFilter;
+  texture.magFilter = THREE24.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -35722,7 +35832,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -35790,17 +35900,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE25.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su7 } from "@tscircuit/circuit-json-util";
 
@@ -35913,14 +36023,15 @@ function createTraceTextureForLayer({
   });
   drawer.drawElements(elementsToDraw, {
     layers: [pcbRenderLayer],
+    clipContextElements: circuitJson,
     drawSoldermask: false,
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -35928,7 +36039,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -36050,17 +36161,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
@@ -36171,17 +36282,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE28.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE28.LinearMipmapLinearFilter;
+  texture.magFilter = THREE28.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -36409,17 +36520,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE28.CanvasTexture(canvas);
+  const texture = new THREE29.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE28.LinearMipmapLinearFilter;
-  texture.magFilter = THREE28.LinearFilter;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -36494,17 +36605,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  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-pcb-note-texture-for-layer.ts
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -36655,17 +36766,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  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-silkscreen-texture-for-layer.ts
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -36774,17 +36885,17 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  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-soldermask-texture-for-layer.ts
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -36919,17 +37030,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  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;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
@@ -37022,10 +37133,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -37113,10 +37224,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE34.CanvasTexture(canvas);
+  const combinedTexture = new THREE35.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE34.LinearFilter;
-  combinedTexture.magFilter = THREE34.LinearFilter;
+  combinedTexture.minFilter = THREE35.LinearFilter;
+  combinedTexture.magFilter = THREE35.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -37141,11 +37252,11 @@ var createMaskedCopperMask = ({
     if (!texture?.image) continue;
     ctx.drawImage(texture.image, 0, 0, width10, height10);
   }
-  const maskTexture = new THREE34.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE34.NoColorSpace;
+  const maskTexture = new THREE35.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE35.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE34.LinearFilter;
-  maskTexture.magFilter = THREE34.LinearFilter;
+  maskTexture.minFilter = THREE35.LinearFilter;
+  maskTexture.magFilter = THREE35.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -37283,7 +37394,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -37306,7 +37417,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -37395,13 +37506,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   };
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE35.CanvasTexture(canvas);
-  texture.colorSpace = THREE35.NoColorSpace;
+  const texture = new THREE36.CanvasTexture(canvas);
+  texture.colorSpace = THREE36.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE35.LinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
-  texture.wrapS = THREE35.ClampToEdgeWrapping;
-  texture.wrapT = THREE35.ClampToEdgeWrapping;
+  texture.minFilter = THREE36.LinearFilter;
+  texture.magFilter = THREE36.LinearFilter;
+  texture.wrapS = THREE36.ClampToEdgeWrapping;
+  texture.wrapT = THREE36.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -37508,7 +37619,7 @@ var createBoardReliefTextures = (texture, maskedCopperMask) => {
     for (let x = 0; x < sourceCanvas.width; x++) {
       const dx = (getHeight4(x + 1, y) - getHeight4(x - 1, y)) * 4;
       const dy = (getHeight4(x, y + 1) - getHeight4(x, y - 1)) * 4;
-      const normal = new THREE35.Vector3(-dx, -dy, 1).normalize();
+      const normal = new THREE36.Vector3(-dx, -dy, 1).normalize();
       const i = (y * sourceCanvas.width + x) * 4;
       normalData[i] = (normal.x * 0.5 + 0.5) * 255;
       normalData[i + 1] = (normal.y * 0.5 + 0.5) * 255;
@@ -37538,16 +37649,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE36.PlaneGeometry(
+  const planeGeom = new THREE37.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE36.SRGBColorSpace;
+  texture.colorSpace = THREE37.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE36.FrontSide,
+    side: THREE37.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37556,12 +37667,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE36.MeshPhysicalMaterial({
+  const material = new THREE37.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE36.Vector2(
+    normalScale: new THREE37.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -37575,7 +37686,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE36.Mesh(planeGeom, material);
+  const mesh = new THREE37.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -37623,7 +37734,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -37660,7 +37771,7 @@ function JscadBoardTextures({
 }) {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
-  const boardData = useMemo19(() => {
+  const boardData = useMemo20(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -37686,11 +37797,11 @@ function JscadBoardTextures({
     );
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const traceTextureResolution = useMemo19(() => {
+  const traceTextureResolution = useMemo20(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  const textures = useMemo19(() => {
+  const textures = useMemo20(() => {
     if (!boardData?.width || !boardData.height) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -37699,7 +37810,7 @@ function JscadBoardTextures({
       visibility
     });
   }, [circuitJson, boardData, traceTextureResolution, visibility]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -37719,7 +37830,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE37.Texture) {
+        if (texture && texture instanceof THREE38.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -37738,16 +37849,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE37.PlaneGeometry(
+      const planeGeom = new THREE38.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE37.SRGBColorSpace;
+      texture.colorSpace = THREE38.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE37.FrontSide,
+        side: THREE38.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37758,12 +37869,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE37.MeshPhysicalMaterial({
+      const material = new THREE38.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE37.Vector2(
+        normalScale: new THREE38.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -37775,7 +37886,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE37.Mesh(planeGeom, material);
+      const mesh = new THREE38.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -37825,7 +37936,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE37.Material) {
+        } else if (mesh.material instanceof THREE38.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -37937,13 +38048,13 @@ var CadViewerJscad = forwardRef3(
     resolveStaticAsset
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo20(() => {
+    const internalCircuitJson = useMemo21(() => {
       return addFauxBoardIfNeeded(
         circuitJson ?? childrenSoup
       );
     }, [circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo20(() => {
+    const initialCameraPosition = useMemo21(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -37969,7 +38080,7 @@ var CadViewerJscad = forwardRef3(
         return [5, -5, 5];
       }
     }, [internalCircuitJson]);
-    const isFauxBoard = useMemo20(() => {
+    const isFauxBoard = useMemo21(() => {
       if (!internalCircuitJson) return false;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -37978,7 +38089,7 @@ var CadViewerJscad = forwardRef3(
         return false;
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo20(() => {
+    const boardDimensions = useMemo21(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -37989,7 +38100,7 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo20(() => {
+    const boardCenter = useMemo21(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -38057,13 +38168,13 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect26, useMemo as useMemo22, useState as useState17 } from "react";
-import * as THREE44 from "three";
+import { useEffect as useEffect27, useMemo as useMemo23, useState as useState17 } from "react";
+import * as THREE45 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 useState16 } from "react";
-import * as THREE41 from "three";
+import { useEffect as useEffect26, useMemo as useMemo22, useRef as useRef9, useState as useState16 } from "react";
+import * as THREE42 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -38412,17 +38523,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 THREE39 from "three";
+import * as THREE40 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE38.BufferGeometry();
+  const geometry = new THREE39.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE38.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE39.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE38.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE39.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];
@@ -38456,7 +38567,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE39.Color(...colors.copper);
+var COPPER_COLOR = new THREE40.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -39087,7 +39198,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE40 from "three";
+import * as THREE41 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -39125,7 +39236,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE40.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE41.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -39183,7 +39294,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const [error, setError] = useState16(null);
   const [isLoading, setIsLoading] = useState16(true);
   const manifoldInstancesForCleanup = useRef9([]);
-  const boardData = useMemo21(() => {
+  const boardData = useMemo22(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -39207,15 +39318,15 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const isFauxBoard = useMemo21(() => {
+  const isFauxBoard = useMemo22(() => {
     const boards = su16(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
-  const traceTextureResolution = useMemo21(() => {
+  const traceTextureResolution = useMemo22(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -39345,7 +39456,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE41.Color(
+              color: new THREE42.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -39375,7 +39486,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE41.Color(
+          color: new THREE42.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -39399,7 +39510,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       manifoldInstancesForCleanup.current = [];
     };
   }, [manifoldJSModule, circuitJson, boardData]);
-  const textures = useMemo21(() => {
+  const textures = useMemo22(() => {
     if (!boardData || !traceTextureResolution) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -39420,11 +39531,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE43 from "three";
+import * as THREE44 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE42 from "three";
-var DEFAULT_SIDE = THREE42.DoubleSide;
+import * as THREE43 from "three";
+var DEFAULT_SIDE = THREE43.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -39432,7 +39543,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE42.MeshPhysicalMaterial({
+    return new THREE43.MeshPhysicalMaterial({
       // A dark edge lets the green solder mask read as a finished PCB rather
       // than a tan substrate with a decal placed on top.
       color: 1063462,
@@ -39452,7 +39563,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE42.MeshStandardMaterial({
+  return new THREE43.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -39471,12 +39582,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE43.Mesh(
+    const mesh = new THREE44.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE43.DoubleSide,
+        side: THREE44.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -39487,11 +39598,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE43.Mesh(
+        const mesh = new THREE44.Mesh(
           comp.geometry,
-          new THREE43.MeshStandardMaterial({
+          new THREE44.MeshStandardMaterial({
             color: comp.color,
-            side: THREE43.DoubleSide,
+            side: THREE44.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -39536,14 +39647,14 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE44.Texture) {
+        if (texture && texture instanceof THREE45.Texture) {
           texture.dispose();
         }
       }
       material.dispose();
     }
   };
-  useEffect26(() => {
+  useEffect27(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -39565,7 +39676,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -39592,14 +39703,14 @@ var CadViewerManifold = ({
   resolveStaticAsset
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo22(() => {
+  const circuitJson = useMemo23(() => {
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
   const [manifoldJSModule, setManifoldJSModule] = useState17(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState17(null);
   const { visibility } = useLayerVisibility();
-  useEffect26(() => {
+  useEffect27(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -39670,27 +39781,27 @@ try {
     boardData,
     isFauxBoard
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility);
-  const geometryMeshes = useMemo22(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo22(
+  const geometryMeshes = useMemo23(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo23(
     () => createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard),
     [textures, boardData, pcbThickness, isFauxBoard]
   );
-  const cadComponents = useMemo22(
+  const cadComponents = useMemo23(
     () => su17(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo22(() => {
+  const boardDimensions = useMemo23(() => {
     if (!boardData) return void 0;
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     return { width: width10, height: height10 };
   }, [boardData]);
-  const boardCenter = useMemo22(() => {
+  const boardCenter = useMemo23(() => {
     if (!boardData) return void 0;
     const { center } = boardData;
     if (!center) return void 0;
     return { x: center.x, y: center.y };
   }, [boardData]);
-  const initialCameraPosition = useMemo22(() => {
+  const initialCameraPosition = useMemo23(() => {
     if (!boardData) return [5, -5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -39788,7 +39899,7 @@ var CadViewerManifold_default = CadViewerManifold;
 import { useState as useState35 } from "react";
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import * as React41 from "react";
+import * as React42 from "react";
 
 // node_modules/@radix-ui/primitive/dist/index.mjs
 var __defProp3 = Object.defineProperty;
@@ -39843,7 +39954,7 @@ function isFrame(element) {
 __name(isFrame, "isFrame");
 
 // node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React10 from "react";
+import * as React11 from "react";
 var __defProp4 = Object.defineProperty;
 var __name2 = (target, value) => __defProp4(target, "name", { value, configurable: true });
 function setRef(ref, value) {
@@ -39880,28 +39991,28 @@ function composeRefs(...refs) {
 }
 __name2(composeRefs, "composeRefs");
 function useComposedRefs(...refs) {
-  return React10.useCallback(composeRefs(...refs), refs);
+  return React11.useCallback(composeRefs(...refs), refs);
 }
 __name2(useComposedRefs, "useComposedRefs");
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
-import * as React11 from "react";
+import * as React12 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var __defProp5 = Object.defineProperty;
 var __name3 = (target, value) => __defProp5(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
 function createContext22(rootComponentName, defaultContext) {
-  const Context = React11.createContext(defaultContext);
+  const Context = React12.createContext(defaultContext);
   Context.displayName = rootComponentName + "Context";
   const Provider = /* @__PURE__ */ __name3((props) => {
     const { children, ...context } = props;
-    const value = React11.useMemo(() => context, Object.values(context));
+    const value = React12.useMemo(() => context, Object.values(context));
     return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
   }, "Provider");
   Provider.displayName = rootComponentName + "Provider";
   function useContext22(consumerName, options = {}) {
     const { optional = false } = options;
-    const context = React11.useContext(Context);
+    const context = React12.useContext(Context);
     if (context) return context;
     if (defaultContext !== void 0) return defaultContext;
     if (optional) return void 0;
@@ -39915,21 +40026,21 @@ __name3(createContext22, "createContext");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React11.createContext(defaultContext);
+    const BaseContext = React12.createContext(defaultContext);
     BaseContext.displayName = rootComponentName + "Context";
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = /* @__PURE__ */ __name3((props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React11.useMemo(() => context, Object.values(context));
+      const value = React12.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
     }, "Provider");
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope, options = {}) {
       const { optional = false } = options;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React11.useContext(Context);
+      const context = React12.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       if (optional) return void 0;
@@ -39941,11 +40052,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   __name3(createContext32, "createContext");
   const createScope = /* @__PURE__ */ __name3(() => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React11.createContext(defaultContext);
+      return React12.createContext(defaultContext);
     });
     return /* @__PURE__ */ __name3(function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React11.useMemo(
+      return React12.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -39969,7 +40080,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React11.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React12.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     }, "useComposedScopes");
   }, "createScope");
   createScope.scopeName = baseScope.scopeName;
@@ -39978,30 +40089,30 @@ function composeContextScopes(...scopes) {
 __name3(composeContextScopes, "composeContextScopes");
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React14 from "react";
+import * as React15 from "react";
 
 // node_modules/@radix-ui/primitive/dist/internal/is-development.false.mjs
 var IS_DEVELOPMENT = false;
 
 // node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import * as React12 from "react";
-var useLayoutEffect2 = globalThis?.document ? React12.useLayoutEffect : () => {
+import * as React13 from "react";
+var useLayoutEffect2 = globalThis?.document ? React13.useLayoutEffect : () => {
 };
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import * as React22 from "react";
 
 // node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
-import * as React13 from "react";
+import * as React14 from "react";
 var __defProp6 = Object.defineProperty;
 var __name4 = (target, value) => __defProp6(target, "name", { value, configurable: true });
-var useReactEffectEvent = React13[" useEffectEvent ".trim().toString()];
-var useReactInsertionEffect = React13[" useInsertionEffect ".trim().toString()];
+var useReactEffectEvent = React14[" useEffectEvent ".trim().toString()];
+var useReactInsertionEffect = React14[" useInsertionEffect ".trim().toString()];
 function useEffectEvent(callback) {
   if (typeof useReactEffectEvent === "function") {
     return useReactEffectEvent(callback);
   }
-  const ref = React13.useRef(() => {
+  const ref = React14.useRef(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
   if (typeof useReactInsertionEffect === "function") {
@@ -40013,14 +40124,14 @@ function useEffectEvent(callback) {
       ref.current = callback;
     });
   }
-  return React13.useMemo(() => ((...args) => ref.current?.(...args)), []);
+  return React14.useMemo(() => ((...args) => ref.current?.(...args)), []);
 }
 __name4(useEffectEvent, "useEffectEvent");
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 var __defProp7 = Object.defineProperty;
 var __name5 = (target, value) => __defProp7(target, "name", { value, configurable: true });
-var useInsertionEffect = React14[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React15[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -40035,8 +40146,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (IS_DEVELOPMENT) {
-    const isControlledRef = React14.useRef(prop !== void 0);
-    React14.useEffect(() => {
+    const isControlledRef = React15.useRef(prop !== void 0);
+    React15.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -40048,7 +40159,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React14.useCallback(
+  const setValue = React15.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -40068,13 +40179,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React14.useState(defaultProp);
-  const prevValueRef = React14.useRef(value);
-  const onChangeRef = React14.useRef(onChange);
+  const [value, setValue] = React15.useState(defaultProp);
+  const prevValueRef = React15.useRef(value);
+  const onChangeRef = React15.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -40150,16 +40261,16 @@ function useControllableStateReducer(reducer, userArgs, initialArg, init) {
 __name5(useControllableStateReducer, "useControllableStateReducer");
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React16 from "react";
+import * as React17 from "react";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React15 from "react";
+import * as React16 from "react";
 var __defProp8 = Object.defineProperty;
 var __name6 = (target, value) => __defProp8(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const Slot2 = React15.forwardRef((props, forwardedRef) => {
+  const Slot2 = React16.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     let slottableElement = null;
     let hasSlottable = false;
@@ -40167,7 +40278,7 @@ function createSlot(ownerName) {
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    React15.Children.forEach(children, (maybeSlottable) => {
+    React16.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
@@ -40182,13 +40293,13 @@ function createSlot(ownerName) {
       }
     });
     if (slottableElement) {
-      slottableElement = React15.cloneElement(slottableElement, void 0, newChildren);
+      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 && React15.Children.count(children) === 1 && React15.isValidElement(children)
+      !hasSlottable && React16.Children.count(children) === 1 && React16.isValidElement(children)
     ) {
       slottableElement = children;
     }
@@ -40203,10 +40314,10 @@ function createSlot(ownerName) {
       return children;
     }
     const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
-    if (slottableElement.type !== React15.Fragment) {
+    if (slottableElement.type !== React16.Fragment) {
       mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
     }
-    return React15.cloneElement(slottableElement, mergedProps);
+    return React16.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -40224,10 +40335,10 @@ __name6(createSlottable, "createSlottable");
 var getSlottableElementFromSlottable = /* @__PURE__ */ __name6((slottable, child) => {
   if ("child" in slottable.props) {
     const child2 = slottable.props.child;
-    if (!React15.isValidElement(child2)) return null;
-    return React15.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    if (!React16.isValidElement(child2)) return null;
+    return React16.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
   }
-  return React15.isValidElement(child) ? child : null;
+  return React16.isValidElement(child) ? child : null;
 }, "getSlottableElementFromSlottable");
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -40269,7 +40380,7 @@ function getElementRef(element) {
 }
 __name6(getElementRef, "getElementRef");
 function isSlottable(child) {
-  return React15.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React16.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 __name6(isSlottable, "isSlottable");
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
@@ -40287,7 +40398,7 @@ var createSlotError = /* @__PURE__ */ __name6((ownerName) => {
 var createSlottableError = /* @__PURE__ */ __name6((ownerName) => {
   return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
 }, "createSlottableError");
-var use = React15[" use ".trim().toString()];
+var use = React16[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -40314,7 +40425,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot2 = createSlot(`Primitive.${node}`);
-  const Node2 = React16.forwardRef((props, forwardedRef) => {
+  const Node2 = React17.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -40331,10 +40442,10 @@ function dispatchDiscreteCustomEvent(target, event) {
 __name7(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import * as React40 from "react";
+import * as React41 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
-import * as React17 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";
@@ -40350,14 +40461,14 @@ function createCollection(name) {
   );
   const CollectionProvider = /* @__PURE__ */ __name8((props) => {
     const { scope, children } = props;
-    const ref = React17.useRef(null);
-    const itemMap = React17.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React18.useRef(null);
+    const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React17.forwardRef(
+  const CollectionSlot = React18.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -40369,13 +40480,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React17.forwardRef(
+  const CollectionItemSlot = React18.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = React17.useRef(null);
+      const ref = React18.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React17.useEffect(() => {
+      React18.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -40385,7 +40496,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection3(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React17.useCallback(() => {
+    const getItems = React18.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -40880,30 +40991,30 @@ function getChildListObserver(callback) {
 __name8(getChildListObserver, "getChildListObserver");
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var __defProp11 = Object.defineProperty;
 var __name9 = (target, value) => __defProp11(target, "name", { value, configurable: true });
-var DirectionContext = React18.createContext(void 0);
+var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React18.useContext(DirectionContext);
+  const globalDir = React19.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 __name9(useDirection, "useDirection");
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import * as React20 from "react";
+import * as React21 from "react";
 
 // node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React19 from "react";
+import * as React20 from "react";
 var __defProp12 = Object.defineProperty;
 var __name10 = (target, value) => __defProp12(target, "name", { value, configurable: true });
 function useCallbackRef(callback) {
-  const callbackRef = React19.useRef(callback);
-  React19.useEffect(() => {
+  const callbackRef = React20.useRef(callback);
+  React20.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React19.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+  return React20.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 __name10(useCallbackRef, "useCallbackRef");
 
@@ -40915,7 +41026,7 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React20.createContext({
+var DismissableLayerContext = React21.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set(),
@@ -40926,7 +41037,7 @@ var DismissableLayerContext = React20.createContext({
   // See https://github.com/radix-ui/primitives/issues/3346
   dismissableSurfaces: /* @__PURE__ */ new Set()
 });
-var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
+var DismissableLayer = /* @__PURE__ */ React21.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name11(function DismissableLayer2(props, forwardedRef) {
     const {
@@ -40939,10 +41050,10 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
       onDismiss,
       ...layerProps
     } = props;
-    const context = React20.useContext(DismissableLayerContext);
-    const [node, setNode] = React20.useState(null);
+    const context = React21.useContext(DismissableLayerContext);
+    const [node, setNode] = React21.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-    const [, force] = React20.useState({});
+    const [, force] = React21.useState({});
     const composedRefs = useComposedRefs(forwardedRef, setNode);
     const layers = Array.from(context.layers);
     const [highestLayerWithOutsidePointerEventsDisabled] = [
@@ -40952,7 +41063,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
     const index2 = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const isDeferredPointerDownOutsideRef = React20.useRef(false);
+    const isDeferredPointerDownOutsideRef = React21.useRef(false);
     const pointerDownOutside = usePointerDownOutside(
       (event) => {
         onPointerDownOutside?.(event);
@@ -40964,7 +41075,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         deferPointerDownOutside,
         isDeferredPointerDownOutsideRef,
         dismissableSurfaces: context.dismissableSurfaces,
-        shouldHandlePointerDownOutside: React20.useCallback(
+        shouldHandlePointerDownOutside: React21.useCallback(
           (target) => {
             if (!(target instanceof Node)) {
               return false;
@@ -41000,14 +41111,14 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         onDismiss();
       }
     });
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (!isHighestLayer) {
         return;
       }
       ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
       return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
     }, [ownerDocument, isHighestLayer, handleKeyDown]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (!node) return;
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -41027,7 +41138,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       return () => {
         if (!node) return;
         context.layers.delete(node);
@@ -41035,7 +41146,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         dispatchUpdate();
       };
     }, [node, context]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       const handleUpdate = /* @__PURE__ */ __name11(() => force({}), "handleUpdate");
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -41060,9 +41171,9 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
   }, "DismissableLayer")
 );
 function useDismissableLayerSurface() {
-  const context = React20.useContext(DismissableLayerContext);
-  const [node, setNode] = React20.useState(null);
-  React20.useEffect(() => {
+  const context = React21.useContext(DismissableLayerContext);
+  const [node, setNode] = React21.useState(null);
+  React21.useEffect(() => {
     if (!node) {
       return;
     }
@@ -41084,12 +41195,12 @@ function usePointerDownOutside(onPointerDownOutside, args) {
     shouldHandlePointerDownOutside = IS_TRUE
   } = args;
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React20.useRef(false);
-  const isPointerDownOutsideRef = React20.useRef(false);
-  const interceptedOutsideInteractionEventsRef = React20.useRef(/* @__PURE__ */ new Map());
-  const handleClickRef = React20.useRef(() => {
+  const isPointerInsideReactTreeRef = React21.useRef(false);
+  const isPointerDownOutsideRef = React21.useRef(false);
+  const interceptedOutsideInteractionEventsRef = React21.useRef(/* @__PURE__ */ new Map());
+  const handleClickRef = React21.useRef(() => {
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     function resetOutsideInteraction() {
       isPointerDownOutsideRef.current = false;
       isDeferredPointerDownOutsideRef.current = false;
@@ -41204,8 +41315,8 @@ function usePointerDownOutside(onPointerDownOutside, args) {
 __name11(usePointerDownOutside, "usePointerDownOutside");
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React20.useRef(false);
-  React20.useEffect(() => {
+  const isFocusInsideReactTreeRef = React21.useRef(false);
+  React21.useEffect(() => {
     const handleFocus = /* @__PURE__ */ __name11((event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -41241,7 +41352,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 __name11(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
 
 // node_modules/@radix-ui/react-focus-guards/dist/index.mjs
-import * as React21 from "react";
+import * as React24 from "react";
 var __defProp14 = Object.defineProperty;
 var __name12 = (target, value) => __defProp14(target, "name", { value, configurable: true });
 var count = 0;
@@ -41252,7 +41363,7 @@ function FocusGuards(props) {
 }
 __name12(FocusGuards, "FocusGuards");
 function useFocusGuards() {
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     if (!guards) {
       guards = { start: createFocusGuard(), end: createFocusGuard() };
     }
@@ -41288,14 +41399,14 @@ function createFocusGuard() {
 __name12(createFocusGuard, "createFocusGuard");
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
-import * as React24 from "react";
+import * as React25 from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var __defProp15 = Object.defineProperty;
 var __name13 = (target, value) => __defProp15(target, "name", { value, configurable: true });
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var FocusScope = /* @__PURE__ */ React24.forwardRef(
+var FocusScope = /* @__PURE__ */ React25.forwardRef(
   /* @__PURE__ */ __name13(function FocusScope2(props, forwardedRef) {
     const {
       loop = false,
@@ -41304,12 +41415,12 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
       onUnmountAutoFocus: onUnmountAutoFocusProp,
       ...scopeProps
     } = props;
-    const [container, setContainer] = React24.useState(null);
+    const [container, setContainer] = React25.useState(null);
     const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
     const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-    const lastFocusedElementRef = React24.useRef(null);
+    const lastFocusedElementRef = React25.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, setContainer);
-    const focusScope = React24.useRef({
+    const focusScope = React25.useRef({
       paused: false,
       pause() {
         this.paused = true;
@@ -41318,7 +41429,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         this.paused = false;
       }
     }).current;
-    React24.useEffect(() => {
+    React25.useEffect(() => {
       if (trapped) {
         let handleFocusIn2 = function(event) {
           if (focusScope.paused || !container) return;
@@ -41357,7 +41468,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         };
       }
     }, [trapped, container, focusScope.paused]);
-    React24.useEffect(() => {
+    React25.useEffect(() => {
       if (container) {
         focusScopesStack.add(focusScope);
         const previouslyFocusedElement = document.activeElement;
@@ -41388,7 +41499,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         };
       }
     }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-    const handleKeyDown = React24.useCallback(
+    const handleKeyDown = React25.useCallback(
       (event) => {
         if (!loop && !trapped) return;
         if (focusScope.paused) return;
@@ -41511,13 +41622,13 @@ function removeLinks(items) {
 __name13(removeLinks, "removeLinks");
 
 // node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React25 from "react";
+import * as React26 from "react";
 var __defProp16 = Object.defineProperty;
 var __name14 = (target, value) => __defProp16(target, "name", { value, configurable: true });
-var useReactId = React25[" useId ".trim().toString()] || (() => void 0);
+var useReactId = React26[" useId ".trim().toString()] || (() => void 0);
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React25.useState(useReactId());
+  const [id, setId] = React26.useState(useReactId());
   useLayoutEffect2(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count2++));
   }, [deterministicId]);
@@ -41526,7 +41637,7 @@ function useId(deterministicId) {
 __name14(useId, "useId");
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import * as React28 from "react";
+import * as React29 from "react";
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
@@ -43121,7 +43232,7 @@ var computePosition2 = (reference, floating, options) => {
 };
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-import * as React26 from "react";
+import * as React27 from "react";
 import { useLayoutEffect as useLayoutEffect3 } from "react";
 import * as ReactDOM3 from "react-dom";
 var isClient = typeof document !== "undefined";
@@ -43187,7 +43298,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React26.useRef(value);
+  const ref = React27.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -43210,7 +43321,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React26.useState({
+  const [data, setData] = React27.useState({
     x: 0,
     y: 0,
     strategy,
@@ -43218,19 +43329,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React26.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React27.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React26.useState(null);
-  const [_floating, _setFloating] = React26.useState(null);
-  const setReference = React26.useCallback((node) => {
+  const [_reference, _setReference] = React27.useState(null);
+  const [_floating, _setFloating] = React27.useState(null);
+  const setReference = React27.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React26.useCallback((node) => {
+  const setFloating = React27.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -43238,14 +43349,14 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React26.useRef(null);
-  const floatingRef = React26.useRef(null);
-  const dataRef = React26.useRef(data);
+  const referenceRef = React27.useRef(null);
+  const floatingRef = React27.useRef(null);
+  const dataRef = React27.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
   const openRef = useLatestRef(open);
-  const update = React26.useCallback(() => {
+  const update = React27.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -43283,7 +43394,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React26.useRef(false);
+  const isMountedRef = React27.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -43300,17 +43411,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React26.useMemo(() => ({
+  const refs = React27.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React26.useMemo(() => ({
+  const elements = React27.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React26.useMemo(() => {
+  const floatingStyles = React27.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -43336,7 +43447,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React26.useMemo(() => ({
+  return React27.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -43432,11 +43543,11 @@ var arrow3 = (options, deps) => {
 };
 
 // node_modules/@radix-ui/react-use-size/dist/index.mjs
-import * as React27 from "react";
+import * as React28 from "react";
 var __defProp17 = Object.defineProperty;
 var __name15 = (target, value) => __defProp17(target, "name", { value, configurable: true });
 function useSize(element) {
-  const [size4, setSize] = React27.useState(void 0);
+  const [size4, setSize] = React28.useState(void 0);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -43480,8 +43591,8 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = /* @__PURE__ */ __name16((props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React28.useState(null);
-  const [placementState, setPlacementState] = React28.useState(void 0);
+  const [anchor, setAnchor] = React29.useState(null);
+  const [placementState, setPlacementState] = React29.useState(void 0);
   return /* @__PURE__ */ jsx27(
     PopperProvider,
     {
@@ -43495,13 +43606,13 @@ var Popper = /* @__PURE__ */ __name16((props) => {
   );
 }, "Popper");
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
+var PopperAnchor = /* @__PURE__ */ React29.forwardRef(
   /* @__PURE__ */ __name16(function PopperAnchor2(props, forwardedRef) {
     const { __scopePopper, virtualRef, ...anchorProps } = props;
     const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-    const ref = React28.useRef(null);
+    const ref = React29.useRef(null);
     const onAnchorChange = context.onAnchorChange;
-    const callbackRef = React28.useCallback(
+    const callbackRef = React29.useCallback(
       (node) => {
         ref.current = node;
         if (node) {
@@ -43511,8 +43622,8 @@ var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
       [onAnchorChange]
     );
     const composedRefs = useComposedRefs(forwardedRef, callbackRef);
-    const anchorRef = React28.useRef(null);
-    React28.useEffect(() => {
+    const anchorRef = React29.useRef(null);
+    React29.useEffect(() => {
       if (!virtualRef) {
         return;
       }
@@ -43538,7 +43649,7 @@ var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
 );
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = /* @__PURE__ */ React28.forwardRef(
+var PopperContent = /* @__PURE__ */ React29.forwardRef(
   /* @__PURE__ */ __name16(function PopperContent2(props, forwardedRef) {
     const {
       __scopePopper,
@@ -43557,9 +43668,9 @@ var PopperContent = /* @__PURE__ */ React28.forwardRef(
       ...contentProps
     } = props;
     const context = usePopperContext(CONTENT_NAME, __scopePopper);
-    const [content, setContent] = React28.useState(null);
+    const [content, setContent] = React29.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, setContent);
-    const [arrow4, setArrow] = React28.useState(null);
+    const [arrow4, setArrow] = React29.useState(null);
     const arrowSize = useSize(arrow4);
     const arrowWidth = arrowSize?.width ?? 0;
     const arrowHeight = arrowSize?.height ?? 0;
@@ -43639,7 +43750,7 @@ var PopperContent = /* @__PURE__ */ React28.forwardRef(
     const arrowX = middlewareData.arrow?.x;
     const arrowY = middlewareData.arrow?.y;
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-    const [contentZIndex, setContentZIndex] = React28.useState();
+    const [contentZIndex, setContentZIndex] = React29.useState();
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
@@ -43744,15 +43855,15 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 
 // node_modules/@radix-ui/react-portal/dist/index.mjs
-import * as React29 from "react";
+import * as React30 from "react";
 import * as ReactDOM4 from "react-dom";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var __defProp19 = Object.defineProperty;
 var __name17 = (target, value) => __defProp19(target, "name", { value, configurable: true });
-var Portal = /* @__PURE__ */ React29.forwardRef(
+var Portal = /* @__PURE__ */ React30.forwardRef(
   /* @__PURE__ */ __name17(function Portal2(props, forwardedRef) {
     const { container: containerProp, ...portalProps } = props;
-    const [mounted, setMounted] = React29.useState(false);
+    const [mounted, setMounted] = React30.useState(false);
     useLayoutEffect2(() => setMounted(true), []);
     const container = containerProp || mounted && globalThis?.document?.body;
     return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx28(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
@@ -43761,11 +43872,11 @@ var Portal = /* @__PURE__ */ React29.forwardRef(
 
 // node_modules/@radix-ui/react-presence/dist/index.mjs
 import * as React210 from "react";
-import * as React30 from "react";
+import * as React31 from "react";
 var __defProp20 = Object.defineProperty;
 var __name18 = (target, value) => __defProp20(target, "name", { value, configurable: true });
 function useStateMachine(initialState, machine) {
-  return React30.useReducer((state, event) => {
+  return React31.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -43939,17 +44050,17 @@ function getElementRef2(element) {
 __name18(getElementRef2, "getElementRef");
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import * as React32 from "react";
+import * as React33 from "react";
 
 // node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
 import * as React211 from "react";
-import * as React31 from "react";
+import * as React32 from "react";
 var __defProp21 = Object.defineProperty;
 var __name19 = (target, value) => __defProp21(target, "name", { value, configurable: true });
 var _isHydrated = false;
 function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = React31.useState(_isHydrated);
-  React31.useEffect(() => {
+  const [isHydrated, setIsHydrated] = React32.useState(_isHydrated);
+  React32.useEffect(() => {
     if (!_isHydrated) {
       _isHydrated = true;
       setIsHydrated(true);
@@ -43987,13 +44098,13 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
   [createCollectionScope]
 );
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = /* @__PURE__ */ React32.forwardRef(
+var RovingFocusGroup = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name20(function RovingFocusGroup2(props, forwardedRef) {
     return /* @__PURE__ */ jsx29(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }, "RovingFocusGroup")
 );
-var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
+var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
   const {
     __scopeRovingFocusGroup,
     orientation: orientation2,
@@ -44006,7 +44117,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
     preventScrollOnEntryFocus = false,
     ...groupProps
   } = props;
-  const ref = React32.useRef(null);
+  const ref = React33.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const direction = useDirection(dir);
   const [currentTabStopId, setCurrentTabStopId] = useControllableState({
@@ -44015,12 +44126,12 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
     onChange: onCurrentTabStopIdChange,
     caller: GROUP_NAME
   });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React32.useState(false);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React33.useState(false);
   const handleEntryFocus = useCallbackRef(onEntryFocus);
   const getItems = useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = React32.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React32.useState(0);
-  React32.useEffect(() => {
+  const isClickFocusRef = React33.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React33.useState(0);
+  React33.useEffect(() => {
     const node = ref.current;
     if (node) {
       node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
@@ -44035,16 +44146,16 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
       dir: direction,
       loop,
       currentTabStopId,
-      onItemFocus: React32.useCallback(
+      onItemFocus: React33.useCallback(
         (tabStopId) => setCurrentTabStopId(tabStopId),
         [setCurrentTabStopId]
       ),
-      onItemShiftTab: React32.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React32.useCallback(
+      onItemShiftTab: React33.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React33.useCallback(
         () => setFocusableItemsCount((prevCount) => prevCount + 1),
         []
       ),
-      onFocusableItemRemove: React32.useCallback(
+      onFocusableItemRemove: React33.useCallback(
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
@@ -44084,7 +44195,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
   );
 }, "RovingFocusGroupImpl"));
 var ITEM_NAME = "RovingFocusGroupItem";
-var RovingFocusGroupItem = /* @__PURE__ */ React32.forwardRef(
+var RovingFocusGroupItem = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name20(function RovingFocusGroupItem2(props, forwardedRef) {
     const {
@@ -44109,7 +44220,7 @@ var RovingFocusGroupItem = /* @__PURE__ */ React32.forwardRef(
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
     }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    React32.useEffect(() => {
+    React33.useEffect(() => {
       if (isHydrated || !focusable) {
         return;
       }
@@ -44355,10 +44466,10 @@ function __spreadArray(to, from, pack) {
 }
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-import * as React39 from "react";
+import * as React40 from "react";
 
 // node_modules/react-remove-scroll/dist/es2015/UI.js
-import * as React35 from "react";
+import * as React36 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/constants.js
 var zeroRightClassName = "right-scroll-bar-position";
@@ -44405,8 +44516,8 @@ function useCallbackRef2(initialValue, callback) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useMergeRef.js
-import * as React33 from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React33.useLayoutEffect : React33.useEffect;
+import * as React34 from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React34.useLayoutEffect : React34.useEffect;
 var currentValues = /* @__PURE__ */ new WeakMap();
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -44523,7 +44634,7 @@ function createSidecarMedium(options) {
 }
 
 // node_modules/use-sidecar/dist/es2015/exports.js
-import * as React34 from "react";
+import * as React35 from "react";
 var SideCar = function(_a) {
   var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
   if (!sideCar) {
@@ -44533,7 +44644,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React34.createElement(Target, __assign({}, rest));
+  return React35.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -44548,9 +44659,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React35.forwardRef(function(props, parentRef) {
-  var ref = React35.useRef(null);
-  var _a = React35.useState({
+var RemoveScroll = React36.forwardRef(function(props, parentRef) {
+  var ref = React36.useRef(null);
+  var _a = React36.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -44559,11 +44670,11 @@ var RemoveScroll = React35.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React35.createElement(
-    React35.Fragment,
+  return React36.createElement(
+    React36.Fragment,
     null,
-    enabled && React35.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
-    forwardProps ? React35.cloneElement(React35.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React35.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
+    enabled && React36.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
+    forwardProps ? React36.cloneElement(React36.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React36.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
   );
 });
 RemoveScroll.defaultProps = {
@@ -44577,13 +44688,13 @@ RemoveScroll.classNames = {
 };
 
 // node_modules/react-remove-scroll/dist/es2015/SideEffect.js
-import * as React38 from "react";
+import * as React39 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/component.js
-import * as React37 from "react";
+import * as React38 from "react";
 
 // node_modules/react-style-singleton/dist/es2015/hook.js
-import * as React36 from "react";
+import * as React37 from "react";
 
 // node_modules/get-nonce/dist/es2015/index.js
 var currentNonce;
@@ -44647,7 +44758,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React36.useEffect(function() {
+    React37.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -44721,7 +44832,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React37.useEffect(function() {
+  React38.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -44736,10 +44847,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
   useLockAttribute();
-  var gap = React37.useMemo(function() {
+  var gap = React38.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React37.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React38.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 
 // node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
@@ -44880,16 +44991,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React38.useRef([]);
-  var touchStartRef = React38.useRef([0, 0]);
-  var activeAxis = React38.useRef();
-  var id = React38.useState(idCounter++)[0];
-  var Style2 = React38.useState(styleSingleton)[0];
-  var lastProps = React38.useRef(props);
-  React38.useEffect(function() {
+  var shouldPreventQueue = React39.useRef([]);
+  var touchStartRef = React39.useRef([0, 0]);
+  var activeAxis = React39.useRef();
+  var id = React39.useState(idCounter++)[0];
+  var Style2 = React39.useState(styleSingleton)[0];
+  var lastProps = React39.useRef(props);
+  React39.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React38.useEffect(function() {
+  React39.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -44905,7 +45016,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React38.useCallback(function(event, parent) {
+  var shouldCancelEvent = React39.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -44947,7 +45058,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React38.useCallback(function(_event) {
+  var shouldPrevent = React39.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -44974,7 +45085,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React38.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React39.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -44983,17 +45094,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React38.useCallback(function(event) {
+  var scrollTouchStart = React39.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = void 0;
   }, []);
-  var scrollWheel = React38.useCallback(function(event) {
+  var scrollWheel = React39.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React38.useCallback(function(event) {
+  var scrollTouchMove = React39.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React38.useEffect(function() {
+  React39.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -45013,11 +45124,11 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var removeScrollBar = props.removeScrollBar, inert = props.inert;
-  return React38.createElement(
-    React38.Fragment,
+  return React39.createElement(
+    React39.Fragment,
     null,
-    inert ? React38.createElement(Style2, { styles: generateStyle(id) }) : null,
-    removeScrollBar ? React38.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
+    inert ? React39.createElement(Style2, { styles: generateStyle(id) }) : null,
+    removeScrollBar ? React39.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
   );
 }
 function getOutermostShadowParent(node) {
@@ -45036,8 +45147,8 @@ function getOutermostShadowParent(node) {
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-var ReactRemoveScroll = React39.forwardRef(function(props, ref) {
-  return React39.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React40.forwardRef(function(props, ref) {
+  return React40.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -45072,11 +45183,11 @@ var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
 var Menu = /* @__PURE__ */ __name21((props) => {
   const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
   const popperScope = usePopperScope(__scopeMenu);
-  const [content, setContent] = React40.useState(null);
-  const isUsingKeyboardRef = React40.useRef(false);
+  const [content, setContent] = React41.useState(null);
+  const isUsingKeyboardRef = React41.useRef(false);
   const handleOpenChange = useCallbackRef(onOpenChange);
   const direction = useDirection(dir);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     const handleKeyDown = /* @__PURE__ */ __name21(() => {
       isUsingKeyboardRef.current = true;
       document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
@@ -45090,7 +45201,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!open) {
       return;
     }
@@ -45110,7 +45221,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
         MenuRootProvider,
         {
           scope: __scopeMenu,
-          onClose: React40.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+          onClose: React41.useCallback(() => handleOpenChange(false), [handleOpenChange]),
           isUsingKeyboardRef,
           dir: direction,
           modal,
@@ -45120,7 +45231,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
     }
   ) });
 }, "Menu");
-var MenuAnchor = /* @__PURE__ */ React40.forwardRef(
+var MenuAnchor = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuAnchor2(props, forwardedRef) {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
@@ -45138,7 +45249,7 @@ var MenuPortal = /* @__PURE__ */ __name21((props) => {
 }, "MenuPortal");
 var CONTENT_NAME2 = "MenuContent";
 var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME2);
-var MenuContent = /* @__PURE__ */ React40.forwardRef(
+var MenuContent = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuContent2(props, forwardedRef) {
     const portalContext = usePortalContext(CONTENT_NAME2, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
@@ -45147,13 +45258,13 @@ var MenuContent = /* @__PURE__ */ React40.forwardRef(
     return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx30(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx30(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }, "MenuContent")
 );
-var MenuRootContentModal = /* @__PURE__ */ React40.forwardRef(
+var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuRootContentModal2(props, forwardedRef) {
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
@@ -45175,7 +45286,7 @@ var MenuRootContentModal = /* @__PURE__ */ React40.forwardRef(
     );
   }, "MenuRootContentModal")
 );
-var MenuRootContentNonModal = /* @__PURE__ */ React40.forwardRef(/* @__PURE__ */ __name21(function MenuRootContentNonModal2(props, forwardedRef) {
+var MenuRootContentNonModal = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name21(function MenuRootContentNonModal2(props, forwardedRef) {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
   return /* @__PURE__ */ jsx30(
     MenuContentImpl,
@@ -45190,7 +45301,7 @@ var MenuRootContentNonModal = /* @__PURE__ */ React40.forwardRef(/* @__PURE__ */
   );
 }, "MenuRootContentNonModal"));
 var Slot = createSlot("MenuContent.ScrollLock");
-var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
+var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuContentImpl2(props, forwardedRef) {
     const {
@@ -45214,16 +45325,16 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
     const popperScope = usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
     const getItems = useCollection2(__scopeMenu);
-    const [currentItemId, setCurrentItemId] = React40.useState(null);
-    const contentRef = React40.useRef(null);
+    const [currentItemId, setCurrentItemId] = React41.useState(null);
+    const contentRef = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
-    const timerRef = React40.useRef(0);
-    const searchRef = React40.useRef("");
-    const pointerGraceTimerRef = React40.useRef(0);
-    const pointerGraceIntentRef = React40.useRef(null);
-    const pointerDirRef = React40.useRef("right");
-    const lastPointerXRef = React40.useRef(0);
-    const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React40.Fragment;
+    const timerRef = React41.useRef(0);
+    const searchRef = React41.useRef("");
+    const pointerGraceTimerRef = React41.useRef(0);
+    const pointerGraceIntentRef = React41.useRef(null);
+    const pointerDirRef = React41.useRef("right");
+    const lastPointerXRef = React41.useRef(0);
+    const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React41.Fragment;
     const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot, allowPinchZoom: true } : void 0;
     const handleTypeaheadSearch = /* @__PURE__ */ __name21((key) => {
       const search = searchRef.current + key;
@@ -45242,11 +45353,11 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
         setTimeout(() => newItem.focus());
       }
     }, "handleTypeaheadSearch");
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       return () => window.clearTimeout(timerRef.current);
     }, []);
     useFocusGuards();
-    const isPointerMovingToSubmenu = React40.useCallback((event) => {
+    const isPointerMovingToSubmenu = React41.useCallback((event) => {
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
@@ -45255,13 +45366,13 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
       {
         scope: __scopeMenu,
         searchRef,
-        onItemEnter: React40.useCallback(
+        onItemEnter: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) event.preventDefault();
           },
           [isPointerMovingToSubmenu]
         ),
-        onItemLeave: React40.useCallback(
+        onItemLeave: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) return;
             contentRef.current?.focus();
@@ -45269,14 +45380,14 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
           },
           [isPointerMovingToSubmenu]
         ),
-        onTriggerLeave: React40.useCallback(
+        onTriggerLeave: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) event.preventDefault();
           },
           [isPointerMovingToSubmenu]
         ),
         pointerGraceTimerRef,
-        onPointerGraceIntentChange: React40.useCallback((intent) => {
+        onPointerGraceIntentChange: React41.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
         children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
@@ -45375,15 +45486,15 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
 );
 var ITEM_NAME2 = "MenuItem";
 var ITEM_SELECT = "menu.itemSelect";
-var MenuItem = /* @__PURE__ */ React40.forwardRef(
+var MenuItem = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuItem2(props, forwardedRef) {
     const { disabled = false, onSelect, ...itemProps } = props;
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const rootContext = useMenuRootContext(ITEM_NAME2, props.__scopeMenu);
     const contentContext = useMenuContentContext(ITEM_NAME2, props.__scopeMenu);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    const isPointerDownRef = React40.useRef(false);
+    const isPointerDownRef = React41.useRef(false);
     const handleSelect = /* @__PURE__ */ __name21(() => {
       const menuItem = ref.current;
       if (!disabled && menuItem) {
@@ -45428,16 +45539,16 @@ var MenuItem = /* @__PURE__ */ React40.forwardRef(
     );
   }, "MenuItem")
 );
-var MenuItemImpl = /* @__PURE__ */ React40.forwardRef(
+var MenuItemImpl = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuItemImpl2(props, forwardedRef) {
     const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
     const contentContext = useMenuContentContext(ITEM_NAME2, __scopeMenu);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    const [isFocused, setIsFocused] = React40.useState(false);
-    const [textContent, setTextContent] = React40.useState("");
-    React40.useEffect(() => {
+    const [isFocused, setIsFocused] = React41.useState(false);
+    const [textContent, setTextContent] = React41.useState("");
+    React41.useEffect(() => {
       const menuItem = ref.current;
       if (menuItem) {
         setTextContent((menuItem.textContent ?? "").trim());
@@ -45495,7 +45606,7 @@ var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
   ITEM_INDICATOR_NAME,
   { checked: false }
 );
-var MenuSeparator = /* @__PURE__ */ React40.forwardRef(
+var MenuSeparator = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSeparator2(props, forwardedRef) {
     const { __scopeMenu, ...separatorProps } = props;
     return /* @__PURE__ */ jsx30(
@@ -45515,10 +45626,10 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
   const { __scopeMenu, children, open = false, onOpenChange } = props;
   const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
   const popperScope = usePopperScope(__scopeMenu);
-  const [trigger, setTrigger] = React40.useState(null);
-  const [content, setContent] = React40.useState(null);
+  const [trigger, setTrigger] = React41.useState(null);
+  const [content, setContent] = React41.useState(null);
   const handleOpenChange = useCallbackRef(onOpenChange);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
@@ -45545,21 +45656,21 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
   ) });
 }, "MenuSub");
 var SUB_TRIGGER_NAME = "MenuSubTrigger";
-var MenuSubTrigger = /* @__PURE__ */ React40.forwardRef(
+var MenuSubTrigger = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSubTrigger2(props, forwardedRef) {
     const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);
-    const openTimerRef = React40.useRef(null);
+    const openTimerRef = React41.useRef(null);
     const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
     const scope = { __scopeMenu: props.__scopeMenu };
-    const clearOpenTimer = React40.useCallback(() => {
+    const clearOpenTimer = React41.useCallback(() => {
       if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
       openTimerRef.current = null;
     }, []);
-    React40.useEffect(() => clearOpenTimer, [clearOpenTimer]);
-    React40.useEffect(() => {
+    React41.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+    React41.useEffect(() => {
       const pointerGraceTimer = pointerGraceTimerRef.current;
       return () => {
         window.clearTimeout(pointerGraceTimer);
@@ -45651,14 +45762,14 @@ var MenuSubTrigger = /* @__PURE__ */ React40.forwardRef(
   }, "MenuSubTrigger")
 );
 var SUB_CONTENT_NAME = "MenuSubContent";
-var MenuSubContent = /* @__PURE__ */ React40.forwardRef(
+var MenuSubContent = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSubContent2(props, forwardedRef) {
     const portalContext = usePortalContext(CONTENT_NAME2, props.__scopeMenu);
     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 = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(
       MenuContentImpl,
@@ -45793,7 +45904,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
     modal = true
   } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const triggerRef = React41.useRef(null);
+  const triggerRef = React42.useRef(null);
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen ?? false,
@@ -45809,14 +45920,14 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
       contentId: useId(),
       open,
       onOpenChange: setOpen,
-      onOpenToggle: React41.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
       children: /* @__PURE__ */ jsx31(Root3, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 }, "DropdownMenu");
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuTrigger2(props, forwardedRef) {
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
@@ -45858,13 +45969,13 @@ var DropdownMenuPortal = /* @__PURE__ */ __name22((props) => {
   return /* @__PURE__ */ jsx31(Portal3, { ...menuScope, ...portalProps });
 }, "DropdownMenuPortal");
 var CONTENT_NAME3 = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuContent2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...contentProps } = props;
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    const hasInteractedOutsideRef = React41.useRef(false);
+    const hasInteractedOutsideRef = React42.useRef(false);
     return /* @__PURE__ */ jsx31(
       Content2,
       {
@@ -45899,7 +46010,7 @@ var DropdownMenuContent = /* @__PURE__ */ React41.forwardRef(
     );
   }, "DropdownMenuContent")
 );
-var DropdownMenuItem = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuItem = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuItem2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...itemProps } = props;
@@ -45907,7 +46018,7 @@ var DropdownMenuItem = /* @__PURE__ */ React41.forwardRef(
     return /* @__PURE__ */ jsx31(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }, "DropdownMenuItem")
 );
-var DropdownMenuSeparator = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
+var DropdownMenuSeparator = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
@@ -45923,12 +46034,12 @@ var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
   });
   return /* @__PURE__ */ jsx31(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 }, "DropdownMenuSub");
-var DropdownMenuSubTrigger = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
+var DropdownMenuSubTrigger = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 }, "DropdownMenuSubTrigger"));
-var DropdownMenuSubContent = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
+var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(
@@ -46484,6 +46595,7 @@ var ContextMenu = ({
   onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
+  const { gridEnabled, setGridEnabled } = useAppearance();
   const [cameraSubOpen, setCameraSubOpen] = useState35(false);
   const [hoveredItem, setHoveredItem] = useState35(null);
   return /* @__PURE__ */ jsx34(
@@ -46621,6 +46733,27 @@ var ContextMenu = ({
                   ]
                 }
               ),
+              /* @__PURE__ */ jsxs8(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    backgroundColor: hoveredItem === "grid" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setGridEnabled(!gridEnabled);
+                  },
+                  onMouseEnter: () => setHoveredItem("grid"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("grid"),
+                  children: [
+                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsx34(AppearanceMenu, {}),
               /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsx34(
@@ -46743,10 +46876,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect45, useMemo as useMemo30, useRef as useRef27, useState as useState37 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo31, useRef as useRef27, useState as useState37 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect44, useMemo as useMemo29, useRef as useRef26, useState as useState36 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo30, useRef as useRef26, useState as useState36 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -46870,14 +47003,14 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef26(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo29(
+  const normalizedMetadata = useMemo30(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect44(() => {
+  useEffect45(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -46893,7 +47026,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState36(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect44(() => subscribeToRegistry(setEntries), []);
+  useEffect45(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -46910,7 +47043,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState37("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect45(() => {
+  useEffect46(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -46921,14 +47054,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo30(() => {
+  const filteredHotkeys = useMemo31(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -47150,7 +47283,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect46 } from "react";
+import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect47 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState38(false);
   const [menuPos, setMenuPos] = useState38({
@@ -47265,7 +47398,7 @@ var useContextMenu = ({ containerRef }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect46(() => {
+  useEffect47(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -47329,7 +47462,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE45.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE46.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -47462,24 +47595,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect47(() => {
+  useEffect48(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -47593,11 +47726,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 THREE49 from "three";
+import * as THREE50 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE46 from "three";
+import * as THREE47 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -47611,12 +47744,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE46.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE46.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE46.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE46.Vector3().crossVectors(
-        new THREE46.Vector3().subVectors(v2, v1),
-        new THREE46.Vector3().subVectors(v3, v1)
+      const v1 = new THREE47.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE47.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE47.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE47.Vector3().crossVectors(
+        new THREE47.Vector3().subVectors(v2, v1),
+        new THREE47.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -47640,10 +47773,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 THREE48 from "three";
+import * as THREE49 from "three";
 
 // src/utils/load-model.ts
-import * as THREE47 from "three";
+import * as THREE48 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";
@@ -47651,12 +47784,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE47.MeshStandardMaterial({
+    const material = new THREE48.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE47.Mesh(geometry, material);
+    return new THREE48.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -47689,9 +47822,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -47705,13 +47838,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE48.MeshStandardMaterial({
+      const material2 = new THREE49.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE48.DoubleSide
+        side: THREE49.DoubleSide
       });
-      const mesh2 = new THREE48.Mesh(threeGeom, material2);
+      const mesh2 = new THREE49.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47721,9 +47854,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -47740,17 +47873,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE48.Color(geomInfo.color);
+      const color = new THREE49.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE48.MeshStandardMaterial({
+      const material2 = new THREE49.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE48.DoubleSide
+        side: THREE49.DoubleSide
       });
-      const mesh2 = new THREE48.Mesh(threeGeom, material2);
+      const mesh2 = new THREE49.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47760,22 +47893,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE49.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE48.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE48.MeshStandardMaterial({
+  const geometry = new THREE49.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE49.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE48.Mesh(geometry, material);
+  const mesh = new THREE49.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -47796,11 +47929,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE49.Scene();
+  const scene = new THREE50.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE49.Color(backgroundColor), 1);
-  const camera = new THREE49.OrthographicCamera();
+  renderer.setClearColor(new THREE50.Color(backgroundColor), 1);
+  const camera = new THREE50.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -47814,11 +47947,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 THREE49.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE50.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE49.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE50.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE49.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE50.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -47829,7 +47962,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createSimplifiedBoardGeom(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE49.Color(
+    const baseColor = new THREE50.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -47841,28 +47974,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE49.DoubleSide
+        side: THREE50.DoubleSide
       });
-      const mesh = new THREE49.Mesh(geometry, material);
+      const mesh = new THREE50.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE49.Color(8947848);
-  const gridHelper = new THREE49.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE50.Color(8947848);
+  const gridHelper = new THREE50.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 THREE49.LineBasicMaterial) {
+    if (mat instanceof THREE50.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE49.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE49.Vector3());
-  const size4 = box.getSize(new THREE49.Vector3());
+  const box = new THREE50.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE50.Vector3());
+  const size4 = box.getSize(new THREE50.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -47880,10 +48013,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect48, useState as useState40, useMemo as useMemo31, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect49, useState as useState40, useMemo as useMemo32, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo31(() => document.createElement("a"), []);
+  const link = useMemo32(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -47893,7 +48026,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect48(
+  useEffect49(
     () => () => {
       link.remove();
       instance = null;
@@ -47914,11 +48047,11 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect48(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect49(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo31(() => new GLTFExporter3(), []);
+  const exporter = useMemo32(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(