@tscircuit/3d-viewer 0.0.582 → 0.0.584

package/dist/index.js

@@ -14432,12 +14432,12 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useEffect as useEffect47, useRef as useRef29, useState as useState39 } from "react";
-import * as THREE45 from "three";
+import { useCallback as useCallback24, useEffect as useEffect49, useRef as useRef29, useState as useState39 } from "react";
+import * as THREE48 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo20 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo22 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
@@ -32704,13 +32704,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect18, useMemo as useMemo14, useState as useState11 } from "react";
-import * as THREE20 from "three";
+import { forwardRef as forwardRef2, useEffect as useEffect20, useMemo as useMemo16, useState as useState11 } from "react";
+import * as THREE23 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.581",
+  version: "0.0.583",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32801,6 +32801,7 @@ var AppearanceProvider = ({
   children
 }) => {
   const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState8(false);
+  const [gridEnabled, setGridEnabled] = useState8(false);
   const [lightingEnabled, setLightingEnabled] = useState8(
     readStoredLightingEnabled
   );
@@ -32814,10 +32815,12 @@ var AppearanceProvider = ({
     () => ({
       darkBackgroundEnabled,
       setDarkBackgroundEnabled,
+      gridEnabled,
+      setGridEnabled,
       lightingEnabled,
       setLightingEnabled
     }),
-    [darkBackgroundEnabled, lightingEnabled]
+    [darkBackgroundEnabled, gridEnabled, lightingEnabled]
   );
   return /* @__PURE__ */ jsx11(AppearanceContext.Provider, { value, children });
 };
@@ -33385,9 +33388,101 @@ var Canvas = forwardRef(
   }
 );
 
-// src/react-three/Lights.tsx
+// src/react-three/Grid.tsx
 import { useEffect as useEffect15, useMemo as useMemo12 } from "react";
 import * as THREE17 from "three";
