@tscircuit/3d-viewer 0.0.417 → 0.0.419

package/dist/index.js

@@ -14228,11 +14228,11 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState18, useCallback as useCallback9, useRef as useRef9, useEffect as useEffect24 } from "react";
+import { useState as useState19, useCallback as useCallback11, useRef as useRef9, useEffect as useEffect24 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo18 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo19 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su } from "@tscircuit/circuit-json-util";
@@ -26641,17 +26641,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import {
-  forwardRef as forwardRef2,
-  useMemo as useMemo14,
-  useState as useState8
-} from "react";
-import * as THREE13 from "three";
+import { forwardRef as forwardRef2, useMemo as useMemo15, useState as useState8 } from "react";
+import * as THREE14 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.416",
+  version: "0.0.418",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -27052,13 +27048,21 @@ var OrbitControls = ({
   zoomSpeed,
   enableDamping,
   dampingFactor,
-  target
+  target,
+  onControlsChange
 }) => {
   const { camera, renderer } = useThree();
   const controls = useMemo11(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
+  useEffect13(() => {
+    if (!onControlsChange) return;
+    onControlsChange(controls ?? null);
+    return () => {
+      onControlsChange(null);
+    };
+  }, [controls, onControlsChange]);
   useEffect13(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
@@ -27222,6 +27226,272 @@ var Lights = () => {
   return null;
 };
 
+// src/hooks/useCameraController.ts
+import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo14, useRef as useRef5 } from "react";
+import * as THREE13 from "three";
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var CameraAnimator = ({
+  defaultTarget,
+  controlsRef,
+  onReady
+}) => {
+  const { camera } = useThree();
+  const animationRef = useRef5(null);
+  const tempQuaternion = useRef5(new THREE13.Quaternion());
+  const tempTarget = useRef5(new THREE13.Vector3());
+  const tempUp = useRef5(new THREE13.Vector3());
+  const tempRoll = useRef5(new THREE13.Quaternion());
+  const tempRollTarget = useRef5(new THREE13.Quaternion());
+  const baseOrientationHelper = useRef5(new THREE13.Object3D());
+  const orientationHelper = useRef5(new THREE13.Object3D());
+  const animateTo = useCallback5(
+    ({ position, target, up, durationMs = 600 }) => {
+      if (!camera) return;
+      const currentTarget = controlsRef.current?.target ?? defaultTarget;
+      const toPosition = new THREE13.Vector3(
+        position[0],
+        position[1],
+        position[2]
+      );
+      const resolvedTarget = target ? new THREE13.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
+      const resolvedUp = new THREE13.Vector3(...up ?? [0, 0, 1]).normalize();
+      const toOrientationHelper = orientationHelper.current;
+      toOrientationHelper.position.copy(toPosition);
+      toOrientationHelper.up.copy(resolvedUp);
+      toOrientationHelper.lookAt(resolvedTarget);
+      const toQuaternion = toOrientationHelper.quaternion.clone();
+      const fromQuaternion = camera.quaternion.clone();
+      const fromPosition = camera.position.clone();
+      const fromTarget = currentTarget.clone();
+      const baseHelper = baseOrientationHelper.current;
+      baseHelper.up.set(0, 0, 1);
+      baseHelper.position.copy(fromPosition);
+      baseHelper.lookAt(fromTarget);
+      const baseFromQuaternion = baseHelper.quaternion.clone();
+      baseHelper.up.set(0, 0, 1);
+      baseHelper.position.copy(toPosition);
+      baseHelper.lookAt(resolvedTarget);
+      const baseToQuaternion = baseHelper.quaternion.clone();
+      const rollFrom = baseFromQuaternion.clone().invert().multiply(fromQuaternion).normalize();
+      const rollTo = baseToQuaternion.clone().invert().multiply(toQuaternion).normalize();
+      animationRef.current = {
+        fromPosition,
+        toPosition,
+        fromTarget,
+        toTarget: resolvedTarget,
+        toQuaternion,
+        rollFrom,
+        rollTo,
+        startTime: performance.now(),
+        duration: durationMs
+      };
+    },
+    [camera, controlsRef, defaultTarget]
+  );
+  useEffect16(() => {
+    if (!onReady || !camera) return;
+    onReady({ animateTo });
+    return () => {
+      onReady(null);
+    };
+  }, [animateTo, camera, onReady]);
+  useFrame(() => {
+    if (!camera || !animationRef.current) return;
+    const {
+      fromPosition,
+      toPosition,
+      fromTarget,
+      toTarget,
+      toQuaternion,
+      rollFrom,
+      rollTo,
+      startTime,
+      duration
+    } = animationRef.current;
+    const elapsed = performance.now() - startTime;
+    const progress = duration <= 0 ? 1 : Math.min(elapsed / duration, 1);
+    const eased = easeInOutCubic(progress);
+    camera.position.lerpVectors(fromPosition, toPosition, eased);
+    const nextTarget = tempTarget.current;
+    nextTarget.copy(fromTarget).lerp(toTarget, eased);
+    const baseHelper = baseOrientationHelper.current;
+    baseHelper.up.set(0, 0, 1);
+    baseHelper.position.copy(camera.position);
+    baseHelper.lookAt(nextTarget);
+    const baseQuaternion = tempQuaternion.current;
+    baseQuaternion.copy(baseHelper.quaternion);
+    const interpolatedRoll = tempRoll.current;
+    interpolatedRoll.copy(rollFrom);
+    const rollTarget = tempRollTarget.current;
+    rollTarget.copy(rollTo);
+    if (rollFrom.dot(rollTo) < 0) {
+      rollTarget.x *= -1;
+      rollTarget.y *= -1;
+      rollTarget.z *= -1;
+      rollTarget.w *= -1;
+    }
+    rollTarget.normalize();
+    interpolatedRoll.slerp(rollTarget, eased);
+    camera.quaternion.copy(baseQuaternion).multiply(interpolatedRoll).normalize();
+    const upVector = tempUp.current;
+    upVector.set(0, 1, 0).applyQuaternion(camera.quaternion).normalize();
+    camera.up.copy(upVector);
+    controlsRef.current?.target.copy(nextTarget);
+    camera.updateMatrixWorld();
+    controlsRef.current?.update();
+    if (progress >= 1) {
+      camera.position.copy(toPosition);
+      camera.quaternion.copy(toQuaternion);
+      camera.up.set(0, 0, 1);
+      camera.updateMatrixWorld();
+      controlsRef.current?.target.copy(toTarget);
+      controlsRef.current?.update();
+      animationRef.current = null;
+    }
+  });
+  return null;
+};
+var useCameraController = ({
+  defaultTarget,
+  initialCameraPosition,
+  onCameraControllerReady
+}) => {
+  const controlsRef = useRef5(null);
+  const baseDistance = useMemo14(() => {
+    const [x, y, z126] = initialCameraPosition ?? [5, 5, 5];
+    const distance2 = Math.hypot(
+      x - defaultTarget.x,
+      y - defaultTarget.y,
+      z126 - defaultTarget.z
+    );
+    return distance2 > 0 ? distance2 : 5;
+  }, [initialCameraPosition, defaultTarget]);
+  const getPresetConfig = useCallback5(
+    (preset) => {
+      const targetVector = [
+        defaultTarget.x,
+        defaultTarget.y,
+        defaultTarget.z
+      ];
+      const distance2 = baseDistance;
+      const heightOffset = distance2 * 0.3;
+      switch (preset) {
+        case "Top Centered": {
+          const angledOffset = distance2 / Math.sqrt(2);
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y - angledOffset,
+              defaultTarget.z + angledOffset
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        }
+        case "Top Down":
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y,
+              defaultTarget.z + distance2
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Top Left Corner":
+          return {
+            position: [
+              defaultTarget.x - distance2 * 0.6,
+              defaultTarget.y - distance2 * 0.6,
+              defaultTarget.z + distance2 * 0.6
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Top Right Corner":
+          return {
+            position: [
+              defaultTarget.x + distance2 * 0.6,
+              defaultTarget.y - distance2 * 0.6,
+              defaultTarget.z + distance2 * 0.6
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Left Sideview":
+          return {
+            position: [
+              defaultTarget.x - distance2,
+              defaultTarget.y,
+              defaultTarget.z + heightOffset
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Right Sideview":
+          return {
+            position: [
+              defaultTarget.x + distance2,
+              defaultTarget.y,
+              defaultTarget.z + heightOffset
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Front":
+          return {
+            position: [
+              defaultTarget.x,
+              defaultTarget.y - distance2,
+              defaultTarget.z + heightOffset
+            ],
+            target: targetVector,
+            up: [0, 0, 1]
+          };
+        case "Custom":
+        default:
+          return null;
+      }
+    },
+    [baseDistance, defaultTarget]
+  );
+  const handleControllerReady = useCallback5(
+    (controller) => {
+      if (!onCameraControllerReady) return;
+      if (!controller) {
+        onCameraControllerReady(null);
+        return;
+      }
+      const enhancedController = {
+        animateTo: controller.animateTo,
+        animateToPreset: (preset) => {
+          if (preset === "Custom") return;
+          const config = getPresetConfig(preset);
+          if (!config) return;
+          controller.animateTo(config);
+        }
+      };
+      onCameraControllerReady(enhancedController);
+    },
+    [getPresetConfig, onCameraControllerReady]
+  );
+  const handleControlsChange = useCallback5(
+    (controls) => {
+      controlsRef.current = controls;
+    },
+    []
+  );
+  const cameraAnimatorProps = useMemo14(
+    () => ({
+      defaultTarget,
+      controlsRef,
+      onReady: handleControllerReady
+    }),
+    [defaultTarget, handleControllerReady]
+  );
+  return { cameraAnimatorProps, handleControlsChange };
+};
+
 // src/CadViewerContainer.tsx
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var RotationTracker = () => {
@@ -27241,12 +27511,13 @@ var CadViewerContainer = forwardRef2(
     clickToInteractEnabled = false,
     boardDimensions,
     boardCenter,
-    onUserInteraction
+    onUserInteraction,
+    onCameraControllerReady
   }, ref) => {
     const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
       !clickToInteractEnabled
     );
-    const gridSectionSize = useMemo14(() => {
+    const gridSectionSize = useMemo15(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
       const height10 = boardDimensions.height ?? 0;
@@ -27254,10 +27525,21 @@ var CadViewerContainer = forwardRef2(
       const desired = largest * 1.5;
       return desired > 10 ? desired : 10;
     }, [boardDimensions]);
-    const orbitTarget = useMemo14(() => {
+    const orbitTarget = useMemo15(() => {
       if (!boardCenter) return void 0;
       return [boardCenter.x, boardCenter.y, 0];
     }, [boardCenter]);
+    const defaultTarget = useMemo15(() => {
+      if (orbitTarget) {
+        return new THREE14.Vector3(orbitTarget[0], orbitTarget[1], orbitTarget[2]);
+      }
+      return new THREE14.Vector3(0, 0, 0);
+    }, [orbitTarget]);
+    const { cameraAnimatorProps, handleControlsChange } = useCameraController({
+      defaultTarget,
+      initialCameraPosition,
+      onCameraControllerReady
+    });
     return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
       /* @__PURE__ */ jsx12(
         "div",
@@ -27286,9 +27568,10 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE13.Vector3(0, 0, 1) },
+          scene: { up: new THREE14.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           children: [
+            /* @__PURE__ */ jsx12(CameraAnimator, { ...cameraAnimatorProps }),
             /* @__PURE__ */ jsx12(RotationTracker, {}),
             isInteractionEnabled && /* @__PURE__ */ jsx12(
               OrbitControls,
@@ -27301,7 +27584,8 @@ var CadViewerContainer = forwardRef2(
                 zoomSpeed: 0.5,
                 enableDamping: true,
                 dampingFactor: 0.1,
-                target: orbitTarget
+                target: orbitTarget,
+                onControlsChange: handleControlsChange
               }
             ),
             /* @__PURE__ */ jsx12(Lights, {}),
@@ -27379,9 +27663,9 @@ var CadViewerContainer = forwardRef2(
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo15(() => {
+  return useMemo16(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -29089,8 +29373,8 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState11, useCallback as useCallback5, useEffect as useEffect19, useMemo as useMemo16 } from "react";
-import * as THREE14 from "three";
+import { useState as useState11, useCallback as useCallback6, useEffect as useEffect19, useMemo as useMemo17 } from "react";
+import * as THREE15 from "three";
 import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -29099,7 +29383,7 @@ var Error3d = ({
   const { rootObject } = useThree();
   const [isHovered, setIsHovered] = useState11(false);
   const [hoverPosition, setHoverPosition] = useState11(null);
-  const handleHover = useCallback5((e) => {
+  const handleHover = useCallback6((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
       setHoverPosition(e.mousePosition);
@@ -29108,11 +29392,11 @@ var Error3d = ({
       setHoverPosition(null);
     }
   }, []);
-  const handleUnhover = useCallback5(() => {
+  const handleUnhover = useCallback6(() => {
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo16(() => {
+  const position = useMemo17(() => {
     if (cad_component2?.position) {
       const p = [
         cad_component2.position.x,
@@ -29123,8 +29407,8 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component2]);
-  const group = useMemo16(() => {
-    const g = new THREE14.Group();
+  const group = useMemo17(() => {
+    const g = new THREE15.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -29183,10 +29467,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo16(() => {
-    const m = new THREE14.Mesh(
-      new THREE14.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE14.MeshStandardMaterial({
+  const mesh = useMemo17(() => {
+    const m = new THREE15.Mesh(
+      new THREE15.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE15.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -29207,8 +29491,8 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/STLModel.tsx
-import { useState as useState12, useEffect as useEffect20, useMemo as useMemo17 } from "react";
-import * as THREE15 from "three";
+import { useState as useState12, useEffect as useEffect20, useMemo as useMemo18 } from "react";
+import * as THREE16 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -29237,14 +29521,14 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo17(() => {
+  const mesh = useMemo18(() => {
     if (!geom) return null;
-    const material = new THREE15.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE15.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE16.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE16.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity
     });
-    return new THREE15.Mesh(geom, material);
+    return new THREE16.Mesh(geom, material);
   }, [geom, color, opacity]);
   useEffect20(() => {
     if (!rootObject || !mesh) return;
@@ -29316,15 +29600,16 @@ var CadViewerJscad = forwardRef3(
     children,
     autoRotateDisabled,
     clickToInteractEnabled,
-    onUserInteraction
+    onUserInteraction,
+    onCameraControllerReady
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo18(() => {
+    const internalCircuitJson = useMemo19(() => {
       const cj = soup ?? circuitJson;
       return cj ?? childrenSoup;
     }, [soup, circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo18(() => {
+    const initialCameraPosition = useMemo19(() => {
       if (!internalCircuitJson) return [5, 5, 5];
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29343,7 +29628,7 @@ var CadViewerJscad = forwardRef3(
         return [5, 5, 5];
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo18(() => {
+    const boardDimensions = useMemo19(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29354,7 +29639,7 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo18(() => {
+    const boardCenter = useMemo19(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29377,6 +29662,7 @@ var CadViewerJscad = forwardRef3(
         boardDimensions,
         boardCenter,
         onUserInteraction,
+        onCameraControllerReady,
         children: [
           boardStls.map(({ stlData, color, layerType }, index) => /* @__PURE__ */ jsx15(
             VisibleSTLModel,
@@ -29411,22 +29697,22 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect22, useMemo as useMemo20, useState as useState15 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo21, useState as useState15 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState14, useEffect as useEffect21, useMemo as useMemo19, useRef as useRef7 } from "react";
+import { useState as useState14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE16 from "three";
+import * as THREE17 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE16.BufferGeometry();
+  const geometry = new THREE17.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE16.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE17.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE16.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE17.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];
@@ -29440,7 +29726,7 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
 }
 
 // src/utils/trace-texture.ts
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point2) {
   return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
@@ -29523,10 +29809,10 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE17.CanvasTexture(canvas);
+  const texture = new THREE18.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE17.LinearMipmapLinearFilter;
-  texture.magFilter = THREE17.LinearFilter;
+  texture.minFilter = THREE18.LinearMipmapLinearFilter;
+  texture.magFilter = THREE18.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -29534,7 +29820,7 @@ function createTraceTextureForLayer({
 
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 import { su as su6 } from "@tscircuit/circuit-json-util";
 function createSilkscreenTextureForLayer({
   layer,
@@ -29663,10 +29949,10 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE18.CanvasTexture(canvas);
+  const texture = new THREE19.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE18.LinearMipmapLinearFilter;
-  texture.magFilter = THREE18.LinearFilter;
+  texture.minFilter = THREE19.LinearMipmapLinearFilter;
+  texture.magFilter = THREE19.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -29850,8 +30136,8 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import * as THREE19 from "three";
-var COPPER_COLOR = new THREE19.Color(...colors.copper);
+import * as THREE20 from "three";
+var COPPER_COLOR = new THREE20.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
@@ -29875,8 +30161,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         Manifold,
         x: ph.x,
         y: ph.y,
-        outerDiameter: ph.outer_diameter,
-        // Drill for the board
+        outerDiameter: ph.hole_diameter * 1.02,
         thickness: pcbThickness,
         zOffset: MANIFOLD_Z_OFFSET,
         segments: SMOOTH_CIRCLE_SEGMENTS
@@ -30170,7 +30455,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
 
 // src/utils/manifold/process-vias.ts
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper({
@@ -30203,7 +30488,7 @@ function createViaCopper({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE20.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE21.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su9(circuitJson).pcb_via.list();
@@ -30256,8 +30541,8 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 
 // src/utils/manifold/process-smt-pads.ts
 import { su as su10 } from "@tscircuit/circuit-json-util";
-import * as THREE21 from "three";
-var COPPER_COLOR3 = new THREE21.Color(...colors.copper);
+import * as THREE22 from "three";
+var COPPER_COLOR3 = new THREE22.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
   const smtPadGeoms = [];
   const smtPads = su10(circuitJson).pcb_smtpad.list();
@@ -30353,8 +30638,8 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 
 // src/utils/manifold/process-copper-pours.ts
-import * as THREE22 from "three";
-var COPPER_COLOR4 = new THREE22.Color(...colors.copper);
+import * as THREE23 from "three";
+var COPPER_COLOR4 = new THREE23.Color(...colors.copper);
 var arePointsClockwise4 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -30630,7 +30915,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   const [error, setError] = useState14(null);
   const [isLoading, setIsLoading] = useState14(true);
   const manifoldInstancesForCleanup = useRef7([]);
-  const boardData = useMemo19(() => {
+  const boardData = useMemo20(() => {
     const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
       return null;
@@ -30758,7 +31043,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE23.Color(
+              color: new THREE24.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -30788,7 +31073,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE23.Color(
+          color: new THREE24.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -30874,18 +31159,18 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE24 from "three";
-var DEFAULT_SIDE = THREE24.DoubleSide;
+import * as THREE25 from "three";
+var DEFAULT_SIDE = THREE25.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
   side = DEFAULT_SIDE
 }) => {
   if (material === "fr4") {
-    return new THREE24.MeshPhysicalMaterial({
+    return new THREE25.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -30899,7 +31184,7 @@ var createBoardMaterial = ({
       flatShading: true
     });
   }
-  return new THREE24.MeshStandardMaterial({
+  return new THREE25.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -30915,12 +31200,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE25.Mesh(
+    const mesh = new THREE26.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE25.DoubleSide
+        side: THREE26.DoubleSide
       })
     );
     mesh.name = "board-geom";
@@ -30929,11 +31214,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE25.Mesh(
+        const mesh = new THREE26.Mesh(
           comp.geometry,
-          new THREE25.MeshStandardMaterial({
+          new THREE26.MeshStandardMaterial({
             color: comp.color,
-            side: THREE25.DoubleSide,
+            side: THREE26.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -30951,21 +31236,21 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
     if (!texture) return null;
-    const planeGeom = new THREE26.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE26.MeshBasicMaterial({
+    const planeGeom = new THREE27.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE27.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE26.DoubleSide,
+      side: THREE27.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE26.Mesh(planeGeom, material);
+    const mesh = new THREE27.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -31073,10 +31358,11 @@ var CadViewerManifold = ({
   autoRotateDisabled,
   clickToInteractEnabled,
   onUserInteraction,
-  children
+  children,
+  onCameraControllerReady
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo20(() => {
+  const circuitJson = useMemo21(() => {
     return circuitJsonProp ?? childrenCircuitJson;
   }, [circuitJsonProp, childrenCircuitJson]);
   const [manifoldJSModule, setManifoldJSModule] = useState15(null);
@@ -31151,27 +31437,27 @@ try {
     isLoading: builderIsLoading,
     boardData
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
-  const geometryMeshes = useMemo20(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo20(
+  const geometryMeshes = useMemo21(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo21(
     () => createTextureMeshes(textures, boardData, pcbThickness),
     [textures, boardData, pcbThickness]
   );
-  const cadComponents = useMemo20(
+  const cadComponents = useMemo21(
     () => su13(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo20(() => {
+  const boardDimensions = useMemo21(() => {
     if (!boardData) return void 0;
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     return { width: width10, height: height10 };
   }, [boardData]);
-  const boardCenter = useMemo20(() => {
+  const boardCenter = useMemo21(() => {
     if (!boardData) return void 0;
     const { center } = boardData;
     if (!center) return void 0;
     return { x: center.x, y: center.y };
   }, [boardData]);
-  const initialCameraPosition = useMemo20(() => {
+  const initialCameraPosition = useMemo21(() => {
     if (!boardData) return [5, 5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -31228,6 +31514,7 @@ try {
       boardDimensions,
       boardCenter,
       onUserInteraction,
+      onCameraControllerReady,
       children: [
         /* @__PURE__ */ jsx16(
           BoardMeshes,
@@ -31257,7 +31544,7 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState16, useCallback as useCallback7, useRef as useRef8, useEffect as useEffect23 } from "react";
+import { useState as useState16, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect23 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState16(false);
   const [menuPos, setMenuPos] = useState16({
@@ -31274,7 +31561,7 @@ var useContextMenu = ({ containerRef }) => {
       longPressTimeoutRef.current = null;
     }
   };
-  const handleContextMenu = useCallback7(
+  const handleContextMenu = useCallback8(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
@@ -31300,7 +31587,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback7(
+  const handleTouchStart = useCallback8(
     (e) => {
       if (e.touches.length === 1) {
         const touch = e.touches[0];
@@ -31333,7 +31620,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [containerRef]
   );
-  const handleTouchMove = useCallback7((e) => {
+  const handleTouchMove = useCallback8((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -31351,7 +31638,7 @@ var useContextMenu = ({ containerRef }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback7(() => {
+  const handleTouchEnd = useCallback8(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -31359,7 +31646,7 @@ var useContextMenu = ({ containerRef }) => {
       }
     }, 0);
   }, []);
-  const handleClickAway = useCallback7((e) => {
+  const handleClickAway = useCallback8((e) => {
     const target = e.target;
     if (menuRef.current && !menuRef.current.contains(target)) {
       setMenuVisible(false);
@@ -31399,10 +31686,10 @@ var useContextMenu = ({ containerRef }) => {
 };
 
 // src/hooks/useGlobalDownloadGltf.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { GLTFExporter } from "three-stdlib";
 var useGlobalDownloadGltf = () => {
-  return useCallback8(() => {
+  return useCallback9(() => {
     const root = window.__TSCIRCUIT_THREE_OBJECT;
     if (!root) return;
     const exporter = new GLTFExporter();
@@ -31427,6 +31714,9 @@ var useGlobalDownloadGltf = () => {
   }, []);
 };
 
+// src/components/ContextMenu.tsx
+import { useState as useState18, useCallback as useCallback10 } from "react";
+
 // src/components/AppearanceMenu.tsx
 import { useState as useState17 } from "react";
 import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -31603,14 +31893,258 @@ var AppearanceMenu = () => {
   ] });
 };
 
-// src/CadViewer.tsx
+// src/components/ContextMenu.tsx
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var cameraOptions = [
+  "Custom",
+  "Top Centered",
+  "Top Down",
+  "Top Left Corner",
+  "Top Right Corner",
+  "Left Sideview",
+  "Right Sideview",
+  "Front"
+];
+var ContextMenu = ({
+  menuRef,
+  menuPos,
+  engine,
+  cameraPreset,
+  autoRotate,
+  onEngineSwitch,
+  onCameraPresetSelect,
+  onAutoRotateToggle,
+  onDownloadGltf
+}) => {
+  const [activeSubmenu, setActiveSubmenu] = useState18(null);
+  const handleMenuItemHover = useCallback10(
+    (event, hovered) => {
+      event.currentTarget.style.background = hovered ? "#2d313a" : "transparent";
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: menuRef,
+      style: {
+        position: "fixed",
+        top: menuPos.y,
+        left: menuPos.x,
+        background: "#23272f",
+        color: "#f5f6fa",
+        borderRadius: 6,
+        boxShadow: "0 6px 24px 0 rgba(0,0,0,0.18)",
+        zIndex: 1e3,
+        minWidth: 200,
+        border: "1px solid #353945",
+        padding: 0,
+        fontSize: 15,
+        fontWeight: 500,
+        transition: "opacity 0.1s"
+      },
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: {
+              padding: "12px 18px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              color: "#f5f6fa",
+              fontWeight: 500,
+              borderRadius: 6,
+              transition: "background 0.1s"
+            },
+            onClick: () => onEngineSwitch(engine === "jscad" ? "manifold" : "jscad"),
+            onMouseOver: (event) => handleMenuItemHover(event, true),
+            onMouseOut: (event) => handleMenuItemHover(event, false),
+            children: [
+              "Switch to ",
+              engine === "jscad" ? "Manifold" : "JSCAD",
+              " Engine",
+              /* @__PURE__ */ jsx18(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    marginLeft: "auto",
+                    opacity: 0.5,
+                    fontWeight: 400
+                  },
+                  children: engine === "jscad" ? "experimental" : "default"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: { position: "relative" },
+            onMouseEnter: () => setActiveSubmenu("camera"),
+            onMouseLeave: () => setActiveSubmenu(null),
+            children: [
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    padding: "10px 18px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    color: "#f5f6fa",
+                    fontWeight: 500,
+                    borderRadius: 6,
+                    transition: "background 0.1s",
+                    background: activeSubmenu === "camera" ? "#2d313a" : "transparent"
+                  },
+                  onClick: () => setActiveSubmenu(
+                    (current2) => current2 === "camera" ? null : "camera"
+                  ),
+                  children: [
+                    "Camera Position",
+                    /* @__PURE__ */ jsx18("span", { style: { marginLeft: "auto", opacity: 0.75 }, children: cameraPreset }),
+                    /* @__PURE__ */ jsx18("span", { style: { marginLeft: 4, opacity: 0.5 }, children: "\u203A" })
+                  ]
+                }
+              ),
+              activeSubmenu === "camera" && /* @__PURE__ */ jsx18(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: "100%",
+                    marginLeft: -2,
+                    background: "#23272f",
+                    color: "#f5f6fa",
+                    borderRadius: 6,
+                    boxShadow: "0 6px 24px 0 rgba(0,0,0,0.18)",
+                    border: "1px solid #353945",
+                    minWidth: 200,
+                    padding: "6px 0",
+                    zIndex: 1001
+                  },
+                  children: cameraOptions.map((option) => /* @__PURE__ */ jsxs9(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 18px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 10,
+                        color: "#f5f6fa",
+                        fontWeight: 500,
+                        borderRadius: 6,
+                        transition: "background 0.1s"
+                      },
+                      onClick: () => onCameraPresetSelect(option),
+                      onMouseOver: (event) => handleMenuItemHover(event, true),
+                      onMouseOut: (event) => handleMenuItemHover(event, false),
+                      children: [
+                        /* @__PURE__ */ jsx18("span", { style: { width: 18 }, children: cameraPreset === option ? "\u2714" : "" }),
+                        option
+                      ]
+                    },
+                    option
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: {
+              padding: "12px 18px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              color: "#f5f6fa",
+              fontWeight: 500,
+              borderRadius: 6,
+              transition: "background 0.1s"
+            },
+            onClick: onAutoRotateToggle,
+            onMouseOver: (event) => handleMenuItemHover(event, true),
+            onMouseOut: (event) => handleMenuItemHover(event, false),
+            children: [
+              /* @__PURE__ */ jsx18("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
+              "Auto rotate"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            style: {
+              padding: "12px 18px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              color: "#f5f6fa",
+              fontWeight: 500,
+              borderRadius: 6,
+              transition: "background 0.1s"
+            },
+            onClick: onDownloadGltf,
+            onMouseOver: (event) => handleMenuItemHover(event, true),
+            onMouseOut: (event) => handleMenuItemHover(event, false),
+            children: "Download GLTF"
+          }
+        ),
+        /* @__PURE__ */ jsx18(AppearanceMenu, {}),
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              padding: "8px 0",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              marginTop: "8px"
+            },
+            children: /* @__PURE__ */ jsxs9(
+              "span",
+              {
+                style: {
+                  fontSize: 10,
+                  opacity: 0.6,
+                  fontWeight: 300,
+                  color: "#c0c0c0"
+                },
+                children: [
+                  "@tscircuit/3d-viewer@",
+                  package_default.version
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/CadViewer.tsx
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
-  const [engine, setEngine] = useState18("manifold");
+  const [engine, setEngine] = useState19("manifold");
   const containerRef = useRef9(null);
-  const [autoRotate, setAutoRotate] = useState18(true);
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState18(false);
+  const [autoRotate, setAutoRotate] = useState19(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState19(false);
+  const [cameraPreset, setCameraPreset] = useState19("Custom");
   const { visibility, toggleLayer } = useLayerVisibility();
+  const cameraControllerRef = useRef9(null);
+  const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
     menuPos,
@@ -31620,20 +32154,39 @@ var CadViewerInner = (props) => {
   } = useContextMenu({ containerRef });
   const autoRotateUserToggledRef = useRef9(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const handleUserInteraction = useCallback9(() => {
+  const handleUserInteraction = useCallback11(() => {
     if (!autoRotateUserToggledRef.current) {
       setAutoRotate(false);
     }
+    setCameraPreset("Custom");
   }, []);
-  const toggleAutoRotate = useCallback9(() => {
+  const toggleAutoRotate = useCallback11(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
   const downloadGltf = useGlobalDownloadGltf();
-  const handleMenuClick = (newEngine) => {
-    setEngine(newEngine);
+  const closeMenu = useCallback11(() => {
     setMenuVisible(false);
-  };
+  }, [setMenuVisible]);
+  const handleCameraControllerReady = useCallback11(
+    (controller) => {
+      cameraControllerRef.current = controller;
+      externalCameraControllerReady?.(controller);
+      if (controller && cameraPreset !== "Custom") {
+        controller.animateToPreset(cameraPreset);
+      }
+    },
+    [cameraPreset, externalCameraControllerReady]
+  );
+  const handleCameraPresetSelect = useCallback11(
+    (preset) => {
+      setCameraPreset(preset);
+      closeMenu();
+      if (preset === "Custom") return;
+      cameraControllerRef.current?.animateToPreset(preset);
+    },
+    [closeMenu]
+  );
   useEffect24(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
@@ -31644,7 +32197,7 @@ var CadViewerInner = (props) => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: containerRef,
@@ -31660,22 +32213,24 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx18(
+        engine === "jscad" ? /* @__PURE__ */ jsx19(
           CadViewerJscad,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction
+            onUserInteraction: handleUserInteraction,
+            onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx18(
+        ) : /* @__PURE__ */ jsx19(
           CadViewerManifold_default,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction
+            onUserInteraction: handleUserInteraction,
+            onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -31692,145 +32247,31 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx18("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx19("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsxs9(
-          "div",
+        menuVisible && /* @__PURE__ */ jsx19(
+          ContextMenu,
           {
-            ref: menuRef,
-            style: {
-              position: "fixed",
-              top: menuPos.y,
-              left: menuPos.x,
-              background: "#23272f",
-              color: "#f5f6fa",
-              borderRadius: 6,
-              boxShadow: "0 6px 24px 0 rgba(0,0,0,0.18)",
-              zIndex: 1e3,
-              minWidth: 200,
-              border: "1px solid #353945",
-              padding: 0,
-              fontSize: 15,
-              fontWeight: 500,
-              transition: "opacity 0.1s"
+            menuRef,
+            menuPos,
+            engine,
+            cameraPreset,
+            autoRotate,
+            onEngineSwitch: (newEngine) => {
+              setEngine(newEngine);
+              closeMenu();
             },
-            children: [
-              /* @__PURE__ */ jsxs9(
-                "div",
-                {
-                  style: {
-                    padding: "12px 18px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 10,
-                    color: "#f5f6fa",
-                    fontWeight: 500,
-                    borderRadius: 6,
-                    transition: "background 0.1s"
-                  },
-                  onClick: () => handleMenuClick(engine === "jscad" ? "manifold" : "jscad"),
-                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
-                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
-                  children: [
-                    "Switch to ",
-                    engine === "jscad" ? "Manifold" : "JSCAD",
-                    " Engine",
-                    /* @__PURE__ */ jsx18(
-                      "span",
-                      {
-                        style: {
-                          fontSize: 12,
-                          marginLeft: "auto",
-                          opacity: 0.5,
-                          fontWeight: 400
-                        },
-                        children: engine === "jscad" ? "experimental" : "default"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs9(
-                "div",
-                {
-                  style: {
-                    padding: "12px 18px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 10,
-                    color: "#f5f6fa",
-                    fontWeight: 500,
-                    borderRadius: 6,
-                    transition: "background 0.1s"
-                  },
-                  onClick: () => {
-                    toggleAutoRotate();
-                    setMenuVisible(false);
-                  },
-                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
-                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
-                  children: [
-                    /* @__PURE__ */ jsx18("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
-                    "Auto rotate"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx18(
-                "div",
-                {
-                  style: {
-                    padding: "12px 18px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 10,
-                    color: "#f5f6fa",
-                    fontWeight: 500,
-                    borderRadius: 6,
-                    transition: "background 0.1s"
-                  },
-                  onClick: () => {
-                    downloadGltf();
-                    setMenuVisible(false);
-                  },
-                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
-                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
-                  children: "Download GLTF"
-                }
-              ),
-              /* @__PURE__ */ jsx18(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx18(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "center",
-                    padding: "8px 0",
-                    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                    marginTop: "8px"
-                  },
-                  children: /* @__PURE__ */ jsxs9(
-                    "span",
-                    {
-                      style: {
-                        fontSize: 10,
-                        opacity: 0.6,
-                        fontWeight: 300,
-                        color: "#c0c0c0"
-                      },
-                      children: [
-                        "@tscircuit/3d-viewer@",
-                        package_default.version
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
+            onCameraPresetSelect: handleCameraPresetSelect,
+            onAutoRotateToggle: () => {
+              toggleAutoRotate();
+              closeMenu();
+            },
+            onDownloadGltf: () => {
+              downloadGltf();
+              closeMenu();
+            }
           }
         )
       ]
@@ -31839,17 +32280,17 @@ var CadViewerInner = (props) => {
   );
 };
 var CadViewer = (props) => {
-  return /* @__PURE__ */ jsx18(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx18(CadViewerInner, { ...props }) });
+  return /* @__PURE__ */ jsx19(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx19(CadViewerInner, { ...props }) });
 };
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -31863,12 +32304,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE27.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE27.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE27.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE27.Vector3().crossVectors(
-        new THREE27.Vector3().subVectors(v2, v1),
-        new THREE27.Vector3().subVectors(v3, v1)
+      const v1 = new THREE28.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE28.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE28.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE28.Vector3().crossVectors(
+        new THREE28.Vector3().subVectors(v2, v1),
+        new THREE28.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -31892,10 +32333,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 
 // src/utils/load-model.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -31903,12 +32344,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE28.MeshStandardMaterial({
+    const material = new THREE29.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE28.Mesh(geometry, material);
+    return new THREE29.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -31941,9 +32382,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -31957,13 +32398,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE29.MeshStandardMaterial({
+      const material2 = new THREE30.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE29.DoubleSide
+        side: THREE30.DoubleSide
       });
-      const mesh2 = new THREE29.Mesh(threeGeom, material2);
+      const mesh2 = new THREE30.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -31973,9 +32414,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -31992,17 +32433,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE29.Color(geomInfo.color);
+      const color = new THREE30.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE29.MeshStandardMaterial({
+      const material2 = new THREE30.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE29.DoubleSide
+        side: THREE30.DoubleSide
       });
-      const mesh2 = new THREE29.Mesh(threeGeom, material2);
+      const mesh2 = new THREE30.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -32012,22 +32453,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE30.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE30.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE29.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE29.MeshStandardMaterial({
+  const geometry = new THREE30.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE30.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE29.Mesh(geometry, material);
+  const mesh = new THREE30.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -32048,11 +32489,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE30.Scene();
+  const scene = new THREE31.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE30.Color(backgroundColor), 1);
-  const camera = new THREE30.OrthographicCamera();
+  renderer.setClearColor(new THREE31.Color(backgroundColor), 1);
+  const camera = new THREE31.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -32066,11 +32507,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE30.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE31.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE30.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE31.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE30.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE31.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su14(circuitJson).cad_component.list();
@@ -32084,7 +32525,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const baseColor = new THREE30.Color(
+      const baseColor = new THREE31.Color(
         g.color?.[0] ?? 0,
         g.color?.[1] ?? 0,
         g.color?.[2] ?? 0
@@ -32092,18 +32533,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE30.DoubleSide
+        side: THREE31.DoubleSide
       });
-      const mesh = new THREE30.Mesh(geometry, material);
+      const mesh = new THREE31.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE30.GridHelper(100, 100);
+  const gridHelper = new THREE31.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE30.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE30.Vector3());
-  const size2 = box.getSize(new THREE30.Vector3());
+  const box = new THREE31.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE31.Vector3());
+  const size2 = box.getSize(new THREE31.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size2.x, size2.y, size2.z);
   if (maxDim > 0) {
@@ -32121,10 +32562,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
-import { useEffect as useEffect25, useState as useState19, useMemo as useMemo21, useCallback as useCallback10 } from "react";
+import { useEffect as useEffect25, useState as useState20, useMemo as useMemo22, useCallback as useCallback12 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
-  const link = useMemo21(() => document.createElement("a"), []);
+  const link = useMemo22(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -32142,16 +32583,16 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback10((obj3D) => {
+  const ref = useCallback12((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState19();
-  const [error, setError] = useState19();
-  const ref = useCallback10(
+  const [url, setUrl] = useState20();
+  const [error, setError] = useState20();
+  const ref = useCallback12(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
@@ -32159,7 +32600,7 @@ function useExportGltfUrl(options = {}) {
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo21(() => new GLTFExporter2(), []);
+  const exporter = useMemo22(() => new GLTFExporter2(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(