@tscircuit/3d-viewer 0.0.638 → 0.0.640

package/dist/index.js

@@ -19214,11 +19214,16 @@ function resolveFoldPcbs(circuitJson, foldPcbs) {
   );
 }
 
-// src/utils/pick-cad-component.ts
-var pickCadComponent = (scene, position, circuitJson) => {
+// src/utils/pick-scene-object.ts
+var getBoardName = (id, circuitJson) => circuitJson.some((e) => e.type === "pcb_panel" && e.pcb_panel_id === id) ? "Panel" : "Board";
+var pickSceneObject = (scene, position, circuitJson) => {
   let object = pickVisibleMesh(scene, position) ?? null;
   while (object) {
-    const cadComponentId = object.userData.cad_component_id;
+    const {
+      cad_component_id: cadComponentId,
+      pcb_board_id: pcbBoardId,
+      cad_cable_id: cadCableId
+    } = object.userData;
     if (cadComponentId) {
       const cad = circuitJson.find(
         (e) => e.type === "cad_component" && e.cad_component_id === cadComponentId
@@ -19227,8 +19232,8 @@ var pickCadComponent = (scene, position, circuitJson) => {
         const metadata = getGlbComponentMetadata(object);
         if (metadata && metadata.cad_component_id === cadComponentId)
           return {
-            cad_component_id: cadComponentId,
-            componentName: metadata.componentName ?? cadComponentId
+            objectId: cadComponentId,
+            name: metadata.componentName ?? cadComponentId
           };
         return;
       }
@@ -19236,43 +19241,79 @@ var pickCadComponent = (scene, position, circuitJson) => {
         (e) => e.type === "source_component" && e.source_component_id === cad.source_component_id
       );
       return {
-        cad_component_id: cad.cad_component_id,
-        componentName: source?.type === "source_component" ? source.name : cad.cad_component_id
+        objectId: cad.cad_component_id,
+        name: source?.type === "source_component" ? source.name : cad.cad_component_id
       };
     }
+    if (pcbBoardId)
+      return {
+        objectId: pcbBoardId,
+        name: getBoardName(pcbBoardId, circuitJson)
+      };
+    if (cadCableId)
+      return { objectId: cadCableId, name: object.userData.name ?? cadCableId };
     object = object.parent;
   }
 };
 
-// src/hooks/useHiddenCadComponents.ts
+// src/hooks/useObjectVisibility.ts
 import { useState as useState2 } from "react";
-var NO_HIDDEN_COMPONENTS = /* @__PURE__ */ new Set();
-var useHiddenCadComponents = (circuitKey) => {
+
+// src/utils/object-visibility.ts
+var ALL_OBJECTS_VISIBLE = { hiddenIds: /* @__PURE__ */ new Set() };
+var isObjectHidden = (visibility, id) => {
+  if (!visibility) return false;
+  if (id !== void 0 && visibility.hiddenIds.has(id)) return true;
+  return visibility.isolatedId !== void 0 && visibility.isolatedId !== id;
+};
+var hasHiddenObjects = (visibility) => visibility.hiddenIds.size > 0 || visibility.isolatedId !== void 0;
+
+// src/hooks/useObjectVisibility.ts
+var useObjectVisibility = (circuitKey) => {
   const [state, setState] = useState2({
     circuitKey,
-    ids: NO_HIDDEN_COMPONENTS
+    visibility: ALL_OBJECTS_VISIBLE
   });
-  const hiddenCadComponentIds = state.circuitKey === circuitKey ? state.ids : NO_HIDDEN_COMPONENTS;
+  const objectVisibility = state.circuitKey === circuitKey ? state.visibility : ALL_OBJECTS_VISIBLE;
   if (state.circuitKey !== circuitKey) {
-    setState({ circuitKey, ids: NO_HIDDEN_COMPONENTS });
+    setState({ circuitKey, visibility: ALL_OBJECTS_VISIBLE });
   }
+  const update = (next) => {
+    setState((current) => ({
+      circuitKey,
+      visibility: next(
+        current.circuitKey === circuitKey ? current.visibility : ALL_OBJECTS_VISIBLE
+      )
+    }));
+  };
   return {
-    hiddenCadComponentIds,
-    hideComponent: (id) => {
-      setState((current) => ({
-        circuitKey,
-        ids: /* @__PURE__ */ new Set([
-          ...current.circuitKey === circuitKey ? current.ids : [],
-          id
-        ])
+    objectVisibility,
+    hideObject: (id) => {
+      update((current) => ({
+        ...current,
+        hiddenIds: /* @__PURE__ */ new Set([...current.hiddenIds, id])
       }));
     },
-    unhideAllComponents: () => {
-      setState({ circuitKey, ids: NO_HIDDEN_COMPONENTS });
+    isolateObject: (id) => {
+      update((current) => ({ ...current, isolatedId: id }));
+    },
+    unhideAllObjects: () => {
+      update(() => ALL_OBJECTS_VISIBLE);
     }
   };
 };
 
+// src/utils/find-model-object.ts
+var findModelObject = (root, objectId) => {
+  let model;
+  root.traverse((object) => {
+    const { cad_component_id, cad_cable_id } = object.userData;
+    if (!model && (cad_component_id ?? cad_cable_id) === objectId)
+      model = object;
+  });
+  return model;
+};
+
 // src/utils/configure-runtime-font.ts
 import { configureTextBuilder } from "troika-three-text";
 
@@ -19309,8 +19350,8 @@ function configureRuntimeFont() {
 }
 
 // src/CadViewer.tsx
-import { useCallback as useCallback25, useContext as useContext13, useEffect as useEffect56, useRef as useRef30, useState as useState46 } from "react";
-import * as THREE63 from "three";
+import { useCallback as useCallback25, useContext as useContext13, useEffect as useEffect57, useRef as useRef30, useState as useState46 } from "react";
+import * as THREE64 from "three";
 
 // src/assembly-explosion/use-assembly-explosion.ts
 import {
@@ -19564,7 +19605,7 @@ function AssemblyExplosionControl({
 
 // src/CadViewerJscad.tsx
 import { su as su12 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo26 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo27 } from "react";
 
 // src/utils/get-cad-pcb-context.ts
 var getCadPcbContext = (cad, circuitJson) => {
@@ -22303,7 +22344,7 @@ import * as THREE31 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.637",
+  version: "0.0.639",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -25775,9 +25816,36 @@ var ErrorBox = ({ parent }) => {
   return null;
 };
 
+// src/three-components/BoardGroup.tsx
+import { useEffect as useEffect30, useMemo as useMemo22 } from "react";
+import * as THREE35 from "three";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var BoardGroup = ({
+  pcbBoardId,
+  hidden = false,
+  children
+}) => {
+  const scene = useThree();
+  const group = useMemo22(() => new THREE35.Group(), []);
+  group.name = "board";
+  group.userData.pcb_board_id = pcbBoardId;
+  group.visible = !hidden;
+  useEffect30(() => {
+    scene.rootObject.add(group);
+    return () => {
+      scene.rootObject.remove(group);
+    };
+  }, [scene.rootObject, group]);
+  const context = useMemo22(
+    () => ({ ...scene, rootObject: group }),
+    [scene, group]
+  );
+  return /* @__PURE__ */ jsx20(ThreeContext.Provider, { value: context, children });
+};
+
 // src/three-components/JscadBoardTextures.tsx
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect30, useMemo as useMemo23 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo24 } from "react";
 
 // src/textures/open-via-holes-at-pads.ts
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
@@ -25933,12 +26001,12 @@ function clearViaHolesFromSurface({
 
 // src/textures/create-combined-board-textures.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer12 } from "circuit-to-canvas";
-import * as THREE47 from "three";
+import * as THREE48 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 THREE35 from "three";
+import * as THREE36 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -26018,10 +26086,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  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;
@@ -26029,7 +26097,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su7 } from "@tscircuit/circuit-json-util";
-import * as THREE36 from "three";
+import * as THREE37 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -26097,17 +26165,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  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/utils/trace-texture.ts
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su8 } from "@tscircuit/circuit-json-util";
 function createTraceTextureForLayer({
@@ -26193,10 +26261,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  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;
@@ -26204,7 +26272,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
-import * as THREE38 from "three";
+import * as THREE39 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(
@@ -26320,17 +26388,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  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-copper-text-texture-for-layer.ts
-import * as THREE39 from "three";
+import * as THREE40 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -26445,17 +26513,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  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-fabrication-note-texture-for-layer.ts
-import * as THREE40 from "three";
+import * as THREE41 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -26685,17 +26753,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE40.CanvasTexture(canvas);
+  const texture = new THREE41.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE40.LinearMipmapLinearFilter;
-  texture.magFilter = THREE40.LinearFilter;
+  texture.minFilter = THREE41.LinearMipmapLinearFilter;
+  texture.magFilter = THREE41.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE41 from "three";
+import * as THREE42 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -26770,17 +26838,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  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-pcb-note-texture-for-layer.ts
-import * as THREE42 from "three";
+import * as THREE43 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -26934,17 +27002,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  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;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE43 from "three";
+import * as THREE44 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -27095,21 +27163,21 @@ function createSilkscreenTextureForLayer({
     silkscreenColor,
     soldermaskVisible
   });
-  const texture = new THREE43.CanvasTexture(canvas);
+  const texture = new THREE44.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE43.LinearMipmapLinearFilter;
-  texture.magFilter = THREE43.LinearFilter;
+  texture.minFilter = THREE44.LinearMipmapLinearFilter;
+  texture.magFilter = THREE44.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE45 from "three";
+import * as THREE46 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
-import * as THREE44 from "three";
+import * as THREE45 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(
@@ -27121,7 +27189,7 @@ var getSoldermaskPalette = (boardData) => {
     soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen
   );
   const legacySoldermaskOverCopper = boardData.material === "fr1" ? toRgb2(colors.fr1TracesWithMaskCopper) : toRgb2(colors.fr4TracesWithMaskGreen);
-  const requestedSoldermaskColor = resolveSoldermaskColor(boardData.solder_mask_color) ?? (boardData.material === "flex" ? new THREE44.Color(toRgb2(colors.flexAmber)) : null);
+  const requestedSoldermaskColor = resolveSoldermaskColor(boardData.solder_mask_color) ?? (boardData.material === "flex" ? new THREE45.Color(toRgb2(colors.flexAmber)) : null);
   if (!requestedSoldermaskColor) {
     return {
       soldermask: legacySoldermask,
@@ -27130,11 +27198,11 @@ var getSoldermaskPalette = (boardData) => {
       transparent: "rgba(0,0,0,0)"
     };
   }
-  const copperColor = new THREE44.Color().setRGB(
+  const copperColor = new THREE45.Color().setRGB(
     colors.copper[0],
     colors.copper[1],
     colors.copper[2],
-    THREE44.SRGBColorSpace
+    THREE45.SRGBColorSpace
   );
   return {
     soldermask: soldermaskColorToCss(requestedSoldermaskColor),
@@ -27269,17 +27337,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardData
   });
-  const texture = new THREE45.CanvasTexture(canvas);
+  const texture = new THREE46.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE45.LinearMipmapLinearFilter;
-  texture.magFilter = THREE45.LinearFilter;
+  texture.minFilter = THREE46.LinearMipmapLinearFilter;
+  texture.magFilter = THREE46.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE46 from "three";
+import * as THREE47 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer11 } from "circuit-to-canvas";
@@ -27374,10 +27442,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE46.CanvasTexture(canvas);
+  const texture = new THREE47.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE46.LinearMipmapLinearFilter;
-  texture.magFilter = THREE46.LinearFilter;
+  texture.minFilter = THREE47.LinearMipmapLinearFilter;
+  texture.magFilter = THREE47.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -27499,10 +27567,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE47.CanvasTexture(canvas);
+  const combinedTexture = new THREE48.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE47.LinearFilter;
-  combinedTexture.magFilter = THREE47.LinearFilter;
+  combinedTexture.minFilter = THREE48.LinearFilter;
+  combinedTexture.magFilter = THREE48.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -27538,11 +27606,11 @@ var createMaskedCopperMask = ({
     height
   );
   ctx.globalCompositeOperation = "source-over";
-  const maskTexture = new THREE47.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE47.NoColorSpace;
+  const maskTexture = new THREE48.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE48.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE47.LinearFilter;
-  maskTexture.magFilter = THREE47.LinearFilter;
+  maskTexture.minFilter = THREE48.LinearFilter;
+  maskTexture.magFilter = THREE48.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -27692,7 +27760,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE49 from "three";
+import * as THREE50 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -27715,7 +27783,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE48 from "three";
+import * as THREE49 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -27810,13 +27878,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   return PLAIN_SOLDERMASK_PROFILE;
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE48.CanvasTexture(canvas);
-  texture.colorSpace = THREE48.NoColorSpace;
+  const texture = new THREE49.CanvasTexture(canvas);
+  texture.colorSpace = THREE49.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE48.LinearFilter;
-  texture.magFilter = THREE48.LinearFilter;
-  texture.wrapS = THREE48.ClampToEdgeWrapping;
-  texture.wrapT = THREE48.ClampToEdgeWrapping;
+  texture.minFilter = THREE49.LinearFilter;
+  texture.magFilter = THREE49.LinearFilter;
+  texture.wrapS = THREE49.ClampToEdgeWrapping;
+  texture.wrapT = THREE49.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -27940,16 +28008,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE49.PlaneGeometry(
+  const planeGeom = new THREE50.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE49.SRGBColorSpace;
+  texture.colorSpace = THREE50.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE49.FrontSide,
+    side: THREE50.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -27958,12 +28026,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE49.MeshPhysicalMaterial({
+  const material = new THREE50.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE49.Vector2(
+    normalScale: new THREE50.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -27977,7 +28045,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE49.Mesh(planeGeom, material);
+  const mesh = new THREE50.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -28025,10 +28093,10 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE50 from "three";
+import * as THREE51 from "three";
 
 // src/hooks/useBoardTextureVisibility.ts
-import { useMemo as useMemo22 } from "react";
+import { useMemo as useMemo23 } from "react";
 var useBoardTextureVisibility = (visibility) => {
   const {
     boardBody,
@@ -28041,7 +28109,7 @@ var useBoardTextureVisibility = (visibility) => {
     keepout,
     pcbNotes
   } = visibility;
-  return useMemo22(
+  return useMemo23(
     () => ({
       boardBody,
       topCopper,
@@ -28103,7 +28171,7 @@ function JscadBoardTextures({
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
   const textureVisibility = useBoardTextureVisibility(visibility);
-  const boardData = useMemo23(() => {
+  const boardData = useMemo24(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -28130,11 +28198,11 @@ function JscadBoardTextures({
     );
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const traceTextureResolution = useMemo23(() => {
+  const traceTextureResolution = useMemo24(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  const textures = useMemo23(() => {
+  const textures = useMemo24(() => {
     if (!boardData?.width || !boardData.height) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -28143,7 +28211,7 @@ function JscadBoardTextures({
       visibility: textureVisibility
     });
   }, [circuitJson, boardData, traceTextureResolution, textureVisibility]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -28163,7 +28231,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE50.Texture) {
+        if (texture && texture instanceof THREE51.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -28182,16 +28250,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE50.PlaneGeometry(
+      const planeGeom = new THREE51.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE50.SRGBColorSpace;
+      texture.colorSpace = THREE51.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE50.FrontSide,
+        side: THREE51.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -28202,12 +28270,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE50.MeshPhysicalMaterial({
+      const material = new THREE51.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE50.Vector2(
+        normalScale: new THREE51.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -28219,7 +28287,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE50.Mesh(planeGeom, material);
+      const mesh = new THREE51.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -28269,7 +28337,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE50.Material) {
+        } else if (mesh.material instanceof THREE51.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -28281,8 +28349,8 @@ function JscadBoardTextures({
 }
 
 // src/three-components/STLModel.tsx
-import { useState as useState19, useEffect as useEffect31, useMemo as useMemo24 } from "react";
-import * as THREE51 from "three";
+import { useState as useState19, useEffect as useEffect32, useMemo as useMemo25 } from "react";
+import * as THREE52 from "three";
 import { STLLoader as STLLoader2 } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -28294,7 +28362,7 @@ function STLModel({
 }) {
   const { rootObject } = useThree();
   const [geom, setGeom] = useState19(null);
-  useEffect31(() => {
+  useEffect32(() => {
     const loader = new STLLoader2();
     if (stlData) {
       try {
@@ -28312,18 +28380,18 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo24(() => {
+  const mesh = useMemo25(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE51.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE51.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE52.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE52.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 THREE51.Mesh(geom, material);
+    const createdMesh = new THREE52.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -28331,7 +28399,7 @@ function STLModel({
     });
     return createdMesh;
   }, [geom, color, opacity, layerType]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -28348,7 +28416,7 @@ function STLModel({
 }
 
 // src/three-components/VisibleSTLModel.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function VisibleSTLModel({
   stlData,
   color,
@@ -28371,7 +28439,7 @@ function VisibleSTLModel({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     STLModel,
     {
       stlData,
@@ -28385,8 +28453,8 @@ function VisibleSTLModel({
 // src/three-components/CadCable.tsx
 import { parseCableString } from "@tscircuit/cableprinter";
 import { createCableMeshes } from "jscad-electronics/cables";
-import { useEffect as useEffect32, useMemo as useMemo25 } from "react";
-import * as THREE52 from "three";
+import { useEffect as useEffect33, useMemo as useMemo26 } from "react";
+import * as THREE53 from "three";
 var isCadCableElement = (element) => {
   if (!element || typeof element !== "object") return false;
   const candidate = element;
@@ -28403,14 +28471,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 THREE52.Vector3(
+  const cableAxis = new THREE53.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 THREE52.Vector3(
+  const pin1Side = new THREE53.Vector3(
     pin1Position.x - endpoint.x,
     pin1Position.y - endpoint.y,
     pin1Position.z - endpoint.z
@@ -28436,28 +28504,28 @@ var createCadCableObject = (cable) => {
       end: "end"
     })
   });
-  const group = new THREE52.Group();
+  const group = new THREE53.Group();
   group.name = `cad-cable-${cable.cad_cable_id}`;
-  group.userData = { cadCableId: cable.cad_cable_id, name: cable.name };
+  group.userData = { cad_cable_id: cable.cad_cable_id, name: cable.name };
   for (const cableMesh of cableMeshes) {
-    let geometry = new THREE52.BufferGeometry();
+    let geometry = new THREE53.BufferGeometry();
     geometry.setAttribute(
       "position",
-      new THREE52.Float32BufferAttribute(cableMesh.positions, 3)
+      new THREE53.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 THREE52.MeshStandardMaterial({
-      color: new THREE52.Color(red, green, blue),
+    const material = new THREE53.MeshStandardMaterial({
+      color: new THREE53.Color(red, green, blue),
       metalness: cableMesh.material?.metalness ?? 0,
       roughness: cableMesh.material?.roughness ?? 0.7,
       opacity: alpha,
       transparent: alpha < 1,
-      side: THREE52.DoubleSide
+      side: THREE53.DoubleSide
     });
-    const mesh = new THREE52.Mesh(geometry, material);
+    const mesh = new THREE53.Mesh(geometry, material);
     mesh.name = `${group.name}:${cableMesh.name}`;
     configureObjectShadows(mesh, { castShadow: true, receiveShadow: true });
     group.add(mesh);
@@ -28466,7 +28534,7 @@ var createCadCableObject = (cable) => {
 };
 var disposeCadCableObject = (group) => {
   group.traverse((object) => {
-    if (!(object instanceof THREE52.Mesh)) return;
+    if (!(object instanceof THREE53.Mesh)) return;
     object.geometry.dispose();
     const materials2 = Array.isArray(object.material) ? object.material : [object.material];
     for (const material of materials2) material.dispose();
@@ -28474,7 +28542,7 @@ var disposeCadCableObject = (group) => {
 };
 var CadCable = ({ cable }) => {
   const { rootObject } = useThree();
-  const cableObject = useMemo25(() => {
+  const cableObject = useMemo26(() => {
     try {
       return createCadCableObject(cable);
     } catch (error) {
@@ -28482,7 +28550,7 @@ var CadCable = ({ cable }) => {
       return null;
     }
   }, [cable]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!cableObject) return;
     rootObject.add(cableObject);
     return () => {
@@ -28598,7 +28666,7 @@ function addFauxBoardIfNeeded(circuitJson) {
 }
 
 // src/CadViewerJscad.tsx
-import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef3(
   ({
     circuitJson,
@@ -28609,16 +28677,16 @@ var CadViewerJscad = forwardRef3(
     onCameraControllerReady,
     resolveStaticAsset,
     referenceObject,
-    hiddenCadComponentIds
+    objectVisibility
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo26(() => {
+    const internalCircuitJson = useMemo27(() => {
       return addFauxBoardIfNeeded(
         circuitJson ?? childrenSoup
       );
     }, [circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const isFauxBoard = useMemo26(() => {
+    const isFauxBoard = useMemo27(() => {
       if (!internalCircuitJson) return false;
       try {
         const board = su12(internalCircuitJson).pcb_board.list()[0];
@@ -28627,7 +28695,7 @@ var CadViewerJscad = forwardRef3(
         return false;
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo26(() => {
+    const boardDimensions = useMemo27(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su12(internalCircuitJson).pcb_board.list()[0];
@@ -28639,7 +28707,7 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo26(() => {
+    const boardCenter = useMemo27(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su12(internalCircuitJson).pcb_board.list()[0];
@@ -28651,7 +28719,7 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const cameraSessionScope = useMemo26(() => {
+    const cameraSessionScope = useMemo27(() => {
       if (!internalCircuitJson) return void 0;
       const board = su12(internalCircuitJson).pcb_board.list()[0];
       if (!board) return void 0;
@@ -28661,13 +28729,20 @@ var CadViewerJscad = forwardRef3(
         dimensions: boardDimensions
       });
     }, [internalCircuitJson, boardCenter, boardDimensions]);
-    const initialCameraPosition = useMemo26(() => {
+    const initialCameraPosition = useMemo27(() => {
       return getInitialCameraPosition({ boardDimensions, boardCenter });
     }, [boardDimensions, boardCenter]);
     const pcbThickness = usePcbThickness(internalCircuitJson);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-    const cad_components = su12(internalCircuitJson).cad_component.list().filter((cad) => !hiddenCadComponentIds?.has(cad.cad_component_id));
-    const cadCables = getCadCables(internalCircuitJson);
+    const renderedBoardId = useMemo27(() => {
+      const panel = internalCircuitJson.find((e) => e.type === "pcb_panel");
+      if (panel?.type === "pcb_panel") return panel.pcb_panel_id;
+      return su12(internalCircuitJson).pcb_board.list().find((board) => !board.pcb_panel_id)?.pcb_board_id;
+    }, [internalCircuitJson]);
+    const cad_components = su12(internalCircuitJson).cad_component.list().filter((cad) => !isObjectHidden(objectVisibility, cad.cad_component_id));
+    const cadCables = getCadCables(internalCircuitJson).filter(
+      (cable) => !isObjectHidden(objectVisibility, cable.cad_cable_id)
+    );
     return /* @__PURE__ */ jsxs6(
       CadViewerContainer,
       {
@@ -28682,29 +28757,38 @@ var CadViewerJscad = forwardRef3(
         onUserInteraction,
         onCameraControllerReady,
         children: [
-          boardStls.map(({ stlData, color, layerType }, index2) => /* @__PURE__ */ jsx21(
-            VisibleSTLModel,
+          /* @__PURE__ */ jsxs6(
+            BoardGroup,
             {
-              stlData,
-              color,
-              opacity: index2 === 0 ? isFauxBoard ? 0.8 : 0.95 : 1,
-              layerType
-            },
-            `board-${index2}`
-          )),
-          /* @__PURE__ */ jsx21(
-            JscadBoardTextures,
-            {
-              circuitJson: internalCircuitJson,
-              pcbThickness,
-              isFaux: isFauxBoard
+              pcbBoardId: renderedBoardId,
+              hidden: isObjectHidden(objectVisibility, renderedBoardId),
+              children: [
+                boardStls.map(({ stlData, color, layerType }, index2) => /* @__PURE__ */ jsx22(
+                  VisibleSTLModel,
+                  {
+                    stlData,
+                    color,
+                    opacity: index2 === 0 ? isFauxBoard ? 0.8 : 0.95 : 1,
+                    layerType
+                  },
+                  `board-${index2}`
+                )),
+                /* @__PURE__ */ jsx22(
+                  JscadBoardTextures,
+                  {
+                    circuitJson: internalCircuitJson,
+                    pcbThickness,
+                    isFaux: isFauxBoard
+                  }
+                )
+              ]
             }
           ),
-          cad_components.map((cad_component) => /* @__PURE__ */ jsx21(
+          cad_components.map((cad_component) => /* @__PURE__ */ jsx22(
             ThreeErrorBoundary,
             {
-              fallback: ({ error }) => /* @__PURE__ */ jsx21(Error3d, { cad_component, error }),
-              children: /* @__PURE__ */ jsx21(
+              fallback: ({ error }) => /* @__PURE__ */ jsx22(Error3d, { cad_component, error }),
+              children: /* @__PURE__ */ jsx22(
                 AnyCadComponent,
                 {
                   cad_component,
@@ -28716,7 +28800,7 @@ var CadViewerJscad = forwardRef3(
             },
             cad_component.cad_component_id
           )),
-          cadCables.map((cable) => /* @__PURE__ */ jsx21(CadCable, { cable }, cable.cad_cable_id))
+          cadCables.map((cable) => /* @__PURE__ */ jsx22(CadCable, { cable }, cable.cad_cable_id))
         ]
       }
     );
@@ -29977,13 +30061,13 @@ function createStiffenerMesh({
 }
 
 // src/CadViewerManifold.tsx
-import { useEffect as useEffect34, useMemo as useMemo28, useState as useState21 } from "react";
-import * as THREE60 from "three";
+import { useEffect as useEffect35, useMemo as useMemo29, useState as useState21 } from "react";
+import * as THREE61 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect33, useMemo as useMemo27, useRef as useRef10, useState as useState20 } from "react";
-import * as THREE56 from "three";
+import { useEffect as useEffect34, useMemo as useMemo28, useRef as useRef10, useState as useState20 } from "react";
+import * as THREE57 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -30332,17 +30416,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 THREE54 from "three";
+import * as THREE55 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE53 from "three";
+import * as THREE54 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE53.BufferGeometry();
+  const geometry = new THREE54.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE53.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE54.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE53.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE54.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];
@@ -30376,7 +30460,7 @@ var createEllipsePoints = (width, height, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE54.Color(...colors.copper);
+var COPPER_COLOR = new THREE55.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -31016,7 +31100,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-vias.ts
-import * as THREE55 from "three";
+import * as THREE56 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -31054,7 +31138,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE55.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE56.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume, otherHoleDrills = []) {
   const viaBoardDrills = [];
   const pcbVias = getPcbVias(circuitJson);
@@ -31138,7 +31222,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const [error, setError] = useState20(null);
   const [isLoading, setIsLoading] = useState20(true);
   const manifoldInstancesForCleanup = useRef10([]);
-  const boardData = useMemo27(() => {
+  const boardData = useMemo28(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -31163,15 +31247,15 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const isFauxBoard = useMemo27(() => {
+  const isFauxBoard = useMemo28(() => {
     const boards = su16(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
-  const traceTextureResolution = useMemo27(() => {
+  const traceTextureResolution = useMemo28(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -31302,7 +31386,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE56.Color(
+              color: new THREE57.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -31351,7 +31435,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       manifoldInstancesForCleanup.current = [];
     };
   }, [manifoldJSModule, circuitJson, boardData]);
-  const textures = useMemo27(() => {
+  const textures = useMemo28(() => {
     if (!boardData || !traceTextureResolution) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -31372,7 +31456,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/flex-meshes.ts
-import * as THREE57 from "three";
+import * as THREE58 from "three";
 function restoreOutlinePrecision(point, outline, tolerance) {
   let distanceSquared = tolerance * tolerance;
   let closest;
@@ -31407,7 +31491,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 THREE57.Vector3().fromBufferAttribute(position, i + j);
+      const v = new THREE58.Vector3().fromBufferAttribute(position, i + j);
       const localMagnitude = Math.max(
         1,
         Math.abs(v.x),
@@ -31430,7 +31514,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 THREE57.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE57.Vector3(c.x - a.x, c.y - a.y, c.z - a.z)).normalize();
+    const n = new THREE58.Vector3(b.x - a.x, b.y - a.y, b.z - a.z).cross(new THREE58.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 },
@@ -31453,13 +31537,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 THREE57.BufferGeometry();
+  const geometry = new THREE58.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE57.Float32BufferAttribute(positions, 3)
+    new THREE58.Float32BufferAttribute(positions, 3)
   );
-  geometry.setAttribute("normal", new THREE57.Float32BufferAttribute(normals, 3));
-  geometry.setAttribute("uv", new THREE57.Float32BufferAttribute(uvs, 2));
+  geometry.setAttribute("normal", new THREE58.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("uv", new THREE58.Float32BufferAttribute(uvs, 2));
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
   return geometry;
@@ -31512,7 +31596,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         z: mesh.position.z
       }));
       const uvs = vertices.map((p) => {
-        const local = new THREE57.Vector3(
+        const local = new THREE58.Vector3(
           p.x + board.center.x,
           p.y + board.center.y,
           p.z
@@ -31536,7 +31620,7 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
     return result;
   }) : textureMeshes;
   for (const stiffener of stiffeners) {
-    const mesh = new THREE57.Mesh(
+    const mesh = new THREE58.Mesh(
       surfaceToGeometry(
         createStiffenerMesh({
           stiffener,
@@ -31545,16 +31629,16 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
         }),
         board.center
       ),
-      new THREE57.MeshStandardMaterial({
+      new THREE58.MeshStandardMaterial({
         color: stiffener.material === "fr4" ? "#879568" : stiffener.material === "polyimide" ? "#bd7f27" : "#b8bdc4",
-        side: THREE57.DoubleSide
+        side: THREE58.DoubleSide
       })
     );
     mesh.name = "board-stiffener";
     configureObjectShadows(mesh);
     geometry.push(mesh);
   }
-  const bounds = new THREE57.Box3();
+  const bounds = new THREE58.Box3();
   for (const mesh of [...geometry, ...textures]) bounds.expandByObject(mesh);
   return {
     geometryMeshes: geometry,
@@ -31571,11 +31655,11 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
 }
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE59 from "three";
+import * as THREE60 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE58 from "three";
-var DEFAULT_SIDE = THREE58.DoubleSide;
+import * as THREE59 from "three";
+var DEFAULT_SIDE = THREE59.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -31583,7 +31667,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE58.MeshPhysicalMaterial({
+    return new THREE59.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -31601,7 +31685,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE58.MeshStandardMaterial({
+  return new THREE59.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -31620,12 +31704,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE59.Mesh(
+    const mesh = new THREE60.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE59.DoubleSide,
+        side: THREE60.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -31636,11 +31720,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE59.Mesh(
+        const mesh = new THREE60.Mesh(
           comp.geometry,
-          new THREE59.MeshStandardMaterial({
+          new THREE60.MeshStandardMaterial({
             color: comp.color,
-            side: THREE59.DoubleSide,
+            side: THREE60.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -31684,7 +31768,7 @@ function loadManifold() {
 }
 
 // src/CadViewerManifold.tsx
-import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
 var BoardMeshes = ({
   geometryMeshes,
   textureMeshes
@@ -31712,14 +31796,14 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE60.Texture) {
+        if (texture && texture instanceof THREE61.Texture) {
           texture.dispose();
         }
       }
       material.dispose();
     }
   };
-  useEffect34(() => {
+  useEffect35(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -31741,7 +31825,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -31767,17 +31851,17 @@ var CadViewerManifold = ({
   onCameraControllerReady,
   resolveStaticAsset,
   referenceObject,
-  hiddenCadComponentIds
+  objectVisibility
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo28(() => {
+  const circuitJson = useMemo29(() => {
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
   const [manifoldJSModule, setManifoldJSModule] = useState21(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState21(null);
   const { visibility } = useLayerVisibility();
-  useEffect34(() => {
+  useEffect35(() => {
     let isActive = true;
     loadManifold().then((module) => {
       if (isActive) setManifoldJSModule(module);
@@ -31801,7 +31885,7 @@ var CadViewerManifold = ({
     boardData,
     isFauxBoard
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility);
-  const flex = useMemo28(() => {
+  const flex = useMemo29(() => {
     try {
       const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
       const posedJson = transformCircuitJsonCadComponents(circuitJson, {
@@ -31832,28 +31916,32 @@ var CadViewerManifold = ({
     circuitJson,
     foldPcbs
   ]);
-  const cadComponents = useMemo28(
-    () => su17(flex.posedJson).cad_component.list().filter((cad) => !hiddenCadComponentIds?.has(cad.cad_component_id)),
-    [flex.posedJson, hiddenCadComponentIds]
+  const cadComponents = useMemo29(
+    () => su17(flex.posedJson).cad_component.list().filter(
+      (cad) => !isObjectHidden(objectVisibility, cad.cad_component_id)
+    ),
+    [flex.posedJson, objectVisibility]
   );
-  const cadCables = useMemo28(
-    () => getCadCables(flex.posedJson),
-    [flex.posedJson]
+  const cadCables = useMemo29(
+    () => getCadCables(flex.posedJson).filter(
+      (cable) => !isObjectHidden(objectVisibility, cable.cad_cable_id)
+    ),
+    [flex.posedJson, objectVisibility]
   );
-  const boardDimensions = useMemo28(() => {
+  const boardDimensions = useMemo29(() => {
     if (!boardData) return void 0;
     const bounds = calculateOutlineBounds(boardData);
     return { width: bounds.width, height: bounds.height };
   }, [boardData]);
-  const boardCenter = useMemo28(() => {
+  const boardCenter = useMemo29(() => {
     if (!boardData) return void 0;
     const bounds = calculateOutlineBounds(boardData);
     return { x: bounds.centerX, y: bounds.centerY };
   }, [boardData]);
-  const initialCameraPosition = useMemo28(() => {
+  const initialCameraPosition = useMemo29(() => {
     return getInitialCameraPosition({ boardDimensions, boardCenter });
   }, [boardDimensions, boardCenter]);
-  const cameraSessionScope = useMemo28(() => {
+  const cameraSessionScope = useMemo29(() => {
     if (!boardData) return void 0;
     return JSON.stringify({
       pcbBoardId: boardData.pcb_board_id,
@@ -31879,7 +31967,7 @@ var CadViewerManifold = ({
     );
   }
   if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx22("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    return /* @__PURE__ */ jsx23("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
   }
   if (builderError || flex.error) {
     return /* @__PURE__ */ jsxs7(
@@ -31900,7 +31988,7 @@ var CadViewerManifold = ({
     );
   }
   if (builderIsLoading) {
-    return /* @__PURE__ */ jsx22("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    return /* @__PURE__ */ jsx23("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
   }
   return /* @__PURE__ */ jsxs7(
     CadViewerContainer,
@@ -31915,19 +32003,26 @@ var CadViewerManifold = ({
       onUserInteraction,
       onCameraControllerReady,
       children: [
-        /* @__PURE__ */ jsx22(
-          BoardMeshes,
+        /* @__PURE__ */ jsx23(
+          BoardGroup,
           {
-            geometryMeshes: flex.geometryMeshes,
-            textureMeshes: flex.textureMeshes
+            pcbBoardId: boardData?.pcb_board_id,
+            hidden: isObjectHidden(objectVisibility, boardData?.pcb_board_id),
+            children: /* @__PURE__ */ jsx23(
+              BoardMeshes,
+              {
+                geometryMeshes: flex.geometryMeshes,
+                textureMeshes: flex.textureMeshes
+              }
+            )
           }
         ),
-        flex.bounds && /* @__PURE__ */ jsx22(FitCameraToComparison, { bounds: flex.bounds }),
-        cadComponents.map((cad_component) => /* @__PURE__ */ jsx22(
+        flex.bounds && /* @__PURE__ */ jsx23(FitCameraToComparison, { bounds: flex.bounds }),
+        cadComponents.map((cad_component) => /* @__PURE__ */ jsx23(
           ThreeErrorBoundary,
           {
-            fallback: ({ error }) => /* @__PURE__ */ jsx22(Error3d, { cad_component, error }),
-            children: /* @__PURE__ */ jsx22(
+            fallback: ({ error }) => /* @__PURE__ */ jsx23(Error3d, { cad_component, error }),
+            children: /* @__PURE__ */ jsx23(
               AnyCadComponent,
               {
                 cad_component,
@@ -31938,7 +32033,7 @@ var CadViewerManifold = ({
           },
           cad_component.cad_component_id
         )),
-        cadCables.map((cable) => /* @__PURE__ */ jsx22(CadCable, { cable }, cable.cad_cable_id))
+        cadCables.map((cable) => /* @__PURE__ */ jsx23(CadCable, { cable }, cable.cad_cable_id))
       ]
     }
   );
@@ -31946,14 +32041,14 @@ var CadViewerManifold = ({
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/CadViewerGlb.tsx
-import { useEffect as useEffect36, useMemo as useMemo30, useState as useState23 } from "react";
+import { useEffect as useEffect37, useMemo as useMemo31, useState as useState23 } from "react";
 
 // src/hooks/useGlbModel.ts
-import { useEffect as useEffect35, useMemo as useMemo29, useState as useState22 } from "react";
+import { useEffect as useEffect36, useMemo as useMemo30, useState as useState22 } from "react";
 function useGlbModel(source) {
-  const request = useMemo29(() => ({ source }), [source]);
+  const request = useMemo30(() => ({ source }), [source]);
   const [result, setResult] = useState22();
-  useEffect35(() => {
+  useEffect36(() => {
     const controller = new AbortController();
     let model;
     loadGlbScene(request.source, controller.signal).then((loaded) => {
@@ -31976,17 +32071,17 @@ function useGlbModel(source) {
 }
 
 // src/CadViewerGlb.tsx
-import * as THREE61 from "three";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+import * as THREE62 from "three";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 function GlbScene({
   model,
-  hiddenCadComponentIds
+  objectVisibility
 }) {
   const { rootObject } = useThree();
   const { addHoverable, removeHoverable } = useHover();
   const [hover, setHover] = useState23();
-  const bounds = useMemo30(() => {
-    const box = new THREE61.Box3().setFromObject(model);
+  const bounds = useMemo31(() => {
+    const box = new THREE62.Box3().setFromObject(model);
     if (box.isEmpty()) return;
     return {
       minX: box.min.x,
@@ -31997,24 +32092,29 @@ function GlbScene({
       maxZ: box.max.z
     };
   }, [model]);
-  useEffect36(() => {
+  useEffect37(() => {
     rootObject.add(model);
     return () => {
       rootObject.remove(model);
     };
   }, [rootObject, model]);
-  useEffect36(() => {
+  useEffect37(() => {
     setHover(void 0);
-    model.traverse((object) => {
+    const applyVisibility = (object, inComponent) => {
       const id = object.userData.cad_component_id;
       if (typeof id === "string")
-        object.visible = !hiddenCadComponentIds?.has(id);
-    });
-  }, [model, hiddenCadComponentIds]);
-  useEffect36(() => {
+        object.visible = !isObjectHidden(objectVisibility, id);
+      else if (!inComponent && object instanceof THREE62.Mesh)
+        object.visible = !isObjectHidden(objectVisibility, void 0);
+      for (const child of object.children)
+        applyVisibility(child, inComponent || typeof id === "string");
+    };
+    applyVisibility(model, false);
+  }, [model, objectVisibility]);
+  useEffect37(() => {
     const meshes = [];
     model.traverse((mesh) => {
-      if (!(mesh instanceof THREE61.Mesh)) return;
+      if (!(mesh instanceof THREE62.Mesh)) return;
       let ancestor = mesh;
       while (ancestor) {
         if (!ancestor.visible) return;
@@ -32042,10 +32142,10 @@ function GlbScene({
     return () => {
       for (const mesh of meshes) removeHoverable(mesh);
     };
-  }, [model, hiddenCadComponentIds, addHoverable, removeHoverable]);
+  }, [model, objectVisibility, addHoverable, removeHoverable]);
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    bounds && /* @__PURE__ */ jsx23(FitCameraToComparison, { bounds }),
-    hover && /* @__PURE__ */ jsx23(
+    bounds && /* @__PURE__ */ jsx24(FitCameraToComparison, { bounds }),
+    hover && /* @__PURE__ */ jsx24(
       Html,
       {
         position: hover.position,
@@ -32064,13 +32164,13 @@ function GlbScene({
 }
 function CadViewerGlb({
   source,
-  hiddenCadComponentIds,
+  objectVisibility,
   ...containerProps
 }) {
   const result = useGlbModel(source);
-  const framing = useMemo30(() => {
+  const framing = useMemo31(() => {
     if (!result?.model) return void 0;
-    const bounds = new THREE61.Box3().setFromObject(result.model);
+    const bounds = new THREE62.Box3().setFromObject(result.model);
     if (bounds.isEmpty()) return void 0;
     return {
       boardDimensions: {
@@ -32083,20 +32183,14 @@ function CadViewerGlb({
       }
     };
   }, [result, source]);
-  if (!result) return /* @__PURE__ */ jsx23("div", { role: "status", children: "Loading 3D view..." });
+  if (!result) return /* @__PURE__ */ jsx24("div", { role: "status", children: "Loading 3D view..." });
   if (result.error)
     return /* @__PURE__ */ jsxs8("div", { role: "alert", children: [
       "Unable to load 3D view: ",
       result.error
     ] });
   if (!result.model) return null;
-  return /* @__PURE__ */ jsx23(CadViewerContainer, { ...containerProps, ...framing, children: /* @__PURE__ */ jsx23(
-    GlbScene,
-    {
-      model: result.model,
-      hiddenCadComponentIds
-    }
-  ) });
+  return /* @__PURE__ */ jsx24(CadViewerContainer, { ...containerProps, ...framing, children: /* @__PURE__ */ jsx24(GlbScene, { model: result.model, objectVisibility }) });
 }
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
@@ -32198,7 +32292,7 @@ __name2(useComposedRefs, "useComposedRefs");
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React12 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var __defProp4 = Object.defineProperty;
 var __name3 = (target, value) => __defProp4(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
@@ -32208,7 +32302,7 @@ function createContext22(rootComponentName, defaultContext) {
   const Provider = /* @__PURE__ */ __name3((props) => {
     const { children, ...context } = props;
     const value = React12.useMemo(() => context, Object.values(context));
-    return /* @__PURE__ */ jsx24(Context.Provider, { value, children });
+    return /* @__PURE__ */ jsx25(Context.Provider, { value, children });
   }, "Provider");
   Provider.displayName = rootComponentName + "Provider";
   function useContext22(consumerName, options = {}) {
@@ -32235,7 +32329,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__ */ jsx24(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx25(Context.Provider, { value, children });
     }, "Provider");
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope, options = {}) {
@@ -32620,7 +32714,7 @@ var createSlottableError = /* @__PURE__ */ __name6((ownerName) => {
 var use = React16[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var __defProp8 = Object.defineProperty;
 var __name7 = (target, value) => __defProp8(target, "name", { value, configurable: true });
 var NODES = [
@@ -32650,7 +32744,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx25(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx26(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -32665,9 +32759,9 @@ import * as React41 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 import * as React18 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-import * as React23 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
+import * as React23 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var __defProp9 = Object.defineProperty;
 var __name8 = (target, value) => __defProp9(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
@@ -32682,7 +32776,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx26(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx27(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -32692,7 +32786,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx26(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx27(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -32709,7 +32803,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx26(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx27(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -33065,12 +33159,12 @@ function createCollection2(name) {
   const [CollectionStatefulContextProvider, useStatefulCollectionContext] = createCollectionContext(PROVIDER_NAME);
   CollectionStatefulContextProvider.displayName = name + "CollectionStatefulContextProvider";
   const CollectionProvider = /* @__PURE__ */ __name8(({ state, ...props }) => {
-    return state ? /* @__PURE__ */ jsx27(CollectionProviderImpl, { ...props, state }) : /* @__PURE__ */ jsx27(CollectionInit, { ...props });
+    return state ? /* @__PURE__ */ jsx28(CollectionProviderImpl, { ...props, state }) : /* @__PURE__ */ jsx28(CollectionInit, { ...props });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const CollectionInit = /* @__PURE__ */ __name8((props) => {
     const state = useInitCollection();
-    return /* @__PURE__ */ jsx27(CollectionProviderImpl, { ...props, state });
+    return /* @__PURE__ */ jsx28(CollectionProviderImpl, { ...props, state });
   }, "CollectionInit");
   CollectionInit.displayName = name + "CollectionInit";
   const CollectionProviderImpl = /* @__PURE__ */ __name8((props) => {
@@ -33110,7 +33204,7 @@ function createCollection2(name) {
         observer.disconnect();
       };
     }, [collectionElement, setCollection]);
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       CollectionStableContextProvider,
       {
         scope,
@@ -33119,7 +33213,7 @@ function createCollection2(name) {
         getCollection,
         setCollection,
         registryRef,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           CollectionStatefulContextProvider,
           {
             scope,
@@ -33139,7 +33233,7 @@ function createCollection2(name) {
       const { scope, children } = props;
       const context = useStableCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionElementRef);
-      return /* @__PURE__ */ jsx27(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx28(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -33215,7 +33309,7 @@ function createCollection2(name) {
           });
         };
       }, [setCollection]);
-      return /* @__PURE__ */ jsx27(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx28(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -33296,7 +33390,7 @@ __name8(getChildListObserver, "getChildListObserver");
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var __defProp10 = Object.defineProperty;
 var __name9 = (target, value) => __defProp10(target, "name", { value, configurable: true });
 var Direction = {
@@ -33334,7 +33428,7 @@ function useCallbackRef(callback) {
 __name10(useCallbackRef, "useCallbackRef");
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var __defProp12 = Object.defineProperty;
 var __name11 = (target, value) => __defProp12(target, "name", { value, configurable: true });
 var CONTEXT_UPDATE = "dismissableLayer.update";
@@ -33466,7 +33560,7 @@ var DismissableLayer = /* @__PURE__ */ React21.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Primitive.div,
       {
         ...layerProps,
@@ -33715,7 +33809,7 @@ __name12(createFocusGuard, "createFocusGuard");
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React25 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var __defProp14 = Object.defineProperty;
 var __name13 = (target, value) => __defProp14(target, "name", { value, configurable: true });
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
@@ -33854,7 +33948,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
       },
       [loop, trapped, focusScope.paused]
     );
-    return /* @__PURE__ */ jsx30(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+    return /* @__PURE__ */ jsx31(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
   }, "FocusScope")
 );
 var FocusScopeBranchContext = React25.createContext(null);
@@ -33862,7 +33956,7 @@ function FocusScopeBranchProvider({ registry, children }) {
   if (!registry) {
     return children;
   }
-  return /* @__PURE__ */ jsx30(FocusScopeBranchContext.Provider, { value: registry, children });
+  return /* @__PURE__ */ jsx31(FocusScopeBranchContext.Provider, { value: registry, children });
 }
 __name13(FocusScopeBranchProvider, "FocusScopeBranchProvider");
 function useFocusScopeBranchRegistry() {
@@ -35955,7 +36049,7 @@ function useSize(element) {
 __name15(useSize, "useSize");
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var __defProp17 = Object.defineProperty;
 var __name16 = (target, value) => __defProp17(target, "name", { value, configurable: true });
 var Sticky = {
@@ -35973,7 +36067,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__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     PopperProvider,
     {
       scope: __scopePopper,
@@ -36016,7 +36110,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__ */ jsx31(
+    return virtualRef ? null : /* @__PURE__ */ jsx32(
       Primitive.div,
       {
         "data-radix-popper-side": placedSide,
@@ -36140,7 +36234,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         ref: refs.setFloating,
@@ -36164,7 +36258,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx32(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -36174,7 +36268,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx32(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -36240,7 +36334,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 jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var __defProp18 = Object.defineProperty;
 var __name17 = (target, value) => __defProp18(target, "name", { value, configurable: true });
 var Portal = /* @__PURE__ */ React30.forwardRef(
@@ -36249,7 +36343,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__ */ jsx32(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+    return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx33(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
   }, "Portal")
 );
 
@@ -36469,7 +36563,7 @@ __name19(useIsHydratedModern, "useIsHydratedModern");
 var useIsHydrated2 = typeof useReactSyncExternalStore === "function" ? useIsHydratedModern : useIsHydrated;
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var __defProp21 = Object.defineProperty;
 var __name20 = (target, value) => __defProp21(target, "name", { value, configurable: true });
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
@@ -36492,7 +36586,7 @@ var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext
 var RovingFocusGroup = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name20(function RovingFocusGroup2(props, forwardedRef) {
-    return /* @__PURE__ */ jsx33(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx33(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx33(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+    return /* @__PURE__ */ jsx34(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx34(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx34(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }, "RovingFocusGroup")
 );
 var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
@@ -36529,7 +36623,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -36550,7 +36644,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -36618,14 +36712,14 @@ var RovingFocusGroupItem = /* @__PURE__ */ React33.forwardRef(
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
     }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx34(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -37547,7 +37641,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var __defProp22 = Object.defineProperty;
 var __name21 = (target, value) => __defProp22(target, "name", { value, configurable: true });
 var Direction3 = {
@@ -37606,7 +37700,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
     window.addEventListener("blur", handleBlur);
     return () => window.removeEventListener("blur", handleBlur);
   }, [open, handleOpenChange]);
-  return /* @__PURE__ */ jsx34(Popper, { ...popperScope, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(Popper, { ...popperScope, children: /* @__PURE__ */ jsx35(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -37614,7 +37708,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -37632,7 +37726,7 @@ var MenuAnchor = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuAnchor2(props, forwardedRef) {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx34(PopperAnchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx35(PopperAnchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }, "MenuAnchor")
 );
 var PORTAL_NAME = "MenuPortal";
@@ -37642,7 +37736,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__ */ jsx34(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx34(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx34(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx35(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx35(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx35(Portal, { asChild: true, container, children }) }) });
 }, "MenuPortal");
 var CONTENT_NAME2 = "MenuContent";
 var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME2);
@@ -37652,7 +37746,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__ */ jsx34(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx34(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx34(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx34(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx34(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx35(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx35(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx35(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx35(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx35(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }, "MenuContent")
 );
 var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
@@ -37665,7 +37759,7 @@ var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       MenuContentImpl,
       {
         ...props,
@@ -37685,7 +37779,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__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     MenuContentImpl,
     {
       ...props,
@@ -37777,7 +37871,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -37806,7 +37900,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
         onPointerGraceIntentChange: React41.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx34(FocusScopeBranchProvider, { registry: isModal ? branchRegistry : null, children: /* @__PURE__ */ jsx34(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(FocusScopeBranchProvider, { registry: isModal ? branchRegistry : null, children: /* @__PURE__ */ jsx35(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx35(
           FocusScope,
           {
             asChild: true,
@@ -37817,7 +37911,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               DismissableLayer,
               {
                 asChild: true,
@@ -37827,7 +37921,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx34(
+                children: /* @__PURE__ */ jsx35(
                   RovingFocusGroup,
                   {
                     asChild: true,
@@ -37841,7 +37935,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx34(
+                    children: /* @__PURE__ */ jsx35(
                       PopperContent,
                       {
                         role: "menu",
@@ -37925,7 +38019,7 @@ var MenuItem = /* @__PURE__ */ React41.forwardRef(
         }
       }
     }, "handleSelect");
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       MenuItemImpl,
       {
         ...itemProps,
@@ -37971,13 +38065,13 @@ var MenuItemImpl = /* @__PURE__ */ React41.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx34(RovingFocusGroupItem, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(RovingFocusGroupItem, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx35(
           Primitive.div,
           {
             role: "menuitem",
@@ -38016,7 +38110,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__ */ jsx34(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx35(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -38047,7 +38141,7 @@ var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
 var MenuSeparator = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSeparator2(props, forwardedRef) {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       Primitive.div,
       {
         role: "separator",
@@ -38071,7 +38165,7 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx34(Popper, { ...popperScope, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(Popper, { ...popperScope, children: /* @__PURE__ */ jsx35(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -38079,7 +38173,7 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -38116,7 +38210,7 @@ var MenuSubTrigger = /* @__PURE__ */ React41.forwardRef(
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
     const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
-    return /* @__PURE__ */ jsx34(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx35(
       MenuItemImpl,
       {
         id: subContext.triggerId,
@@ -38209,7 +38303,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__ */ jsx34(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx34(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx34(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx35(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx35(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx35(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -38312,7 +38406,7 @@ function whenMouse(handler) {
 __name21(whenMouse, "whenMouse");
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var __defProp23 = Object.defineProperty;
 var __name22 = (target, value) => __defProp23(target, "name", { value, configurable: true });
 var DROPDOWN_MENU_NAME = "DropdownMenu";
@@ -38340,7 +38434,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -38351,7 +38445,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
       onOpenChange: setOpen,
       onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx35(Menu, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx36(Menu, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 }, "DropdownMenu");
@@ -38363,7 +38457,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const composedRefs = useComposedRefs(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx35(MenuAnchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(MenuAnchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx36(
       Primitive.button,
       {
         type: "button",
@@ -38395,7 +38489,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
 var DropdownMenuPortal = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx35(MenuPortal, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx36(MenuPortal, { ...menuScope, ...portalProps });
 }, "DropdownMenuPortal");
 var CONTENT_NAME3 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
@@ -38405,7 +38499,7 @@ var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React42.useRef(false);
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       MenuContent,
       {
         id: context.contentId,
@@ -38444,18 +38538,18 @@ var DropdownMenuItem = /* @__PURE__ */ React42.forwardRef(
   /* @__PURE__ */ __name22(function DropdownMenuItem2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx35(MenuItem, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx36(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__ */ jsx35(MenuCheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx36(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__ */ jsx35(MenuSeparator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx36(MenuSeparator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 }, "DropdownMenuSeparator"));
 var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -38466,17 +38560,17 @@ var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx35(MenuSub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx36(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__ */ jsx35(MenuSubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx36(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__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     MenuSubContent,
     {
       ...menuScope,
@@ -38499,7 +38593,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */
 
 // src/components/ViewportSubContent.tsx
 import { useLayoutEffect as useLayoutEffect5, useState as useState40 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
   const [content, setContent] = useState40(null);
   const [overlapWidth, setOverlapWidth] = useState40();
@@ -38530,7 +38624,7 @@ var ViewportSubContent = (props) => {
       window.removeEventListener("resize", update);
     };
   }, [content]);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     DropdownMenuSubContent,
     {
       ...props,
@@ -38563,8 +38657,8 @@ import { useState as useState42 } from "react";
 import { useState as useState41 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx37(
+import { jsx as jsx38 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx38(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -38576,10 +38670,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx37(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx37("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx38("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx37(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx38(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -38596,10 +38690,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx37(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx37("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx38("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var CheckMinusIcon = () => /* @__PURE__ */ jsx37(
+var CheckMinusIcon = () => /* @__PURE__ */ jsx38(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -38611,10 +38705,10 @@ var CheckMinusIcon = () => /* @__PURE__ */ jsx37(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx37("path", { d: "M5 12h14" })
+    children: /* @__PURE__ */ jsx38("path", { d: "M5 12h14" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx37(
+var DotIcon = () => /* @__PURE__ */ jsx38(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -38627,12 +38721,12 @@ var DotIcon = () => /* @__PURE__ */ jsx37(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx37("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx38("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs9 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -38695,7 +38789,7 @@ var AppearanceMenu = ({
   const assemblyStyles = { ...itemStyles };
   if (hoveredItem === "assembly") assemblyStyles.backgroundColor = "#404040";
   return /* @__PURE__ */ jsxs9(Fragment10, { children: [
-    /* @__PURE__ */ jsx38(DropdownMenuSeparator, { style: separatorStyles }),
+    /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles }),
     /* @__PURE__ */ jsxs9(DropdownMenuSub, { onOpenChange: setAppearanceSubOpen, children: [
       /* @__PURE__ */ jsxs9(
         DropdownMenuSubTrigger,
@@ -38709,8 +38803,8 @@ var AppearanceMenu = ({
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx38("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx39(
               "div",
               {
                 style: {
@@ -38719,13 +38813,13 @@ var AppearanceMenu = ({
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx38(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx39(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx38(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsx39(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs9(
         ViewportSubContent,
         {
           style: { ...contentStyles, marginLeft: -2 },
@@ -38748,8 +38842,8 @@ var AppearanceMenu = ({
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("darkBackground"),
                 children: [
-                  /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
+                  /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
                 ]
               }
             ),
@@ -38769,13 +38863,13 @@ var AppearanceMenu = ({
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("lighting"),
                 children: [
-                  /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
+                  /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
                 ]
               }
             ),
             showLayerControls && /* @__PURE__ */ jsxs9(Fragment10, { children: [
-              /* @__PURE__ */ jsx38(DropdownMenuSeparator, { style: separatorStyles }),
+              /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles }),
               /* @__PURE__ */ jsxs9(
                 DropdownMenuItem,
                 {
@@ -38792,8 +38886,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("boardBody"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                   ]
                 }
               ),
@@ -38813,8 +38907,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("topCopper"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                   ]
                 }
               ),
@@ -38834,8 +38928,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("bottomCopper"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                   ]
                 }
               ),
@@ -38855,8 +38949,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("keepout"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
                   ]
                 }
               ),
@@ -38879,8 +38973,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("topSilkscreen"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                   ]
                 }
               ),
@@ -38903,8 +38997,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                   ]
                 }
               ),
@@ -38924,8 +39018,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("topMask"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
                   ]
                 }
               ),
@@ -38945,8 +39039,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("bottomMask"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
                   ]
                 }
               ),
@@ -38966,8 +39060,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("pcbNotes"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
                   ]
                 }
               ),
@@ -38987,8 +39081,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("smtModels"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
                   ]
                 }
               ),
@@ -39011,12 +39105,12 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("throughHoleModels"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx38(DropdownMenuSeparator, { style: separatorStyles }),
+              /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles }),
               /* @__PURE__ */ jsxs9(
                 DropdownMenuItem,
                 {
@@ -39038,10 +39132,10 @@ var AppearanceMenu = ({
                   title: `Enclosure: ${visibility.enclosure}`,
                   children: [
                     /* @__PURE__ */ jsxs9("span", { style: iconContainerStyles, children: [
-                      visibility.enclosure === "opaque" && /* @__PURE__ */ jsx38(CheckIcon, {}),
-                      visibility.enclosure === "translucent" && /* @__PURE__ */ jsx38(CheckMinusIcon, {})
+                      visibility.enclosure === "opaque" && /* @__PURE__ */ jsx39(CheckIcon, {}),
+                      visibility.enclosure === "translucent" && /* @__PURE__ */ jsx39(CheckMinusIcon, {})
                     ] }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
                   ]
                 }
               ),
@@ -39058,8 +39152,8 @@ var AppearanceMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("assembly"),
                   children: [
-                    /* @__PURE__ */ jsx38("span", { style: iconContainerStyles, children: visibility.assembly && /* @__PURE__ */ jsx38(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx38("span", { style: { display: "flex", alignItems: "center" }, children: "Assembly" })
+                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles, children: visibility.assembly && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Assembly" })
                   ]
                 }
               )
@@ -39072,7 +39166,7 @@ var AppearanceMenu = ({
 };
 
 // src/components/ContextMenu.tsx
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs10 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -39159,12 +39253,14 @@ var ContextMenu = ({
   onReferenceObjectSelect = () => {
   },
   onViewSchematicComponent,
-  componentName,
-  onHideComponent,
-  onUnhideAllComponents,
+  objectName,
+  onHideObject,
+  onIsolateObject,
+  onUnhideAll,
   onSectionView,
   onExplosionView,
   explosionAvailable = false,
+  downloadModelName,
   onDownloadGltf,
   onOpenKeyboardShortcuts
 }) => {
@@ -39174,7 +39270,7 @@ var ContextMenu = ({
   const [advancedSubOpen, setAdvancedSubOpen] = useState42(false);
   const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState42(false);
   const [hoveredItem, setHoveredItem] = useState42(null);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       ref: menuRef,
@@ -39186,8 +39282,8 @@ var ContextMenu = ({
         height: 0
       },
       children: /* @__PURE__ */ jsxs10(DropdownMenu, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx39(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx39("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx39(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsx40(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx40("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx40(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
           DropdownMenuContent,
           {
             style: contentStyles2,
@@ -39196,7 +39292,7 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              onHideComponent && /* @__PURE__ */ jsx39(
+              onHideObject && /* @__PURE__ */ jsx40(
                 DropdownMenuItem,
                 {
                   style: {
@@ -39204,13 +39300,27 @@ var ContextMenu = ({
                     ...itemPaddingStyles2,
                     backgroundColor: hoveredItem === "hide" ? "#404040" : "transparent"
                   },
-                  onSelect: onHideComponent,
+                  onSelect: onHideObject,
                   onMouseEnter: () => setHoveredItem("hide"),
                   onMouseLeave: () => setHoveredItem(null),
-                  children: `Hide "${componentName}"`
+                  children: `Hide "${objectName}"`
+                }
+              ),
+              onIsolateObject && /* @__PURE__ */ jsx40(
+                DropdownMenuItem,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "isolate" ? "#404040" : "transparent"
+                  },
+                  onSelect: onIsolateObject,
+                  onMouseEnter: () => setHoveredItem("isolate"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  children: `Isolate "${objectName}"`
                 }
               ),
-              onViewSchematicComponent && /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39(
+              onViewSchematicComponent && /* @__PURE__ */ jsx40(Fragment11, { children: /* @__PURE__ */ jsx40(
                 DropdownMenuItem,
                 {
                   style: {
@@ -39224,7 +39334,7 @@ var ContextMenu = ({
                   children: "Show on schematic"
                 }
               ) }),
-              onUnhideAllComponents && /* @__PURE__ */ jsx39(
+              onUnhideAll && /* @__PURE__ */ jsx40(
                 DropdownMenuItem,
                 {
                   style: {
@@ -39232,13 +39342,13 @@ var ContextMenu = ({
                     ...itemPaddingStyles2,
                     backgroundColor: hoveredItem === "unhide" ? "#404040" : "transparent"
                   },
-                  onSelect: onUnhideAllComponents,
+                  onSelect: onUnhideAll,
                   onMouseEnter: () => setHoveredItem("unhide"),
                   onMouseLeave: () => setHoveredItem(null),
-                  children: "Unhide All Components"
+                  children: "Unhide All"
                 }
               ),
-              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 }),
+              (onViewSchematicComponent || onHideObject || onIsolateObject || onUnhideAll) && /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs10(DropdownMenuSub, { onOpenChange: setCameraSubOpen, children: [
                 /* @__PURE__ */ jsxs10(
                   DropdownMenuSubTrigger,
@@ -39252,7 +39362,7 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx39(
+                      /* @__PURE__ */ jsx40(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
@@ -39269,15 +39379,15 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx39("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx39(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx40("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx40(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx39(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
+                /* @__PURE__ */ jsx40(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -39296,13 +39406,13 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem(option),
                           children: [
-                            /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx39(DotIcon, {}) }),
-                            /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                            /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx40(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: option })
                           ]
                         },
                         option
                       )),
-                      /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 }),
+                      /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
                       /* @__PURE__ */ jsxs10(
                         DropdownMenuItem,
                         {
@@ -39315,8 +39425,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem("autorotate"),
                           children: [
-                            /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
-                            /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                            /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx40(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
                           ]
                         }
                       ),
@@ -39337,8 +39447,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem("cameratype"),
                           children: [
-                            /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
-                            /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                            /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx40(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                           ]
                         }
                       )
@@ -39359,14 +39469,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("reference-object"),
                     children: [
-                      /* @__PURE__ */ jsx39(
+                      /* @__PURE__ */ jsx40(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Show Reference Object"
                         }
                       ),
-                      /* @__PURE__ */ jsx39(
+                      /* @__PURE__ */ jsx40(
                         "div",
                         {
                           style: {
@@ -39375,13 +39485,13 @@ var ContextMenu = ({
                             gap: 6,
                             marginLeft: "auto"
                           },
-                          children: /* @__PURE__ */ jsx39(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
+                          children: /* @__PURE__ */ jsx40(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx39(DropdownMenuPortal, { children: /* @__PURE__ */ jsx39(
+                /* @__PURE__ */ jsx40(DropdownMenuPortal, { children: /* @__PURE__ */ jsx40(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -39405,8 +39515,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem(optionKey),
                           children: [
-                            /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx39(DotIcon, {}) }),
-                            /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
+                            /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx40(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
                           ]
                         },
                         optionKey
@@ -39427,8 +39537,8 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("fold"),
                   onMouseLeave: () => setHoveredItem(null),
                   children: [
-                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx39("span", { children: "Fold PCBs" })
+                    /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx40(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx40("span", { children: "Fold PCBs" })
                   ]
                 }
               ),
@@ -39448,20 +39558,20 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("grid"),
                   children: [
-                    /* @__PURE__ */ jsx39("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx39(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
+                    /* @__PURE__ */ jsx40("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx40(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 AppearanceMenu,
                 {
                   hasAssembly,
                   showLayerControls: !preRendered
                 }
               ),
-              /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs10(
                 DropdownMenuItem,
                 {
                   style: {
@@ -39473,10 +39583,13 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx39("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: [
+                    /* @__PURE__ */ jsx40("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Download GLTF" }),
+                    downloadModelName && /* @__PURE__ */ jsx40("span", { style: { opacity: 0.55, fontSize: 13 }, children: downloadModelName })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
               (onSectionView || onExplosionView || !flexScene && !preRendered) && /* @__PURE__ */ jsxs10(Fragment11, { children: [
                 /* @__PURE__ */ jsxs10(DropdownMenuSub, { onOpenChange: setAdvancedSubOpen, children: [
                   /* @__PURE__ */ jsxs10(
@@ -39491,12 +39604,12 @@ var ContextMenu = ({
                       onMouseLeave: () => setHoveredItem(null),
                       onTouchStart: () => setHoveredItem("advanced"),
                       children: [
-                        /* @__PURE__ */ jsx39("span", { style: { flex: 1 }, children: "Advanced" }),
-                        /* @__PURE__ */ jsx39(ChevronRightIcon, { isOpen: advancedSubOpen })
+                        /* @__PURE__ */ jsx40("span", { style: { flex: 1 }, children: "Advanced" }),
+                        /* @__PURE__ */ jsx40(ChevronRightIcon, { isOpen: advancedSubOpen })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx39(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
+                  /* @__PURE__ */ jsx40(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(
                     ViewportSubContent,
                     {
                       style: { ...contentStyles2, marginLeft: -2 },
@@ -39524,7 +39637,7 @@ var ContextMenu = ({
                             ]
                           }
                         ),
-                        onExplosionView && /* @__PURE__ */ jsx39(
+                        onExplosionView && /* @__PURE__ */ jsx40(
                           DropdownMenuItem,
                           {
                             disabled: !explosionAvailable,
@@ -39540,7 +39653,7 @@ var ContextMenu = ({
                             children: "Exploded view\u2026"
                           }
                         ),
-                        onSectionView && /* @__PURE__ */ jsx39(
+                        onSectionView && /* @__PURE__ */ jsx40(
                           DropdownMenuItem,
                           {
                             style: {
@@ -39558,7 +39671,7 @@ var ContextMenu = ({
                     }
                   ) })
                 ] }),
-                /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 })
+                /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 })
               ] }),
               /* @__PURE__ */ jsxs10(
                 DropdownMenuItem,
@@ -39573,8 +39686,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx39("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         style: {
@@ -39588,8 +39701,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx39(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx40(
                 "div",
                 {
                   style: {
@@ -39627,10 +39740,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect54, useMemo as useMemo40, useRef as useRef28, useState as useState44 } from "react";
+import { useEffect as useEffect55, useMemo as useMemo41, useRef as useRef28, useState as useState44 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect53, useMemo as useMemo39, useRef as useRef27, useState as useState43 } from "react";
+import { useEffect as useEffect54, useMemo as useMemo40, useRef as useRef27, useState as useState43 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -39754,14 +39867,14 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef27(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo39(
+  const normalizedMetadata = useMemo40(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect53(() => {
+  useEffect54(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -39777,7 +39890,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState43(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect53(() => subscribeToRegistry(setEntries), []);
+  useEffect54(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -39786,7 +39899,7 @@ var registerHotkeyViewer = (element) => {
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs11 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
@@ -39794,7 +39907,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState44("");
   const inputRef = useRef28(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect54(() => {
+  useEffect55(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -39805,14 +39918,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo40(() => {
+  const filteredHotkeys = useMemo41(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -39825,7 +39938,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       role: "dialog",
@@ -39865,7 +39978,7 @@ var KeyboardShortcutsDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx40(
+                    /* @__PURE__ */ jsx41(
                       "h2",
                       {
                         style: {
@@ -39877,7 +39990,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx40(
+                    /* @__PURE__ */ jsx41(
                       "button",
                       {
                         type: "button",
@@ -39893,7 +40006,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx40(
+                  /* @__PURE__ */ jsx41(
                     "input",
                     {
                       ref: inputRef,
@@ -39916,7 +40029,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx40("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsx41("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs11(
               "table",
               {
                 style: {
@@ -39925,11 +40038,11 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx40("thead", { children: /* @__PURE__ */ jsxs11("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx40("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx40("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsxs11("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx41("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx41("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx40("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40(
+                  /* @__PURE__ */ jsx41("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41(
                     "td",
                     {
                       colSpan: 2,
@@ -39941,7 +40054,7 @@ var KeyboardShortcutsDialog = ({
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx40("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx40(
+                        /* @__PURE__ */ jsx41("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx41(
                           "span",
                           {
                             style: {
@@ -39959,7 +40072,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx40("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx41("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -39976,7 +40089,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/contexts/ToastContext.tsx
 import { Toaster, toast as hotToast } from "react-hot-toast";
-import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs12 } from "react/jsx-runtime";
 var useToast = () => {
   return {
     showToast: (message, duration = 2e3) => {
@@ -39989,7 +40102,7 @@ var ToastProvider = ({
 }) => {
   return /* @__PURE__ */ jsxs12(Fragment12, { children: [
     children,
-    /* @__PURE__ */ jsx41(Toaster, { position: "bottom-right" })
+    /* @__PURE__ */ jsx42(Toaster, { position: "bottom-right" })
   ] });
 };
 
@@ -40034,7 +40147,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState45, useCallback as useCallback23, useRef as useRef29, useEffect as useEffect55 } from "react";
+import { useState as useState45, useCallback as useCallback23, useRef as useRef29, useEffect as useEffect56 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
   const [menuVisible, setMenuVisible] = useState45(false);
   const [menuPos, setMenuPos] = useState45({
@@ -40151,7 +40264,7 @@ var useContextMenu = ({ containerRef, onOpen }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect55(() => {
+  useEffect56(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -40185,33 +40298,33 @@ var useContextMenu = ({ containerRef, onOpen }) => {
 };
 
 // src/sections/section-export.ts
-import * as THREE62 from "three";
+import * as THREE63 from "three";
 function createSectionExport(root, spec) {
   root.updateWorldMatrix(true, true);
   const output = root.clone(true);
   output.updateWorldMatrix(true, true);
   const plane = sectionPlane(spec);
   const hatch = createSectionHatch();
-  const capMaterial = new THREE62.MeshBasicMaterial({
+  const capMaterial = new THREE63.MeshBasicMaterial({
     map: hatch,
-    side: THREE62.DoubleSide
+    side: THREE63.DoubleSide
   });
   const ownedGeometries = [];
   const ownedMaterials = [capMaterial];
   output.traverse((object) => {
-    if (!(object instanceof THREE62.Mesh)) return;
+    if (!(object instanceof THREE63.Mesh)) return;
     const indexed = Boolean(object.geometry.index);
     const source = object.geometry.index ? object.geometry.toNonIndexed() : object.geometry;
     const p = source.getAttribute("position");
     if (!p) return;
     const worldPositions = new Float32Array(p.count * 3);
-    const world = new THREE62.Vector3();
+    const world = new THREE63.Vector3();
     for (let i = 0; i < p.count; i++)
       world.fromBufferAttribute(p, i).applyMatrix4(object.matrixWorld).toArray(worldPositions, i * 3);
     const attributes = Object.entries(source.attributes);
     const values = new Map(attributes.map(([name]) => [name, []]));
-    const geometry = new THREE62.BufferGeometry();
-    const point = (i) => new THREE62.Vector3().fromArray(worldPositions, i * 3);
+    const geometry = new THREE63.BufferGeometry();
+    const point = (i) => new THREE63.Vector3().fromArray(worldPositions, i * 3);
     for (let i = 0; i < p.count; i += 3) {
       let polygon2 = [
         [1, 0, 0],
@@ -40260,7 +40373,7 @@ function createSectionExport(root, spec) {
     for (const [name, attribute] of attributes)
       geometry.setAttribute(
         name,
-        new THREE62.Float32BufferAttribute(values.get(name), attribute.itemSize)
+        new THREE63.Float32BufferAttribute(values.get(name), attribute.itemSize)
       );
     if (geometry.getAttribute("normal")) geometry.normalizeNormals();
     ownedGeometries.push(geometry);
@@ -40274,18 +40387,18 @@ function createSectionExport(root, spec) {
     object.material = Array.isArray(object.material) ? object.material.map(cloneMaterial) : cloneMaterial(object.material);
     const { loops } = findSectionLoops({ positions: worldPositions, ...spec });
     const cap = buildSectionCap(loops, spec);
-    cap.applyMatrix4(new THREE62.Matrix4().copy(object.matrixWorld).invert());
+    cap.applyMatrix4(new THREE63.Matrix4().copy(object.matrixWorld).invert());
     ownedGeometries.push(cap);
     object.userData.sectionExportCap = cap;
     if (indexed) source.dispose();
   });
   const pending = [];
   output.traverse((object) => {
-    if (object instanceof THREE62.Mesh && object.userData.sectionExportCap)
+    if (object instanceof THREE63.Mesh && object.userData.sectionExportCap)
       pending.push(object);
   });
   for (const mesh of pending) {
-    mesh.add(new THREE62.Mesh(mesh.userData.sectionExportCap, capMaterial));
+    mesh.add(new THREE63.Mesh(mesh.userData.sectionExportCap, capMaterial));
     delete mesh.userData.sectionExportCap;
   }
   delete output.userData.sectionView;
@@ -40302,39 +40415,56 @@ function createSectionExport(root, spec) {
 // src/hooks/useGlobalDownloadGltf.ts
 import { useCallback as useCallback24 } from "react";
 import { GLTFExporter as GLTFExporter2 } from "three/examples/jsm/exporters/GLTFExporter.js";
+
+// src/utils/clone-model-for-export.ts
+var cloneModelForExport = (root, objectId) => {
+  const source = findModelObject(root, objectId);
+  if (!source) return;
+  source.updateWorldMatrix(true, true);
+  const output = source.clone(true);
+  source.matrixWorld.decompose(output.position, output.quaternion, output.scale);
+  return output;
+};
+
+// src/hooks/useGlobalDownloadGltf.ts
 var useGlobalDownloadGltf = () => {
-  return useCallback24(() => {
-    const root = window.__TSCIRCUIT_THREE_OBJECT;
-    if (!root) return;
-    const section = root.userData.sectionView;
-    const sectionExport = section ? createSectionExport(root, section) : void 0;
-    const exporter = new GLTFExporter2();
-    exporter.parse(
-      sectionExport?.root ?? root,
-      (gltf) => {
-        sectionExport?.dispose();
-        const blob = new Blob(
-          [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
-          { type: "model/gltf+json" }
-        );
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = "scene.gltf";
-        link.click();
-        URL.revokeObjectURL(url);
-      },
-      (err) => {
-        sectionExport?.dispose();
-        console.error("Failed to export GLTF", err);
-      }
-    );
-  }, []);
+  return useCallback24(
+    (model, root = window.__TSCIRCUIT_THREE_OBJECT) => {
+      if (!root) return;
+      const target = model ? cloneModelForExport(root, model.objectId) : root;
+      if (!target) return;
+      if (model) target.name = model.name;
+      const section = root.userData.sectionView;
+      const sectionExport = section ? createSectionExport(target, section) : void 0;
+      const exporter = new GLTFExporter2();
+      exporter.parse(
+        sectionExport?.root ?? target,
+        (gltf) => {
+          sectionExport?.dispose();
+          const blob = new Blob(
+            [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
+            { type: "model/gltf+json" }
+          );
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = model ? `${model.name}.gltf` : "scene.gltf";
+          link.click();
+          URL.revokeObjectURL(url);
+        },
+        (err) => {
+          sectionExport?.dispose();
+          console.error("Failed to export GLTF", err);
+        }
+      );
+    },
+    []
+  );
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx42, jsxs as jsxs13 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE63.Vector3(0, 0, 0);
+import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
+var DEFAULT_TARGET = new THREE64.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -40364,12 +40494,12 @@ var CadViewerInner = (props) => {
   const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
   const circuitJsonKey = glbSource === void 0 ? JSON.stringify(circuitJson) : void 0;
   const circuitKey = glbSource ?? circuitJsonKey;
-  const { hiddenCadComponentIds, hideComponent, unhideAllComponents } = useHiddenCadComponents(circuitKey);
+  const { objectVisibility, hideObject, isolateObject, unhideAllObjects } = useObjectVisibility(circuitKey);
   const resolvedProps = {
     ...props,
     circuitJson,
     children: void 0,
-    hiddenCadComponentIds
+    objectVisibility
   };
   const [engine, setEngine] = useState46(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
@@ -40394,11 +40524,14 @@ var CadViewerInner = (props) => {
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext13(SchematicNavigationContext);
   const [selectedComponent, setSelectedComponent] = useState46();
-  const [selectedCadComponent, setSelectedCadComponent] = useState46();
+  const [selectedObject, setSelectedObject] = useState46();
+  const [selectedModel, setSelectedModel] = useState46();
   const handleMenuOpen = useCallback25(
     (position) => {
-      setSelectedCadComponent(
-        pickCadComponent(sceneRef.current, position, circuitJson)
+      const picked = pickSceneObject(sceneRef.current, position, circuitJson);
+      setSelectedObject(picked);
+      setSelectedModel(
+        picked && sceneRef.current && findModelObject(sceneRef.current.rootObject, picked.objectId) ? picked : void 0
       );
       setSelectedComponent(
         props.onViewSchematicComponent ? pickSchematicComponent(sceneRef.current, position, circuitJson) : void 0
@@ -40511,28 +40644,28 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect56(() => {
+  useEffect57(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect56(() => {
+  useEffect57(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect56(() => {
+  useEffect57(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect56(() => {
+  useEffect57(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect56(() => {
+  useEffect57(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? circuitJsonKey : void 0;
-  return /* @__PURE__ */ jsx42(AssemblyExplosionContext.Provider, { value: explosion, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx43(AssemblyExplosionContext.Provider, { value: explosion, children: /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: containerRef,
@@ -40548,7 +40681,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        explosionPanelOpen && /* @__PURE__ */ jsx42(
+        explosionPanelOpen && /* @__PURE__ */ jsx43(
           AssemblyExplosionControl,
           {
             stages: explosion.stages,
@@ -40561,18 +40694,18 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        glbSource !== void 0 ? /* @__PURE__ */ jsx42(
+        glbSource !== void 0 ? /* @__PURE__ */ jsx43(
           CadViewerGlb,
           {
             source: glbSource,
-            hiddenCadComponentIds,
+            objectVisibility,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             clickToInteractEnabled: props.clickToInteractEnabled,
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : hasFlexGeometry ? /* @__PURE__ */ jsx42(
+        ) : hasFlexGeometry ? /* @__PURE__ */ jsx43(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -40582,7 +40715,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : engine === "jscad" ? /* @__PURE__ */ jsx42(
+        ) : engine === "jscad" ? /* @__PURE__ */ jsx43(
           CadViewerJscad,
           {
             ...resolvedProps,
@@ -40592,7 +40725,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : /* @__PURE__ */ jsx42(
+        ) : /* @__PURE__ */ jsx43(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -40603,18 +40736,22 @@ var CadViewerInner = (props) => {
             referenceObject
           }
         ),
-        /* @__PURE__ */ jsx42(SectionPanel, {}),
-        menuVisible && /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(SectionPanel, {}),
+        menuVisible && /* @__PURE__ */ jsx43(
           ContextMenu,
           {
             hasAssembly,
-            componentName: selectedCadComponent?.componentName,
-            onHideComponent: selectedCadComponent ? () => {
-              hideComponent(selectedCadComponent.cad_component_id);
+            objectName: selectedObject?.name,
+            onHideObject: selectedObject ? () => {
+              hideObject(selectedObject.objectId);
+              closeMenu();
+            } : void 0,
+            onIsolateObject: selectedObject && objectVisibility.isolatedId !== selectedObject.objectId ? () => {
+              isolateObject(selectedObject.objectId);
               closeMenu();
             } : void 0,
-            onUnhideAllComponents: hiddenCadComponentIds.size > 0 ? () => {
-              unhideAllComponents();
+            onUnhideAll: hasHiddenObjects(objectVisibility) ? () => {
+              unhideAllObjects();
               closeMenu();
             } : void 0,
             onViewSchematicComponent: selectedComponent && props.onViewSchematicComponent ? () => {
@@ -40673,8 +40810,9 @@ var CadViewerInner = (props) => {
               setCameraPreset("Custom");
               closeMenu();
             },
+            downloadModelName: selectedModel?.name,
             onDownloadGltf: () => {
-              downloadGltf();
+              downloadGltf(selectedModel, sceneRef.current?.rootObject);
               closeMenu();
             },
             onOpenKeyboardShortcuts: () => {
@@ -40683,7 +40821,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -40698,13 +40836,13 @@ var CadViewerInner = (props) => {
 var CadViewer = (props) => {
   configureRuntimeFont();
   const sceneRef = useRef30(null);
-  return /* @__PURE__ */ jsx42(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx43(
     CameraControllerProvider,
     {
       defaultTarget: DEFAULT_TARGET,
       initialCameraPosition: INITIAL_CAMERA_POSITION,
       initialCameraType: readStoredCameraType(),
-      children: /* @__PURE__ */ jsx42(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx42(AppearanceProvider, { children: /* @__PURE__ */ jsx42(ToastProvider, { children: /* @__PURE__ */ jsx42(SectionProvider, { children: /* @__PURE__ */ jsx42(CadViewerInner, { ...props }) }) }) }) })
+      children: /* @__PURE__ */ jsx43(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx43(AppearanceProvider, { children: /* @__PURE__ */ jsx43(ToastProvider, { children: /* @__PURE__ */ jsx43(SectionProvider, { children: /* @__PURE__ */ jsx43(CadViewerInner, { ...props }) }) }) }) })
     }
   ) });
 };
@@ -40712,11 +40850,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 THREE67 from "three";
+import * as THREE68 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE64 from "three";
+import * as THREE65 from "three";
 import { BufferGeometry as BufferGeometry9, Float32BufferAttribute as Float32BufferAttribute8 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry9();
@@ -40730,12 +40868,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE64.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE64.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE64.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE64.Vector3().crossVectors(
-        new THREE64.Vector3().subVectors(v2, v1),
-        new THREE64.Vector3().subVectors(v3, v1)
+      const v1 = new THREE65.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE65.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE65.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE65.Vector3().crossVectors(
+        new THREE65.Vector3().subVectors(v2, v1),
+        new THREE65.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -40763,10 +40901,10 @@ import {
   convertCSGToThreeGeom as convertCSGToThreeGeom3,
   getJscadModelForFootprint as getJscadModelForFootprint2
 } from "jscad-electronics/vanilla";
-import * as THREE66 from "three";
+import * as THREE67 from "three";
 
 // src/utils/load-model.ts
-import * as THREE65 from "three";
+import * as THREE66 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 STLLoader3 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -40774,12 +40912,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader3();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE65.MeshStandardMaterial({
+    const material = new THREE66.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE65.Mesh(geometry, material);
+    return new THREE66.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -40812,9 +40950,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE66.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE67.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -40828,13 +40966,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom3(jscadObject);
-      const material2 = new THREE66.MeshStandardMaterial({
+      const material2 = new THREE67.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE66.DoubleSide
+        side: THREE67.DoubleSide
       });
-      const mesh2 = new THREE66.Mesh(threeGeom, material2);
+      const mesh2 = new THREE67.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -40844,9 +40982,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE66.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE67.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -40863,17 +41001,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE66.Color(geomInfo.color);
+      const color = new THREE67.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom3(geomWithColor);
-      const material2 = new THREE66.MeshStandardMaterial({
+      const material2 = new THREE67.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE66.DoubleSide
+        side: THREE67.DoubleSide
       });
-      const mesh2 = new THREE66.Mesh(threeGeom, material2);
+      const mesh2 = new THREE67.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -40883,22 +41021,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE66.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE66.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE67.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE67.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE66.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE66.MeshStandardMaterial({
+  const geometry = new THREE67.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE67.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE66.Mesh(geometry, material);
+  const mesh = new THREE67.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -40919,11 +41057,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE67.Scene();
+  const scene = new THREE68.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE67.Color(backgroundColor), 1);
-  const camera = new THREE67.OrthographicCamera();
+  renderer.setClearColor(new THREE68.Color(backgroundColor), 1);
+  const camera = new THREE68.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -40937,11 +41075,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 THREE67.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
+  camera.lookAt(new THREE68.Vector3(lookAt2.x, lookAt2.y, lookAt2.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE67.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE68.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE67.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE68.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -40973,28 +41111,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: edgeColor,
-        side: THREE67.DoubleSide
+        side: THREE68.DoubleSide
       });
-      const mesh = new THREE67.Mesh(geometry, material);
+      const mesh = new THREE68.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE67.Color(8947848);
-  const gridHelper = new THREE67.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE68.Color(8947848);
+  const gridHelper = new THREE68.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials2 = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials2) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE67.LineBasicMaterial) {
+    if (mat instanceof THREE68.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE67.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE67.Vector3());
-  const size4 = box.getSize(new THREE67.Vector3());
+  const box = new THREE68.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE68.Vector3());
+  const size4 = box.getSize(new THREE68.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -41014,10 +41152,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 import {
   GLTFExporter as GLTFExporter3
 } from "three/examples/jsm/exporters/GLTFExporter.js";
-import { useEffect as useEffect57, useState as useState47, useMemo as useMemo41, useCallback as useCallback26 } from "react";
+import { useEffect as useEffect58, useState as useState47, useMemo as useMemo42, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo41(() => document.createElement("a"), []);
+  const link = useMemo42(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -41027,7 +41165,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect57(
+  useEffect58(
     () => () => {
       link.remove();
       instance = null;
@@ -41048,11 +41186,11 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect57(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect58(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo41(() => new GLTFExporter3(), []);
+  const exporter = useMemo42(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(