+var vertexShader = `
+  varying vec3 worldPosition;
+  void main() {
+    worldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+var fragmentShader = `
+  varying vec3 worldPosition;
+  uniform float cellSize;
+  uniform float sectionSize;
+  uniform vec3 gridColor;
+  uniform vec3 sectionColor;
+  uniform float fadeDistance;
+  uniform float fadeStrength;
+
+  float getGrid(float size) {
+    vec2 r = worldPosition.xy / size;
+    vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
+    float line = min(grid.x, grid.y);
+    return 1.0 - min(line * 1.5, 1.0);
+  }
+
+  void main() {
+    float g1 = getGrid(cellSize);
+    float g2 = getGrid(sectionSize);
+
+    float d = distance(worldPosition.xy, cameraPosition.xy);
+    float a = 1.0 - smoothstep(fadeDistance, fadeDistance * fadeStrength, d);
+
+    vec3 color = mix(gridColor, sectionColor, g2);
+
+    gl_FragColor = vec4(color, max(g1, g2) * a);
+    if (gl_FragColor.a <= 0.0) discard;
+  }
+`;
+var Grid = ({
+  rotation,
+  infiniteGrid,
+  cellSize = 1,
+  sectionSize = 10
+}) => {
+  const { scene, camera } = useThree();
+  const size4 = 1e3;
+  const gridMesh = useMemo12(() => {
+    const geometry = new THREE17.PlaneGeometry(size4, size4);
+    geometry.rotateX(-Math.PI / 2);
+    const material = new THREE17.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        cellSize: { value: cellSize },
+        sectionSize: { value: sectionSize },
+        gridColor: { value: new THREE17.Color(15658734) },
+        sectionColor: { value: new THREE17.Color(13421823) },
+        fadeDistance: { value: 100 },
+        // Fade out based on sectionSize
+        fadeStrength: { value: 1.5 }
+      },
+      transparent: true,
+      side: THREE17.DoubleSide
+    });
+    const mesh = new THREE17.Mesh(geometry, material);
+    if (rotation) {
+      mesh.rotation.fromArray(rotation);
+    }
+    return mesh;
+  }, [size4, cellSize, sectionSize, rotation]);
+  useFrame(() => {
+    if (infiniteGrid) {
+      gridMesh.position.set(camera.position.x, camera.position.y, 0);
+    }
+  });
+  useEffect15(() => {
+    if (!scene || !gridMesh) return;
+    scene.add(gridMesh);
+    return () => {
+      scene.remove(gridMesh);
+      gridMesh.geometry.dispose();
+      if (Array.isArray(gridMesh.material)) {
+        gridMesh.material.forEach((m) => m.dispose());
+      } else {
+        gridMesh.material.dispose();
+      }
+    };
+  }, [scene, gridMesh]);
+  return null;
+};
+
+// src/react-three/Lights.tsx
+import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
+import * as THREE18 from "three";
 var UNDERSIDE_LIGHT_FACTOR = 0.75;
 var Lights = ({
   boardDimensions,
@@ -33396,8 +33491,8 @@ var Lights = ({
   shadowsEnabled = false
 }) => {
   const { scene } = useThree();
-  const lightRig = useMemo12(() => {
-    const rig = new THREE17.Group();
+  const lightRig = useMemo13(() => {
+    const rig = new THREE18.Group();
     rig.name = "cad-viewer-light-rig";
     const centerX = boardCenter?.x ?? 0;
     const centerY = boardCenter?.y ?? 0;
@@ -33409,14 +33504,14 @@ var Lights = ({
     const shadowHalfSize = largestBoardDimension * 0.8;
     const lightDistance = largestBoardDimension;
     const keyLightDistance = largestBoardDimension * 1.7;
-    const ambientLight = new THREE17.AmbientLight(16186360, 0.22);
+    const ambientLight = new THREE18.AmbientLight(16186360, 0.22);
     ambientLight.name = "cad-viewer-soft-ambient";
     rig.add(ambientLight);
-    const hemisphereLight = new THREE17.HemisphereLight(15004141, 1581597, 0.2);
+    const hemisphereLight = new THREE18.HemisphereLight(15004141, 1581597, 0.2);
     hemisphereLight.name = "cad-viewer-hemisphere";
     rig.add(hemisphereLight);
     const addDirectionalLight = (name, color, intensity, position, castShadow = false) => {
-      const light = new THREE17.DirectionalLight(color, intensity);
+      const light = new THREE18.DirectionalLight(color, intensity);
       light.name = name;
       light.position.set(
         centerX + position[0],
@@ -33490,17 +33585,17 @@ var Lights = ({
     );
     return rig;
   }, [boardCenter, boardDimensions, shadowsEnabled]);
-  useEffect15(() => {
+  useEffect16(() => {
     const previousBackground = scene.background;
     const previousEnvironment = scene.environment;
-    scene.background = darkBackgroundEnabled ? new THREE17.Color(1053456) : null;
+    scene.background = darkBackgroundEnabled ? new THREE18.Color(1053456) : null;
     scene.environment = null;
     return () => {
       scene.background = previousBackground;
       scene.environment = previousEnvironment;
     };
   }, [darkBackgroundEnabled, scene]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!scene) return;
     scene.add(lightRig);
     return () => {
@@ -33511,8 +33606,8 @@ var Lights = ({
 };
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect16, useMemo as useMemo13 } from "react";
-import * as THREE18 from "three";
+import { useEffect as useEffect17, useMemo as useMemo14 } from "react";
+import * as THREE19 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -33527,15 +33622,15 @@ var OrbitControls = ({
   onControlsChange
 }) => {
   const { camera, renderer } = useThree();
-  const controls = useMemo13(() => {
+  const controls = useMemo14(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
-  useEffect16(() => {
+  useEffect17(() => {
     onControlsChange?.(controls ?? null);
     return () => onControlsChange?.(null);
   }, [controls, onControlsChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     const handleChange = () => {
       onControlsChange?.(controls);
@@ -33545,7 +33640,7 @@ var OrbitControls = ({
       controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -33556,9 +33651,9 @@ var OrbitControls = ({
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
     controls.mouseButtons = {
-      LEFT: THREE18.MOUSE.ROTATE,
+      LEFT: THREE19.MOUSE.ROTATE,
       // Left click to rotate
-      MIDDLE: THREE18.MOUSE.PAN,
+      MIDDLE: THREE19.MOUSE.PAN,
       // Middle click to pan
       RIGHT: null
       // Right-click always disabled - only context menu
@@ -33578,14 +33673,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -33597,16 +33692,95 @@ var OrbitControls = ({
   return null;
 };
 
+// src/reference-objects/reference-object.ts
+var REFERENCE_OBJECT_CLEARANCE_MM = 10;
+var REFERENCE_OBJECT_SPECS = {
+  banana: {
+    type: "banana",
+    label: "Show Banana",
+    // USDA describes a medium banana as 7 to 7 7/8 inches long. The 190 mm
+    // envelope is near the midpoint of that range.
+    width: 190,
+    height: 60,
+    depth: 34,
+    zCenter: 17
+  },
+  "credit-card": {
+    type: "credit-card",
+    label: "Show Credit Card",
+    // ISO/IEC 7810 ID-1 dimensions.
+    width: 85.6,
+    height: 53.98,
+    depth: 0.76,
+    zCenter: 0
+  },
+  "14in-macbook": {
+    type: "14in-macbook",
+    label: "Show 14in Macbook",
+    // Current 14-inch MacBook Pro exterior dimensions.
+    width: 312.6,
+    height: 221.2,
+    depth: 15.5,
+    zCenter: 0
+  }
+};
+var REFERENCE_OBJECT_OPTIONS = Object.values(REFERENCE_OBJECT_SPECS);
+var safeDimension = (dimension) => Number.isFinite(dimension) ? Math.max(dimension ?? 0, 0) : 0;
+var safeCoordinate = (coordinate) => Number.isFinite(coordinate) ? coordinate ?? 0 : 0;
+var getReferenceObjectPosition = (type, boardDimensions, boardCenter) => {
+  const spec = REFERENCE_OBJECT_SPECS[type];
+  const boardWidth = safeDimension(boardDimensions?.width);
+  const centerX = safeCoordinate(boardCenter?.x);
+  const centerY = safeCoordinate(boardCenter?.y);
+  return {
+    x: centerX + boardWidth / 2 + REFERENCE_OBJECT_CLEARANCE_MM + spec.width / 2,
+    y: centerY,
+    z: 0
+  };
+};
+var getComparisonBounds = (type, boardDimensions, boardCenter) => {
+  const spec = REFERENCE_OBJECT_SPECS[type];
+  const boardWidth = safeDimension(boardDimensions?.width);
+  const boardHeight = safeDimension(boardDimensions?.height);
+  const centerX = safeCoordinate(boardCenter?.x);
+  const centerY = safeCoordinate(boardCenter?.y);
+  const referencePosition = getReferenceObjectPosition(
+    type,
+    boardDimensions,
+    boardCenter
+  );
+  return {
+    minX: Math.min(
+      centerX - boardWidth / 2,
+      referencePosition.x - spec.width / 2
+    ),
+    maxX: Math.max(
+      centerX + boardWidth / 2,
+      referencePosition.x + spec.width / 2
+    ),
+    minY: Math.min(
+      centerY - boardHeight / 2,
+      referencePosition.y - spec.height / 2
+    ),
+    maxY: Math.max(
+      centerY + boardHeight / 2,
+      referencePosition.y + spec.height / 2
+    ),
+    minZ: Math.min(0, referencePosition.z + spec.zCenter - spec.depth / 2),
+    maxZ: Math.max(0, referencePosition.z + spec.zCenter + spec.depth / 2)
+  };
+};
+
 // src/three-components/OrientationCubeCanvas.tsx
-import { useEffect as useEffect17, useRef as useRef7 } from "react";
-import * as THREE19 from "three";
+import { useEffect as useEffect18, useRef as useRef7 } from "react";
+import * as THREE20 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance5) {
-  const quaternion = new THREE19.Quaternion().setFromEuler(
-    new THREE19.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE20.Quaternion().setFromEuler(
+    new THREE20.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE19.Vector3(0, 0, 1);
+  const forwardVector = new THREE20.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance5);
   return result;
@@ -33614,36 +33788,36 @@ function computePointInFront(rotationVector, distance5) {
 var OrientationCubeCanvas = () => {
   const { mainCameraRef } = useCameraController();
   const containerRef = useRef7(null);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const canvas = document.createElement("canvas");
     container.appendChild(canvas);
-    const renderer = new THREE19.WebGLRenderer({
+    const renderer = new THREE20.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
     });
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
-    const scene = new THREE19.Scene();
-    const camera = new THREE19.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const scene = new THREE20.Scene();
+    const camera = new THREE20.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
-    const ambientLight = new THREE19.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE20.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE19.Group();
+    const group = new THREE20.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE19.Mesh(
-      new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE19.MeshStandardMaterial({ color: "white" })
+    const box = new THREE20.Mesh(
+      new THREE20.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE20.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE19.LineSegments(
-      new THREE19.EdgesGeometry(
-        new THREE19.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE20.LineSegments(
+      new THREE20.EdgesGeometry(
+        new THREE20.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE19.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE20.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -33698,7 +33872,7 @@ var OrientationCubeCanvas = () => {
     const animate = () => {
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE19.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE20.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -33746,6 +33920,421 @@ var OrientationCubeCanvas = () => {
   );
 };
 
+// src/three-components/reference-object.tsx
+import { useEffect as useEffect19, useMemo as useMemo15 } from "react";
+
+// src/reference-objects/create-reference-object.ts
+import * as THREE21 from "three";
+var createRoundedRectangleShape = (width10, height10, radius) => {
+  const halfWidth = width10 / 2;
+  const halfHeight = height10 / 2;
+  const safeRadius = Math.min(radius, halfWidth, halfHeight);
+  const shape = new THREE21.Shape();
+  shape.moveTo(-halfWidth + safeRadius, -halfHeight);
+  shape.lineTo(halfWidth - safeRadius, -halfHeight);
+  shape.quadraticCurveTo(
+    halfWidth,
+    -halfHeight,
+    halfWidth,
+    -halfHeight + safeRadius
+  );
+  shape.lineTo(halfWidth, halfHeight - safeRadius);
+  shape.quadraticCurveTo(
+    halfWidth,
+    halfHeight,
+    halfWidth - safeRadius,
+    halfHeight
+  );
+  shape.lineTo(-halfWidth + safeRadius, halfHeight);
+  shape.quadraticCurveTo(
+    -halfWidth,
+    halfHeight,
+    -halfWidth,
+    halfHeight - safeRadius
+  );
+  shape.lineTo(-halfWidth, -halfHeight + safeRadius);
+  shape.quadraticCurveTo(
+    -halfWidth,
+    -halfHeight,
+    -halfWidth + safeRadius,
+    -halfHeight
+  );
+  return shape;
+};
+var createRoundedPrismGeometry = (width10, height10, depth, radius) => {
+  return createPrismGeometryFromShape(
+    createRoundedRectangleShape(width10, height10, radius),
+    depth
+  );
+};
+var createPrismGeometryFromShape = (shape, depth) => {
+  const geometry = new THREE21.ExtrudeGeometry(shape, {
+    depth,
+    bevelEnabled: false,
+    curveSegments: 24
+  });
+  geometry.translate(0, 0, -depth / 2);
+  geometry.computeVertexNormals();
+  return geometry;
+};
+var normalizeObjectToSpec = (object, type) => {
+  const spec = REFERENCE_OBJECT_SPECS[type];
+  object.updateMatrixWorld(true);
+  const initialBounds = new THREE21.Box3().setFromObject(object);
+  const initialSize = initialBounds.getSize(new THREE21.Vector3());
+  object.scale.set(
+    spec.width / initialSize.x,
+    spec.height / initialSize.y,
+    spec.depth / initialSize.z
+  );
+  object.updateMatrixWorld(true);
+  const scaledBounds = new THREE21.Box3().setFromObject(object);
+  const scaledCenter = scaledBounds.getCenter(new THREE21.Vector3());
+  object.position.set(
+    -scaledCenter.x,
+    -scaledCenter.y,
+    spec.zCenter - scaledCenter.z
+  );
+  object.updateMatrixWorld(true);
+};
+var createBananaGeometry = () => {
+  const curve = new THREE21.CatmullRomCurve3([
+    new THREE21.Vector3(-82, 18, 16),
+    new THREE21.Vector3(-67, 7, 15),
+    new THREE21.Vector3(-43, -9, 14),
+    new THREE21.Vector3(-15, -18, 14),
+    new THREE21.Vector3(16, -18, 14),
+    new THREE21.Vector3(47, -8, 14.5),
+    new THREE21.Vector3(72, 8, 16),
+    new THREE21.Vector3(84, 19, 17)
+  ]);
+  const tubularSegments = 84;
+  const radialSegments = 30;
+  const frames = curve.computeFrenetFrames(tubularSegments, false);
+  const positions = [];
+  const normals = [];
+  const colors2 = [];
+  const uvs = [];
+  const indices = [];
+  const ripeYellow = new THREE21.Color(16766023);
+  const stemGreen = new THREE21.Color(12038965);
+  for (let segment = 0; segment <= tubularSegments; segment++) {
+    const t = segment / tubularSegments;
+    const point = curve.getPointAt(t);
+    const normal = frames.normals[segment];
+    const binormal = frames.binormals[segment];
+    const taper = Math.sin(Math.PI * t) ** 0.48;
+    const radius = 3.4 + 12.4 * taper;
+    const stemBlend = Math.max(0, (t - 0.82) / 0.18) * 0.38;
+    const ringColor = ripeYellow.clone().lerp(stemGreen, stemBlend);
+    for (let side = 0; side <= radialSegments; side++) {
+      const angle = side / radialSegments * Math.PI * 2;
+      const sin = Math.sin(angle);
+      const cos = Math.cos(angle);
+      const ridgeScale = 1 + Math.cos(angle * 5 + 0.35) * 0.035;
+      const radialNormal = new THREE21.Vector3().addScaledVector(normal, cos).addScaledVector(binormal, sin * 0.9).normalize();
+      const vertex = point.clone().addScaledVector(normal, cos * radius * ridgeScale).addScaledVector(binormal, sin * radius * 0.9 * ridgeScale);
+      positions.push(vertex.x, vertex.y, vertex.z);
+      normals.push(radialNormal.x, radialNormal.y, radialNormal.z);
+      colors2.push(ringColor.r, ringColor.g, ringColor.b);
+      uvs.push(t, side / radialSegments);
+    }
+  }
+  for (let segment = 1; segment <= tubularSegments; segment++) {
+    for (let side = 1; side <= radialSegments; side++) {
+      const rowSize = radialSegments + 1;
+      const a = rowSize * (segment - 1) + (side - 1);
+      const b = rowSize * segment + (side - 1);
+      const c = rowSize * segment + side;
+      const d = rowSize * (segment - 1) + side;
+      indices.push(a, d, b, b, d, c);
+    }
+  }
+  const geometry = new THREE21.BufferGeometry();
+  geometry.setIndex(indices);
+  geometry.setAttribute(
+    "position",
+    new THREE21.Float32BufferAttribute(positions, 3)
+  );
+  geometry.setAttribute("normal", new THREE21.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute("color", new THREE21.Float32BufferAttribute(colors2, 3));
+  geometry.setAttribute("uv", new THREE21.Float32BufferAttribute(uvs, 2));
+  geometry.computeBoundingBox();
+  geometry.computeBoundingSphere();
+  return { geometry, curve };
+};
+var createBanana = () => {
+  const group = new THREE21.Group();
+  const banana = new THREE21.Group();
+  const { geometry, curve } = createBananaGeometry();
+  const peel = new THREE21.Mesh(
+    geometry,
+    new THREE21.MeshStandardMaterial({
+      color: 16777215,
+      roughness: 0.72,
+      metalness: 0,
+      vertexColors: true
+    })
+  );
+  peel.name = "banana-peel";
+  banana.add(peel);
+  const blossomTip = new THREE21.Mesh(
+    new THREE21.SphereGeometry(3.4, 20, 12),
+    new THREE21.MeshStandardMaterial({
+      color: 6242844,
+      roughness: 0.92
+    })
+  );
+  blossomTip.position.copy(curve.getPointAt(0));
+  blossomTip.scale.set(1.15, 0.78, 0.78);
+  blossomTip.name = "banana-blossom-tip";
+  banana.add(blossomTip);
+  const stemLength = 11;
+  const stemTangent = curve.getTangentAt(1).normalize();
+  const stem = new THREE21.Mesh(
+    new THREE21.CylinderGeometry(2.5, 4.1, stemLength, 18),
+    new THREE21.MeshStandardMaterial({
+      color: 8483625,
+      roughness: 0.82
+    })
+  );
+  stem.quaternion.setFromUnitVectors(new THREE21.Vector3(0, 1, 0), stemTangent);
+  stem.position.copy(curve.getPointAt(1)).addScaledVector(stemTangent, stemLength / 2);
+  stem.name = "banana-stem";
+  banana.add(stem);
+  const stemTip = new THREE21.Mesh(
+    new THREE21.SphereGeometry(2.55, 18, 10),
+    new THREE21.MeshStandardMaterial({
+      color: 5981470,
+      roughness: 0.9
+    })
+  );
+  stemTip.position.copy(curve.getPointAt(1)).addScaledVector(stemTangent, stemLength);
+  stemTip.name = "banana-stem-tip";
+  banana.add(stemTip);
+  normalizeObjectToSpec(banana, "banana");
+  group.add(banana);
+  return group;
+};
+var createMacbookLidGeometry = (width10, height10, depth, radius, indentRadius) => {
+  const lidShape = createRoundedRectangleShape(width10, height10, radius);
+  const indent = new THREE21.Path();
+  indent.absarc(0, 0, indentRadius, 0, Math.PI * 2, true);
+  lidShape.holes.push(indent);
+  return createPrismGeometryFromShape(lidShape, depth);
+};
+var createMacbookIndent = (topZ, radius) => {
+  const indentDepth = 0.35;
+  const diskDepth = 0.25;
+  const disk = new THREE21.Mesh(
+    new THREE21.CylinderGeometry(radius - 0.15, radius - 0.15, diskDepth, 48),
+    new THREE21.MeshStandardMaterial({
+      color: 10199202,
+      roughness: 0.48,
+      metalness: 0.28
+    })
+  );
+  disk.rotation.x = Math.PI / 2;
+  disk.position.z = topZ - indentDepth - diskDepth / 2;
+  disk.name = "macbook-lid-indent";
+  return disk;
+};
+var createCreditCard = () => {
+  const spec = REFERENCE_OBJECT_SPECS["credit-card"];
+  const group = new THREE21.Group();
+  const body = new THREE21.Mesh(
+    createRoundedPrismGeometry(spec.width, spec.height, spec.depth, 3.18),
+    new THREE21.MeshStandardMaterial({
+      color: 2383272,
+      roughness: 0.38,
+      metalness: 0.08
+    })
+  );
+  body.name = "credit-card-body";
+  group.add(body);
+  const surfaceZ = spec.depth / 2 + 0.08;
+  const chip = new THREE21.Mesh(
+    createRoundedPrismGeometry(12, 9, 0.14, 1.2),
+    new THREE21.MeshStandardMaterial({
+      color: 14003525,
+      roughness: 0.3,
+      metalness: 0.62
+    })
+  );
+  chip.position.set(-21, 3, surfaceZ);
+  chip.name = "credit-card-chip";
+  group.add(chip);
+  const stripeMaterial = new THREE21.MeshStandardMaterial({
+    color: 15331061,
+    roughness: 0.45,
+    metalness: 0.05
+  });
+  for (let index2 = 0; index2 < 4; index2++) {
+    const stripe = new THREE21.Mesh(
+      new THREE21.BoxGeometry(index2 === 3 ? 8 : 12, 0.8, 0.1),
+      stripeMaterial
+    );
+    stripe.position.set(-20 + index2 * 14, -14, surfaceZ + 0.08);
+    stripe.name = "credit-card-detail";
+    group.add(stripe);
+  }
+  return group;
+};
+var createMacbook = () => {
+  const spec = REFERENCE_OBJECT_SPECS["14in-macbook"];
+  const group = new THREE21.Group();
+  const aluminumMaterial = new THREE21.MeshStandardMaterial({
+    color: 12896201,
+    roughness: 0.3,
+    metalness: 0.38
+  });
+  const body = new THREE21.Mesh(
+    createRoundedPrismGeometry(spec.width, spec.height, 13.5, 9),
+    aluminumMaterial
+  );
+  body.position.z = -1;
+  body.name = "macbook-body";
+  group.add(body);
+  const lidDepth = 2;
+  const lidCenterZ = 6.75;
+  const lidTopZ = lidCenterZ + lidDepth / 2;
+  const indentRadius = 12;
+  const lid = new THREE21.Mesh(
+    createMacbookLidGeometry(
+      spec.width - 1.8,
+      spec.height - 1.8,
+      lidDepth,
+      8.2,
+      indentRadius
+    ),
+    aluminumMaterial.clone()
+  );
+  lid.position.z = lidCenterZ;
+  lid.name = "macbook-lid";
+  group.add(lid);
+  const hinge = new THREE21.Mesh(
+    new THREE21.BoxGeometry(spec.width - 42, 3.2, 1.2),
+    new THREE21.MeshStandardMaterial({
+      color: 3158838,
+      roughness: 0.55,
+      metalness: 0.45
+    })
+  );
+  hinge.position.set(0, spec.height / 2 - 2.4, 6.15);
+  hinge.name = "macbook-hinge";
+  group.add(hinge);
+  group.add(createMacbookIndent(lidTopZ, indentRadius));
+  const frontNotch = new THREE21.Mesh(
+    new THREE21.BoxGeometry(54, 1.2, 0.8),
+    new THREE21.MeshStandardMaterial({
+      color: 6712174,
+      roughness: 0.45,
+      metalness: 0.5
+    })
+  );
+  frontNotch.position.set(0, -spec.height / 2 + 0.5, 2.5);
+  frontNotch.name = "macbook-front-notch";
+  group.add(frontNotch);
+  return group;
+};
+var createReferenceObject = (type) => {
+  const group = type === "banana" ? createBanana() : type === "credit-card" ? createCreditCard() : createMacbook();
+  group.name = `reference-object-${type}`;
+  group.userData.isReferenceObject = true;
+  group.userData.referenceObjectType = type;
+  configureObjectShadows(group);
+  return group;
+};
+var disposeReferenceObject = (object) => {
+  const geometries = /* @__PURE__ */ new Set();
+  const materials = /* @__PURE__ */ new Set();
+  object.traverse((child) => {
+    if (!(child instanceof THREE21.Mesh)) return;
+    geometries.add(child.geometry);
+    const childMaterials = Array.isArray(child.material) ? child.material : [child.material];
+    for (const material of childMaterials) materials.add(material);
+  });
+  for (const geometry of geometries) geometry.dispose();
+  for (const material of materials) material.dispose();
+};
+
+// src/reference-objects/fit-camera-to-bounds.ts
+import * as THREE22 from "three";
+var fitCameraToBounds = (camera, controls, bounds, padding = 1.18) => {
+  const width10 = Math.max(bounds.maxX - bounds.minX, 0);
+  const height10 = Math.max(bounds.maxY - bounds.minY, 0);
+  const depth = Math.max(bounds.maxZ - bounds.minZ, 0);
+  const center = new THREE22.Vector3(
+    (bounds.minX + bounds.maxX) / 2,
+    (bounds.minY + bounds.maxY) / 2,
+    (bounds.minZ + bounds.maxZ) / 2
+  );
+  const radius = Math.max(Math.hypot(width10, height10, depth) / 2, 1);
+  const previousTarget = controls?.target ?? new THREE22.Vector3();
+  const direction = new THREE22.Vector3(0, -0.75, 0.9).normalize();
+  let distance5 = Math.max(camera.position.distanceTo(previousTarget), 5);
+  if (camera instanceof THREE22.PerspectiveCamera) {
+    const verticalFov = THREE22.MathUtils.degToRad(camera.fov);
+    const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
+    const limitingFov = Math.min(verticalFov, horizontalFov);
+    distance5 = radius * padding / Math.sin(limitingFov / 2);
+    camera.far = Math.max(camera.far, distance5 + radius * padding * 3);
+    camera.updateProjectionMatrix();
+  } else if (camera instanceof THREE22.OrthographicCamera) {
+    const halfViewWidth = Math.abs(camera.right - camera.left) / 2;
+    const halfViewHeight = Math.abs(camera.top - camera.bottom) / 2;
+    camera.zoom = Math.min(
+      halfViewWidth / (radius * padding),
+      halfViewHeight / (radius * padding)
+    );
+    distance5 = Math.max(distance5, radius * padding * 2);
+    camera.updateProjectionMatrix();
+  }
+  camera.position.copy(center).addScaledVector(direction, distance5);
+  camera.lookAt(center);
+  camera.updateMatrixWorld();
+  if (controls) {
+    controls.target.copy(center);
+    controls.update();
+  }
+  return { center, radius, distance: distance5 };
+};
+
+// src/three-components/reference-object.tsx
+var ReferenceObject = ({
+  type,
+  boardDimensions,
+  boardCenter
+}) => {
+  const { scene } = useThree();
+  const object = useMemo15(() => {
+    const nextObject = createReferenceObject(type);
+    const position = getReferenceObjectPosition(
+      type,
+      boardDimensions,
+      boardCenter
+    );
+    nextObject.position.set(position.x, position.y, position.z);
+    return nextObject;
+  }, [type, boardDimensions, boardCenter]);
+  useEffect19(() => {
+    scene.add(object);
+    return () => {
+      scene.remove(object);
+      disposeReferenceObject(object);
+    };
+  }, [scene, object]);
+  return null;
+};
+var FitCameraToComparison = ({ bounds }) => {
+  const { camera } = useThree();
+  const { controlsRef } = useCameraController();
+  useEffect19(() => {
+    fitCameraToBounds(camera, controlsRef.current, bounds);
+  }, [bounds, camera, controlsRef]);
+  return null;
+};
+
 // src/CadViewerContainer.tsx
 import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
 var RotationTracker = () => {
@@ -33766,6 +34355,7 @@ var CadViewerContainer = forwardRef2(
     clickToInteractEnabled = false,
     boardDimensions,
     boardCenter,
+    referenceObject,
     onUserInteraction,
     onCameraControllerReady
   }, ref) => {
@@ -33773,27 +34363,44 @@ var CadViewerContainer = forwardRef2(
       !clickToInteractEnabled
     );
     const { mainCameraRef, handleControlsChange, controller } = useCameraController();
-    const { darkBackgroundEnabled, lightingEnabled } = useAppearance();
+    const { darkBackgroundEnabled, gridEnabled, lightingEnabled } = useAppearance();
     const {
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
     } = useCameraSession();
-    useEffect18(() => {
+    useEffect20(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
     }, [controller, onCameraControllerReady]);
-    const orbitTarget = useMemo14(() => {
+    const comparisonBounds = useMemo16(() => {
+      if (!referenceObject) return void 0;
+      return getComparisonBounds(referenceObject, boardDimensions, boardCenter);
+    }, [referenceObject, boardDimensions, boardCenter]);
+    const gridSectionSize = useMemo16(() => {
+      if (!boardDimensions) return 10;
+      const width10 = boardDimensions.width ?? 0;
+      const height10 = boardDimensions.height ?? 0;
+      return Math.max(Math.max(width10, height10) * 1.5, 10);
+    }, [boardDimensions]);
+    const orbitTarget = useMemo16(() => {
+      if (comparisonBounds) {
+        return [
+          (comparisonBounds.minX + comparisonBounds.maxX) / 2,
+          (comparisonBounds.minY + comparisonBounds.maxY) / 2,
+          (comparisonBounds.minZ + comparisonBounds.maxZ) / 2
+        ];
+      }
       if (!boardCenter) return void 0;
       return [boardCenter.x, boardCenter.y, 0];
-    }, [boardCenter]);
+    }, [boardCenter, comparisonBounds]);
     return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
       /* @__PURE__ */ jsx15(OrientationCubeCanvas, {}),
       /* @__PURE__ */ jsxs3(
         Canvas,
         {
           ref,
-          scene: { up: new THREE20.Vector3(0, 0, 1) },
+          scene: { up: new THREE23.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -33829,6 +34436,24 @@ var CadViewerContainer = forwardRef2(
                 shadowsEnabled: lightingEnabled
               }
             ),
+            referenceObject && /* @__PURE__ */ jsx15(
+              ReferenceObject,
+              {
+                type: referenceObject,
+                boardDimensions,
+                boardCenter
+              }
+            ),
+            comparisonBounds && /* @__PURE__ */ jsx15(FitCameraToComparison, { bounds: comparisonBounds }),
+            gridEnabled && /* @__PURE__ */ jsx15(
+              Grid,
+              {
+                rotation: [Math.PI / 2, 0, 0],
+                infiniteGrid: true,
+                cellSize: 3,
+                sectionSize: gridSectionSize
+              }
+            ),
             children
           ]
         }
@@ -33893,9 +34518,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 useMemo17 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo15(() => {
+  return useMemo17(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -33905,12 +34530,12 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState12, useEffect as useEffect19 } from "react";
+import { useState as useState12, useEffect as useEffect21 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
   const [stls, setStls] = useState12([]);
   const [loading, setLoading] = useState12(true);
-  useEffect19(() => {
+  useEffect21(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -33939,7 +34564,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState13, useEffect as useEffect20, useRef as useRef8 } from "react";
+import { useState as useState13, useEffect as useEffect22, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -35253,7 +35878,7 @@ var BoardGeomBuilder = class {
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState13(null);
   const isProcessingRef = useRef8(false);
-  useEffect20(() => {
+  useEffect22(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -35299,10 +35924,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState14, useCallback as useCallback8, useEffect as useEffect22, useMemo as useMemo17 } from "react";
+import { useState as useState14, useCallback as useCallback8, useEffect as useEffect24, useMemo as useMemo19 } from "react";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo18 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -35317,7 +35942,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo16(() => {
+  const mesh = useMemo18(() => {
     const textMesh = new TroikaText2();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -35342,7 +35967,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect21(() => {
+  useEffect23(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -35355,7 +35980,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE21 from "three";
+import * as THREE24 from "three";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -35377,7 +36002,7 @@ var Error3d = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo17(() => {
+  const position = useMemo19(() => {
     if (cad_component?.position) {
       const p = [
         cad_component.position.x,
@@ -35388,12 +36013,12 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component]);
-  const group = useMemo17(() => {
-    const g = new THREE21.Group();
+  const group = useMemo19(() => {
+    const g = new THREE24.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -35448,10 +36073,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo17(() => {
-    const m = new THREE21.Mesh(
-      new THREE21.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE21.MeshStandardMaterial({
+  const mesh = useMemo19(() => {
+    const m = new THREE24.Mesh(
+      new THREE24.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE24.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -35462,7 +36087,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect22(() => {
+  useEffect24(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -35471,114 +36096,12 @@ var ErrorBox = ({ parent }) => {
   return null;
 };
 
-// src/three-components/STLModel.tsx
-import { useState as useState15, useEffect as useEffect23, useMemo as useMemo18 } from "react";
-import * as THREE22 from "three";
-import { STLLoader } from "three-stdlib";
-function STLModel({
-  stlUrl,
-  stlData,
-  mtlUrl,
-  color,
-  opacity = 1,
-  layerType
-}) {
-  const { rootObject } = useThree();
-  const [geom, setGeom] = useState15(null);
-  useEffect23(() => {
-    const loader = new STLLoader();
-    if (stlData) {
-      try {
-        const geometry = loader.parse(stlData);
-        setGeom(geometry);
-      } catch (e) {
-        console.error("Failed to parse STL data", e);
-        setGeom(null);
-      }
-      return;
-    }
-    if (stlUrl) {
-      loader.load(stlUrl, (geometry) => {
-        setGeom(geometry);
-      });
-    }
-  }, [stlUrl, stlData]);
-  const mesh = useMemo18(() => {
-    if (!geom) return null;
-    const isBoardLayer = layerType === "board";
-    const material = new THREE22.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE22.Color(color[0], color[1], color[2]) : color,
-      transparent: opacity !== 1,
-      opacity,
-      polygonOffset: isBoardLayer,
-      polygonOffsetFactor: isBoardLayer ? 6 : 0,
-      polygonOffsetUnits: isBoardLayer ? 6 : 0
-    });
-    const createdMesh = new THREE22.Mesh(geom, material);
-    createdMesh.renderOrder = isBoardLayer ? -1 : 1;
-    configureObjectShadows(createdMesh, {
-      castShadow: !isBoardLayer && opacity === 1,
-      receiveShadow: true
-    });
-    return createdMesh;
-  }, [geom, color, opacity, layerType]);
-  useEffect23(() => {
-    if (!rootObject || !mesh) return;
-    rootObject.add(mesh);
-    return () => {
-      rootObject.remove(mesh);
-      mesh.geometry.dispose();
-      if (Array.isArray(mesh.material)) {
-        mesh.material.forEach((m) => m.dispose());
-      } else {
-        mesh.material.dispose();
-      }
-    };
-  }, [rootObject, mesh]);
-  return null;
-}
-
-// src/three-components/VisibleSTLModel.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-function VisibleSTLModel({
-  stlData,
-  color,
-  opacity = 1,
-  layerType
-}) {
-  const { visibility } = useLayerVisibility();
-  let shouldShow = true;
-  if (layerType === "board") {
-    shouldShow = visibility.boardBody;
-  } else if (layerType === "top-copper") {
-    shouldShow = visibility.topCopper;
-  } else if (layerType === "bottom-copper") {
-    shouldShow = visibility.bottomCopper;
-  } else if (layerType === "top-silkscreen") {
-    shouldShow = visibility.topSilkscreen;
-  } else if (layerType === "bottom-silkscreen") {
-    shouldShow = visibility.bottomSilkscreen;
-  }
-  if (!shouldShow) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx17(
-    STLModel,
-    {
-      stlData,
-      color,
-      opacity,
-      layerType
-    }
-  );
-}
-
 // src/three-components/JscadBoardTextures.tsx
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo20 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE34 from "three";
+import * as THREE36 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -35633,7 +36156,7 @@ function calculateOutlineBounds(boardData) {
 // src/utils/pad-texture.ts
 import { su as su5 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-import * as THREE23 from "three";
+import * as THREE25 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -35711,10 +36234,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE23.CanvasTexture(canvas);
+  const texture = new THREE25.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE23.LinearMipmapLinearFilter;
-  texture.magFilter = THREE23.LinearFilter;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -35722,7 +36245,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
-import * as THREE24 from "three";
+import * as THREE26 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -35790,17 +36313,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE25 from "three";
+import * as THREE27 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su7 } from "@tscircuit/circuit-json-util";
 
@@ -35918,10 +36441,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -35929,7 +36452,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE26 from "three";
+import * as THREE28 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(
@@ -36051,17 +36574,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE28.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE28.LinearMipmapLinearFilter;
+  texture.magFilter = THREE28.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE27 from "three";
+import * as THREE29 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
@@ -36172,17 +36695,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE29.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE28 from "three";
+import * as THREE30 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -36410,17 +36933,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE28.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE28.LinearMipmapLinearFilter;
-  texture.magFilter = THREE28.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE29 from "three";
+import * as THREE31 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -36495,17 +37018,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE29.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE29.LinearMipmapLinearFilter;
-  texture.magFilter = THREE29.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE30 from "three";
+import * as THREE32 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -36656,17 +37179,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE31 from "three";
+import * as THREE33 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -36775,17 +37298,17 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE32 from "three";
+import * as THREE34 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -36920,17 +37443,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE33 from "three";
+import * as THREE35 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
@@ -37023,10 +37546,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -37114,10 +37637,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE34.CanvasTexture(canvas);
+  const combinedTexture = new THREE36.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE34.LinearFilter;
-  combinedTexture.magFilter = THREE34.LinearFilter;
+  combinedTexture.minFilter = THREE36.LinearFilter;
+  combinedTexture.magFilter = THREE36.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -37142,11 +37665,11 @@ var createMaskedCopperMask = ({
     if (!texture?.image) continue;
     ctx.drawImage(texture.image, 0, 0, width10, height10);
   }
-  const maskTexture = new THREE34.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE34.NoColorSpace;
+  const maskTexture = new THREE36.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE36.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE34.LinearFilter;
-  maskTexture.magFilter = THREE34.LinearFilter;
+  maskTexture.minFilter = THREE36.LinearFilter;
+  maskTexture.magFilter = THREE36.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -37284,7 +37807,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE36 from "three";
+import * as THREE38 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -37307,7 +37830,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE35 from "three";
+import * as THREE37 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
@@ -37396,13 +37919,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   };
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE35.CanvasTexture(canvas);
-  texture.colorSpace = THREE35.NoColorSpace;
+  const texture = new THREE37.CanvasTexture(canvas);
+  texture.colorSpace = THREE37.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE35.LinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
-  texture.wrapS = THREE35.ClampToEdgeWrapping;
-  texture.wrapT = THREE35.ClampToEdgeWrapping;
+  texture.minFilter = THREE37.LinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
+  texture.wrapS = THREE37.ClampToEdgeWrapping;
+  texture.wrapT = THREE37.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -37509,7 +38032,7 @@ var createBoardReliefTextures = (texture, maskedCopperMask) => {
     for (let x = 0; x < sourceCanvas.width; x++) {
       const dx = (getHeight4(x + 1, y) - getHeight4(x - 1, y)) * 4;
       const dy = (getHeight4(x, y + 1) - getHeight4(x, y - 1)) * 4;
-      const normal = new THREE35.Vector3(-dx, -dy, 1).normalize();
+      const normal = new THREE37.Vector3(-dx, -dy, 1).normalize();
       const i = (y * sourceCanvas.width + x) * 4;
       normalData[i] = (normal.x * 0.5 + 0.5) * 255;
       normalData[i + 1] = (normal.y * 0.5 + 0.5) * 255;
@@ -37539,16 +38062,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE36.PlaneGeometry(
+  const planeGeom = new THREE38.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE36.SRGBColorSpace;
+  texture.colorSpace = THREE38.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE36.FrontSide,
+    side: THREE38.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37557,12 +38080,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE36.MeshPhysicalMaterial({
+  const material = new THREE38.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE36.Vector2(
+    normalScale: new THREE38.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -37576,7 +38099,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE36.Mesh(planeGeom, material);
+  const mesh = new THREE38.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -37624,7 +38147,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE37 from "three";
+import * as THREE39 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -37661,7 +38184,7 @@ function JscadBoardTextures({
 }) {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
-  const boardData = useMemo19(() => {
+  const boardData = useMemo20(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -37687,11 +38210,11 @@ function JscadBoardTextures({
     );
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const traceTextureResolution = useMemo19(() => {
+  const traceTextureResolution = useMemo20(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  const textures = useMemo19(() => {
+  const textures = useMemo20(() => {
     if (!boardData?.width || !boardData.height) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -37700,7 +38223,7 @@ function JscadBoardTextures({
       visibility
     });
   }, [circuitJson, boardData, traceTextureResolution, visibility]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
     const disposeTextureMaterial = (material) => {
@@ -37720,7 +38243,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE37.Texture) {
+        if (texture && texture instanceof THREE39.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -37739,16 +38262,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE37.PlaneGeometry(
+      const planeGeom = new THREE39.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE37.SRGBColorSpace;
+      texture.colorSpace = THREE39.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE37.FrontSide,
+        side: THREE39.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37759,12 +38282,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE37.MeshPhysicalMaterial({
+      const material = new THREE39.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE37.Vector2(
+        normalScale: new THREE39.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -37776,7 +38299,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE37.Mesh(planeGeom, material);
+      const mesh = new THREE39.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -37826,7 +38349,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE37.Material) {
+        } else if (mesh.material instanceof THREE39.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -37837,6 +38360,108 @@ function JscadBoardTextures({
   return null;
 }
 
+// src/three-components/STLModel.tsx
+import { useState as useState15, useEffect as useEffect26, useMemo as useMemo21 } from "react";
+import * as THREE40 from "three";
+import { STLLoader } from "three-stdlib";
+function STLModel({
+  stlUrl,
+  stlData,
+  mtlUrl,
+  color,
+  opacity = 1,
+  layerType
+}) {
+  const { rootObject } = useThree();
+  const [geom, setGeom] = useState15(null);
+  useEffect26(() => {
+    const loader = new STLLoader();
+    if (stlData) {
+      try {
+        const geometry = loader.parse(stlData);
+        setGeom(geometry);
+      } catch (e) {
+        console.error("Failed to parse STL data", e);
+        setGeom(null);
+      }
+      return;
+    }
+    if (stlUrl) {
+      loader.load(stlUrl, (geometry) => {
+        setGeom(geometry);
+      });
+    }
+  }, [stlUrl, stlData]);
+  const mesh = useMemo21(() => {
+    if (!geom) return null;
+    const isBoardLayer = layerType === "board";
+    const material = new THREE40.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE40.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 THREE40.Mesh(geom, material);
+    createdMesh.renderOrder = isBoardLayer ? -1 : 1;
+    configureObjectShadows(createdMesh, {
+      castShadow: !isBoardLayer && opacity === 1,
+      receiveShadow: true
+    });
+    return createdMesh;
+  }, [geom, color, opacity, layerType]);
+  useEffect26(() => {
+    if (!rootObject || !mesh) return;
+    rootObject.add(mesh);
+    return () => {
+      rootObject.remove(mesh);
+      mesh.geometry.dispose();
+      if (Array.isArray(mesh.material)) {
+        mesh.material.forEach((m) => m.dispose());
+      } else {
+        mesh.material.dispose();
+      }
+    };
+  }, [rootObject, mesh]);
+  return null;
+}
+
+// src/three-components/VisibleSTLModel.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function VisibleSTLModel({
+  stlData,
+  color,
+  opacity = 1,
+  layerType
+}) {
+  const { visibility } = useLayerVisibility();
+  let shouldShow = true;
+  if (layerType === "board") {
+    shouldShow = visibility.boardBody;
+  } else if (layerType === "top-copper") {
+    shouldShow = visibility.topCopper;
+  } else if (layerType === "bottom-copper") {
+    shouldShow = visibility.bottomCopper;
+  } else if (layerType === "top-silkscreen") {
+    shouldShow = visibility.topSilkscreen;
+  } else if (layerType === "bottom-silkscreen") {
+    shouldShow = visibility.bottomSilkscreen;
+  }
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx17(
+    STLModel,
+    {
+      stlData,
+      color,
+      opacity,
+      layerType
+    }
+  );
+}
+
 // src/utils/preprocess-circuit-json.ts
 import { su as su10 } from "@tscircuit/circuit-json-util";
 
@@ -37935,16 +38560,17 @@ var CadViewerJscad = forwardRef3(
     clickToInteractEnabled,
     onUserInteraction,
     onCameraControllerReady,
-    resolveStaticAsset
+    resolveStaticAsset,
+    referenceObject
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo20(() => {
+    const internalCircuitJson = useMemo22(() => {
       return addFauxBoardIfNeeded(
         circuitJson ?? childrenSoup
       );
     }, [circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo20(() => {
+    const initialCameraPosition = useMemo22(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -37970,7 +38596,7 @@ var CadViewerJscad = forwardRef3(
         return [5, -5, 5];
       }
     }, [internalCircuitJson]);
-    const isFauxBoard = useMemo20(() => {
+    const isFauxBoard = useMemo22(() => {
       if (!internalCircuitJson) return false;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -37979,23 +38605,25 @@ var CadViewerJscad = forwardRef3(
         return false;
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo20(() => {
+    const boardDimensions = useMemo22(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
         if (!board) return void 0;
-        return { width: board.width ?? 0, height: board.height ?? 0 };
+        const bounds = calculateOutlineBounds(board);
+        return { width: bounds.width, height: bounds.height };
       } catch (e) {
         console.error(e);
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo20(() => {
+    const boardCenter = useMemo22(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
-        if (!board || !board.center) return void 0;
-        return { x: board.center.x, y: board.center.y };
+        if (!board) return void 0;
+        const bounds = calculateOutlineBounds(board);
+        return { x: bounds.centerX, y: bounds.centerY };
       } catch (e) {
         console.error(e);
         return void 0;
@@ -38013,6 +38641,7 @@ var CadViewerJscad = forwardRef3(
         clickToInteractEnabled,
         boardDimensions,
         boardCenter,
+        referenceObject,
         onUserInteraction,
         onCameraControllerReady,
         children: [
@@ -38058,13 +38687,13 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect26, useMemo as useMemo22, useState as useState17 } from "react";
-import * as THREE44 from "three";
+import { useEffect as useEffect28, useMemo as useMemo24, useState as useState17 } from "react";
+import * as THREE47 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef9, useState as useState16 } from "react";
-import * as THREE41 from "three";
+import { useEffect as useEffect27, useMemo as useMemo23, useRef as useRef9, useState as useState16 } from "react";
+import * as THREE44 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -38413,17 +39042,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE39 from "three";
+import * as THREE42 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE38 from "three";
+import * as THREE41 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE38.BufferGeometry();
+  const geometry = new THREE41.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE38.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE41.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE38.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE41.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];
@@ -38457,7 +39086,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE39.Color(...colors.copper);
+var COPPER_COLOR = new THREE42.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -39088,7 +39717,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE40 from "three";
+import * as THREE43 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -39126,7 +39755,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE40.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE43.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -39184,7 +39813,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const [error, setError] = useState16(null);
   const [isLoading, setIsLoading] = useState16(true);
   const manifoldInstancesForCleanup = useRef9([]);
-  const boardData = useMemo21(() => {
+  const boardData = useMemo23(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -39208,15 +39837,15 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
-  const isFauxBoard = useMemo21(() => {
+  const isFauxBoard = useMemo23(() => {
     const boards = su16(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
-  const traceTextureResolution = useMemo21(() => {
+  const traceTextureResolution = useMemo23(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect25(() => {
+  useEffect27(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -39346,7 +39975,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE41.Color(
+              color: new THREE44.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -39376,7 +40005,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE41.Color(
+          color: new THREE44.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -39400,7 +40029,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       manifoldInstancesForCleanup.current = [];
     };
   }, [manifoldJSModule, circuitJson, boardData]);
-  const textures = useMemo21(() => {
+  const textures = useMemo23(() => {
     if (!boardData || !traceTextureResolution) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -39421,11 +40050,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE43 from "three";
+import * as THREE46 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE42 from "three";
-var DEFAULT_SIDE = THREE42.DoubleSide;
+import * as THREE45 from "three";
+var DEFAULT_SIDE = THREE45.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -39433,7 +40062,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE42.MeshPhysicalMaterial({
+    return new THREE45.MeshPhysicalMaterial({
       // A dark edge lets the green solder mask read as a finished PCB rather
       // than a tan substrate with a decal placed on top.
       color: 1063462,
@@ -39453,7 +40082,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE42.MeshStandardMaterial({
+  return new THREE45.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -39472,12 +40101,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE43.Mesh(
+    const mesh = new THREE46.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE43.DoubleSide,
+        side: THREE46.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -39488,11 +40117,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE43.Mesh(
+        const mesh = new THREE46.Mesh(
           comp.geometry,
-          new THREE43.MeshStandardMaterial({
+          new THREE46.MeshStandardMaterial({
             color: comp.color,
-            side: THREE43.DoubleSide,
+            side: THREE46.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -39537,14 +40166,14 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE44.Texture) {
+        if (texture && texture instanceof THREE47.Texture) {
           texture.dispose();
         }
       }
       material.dispose();
     }
   };
-  useEffect26(() => {
+  useEffect28(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -39566,7 +40195,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -39590,17 +40219,18 @@ var CadViewerManifold = ({
   onUserInteraction,
   children,
   onCameraControllerReady,
-  resolveStaticAsset
+  resolveStaticAsset,
+  referenceObject
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo22(() => {
+  const circuitJson = useMemo24(() => {
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
   const [manifoldJSModule, setManifoldJSModule] = useState17(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState17(null);
   const { visibility } = useLayerVisibility();
-  useEffect26(() => {
+  useEffect28(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -39671,27 +40301,26 @@ try {
     boardData,
     isFauxBoard
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility);
-  const geometryMeshes = useMemo22(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo22(
+  const geometryMeshes = useMemo24(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo24(
     () => createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard),
     [textures, boardData, pcbThickness, isFauxBoard]
   );
-  const cadComponents = useMemo22(
+  const cadComponents = useMemo24(
     () => su17(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo22(() => {
+  const boardDimensions = useMemo24(() => {
     if (!boardData) return void 0;
-    const { width: width10 = 0, height: height10 = 0 } = boardData;
-    return { width: width10, height: height10 };
+    const bounds = calculateOutlineBounds(boardData);
+    return { width: bounds.width, height: bounds.height };
   }, [boardData]);
-  const boardCenter = useMemo22(() => {
+  const boardCenter = useMemo24(() => {
     if (!boardData) return void 0;
-    const { center } = boardData;
-    if (!center) return void 0;
-    return { x: center.x, y: center.y };
+    const bounds = calculateOutlineBounds(boardData);
+    return { x: bounds.centerX, y: bounds.centerY };
   }, [boardData]);
-  const initialCameraPosition = useMemo22(() => {
+  const initialCameraPosition = useMemo24(() => {
     if (!boardData) return [5, -5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -39754,6 +40383,7 @@ try {
       clickToInteractEnabled,
       boardDimensions,
       boardCenter,
+      referenceObject,
       onUserInteraction,
       onCameraControllerReady,
       children: [
@@ -39785,11 +40415,8 @@ try {
 };
 var CadViewerManifold_default = CadViewerManifold;
 
-// src/components/ContextMenu.tsx
-import { useState as useState35 } from "react";
-
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import * as React41 from "react";
+import * as React42 from "react";
 
 // node_modules/@radix-ui/primitive/dist/index.mjs
 var __defProp3 = Object.defineProperty;
@@ -39844,7 +40471,7 @@ function isFrame(element) {
 __name(isFrame, "isFrame");
 
 // node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import * as React10 from "react";
+import * as React11 from "react";
 var __defProp4 = Object.defineProperty;
 var __name2 = (target, value) => __defProp4(target, "name", { value, configurable: true });
 function setRef(ref, value) {
@@ -39881,28 +40508,28 @@ function composeRefs(...refs) {
 }
 __name2(composeRefs, "composeRefs");
 function useComposedRefs(...refs) {
-  return React10.useCallback(composeRefs(...refs), refs);
+  return React11.useCallback(composeRefs(...refs), refs);
 }
 __name2(useComposedRefs, "useComposedRefs");
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
-import * as React11 from "react";
+import * as React12 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var __defProp5 = Object.defineProperty;
 var __name3 = (target, value) => __defProp5(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
 function createContext22(rootComponentName, defaultContext) {
-  const Context = React11.createContext(defaultContext);
+  const Context = React12.createContext(defaultContext);
   Context.displayName = rootComponentName + "Context";
   const Provider = /* @__PURE__ */ __name3((props) => {
     const { children, ...context } = props;
-    const value = React11.useMemo(() => context, Object.values(context));
+    const value = React12.useMemo(() => context, Object.values(context));
     return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
   }, "Provider");
   Provider.displayName = rootComponentName + "Provider";
   function useContext22(consumerName, options = {}) {
     const { optional = false } = options;
-    const context = React11.useContext(Context);
+    const context = React12.useContext(Context);
     if (context) return context;
     if (defaultContext !== void 0) return defaultContext;
     if (optional) return void 0;
@@ -39916,21 +40543,21 @@ __name3(createContext22, "createContext");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React11.createContext(defaultContext);
+    const BaseContext = React12.createContext(defaultContext);
     BaseContext.displayName = rootComponentName + "Context";
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = /* @__PURE__ */ __name3((props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React11.useMemo(() => context, Object.values(context));
+      const value = React12.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx20(Context.Provider, { value, children });
     }, "Provider");
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope, options = {}) {
       const { optional = false } = options;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React11.useContext(Context);
+      const context = React12.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       if (optional) return void 0;
@@ -39942,11 +40569,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   __name3(createContext32, "createContext");
   const createScope = /* @__PURE__ */ __name3(() => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React11.createContext(defaultContext);
+      return React12.createContext(defaultContext);
     });
     return /* @__PURE__ */ __name3(function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React11.useMemo(
+      return React12.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -39970,7 +40597,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React11.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React12.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     }, "useComposedScopes");
   }, "createScope");
   createScope.scopeName = baseScope.scopeName;
@@ -39979,30 +40606,30 @@ function composeContextScopes(...scopes) {
 __name3(composeContextScopes, "composeContextScopes");
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React14 from "react";
+import * as React15 from "react";
 
 // node_modules/@radix-ui/primitive/dist/internal/is-development.false.mjs
 var IS_DEVELOPMENT = false;
 
 // node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import * as React12 from "react";
-var useLayoutEffect2 = globalThis?.document ? React12.useLayoutEffect : () => {
+import * as React13 from "react";
+var useLayoutEffect2 = globalThis?.document ? React13.useLayoutEffect : () => {
 };
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import * as React22 from "react";
 
 // node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
-import * as React13 from "react";
+import * as React14 from "react";
 var __defProp6 = Object.defineProperty;
 var __name4 = (target, value) => __defProp6(target, "name", { value, configurable: true });
-var useReactEffectEvent = React13[" useEffectEvent ".trim().toString()];
-var useReactInsertionEffect = React13[" useInsertionEffect ".trim().toString()];
+var useReactEffectEvent = React14[" useEffectEvent ".trim().toString()];
+var useReactInsertionEffect = React14[" useInsertionEffect ".trim().toString()];
 function useEffectEvent(callback) {
   if (typeof useReactEffectEvent === "function") {
     return useReactEffectEvent(callback);
   }
-  const ref = React13.useRef(() => {
+  const ref = React14.useRef(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
   if (typeof useReactInsertionEffect === "function") {
@@ -40014,14 +40641,14 @@ function useEffectEvent(callback) {
       ref.current = callback;
     });
   }
-  return React13.useMemo(() => ((...args) => ref.current?.(...args)), []);
+  return React14.useMemo(() => ((...args) => ref.current?.(...args)), []);
 }
 __name4(useEffectEvent, "useEffectEvent");
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 var __defProp7 = Object.defineProperty;
 var __name5 = (target, value) => __defProp7(target, "name", { value, configurable: true });
-var useInsertionEffect = React14[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React15[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -40036,8 +40663,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (IS_DEVELOPMENT) {
-    const isControlledRef = React14.useRef(prop !== void 0);
-    React14.useEffect(() => {
+    const isControlledRef = React15.useRef(prop !== void 0);
+    React15.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -40049,7 +40676,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React14.useCallback(
+  const setValue = React15.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -40069,13 +40696,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React14.useState(defaultProp);
-  const prevValueRef = React14.useRef(value);
-  const onChangeRef = React14.useRef(onChange);
+  const [value, setValue] = React15.useState(defaultProp);
+  const prevValueRef = React15.useRef(value);
+  const onChangeRef = React15.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -40151,16 +40778,16 @@ function useControllableStateReducer(reducer, userArgs, initialArg, init) {
 __name5(useControllableStateReducer, "useControllableStateReducer");
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React16 from "react";
+import * as React17 from "react";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React15 from "react";
+import * as React16 from "react";
 var __defProp8 = Object.defineProperty;
 var __name6 = (target, value) => __defProp8(target, "name", { value, configurable: true });
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const Slot2 = React15.forwardRef((props, forwardedRef) => {
+  const Slot2 = React16.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     let slottableElement = null;
     let hasSlottable = false;
@@ -40168,7 +40795,7 @@ function createSlot(ownerName) {
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    React15.Children.forEach(children, (maybeSlottable) => {
+    React16.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
@@ -40183,13 +40810,13 @@ function createSlot(ownerName) {
       }
     });
     if (slottableElement) {
-      slottableElement = React15.cloneElement(slottableElement, void 0, newChildren);
+      slottableElement = React16.cloneElement(slottableElement, void 0, newChildren);
     } else if (
       // A `Slottable` was found but it didn't resolve to a single element (e.g.
       // it wrapped multiple elements, text, or a render-prop `child` that
       // wasn't an element). Don't fall back to treating the `Slottable` wrapper
       // itself as the slot target — throw a descriptive error below instead.
-      !hasSlottable && React15.Children.count(children) === 1 && React15.isValidElement(children)
+      !hasSlottable && React16.Children.count(children) === 1 && React16.isValidElement(children)
     ) {
       slottableElement = children;
     }
@@ -40204,10 +40831,10 @@ function createSlot(ownerName) {
       return children;
     }
     const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
-    if (slottableElement.type !== React15.Fragment) {
+    if (slottableElement.type !== React16.Fragment) {
       mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
     }
-    return React15.cloneElement(slottableElement, mergedProps);
+    return React16.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -40225,10 +40852,10 @@ __name6(createSlottable, "createSlottable");
 var getSlottableElementFromSlottable = /* @__PURE__ */ __name6((slottable, child) => {
   if ("child" in slottable.props) {
     const child2 = slottable.props.child;
-    if (!React15.isValidElement(child2)) return null;
-    return React15.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    if (!React16.isValidElement(child2)) return null;
+    return React16.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
   }
-  return React15.isValidElement(child) ? child : null;
+  return React16.isValidElement(child) ? child : null;
 }, "getSlottableElementFromSlottable");
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -40270,7 +40897,7 @@ function getElementRef(element) {
 }
 __name6(getElementRef, "getElementRef");
 function isSlottable(child) {
-  return React15.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React16.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 __name6(isSlottable, "isSlottable");
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
@@ -40288,7 +40915,7 @@ var createSlotError = /* @__PURE__ */ __name6((ownerName) => {
 var createSlottableError = /* @__PURE__ */ __name6((ownerName) => {
   return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
 }, "createSlottableError");
-var use = React15[" use ".trim().toString()];
+var use = React16[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -40315,7 +40942,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot2 = createSlot(`Primitive.${node}`);
-  const Node2 = React16.forwardRef((props, forwardedRef) => {
+  const Node2 = React17.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -40332,10 +40959,10 @@ function dispatchDiscreteCustomEvent(target, event) {
 __name7(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import * as React40 from "react";
+import * as React41 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
-import * as React17 from "react";
+import * as React18 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import * as React23 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -40351,14 +40978,14 @@ function createCollection(name) {
   );
   const CollectionProvider = /* @__PURE__ */ __name8((props) => {
     const { scope, children } = props;
-    const ref = React17.useRef(null);
-    const itemMap = React17.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React18.useRef(null);
+    const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React17.forwardRef(
+  const CollectionSlot = React18.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -40370,13 +40997,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React17.forwardRef(
+  const CollectionItemSlot = React18.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = React17.useRef(null);
+      const ref = React18.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React17.useEffect(() => {
+      React18.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -40386,7 +41013,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection3(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React17.useCallback(() => {
+    const getItems = React18.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -40881,30 +41508,30 @@ function getChildListObserver(callback) {
 __name8(getChildListObserver, "getChildListObserver");
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var __defProp11 = Object.defineProperty;
 var __name9 = (target, value) => __defProp11(target, "name", { value, configurable: true });
-var DirectionContext = React18.createContext(void 0);
+var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React18.useContext(DirectionContext);
+  const globalDir = React19.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 __name9(useDirection, "useDirection");
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import * as React20 from "react";
+import * as React21 from "react";
 
 // node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React19 from "react";
+import * as React20 from "react";
 var __defProp12 = Object.defineProperty;
 var __name10 = (target, value) => __defProp12(target, "name", { value, configurable: true });
 function useCallbackRef(callback) {
-  const callbackRef = React19.useRef(callback);
-  React19.useEffect(() => {
+  const callbackRef = React20.useRef(callback);
+  React20.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React19.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+  return React20.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 __name10(useCallbackRef, "useCallbackRef");
 
@@ -40916,7 +41543,7 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React20.createContext({
+var DismissableLayerContext = React21.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set(),
@@ -40927,7 +41554,7 @@ var DismissableLayerContext = React20.createContext({
   // See https://github.com/radix-ui/primitives/issues/3346
   dismissableSurfaces: /* @__PURE__ */ new Set()
 });
-var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
+var DismissableLayer = /* @__PURE__ */ React21.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name11(function DismissableLayer2(props, forwardedRef) {
     const {
@@ -40940,10 +41567,10 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
       onDismiss,
       ...layerProps
     } = props;
-    const context = React20.useContext(DismissableLayerContext);
-    const [node, setNode] = React20.useState(null);
+    const context = React21.useContext(DismissableLayerContext);
+    const [node, setNode] = React21.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-    const [, force] = React20.useState({});
+    const [, force] = React21.useState({});
     const composedRefs = useComposedRefs(forwardedRef, setNode);
     const layers = Array.from(context.layers);
     const [highestLayerWithOutsidePointerEventsDisabled] = [
@@ -40953,7 +41580,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
     const index2 = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const isDeferredPointerDownOutsideRef = React20.useRef(false);
+    const isDeferredPointerDownOutsideRef = React21.useRef(false);
     const pointerDownOutside = usePointerDownOutside(
       (event) => {
         onPointerDownOutside?.(event);
@@ -40965,7 +41592,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         deferPointerDownOutside,
         isDeferredPointerDownOutsideRef,
         dismissableSurfaces: context.dismissableSurfaces,
-        shouldHandlePointerDownOutside: React20.useCallback(
+        shouldHandlePointerDownOutside: React21.useCallback(
           (target) => {
             if (!(target instanceof Node)) {
               return false;
@@ -41001,14 +41628,14 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         onDismiss();
       }
     });
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (!isHighestLayer) {
         return;
       }
       ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
       return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
     }, [ownerDocument, isHighestLayer, handleKeyDown]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (!node) return;
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -41028,7 +41655,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       return () => {
         if (!node) return;
         context.layers.delete(node);
@@ -41036,7 +41663,7 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
         dispatchUpdate();
       };
     }, [node, context]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       const handleUpdate = /* @__PURE__ */ __name11(() => force({}), "handleUpdate");
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -41061,9 +41688,9 @@ var DismissableLayer = /* @__PURE__ */ React20.forwardRef(
   }, "DismissableLayer")
 );
 function useDismissableLayerSurface() {
-  const context = React20.useContext(DismissableLayerContext);
-  const [node, setNode] = React20.useState(null);
-  React20.useEffect(() => {
+  const context = React21.useContext(DismissableLayerContext);
+  const [node, setNode] = React21.useState(null);
+  React21.useEffect(() => {
     if (!node) {
       return;
     }
@@ -41085,12 +41712,12 @@ function usePointerDownOutside(onPointerDownOutside, args) {
     shouldHandlePointerDownOutside = IS_TRUE
   } = args;
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React20.useRef(false);
-  const isPointerDownOutsideRef = React20.useRef(false);
-  const interceptedOutsideInteractionEventsRef = React20.useRef(/* @__PURE__ */ new Map());
-  const handleClickRef = React20.useRef(() => {
+  const isPointerInsideReactTreeRef = React21.useRef(false);
+  const isPointerDownOutsideRef = React21.useRef(false);
+  const interceptedOutsideInteractionEventsRef = React21.useRef(/* @__PURE__ */ new Map());
+  const handleClickRef = React21.useRef(() => {
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     function resetOutsideInteraction() {
       isPointerDownOutsideRef.current = false;
       isDeferredPointerDownOutsideRef.current = false;
@@ -41205,8 +41832,8 @@ function usePointerDownOutside(onPointerDownOutside, args) {
 __name11(usePointerDownOutside, "usePointerDownOutside");
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React20.useRef(false);
-  React20.useEffect(() => {
+  const isFocusInsideReactTreeRef = React21.useRef(false);
+  React21.useEffect(() => {
     const handleFocus = /* @__PURE__ */ __name11((event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -41242,7 +41869,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 __name11(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
 
 // node_modules/@radix-ui/react-focus-guards/dist/index.mjs
-import * as React21 from "react";
+import * as React24 from "react";
 var __defProp14 = Object.defineProperty;
 var __name12 = (target, value) => __defProp14(target, "name", { value, configurable: true });
 var count = 0;
@@ -41253,7 +41880,7 @@ function FocusGuards(props) {
 }
 __name12(FocusGuards, "FocusGuards");
 function useFocusGuards() {
-  React21.useEffect(() => {
+  React24.useEffect(() => {
     if (!guards) {
       guards = { start: createFocusGuard(), end: createFocusGuard() };
     }
@@ -41289,14 +41916,14 @@ function createFocusGuard() {
 __name12(createFocusGuard, "createFocusGuard");
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
-import * as React24 from "react";
+import * as React25 from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var __defProp15 = Object.defineProperty;
 var __name13 = (target, value) => __defProp15(target, "name", { value, configurable: true });
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
-var FocusScope = /* @__PURE__ */ React24.forwardRef(
+var FocusScope = /* @__PURE__ */ React25.forwardRef(
   /* @__PURE__ */ __name13(function FocusScope2(props, forwardedRef) {
     const {
       loop = false,
@@ -41305,12 +41932,12 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
       onUnmountAutoFocus: onUnmountAutoFocusProp,
       ...scopeProps
     } = props;
-    const [container, setContainer] = React24.useState(null);
+    const [container, setContainer] = React25.useState(null);
     const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
     const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-    const lastFocusedElementRef = React24.useRef(null);
+    const lastFocusedElementRef = React25.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, setContainer);
-    const focusScope = React24.useRef({
+    const focusScope = React25.useRef({
       paused: false,
       pause() {
         this.paused = true;
@@ -41319,7 +41946,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         this.paused = false;
       }
     }).current;
-    React24.useEffect(() => {
+    React25.useEffect(() => {
       if (trapped) {
         let handleFocusIn2 = function(event) {
           if (focusScope.paused || !container) return;
@@ -41358,7 +41985,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         };
       }
     }, [trapped, container, focusScope.paused]);
-    React24.useEffect(() => {
+    React25.useEffect(() => {
       if (container) {
         focusScopesStack.add(focusScope);
         const previouslyFocusedElement = document.activeElement;
@@ -41389,7 +42016,7 @@ var FocusScope = /* @__PURE__ */ React24.forwardRef(
         };
       }
     }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-    const handleKeyDown = React24.useCallback(
+    const handleKeyDown = React25.useCallback(
       (event) => {
         if (!loop && !trapped) return;
         if (focusScope.paused) return;
@@ -41512,13 +42139,13 @@ function removeLinks(items) {
 __name13(removeLinks, "removeLinks");
 
 // node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React25 from "react";
+import * as React26 from "react";
 var __defProp16 = Object.defineProperty;
 var __name14 = (target, value) => __defProp16(target, "name", { value, configurable: true });
-var useReactId = React25[" useId ".trim().toString()] || (() => void 0);
+var useReactId = React26[" useId ".trim().toString()] || (() => void 0);
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React25.useState(useReactId());
+  const [id, setId] = React26.useState(useReactId());
   useLayoutEffect2(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count2++));
   }, [deterministicId]);
@@ -41527,7 +42154,7 @@ function useId(deterministicId) {
 __name14(useId, "useId");
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import * as React28 from "react";
+import * as React29 from "react";
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
@@ -43122,7 +43749,7 @@ var computePosition2 = (reference, floating, options) => {
 };
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-import * as React26 from "react";
+import * as React27 from "react";
 import { useLayoutEffect as useLayoutEffect3 } from "react";
 import * as ReactDOM3 from "react-dom";
 var isClient = typeof document !== "undefined";
@@ -43188,7 +43815,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React26.useRef(value);
+  const ref = React27.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -43211,7 +43838,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React26.useState({
+  const [data, setData] = React27.useState({
     x: 0,
     y: 0,
     strategy,
@@ -43219,19 +43846,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React26.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React27.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React26.useState(null);
-  const [_floating, _setFloating] = React26.useState(null);
-  const setReference = React26.useCallback((node) => {
+  const [_reference, _setReference] = React27.useState(null);
+  const [_floating, _setFloating] = React27.useState(null);
+  const setReference = React27.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React26.useCallback((node) => {
+  const setFloating = React27.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -43239,14 +43866,14 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React26.useRef(null);
-  const floatingRef = React26.useRef(null);
-  const dataRef = React26.useRef(data);
+  const referenceRef = React27.useRef(null);
+  const floatingRef = React27.useRef(null);
+  const dataRef = React27.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
   const openRef = useLatestRef(open);
-  const update = React26.useCallback(() => {
+  const update = React27.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -43284,7 +43911,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React26.useRef(false);
+  const isMountedRef = React27.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -43301,17 +43928,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React26.useMemo(() => ({
+  const refs = React27.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React26.useMemo(() => ({
+  const elements = React27.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React26.useMemo(() => {
+  const floatingStyles = React27.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -43337,7 +43964,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React26.useMemo(() => ({
+  return React27.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -43433,11 +44060,11 @@ var arrow3 = (options, deps) => {
 };
 
 // node_modules/@radix-ui/react-use-size/dist/index.mjs
-import * as React27 from "react";
+import * as React28 from "react";
 var __defProp17 = Object.defineProperty;
 var __name15 = (target, value) => __defProp17(target, "name", { value, configurable: true });
 function useSize(element) {
-  const [size4, setSize] = React27.useState(void 0);
+  const [size4, setSize] = React28.useState(void 0);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -43481,8 +44108,8 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = /* @__PURE__ */ __name16((props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React28.useState(null);
-  const [placementState, setPlacementState] = React28.useState(void 0);
+  const [anchor, setAnchor] = React29.useState(null);
+  const [placementState, setPlacementState] = React29.useState(void 0);
   return /* @__PURE__ */ jsx27(
     PopperProvider,
     {
@@ -43496,13 +44123,13 @@ var Popper = /* @__PURE__ */ __name16((props) => {
   );
 }, "Popper");
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
+var PopperAnchor = /* @__PURE__ */ React29.forwardRef(
   /* @__PURE__ */ __name16(function PopperAnchor2(props, forwardedRef) {
     const { __scopePopper, virtualRef, ...anchorProps } = props;
     const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-    const ref = React28.useRef(null);
+    const ref = React29.useRef(null);
     const onAnchorChange = context.onAnchorChange;
-    const callbackRef = React28.useCallback(
+    const callbackRef = React29.useCallback(
       (node) => {
         ref.current = node;
         if (node) {
@@ -43512,8 +44139,8 @@ var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
       [onAnchorChange]
     );
     const composedRefs = useComposedRefs(forwardedRef, callbackRef);
-    const anchorRef = React28.useRef(null);
-    React28.useEffect(() => {
+    const anchorRef = React29.useRef(null);
+    React29.useEffect(() => {
       if (!virtualRef) {
         return;
       }
@@ -43539,7 +44166,7 @@ var PopperAnchor = /* @__PURE__ */ React28.forwardRef(
 );
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = /* @__PURE__ */ React28.forwardRef(
+var PopperContent = /* @__PURE__ */ React29.forwardRef(
   /* @__PURE__ */ __name16(function PopperContent2(props, forwardedRef) {
     const {
       __scopePopper,
@@ -43558,9 +44185,9 @@ var PopperContent = /* @__PURE__ */ React28.forwardRef(
       ...contentProps
     } = props;
     const context = usePopperContext(CONTENT_NAME, __scopePopper);
-    const [content, setContent] = React28.useState(null);
+    const [content, setContent] = React29.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, setContent);
-    const [arrow4, setArrow] = React28.useState(null);
+    const [arrow4, setArrow] = React29.useState(null);
     const arrowSize = useSize(arrow4);
     const arrowWidth = arrowSize?.width ?? 0;
     const arrowHeight = arrowSize?.height ?? 0;
@@ -43640,7 +44267,7 @@ var PopperContent = /* @__PURE__ */ React28.forwardRef(
     const arrowX = middlewareData.arrow?.x;
     const arrowY = middlewareData.arrow?.y;
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-    const [contentZIndex, setContentZIndex] = React28.useState();
+    const [contentZIndex, setContentZIndex] = React29.useState();
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
@@ -43745,15 +44372,15 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 
 // node_modules/@radix-ui/react-portal/dist/index.mjs
-import * as React29 from "react";
+import * as React30 from "react";
 import * as ReactDOM4 from "react-dom";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var __defProp19 = Object.defineProperty;
 var __name17 = (target, value) => __defProp19(target, "name", { value, configurable: true });
-var Portal = /* @__PURE__ */ React29.forwardRef(
+var Portal = /* @__PURE__ */ React30.forwardRef(
   /* @__PURE__ */ __name17(function Portal2(props, forwardedRef) {
     const { container: containerProp, ...portalProps } = props;
-    const [mounted, setMounted] = React29.useState(false);
+    const [mounted, setMounted] = React30.useState(false);
     useLayoutEffect2(() => setMounted(true), []);
     const container = containerProp || mounted && globalThis?.document?.body;
     return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx28(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
@@ -43762,11 +44389,11 @@ var Portal = /* @__PURE__ */ React29.forwardRef(
 
 // node_modules/@radix-ui/react-presence/dist/index.mjs
 import * as React210 from "react";
-import * as React30 from "react";
+import * as React31 from "react";
 var __defProp20 = Object.defineProperty;
 var __name18 = (target, value) => __defProp20(target, "name", { value, configurable: true });
 function useStateMachine(initialState, machine) {
-  return React30.useReducer((state, event) => {
+  return React31.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -43940,17 +44567,17 @@ function getElementRef2(element) {
 __name18(getElementRef2, "getElementRef");
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
-import * as React32 from "react";
+import * as React33 from "react";
 
 // node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
 import * as React211 from "react";
-import * as React31 from "react";
+import * as React32 from "react";
 var __defProp21 = Object.defineProperty;
 var __name19 = (target, value) => __defProp21(target, "name", { value, configurable: true });
 var _isHydrated = false;
 function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = React31.useState(_isHydrated);
-  React31.useEffect(() => {
+  const [isHydrated, setIsHydrated] = React32.useState(_isHydrated);
+  React32.useEffect(() => {
     if (!_isHydrated) {
       _isHydrated = true;
       setIsHydrated(true);
@@ -43988,13 +44615,13 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
   [createCollectionScope]
 );
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = /* @__PURE__ */ React32.forwardRef(
+var RovingFocusGroup = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name20(function RovingFocusGroup2(props, forwardedRef) {
     return /* @__PURE__ */ jsx29(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }, "RovingFocusGroup")
 );
-var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
+var RovingFocusGroupImpl = /* @__PURE__ */ React33.forwardRef(/* @__PURE__ */ __name20(function RovingFocusGroupImpl2(props, forwardedRef) {
   const {
     __scopeRovingFocusGroup,
     orientation: orientation2,
@@ -44007,7 +44634,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
     preventScrollOnEntryFocus = false,
     ...groupProps
   } = props;
-  const ref = React32.useRef(null);
+  const ref = React33.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const direction = useDirection(dir);
   const [currentTabStopId, setCurrentTabStopId] = useControllableState({
@@ -44016,12 +44643,12 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
     onChange: onCurrentTabStopIdChange,
     caller: GROUP_NAME
   });
-  const [isTabbingBackOut, setIsTabbingBackOut] = React32.useState(false);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React33.useState(false);
   const handleEntryFocus = useCallbackRef(onEntryFocus);
   const getItems = useCollection(__scopeRovingFocusGroup);
-  const isClickFocusRef = React32.useRef(false);
-  const [focusableItemsCount, setFocusableItemsCount] = React32.useState(0);
-  React32.useEffect(() => {
+  const isClickFocusRef = React33.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React33.useState(0);
+  React33.useEffect(() => {
     const node = ref.current;
     if (node) {
       node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
@@ -44036,16 +44663,16 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
       dir: direction,
       loop,
       currentTabStopId,
-      onItemFocus: React32.useCallback(
+      onItemFocus: React33.useCallback(
         (tabStopId) => setCurrentTabStopId(tabStopId),
         [setCurrentTabStopId]
       ),
-      onItemShiftTab: React32.useCallback(() => setIsTabbingBackOut(true), []),
-      onFocusableItemAdd: React32.useCallback(
+      onItemShiftTab: React33.useCallback(() => setIsTabbingBackOut(true), []),
+      onFocusableItemAdd: React33.useCallback(
         () => setFocusableItemsCount((prevCount) => prevCount + 1),
         []
       ),
-      onFocusableItemRemove: React32.useCallback(
+      onFocusableItemRemove: React33.useCallback(
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
@@ -44085,7 +44712,7 @@ var RovingFocusGroupImpl = /* @__PURE__ */ React32.forwardRef(/* @__PURE__ */ __
   );
 }, "RovingFocusGroupImpl"));
 var ITEM_NAME = "RovingFocusGroupItem";
-var RovingFocusGroupItem = /* @__PURE__ */ React32.forwardRef(
+var RovingFocusGroupItem = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name20(function RovingFocusGroupItem2(props, forwardedRef) {
     const {
@@ -44110,7 +44737,7 @@ var RovingFocusGroupItem = /* @__PURE__ */ React32.forwardRef(
       onFocusableItemAdd();
       return () => onFocusableItemRemove();
     }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    React32.useEffect(() => {
+    React33.useEffect(() => {
       if (isHydrated || !focusable) {
         return;
       }
@@ -44356,10 +44983,10 @@ function __spreadArray(to, from, pack) {
 }
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-import * as React39 from "react";
+import * as React40 from "react";
 
 // node_modules/react-remove-scroll/dist/es2015/UI.js
-import * as React35 from "react";
+import * as React36 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/constants.js
 var zeroRightClassName = "right-scroll-bar-position";
@@ -44406,8 +45033,8 @@ function useCallbackRef2(initialValue, callback) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useMergeRef.js
-import * as React33 from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React33.useLayoutEffect : React33.useEffect;
+import * as React34 from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React34.useLayoutEffect : React34.useEffect;
 var currentValues = /* @__PURE__ */ new WeakMap();
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -44524,7 +45151,7 @@ function createSidecarMedium(options) {
 }
 
 // node_modules/use-sidecar/dist/es2015/exports.js
-import * as React34 from "react";
+import * as React35 from "react";
 var SideCar = function(_a) {
   var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
   if (!sideCar) {
@@ -44534,7 +45161,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React34.createElement(Target, __assign({}, rest));
+  return React35.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -44549,9 +45176,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React35.forwardRef(function(props, parentRef) {
-  var ref = React35.useRef(null);
-  var _a = React35.useState({
+var RemoveScroll = React36.forwardRef(function(props, parentRef) {
+  var ref = React36.useRef(null);
+  var _a = React36.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -44560,11 +45187,11 @@ var RemoveScroll = React35.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React35.createElement(
-    React35.Fragment,
+  return React36.createElement(
+    React36.Fragment,
     null,
-    enabled && React35.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
-    forwardProps ? React35.cloneElement(React35.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React35.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
+    enabled && React36.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
+    forwardProps ? React36.cloneElement(React36.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React36.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
   );
 });
 RemoveScroll.defaultProps = {
@@ -44578,13 +45205,13 @@ RemoveScroll.classNames = {
 };
 
 // node_modules/react-remove-scroll/dist/es2015/SideEffect.js
-import * as React38 from "react";
+import * as React39 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/component.js
-import * as React37 from "react";
+import * as React38 from "react";
 
 // node_modules/react-style-singleton/dist/es2015/hook.js
-import * as React36 from "react";
+import * as React37 from "react";
 
 // node_modules/get-nonce/dist/es2015/index.js
 var currentNonce;
@@ -44648,7 +45275,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React36.useEffect(function() {
+    React37.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -44722,7 +45349,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React37.useEffect(function() {
+  React38.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -44737,10 +45364,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
   useLockAttribute();
-  var gap = React37.useMemo(function() {
+  var gap = React38.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React37.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React38.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 
 // node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
@@ -44881,16 +45508,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React38.useRef([]);
-  var touchStartRef = React38.useRef([0, 0]);
-  var activeAxis = React38.useRef();
-  var id = React38.useState(idCounter++)[0];
-  var Style2 = React38.useState(styleSingleton)[0];
-  var lastProps = React38.useRef(props);
-  React38.useEffect(function() {
+  var shouldPreventQueue = React39.useRef([]);
+  var touchStartRef = React39.useRef([0, 0]);
+  var activeAxis = React39.useRef();
+  var id = React39.useState(idCounter++)[0];
+  var Style2 = React39.useState(styleSingleton)[0];
+  var lastProps = React39.useRef(props);
+  React39.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React38.useEffect(function() {
+  React39.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -44906,7 +45533,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React38.useCallback(function(event, parent) {
+  var shouldCancelEvent = React39.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -44948,7 +45575,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React38.useCallback(function(_event) {
+  var shouldPrevent = React39.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -44975,7 +45602,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React38.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React39.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -44984,17 +45611,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React38.useCallback(function(event) {
+  var scrollTouchStart = React39.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = void 0;
   }, []);
-  var scrollWheel = React38.useCallback(function(event) {
+  var scrollWheel = React39.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React38.useCallback(function(event) {
+  var scrollTouchMove = React39.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React38.useEffect(function() {
+  React39.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -45014,11 +45641,11 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var removeScrollBar = props.removeScrollBar, inert = props.inert;
-  return React38.createElement(
-    React38.Fragment,
+  return React39.createElement(
+    React39.Fragment,
     null,
-    inert ? React38.createElement(Style2, { styles: generateStyle(id) }) : null,
-    removeScrollBar ? React38.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
+    inert ? React39.createElement(Style2, { styles: generateStyle(id) }) : null,
+    removeScrollBar ? React39.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
   );
 }
 function getOutermostShadowParent(node) {
@@ -45037,8 +45664,8 @@ function getOutermostShadowParent(node) {
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-var ReactRemoveScroll = React39.forwardRef(function(props, ref) {
-  return React39.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React40.forwardRef(function(props, ref) {
+  return React40.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -45073,11 +45700,11 @@ var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
 var Menu = /* @__PURE__ */ __name21((props) => {
   const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
   const popperScope = usePopperScope(__scopeMenu);
-  const [content, setContent] = React40.useState(null);
-  const isUsingKeyboardRef = React40.useRef(false);
+  const [content, setContent] = React41.useState(null);
+  const isUsingKeyboardRef = React41.useRef(false);
   const handleOpenChange = useCallbackRef(onOpenChange);
   const direction = useDirection(dir);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     const handleKeyDown = /* @__PURE__ */ __name21(() => {
       isUsingKeyboardRef.current = true;
       document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
@@ -45091,7 +45718,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!open) {
       return;
     }
@@ -45111,7 +45738,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
         MenuRootProvider,
         {
           scope: __scopeMenu,
-          onClose: React40.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+          onClose: React41.useCallback(() => handleOpenChange(false), [handleOpenChange]),
           isUsingKeyboardRef,
           dir: direction,
           modal,
@@ -45121,7 +45748,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
     }
   ) });
 }, "Menu");
-var MenuAnchor = /* @__PURE__ */ React40.forwardRef(
+var MenuAnchor = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuAnchor2(props, forwardedRef) {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
@@ -45139,7 +45766,7 @@ var MenuPortal = /* @__PURE__ */ __name21((props) => {
 }, "MenuPortal");
 var CONTENT_NAME2 = "MenuContent";
 var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME2);
-var MenuContent = /* @__PURE__ */ React40.forwardRef(
+var MenuContent = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuContent2(props, forwardedRef) {
     const portalContext = usePortalContext(CONTENT_NAME2, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
@@ -45148,13 +45775,13 @@ var MenuContent = /* @__PURE__ */ React40.forwardRef(
     return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx30(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx30(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }, "MenuContent")
 );
-var MenuRootContentModal = /* @__PURE__ */ React40.forwardRef(
+var MenuRootContentModal = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuRootContentModal2(props, forwardedRef) {
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
@@ -45176,7 +45803,7 @@ var MenuRootContentModal = /* @__PURE__ */ React40.forwardRef(
     );
   }, "MenuRootContentModal")
 );
-var MenuRootContentNonModal = /* @__PURE__ */ React40.forwardRef(/* @__PURE__ */ __name21(function MenuRootContentNonModal2(props, forwardedRef) {
+var MenuRootContentNonModal = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name21(function MenuRootContentNonModal2(props, forwardedRef) {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
   return /* @__PURE__ */ jsx30(
     MenuContentImpl,
@@ -45191,7 +45818,7 @@ var MenuRootContentNonModal = /* @__PURE__ */ React40.forwardRef(/* @__PURE__ */
   );
 }, "MenuRootContentNonModal"));
 var Slot = createSlot("MenuContent.ScrollLock");
-var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
+var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuContentImpl2(props, forwardedRef) {
     const {
@@ -45215,16 +45842,16 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
     const popperScope = usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
     const getItems = useCollection2(__scopeMenu);
-    const [currentItemId, setCurrentItemId] = React40.useState(null);
-    const contentRef = React40.useRef(null);
+    const [currentItemId, setCurrentItemId] = React41.useState(null);
+    const contentRef = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
-    const timerRef = React40.useRef(0);
-    const searchRef = React40.useRef("");
-    const pointerGraceTimerRef = React40.useRef(0);
-    const pointerGraceIntentRef = React40.useRef(null);
-    const pointerDirRef = React40.useRef("right");
-    const lastPointerXRef = React40.useRef(0);
-    const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React40.Fragment;
+    const timerRef = React41.useRef(0);
+    const searchRef = React41.useRef("");
+    const pointerGraceTimerRef = React41.useRef(0);
+    const pointerGraceIntentRef = React41.useRef(null);
+    const pointerDirRef = React41.useRef("right");
+    const lastPointerXRef = React41.useRef(0);
+    const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React41.Fragment;
     const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot, allowPinchZoom: true } : void 0;
     const handleTypeaheadSearch = /* @__PURE__ */ __name21((key) => {
       const search = searchRef.current + key;
@@ -45243,11 +45870,11 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
         setTimeout(() => newItem.focus());
       }
     }, "handleTypeaheadSearch");
-    React40.useEffect(() => {
+    React41.useEffect(() => {
       return () => window.clearTimeout(timerRef.current);
     }, []);
     useFocusGuards();
-    const isPointerMovingToSubmenu = React40.useCallback((event) => {
+    const isPointerMovingToSubmenu = React41.useCallback((event) => {
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
@@ -45256,13 +45883,13 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
       {
         scope: __scopeMenu,
         searchRef,
-        onItemEnter: React40.useCallback(
+        onItemEnter: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) event.preventDefault();
           },
           [isPointerMovingToSubmenu]
         ),
-        onItemLeave: React40.useCallback(
+        onItemLeave: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) return;
             contentRef.current?.focus();
@@ -45270,14 +45897,14 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
           },
           [isPointerMovingToSubmenu]
         ),
-        onTriggerLeave: React40.useCallback(
+        onTriggerLeave: React41.useCallback(
           (event) => {
             if (isPointerMovingToSubmenu(event)) event.preventDefault();
           },
           [isPointerMovingToSubmenu]
         ),
         pointerGraceTimerRef,
-        onPointerGraceIntentChange: React40.useCallback((intent) => {
+        onPointerGraceIntentChange: React41.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
         children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
@@ -45376,15 +46003,15 @@ var MenuContentImpl = /* @__PURE__ */ React40.forwardRef(
 );
 var ITEM_NAME2 = "MenuItem";
 var ITEM_SELECT = "menu.itemSelect";
-var MenuItem = /* @__PURE__ */ React40.forwardRef(
+var MenuItem = /* @__PURE__ */ React41.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name21(function MenuItem2(props, forwardedRef) {
     const { disabled = false, onSelect, ...itemProps } = props;
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const rootContext = useMenuRootContext(ITEM_NAME2, props.__scopeMenu);
     const contentContext = useMenuContentContext(ITEM_NAME2, props.__scopeMenu);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    const isPointerDownRef = React40.useRef(false);
+    const isPointerDownRef = React41.useRef(false);
     const handleSelect = /* @__PURE__ */ __name21(() => {
       const menuItem = ref.current;
       if (!disabled && menuItem) {
@@ -45429,16 +46056,16 @@ var MenuItem = /* @__PURE__ */ React40.forwardRef(
     );
   }, "MenuItem")
 );
-var MenuItemImpl = /* @__PURE__ */ React40.forwardRef(
+var MenuItemImpl = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuItemImpl2(props, forwardedRef) {
     const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
     const contentContext = useMenuContentContext(ITEM_NAME2, __scopeMenu);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    const [isFocused, setIsFocused] = React40.useState(false);
-    const [textContent, setTextContent] = React40.useState("");
-    React40.useEffect(() => {
+    const [isFocused, setIsFocused] = React41.useState(false);
+    const [textContent, setTextContent] = React41.useState("");
+    React41.useEffect(() => {
       const menuItem = ref.current;
       if (menuItem) {
         setTextContent((menuItem.textContent ?? "").trim());
@@ -45496,7 +46123,7 @@ var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
   ITEM_INDICATOR_NAME,
   { checked: false }
 );
-var MenuSeparator = /* @__PURE__ */ React40.forwardRef(
+var MenuSeparator = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSeparator2(props, forwardedRef) {
     const { __scopeMenu, ...separatorProps } = props;
     return /* @__PURE__ */ jsx30(
@@ -45516,10 +46143,10 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
   const { __scopeMenu, children, open = false, onOpenChange } = props;
   const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
   const popperScope = usePopperScope(__scopeMenu);
-  const [trigger, setTrigger] = React40.useState(null);
-  const [content, setContent] = React40.useState(null);
+  const [trigger, setTrigger] = React41.useState(null);
+  const [content, setContent] = React41.useState(null);
   const handleOpenChange = useCallbackRef(onOpenChange);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
@@ -45546,21 +46173,21 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
   ) });
 }, "MenuSub");
 var SUB_TRIGGER_NAME = "MenuSubTrigger";
-var MenuSubTrigger = /* @__PURE__ */ React40.forwardRef(
+var MenuSubTrigger = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSubTrigger2(props, forwardedRef) {
     const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);
     const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);
-    const openTimerRef = React40.useRef(null);
+    const openTimerRef = React41.useRef(null);
     const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
     const scope = { __scopeMenu: props.__scopeMenu };
-    const clearOpenTimer = React40.useCallback(() => {
+    const clearOpenTimer = React41.useCallback(() => {
       if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
       openTimerRef.current = null;
     }, []);
-    React40.useEffect(() => clearOpenTimer, [clearOpenTimer]);
-    React40.useEffect(() => {
+    React41.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+    React41.useEffect(() => {
       const pointerGraceTimer = pointerGraceTimerRef.current;
       return () => {
         window.clearTimeout(pointerGraceTimer);
@@ -45652,14 +46279,14 @@ var MenuSubTrigger = /* @__PURE__ */ React40.forwardRef(
   }, "MenuSubTrigger")
 );
 var SUB_CONTENT_NAME = "MenuSubContent";
-var MenuSubContent = /* @__PURE__ */ React40.forwardRef(
+var MenuSubContent = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuSubContent2(props, forwardedRef) {
     const portalContext = usePortalContext(CONTENT_NAME2, props.__scopeMenu);
     const { forceMount = portalContext.forceMount, align = "start", ...subContentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
-    const ref = React40.useRef(null);
+    const ref = React41.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(
       MenuContentImpl,
@@ -45794,7 +46421,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
     modal = true
   } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const triggerRef = React41.useRef(null);
+  const triggerRef = React42.useRef(null);
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen ?? false,
@@ -45810,14 +46437,14 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
       contentId: useId(),
       open,
       onOpenChange: setOpen,
-      onOpenToggle: React41.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
       children: /* @__PURE__ */ jsx31(Root3, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 }, "DropdownMenu");
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuTrigger2(props, forwardedRef) {
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
@@ -45859,13 +46486,13 @@ var DropdownMenuPortal = /* @__PURE__ */ __name22((props) => {
   return /* @__PURE__ */ jsx31(Portal3, { ...menuScope, ...portalProps });
 }, "DropdownMenuPortal");
 var CONTENT_NAME3 = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuContent2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...contentProps } = props;
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    const hasInteractedOutsideRef = React41.useRef(false);
+    const hasInteractedOutsideRef = React42.useRef(false);
     return /* @__PURE__ */ jsx31(
       Content2,
       {
@@ -45900,7 +46527,7 @@ var DropdownMenuContent = /* @__PURE__ */ React41.forwardRef(
     );
   }, "DropdownMenuContent")
 );
-var DropdownMenuItem = /* @__PURE__ */ React41.forwardRef(
+var DropdownMenuItem = /* @__PURE__ */ React42.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name22(function DropdownMenuItem2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...itemProps } = props;
@@ -45908,7 +46535,7 @@ var DropdownMenuItem = /* @__PURE__ */ React41.forwardRef(
     return /* @__PURE__ */ jsx31(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }, "DropdownMenuItem")
 );
-var DropdownMenuSeparator = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
+var DropdownMenuSeparator = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
@@ -45924,12 +46551,12 @@ var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
   });
   return /* @__PURE__ */ jsx31(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 }, "DropdownMenuSub");
-var DropdownMenuSubTrigger = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
+var DropdownMenuSubTrigger = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 }, "DropdownMenuSubTrigger"));
-var DropdownMenuSubContent = /* @__PURE__ */ React41.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
+var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx31(
@@ -45962,6 +46589,9 @@ var Sub2 = DropdownMenuSub;
 var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
+// src/components/ContextMenu.tsx
+import { useState as useState35 } from "react";
+
 // src/components/AppearanceMenu.tsx
 import { useState as useState34 } from "react";
 
@@ -46478,14 +47108,19 @@ var ContextMenu = ({
   engine,
   cameraPreset,
   autoRotate,
+  referenceObject = null,
   onEngineSwitch,
   onCameraPresetSelect,
   onAutoRotateToggle,
+  onReferenceObjectSelect = () => {
+  },
   onDownloadGltf,
   onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
+  const { gridEnabled, setGridEnabled } = useAppearance();
   const [cameraSubOpen, setCameraSubOpen] = useState35(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState35(false);
   const [hoveredItem, setHoveredItem] = useState35(null);
   return /* @__PURE__ */ jsx34(
     "div",
@@ -46622,6 +47257,93 @@ var ContextMenu = ({
                   ]
                 }
               ),
+              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setReferenceObjectSubOpen, children: [
+                /* @__PURE__ */ jsxs8(
+                  SubTrigger2,
+                  {
+                    style: {
+                      ...itemStyles2,
+                      ...itemPaddingStyles2,
+                      backgroundColor: referenceObjectSubOpen || hoveredItem === "reference-object" ? "#404040" : "transparent"
+                    },
+                    onMouseEnter: () => setHoveredItem("reference-object"),
+                    onMouseLeave: () => setHoveredItem(null),
+                    onTouchStart: () => setHoveredItem("reference-object"),
+                    children: [
+                      /* @__PURE__ */ jsx34(
+                        "span",
+                        {
+                          style: { flex: 1, display: "flex", alignItems: "center" },
+                          children: "Show Reference Object"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx34(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "flex-end",
+                            gap: 6,
+                            marginLeft: "auto"
+                          },
+                          children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsx34(
+                  SubContent2,
+                  {
+                    style: { ...contentStyles2, marginLeft: -2 },
+                    collisionPadding: 10,
+                    avoidCollisions: true,
+                    children: REFERENCE_OBJECT_OPTIONS.map((option) => /* @__PURE__ */ jsxs8(
+                      Item22,
+                      {
+                        style: {
+                          ...itemStyles2,
+                          backgroundColor: hoveredItem === option.type ? "#404040" : "transparent"
+                        },
+                        onSelect: (event) => event.preventDefault(),
+                        onPointerDown: (event) => {
+                          event.preventDefault();
+                          onReferenceObjectSelect(option.type);
+                        },
+                        onMouseEnter: () => setHoveredItem(option.type),
+                        onMouseLeave: () => setHoveredItem(null),
+                        onTouchStart: () => setHoveredItem(option.type),
+                        children: [
+                          /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx34(DotIcon, {}) }),
+                          /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
+                        ]
+                      },
+                      option.type
+                    ))
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs8(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    backgroundColor: hoveredItem === "grid" ? "#404040" : "transparent"
+                  },
+                  onSelect: (e) => e.preventDefault(),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    setGridEnabled(!gridEnabled);
+                  },
+                  onMouseEnter: () => setHoveredItem("grid"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("grid"),
+                  children: [
+                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsx34(AppearanceMenu, {}),
               /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsx34(
@@ -46744,10 +47466,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect45, useMemo as useMemo30, useRef as useRef27, useState as useState37 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef27, useState as useState37 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect44, useMemo as useMemo29, useRef as useRef26, useState as useState36 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo31, useRef as useRef26, useState as useState36 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -46871,14 +47593,14 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef26(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo29(
+  const normalizedMetadata = useMemo31(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect44(() => {
+  useEffect46(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -46894,7 +47616,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState36(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect44(() => subscribeToRegistry(setEntries), []);
+  useEffect46(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -46911,7 +47633,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState37("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect45(() => {
+  useEffect47(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -46922,14 +47644,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect45(() => {
+  useEffect47(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo30(() => {
+  const filteredHotkeys = useMemo32(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -47151,7 +47873,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect46 } from "react";
+import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect48 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState38(false);
   const [menuPos, setMenuPos] = useState38({
@@ -47266,7 +47988,7 @@ var useContextMenu = ({ containerRef }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect46(() => {
+  useEffect48(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -47330,7 +48052,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE45.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE48.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -47353,6 +48075,7 @@ var CadViewerInner = (props) => {
     return stored === "true";
   });
   const [cameraPreset, setCameraPreset] = useState39("Custom");
+  const [referenceObject, setReferenceObject] = useState39(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
@@ -47463,24 +48186,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect47(() => {
+  useEffect49(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect47(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect47(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect47(() => {
+  useEffect49(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect47(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -47507,7 +48230,8 @@ var CadViewerInner = (props) => {
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             cameraType,
             onUserInteraction: handleUserInteraction,
-            onCameraControllerReady: handleCameraControllerReady
+            onCameraControllerReady: handleCameraControllerReady,
+            referenceObject
           }
         ) : /* @__PURE__ */ jsx37(
           CadViewerManifold_default,
@@ -47516,7 +48240,8 @@ var CadViewerInner = (props) => {
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             cameraType,
             onUserInteraction: handleUserInteraction,
-            onCameraControllerReady: handleCameraControllerReady
+            onCameraControllerReady: handleCameraControllerReady,
+            referenceObject
           }
         ),
         /* @__PURE__ */ jsxs11(
@@ -47548,6 +48273,7 @@ var CadViewerInner = (props) => {
             engine,
             cameraPreset,
             autoRotate,
+            referenceObject,
             onEngineSwitch: (newEngine) => {
               setEngine(newEngine);
               closeMenu();
@@ -47557,6 +48283,13 @@ var CadViewerInner = (props) => {
               toggleAutoRotate();
               closeMenu();
             },
+            onReferenceObjectSelect: (nextReferenceObject) => {
+              setReferenceObject(nextReferenceObject);
+              setAutoRotate(false);
+              setAutoRotateUserToggled(true);
+              setCameraPreset("Custom");
+              closeMenu();
+            },
             onDownloadGltf: () => {
               downloadGltf();
               closeMenu();
@@ -47594,14 +48327,14 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE49 from "three";
+import * as THREE52 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE46 from "three";
-import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
+import * as THREE49 from "three";
+import { BufferGeometry as BufferGeometry5, Float32BufferAttribute as Float32BufferAttribute4 } from "three";
 function createGeometryFromPolygons(polygons) {
-  const geometry = new BufferGeometry4();
+  const geometry = new BufferGeometry5();
   const vertices = [];
   const normals = [];
   for (const polygon2 of polygons) {
@@ -47612,12 +48345,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE46.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE46.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE46.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE46.Vector3().crossVectors(
-        new THREE46.Vector3().subVectors(v2, v1),
-        new THREE46.Vector3().subVectors(v3, v1)
+      const v1 = new THREE49.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE49.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE49.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE49.Vector3().crossVectors(
+        new THREE49.Vector3().subVectors(v2, v1),
+        new THREE49.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -47632,8 +48365,8 @@ function createGeometryFromPolygons(polygons) {
       );
     }
   }
-  geometry.setAttribute("position", new Float32BufferAttribute3(vertices, 3));
-  geometry.setAttribute("normal", new Float32BufferAttribute3(normals, 3));
+  geometry.setAttribute("position", new Float32BufferAttribute4(vertices, 3));
+  geometry.setAttribute("normal", new Float32BufferAttribute4(normals, 3));
   return geometry;
 }
 
@@ -47641,10 +48374,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE48 from "three";
+import * as THREE51 from "three";
 
 // src/utils/load-model.ts
-import * as THREE47 from "three";
+import * as THREE50 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";
@@ -47652,12 +48385,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE47.MeshStandardMaterial({
+    const material = new THREE50.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE47.Mesh(geometry, material);
+    return new THREE50.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -47690,9 +48423,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -47706,13 +48439,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE48.MeshStandardMaterial({
+      const material2 = new THREE51.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE48.DoubleSide
+        side: THREE51.DoubleSide
       });
-      const mesh2 = new THREE48.Mesh(threeGeom, material2);
+      const mesh2 = new THREE51.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47722,9 +48455,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -47741,17 +48474,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE48.Color(geomInfo.color);
+      const color = new THREE51.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE48.MeshStandardMaterial({
+      const material2 = new THREE51.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE48.DoubleSide
+        side: THREE51.DoubleSide
       });
-      const mesh2 = new THREE48.Mesh(threeGeom, material2);
+      const mesh2 = new THREE51.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47761,22 +48494,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE48.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE48.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE48.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE48.MeshStandardMaterial({
+  const geometry = new THREE51.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE51.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE48.Mesh(geometry, material);
+  const mesh = new THREE51.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -47797,11 +48530,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE49.Scene();
+  const scene = new THREE52.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE49.Color(backgroundColor), 1);
-  const camera = new THREE49.OrthographicCamera();
+  renderer.setClearColor(new THREE52.Color(backgroundColor), 1);
+  const camera = new THREE52.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -47815,11 +48548,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE49.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE52.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE49.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE52.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE49.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE52.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -47830,7 +48563,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createSimplifiedBoardGeom(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE49.Color(
+    const baseColor = new THREE52.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -47842,28 +48575,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE49.DoubleSide
+        side: THREE52.DoubleSide
       });
-      const mesh = new THREE49.Mesh(geometry, material);
+      const mesh = new THREE52.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE49.Color(8947848);
-  const gridHelper = new THREE49.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE52.Color(8947848);
+  const gridHelper = new THREE52.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE49.LineBasicMaterial) {
+    if (mat instanceof THREE52.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE49.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE49.Vector3());
-  const size4 = box.getSize(new THREE49.Vector3());
+  const box = new THREE52.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE52.Vector3());
+  const size4 = box.getSize(new THREE52.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {
@@ -47881,10 +48614,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect48, useState as useState40, useMemo as useMemo31, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect50, useState as useState40, useMemo as useMemo33, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo31(() => document.createElement("a"), []);
+  const link = useMemo33(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -47894,7 +48627,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect48(
+  useEffect50(
     () => () => {
       link.remove();
       instance = null;
@@ -47915,11 +48648,11 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect48(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect50(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo31(() => new GLTFExporter3(), []);
+  const exporter = useMemo33(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(