@tscircuit/3d-viewer 0.0.628 → 0.0.629

package/dist/index.js

@@ -18896,19 +18896,109 @@ var pickVisibleMesh = (scene, position) => {
   }
 };
 
+// src/utils/prerendered-glb.ts
+import * as THREE4 from "three";
+import { GLTFLoader } from "three-stdlib";
+
+// src/utils/configure-object-shadows.ts
+import * as THREE3 from "three";
+var configureObjectShadows = (object, { castShadow = true, receiveShadow = true } = {}) => {
+  object.traverse((child) => {
+    if (!(child instanceof THREE3.Mesh)) return;
+    child.castShadow = castShadow;
+    child.receiveShadow = receiveShadow;
+  });
+};
+
+// src/utils/prerendered-glb.ts
+function getGlbComponentMetadata(object) {
+  const metadata = object.userData.tscircuit;
+  if (!metadata || typeof metadata !== "object") return;
+  const result = {};
+  for (const key of [
+    "cad_component_id",
+    "source_component_id",
+    "pcb_component_id",
+    "componentName"
+  ]) {
+    if (typeof metadata[key] === "string") result[key] = metadata[key];
+  }
+  return result;
+}
+function prepareGlbScene(scene) {
+  const root = new THREE4.Group();
+  root.name = "prerendered-glb";
+  root.applyMatrix4(
+    new THREE4.Matrix4().set(-1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1)
+  );
+  root.add(scene);
+  scene.traverse((object) => {
+    const metadata = getGlbComponentMetadata(object);
+    if (metadata) Object.assign(object.userData, metadata);
+  });
+  configureObjectShadows(root);
+  return root;
+}
+function disposeGlbScene(scene) {
+  const geometries = /* @__PURE__ */ new Set();
+  const materials = /* @__PURE__ */ new Set();
+  const textures = /* @__PURE__ */ new Set();
+  scene.traverse((object) => {
+    if (!(object instanceof THREE4.Mesh)) return;
+    geometries.add(object.geometry);
+    for (const material of Array.isArray(object.material) ? object.material : [object.material]) {
+      materials.add(material);
+      for (const value of Object.values(material)) {
+        if (value instanceof THREE4.Texture) textures.add(value);
+      }
+    }
+  });
+  for (const texture of textures) {
+    texture.dispose();
+    if (typeof ImageBitmap !== "undefined" && texture.image instanceof ImageBitmap)
+      texture.image.close();
+  }
+  for (const material of materials) material.dispose();
+  for (const geometry of geometries) geometry.dispose();
+}
+async function loadGlbScene(source, signal) {
+  const loadSignal = AbortSignal.any([signal, AbortSignal.timeout(3e4)]);
+  let bytes;
+  if (typeof source === "string") {
+    const response = await fetch(source, { signal: loadSignal });
+    if (!response.ok) throw new Error(`Unable to load GLB (${response.status})`);
+    bytes = await response.arrayBuffer();
+  } else bytes = source;
+  loadSignal.throwIfAborted();
+  const gltf = await new GLTFLoader().parseAsync(bytes, "");
+  if (loadSignal.aborted) {
+    disposeGlbScene(gltf.scene);
+    loadSignal.throwIfAborted();
+  }
+  return prepareGlbScene(gltf.scene);
+}
+
 // src/utils/pick-schematic-component.ts
 var pickSchematicComponent = (scene, position, circuitJson) => {
   let object = pickVisibleMesh(scene, position) ?? null;
   let pcbComponentId;
+  let glbIdentity;
   while (object) {
     pcbComponentId ??= object.userData.pcb_component_id;
+    const metadata = getGlbComponentMetadata(object);
+    if (metadata?.source_component_id && metadata.pcb_component_id && metadata.componentName)
+      glbIdentity ??= {
+        source_component_id: metadata.source_component_id,
+        pcb_component_id: metadata.pcb_component_id,
+        refdes: metadata.componentName
+      };
     object = object.parent;
   }
   if (!pcbComponentId) return;
   const pcb = circuitJson.find(
     (e) => e.type === "pcb_component" && e.pcb_component_id === pcbComponentId
   );
-  if (pcb?.type !== "pcb_component") return;
+  if (pcb?.type !== "pcb_component") return glbIdentity;
   const source = circuitJson.find(
     (e) => e.type === "source_component" && e.source_component_id === pcb.source_component_id
   );
@@ -18936,7 +19026,15 @@ var pickCadComponent = (scene, position, circuitJson) => {
       const cad = circuitJson.find(
         (e) => e.type === "cad_component" && e.cad_component_id === cadComponentId
       );
-      if (cad?.type !== "cad_component") return;
+      if (cad?.type !== "cad_component") {
+        const metadata = getGlbComponentMetadata(object);
+        if (metadata && metadata.cad_component_id === cadComponentId)
+          return {
+            cad_component_id: cadComponentId,
+            componentName: metadata.componentName ?? cadComponentId
+          };
+        return;
+      }
       const source = circuitJson.find(
         (e) => e.type === "source_component" && e.source_component_id === cad.source_component_id
       );
@@ -19014,8 +19112,8 @@ function configureRuntimeFont() {
 }
 
 // src/CadViewer.tsx
-import { useCallback as useCallback25, useContext as useContext11, useEffect as useEffect51, useRef as useRef29, useState as useState42 } from "react";
-import * as THREE57 from "three";
+import { useCallback as useCallback25, useContext as useContext11, useEffect as useEffect53, useRef as useRef29, useState as useState44 } from "react";
+import * as THREE59 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
@@ -19146,7 +19244,7 @@ function usePcbThickness(circuitJson) {
 // src/react-three/Html.tsx
 import { useRef, useEffect as useEffect3, useState as useState3 } from "react";
 import ReactDOM from "react-dom";
-import * as THREE3 from "three";
+import * as THREE5 from "three";
 
 // lib/utils/z-index-map.ts
 var zIndexMap = {
@@ -19178,7 +19276,7 @@ var Html = ({ children, position, style }) => {
   }, [renderer, children]);
   useFrame(() => {
     if (!camera || !el.current || !renderer) return;
-    const vector = new THREE3.Vector3(...position);
+    const vector = new THREE5.Vector3(...position);
     vector.project(camera);
     const rect = renderer.domElement.getBoundingClientRect();
     const x = Math.round((vector.x + 1) / 2 * rect.width);
@@ -19202,7 +19300,7 @@ import {
   getJscadModelForFootprint
 } from "jscad-electronics/vanilla";
 import { useMemo as useMemo6, useEffect as useEffect6 } from "react";
-import * as THREE6 from "three";
+import * as THREE7 from "three";
 
 // src/ContainerWithTooltip.tsx
 import { useEffect as useEffect5 } from "react";
@@ -19217,7 +19315,7 @@ import {
   useEffect as useEffect4,
   useRef as useRef2
 } from "react";
-import * as THREE4 from "three";
+import * as THREE6 from "three";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var HoverContext = createContext4(null);
 var useHover = () => {
@@ -19230,8 +19328,8 @@ var useHover = () => {
 var HoverProvider = ({ children }) => {
   const { camera, renderer } = useThree();
   const [hoverables, setHoverables] = useState4([]);
-  const raycaster = useMemo5(() => new THREE4.Raycaster(), []);
-  const mouse = useMemo5(() => new THREE4.Vector2(), []);
+  const raycaster = useMemo5(() => new THREE6.Raycaster(), []);
+  const mouse = useMemo5(() => new THREE6.Vector2(), []);
   const hoverablesRef = useRef2(hoverables);
   hoverablesRef.current = hoverables;
   const hoveredObjectRef = useRef2(null);
@@ -19360,16 +19458,6 @@ var ContainerWithTooltip = ({
 };
 var ContainerWithTooltip_default = ContainerWithTooltip;
 
-// src/utils/configure-object-shadows.ts
-import * as THREE5 from "three";
-var configureObjectShadows = (object, { castShadow = true, receiveShadow = true } = {}) => {
-  object.traverse((child) => {
-    if (!(child instanceof THREE5.Mesh)) return;
-    child.castShadow = castShadow;
-    child.receiveShadow = receiveShadow;
-  });
-};
-
 // src/three-components/FootprinterModel.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var FootprinterModel = ({
@@ -19386,24 +19474,24 @@ var FootprinterModel = ({
   const group = useMemo6(() => {
     if (!footprint) return null;
     const { geometries } = getJscadModelForFootprint(footprint, jscadModeling);
-    const group2 = new THREE6.Group();
+    const group2 = new THREE7.Group();
     for (const geomInfo of geometries.flat(Infinity)) {
       const geom = geomInfo.geom;
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE6.Color(geomInfo.color);
+      const color = new THREE7.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material = new THREE6.MeshStandardMaterial({
+      const material = new THREE7.MeshStandardMaterial({
         vertexColors: true,
-        side: THREE6.DoubleSide,
+        side: THREE7.DoubleSide,
         transparent: isTranslucent,
         opacity: isTranslucent ? 0.5 : 1,
         depthWrite: !isTranslucent
       });
-      const mesh = new THREE6.Mesh(threeGeom, material);
+      const mesh = new THREE7.Mesh(threeGeom, material);
       mesh.renderOrder = isTranslucent ? 2 : 1;
       configureObjectShadows(mesh, {
         castShadow: !isTranslucent,
@@ -19438,7 +19526,7 @@ var FootprinterModel = ({
   useEffect6(() => {
     if (!group) return;
     group.traverse((child) => {
-      if (child instanceof THREE6.Mesh && child.material instanceof THREE6.MeshStandardMaterial) {
+      if (child instanceof THREE7.Mesh && child.material instanceof THREE7.MeshStandardMaterial) {
         if (isHovered) {
           child.material.emissive.setHex(255);
           child.material.emissiveIntensity = 0.2;
@@ -19462,17 +19550,17 @@ var FootprinterModel = ({
 
 // src/three-components/GltfModel.tsx
 import { useState as useState5, useEffect as useEffect8 } from "react";
-import * as THREE10 from "three";
-import { GLTFLoader } from "three-stdlib";
+import * as THREE11 from "three";
+import { GLTFLoader as GLTFLoader2 } from "three-stdlib";
 
 // src/react-three/getDefaultEnvironmentMap.ts
-import * as THREE7 from "three";
+import * as THREE8 from "three";
 import { RoomEnvironment } from "three-stdlib";
 var environmentCache = /* @__PURE__ */ new WeakMap();
 var createFallbackEnvironmentMap = () => {
-  const texture = new THREE7.Texture();
+  const texture = new THREE8.Texture();
   texture.name = "fallback-environment-map";
-  texture.mapping = THREE7.EquirectangularReflectionMapping;
+  texture.mapping = THREE8.EquirectangularReflectionMapping;
   return texture;
 };
 var getDefaultEnvironmentMap = (renderer) => {
@@ -19481,8 +19569,8 @@ var getDefaultEnvironmentMap = (renderer) => {
   const cached = environmentCache.get(cacheKey);
   if (cached) return cached;
   let texture;
-  if (renderer instanceof THREE7.WebGLRenderer) {
-    const pmremGenerator = new THREE7.PMREMGenerator(renderer);
+  if (renderer instanceof THREE8.WebGLRenderer) {
+    const pmremGenerator = new THREE8.PMREMGenerator(renderer);
     texture = pmremGenerator.fromScene(RoomEnvironment(), 0.04).texture;
     pmremGenerator.dispose();
   } else {
@@ -19494,18 +19582,18 @@ var getDefaultEnvironmentMap = (renderer) => {
 
 // src/three-components/useCadModelTransformGraph.ts
 import { useEffect as useEffect7, useMemo as useMemo7 } from "react";
-import * as THREE9 from "three";
+import * as THREE10 from "three";
 
 // src/utils/cad-model-fit.ts
-import * as THREE8 from "three";
+import * as THREE9 from "three";
 function getObjectBoundsRelativeToParent(object) {
-  const bounds = new THREE8.Box3();
+  const bounds = new THREE9.Box3();
   let hasBounds = false;
   object.updateWorldMatrix(true, false);
-  const parentInverseMatrix = object.parent ? object.parent.matrixWorld.clone().invert() : new THREE8.Matrix4();
+  const parentInverseMatrix = object.parent ? object.parent.matrixWorld.clone().invert() : new THREE9.Matrix4();
   object.traverse((node) => {
     node.updateWorldMatrix(true, false);
-    if (node instanceof THREE8.Mesh && node.geometry) {
+    if (node instanceof THREE9.Mesh && node.geometry) {
       if (!node.geometry.boundingBox) {
         node.geometry.computeBoundingBox();
       }
@@ -19527,9 +19615,9 @@ function getObjectBoundsRelativeToParent(object) {
 function getLocalBoundsSize(object) {
   const bounds = getObjectBoundsRelativeToParent(object);
   if (!bounds) {
-    return new THREE8.Vector3();
+    return new THREE9.Vector3();
   }
-  return bounds.getSize(new THREE8.Vector3());
+  return bounds.getSize(new THREE9.Vector3());
 }
 function getCadModelFitScale(object, targetSize, fitMode = "contain_within_bounds") {
   if (!targetSize) {
@@ -19561,10 +19649,10 @@ var useCadModelTransformGraph = ({
   scale: scale11
 }) => {
   const { rootObject } = useThree();
-  const boardTransformGroup = useMemo7(() => new THREE9.Group(), []);
-  const fitTransformGroup = useMemo7(() => new THREE9.Group(), []);
-  const modelTransformGroup = useMemo7(() => new THREE9.Group(), []);
-  const loaderTransformGroup = useMemo7(() => new THREE9.Group(), []);
+  const boardTransformGroup = useMemo7(() => new THREE10.Group(), []);
+  const fitTransformGroup = useMemo7(() => new THREE10.Group(), []);
+  const modelTransformGroup = useMemo7(() => new THREE10.Group(), []);
+  const loaderTransformGroup = useMemo7(() => new THREE10.Group(), []);
   useEffect7(() => {
     boardTransformGroup.add(fitTransformGroup);
     return () => {
@@ -19690,7 +19778,7 @@ function GltfModel({
   });
   useEffect8(() => {
     if (!gltfUrl) return;
-    const loader = new GLTFLoader();
+    const loader = new GLTFLoader2();
     let isMounted = true;
     loader.load(
       gltfUrl,
@@ -19698,7 +19786,7 @@ function GltfModel({
         if (!isMounted) return;
         const scene = gltf.scene;
         scene.traverse((child) => {
-          if (child instanceof THREE10.Mesh && child.material) {
+          if (child instanceof THREE11.Mesh && child.material) {
             const setMaterialTransparency = (mat) => {
               mat.transparent = isTranslucent;
               mat.opacity = isTranslucent ? 0.5 : 1;
@@ -19737,7 +19825,7 @@ function GltfModel({
     if (!environmentMap) return;
     const previousMaterialState = [];
     const applyEnvironmentToMaterial = (material) => {
-      if (!(material instanceof THREE10.MeshStandardMaterial)) return;
+      if (!(material instanceof THREE11.MeshStandardMaterial)) return;
       previousMaterialState.push({
         material,
         envMap: material.envMap ?? null,
@@ -19750,7 +19838,7 @@ function GltfModel({
       material.needsUpdate = true;
     };
     model.traverse((child) => {
-      if (!(child instanceof THREE10.Mesh)) return;
+      if (!(child instanceof THREE11.Mesh)) return;
       const material = child.material;
       if (Array.isArray(material)) {
         material.forEach(applyEnvironmentToMaterial);
@@ -19769,10 +19857,10 @@ function GltfModel({
   useEffect8(() => {
     if (!model) return;
     model.traverse((child) => {
-      if (!(child instanceof THREE10.Mesh)) return;
+      if (!(child instanceof THREE11.Mesh)) return;
       const materials = Array.isArray(child.material) ? child.material : [child.material];
       for (const material of materials) {
-        if (!(material instanceof THREE10.MeshStandardMaterial)) continue;
+        if (!(material instanceof THREE11.MeshStandardMaterial)) continue;
         if (isHovered) {
           material.emissive.setHex(255);
           material.emissiveIntensity = 0.2;
@@ -19801,7 +19889,7 @@ function GltfModel({
 var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling = __toESM(require_src(), 1);
 import { convertCSGToThreeGeom as convertCSGToThreeGeom2 } from "jscad-electronics/vanilla";
-import * as THREE11 from "three";
+import * as THREE12 from "three";
 import { useState as useState6, useEffect as useEffect9 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var JscadModel = ({
@@ -19827,11 +19915,11 @@ var JscadModel = ({
       return;
     }
     const geometry = convertCSGToThreeGeom2(jscadObject);
-    const material2 = new THREE11.MeshStandardMaterial({
+    const material2 = new THREE12.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE11.DoubleSide
+      side: THREE12.DoubleSide
     });
-    const model = new THREE11.Mesh(geometry, material2);
+    const model = new THREE12.Mesh(geometry, material2);
     setMesh(model);
     return () => {
       geometry.dispose();
@@ -19866,7 +19954,7 @@ var JscadModel = ({
   useEffect9(() => {
     if (!material) return;
     if (isHovered) {
-      const color = new THREE11.Color(material.color.getHex());
+      const color = new THREE12.Color(material.color.getHex());
       material.emissive.copy(color);
       material.emissive.setRGB(0, 0, 1);
       material.emissiveIntensity = 0.2;
@@ -19986,7 +20074,7 @@ function useGlobalObjLoader(url) {
 
 // src/three-components/MixedStlModel.tsx
 import { useMemo as useMemo8 } from "react";
-import * as THREE12 from "three";
+import * as THREE13 from "three";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function MixedStlModel({
   url,
@@ -20007,7 +20095,7 @@ function MixedStlModel({
   const model = useMemo8(() => {
     if (obj && !(obj instanceof Error)) {
       obj.traverse((child) => {
-        if (child instanceof THREE12.Mesh && child.material) {
+        if (child instanceof THREE13.Mesh && child.material) {
           const setMaterialTransparency = (mat) => {
             mat.transparent = isTranslucent;
             mat.opacity = isTranslucent ? 0.5 : 1;
@@ -20028,9 +20116,9 @@ function MixedStlModel({
       });
       return obj;
     }
-    const fallbackMesh = new THREE12.Mesh(
-      new THREE12.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE12.MeshStandardMaterial({
+    const fallbackMesh = new THREE13.Mesh(
+      new THREE13.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE13.MeshStandardMaterial({
         transparent: true,
         color: "red",
         opacity: 0.25
@@ -20076,8 +20164,8 @@ import {
   BufferGeometry,
   Color as Color3,
   Float32BufferAttribute,
-  Group as Group4,
-  Mesh as Mesh8,
+  Group as Group5,
+  Mesh as Mesh9,
   MeshStandardMaterial as MeshStandardMaterial5
 } from "three";
 var DEFAULT_COLOR = new Color3(0.82, 0.82, 0.82);
@@ -20133,7 +20221,7 @@ function applyFaceColorGroups(geometry, mesh) {
   return materials;
 }
 function occtMeshesToGroup(meshes) {
-  const group = new Group4();
+  const group = new Group5();
   for (const mesh of meshes) {
     const positions = mesh.attributes.position?.array ?? [];
     const indices = mesh.index?.array ?? [];
@@ -20151,7 +20239,7 @@ function occtMeshesToGroup(meshes) {
     geometry.setIndex(indices);
     geometry.clearGroups();
     const materials = applyFaceColorGroups(geometry, mesh);
-    const threeMesh = new Mesh8(
+    const threeMesh = new Mesh9(
       geometry,
       materials.length > 1 ? materials : materials[0]
     );
@@ -20388,7 +20476,7 @@ var StepModel = ({
 };
 
 // src/utils/cad-model-loader-transform.ts
-import * as THREE13 from "three";
+import * as THREE14 from "three";
 function applyCoordinateTransform(point, config) {
   let { x, y, z } = point;
   if (config.axisMapping) {
@@ -20547,15 +20635,15 @@ function getCadLoaderTransformMatrix(config) {
   const basisX = applyCoordinateTransform({ x: 1, y: 0, z: 0 }, config);
   const basisY = applyCoordinateTransform({ x: 0, y: 1, z: 0 }, config);
   const basisZ = applyCoordinateTransform({ x: 0, y: 0, z: 1 }, config);
-  return new THREE13.Matrix4().makeBasis(
-    new THREE13.Vector3(basisX.x, basisX.y, basisX.z),
-    new THREE13.Vector3(basisY.x, basisY.y, basisY.z),
-    new THREE13.Vector3(basisZ.x, basisZ.y, basisZ.z)
+  return new THREE14.Matrix4().makeBasis(
+    new THREE14.Vector3(basisX.x, basisX.y, basisX.z),
+    new THREE14.Vector3(basisY.x, basisY.y, basisY.z),
+    new THREE14.Vector3(basisZ.x, basisZ.y, basisZ.z)
   );
 }
 
 // src/utils/cad-model-transform.ts
-import * as THREE14 from "three";
+import * as THREE15 from "three";
 function toRadians(value) {
   return value * Math.PI / 180;
 }
@@ -20599,8 +20687,8 @@ function getBaseCadRotation(cadComponent, layer) {
   ];
 }
 function rotateOriginPosition(origin, boardNormalRotation) {
-  const vector = new THREE14.Vector3(origin.x, origin.y, origin.z);
-  const euler = new THREE14.Euler(
+  const vector = new THREE15.Vector3(origin.x, origin.y, origin.z);
+  const euler = new THREE15.Euler(
     boardNormalRotation[0],
     boardNormalRotation[1],
     boardNormalRotation[2],
@@ -20986,12 +21074,12 @@ var AnyCadComponent = ({
 
 // src/CadViewerContainer.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect22, useMemo as useMemo17, useState as useState13 } from "react";
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.627",
+  version: "0.0.628",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -21145,10 +21233,10 @@ import {
   useRef as useRef3,
   useState as useState11
 } from "react";
-import * as THREE16 from "three";
+import * as THREE17 from "three";
 
 // src/utils/camera-session-storage.ts
-import * as THREE15 from "three";
+import * as THREE16 from "three";
 var CAMERA_SESSION_STORAGE_KEY = "cadViewerCameraStateSession";
 function getCameraSessionStorageKey(cameraSessionScope) {
   if (!cameraSessionScope) return CAMERA_SESSION_STORAGE_KEY;
@@ -21164,7 +21252,7 @@ function saveCameraSession({
       position: camera.position.toArray(),
       quaternion: camera.quaternion.toArray(),
       up: camera.up.toArray(),
-      fov: camera instanceof THREE15.PerspectiveCamera ? camera.fov : 50,
+      fov: camera instanceof THREE16.PerspectiveCamera ? camera.fov : 50,
       target: controls.target.toArray()
     };
     sessionStorage.setItem(
@@ -21191,7 +21279,7 @@ function loadCameraSession({
     camera.position.fromArray(storedCameraSession.position);
     camera.quaternion.fromArray(storedCameraSession.quaternion);
     camera.up.fromArray(storedCameraSession.up);
-    if (camera instanceof THREE15.PerspectiveCamera) {
+    if (camera instanceof THREE16.PerspectiveCamera) {
       camera.fov = storedCameraSession.fov;
       camera.updateProjectionMatrix();
     }
@@ -21229,7 +21317,7 @@ var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition
   );
   const [cameraPosition, setCameraPosition] = useState11(initialCameraPosition ?? null);
   const [cameraRotation, setCameraRotation] = useState11(
-    new THREE16.Euler(0, 0, 0)
+    new THREE17.Euler(0, 0, 0)
   );
   const baseDistance = useMemo11(() => {
     const [x, y, z] = initialCameraPosition ?? [5, -5, 5];
@@ -21383,7 +21471,7 @@ var useCameraController = () => {
 
 // src/hooks/cameraAnimation.ts
 import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef4 } from "react";
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
   const {
@@ -21394,24 +21482,24 @@ var CameraAnimatorWithContext = () => {
     getPresetConfig
   } = useCameraController();
   const animationRef = useRef4(null);
-  const tempQuaternion = useRef4(new THREE17.Quaternion());
-  const tempTarget = useRef4(new THREE17.Vector3());
-  const tempUp = useRef4(new THREE17.Vector3());
-  const tempRoll = useRef4(new THREE17.Quaternion());
-  const tempRollTarget = useRef4(new THREE17.Quaternion());
-  const baseOrientationHelper = useRef4(new THREE17.Object3D());
-  const orientationHelper = useRef4(new THREE17.Object3D());
+  const tempQuaternion = useRef4(new THREE18.Quaternion());
+  const tempTarget = useRef4(new THREE18.Vector3());
+  const tempUp = useRef4(new THREE18.Vector3());
+  const tempRoll = useRef4(new THREE18.Quaternion());
+  const tempRollTarget = useRef4(new THREE18.Quaternion());
+  const baseOrientationHelper = useRef4(new THREE18.Object3D());
+  const orientationHelper = useRef4(new THREE18.Object3D());
   const animateTo = useCallback5(
     ({ position, target, up, durationMs = 600 }) => {
       if (!mainCameraRef.current) return;
       const currentTarget = controlsRef.current?.target ?? defaultTarget;
-      const toPosition = new THREE17.Vector3(
+      const toPosition = new THREE18.Vector3(
         position[0],
         position[1],
         position[2]
       );
-      const resolvedTarget = target ? new THREE17.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
-      const resolvedUp = new THREE17.Vector3(...up ?? [0, 0, 1]).normalize();
+      const resolvedTarget = target ? new THREE18.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
+      const resolvedUp = new THREE18.Vector3(...up ?? [0, 0, 1]).normalize();
       const toOrientationHelper = orientationHelper.current;
       toOrientationHelper.position.copy(toPosition);
       toOrientationHelper.up.copy(resolvedUp);
@@ -21596,7 +21684,7 @@ import {
   useImperativeHandle,
   useMemo as useMemo12
 } from "react";
-import * as THREE19 from "three";
+import * as THREE20 from "three";
 
 // src/react-three/remove-existing-canvases.ts
 function removeExistingCanvases(container) {
@@ -21604,13 +21692,13 @@ function removeExistingCanvases(container) {
 }
 
 // src/react-three/configure-renderer.ts
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 var configureRenderer = (renderer) => {
-  renderer.outputColorSpace = THREE18.SRGBColorSpace;
-  renderer.toneMapping = THREE18.ACESFilmicToneMapping;
+  renderer.outputColorSpace = THREE19.SRGBColorSpace;
+  renderer.toneMapping = THREE19.ACESFilmicToneMapping;
   renderer.toneMappingExposure = 1;
   renderer.shadowMap.enabled = true;
-  renderer.shadowMap.type = THREE18.PCFSoftShadowMap;
+  renderer.shadowMap.type = THREE19.PCFSoftShadowMap;
 };
 
 // src/react-three/Canvas.tsx
@@ -21642,16 +21730,16 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo12(() => new THREE19.Scene(), []);
+    const scene = useMemo12(() => new THREE20.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef6(new THREE19.Object3D());
+    const rootObject = useRef6(new THREE20.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
     useEffect16(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
-      const renderer = new THREE19.WebGLRenderer({ antialias: true, alpha: true });
+      const renderer = new THREE20.WebGLRenderer({ antialias: true, alpha: true });
       configureRenderer(renderer);
       renderer.setSize(
         mountRef.current.clientWidth,
@@ -21660,7 +21748,7 @@ var Canvas = forwardRef(
       renderer.setPixelRatio(window.devicePixelRatio);
       mountRef.current.appendChild(renderer.domElement);
       const aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-      const camera = cameraType === "perspective" ? new THREE19.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE19.OrthographicCamera(
+      const camera = cameraType === "perspective" ? new THREE20.PerspectiveCamera(75, aspect, 0.1, 1e3) : new THREE20.OrthographicCamera(
         -10 * aspect,
         10 * aspect,
         10,
@@ -21697,7 +21785,7 @@ var Canvas = forwardRef(
       });
       onCreatedRef.current?.({ camera, renderer });
       let animationFrameId;
-      const clock = new THREE19.Clock();
+      const clock = new THREE20.Clock();
       let isVisible = true;
       const visibilityObserver = new IntersectionObserver(([entry]) => {
         isVisible = entry?.isIntersecting ?? false;
@@ -21716,9 +21804,9 @@ var Canvas = forwardRef(
       const handleResize = () => {
         if (mountRef.current?.clientWidth && mountRef.current.clientHeight) {
           const newAspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
-          if (camera instanceof THREE19.PerspectiveCamera) {
+          if (camera instanceof THREE20.PerspectiveCamera) {
             camera.aspect = newAspect;
-          } else if (camera instanceof THREE19.OrthographicCamera) {
+          } else if (camera instanceof THREE20.OrthographicCamera) {
             camera.left = -10 * newAspect;
             camera.right = 10 * newAspect;
             camera.top = 10;
@@ -21757,7 +21845,7 @@ var Canvas = forwardRef(
 
 // src/react-three/Grid.tsx
 import { useEffect as useEffect17, useMemo as useMemo13 } from "react";
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -21803,24 +21891,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size4 = 1e3;
   const gridMesh = useMemo13(() => {
-    const geometry = new THREE20.PlaneGeometry(size4, size4);
+    const geometry = new THREE21.PlaneGeometry(size4, size4);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE20.ShaderMaterial({
+    const material = new THREE21.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE20.Color(15658734) },
-        sectionColor: { value: new THREE20.Color(13421823) },
+        gridColor: { value: new THREE21.Color(15658734) },
+        sectionColor: { value: new THREE21.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE20.DoubleSide
+      side: THREE21.DoubleSide
     });
-    const mesh = new THREE20.Mesh(geometry, material);
+    const mesh = new THREE21.Mesh(geometry, material);
     if (rotation) {
       mesh.rotation.fromArray(rotation);
     }
@@ -21849,7 +21937,7 @@ var Grid = ({
 
 // src/react-three/Lights.tsx
 import { useEffect as useEffect18, useMemo as useMemo14 } from "react";
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
   boardDimensions,
@@ -21859,7 +21947,7 @@ var Lights = ({
 }) => {
   const { scene } = useThree();
   const lightRig = useMemo14(() => {
-    const rig = new THREE21.Group();
+    const rig = new THREE22.Group();
     rig.name = "cad-viewer-light-rig";
     const centerX = boardCenter?.x ?? 0;
     const centerY = boardCenter?.y ?? 0;
@@ -21871,14 +21959,14 @@ var Lights = ({
     const shadowHalfSize = largestBoardDimension * 0.8;
     const lightDistance = largestBoardDimension;
     const keyLightDistance = largestBoardDimension * 1.7;
-    const ambientLight = new THREE21.AmbientLight(16186360, 0.22);
+    const ambientLight = new THREE22.AmbientLight(16186360, 0.22);
     ambientLight.name = "cad-viewer-soft-ambient";
     rig.add(ambientLight);
-    const hemisphereLight = new THREE21.HemisphereLight(15004141, 1581597, 0.2);
+    const hemisphereLight = new THREE22.HemisphereLight(15004141, 1581597, 0.2);
     hemisphereLight.name = "cad-viewer-hemisphere";
     rig.add(hemisphereLight);
     const addDirectionalLight = (name, color, intensity, position, castShadow = false) => {
-      const light = new THREE21.DirectionalLight(color, intensity);
+      const light = new THREE22.DirectionalLight(color, intensity);
       light.name = name;
       light.position.set(
         centerX + position[0],
@@ -21955,7 +22043,7 @@ var Lights = ({
   useEffect18(() => {
     const previousBackground = scene.background;
     const previousEnvironment = scene.environment;
-    scene.background = darkBackgroundEnabled ? new THREE21.Color(1053456) : null;
+    scene.background = darkBackgroundEnabled ? new THREE22.Color(1053456) : null;
     scene.environment = null;
     return () => {
       scene.background = previousBackground;
@@ -21974,11 +22062,11 @@ var Lights = ({
 
 // src/react-three/OrbitControls.tsx
 import { useEffect as useEffect19, useMemo as useMemo15 } from "react";
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // src/react-three/infinite-dolly.ts
-import * as THREE22 from "three";
+import * as THREE23 from "three";
 var MINIMUM_DOLLY_DISTANCE_RATIO = 0.05;
 var getMinimumDollyDistance = ({
   camera,
@@ -21992,12 +22080,12 @@ var applyInfiniteDolly = ({
   controls,
   minimumDollyDistance
 }) => {
-  if (!(camera instanceof THREE22.PerspectiveCamera)) return false;
+  if (!(camera instanceof THREE23.PerspectiveCamera)) return false;
   const orbitDistance = controls.getDistance();
   if (Number.isFinite(orbitDistance) && orbitDistance >= minimumDollyDistance) {
     return false;
   }
-  const viewDirection = new THREE22.Vector3();
+  const viewDirection = new THREE23.Vector3();
   camera.getWorldDirection(viewDirection);
   controls.target.copy(camera.position).addScaledVector(viewDirection, minimumDollyDistance);
   return true;
@@ -22022,7 +22110,7 @@ var OrbitControls = ({
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
   const minimumDollyDistance = useMemo15(() => {
-    if (!controls || !(camera instanceof THREE23.PerspectiveCamera)) {
+    if (!controls || !(camera instanceof THREE24.PerspectiveCamera)) {
       return Number.EPSILON;
     }
     const initialOrbitDistance = target ? Math.hypot(
@@ -22057,9 +22145,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE23.MOUSE.ROTATE,
+      LEFT: THREE24.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE23.MOUSE.PAN,
+      MIDDLE: THREE24.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -22183,14 +22271,14 @@ var getComparisonBounds = (type, boardDimensions, boardCenter) => {
 
 // src/three-components/OrientationCubeCanvas.tsx
 import { useEffect as useEffect20, useRef as useRef7 } from "react";
-import * as THREE24 from "three";
+import * as THREE25 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 THREE24.Quaternion().setFromEuler(
-    new THREE24.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE25.Quaternion().setFromEuler(
+    new THREE25.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE24.Vector3(0, 0, 1);
+  const forwardVector = new THREE25.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -22203,31 +22291,31 @@ var OrientationCubeCanvas = () => {
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
     container.appendChild(canvas);
-    const renderer = new THREE24.WebGLRenderer({
+    const renderer = new THREE25.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
     });
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
-    const scene = new THREE24.Scene();
-    const camera = new THREE24.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const scene = new THREE25.Scene();
+    const camera = new THREE25.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
-    const ambientLight = new THREE24.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE25.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE24.Group();
+    const group = new THREE25.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE24.Mesh(
-      new THREE24.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE24.MeshStandardMaterial({ color: "white" })
+    const box = new THREE25.Mesh(
+      new THREE25.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE25.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE24.LineSegments(
-      new THREE24.EdgesGeometry(
-        new THREE24.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE25.LineSegments(
+      new THREE25.EdgesGeometry(
+        new THREE25.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE24.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE25.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -22289,7 +22377,7 @@ var OrientationCubeCanvas = () => {
       if (!isVisible) return;
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE24.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE25.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -22341,12 +22429,12 @@ var OrientationCubeCanvas = () => {
 import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
 
 // src/reference-objects/create-reference-object.ts
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 var createRoundedRectangleShape = (width, height, radius) => {
   const halfWidth = width / 2;
   const halfHeight = height / 2;
   const safeRadius = Math.min(radius, halfWidth, halfHeight);
-  const shape = new THREE25.Shape();
+  const shape = new THREE26.Shape();
   shape.moveTo(-halfWidth + safeRadius, -halfHeight);
   shape.lineTo(halfWidth - safeRadius, -halfHeight);
   shape.quadraticCurveTo(
@@ -22385,7 +22473,7 @@ var createRoundedPrismGeometry = (width, height, depth, radius) => {
   );
 };
 var createPrismGeometryFromShape = (shape, depth) => {
-  const geometry = new THREE25.ExtrudeGeometry(shape, {
+  const geometry = new THREE26.ExtrudeGeometry(shape, {
     depth,
     bevelEnabled: false,
     curveSegments: 24
@@ -22397,16 +22485,16 @@ var createPrismGeometryFromShape = (shape, depth) => {
 var normalizeObjectToSpec = (object, type) => {
   const spec = REFERENCE_OBJECT_SPECS[type];
   object.updateMatrixWorld(true);
-  const initialBounds = new THREE25.Box3().setFromObject(object);
-  const initialSize = initialBounds.getSize(new THREE25.Vector3());
+  const initialBounds = new THREE26.Box3().setFromObject(object);
+  const initialSize = initialBounds.getSize(new THREE26.Vector3());
   object.scale.set(
     spec.width / initialSize.x,
     spec.height / initialSize.y,
     spec.depth / initialSize.z
   );
   object.updateMatrixWorld(true);
-  const scaledBounds = new THREE25.Box3().setFromObject(object);
-  const scaledCenter = scaledBounds.getCenter(new THREE25.Vector3());
+  const scaledBounds = new THREE26.Box3().setFromObject(object);
+  const scaledCenter = scaledBounds.getCenter(new THREE26.Vector3());
   object.position.set(
     -scaledCenter.x,
     -scaledCenter.y,
@@ -22415,15 +22503,15 @@ var normalizeObjectToSpec = (object, type) => {
   object.updateMatrixWorld(true);
 };
 var createBananaGeometry = () => {
-  const curve = new THREE25.CatmullRomCurve3([
-    new THREE25.Vector3(-82, 18, 16),
-    new THREE25.Vector3(-67, 7, 15),
-    new THREE25.Vector3(-43, -9, 14),
-    new THREE25.Vector3(-15, -18, 14),
-    new THREE25.Vector3(16, -18, 14),
-    new THREE25.Vector3(47, -8, 14.5),
-    new THREE25.Vector3(72, 8, 16),
-    new THREE25.Vector3(84, 19, 17)
+  const curve = new THREE26.CatmullRomCurve3([
+    new THREE26.Vector3(-82, 18, 16),
+    new THREE26.Vector3(-67, 7, 15),
+    new THREE26.Vector3(-43, -9, 14),
+    new THREE26.Vector3(-15, -18, 14),
+    new THREE26.Vector3(16, -18, 14),
+    new THREE26.Vector3(47, -8, 14.5),
+    new THREE26.Vector3(72, 8, 16),
+    new THREE26.Vector3(84, 19, 17)
   ]);
   const tubularSegments = 84;
   const radialSegments = 30;
@@ -22433,8 +22521,8 @@ var createBananaGeometry = () => {
   const colors2 = [];
   const uvs = [];
   const indices = [];
-  const ripeYellow = new THREE25.Color(16766023);
-  const stemGreen = new THREE25.Color(12038965);
+  const ripeYellow = new THREE26.Color(16766023);
+  const stemGreen = new THREE26.Color(12038965);
   for (let segment = 0; segment <= tubularSegments; segment++) {
     const t = segment / tubularSegments;
     const point = curve.getPointAt(t);
@@ -22449,7 +22537,7 @@ var createBananaGeometry = () => {
       const sin = Math.sin(angle3);
       const cos = Math.cos(angle3);
       const ridgeScale = 1 + Math.cos(angle3 * 5 + 0.35) * 0.035;
-      const radialNormal = new THREE25.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
+      const radialNormal = new THREE26.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
       const vertex = point.clone().addScaledVector(normal, cos * radius * ridgeScale).addScaledVector(binormal, sin * radius * 0.9 * ridgeScale);
       positions.push(vertex.x, vertex.y, vertex.z);
       normals.push(radialNormal.x, radialNormal.y, radialNormal.z);
@@ -22467,26 +22555,26 @@ var createBananaGeometry = () => {
       indices.push(a, d, b, b, d, c);
     }
   }
-  const geometry = new THREE25.BufferGeometry();
+  const geometry = new THREE26.BufferGeometry();
   geometry.setIndex(indices);
   geometry.setAttribute(
     "position",
-    new THREE25.Float32BufferAttribute(positions, 3)
+    new THREE26.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE25.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("color", new THREE25.Float32BufferAttribute(colors2, 3));
-  geometry.setAttribute("uv", new THREE25.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE26.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("color", new THREE26.Float32BufferAttribute(colors2, 3));
+  geometry.setAttribute("uv", new THREE26.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return { geometry, curve };
 };
 var createBanana = () => {
-  const group = new THREE25.Group();
-  const banana = new THREE25.Group();
+  const group = new THREE26.Group();
+  const banana = new THREE26.Group();
   const { geometry, curve } = createBananaGeometry();
-  const peel = new THREE25.Mesh(
+  const peel = new THREE26.Mesh(
     geometry,
-    new THREE25.MeshStandardMaterial({
+    new THREE26.MeshStandardMaterial({
       color: 16777215,
       roughness: 0.72,
       metalness: 0,
@@ -22495,9 +22583,9 @@ var createBanana = () => {
   );
   peel.name = "banana-peel";
   banana.add(peel);
-  const blossomTip = new THREE25.Mesh(
-    new THREE25.SphereGeometry(3.4, 20, 12),
-    new THREE25.MeshStandardMaterial({
+  const blossomTip = new THREE26.Mesh(
+    new THREE26.SphereGeometry(3.4, 20, 12),
+    new THREE26.MeshStandardMaterial({
       color: 6242844,
       roughness: 0.92
     })
@@ -22508,20 +22596,20 @@ var createBanana = () => {
   banana.add(blossomTip);
   const stemLength = 11;
   const stemTangent = curve.getTangentAt(1).normalize();
-  const stem = new THREE25.Mesh(
-    new THREE25.CylinderGeometry(2.5, 4.1, stemLength, 18),
-    new THREE25.MeshStandardMaterial({
+  const stem = new THREE26.Mesh(
+    new THREE26.CylinderGeometry(2.5, 4.1, stemLength, 18),
+    new THREE26.MeshStandardMaterial({
       color: 8483625,
       roughness: 0.82
     })
   );
-  stem.quaternion.setFromUnitVectors(new THREE25.Vector3(0, 1, 0), stemTangent);
+  stem.quaternion.setFromUnitVectors(new THREE26.Vector3(0, 1, 0), stemTangent);
   stem.position.copy(curve.getPointAt(1)).addScaledVector(stemTangent, stemLength / 2);
   stem.name = "banana-stem";
   banana.add(stem);
-  const stemTip = new THREE25.Mesh(
-    new THREE25.SphereGeometry(2.55, 18, 10),
-    new THREE25.MeshStandardMaterial({
+  const stemTip = new THREE26.Mesh(
+    new THREE26.SphereGeometry(2.55, 18, 10),
+    new THREE26.MeshStandardMaterial({
       color: 5981470,
       roughness: 0.9
     })
@@ -22535,7 +22623,7 @@ var createBanana = () => {
 };
 var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
   const lidShape = createRoundedRectangleShape(width, height, radius);
-  const indent = new THREE25.Path();
+  const indent = new THREE26.Path();
   indent.absarc(0, 0, indentRadius, 0, Math.PI * 2, true);
   lidShape.holes.push(indent);
   return createPrismGeometryFromShape(lidShape, depth);
@@ -22543,9 +22631,9 @@ var createMacbookLidGeometry = (width, height, depth, radius, indentRadius) => {
 var createMacbookIndent = (topZ, radius) => {
   const indentDepth = 0.35;
   const diskDepth = 0.25;
-  const disk = new THREE25.Mesh(
-    new THREE25.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
-    new THREE25.MeshStandardMaterial({
+  const disk = new THREE26.Mesh(
+    new THREE26.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
+    new THREE26.MeshStandardMaterial({
       color: 10199202,
       roughness: 0.48,
       metalness: 0.28
@@ -22558,10 +22646,10 @@ var createMacbookIndent = (topZ, radius) => {
 };
 var createCreditCard = () => {
   const spec = REFERENCE_OBJECT_SPECS["credit-card"];
-  const group = new THREE25.Group();
-  const body = new THREE25.Mesh(
+  const group = new THREE26.Group();
+  const body = new THREE26.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, spec.depth, 3.18),
-    new THREE25.MeshStandardMaterial({
+    new THREE26.MeshStandardMaterial({
       color: 2383272,
       roughness: 0.38,
       metalness: 0.08
@@ -22570,9 +22658,9 @@ var createCreditCard = () => {
   body.name = "credit-card-body";
   group.add(body);
   const surfaceZ = spec.depth / 2 + 0.08;
-  const chip = new THREE25.Mesh(
+  const chip = new THREE26.Mesh(
     createRoundedPrismGeometry(12, 9, 0.14, 1.2),
-    new THREE25.MeshStandardMaterial({
+    new THREE26.MeshStandardMaterial({
       color: 14003525,
       roughness: 0.3,
       metalness: 0.62
@@ -22581,14 +22669,14 @@ var createCreditCard = () => {
   chip.position.set(-21, 3, surfaceZ);
   chip.name = "credit-card-chip";
   group.add(chip);
-  const stripeMaterial = new THREE25.MeshStandardMaterial({
+  const stripeMaterial = new THREE26.MeshStandardMaterial({
     color: 15331061,
     roughness: 0.45,
     metalness: 0.05
   });
   for (let index2 = 0; index2 < 4; index2++) {
-    const stripe = new THREE25.Mesh(
-      new THREE25.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
+    const stripe = new THREE26.Mesh(
+      new THREE26.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
       stripeMaterial
     );
     stripe.position.set(-20 + index2 * 14, -14, surfaceZ + 0.08);
@@ -22599,13 +22687,13 @@ var createCreditCard = () => {
 };
 var createMacbook = () => {
   const spec = REFERENCE_OBJECT_SPECS["14in-macbook"];
-  const group = new THREE25.Group();
-  const aluminumMaterial = new THREE25.MeshStandardMaterial({
+  const group = new THREE26.Group();
+  const aluminumMaterial = new THREE26.MeshStandardMaterial({
     color: 12896201,
     roughness: 0.3,
     metalness: 0.38
   });
-  const body = new THREE25.Mesh(
+  const body = new THREE26.Mesh(
     createRoundedPrismGeometry(spec.width, spec.height, 13.5, 9),
     aluminumMaterial
   );
@@ -22616,7 +22704,7 @@ var createMacbook = () => {
   const lidCenterZ = 6.75;
   const lidTopZ = lidCenterZ + lidDepth / 2;
   const indentRadius = 12;
-  const lid = new THREE25.Mesh(
+  const lid = new THREE26.Mesh(
     createMacbookLidGeometry(
       spec.width - 1.8,
       spec.height - 1.8,
@@ -22629,9 +22717,9 @@ var createMacbook = () => {
   lid.position.z = lidCenterZ;
   lid.name = "macbook-lid";
   group.add(lid);
-  const hinge = new THREE25.Mesh(
-    new THREE25.BoxGeometry(spec.width - 42, 3.2, 1.2),
-    new THREE25.MeshStandardMaterial({
+  const hinge = new THREE26.Mesh(
+    new THREE26.BoxGeometry(spec.width - 42, 3.2, 1.2),
+    new THREE26.MeshStandardMaterial({
       color: 3158838,
       roughness: 0.55,
       metalness: 0.45
@@ -22641,9 +22729,9 @@ var createMacbook = () => {
   hinge.name = "macbook-hinge";
   group.add(hinge);
   group.add(createMacbookIndent(lidTopZ, indentRadius));
-  const frontNotch = new THREE25.Mesh(
-    new THREE25.BoxGeometry(54, 1.2, 0.8),
-    new THREE25.MeshStandardMaterial({
+  const frontNotch = new THREE26.Mesh(
+    new THREE26.BoxGeometry(54, 1.2, 0.8),
+    new THREE26.MeshStandardMaterial({
       color: 6712174,
       roughness: 0.45,
       metalness: 0.5
@@ -22666,7 +22754,7 @@ var disposeReferenceObject = (object) => {
   const geometries = /* @__PURE__ */ new Set();
   const materials = /* @__PURE__ */ new Set();
   object.traverse((child) => {
-    if (!(child instanceof THREE25.Mesh)) return;
+    if (!(child instanceof THREE26.Mesh)) return;
     geometries.add(child.geometry);
     const childMaterials = Array.isArray(child.material) ? child.material : [child.material];
     for (const material of childMaterials) materials.add(material);
@@ -22676,28 +22764,28 @@ var disposeReferenceObject = (object) => {
 };
 
 // src/reference-objects/fit-camera-to-bounds.ts
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 var fitCameraToBounds = (camera, controls, bounds, padding = 1.18) => {
   const width = Math.max(bounds.maxX - bounds.minX, 0);
   const height = Math.max(bounds.maxY - bounds.minY, 0);
   const depth = Math.max(bounds.maxZ - bounds.minZ, 0);
-  const center = new THREE26.Vector3(
+  const center = new THREE27.Vector3(
     (bounds.minX + bounds.maxX) / 2,
     (bounds.minY + bounds.maxY) / 2,
     (bounds.minZ + bounds.maxZ) / 2
   );
   const radius = Math.max(Math.hypot(width, height, depth) / 2, 1);
-  const previousTarget = controls?.target ?? new THREE26.Vector3();
-  const direction = new THREE26.Vector3(0, -0.75, 0.9).normalize();
+  const previousTarget = controls?.target ?? new THREE27.Vector3();
+  const direction = new THREE27.Vector3(0, -0.75, 0.9).normalize();
   let distance5 = Math.max(camera.position.distanceTo(previousTarget), 5);
-  if (camera instanceof THREE26.PerspectiveCamera) {
-    const verticalFov = THREE26.MathUtils.degToRad(camera.fov);
+  if (camera instanceof THREE27.PerspectiveCamera) {
+    const verticalFov = THREE27.MathUtils.degToRad(camera.fov);
     const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
     const limitingFov = Math.min(verticalFov, horizontalFov);
     distance5 = radius * padding / Math.sin(limitingFov / 2);
     camera.far = Math.max(camera.far, distance5 + radius * padding * 3);
     camera.updateProjectionMatrix();
-  } else if (camera instanceof THREE26.OrthographicCamera) {
+  } else if (camera instanceof THREE27.OrthographicCamera) {
     const halfViewWidth = Math.abs(camera.right - camera.left) / 2;
     const halfViewHeight = Math.abs(camera.top - camera.bottom) / 2;
     camera.zoom = Math.min(
@@ -22818,7 +22906,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE27.Vector3(0, 0, 1) },
+          scene: { up: new THREE28.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -23010,7 +23098,7 @@ var createBoardGeomWithOutline = (board, depth = 1.2, options = {}) => {
 };
 
 // src/utils/get-board-edge-color.ts
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 
 // src/geoms/constants.ts
 var M = 0.01;
@@ -23043,7 +23131,7 @@ var soldermaskColors = {
 };
 
 // src/utils/soldermask-color.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 var SOLDERMASK_PRESET_HEX = {
   red: "#650202",
   blue: "#003f7d",
@@ -23074,9 +23162,9 @@ var resolveSoldermaskColor = (requestedColor) => {
   }
   const presetName = lowercaseColor;
   const presetColor = SOLDERMASK_PRESET_HEX[presetName];
-  if (presetColor) return new THREE28.Color(presetColor);
-  const isCssColor = Object.hasOwn(THREE28.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
-  return isCssColor ? new THREE28.Color(lowercaseColor) : null;
+  if (presetColor) return new THREE29.Color(presetColor);
+  const isCssColor = Object.hasOwn(THREE29.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
+  return isCssColor ? new THREE29.Color(lowercaseColor) : null;
 };
 var resolveSoldermaskOpacity = (requestedColor) => {
   const presetName = requestedColor?.trim().toLowerCase();
@@ -23103,7 +23191,7 @@ var soldermaskColorToCss = (color) => {
 };
 
 // src/utils/get-board-edge-color.ts
-var LEGACY_FR4_EDGE_COLOR = new THREE29.Color(1063462);
+var LEGACY_FR4_EDGE_COLOR = new THREE30.Color(1063462);
 var getBoardEdgeColor = ({
   material,
   solder_mask_color
@@ -23112,7 +23200,7 @@ var getBoardEdgeColor = ({
   if (soldermaskColor) return soldermaskColor;
   if (material === "fr4") return LEGACY_FR4_EDGE_COLOR.clone();
   const materialColor = boardMaterialColors[material] ?? colors.fr4Tan;
-  return new THREE29.Color(materialColor[0], materialColor[1], materialColor[2]);
+  return new THREE30.Color(materialColor[0], materialColor[1], materialColor[2]);
 };
 
 // src/soup-to-3d/index.ts
@@ -24562,7 +24650,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -24596,7 +24684,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component]);
   const group = useMemo19(() => {
-    const g = new THREE30.Group();
+    const g = new THREE31.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -24658,9 +24746,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo19(() => {
-    const m = new THREE30.Mesh(
-      new THREE30.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE30.MeshStandardMaterial({
+    const m = new THREE31.Mesh(
+      new THREE31.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE31.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -24837,12 +24925,12 @@ function clearViaHolesFromSurface({
 }
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE43 from "three";
+import * as THREE44 from "three";
 
 // src/utils/pad-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -24922,10 +25010,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  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;
@@ -24933,7 +25021,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su7 } from "@tscircuit/circuit-json-util";
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -25001,17 +25089,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  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/utils/trace-texture.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
@@ -25097,10 +25185,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  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;
@@ -25108,7 +25196,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
-import * as THREE34 from "three";
+import * as THREE35 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(
@@ -25232,17 +25320,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE34.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE34.LinearMipmapLinearFilter;
-  texture.magFilter = THREE34.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -25357,17 +25445,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE35.CanvasTexture(canvas);
+  const texture = new THREE36.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE35.LinearMipmapLinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
+  texture.minFilter = THREE36.LinearMipmapLinearFilter;
+  texture.magFilter = THREE36.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -25597,17 +25685,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE36.CanvasTexture(canvas);
+  const texture = new THREE37.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE36.LinearMipmapLinearFilter;
-  texture.magFilter = THREE36.LinearFilter;
+  texture.minFilter = THREE37.LinearMipmapLinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -25682,17 +25770,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE37.CanvasTexture(canvas);
+  const texture = new THREE38.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE37.LinearMipmapLinearFilter;
-  texture.magFilter = THREE37.LinearFilter;
+  texture.minFilter = THREE38.LinearMipmapLinearFilter;
+  texture.magFilter = THREE38.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -25846,17 +25934,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE38.CanvasTexture(canvas);
+  const texture = new THREE39.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE38.LinearMipmapLinearFilter;
-  texture.magFilter = THREE38.LinearFilter;
+  texture.minFilter = THREE39.LinearMipmapLinearFilter;
+  texture.magFilter = THREE39.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE39 from "three";
+import * as THREE40 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -26007,21 +26095,21 @@ function createSilkscreenTextureForLayer({
     silkscreenColor,
     soldermaskVisible
   });
-  const texture = new THREE39.CanvasTexture(canvas);
+  const texture = new THREE40.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE39.LinearMipmapLinearFilter;
-  texture.magFilter = THREE39.LinearFilter;
+  texture.minFilter = THREE40.LinearMipmapLinearFilter;
+  texture.magFilter = THREE40.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE41 from "three";
+import * as THREE42 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
-import * as THREE40 from "three";
+import * as THREE41 from "three";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -26044,11 +26132,11 @@ var getSoldermaskPalette = (boardData) => {
       transparent: "rgba(0,0,0,0)"
     };
   }
-  const copperColor = new THREE40.Color().setRGB(
+  const copperColor = new THREE41.Color().setRGB(
     colors.copper[0],
     colors.copper[1],
     colors.copper[2],
-    THREE40.SRGBColorSpace
+    THREE41.SRGBColorSpace
   );
   return {
     soldermask: soldermaskColorToCss(requestedSoldermaskColor),
@@ -26183,17 +26271,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardData
   });
-  const texture = new THREE41.CanvasTexture(canvas);
+  const texture = new THREE42.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE41.LinearMipmapLinearFilter;
-  texture.magFilter = THREE41.LinearFilter;
+  texture.minFilter = THREE42.LinearMipmapLinearFilter;
+  texture.magFilter = THREE42.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE42 from "three";
+import * as THREE43 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer11 } from "circuit-to-canvas";
@@ -26288,10 +26376,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE42.CanvasTexture(canvas);
+  const texture = new THREE43.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE42.LinearMipmapLinearFilter;
-  texture.magFilter = THREE42.LinearFilter;
+  texture.minFilter = THREE43.LinearMipmapLinearFilter;
+  texture.magFilter = THREE43.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -26388,10 +26476,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE43.CanvasTexture(canvas);
+  const combinedTexture = new THREE44.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE43.LinearFilter;
-  combinedTexture.magFilter = THREE43.LinearFilter;
+  combinedTexture.minFilter = THREE44.LinearFilter;
+  combinedTexture.magFilter = THREE44.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -26427,11 +26515,11 @@ var createMaskedCopperMask = ({
     height
   );
   ctx.globalCompositeOperation = "source-over";
-  const maskTexture = new THREE43.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE43.NoColorSpace;
+  const maskTexture = new THREE44.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE44.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE43.LinearFilter;
-  maskTexture.magFilter = THREE43.LinearFilter;
+  maskTexture.minFilter = THREE44.LinearFilter;
+  maskTexture.magFilter = THREE44.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -26577,7 +26665,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE45 from "three";
+import * as THREE46 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -26600,7 +26688,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE44 from "three";
+import * as THREE45 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -26695,13 +26783,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   return PLAIN_SOLDERMASK_PROFILE;
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE44.CanvasTexture(canvas);
-  texture.colorSpace = THREE44.NoColorSpace;
+  const texture = new THREE45.CanvasTexture(canvas);
+  texture.colorSpace = THREE45.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE44.LinearFilter;
-  texture.magFilter = THREE44.LinearFilter;
-  texture.wrapS = THREE44.ClampToEdgeWrapping;
-  texture.wrapT = THREE44.ClampToEdgeWrapping;
+  texture.minFilter = THREE45.LinearFilter;
+  texture.magFilter = THREE45.LinearFilter;
+  texture.wrapS = THREE45.ClampToEdgeWrapping;
+  texture.wrapT = THREE45.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -26825,16 +26913,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE45.PlaneGeometry(
+  const planeGeom = new THREE46.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE45.SRGBColorSpace;
+  texture.colorSpace = THREE46.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE45.FrontSide,
+    side: THREE46.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -26843,12 +26931,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE45.MeshPhysicalMaterial({
+  const material = new THREE46.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE45.Vector2(
+    normalScale: new THREE46.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -26862,7 +26950,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE45.Mesh(planeGeom, material);
+  const mesh = new THREE46.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -26910,7 +26998,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE46 from "three";
+import * as THREE47 from "three";
 
 // src/hooks/useBoardTextureVisibility.ts
 import { useMemo as useMemo20 } from "react";
@@ -27048,7 +27136,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE46.Texture) {
+        if (texture && texture instanceof THREE47.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -27067,16 +27155,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE46.PlaneGeometry(
+      const planeGeom = new THREE47.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE46.SRGBColorSpace;
+      texture.colorSpace = THREE47.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE46.FrontSide,
+        side: THREE47.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -27087,12 +27175,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE46.MeshPhysicalMaterial({
+      const material = new THREE47.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE46.Vector2(
+        normalScale: new THREE47.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -27104,7 +27192,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE46.Mesh(planeGeom, material);
+      const mesh = new THREE47.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -27154,7 +27242,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE46.Material) {
+        } else if (mesh.material instanceof THREE47.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -27167,7 +27255,7 @@ function JscadBoardTextures({
 
 // src/three-components/STLModel.tsx
 import { useState as useState17, useEffect as useEffect28, useMemo as useMemo22 } from "react";
-import * as THREE47 from "three";
+import * as THREE48 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -27200,15 +27288,15 @@ function STLModel({
   const mesh = useMemo22(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE47.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE47.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE48.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE48.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 THREE47.Mesh(geom, material);
+    const createdMesh = new THREE48.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -27271,7 +27359,7 @@ function VisibleSTLModel({
 import { parseCableString } from "@tscircuit/cableprinter";
 import { createCableMeshes } from "jscad-electronics/cables";
 import { useEffect as useEffect29, useMemo as useMemo23 } from "react";
-import * as THREE48 from "three";
+import * as THREE49 from "three";
 var isCadCableElement = (element) => {
   if (!element || typeof element !== "object") return false;
   const candidate = element;
@@ -27288,14 +27376,14 @@ var getConnectorPin1Side = ({
   const endpoint = end === "start" ? path[0] : path[path.length - 1];
   const adjacent = end === "start" ? path[1] : path[path.length - 2];
   if (!endpoint || !adjacent) return void 0;
-  const cableAxis = new THREE48.Vector3(
+  const cableAxis = new THREE49.Vector3(
     adjacent.x - endpoint.x,
     adjacent.y - endpoint.y,
     adjacent.z - endpoint.z
   );
   if (cableAxis.lengthSq() < 1e-12) return void 0;
   cableAxis.normalize();
-  const pin1Side = new THREE48.Vector3(
+  const pin1Side = new THREE49.Vector3(
     pin1Position.x - endpoint.x,
     pin1Position.y - endpoint.y,
     pin1Position.z - endpoint.z
@@ -27321,28 +27409,28 @@ var createCadCableObject = (cable) => {
       end: "end"
     })
   });
-  const group = new THREE48.Group();
+  const group = new THREE49.Group();
   group.name = `cad-cable-${cable.cad_cable_id}`;
   group.userData = { cadCableId: cable.cad_cable_id, name: cable.name };
   for (const cableMesh of cableMeshes) {
-    let geometry = new THREE48.BufferGeometry();
+    let geometry = new THREE49.BufferGeometry();
     geometry.setAttribute(
       "position",
-      new THREE48.Float32BufferAttribute(cableMesh.positions, 3)
+      new THREE49.Float32BufferAttribute(cableMesh.positions, 3)
     );
     geometry.setIndex(cableMesh.indices);
     if (!cableMesh.smooth) geometry = geometry.toNonIndexed();
     geometry.computeVertexNormals();
     const [red, green, blue, alpha] = cableMesh.color;
-    const material = new THREE48.MeshStandardMaterial({
-      color: new THREE48.Color(red, green, blue),
+    const material = new THREE49.MeshStandardMaterial({
+      color: new THREE49.Color(red, green, blue),
       metalness: cableMesh.material?.metalness ?? 0,
       roughness: cableMesh.material?.roughness ?? 0.7,
       opacity: alpha,
       transparent: alpha < 1,
-      side: THREE48.DoubleSide
+      side: THREE49.DoubleSide
     });
-    const mesh = new THREE48.Mesh(geometry, material);
+    const mesh = new THREE49.Mesh(geometry, material);
     mesh.name = `${group.name}:${cableMesh.name}`;
     configureObjectShadows(mesh, { castShadow: true, receiveShadow: true });
     group.add(mesh);
@@ -27351,7 +27439,7 @@ var createCadCableObject = (cable) => {
 };
 var disposeCadCableObject = (group) => {
   group.traverse((object) => {
-    if (!(object instanceof THREE48.Mesh)) return;
+    if (!(object instanceof THREE49.Mesh)) return;
     object.geometry.dispose();
     const materials = Array.isArray(object.material) ? object.material : [object.material];
     for (const material of materials) material.dispose();
@@ -28863,12 +28951,12 @@ function createStiffenerMesh({
 
 // src/CadViewerManifold.tsx
 import { useEffect as useEffect31, useMemo as useMemo26, useState as useState19 } from "react";
-import * as THREE56 from "three";
+import * as THREE57 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect30, useMemo as useMemo25, useRef as useRef9, useState as useState18 } from "react";
-import * as THREE52 from "three";
+import * as THREE53 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -29217,17 +29305,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE50 from "three";
+import * as THREE51 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE49 from "three";
+import * as THREE50 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE49.BufferGeometry();
+  const geometry = new THREE50.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE49.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE50.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE49.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE50.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];
@@ -29261,7 +29349,7 @@ var createEllipsePoints = (width, height, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE50.Color(...colors.copper);
+var COPPER_COLOR = new THREE51.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -29891,7 +29979,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-vias.ts
-import * as THREE51 from "three";
+import * as THREE52 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -29929,7 +30017,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE51.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE52.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume, otherHoleDrills = []) {
   const viaBoardDrills = [];
   const pcbVias = getPcbVias(circuitJson);
@@ -30177,7 +30265,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE52.Color(
+              color: new THREE53.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -30247,7 +30335,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/flex-meshes.ts
-import * as THREE53 from "three";
+import * as THREE54 from "three";
 function restoreOutlinePrecision(point, outline, tolerance) {
   let distanceSquared = tolerance * tolerance;
   let closest;
@@ -30282,7 +30370,7 @@ function meshToSurface(mesh, center, outline) {
   const triangles = [];
   for (let i = 0; i < position.count; i += 3) {
     const vertices = [0, 1, 2].map((j) => {
-      const v = new THREE53.Vector3().fromBufferAttribute(position, i + j);
+      const v = new THREE54.Vector3().fromBufferAttribute(position, i + j);
       const localMagnitude = Math.max(
         1,
         Math.abs(v.x),
@@ -30305,7 +30393,7 @@ function meshToSurface(mesh, center, outline) {
       return { x: v.x - center.x, y: v.y - center.y, z: v.z };
     });
     const [a, b, c] = vertices;
-    const n = new THREE53.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE53.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
+    const n = new THREE54.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE54.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
     triangles.push({
       vertices,
       normal: { x: n.x, y: n.y, z: n.z },
@@ -30328,13 +30416,13 @@ function surfaceToGeometry(surface, center) {
       normals.push(triangle.normal.x, triangle.normal.y, triangle.normal.z);
       uvs.push(triangle.uvs?.[i]?.u ?? 0, triangle.uvs?.[i]?.v ?? 0);
     });
-  const geometry = new THREE53.BufferGeometry();
+  const geometry = new THREE54.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE53.Float32BufferAttribute(positions, 3)
+    new THREE54.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE53.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("uv", new THREE53.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE54.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("uv", new THREE54.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return geometry;
@@ -30387,7 +30475,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         z: mesh.position.z
       }));
       const uvs = vertices.map((p) => {
-        const local = new THREE53.Vector3(
+        const local = new THREE54.Vector3(
           p.x + board.center.x,
           p.y + board.center.y,
           p.z
@@ -30411,7 +30499,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
     return result;
   }) : textureMeshes;
   for (const stiffener of stiffeners) {
-    const mesh = new THREE53.Mesh(
+    const mesh = new THREE54.Mesh(
       surfaceToGeometry(
         createStiffenerMesh({
           stiffener,
@@ -30420,16 +30508,16 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         }),
         board.center
       ),
-      new THREE53.MeshStandardMaterial({
+      new THREE54.MeshStandardMaterial({
         color: stiffener.material === "fr4" ? "#879568" : stiffener.material === "polyimide" ? "#bd7f27" : "#b8bdc4",
-        side: THREE53.DoubleSide
+        side: THREE54.DoubleSide
       })
     );
     mesh.name = "board-stiffener";
     configureObjectShadows(mesh);
     geometry.push(mesh);
   }
-  const bounds = new THREE53.Box3();
+  const bounds = new THREE54.Box3();
   for (const mesh of [...geometry, ...textures]) bounds.expandByObject(mesh);
   return {
     geometryMeshes: geometry,
@@ -30446,11 +30534,11 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
 }
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE55 from "three";
+import * as THREE56 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE54 from "three";
-var DEFAULT_SIDE = THREE54.DoubleSide;
+import * as THREE55 from "three";
+var DEFAULT_SIDE = THREE55.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -30458,7 +30546,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE54.MeshPhysicalMaterial({
+    return new THREE55.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -30476,7 +30564,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE54.MeshStandardMaterial({
+  return new THREE55.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -30495,12 +30583,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE55.Mesh(
+    const mesh = new THREE56.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE55.DoubleSide,
+        side: THREE56.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -30511,11 +30599,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE55.Mesh(
+        const mesh = new THREE56.Mesh(
           comp.geometry,
-          new THREE55.MeshStandardMaterial({
+          new THREE56.MeshStandardMaterial({
             color: comp.color,
-            side: THREE55.DoubleSide,
+            side: THREE56.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -30587,7 +30675,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE56.Texture) {
+        if (texture && texture instanceof THREE57.Texture) {
           texture.dispose();
         }
       }
@@ -30820,47 +30908,201 @@ var CadViewerManifold = ({
 };
 var CadViewerManifold_default = CadViewerManifold;
 
-// node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import * as React42 from "react";
-
-// node_modules/@radix-ui/primitive/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __name = (target, value) => __defProp2(target, "name", { value, configurable: true });
-var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return /* @__PURE__ */ __name(function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  }, "handleEvent");
-}
-__name(composeEventHandlers, "composeEventHandlers");
-function getOwnerWindow(element) {
-  if (!canUseDOM) {
-    throw new Error("Cannot access window outside of the DOM");
-  }
-  return element?.ownerDocument?.defaultView ?? window;
-}
-__name(getOwnerWindow, "getOwnerWindow");
-function getOwnerDocument(element) {
-  if (!canUseDOM) {
-    throw new Error("Cannot access document outside of the DOM");
-  }
-  return element?.ownerDocument ?? document;
+// src/CadViewerGlb.tsx
+import { useEffect as useEffect33, useMemo as useMemo28, useState as useState21 } from "react";
+
+// src/hooks/useGlbModel.ts
+import { useEffect as useEffect32, useMemo as useMemo27, useState as useState20 } from "react";
+function useGlbModel(source) {
+  const request = useMemo27(() => ({ source }), [source]);
+  const [result, setResult] = useState20();
+  useEffect32(() => {
+    const controller = new AbortController();
+    let model;
+    loadGlbScene(request.source, controller.signal).then((loaded) => {
+      model = loaded;
+      if (controller.signal.aborted) disposeGlbScene(loaded);
+      else setResult({ request, model: loaded });
+    }).catch((error) => {
+      if (!controller.signal.aborted)
+        setResult({
+          request,
+          error: error instanceof Error ? error.message : String(error)
+        });
+    });
+    return () => {
+      controller.abort();
+      if (model) disposeGlbScene(model);
+    };
+  }, [request]);
+  return result?.request === request ? result : void 0;
 }
-__name(getOwnerDocument, "getOwnerDocument");
-function getActiveElement(node, activeDescendant = false) {
-  const { activeElement } = getOwnerDocument(node);
-  if (!activeElement?.nodeName) {
-    return null;
-  }
-  if (isFrame(activeElement) && activeElement.contentDocument) {
-    return getActiveElement(activeElement.contentDocument.body, activeDescendant);
-  }
-  if (activeDescendant) {
-    const id = activeElement.getAttribute("aria-activedescendant");
-    if (id) {
+
+// src/CadViewerGlb.tsx
+import * as THREE58 from "three";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+function GlbScene({
+  model,
+  hiddenCadComponentIds
+}) {
+  const { rootObject } = useThree();
+  const { addHoverable, removeHoverable } = useHover();
+  const [hover, setHover] = useState21();
+  const bounds = useMemo28(() => {
+    const box = new THREE58.Box3().setFromObject(model);
+    if (box.isEmpty()) return;
+    return {
+      minX: box.min.x,
+      maxX: box.max.x,
+      minY: box.min.y,
+      maxY: box.max.y,
+      minZ: box.min.z,
+      maxZ: box.max.z
+    };
+  }, [model]);
+  useEffect33(() => {
+    rootObject.add(model);
+    return () => {
+      rootObject.remove(model);
+    };
+  }, [rootObject, model]);
+  useEffect33(() => {
+    setHover(void 0);
+    model.traverse((object) => {
+      const id = object.userData.cad_component_id;
+      if (typeof id === "string")
+        object.visible = !hiddenCadComponentIds?.has(id);
+    });
+  }, [model, hiddenCadComponentIds]);
+  useEffect33(() => {
+    const meshes = [];
+    model.traverse((mesh) => {
+      if (!(mesh instanceof THREE58.Mesh)) return;
+      let ancestor = mesh;
+      while (ancestor) {
+        if (!ancestor.visible) return;
+        ancestor = ancestor.parent;
+      }
+      meshes.push(mesh);
+      addHoverable({
+        object: mesh,
+        onHover: ({ mousePosition }) => {
+          let object = mesh;
+          let name;
+          let visible = true;
+          while (object) {
+            name ??= getGlbComponentMetadata(object)?.componentName;
+            visible &&= object.visible;
+            object = object.parent;
+          }
+          setHover(
+            name && visible ? { name, position: mousePosition } : void 0
+          );
+        },
+        onUnhover: () => setHover(void 0)
+      });
+    });
+    return () => {
+      for (const mesh of meshes) removeHoverable(mesh);
+    };
+  }, [model, hiddenCadComponentIds, addHoverable, removeHoverable]);
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    bounds && /* @__PURE__ */ jsx20(FitCameraToComparison, { bounds }),
+    hover && /* @__PURE__ */ jsx20(
+      Html,
+      {
+        position: hover.position,
+        style: {
+          background: "white",
+          color: "black",
+          padding: "5px",
+          borderRadius: "3px",
+          fontFamily: "sans-serif",
+          transform: "translate(1rem, 1rem)"
+        },
+        children: hover.name
+      }
+    )
+  ] });
+}
+function CadViewerGlb({
+  source,
+  hiddenCadComponentIds,
+  ...containerProps
+}) {
+  const result = useGlbModel(source);
+  const framing = useMemo28(() => {
+    if (!result?.model) return void 0;
+    const bounds = new THREE58.Box3().setFromObject(result.model);
+    if (bounds.isEmpty()) return void 0;
+    return {
+      boardDimensions: {
+        width: bounds.max.x - bounds.min.x,
+        height: bounds.max.y - bounds.min.y
+      },
+      boardCenter: {
+        x: (bounds.min.x + bounds.max.x) / 2,
+        y: (bounds.min.y + bounds.max.y) / 2
+      }
+    };
+  }, [result, source]);
+  if (!result) return /* @__PURE__ */ jsx20("div", { role: "status", children: "Loading 3D view..." });
+  if (result.error)
+    return /* @__PURE__ */ jsxs6("div", { role: "alert", children: [
+      "Unable to load 3D view: ",
+      result.error
+    ] });
+  if (!result.model) return null;
+  return /* @__PURE__ */ jsx20(CadViewerContainer, { ...containerProps, ...framing, children: /* @__PURE__ */ jsx20(
+    GlbScene,
+    {
+      model: result.model,
+      hiddenCadComponentIds
+    }
+  ) });
+}
+
+// node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
+import * as React42 from "react";
+
+// node_modules/@radix-ui/primitive/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __name = (target, value) => __defProp2(target, "name", { value, configurable: true });
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return /* @__PURE__ */ __name(function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  }, "handleEvent");
+}
+__name(composeEventHandlers, "composeEventHandlers");
+function getOwnerWindow(element) {
+  if (!canUseDOM) {
+    throw new Error("Cannot access window outside of the DOM");
+  }
+  return element?.ownerDocument?.defaultView ?? window;
+}
+__name(getOwnerWindow, "getOwnerWindow");
+function getOwnerDocument(element) {
+  if (!canUseDOM) {
+    throw new Error("Cannot access document outside of the DOM");
+  }
+  return element?.ownerDocument ?? document;
+}
+__name(getOwnerDocument, "getOwnerDocument");
+function getActiveElement(node, activeDescendant = false) {
+  const { activeElement } = getOwnerDocument(node);
+  if (!activeElement?.nodeName) {
+    return null;
+  }
+  if (isFrame(activeElement) && activeElement.contentDocument) {
+    return getActiveElement(activeElement.contentDocument.body, activeDescendant);
+  }
+  if (activeDescendant) {
+    const id = activeElement.getAttribute("aria-activedescendant");
+    if (id) {
       const element = getOwnerDocument(activeElement).getElementById(id);
       if (element) {
         return element;
@@ -30919,7 +31161,7 @@ __name2(useComposedRefs, "useComposedRefs");
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React12 from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var __defProp4 = Object.defineProperty;
 var __name3 = (target, value) => __defProp4(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
@@ -30929,7 +31171,7 @@ function createContext22(rootComponentName, defaultContext) {
   const Provider = /* @__PURE__ */ __name3((props) => {
     const { children, ...context } = props;
     const value = React12.useMemo(() => context, Object.values(context));
-    return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
+    return /* @__PURE__ */ jsx21(Context.Provider, { value, children });
   }, "Provider");
   Provider.displayName = rootComponentName + "Provider";
   function useContext22(consumerName, options = {}) {
@@ -30956,7 +31198,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React12.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx21(Context.Provider, { value, children });
     }, "Provider");
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope, options = {}) {
@@ -31341,7 +31583,7 @@ var createSlottableError = /* @__PURE__ */ __name6((ownerName) => {
 var use = React16[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var __defProp8 = Object.defineProperty;
 var __name7 = (target, value) => __defProp8(target, "name", { value, configurable: true });
 var NODES = [
@@ -31371,7 +31613,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx21(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx22(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -31386,9 +31628,9 @@ import * as React41 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 import * as React18 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-import * as React23 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
+import * as React23 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var __defProp9 = Object.defineProperty;
 var __name8 = (target, value) => __defProp9(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
@@ -31403,7 +31645,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx23(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -31413,7 +31655,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx22(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx23(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -31430,7 +31672,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx22(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx23(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -31786,12 +32028,12 @@ function createCollection2(name) {
   const [CollectionStatefulContextProvider, useStatefulCollectionContext] = createCollectionContext(PROVIDER_NAME);
   CollectionStatefulContextProvider.displayName = name + "CollectionStatefulContextProvider";
   const CollectionProvider = /* @__PURE__ */ __name8(({ state, ...props }) => {
-    return state ? /* @__PURE__ */ jsx23(CollectionProviderImpl, { ...props, state }) : /* @__PURE__ */ jsx23(CollectionInit, { ...props });
+    return state ? /* @__PURE__ */ jsx24(CollectionProviderImpl, { ...props, state }) : /* @__PURE__ */ jsx24(CollectionInit, { ...props });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const CollectionInit = /* @__PURE__ */ __name8((props) => {
     const state = useInitCollection();
-    return /* @__PURE__ */ jsx23(CollectionProviderImpl, { ...props, state });
+    return /* @__PURE__ */ jsx24(CollectionProviderImpl, { ...props, state });
   }, "CollectionInit");
   CollectionInit.displayName = name + "CollectionInit";
   const CollectionProviderImpl = /* @__PURE__ */ __name8((props) => {
@@ -31831,7 +32073,7 @@ function createCollection2(name) {
         observer.disconnect();
       };
     }, [collectionElement, setCollection]);
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       CollectionStableContextProvider,
       {
         scope,
@@ -31840,7 +32082,7 @@ function createCollection2(name) {
         getCollection,
         setCollection,
         registryRef,
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx24(
           CollectionStatefulContextProvider,
           {
             scope,
@@ -31860,7 +32102,7 @@ function createCollection2(name) {
       const { scope, children } = props;
       const context = useStableCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionElementRef);
-      return /* @__PURE__ */ jsx23(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx24(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -31936,7 +32178,7 @@ function createCollection2(name) {
           });
         };
       }, [setCollection]);
-      return /* @__PURE__ */ jsx23(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx24(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -32017,7 +32259,7 @@ __name8(getChildListObserver, "getChildListObserver");
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var __defProp10 = Object.defineProperty;
 var __name9 = (target, value) => __defProp10(target, "name", { value, configurable: true });
 var Direction = {
@@ -32055,7 +32297,7 @@ function useCallbackRef(callback) {
 __name10(useCallbackRef, "useCallbackRef");
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var __defProp12 = Object.defineProperty;
 var __name11 = (target, value) => __defProp12(target, "name", { value, configurable: true });
 var CONTEXT_UPDATE = "dismissableLayer.update";
@@ -32187,7 +32429,7 @@ var DismissableLayer = /* @__PURE__ */ React21.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       Primitive.div,
       {
         ...layerProps,
@@ -32436,7 +32678,7 @@ __name12(createFocusGuard, "createFocusGuard");
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React25 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var __defProp14 = Object.defineProperty;
 var __name13 = (target, value) => __defProp14(target, "name", { value, configurable: true });
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
@@ -32575,7 +32817,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
       },
       [loop, trapped, focusScope.paused]
     );
-    return /* @__PURE__ */ jsx26(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+    return /* @__PURE__ */ jsx27(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
   }, "FocusScope")
 );
 var FocusScopeBranchContext = React25.createContext(null);
@@ -32583,7 +32825,7 @@ function FocusScopeBranchProvider({ registry, children }) {
   if (!registry) {
     return children;
   }
-  return /* @__PURE__ */ jsx26(FocusScopeBranchContext.Provider, { value: registry, children });
+  return /* @__PURE__ */ jsx27(FocusScopeBranchContext.Provider, { value: registry, children });
 }
 __name13(FocusScopeBranchProvider, "FocusScopeBranchProvider");
 function useFocusScopeBranchRegistry() {
@@ -34676,7 +34918,7 @@ function useSize(element) {
 __name15(useSize, "useSize");
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var __defProp17 = Object.defineProperty;
 var __name16 = (target, value) => __defProp17(target, "name", { value, configurable: true });
 var Sticky = {
@@ -34694,7 +34936,7 @@ var Popper = /* @__PURE__ */ __name16((props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React29.useState(null);
   const [placementState, setPlacementState] = React29.useState(void 0);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     PopperProvider,
     {
       scope: __scopePopper,
@@ -34737,7 +34979,7 @@ var PopperAnchor = /* @__PURE__ */ React29.forwardRef(
     const sideAndAlign = context.placementState && getSideAndAlignFromPlacement(context.placementState);
     const placedSide = sideAndAlign?.[0];
     const placedAlign = sideAndAlign?.[1];
-    return virtualRef ? null : /* @__PURE__ */ jsx27(
+    return virtualRef ? null : /* @__PURE__ */ jsx28(
       Primitive.div,
       {
         "data-radix-popper-side": placedSide,
@@ -34861,7 +35103,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         ref: refs.setFloating,
@@ -34885,7 +35127,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -34895,7 +35137,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -34961,7 +35203,7 @@ __name16(getSideAndAlignFromPlacement, "getSideAndAlignFromPlacement");
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React30 from "react";
 import * as ReactDOM4 from "react-dom";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var __defProp18 = Object.defineProperty;
 var __name17 = (target, value) => __defProp18(target, "name", { value, configurable: true });
 var Portal = /* @__PURE__ */ React30.forwardRef(
@@ -34970,7 +35212,7 @@ var Portal = /* @__PURE__ */ React30.forwardRef(
     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;
+    return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx29(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
   }, "Portal")
 );
 
@@ -35190,7 +35432,7 @@ __name19(useIsHydratedModern, "useIsHydratedModern");
 var useIsHydrated2 = typeof useReactSyncExternalStore === "function" ? useIsHydratedModern : useIsHydrated;
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var __defProp21 = Object.defineProperty;
 var __name20 = (target, value) => __defProp21(target, "name", { value, configurable: true });
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
@@ -35213,7 +35455,7 @@ var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext
 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 }) }) });
+    return /* @__PURE__ */ jsx30(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }, "RovingFocusGroup")
 );
 var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
@@ -35250,7 +35492,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -35271,7 +35513,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -35339,14 +35581,14 @@ var RovingFocusGroupItem = /* @__PURE__ */ React33.forwardRef(
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
     }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -35602,9 +35844,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState32 } from "react";
+import { useState as useState34 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState32(function() {
+  var ref = useState34(function() {
     return {
       // value
       value: initialValue,
@@ -36268,7 +36510,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var __defProp22 = Object.defineProperty;
 var __name21 = (target, value) => __defProp22(target, "name", { value, configurable: true });
 var Direction3 = {
@@ -36327,7 +36569,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
     window.addEventListener("blur", handleBlur);
     return () => window.removeEventListener("blur", handleBlur);
   }, [open, handleOpenChange]);
-  return /* @__PURE__ */ jsx30(Popper, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Popper, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -36335,7 +36577,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -36353,7 +36595,7 @@ var MenuAnchor = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuAnchor2(props, forwardedRef) {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx30(PopperAnchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(PopperAnchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }, "MenuAnchor")
 );
 var PORTAL_NAME = "MenuPortal";
@@ -36363,7 +36605,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME, {
 var MenuPortal = /* @__PURE__ */ __name21((props) => {
   const { __scopeMenu, forceMount, children, container } = props;
   const context = useMenuContext(PORTAL_NAME, __scopeMenu);
-  return /* @__PURE__ */ jsx30(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx31(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Portal, { asChild: true, container, children }) }) });
 }, "MenuPortal");
 var CONTENT_NAME2 = "MenuContent";
 var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME2);
@@ -36373,7 +36615,7 @@ var MenuContent = /* @__PURE__ */ React41.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
-    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 }) }) }) });
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx31(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx31(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }, "MenuContent")
 );
 var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
@@ -36386,7 +36628,7 @@ var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         ...props,
@@ -36406,7 +36648,7 @@ var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
 );
 var MenuRootContentNonModal = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name21(function MenuRootContentNonModal2(props, forwardedRef) {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     MenuContentImpl,
     {
       ...props,
@@ -36498,7 +36740,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -36527,7 +36769,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
         onPointerGraceIntentChange: React41.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx30(FocusScopeBranchProvider, { registry: isModal ? branchRegistry : null, children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(FocusScopeBranchProvider, { registry: isModal ? branchRegistry : null, children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
           FocusScope,
           {
             asChild: true,
@@ -36538,7 +36780,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               DismissableLayer,
               {
                 asChild: true,
@@ -36548,7 +36790,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx30(
+                children: /* @__PURE__ */ jsx31(
                   RovingFocusGroup,
                   {
                     asChild: true,
@@ -36562,7 +36804,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx30(
+                    children: /* @__PURE__ */ jsx31(
                       PopperContent,
                       {
                         role: "menu",
@@ -36646,7 +36888,7 @@ var MenuItem = /* @__PURE__ */ React41.forwardRef(
         }
       }
     }, "handleSelect");
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         ...itemProps,
@@ -36692,13 +36934,13 @@ var MenuItemImpl = /* @__PURE__ */ React41.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx30(RovingFocusGroupItem, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(RovingFocusGroupItem, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
           Primitive.div,
           {
             role: "menuitem",
@@ -36737,7 +36979,7 @@ var MenuCheckboxItem = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuCheckboxItem2(props, forwardedRef) {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
-    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -36768,7 +37010,7 @@ var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
 var MenuSeparator = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSeparator2(props, forwardedRef) {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Primitive.div,
       {
         role: "separator",
@@ -36792,7 +37034,7 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx30(Popper, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Popper, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -36800,7 +37042,7 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -36837,7 +37079,7 @@ var MenuSubTrigger = /* @__PURE__ */ React41.forwardRef(
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
     const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
-    return /* @__PURE__ */ jsx30(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         id: subContext.triggerId,
@@ -36930,7 +37172,7 @@ var MenuSubContent = /* @__PURE__ */ React41.forwardRef(
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
     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(
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -37033,7 +37275,7 @@ function whenMouse(handler) {
 __name21(whenMouse, "whenMouse");
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var __defProp23 = Object.defineProperty;
 var __name22 = (target, value) => __defProp23(target, "name", { value, configurable: true });
 var DROPDOWN_MENU_NAME = "DropdownMenu";
@@ -37061,7 +37303,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -37072,7 +37314,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
       onOpenChange: setOpen,
       onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx31(Menu, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx32(Menu, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 }, "DropdownMenu");
@@ -37084,7 +37326,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const composedRefs = useComposedRefs(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(MenuAnchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
         type: "button",
@@ -37116,7 +37358,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
 var DropdownMenuPortal = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(MenuPortal, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx32(MenuPortal, { ...menuScope, ...portalProps });
 }, "DropdownMenuPortal");
 var CONTENT_NAME3 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
@@ -37126,7 +37368,7 @@ var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React42.useRef(false);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       MenuContent,
       {
         id: context.contentId,
@@ -37165,18 +37407,18 @@ var DropdownMenuItem = /* @__PURE__ */ React42.forwardRef(
   /* @__PURE__ */ __name22(function DropdownMenuItem2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(MenuItem, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(MenuItem, { ...menuScope, ...itemProps, ref: forwardedRef });
   }, "DropdownMenuItem")
 );
 var DropdownMenuCheckboxItem = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuCheckboxItem2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(MenuCheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuCheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 }, "DropdownMenuCheckboxItem"));
 var DropdownMenuSeparator = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(MenuSeparator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuSeparator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 }, "DropdownMenuSeparator"));
 var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -37187,17 +37429,17 @@ var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx31(MenuSub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx32(MenuSub, { ...menuScope, open, onOpenChange: setOpen, children });
 }, "DropdownMenuSub");
 var DropdownMenuSubTrigger = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(MenuSubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuSubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 }, "DropdownMenuSubTrigger"));
 var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     MenuSubContent,
     {
       ...menuScope,
@@ -37219,11 +37461,11 @@ var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */
 }, "DropdownMenuSubContent"));
 
 // src/components/ViewportSubContent.tsx
-import { useLayoutEffect as useLayoutEffect5, useState as useState36 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect5, useState as useState38 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
-  const [content, setContent] = useState36(null);
-  const [overlapWidth, setOverlapWidth] = useState36();
+  const [content, setContent] = useState38(null);
+  const [overlapWidth, setOverlapWidth] = useState38();
   useLayoutEffect5(() => {
     if (!content) return;
     const trigger = document.getElementById(
@@ -37251,7 +37493,7 @@ var ViewportSubContent = (props) => {
       window.removeEventListener("resize", update);
     };
   }, [content]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     DropdownMenuSubContent,
     {
       ...props,
@@ -37278,14 +37520,14 @@ var menuViewportStyles = {
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState38 } from "react";
+import { useState as useState40 } from "react";
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState37 } from "react";
+import { useState as useState39 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx33(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37297,10 +37539,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx33(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx33("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx34("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37317,10 +37559,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx34("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var CheckMinusIcon = () => /* @__PURE__ */ jsx33(
+var CheckMinusIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37332,10 +37574,10 @@ var CheckMinusIcon = () => /* @__PURE__ */ jsx33(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx33("path", { d: "M5 12h14" })
+    children: /* @__PURE__ */ jsx34("path", { d: "M5 12h14" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx33(
+var DotIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37348,12 +37590,12 @@ var DotIcon = () => /* @__PURE__ */ jsx33(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx33("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx34("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs7 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -37400,7 +37642,9 @@ var iconContainerStyles = {
   justifyContent: "center",
   flexShrink: 0
 };
-var AppearanceMenu = () => {
+var AppearanceMenu = ({
+  showLayerControls = true
+}) => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const {
     darkBackgroundEnabled,
@@ -37408,12 +37652,12 @@ var AppearanceMenu = () => {
     lightingEnabled,
     setLightingEnabled
   } = useAppearance();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState37(false);
-  const [hoveredItem, setHoveredItem] = useState37(null);
-  return /* @__PURE__ */ jsxs6(Fragment8, { children: [
-    /* @__PURE__ */ jsx34(DropdownMenuSeparator, { style: separatorStyles }),
-    /* @__PURE__ */ jsxs6(DropdownMenuSub, { onOpenChange: setAppearanceSubOpen, children: [
-      /* @__PURE__ */ jsxs6(
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState39(false);
+  const [hoveredItem, setHoveredItem] = useState39(null);
+  return /* @__PURE__ */ jsxs7(Fragment9, { children: [
+    /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
+    /* @__PURE__ */ jsxs7(DropdownMenuSub, { onOpenChange: setAppearanceSubOpen, children: [
+      /* @__PURE__ */ jsxs7(
         DropdownMenuSubTrigger,
         {
           style: {
@@ -37425,8 +37669,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx35(
               "div",
               {
                 style: {
@@ -37435,20 +37679,20 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx34(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(
         ViewportSubContent,
         {
           style: { ...contentStyles, marginLeft: -2 },
           collisionPadding: 10,
           avoidCollisions: true,
           children: [
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               DropdownMenuItem,
               {
                 style: {
@@ -37464,12 +37708,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("darkBackground"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs7(
               DropdownMenuItem,
               {
                 style: {
@@ -37485,278 +37729,283 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("lighting"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx34(DropdownMenuSeparator, { style: separatorStyles }),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "boardBody" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("boardBody", !visibility.boardBody);
-                },
-                onMouseEnter: () => setHoveredItem("boardBody"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("boardBody"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "topCopper" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("topCopper", !visibility.topCopper);
-                },
-                onMouseEnter: () => setHoveredItem("topCopper"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("topCopper"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "bottomCopper" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("bottomCopper", !visibility.bottomCopper);
-                },
-                onMouseEnter: () => setHoveredItem("bottomCopper"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("bottomCopper"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "keepout" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("keepout", !visibility.keepout);
-                },
-                onMouseEnter: () => setHoveredItem("keepout"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("keepout"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "topSilkscreen" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("topSilkscreen", !visibility.topSilkscreen);
-                },
-                onMouseEnter: () => setHoveredItem("topSilkscreen"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("topSilkscreen"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "bottomSilkscreen" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility(
-                    "bottomSilkscreen",
-                    !visibility.bottomSilkscreen
-                  );
-                },
-                onMouseEnter: () => setHoveredItem("bottomSilkscreen"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("bottomSilkscreen"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "topMask" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("topMask", !visibility.topMask);
-                },
-                onMouseEnter: () => setHoveredItem("topMask"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("topMask"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "bottomMask" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("bottomMask", !visibility.bottomMask);
-                },
-                onMouseEnter: () => setHoveredItem("bottomMask"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("bottomMask"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "pcbNotes" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("pcbNotes", !visibility.pcbNotes);
-                },
-                onMouseEnter: () => setHoveredItem("pcbNotes"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("pcbNotes"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "smtModels" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility("smtModels", !visibility.smtModels);
-                },
-                onMouseEnter: () => setHoveredItem("smtModels"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("smtModels"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "throughHoleModels" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility(
-                    "throughHoleModels",
-                    !visibility.throughHoleModels
-                  );
-                },
-                onMouseEnter: () => setHoveredItem("throughHoleModels"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("throughHoleModels"),
-                children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx34(DropdownMenuSeparator, { style: separatorStyles }),
-            /* @__PURE__ */ jsxs6(
-              DropdownMenuItem,
-              {
-                style: {
-                  ...itemStyles,
-                  backgroundColor: hoveredItem === "enclosure" ? "#404040" : "transparent"
-                },
-                onSelect: (e) => e.preventDefault(),
-                onPointerDown: (e) => {
-                  e.preventDefault();
-                  setLayerVisibility(
-                    "enclosure",
-                    nextEnclosureVisibility(visibility.enclosure)
-                  );
-                },
-                onMouseEnter: () => setHoveredItem("enclosure"),
-                onMouseLeave: () => setHoveredItem(null),
-                onTouchStart: () => setHoveredItem("enclosure"),
-                title: `Enclosure: ${visibility.enclosure}`,
-                children: [
-                  /* @__PURE__ */ jsxs6("span", { style: iconContainerStyles, children: [
-                    visibility.enclosure === "opaque" && /* @__PURE__ */ jsx34(CheckIcon, {}),
-                    visibility.enclosure === "translucent" && /* @__PURE__ */ jsx34(CheckMinusIcon, {})
-                  ] }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
-                ]
-              }
-            )
+            showLayerControls && /* @__PURE__ */ jsxs7(Fragment9, { children: [
+              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "boardBody" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("boardBody", !visibility.boardBody);
+                  },
+                  onMouseEnter: () => setHoveredItem("boardBody"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("boardBody"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "topCopper" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("topCopper", !visibility.topCopper);
+                  },
+                  onMouseEnter: () => setHoveredItem("topCopper"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("topCopper"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "bottomCopper" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("bottomCopper", !visibility.bottomCopper);
+                  },
+                  onMouseEnter: () => setHoveredItem("bottomCopper"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("bottomCopper"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "keepout" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("keepout", !visibility.keepout);
+                  },
+                  onMouseEnter: () => setHoveredItem("keepout"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("keepout"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "topSilkscreen" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility(
+                      "topSilkscreen",
+                      !visibility.topSilkscreen
+                    );
+                  },
+                  onMouseEnter: () => setHoveredItem("topSilkscreen"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("topSilkscreen"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "bottomSilkscreen" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility(
+                      "bottomSilkscreen",
+                      !visibility.bottomSilkscreen
+                    );
+                  },
+                  onMouseEnter: () => setHoveredItem("bottomSilkscreen"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("bottomSilkscreen"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "topMask" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("topMask", !visibility.topMask);
+                  },
+                  onMouseEnter: () => setHoveredItem("topMask"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("topMask"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "bottomMask" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("bottomMask", !visibility.bottomMask);
+                  },
+                  onMouseEnter: () => setHoveredItem("bottomMask"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("bottomMask"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "pcbNotes" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("pcbNotes", !visibility.pcbNotes);
+                  },
+                  onMouseEnter: () => setHoveredItem("pcbNotes"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("pcbNotes"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "smtModels" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility("smtModels", !visibility.smtModels);
+                  },
+                  onMouseEnter: () => setHoveredItem("smtModels"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("smtModels"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "throughHoleModels" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility(
+                      "throughHoleModels",
+                      !visibility.throughHoleModels
+                    );
+                  },
+                  onMouseEnter: () => setHoveredItem("throughHoleModels"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("throughHoleModels"),
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles,
+                    backgroundColor: hoveredItem === "enclosure" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setLayerVisibility(
+                      "enclosure",
+                      nextEnclosureVisibility(visibility.enclosure)
+                    );
+                  },
+                  onMouseEnter: () => setHoveredItem("enclosure"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("enclosure"),
+                  title: `Enclosure: ${visibility.enclosure}`,
+                  children: [
+                    /* @__PURE__ */ jsxs7("span", { style: iconContainerStyles, children: [
+                      visibility.enclosure === "opaque" && /* @__PURE__ */ jsx35(CheckIcon, {}),
+                      visibility.enclosure === "translucent" && /* @__PURE__ */ jsx35(CheckMinusIcon, {})
+                    ] }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
+                  ]
+                }
+              )
+            ] })
           ]
         }
       ) })
@@ -37765,7 +38014,7 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -37843,6 +38092,7 @@ var ContextMenu = ({
   foldPcbs = false,
   onFoldPcbsToggle,
   flexScene = false,
+  preRendered = false,
   referenceObject = null,
   onEngineSwitch,
   onCameraPresetSelect,
@@ -37858,10 +38108,10 @@ var ContextMenu = ({
 }) => {
   const { cameraType, setCameraType } = useCameraController();
   const { gridEnabled, setGridEnabled } = useAppearance();
-  const [cameraSubOpen, setCameraSubOpen] = useState38(false);
-  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState38(false);
-  const [hoveredItem, setHoveredItem] = useState38(null);
-  return /* @__PURE__ */ jsx35(
+  const [cameraSubOpen, setCameraSubOpen] = useState40(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState40(false);
+  const [hoveredItem, setHoveredItem] = useState40(null);
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ref: menuRef,
@@ -37872,9 +38122,9 @@ var ContextMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs7(DropdownMenu, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx35("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(DropdownMenu, { open: true, modal: false, children: [
+        /* @__PURE__ */ jsx36(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs8(
           DropdownMenuContent,
           {
             style: contentStyles2,
@@ -37883,7 +38133,7 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              onHideComponent && /* @__PURE__ */ jsx35(
+              onHideComponent && /* @__PURE__ */ jsx36(
                 DropdownMenuItem,
                 {
                   style: {
@@ -37897,7 +38147,7 @@ var ContextMenu = ({
                   children: `Hide "${componentName}"`
                 }
               ),
-              onViewSchematicComponent && /* @__PURE__ */ jsx35(Fragment9, { children: /* @__PURE__ */ jsx35(
+              onViewSchematicComponent && /* @__PURE__ */ jsx36(Fragment10, { children: /* @__PURE__ */ jsx36(
                 DropdownMenuItem,
                 {
                   style: {
@@ -37911,7 +38161,7 @@ var ContextMenu = ({
                   children: "Show on schematic"
                 }
               ) }),
-              onUnhideAllComponents && /* @__PURE__ */ jsx35(
+              onUnhideAllComponents && /* @__PURE__ */ jsx36(
                 DropdownMenuItem,
                 {
                   style: {
@@ -37925,9 +38175,9 @@ var ContextMenu = ({
                   children: "Unhide All Components"
                 }
               ),
-              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs7(DropdownMenuSub, { onOpenChange: setCameraSubOpen, children: [
-                /* @__PURE__ */ jsxs7(
+              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs8(DropdownMenuSub, { onOpenChange: setCameraSubOpen, children: [
+                /* @__PURE__ */ jsxs8(
                   DropdownMenuSubTrigger,
                   {
                     style: {
@@ -37939,14 +38189,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Camera"
                         }
                       ),
-                      /* @__PURE__ */ jsxs7(
+                      /* @__PURE__ */ jsxs8(
                         "div",
                         {
                           style: {
@@ -37956,22 +38206,22 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx36("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx36(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs8(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
                     avoidCollisions: true,
                     children: [
-                      cameraOptions.map((option) => /* @__PURE__ */ jsxs7(
+                      cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
                         DropdownMenuItem,
                         {
                           style: {
@@ -37983,14 +38233,14 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem(option),
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx35(DotIcon, {}) }),
-                            /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx36(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: option })
                           ]
                         },
                         option
                       )),
-                      /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-                      /* @__PURE__ */ jsxs7(
+                      /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+                      /* @__PURE__ */ jsxs8(
                         DropdownMenuItem,
                         {
                           style: {
@@ -38002,12 +38252,12 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem("autorotate"),
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                            /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxs7(
+                      /* @__PURE__ */ jsxs8(
                         DropdownMenuItem,
                         {
                           style: {
@@ -38024,8 +38274,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem("cameratype"),
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                            /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                           ]
                         }
                       )
@@ -38033,8 +38283,8 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs7(DropdownMenuSub, { onOpenChange: setReferenceObjectSubOpen, children: [
-                /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(DropdownMenuSub, { onOpenChange: setReferenceObjectSubOpen, children: [
+                /* @__PURE__ */ jsxs8(
                   DropdownMenuSubTrigger,
                   {
                     style: {
@@ -38046,14 +38296,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("reference-object"),
                     children: [
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Show Reference Object"
                         }
                       ),
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "div",
                         {
                           style: {
@@ -38062,13 +38312,13 @@ var ContextMenu = ({
                             gap: 6,
                             marginLeft: "auto"
                           },
-                          children: /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
+                          children: /* @__PURE__ */ jsx36(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsx36(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -38076,7 +38326,7 @@ var ContextMenu = ({
                     avoidCollisions: true,
                     children: REFERENCE_OBJECT_MENU_OPTIONS.map((option) => {
                       const optionKey = option.type ?? "none";
-                      return /* @__PURE__ */ jsxs7(
+                      return /* @__PURE__ */ jsxs8(
                         DropdownMenuItem,
                         {
                           style: {
@@ -38092,8 +38342,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem(optionKey),
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx35(DotIcon, {}) }),
-                            /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx36(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
                           ]
                         },
                         optionKey
@@ -38102,7 +38352,7 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              onFoldPcbsToggle && /* @__PURE__ */ jsxs7(
+              onFoldPcbsToggle && /* @__PURE__ */ jsxs8(
                 DropdownMenuCheckboxItem,
                 {
                   checked: foldPcbs,
@@ -38114,12 +38364,12 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("fold"),
                   onMouseLeave: () => setHoveredItem(null),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { children: "Fold PCBs" })
+                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx36("span", { children: "Fold PCBs" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(
                 DropdownMenuItem,
                 {
                   style: {
@@ -38135,14 +38385,14 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("grid"),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
+                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(AppearanceMenu, { showLayerControls: !preRendered }),
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(
                 DropdownMenuItem,
                 {
                   style: {
@@ -38154,11 +38404,11 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-              !flexScene && /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              !flexScene && !preRendered && /* @__PURE__ */ jsxs8(
                 DropdownMenuItem,
                 {
                   style: {
@@ -38175,7 +38425,7 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("engine"),
                   children: [
-                    /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs8(
                       "span",
                       {
                         style: { flex: 1, display: "flex", alignItems: "center" },
@@ -38186,7 +38436,7 @@ var ContextMenu = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "div",
                       {
                         style: {
@@ -38200,8 +38450,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs8(
                 DropdownMenuItem,
                 {
                   style: {
@@ -38214,8 +38464,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx36(
                       "div",
                       {
                         style: {
@@ -38229,8 +38479,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(
                 "div",
                 {
                   style: {
@@ -38241,7 +38491,7 @@ var ContextMenu = ({
                     paddingTop: 4,
                     paddingBottom: 4
                   },
-                  children: /* @__PURE__ */ jsxs7(
+                  children: /* @__PURE__ */ jsxs8(
                     "span",
                     {
                       style: {
@@ -38268,10 +38518,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect49, useMemo as useMemo36, useRef as useRef27, useState as useState40 } from "react";
+import { useEffect as useEffect51, useMemo as useMemo38, useRef as useRef27, useState as useState42 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect48, useMemo as useMemo35, useRef as useRef26, useState as useState39 } from "react";
+import { useEffect as useEffect50, useMemo as useMemo37, useRef as useRef26, useState as useState41 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -38395,14 +38645,14 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef26(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo35(
+  const normalizedMetadata = useMemo37(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect48(() => {
+  useEffect50(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -38415,10 +38665,10 @@ var useRegisteredHotkey = (id, handler, metadata) => {
   }, [id, normalizedMetadata]);
 };
 var useHotkeyRegistry = () => {
-  const [entries, setEntries] = useState39(
+  const [entries, setEntries] = useState41(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect48(() => subscribeToRegistry(setEntries), []);
+  useEffect50(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -38427,15 +38677,15 @@ var registerHotkeyViewer = (element) => {
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState40("");
+  const [query, setQuery] = useState42("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect49(() => {
+  useEffect51(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -38446,14 +38696,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect49(() => {
+  useEffect51(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo36(() => {
+  const filteredHotkeys = useMemo38(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -38466,7 +38716,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       role: "dialog",
@@ -38481,7 +38731,7 @@ var KeyboardShortcutsDialog = ({
         zIndex: 9999
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9(
         "div",
         {
           style: {
@@ -38497,7 +38747,7 @@ var KeyboardShortcutsDialog = ({
           },
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs9(
               "header",
               {
                 style: {
@@ -38505,8 +38755,8 @@ var KeyboardShortcutsDialog = ({
                   borderBottom: "1px solid rgba(255, 255, 255, 0.08)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs8("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx37(
                       "h2",
                       {
                         style: {
@@ -38518,7 +38768,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "button",
                       {
                         type: "button",
@@ -38534,7 +38784,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37(
                     "input",
                     {
                       ref: inputRef,
@@ -38557,7 +38807,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx36("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsx37("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
               "table",
               {
                 style: {
@@ -38566,23 +38816,23 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs8("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx36("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37(
                     "td",
                     {
                       colSpan: 2,
                       style: { padding: "24px", textAlign: "center" },
                       children: "No shortcuts found"
                     }
-                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs8(
+                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs9(
                     "tr",
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx37(
                           "span",
                           {
                             style: {
@@ -38600,7 +38850,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -38617,7 +38867,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/contexts/ToastContext.tsx
 import { Toaster, toast as hotToast } from "react-hot-toast";
-import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 var useToast = () => {
   return {
     showToast: (message, duration = 2e3) => {
@@ -38628,9 +38878,9 @@ var useToast = () => {
 var ToastProvider = ({
   children
 }) => {
-  return /* @__PURE__ */ jsxs9(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment11, { children: [
     children,
-    /* @__PURE__ */ jsx37(Toaster, { position: "bottom-right" })
+    /* @__PURE__ */ jsx38(Toaster, { position: "bottom-right" })
   ] });
 };
 
@@ -38675,10 +38925,10 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState41, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect50 } from "react";
+import { useState as useState43, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect52 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
-  const [menuVisible, setMenuVisible] = useState41(false);
-  const [menuPos, setMenuPos] = useState41({
+  const [menuVisible, setMenuVisible] = useState43(false);
+  const [menuPos, setMenuPos] = useState43({
     x: 0,
     y: 0
   });
@@ -38792,7 +39042,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect50(() => {
+  useEffect52(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -38855,8 +39105,8 @@ var useGlobalDownloadGltf = () => {
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE57.Vector3(0, 0, 0);
+import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_TARGET = new THREE59.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -38864,18 +39114,20 @@ var readStoredCameraType = () => {
   return stored === "orthographic" || stored === "perspective" ? stored : void 0;
 };
 var CadViewerInner = (props) => {
+  const glbSource = props.glbUrl ?? props.glbData;
   const childrenCircuitJson = useConvertChildrenToCircuitJson(
-    props.circuitJson ? void 0 : props.children
+    props.circuitJson || glbSource !== void 0 ? void 0 : props.children
   );
   const circuitJson = props.circuitJson ?? childrenCircuitJson;
   const hasBends = circuitJson.some((element) => element.type === "pcb_bend");
   const hasFlexGeometry = hasBends || circuitJson.some((element) => element.type === "pcb_stiffener");
-  const [foldPcbsOverride, setFoldPcbs] = useState42(
+  const [foldPcbsOverride, setFoldPcbs] = useState44(
     void 0
   );
   const foldPcbs = foldPcbsOverride ?? props.foldPcbs;
   const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
-  const circuitKey = JSON.stringify(circuitJson);
+  const circuitJsonKey = glbSource === void 0 ? JSON.stringify(circuitJson) : void 0;
+  const circuitKey = glbSource ?? circuitJsonKey;
   const { hiddenCadComponentIds, hideComponent, unhideAllComponents } = useHiddenCadComponents(circuitKey);
   const resolvedProps = {
     ...props,
@@ -38883,30 +39135,30 @@ var CadViewerInner = (props) => {
     children: void 0,
     hiddenCadComponentIds
   };
-  const [engine, setEngine] = useState42(() => {
+  const [engine, setEngine] = useState44(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
   const containerRef = useRef29(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState42(false);
-  const [autoRotate, setAutoRotate] = useState42(() => {
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState44(false);
+  const [autoRotate, setAutoRotate] = useState44(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored !== "false";
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState42(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState44(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState42("Custom");
-  const [referenceObject, setReferenceObject] = useState42(null);
+  const [cameraPreset, setCameraPreset] = useState44("Custom");
+  const [referenceObject, setReferenceObject] = useState44(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
   const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext11(SchematicNavigationContext);
-  const [selectedComponent, setSelectedComponent] = useState42();
-  const [selectedCadComponent, setSelectedCadComponent] = useState42();
+  const [selectedComponent, setSelectedComponent] = useState44();
+  const [selectedCadComponent, setSelectedCadComponent] = useState44();
   const handleMenuOpen = useCallback25(
     (position) => {
       setSelectedCadComponent(
@@ -39023,28 +39275,28 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect51(() => {
+  useEffect53(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect51(() => {
+  useEffect53(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect51(() => {
+  useEffect53(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect51(() => {
+  useEffect53(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect51(() => {
+  useEffect53(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
-  const viewerKey = props.circuitJson ? circuitKey : void 0;
-  return /* @__PURE__ */ jsxs10(
+  const viewerKey = props.circuitJson ? circuitJsonKey : void 0;
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -39060,7 +39312,18 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        hasFlexGeometry ? /* @__PURE__ */ jsx38(
+        glbSource !== void 0 ? /* @__PURE__ */ jsx39(
+          CadViewerGlb,
+          {
+            source: glbSource,
+            hiddenCadComponentIds,
+            autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
+            clickToInteractEnabled: props.clickToInteractEnabled,
+            onUserInteraction: handleUserInteraction,
+            onCameraControllerReady: handleCameraControllerReady,
+            referenceObject
+          }
+        ) : hasFlexGeometry ? /* @__PURE__ */ jsx39(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -39070,7 +39333,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : engine === "jscad" ? /* @__PURE__ */ jsx38(
+        ) : engine === "jscad" ? /* @__PURE__ */ jsx39(
           CadViewerJscad,
           {
             ...resolvedProps,
@@ -39080,7 +39343,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : /* @__PURE__ */ jsx38(
+        ) : /* @__PURE__ */ jsx39(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -39091,7 +39354,7 @@ var CadViewerInner = (props) => {
             referenceObject
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx38(
+        menuVisible && /* @__PURE__ */ jsx39(
           ContextMenu,
           {
             componentName: selectedCadComponent?.componentName,
@@ -39110,9 +39373,10 @@ var CadViewerInner = (props) => {
             menuRef,
             menuPos,
             engine,
+            preRendered: glbSource !== void 0,
             flexScene: hasFlexGeometry,
             foldPcbs: resolvedFoldPcbs,
-            onFoldPcbsToggle: hasBends ? () => {
+            onFoldPcbsToggle: hasBends && glbSource === void 0 ? () => {
               setFoldPcbs(!resolvedFoldPcbs);
               setCameraPreset("Custom");
               closeMenu();
@@ -39151,7 +39415,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -39166,13 +39430,13 @@ var CadViewerInner = (props) => {
 var CadViewer = (props) => {
   configureRuntimeFont();
   const sceneRef = useRef29(null);
-  return /* @__PURE__ */ jsx38(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx39(
     CameraControllerProvider,
     {
       defaultTarget: DEFAULT_TARGET,
       initialCameraPosition: INITIAL_CAMERA_POSITION,
       initialCameraType: readStoredCameraType(),
-      children: /* @__PURE__ */ jsx38(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx38(AppearanceProvider, { children: /* @__PURE__ */ jsx38(ToastProvider, { children: /* @__PURE__ */ jsx38(CadViewerInner, { ...props }) }) }) })
+      children: /* @__PURE__ */ jsx39(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx39(AppearanceProvider, { children: /* @__PURE__ */ jsx39(ToastProvider, { children: /* @__PURE__ */ jsx39(CadViewerInner, { ...props }) }) }) })
     }
   ) });
 };
@@ -39180,11 +39444,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 THREE61 from "three";
+import * as THREE63 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE58 from "three";
+import * as THREE60 from "three";
 import { BufferGeometry as BufferGeometry6, Float32BufferAttribute as Float32BufferAttribute6 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry6();
@@ -39198,12 +39462,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE58.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE58.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE58.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE58.Vector3().crossVectors(
-        new THREE58.Vector3().subVectors(v2, v1),
-        new THREE58.Vector3().subVectors(v3, v1)
+      const v1 = new THREE60.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE60.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE60.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE60.Vector3().crossVectors(
+        new THREE60.Vector3().subVectors(v2, v1),
+        new THREE60.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -39231,23 +39495,23 @@ import {
   convertCSGToThreeGeom as convertCSGToThreeGeom3,
   getJscadModelForFootprint as getJscadModelForFootprint2
 } from "jscad-electronics/vanilla";
-import * as THREE60 from "three";
+import * as THREE62 from "three";
 
 // src/utils/load-model.ts
-import * as THREE59 from "three";
-import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
+import * as THREE61 from "three";
+import { GLTFLoader as GLTFLoader3 } 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";
 async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE59.MeshStandardMaterial({
+    const material = new THREE61.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE59.Mesh(geometry, material);
+    return new THREE61.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -39257,7 +39521,7 @@ async function load3DModel(url) {
     return await loadVrml(url);
   }
   if (url.endsWith(".gltf") || url.endsWith(".glb")) {
-    const loader = new GLTFLoader2();
+    const loader = new GLTFLoader3();
     const gltf = await loader.loadAsync(url);
     return gltf.scene;
   }
@@ -39280,9 +39544,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE62.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -39296,13 +39560,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom3(jscadObject);
-      const material2 = new THREE60.MeshStandardMaterial({
+      const material2 = new THREE62.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE60.DoubleSide
+        side: THREE62.DoubleSide
       });
-      const mesh2 = new THREE60.Mesh(threeGeom, material2);
+      const mesh2 = new THREE62.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -39312,9 +39576,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE62.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -39331,17 +39595,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE60.Color(geomInfo.color);
+      const color = new THREE62.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom3(geomWithColor);
-      const material2 = new THREE60.MeshStandardMaterial({
+      const material2 = new THREE62.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE60.DoubleSide
+        side: THREE62.DoubleSide
       });
-      const mesh2 = new THREE60.Mesh(threeGeom, material2);
+      const mesh2 = new THREE62.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -39351,22 +39615,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE60.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE60.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE62.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE62.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE60.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE60.MeshStandardMaterial({
+  const geometry = new THREE62.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE62.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE60.Mesh(geometry, material);
+  const mesh = new THREE62.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -39387,11 +39651,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE61.Scene();
+  const scene = new THREE63.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE61.Color(backgroundColor), 1);
-  const camera = new THREE61.OrthographicCamera();
+  renderer.setClearColor(new THREE63.Color(backgroundColor), 1);
+  const camera = new THREE63.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -39405,11 +39669,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt2 = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE61.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
+  camera.lookAt(new THREE63.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE61.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE63.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE61.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE63.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -39441,28 +39705,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: edgeColor,
-        side: THREE61.DoubleSide
+        side: THREE63.DoubleSide
       });
-      const mesh = new THREE61.Mesh(geometry, material);
+      const mesh = new THREE63.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE61.Color(8947848);
-  const gridHelper = new THREE61.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE63.Color(8947848);
+  const gridHelper = new THREE63.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 THREE61.LineBasicMaterial) {
+    if (mat instanceof THREE63.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE61.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE61.Vector3());
-  const size4 = box.getSize(new THREE61.Vector3());
+  const box = new THREE63.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE63.Vector3());
+  const size4 = box.getSize(new THREE63.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -39480,10 +39744,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect52, useState as useState43, useMemo as useMemo37, useCallback as useCallback26 } from "react";
+import { useEffect as useEffect54, useState as useState45, useMemo as useMemo39, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo37(() => document.createElement("a"), []);
+  const link = useMemo39(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -39493,7 +39757,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect52(
+  useEffect54(
     () => () => {
       link.remove();
       instance = null;
@@ -39508,17 +39772,17 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState43();
-  const [error, setError] = useState43();
+  const [url, setUrl] = useState45();
+  const [error, setError] = useState45();
   const ref = useCallback26(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect52(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect54(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo37(() => new GLTFExporter3(), []);
+  const exporter = useMemo39(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(