@tscircuit/3d-viewer 0.0.583 → 0.0.584

package/dist/index.js

@@ -14432,12 +14432,12 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useEffect as useEffect48, useRef as useRef29, useState as useState39 } from "react";
-import * as THREE46 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 useMemo21 } 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 useEffect19, useMemo as useMemo15, useState as useState11 } from "react";
-import * as THREE21 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.582",
+  version: "0.0.583",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -33692,6 +33692,85 @@ 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 useEffect18, useRef as useRef7 } from "react";
 import * as THREE20 from "three";
@@ -33841,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 = () => {
@@ -33861,6 +34355,7 @@ var CadViewerContainer = forwardRef2(
     clickToInteractEnabled = false,
     boardDimensions,
     boardCenter,
+    referenceObject,
     onUserInteraction,
     onCameraControllerReady
   }, ref) => {
@@ -33873,28 +34368,39 @@ var CadViewerContainer = forwardRef2(
       handleCameraCreated,
       handleControlsChange: handleSessionControlsChange
     } = useCameraSession();
-    useEffect19(() => {
+    useEffect20(() => {
       if (onCameraControllerReady) {
         onCameraControllerReady(controller);
       }
     }, [controller, onCameraControllerReady]);
-    const gridSectionSize = useMemo15(() => {
+    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 = useMemo15(() => {
+    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 THREE21.Vector3(0, 0, 1) },
+          scene: { up: new THREE23.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -33930,6 +34436,15 @@ var CadViewerContainer = forwardRef2(
                 shadowsEnabled: lightingEnabled
               }
             ),
+            referenceObject && /* @__PURE__ */ jsx15(
+              ReferenceObject,
+              {
+                type: referenceObject,
+                boardDimensions,
+                boardCenter
+              }
+            ),
+            comparisonBounds && /* @__PURE__ */ jsx15(FitCameraToComparison, { bounds: comparisonBounds }),
             gridEnabled && /* @__PURE__ */ jsx15(
               Grid,
               {
@@ -34003,9 +34518,9 @@ var CadViewerContainer = forwardRef2(
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo16(() => {
+  return useMemo17(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -34015,12 +34530,12 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState12, useEffect as useEffect20 } 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);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -34049,7 +34564,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState13, useEffect as useEffect21, 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);
@@ -35363,7 +35878,7 @@ var BoardGeomBuilder = class {
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState13(null);
   const isProcessingRef = useRef8(false);
-  useEffect21(() => {
+  useEffect22(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -35409,10 +35924,10 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState14, useCallback as useCallback8, useEffect as useEffect23, useMemo as useMemo18 } 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 useEffect22, useMemo as useMemo17 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo18 } from "react";
 import { Text as TroikaText2 } from "troika-three-text";
 var Text = ({
   children,
@@ -35427,7 +35942,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo17(() => {
+  const mesh = useMemo18(() => {
     const textMesh = new TroikaText2();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -35452,7 +35967,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -35465,7 +35980,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE22 from "three";
+import * as THREE24 from "three";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -35487,7 +36002,7 @@ var Error3d = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo18(() => {
+  const position = useMemo19(() => {
     if (cad_component?.position) {
       const p = [
         cad_component.position.x,
@@ -35498,12 +36013,12 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component]);
-  const group = useMemo18(() => {
-    const g = new THREE22.Group();
+  const group = useMemo19(() => {
+    const g = new THREE24.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -35558,10 +36073,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo18(() => {
-    const m = new THREE22.Mesh(
-      new THREE22.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE22.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",
@@ -35572,7 +36087,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -35581,114 +36096,12 @@ var ErrorBox = ({ parent }) => {
   return null;
 };
 
-// src/three-components/STLModel.tsx
-import { useState as useState15, useEffect as useEffect24, useMemo as useMemo19 } from "react";
-import * as THREE23 from "three";
-import { STLLoader } from "three-stdlib";
-function STLModel({
-  stlUrl,
-  stlData,
-  mtlUrl,
-  color,
-  opacity = 1,
-  layerType
-}) {
-  const { rootObject } = useThree();
-  const [geom, setGeom] = useState15(null);
-  useEffect24(() => {
-    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 = useMemo19(() => {
-    if (!geom) return null;
-    const isBoardLayer = layerType === "board";
-    const material = new THREE23.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE23.Color(color[0], color[1], color[2]) : color,
-      transparent: opacity !== 1,
-      opacity,
-      polygonOffset: isBoardLayer,
-      polygonOffsetFactor: isBoardLayer ? 6 : 0,
-      polygonOffsetUnits: isBoardLayer ? 6 : 0
-    });
-    const createdMesh = new THREE23.Mesh(geom, material);
-    createdMesh.renderOrder = isBoardLayer ? -1 : 1;
-    configureObjectShadows(createdMesh, {
-      castShadow: !isBoardLayer && opacity === 1,
-      receiveShadow: true
-    });
-    return createdMesh;
-  }, [geom, color, opacity, layerType]);
-  useEffect24(() => {
-    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 useEffect25, useMemo as useMemo20 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -35743,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 THREE24 from "three";
+import * as THREE25 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -35821,10 +36234,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE25.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -35832,7 +36245,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -35900,17 +36313,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE26 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";
 
@@ -36028,10 +36441,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -36039,7 +36452,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE27 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(
@@ -36161,17 +36574,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE28.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE28.LinearMipmapLinearFilter;
+  texture.magFilter = THREE28.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
@@ -36282,17 +36695,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE28.CanvasTexture(canvas);
+  const texture = new THREE29.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE28.LinearMipmapLinearFilter;
-  texture.magFilter = THREE28.LinearFilter;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -36520,17 +36933,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE29.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE29.LinearMipmapLinearFilter;
-  texture.magFilter = THREE29.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -36605,17 +37018,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -36766,17 +37179,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -36885,17 +37298,17 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
@@ -37030,17 +37443,17 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
@@ -37133,10 +37546,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE34.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE34.LinearMipmapLinearFilter;
-  texture.magFilter = THREE34.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -37224,10 +37637,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE35.CanvasTexture(canvas);
+  const combinedTexture = new THREE36.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE35.LinearFilter;
-  combinedTexture.magFilter = THREE35.LinearFilter;
+  combinedTexture.minFilter = THREE36.LinearFilter;
+  combinedTexture.magFilter = THREE36.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -37252,11 +37665,11 @@ var createMaskedCopperMask = ({
     if (!texture?.image) continue;
     ctx.drawImage(texture.image, 0, 0, width10, height10);
   }
-  const maskTexture = new THREE35.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE35.NoColorSpace;
+  const maskTexture = new THREE36.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE36.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE35.LinearFilter;
-  maskTexture.magFilter = THREE35.LinearFilter;
+  maskTexture.minFilter = THREE36.LinearFilter;
+  maskTexture.magFilter = THREE36.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -37394,7 +37807,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -37417,7 +37830,7 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE36 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;
@@ -37506,13 +37919,13 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
   };
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE36.CanvasTexture(canvas);
-  texture.colorSpace = THREE36.NoColorSpace;
+  const texture = new THREE37.CanvasTexture(canvas);
+  texture.colorSpace = THREE37.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE36.LinearFilter;
-  texture.magFilter = THREE36.LinearFilter;
-  texture.wrapS = THREE36.ClampToEdgeWrapping;
-  texture.wrapT = THREE36.ClampToEdgeWrapping;
+  texture.minFilter = THREE37.LinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
+  texture.wrapS = THREE37.ClampToEdgeWrapping;
+  texture.wrapT = THREE37.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -37619,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 THREE36.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;
@@ -37649,16 +38062,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE37.PlaneGeometry(
+  const planeGeom = new THREE38.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE37.SRGBColorSpace;
+  texture.colorSpace = THREE38.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE37.FrontSide,
+    side: THREE38.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37667,12 +38080,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE37.MeshPhysicalMaterial({
+  const material = new THREE38.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE37.Vector2(
+    normalScale: new THREE38.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -37686,7 +38099,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE37.Mesh(planeGeom, material);
+  const mesh = new THREE38.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -37734,7 +38147,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE38 from "three";
+import * as THREE39 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -37830,7 +38243,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE38.Texture) {
+        if (texture && texture instanceof THREE39.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -37849,16 +38262,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE38.PlaneGeometry(
+      const planeGeom = new THREE39.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE38.SRGBColorSpace;
+      texture.colorSpace = THREE39.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE38.FrontSide,
+        side: THREE39.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -37869,12 +38282,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE38.MeshPhysicalMaterial({
+      const material = new THREE39.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE38.Vector2(
+        normalScale: new THREE39.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -37886,7 +38299,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE38.Mesh(planeGeom, material);
+      const mesh = new THREE39.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -37936,7 +38349,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE38.Material) {
+        } else if (mesh.material instanceof THREE39.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -37947,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";
 
@@ -38045,16 +38560,17 @@ var CadViewerJscad = forwardRef3(
     clickToInteractEnabled,
     onUserInteraction,
     onCameraControllerReady,
-    resolveStaticAsset
+    resolveStaticAsset,
+    referenceObject
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo21(() => {
+    const internalCircuitJson = useMemo22(() => {
       return addFauxBoardIfNeeded(
         circuitJson ?? childrenSoup
       );
     }, [circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo21(() => {
+    const initialCameraPosition = useMemo22(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -38080,7 +38596,7 @@ var CadViewerJscad = forwardRef3(
         return [5, -5, 5];
       }
     }, [internalCircuitJson]);
-    const isFauxBoard = useMemo21(() => {
+    const isFauxBoard = useMemo22(() => {
       if (!internalCircuitJson) return false;
       try {
         const board = su11(internalCircuitJson).pcb_board.list()[0];
@@ -38089,23 +38605,25 @@ var CadViewerJscad = forwardRef3(
         return false;
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo21(() => {
+    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 = useMemo21(() => {
+    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;
@@ -38123,6 +38641,7 @@ var CadViewerJscad = forwardRef3(
         clickToInteractEnabled,
         boardDimensions,
         boardCenter,
+        referenceObject,
         onUserInteraction,
         onCameraControllerReady,
         children: [
@@ -38168,13 +38687,13 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect27, useMemo as useMemo23, useState as useState17 } from "react";
-import * as THREE45 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 useEffect26, useMemo as useMemo22, useRef as useRef9, useState as useState16 } from "react";
-import * as THREE42 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) => {
@@ -38523,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 THREE40 from "three";
+import * as THREE42 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE39 from "three";
+import * as THREE41 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE39.BufferGeometry();
+  const geometry = new THREE41.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE39.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE41.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE39.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];
@@ -38567,7 +39086,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE40.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;
@@ -39198,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 THREE41 from "three";
+import * as THREE43 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -39236,7 +39755,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE41.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();
@@ -39294,7 +39813,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const [error, setError] = useState16(null);
   const [isLoading, setIsLoading] = useState16(true);
   const manifoldInstancesForCleanup = useRef9([]);
-  const boardData = useMemo22(() => {
+  const boardData = useMemo23(() => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
@@ -39318,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 = useMemo22(() => {
+  const isFauxBoard = useMemo23(() => {
     const boards = su16(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
-  const traceTextureResolution = useMemo22(() => {
+  const traceTextureResolution = useMemo23(() => {
     if (!boardData) return TRACE_TEXTURE_RESOLUTION;
     return getLayerTextureResolution(boardData, TRACE_TEXTURE_RESOLUTION);
   }, [boardData]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setPcbThickness(null);
@@ -39456,7 +39975,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE42.Color(
+              color: new THREE44.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -39486,7 +40005,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE42.Color(
+          color: new THREE44.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -39510,7 +40029,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       manifoldInstancesForCleanup.current = [];
     };
   }, [manifoldJSModule, circuitJson, boardData]);
-  const textures = useMemo22(() => {
+  const textures = useMemo23(() => {
     if (!boardData || !traceTextureResolution) return null;
     return createCombinedBoardTextures({
       circuitJson,
@@ -39531,11 +40050,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE44 from "three";
+import * as THREE46 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE43 from "three";
-var DEFAULT_SIDE = THREE43.DoubleSide;
+import * as THREE45 from "three";
+var DEFAULT_SIDE = THREE45.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -39543,7 +40062,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE43.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,
@@ -39563,7 +40082,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE43.MeshStandardMaterial({
+  return new THREE45.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -39582,12 +40101,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE44.Mesh(
+    const mesh = new THREE46.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE44.DoubleSide,
+        side: THREE46.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -39598,11 +40117,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE44.Mesh(
+        const mesh = new THREE46.Mesh(
           comp.geometry,
-          new THREE44.MeshStandardMaterial({
+          new THREE46.MeshStandardMaterial({
             color: comp.color,
-            side: THREE44.DoubleSide,
+            side: THREE46.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -39647,14 +40166,14 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE45.Texture) {
+        if (texture && texture instanceof THREE47.Texture) {
           texture.dispose();
         }
       }
       material.dispose();
     }
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (!rootObject) return;
     for (const mesh of geometryMeshes) {
       let shouldShow = true;
@@ -39676,7 +40195,7 @@ var BoardMeshes = ({
       }
     };
   }, [rootObject, geometryMeshes, visibility]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!rootObject) return;
     for (const mesh of textureMeshes) {
       rootObject.add(mesh);
@@ -39700,17 +40219,18 @@ var CadViewerManifold = ({
   onUserInteraction,
   children,
   onCameraControllerReady,
-  resolveStaticAsset
+  resolveStaticAsset,
+  referenceObject
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo23(() => {
+  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();
-  useEffect27(() => {
+  useEffect28(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -39781,27 +40301,26 @@ try {
     boardData,
     isFauxBoard
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility);
-  const geometryMeshes = useMemo23(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo23(
+  const geometryMeshes = useMemo24(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo24(
     () => createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard),
     [textures, boardData, pcbThickness, isFauxBoard]
   );
-  const cadComponents = useMemo23(
+  const cadComponents = useMemo24(
     () => su17(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo23(() => {
+  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 = useMemo23(() => {
+  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 = useMemo23(() => {
+  const initialCameraPosition = useMemo24(() => {
     if (!boardData) return [5, -5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -39864,6 +40383,7 @@ try {
       clickToInteractEnabled,
       boardDimensions,
       boardCenter,
+      referenceObject,
       onUserInteraction,
       onCameraControllerReady,
       children: [
@@ -39895,9 +40415,6 @@ 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 React42 from "react";
 
@@ -46072,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";
 
@@ -46588,15 +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",
@@ -46733,6 +47257,72 @@ 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,
                 {
@@ -46876,10 +47466,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect46, useMemo as useMemo31, 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 useEffect45, useMemo as useMemo30, 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;
@@ -47003,14 +47593,14 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef26(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo30(
+  const normalizedMetadata = useMemo31(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
     }),
     [metadata.shortcut, metadata.description]
   );
-  useEffect45(() => {
+  useEffect46(() => {
     const registration = {
       id,
       ...normalizedMetadata,
@@ -47026,7 +47616,7 @@ var useHotkeyRegistry = () => {
   const [entries, setEntries] = useState36(
     () => Array.from(hotkeyRegistry.values())
   );
-  useEffect45(() => subscribeToRegistry(setEntries), []);
+  useEffect46(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
 var registerHotkeyViewer = (element) => {
@@ -47043,7 +47633,7 @@ var KeyboardShortcutsDialog = ({
   const [query, setQuery] = useState37("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect46(() => {
+  useEffect47(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -47054,14 +47644,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo31(() => {
+  const filteredHotkeys = useMemo32(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -47283,7 +47873,7 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect47 } 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({
@@ -47398,7 +47988,7 @@ var useContextMenu = ({ containerRef }) => {
     }
     setMenuVisible(false);
   }, []);
-  useEffect47(() => {
+  useEffect48(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -47462,7 +48052,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE46.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;
@@ -47485,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();
@@ -47595,24 +48186,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect48(() => {
+  useEffect49(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect48(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect48(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect48(() => {
+  useEffect49(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect48(() => {
+  useEffect49(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -47639,7 +48230,8 @@ var CadViewerInner = (props) => {
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             cameraType,
             onUserInteraction: handleUserInteraction,
-            onCameraControllerReady: handleCameraControllerReady
+            onCameraControllerReady: handleCameraControllerReady,
+            referenceObject
           }
         ) : /* @__PURE__ */ jsx37(
           CadViewerManifold_default,
@@ -47648,7 +48240,8 @@ var CadViewerInner = (props) => {
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             cameraType,
             onUserInteraction: handleUserInteraction,
-            onCameraControllerReady: handleCameraControllerReady
+            onCameraControllerReady: handleCameraControllerReady,
+            referenceObject
           }
         ),
         /* @__PURE__ */ jsxs11(
@@ -47680,6 +48273,7 @@ var CadViewerInner = (props) => {
             engine,
             cameraPreset,
             autoRotate,
+            referenceObject,
             onEngineSwitch: (newEngine) => {
               setEngine(newEngine);
               closeMenu();
@@ -47689,6 +48283,13 @@ var CadViewerInner = (props) => {
               toggleAutoRotate();
               closeMenu();
             },
+            onReferenceObjectSelect: (nextReferenceObject) => {
+              setReferenceObject(nextReferenceObject);
+              setAutoRotate(false);
+              setAutoRotateUserToggled(true);
+              setCameraPreset("Custom");
+              closeMenu();
+            },
             onDownloadGltf: () => {
               downloadGltf();
               closeMenu();
@@ -47726,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 THREE50 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 THREE47 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) {
@@ -47744,12 +48345,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE47.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE47.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE47.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE47.Vector3().crossVectors(
-        new THREE47.Vector3().subVectors(v2, v1),
-        new THREE47.Vector3().subVectors(v3, v1)
+      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,
@@ -47764,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;
 }
 
@@ -47773,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 THREE49 from "three";
+import * as THREE51 from "three";
 
 // src/utils/load-model.ts
-import * as THREE48 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";
@@ -47784,12 +48385,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE48.MeshStandardMaterial({
+    const material = new THREE50.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE48.Mesh(geometry, material);
+    return new THREE50.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -47822,9 +48423,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE49.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);
@@ -47838,13 +48439,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE49.MeshStandardMaterial({
+      const material2 = new THREE51.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE49.DoubleSide
+        side: THREE51.DoubleSide
       });
-      const mesh2 = new THREE49.Mesh(threeGeom, material2);
+      const mesh2 = new THREE51.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47854,9 +48455,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE49.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);
@@ -47873,17 +48474,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE49.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 THREE49.MeshStandardMaterial({
+      const material2 = new THREE51.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE49.DoubleSide
+        side: THREE51.DoubleSide
       });
-      const mesh2 = new THREE49.Mesh(threeGeom, material2);
+      const mesh2 = new THREE51.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -47893,22 +48494,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE49.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE49.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE49.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 THREE49.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE49.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 THREE49.Mesh(geometry, material);
+  const mesh = new THREE51.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -47929,11 +48530,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE50.Scene();
+  const scene = new THREE52.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE50.Color(backgroundColor), 1);
-  const camera = new THREE50.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;
@@ -47947,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 THREE50.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE52.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE50.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE52.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE50.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();
@@ -47962,7 +48563,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createSimplifiedBoardGeom(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE50.Color(
+    const baseColor = new THREE52.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -47974,28 +48575,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE50.DoubleSide
+        side: THREE52.DoubleSide
       });
-      const mesh = new THREE50.Mesh(geometry, material);
+      const mesh = new THREE52.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE50.Color(8947848);
-  const gridHelper = new THREE50.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 THREE50.LineBasicMaterial) {
+    if (mat instanceof THREE52.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE50.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE50.Vector3());
-  const size4 = box.getSize(new THREE50.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) {
@@ -48013,10 +48614,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect49, useState as useState40, useMemo as useMemo32, 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 = useMemo32(() => 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");
@@ -48026,7 +48627,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect49(
+  useEffect50(
     () => () => {
       link.remove();
       instance = null;
@@ -48047,11 +48648,11 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect49(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect50(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo32(() => new GLTFExporter3(), []);
+  const exporter = useMemo33(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(