@tscircuit/3d-viewer 0.0.478 → 0.0.480

package/dist/index.js

@@ -14226,7 +14226,7 @@ var require_browser = __commonJS({
 
 // src/CadViewer.tsx
 import { useState as useState35, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect43 } from "react";
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su12 } from "@tscircuit/circuit-json-util";
@@ -29487,12 +29487,12 @@ var AnyCadComponent = ({
 
 // src/CadViewerContainer.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect16, useMemo as useMemo13, useState as useState9 } from "react";
-import * as THREE15 from "three";
+import * as THREE16 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.477",
+  version: "0.0.479",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -29937,6 +29937,7 @@ var Canvas = forwardRef(
 
 // src/react-three/OrbitControls.tsx
 import { useEffect as useEffect11, useMemo as useMemo10 } from "react";
+import * as THREE11 from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -29979,6 +29980,14 @@ var OrbitControls = ({
     if (enableDamping !== void 0) controls.enableDamping = enableDamping;
     if (dampingFactor !== void 0) controls.dampingFactor = dampingFactor;
     controls.zoomToCursor = true;
+    controls.mouseButtons = {
+      LEFT: THREE11.MOUSE.ROTATE,
+      // Left click to rotate
+      MIDDLE: THREE11.MOUSE.PAN,
+      // Middle click to pan
+      RIGHT: null
+      // Right-click always disabled - only context menu
+    };
     if (target) {
       controls.target.set(target[0], target[1], target[2]);
       controls.update();
@@ -30015,7 +30024,7 @@ var OrbitControls = ({
 
 // src/react-three/Grid.tsx
 import { useEffect as useEffect12, useMemo as useMemo11 } from "react";
-import * as THREE11 from "three";
+import * as THREE12 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -30061,24 +30070,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size5 = 1e3;
   const gridMesh = useMemo11(() => {
-    const geometry = new THREE11.PlaneGeometry(size5, size5);
+    const geometry = new THREE12.PlaneGeometry(size5, size5);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE11.ShaderMaterial({
+    const material = new THREE12.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE11.Color(15658734) },
-        sectionColor: { value: new THREE11.Color(13421823) },
+        gridColor: { value: new THREE12.Color(15658734) },
+        sectionColor: { value: new THREE12.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE11.DoubleSide
+      side: THREE12.DoubleSide
     });
-    const mesh = new THREE11.Mesh(geometry, material);
+    const mesh = new THREE12.Mesh(geometry, material);
     if (rotation2) {
       mesh.rotation.fromArray(rotation2);
     }
@@ -30107,15 +30116,15 @@ var Grid = ({
 
 // src/react-three/Lights.tsx
 import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
-import * as THREE12 from "three";
+import * as THREE13 from "three";
 var Lights = () => {
   const { scene } = useThree();
   const ambientLight = useMemo12(
-    () => new THREE12.AmbientLight(16777215, Math.PI / 2),
+    () => new THREE13.AmbientLight(16777215, Math.PI / 2),
     []
   );
   const pointLight = useMemo12(() => {
-    const light = new THREE12.PointLight(16777215, Math.PI / 4);
+    const light = new THREE13.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
@@ -30134,7 +30143,7 @@ var Lights = () => {
 
 // src/hooks/cameraAnimation.ts
 import { useCallback as useCallback6, useEffect as useEffect14, useRef as useRef5 } from "react";
-import * as THREE13 from "three";
+import * as THREE14 from "three";
 var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 var CameraAnimatorWithContext = () => {
   const {
@@ -30145,24 +30154,24 @@ var CameraAnimatorWithContext = () => {
     getPresetConfig
   } = useCameraController();
   const animationRef = useRef5(null);
-  const tempQuaternion = useRef5(new THREE13.Quaternion());
-  const tempTarget = useRef5(new THREE13.Vector3());
-  const tempUp = useRef5(new THREE13.Vector3());
-  const tempRoll = useRef5(new THREE13.Quaternion());
-  const tempRollTarget = useRef5(new THREE13.Quaternion());
-  const baseOrientationHelper = useRef5(new THREE13.Object3D());
-  const orientationHelper = useRef5(new THREE13.Object3D());
+  const tempQuaternion = useRef5(new THREE14.Quaternion());
+  const tempTarget = useRef5(new THREE14.Vector3());
+  const tempUp = useRef5(new THREE14.Vector3());
+  const tempRoll = useRef5(new THREE14.Quaternion());
+  const tempRollTarget = useRef5(new THREE14.Quaternion());
+  const baseOrientationHelper = useRef5(new THREE14.Object3D());
+  const orientationHelper = useRef5(new THREE14.Object3D());
   const animateTo = useCallback6(
     ({ position, target, up, durationMs = 600 }) => {
       if (!mainCameraRef.current) return;
       const currentTarget = controlsRef.current?.target ?? defaultTarget;
-      const toPosition = new THREE13.Vector3(
+      const toPosition = new THREE14.Vector3(
         position[0],
         position[1],
         position[2]
       );
-      const resolvedTarget = target ? new THREE13.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
-      const resolvedUp = new THREE13.Vector3(...up ?? [0, 0, 1]).normalize();
+      const resolvedTarget = target ? new THREE14.Vector3(target[0], target[1], target[2]) : defaultTarget.clone();
+      const resolvedUp = new THREE14.Vector3(...up ?? [0, 0, 1]).normalize();
       const toOrientationHelper = orientationHelper.current;
       toOrientationHelper.position.copy(toPosition);
       toOrientationHelper.up.copy(resolvedUp);
@@ -30319,14 +30328,14 @@ var useCameraSession = () => {
 
 // src/three-components/OrientationCubeCanvas.tsx
 import { useEffect as useEffect15, useRef as useRef7 } from "react";
-import * as THREE14 from "three";
+import * as THREE15 from "three";
 import { Text as TroikaText } from "troika-three-text";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function computePointInFront(rotationVector, distance3) {
-  const quaternion = new THREE14.Quaternion().setFromEuler(
-    new THREE14.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE15.Quaternion().setFromEuler(
+    new THREE15.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE14.Vector3(0, 0, 1);
+  const forwardVector = new THREE15.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance3);
   return result;
@@ -30344,7 +30353,7 @@ var OrientationCubeCanvas = () => {
     const canvas = document.createElement("canvas");
     canvasRef.current = canvas;
     containerRef.current.appendChild(canvas);
-    const renderer = new THREE14.WebGLRenderer({
+    const renderer = new THREE15.WebGLRenderer({
       canvas,
       antialias: true,
       alpha: true
@@ -30352,26 +30361,26 @@ var OrientationCubeCanvas = () => {
     renderer.setSize(120, 120);
     renderer.setPixelRatio(window.devicePixelRatio);
     rendererRef.current = renderer;
-    const scene = new THREE14.Scene();
+    const scene = new THREE15.Scene();
     sceneRef.current = scene;
-    const camera = new THREE14.PerspectiveCamera(75, 1, 0.1, 1e3);
+    const camera = new THREE15.PerspectiveCamera(75, 1, 0.1, 1e3);
     camera.up.set(0, 0, 1);
     cameraRef.current = camera;
-    const ambientLight = new THREE14.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE15.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
-    const group = new THREE14.Group();
+    const group = new THREE15.Group();
     group.rotation.fromArray([Math.PI / 2, 0, 0]);
     const cubeSize = 1;
-    const box = new THREE14.Mesh(
-      new THREE14.BoxGeometry(cubeSize, cubeSize, cubeSize),
-      new THREE14.MeshStandardMaterial({ color: "white" })
+    const box = new THREE15.Mesh(
+      new THREE15.BoxGeometry(cubeSize, cubeSize, cubeSize),
+      new THREE15.MeshStandardMaterial({ color: "white" })
     );
     group.add(box);
-    const edges = new THREE14.LineSegments(
-      new THREE14.EdgesGeometry(
-        new THREE14.BoxGeometry(cubeSize, cubeSize, cubeSize)
+    const edges = new THREE15.LineSegments(
+      new THREE15.EdgesGeometry(
+        new THREE15.BoxGeometry(cubeSize, cubeSize, cubeSize)
       ),
-      new THREE14.LineBasicMaterial({ color: 0, linewidth: 2 })
+      new THREE15.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     group.add(edges);
     scene.add(group);
@@ -30425,7 +30434,7 @@ var OrientationCubeCanvas = () => {
     const animate = () => {
       if (mainCameraRef.current) {
         const cameraPosition = computePointInFront(
-          mainCameraRef.current.rotation ?? new THREE14.Euler(0, 0, 0),
+          mainCameraRef.current.rotation ?? new THREE15.Euler(0, 0, 0),
           2
         );
         if (!cameraPosition.equals(camera.position)) {
@@ -30528,7 +30537,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE15.Vector3(0, 0, 1) },
+          scene: { up: new THREE16.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           onCreated: ({ camera }) => {
             mainCameraRef.current = camera;
@@ -30703,6 +30712,7 @@ var MANIFOLD_Z_OFFSET = 1e-3;
 var SMOOTH_CIRCLE_SEGMENTS = 32;
 var DEFAULT_SMT_PAD_THICKNESS = 0.035;
 var TRACE_TEXTURE_RESOLUTION = 150;
+var FAUX_BOARD_OPACITY = 0.6;
 var boardMaterialColors = {
   fr1: colors.fr1Tan,
   fr4: colors.fr4Tan
@@ -32383,7 +32393,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE16 from "three";
+import * as THREE17 from "three";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -32417,7 +32427,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component2]);
   const group = useMemo17(() => {
-    const g = new THREE16.Group();
+    const g = new THREE17.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -32477,9 +32487,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo17(() => {
-    const m = new THREE16.Mesh(
-      new THREE16.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE16.MeshStandardMaterial({
+    const m = new THREE17.Mesh(
+      new THREE17.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE17.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -32501,7 +32511,7 @@ var ErrorBox = ({ parent }) => {
 
 // src/three-components/STLModel.tsx
 import { useState as useState13, useEffect as useEffect21, useMemo as useMemo18 } from "react";
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -32532,12 +32542,12 @@ function STLModel({
   }, [stlUrl, stlData]);
   const mesh = useMemo18(() => {
     if (!geom) return null;
-    const material = new THREE17.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE17.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE18.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE18.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity
     });
-    return new THREE17.Mesh(geom, material);
+    return new THREE18.Mesh(geom, material);
   }, [geom, color, opacity]);
   useEffect21(() => {
     if (!rootObject || !mesh) return;
@@ -32602,11 +32612,11 @@ var ThreeErrorBoundary = class extends React11.Component {
 
 // src/three-components/JscadBoardTextures.tsx
 import { useEffect as useEffect22, useMemo as useMemo19 } from "react";
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 import { su as su9 } from "@tscircuit/circuit-json-util";
 
 // src/utils/soldermask-texture.ts
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
@@ -33151,10 +33161,10 @@ function createSoldermaskTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE18.CanvasTexture(canvas);
+  const texture = new THREE19.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE18.LinearMipmapLinearFilter;
-  texture.magFilter = THREE18.LinearFilter;
+  texture.minFilter = THREE19.LinearMipmapLinearFilter;
+  texture.magFilter = THREE19.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -33162,7 +33172,7 @@ function createSoldermaskTextureForLayer({
 
 // src/utils/silkscreen-texture.ts
 var import_text = __toESM(require_text(), 1);
-import * as THREE19 from "three";
+import * as THREE20 from "three";
 
 // node_modules/transformation-matrix/src/applyToPoint.js
 function applyToPoint(matrix, point2) {
@@ -33821,17 +33831,17 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE19.CanvasTexture(canvas);
+  const texture = new THREE20.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE19.LinearMipmapLinearFilter;
-  texture.magFilter = THREE19.LinearFilter;
+  texture.minFilter = THREE20.LinearMipmapLinearFilter;
+  texture.magFilter = THREE20.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 import { su as su7 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point2) {
   return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
@@ -33919,10 +33929,10 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE20.CanvasTexture(canvas);
+  const texture = new THREE21.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE20.LinearMipmapLinearFilter;
-  texture.magFilter = THREE20.LinearFilter;
+  texture.minFilter = THREE21.LinearMipmapLinearFilter;
+  texture.magFilter = THREE21.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -33930,7 +33940,7 @@ function createTraceTextureForLayer({
 
 // src/utils/copper-text-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 function parseDimension2(value, defaultValue) {
   if (value === void 0) return defaultValue;
   if (typeof value === "number") return value;
@@ -34169,17 +34179,17 @@ function createCopperTextTextureForLayer({
       );
     }
   });
-  const texture = new THREE21.CanvasTexture(canvas);
+  const texture = new THREE22.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE21.LinearMipmapLinearFilter;
-  texture.magFilter = THREE21.LinearFilter;
+  texture.minFilter = THREE22.LinearMipmapLinearFilter;
+  texture.magFilter = THREE22.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/panel-outline-texture.ts
-import * as THREE22 from "three";
+import * as THREE23 from "three";
 import { su as su8 } from "@tscircuit/circuit-json-util";
 function createPanelOutlineTextureForLayer({
   layer,
@@ -34235,10 +34245,10 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE22.CanvasTexture(canvas);
+  const texture = new THREE23.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE22.LinearMipmapLinearFilter;
-  texture.magFilter = THREE22.LinearFilter;
+  texture.minFilter = THREE23.LinearMipmapLinearFilter;
+  texture.magFilter = THREE23.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -34247,7 +34257,8 @@ function createPanelOutlineTextureForLayer({
 // src/three-components/JscadBoardTextures.tsx
 function JscadBoardTextures({
   circuitJson,
-  pcbThickness
+  pcbThickness,
+  isFaux = false
 }) {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
@@ -34361,20 +34372,21 @@ function JscadBoardTextures({
     const createTexturePlane2 = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = false) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE23.PlaneGeometry(
+      const planeGeom = new THREE24.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      const material = new THREE23.MeshBasicMaterial({
+      const material = new THREE24.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE23.DoubleSide,
+        side: THREE24.DoubleSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -1 : 0,
-        polygonOffsetUnits: usePolygonOffset ? -1 : 0
+        polygonOffsetUnits: usePolygonOffset ? -1 : 0,
+        opacity: isFaux ? FAUX_BOARD_OPACITY : 1
       });
-      const mesh = new THREE23.Mesh(planeGeom, material);
+      const mesh = new THREE24.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -34519,7 +34531,7 @@ function JscadBoardTextures({
           rootObject.remove(mesh);
         }
         mesh.geometry.dispose();
-        if (mesh.material instanceof THREE23.Material) {
+        if (mesh.material instanceof THREE24.Material) {
           mesh.material.dispose();
         }
       });
@@ -34720,7 +34732,8 @@ var CadViewerJscad = forwardRef3(
             JscadBoardTextures,
             {
               circuitJson: internalCircuitJson,
-              pcbThickness
+              pcbThickness,
+              isFaux: isFauxBoard
             }
           ),
           cad_components.map((cad_component2) => /* @__PURE__ */ jsx16(
@@ -34751,7 +34764,7 @@ import { useEffect as useEffect24, useMemo as useMemo22, useState as useState15
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState14, useEffect as useEffect23, useMemo as useMemo21, useRef as useRef9 } from "react";
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise3 = (points) => {
@@ -35101,17 +35114,17 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE24.BufferGeometry();
+  const geometry = new THREE25.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE24.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE25.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE24.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE25.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];
@@ -35145,7 +35158,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE25.Color(...colors.copper);
+var COPPER_COLOR = new THREE26.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
@@ -35719,8 +35732,8 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-smt-pads.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import * as THREE26 from "three";
-var COPPER_COLOR2 = new THREE26.Color(...colors.copper);
+import * as THREE27 from "three";
+var COPPER_COLOR2 = new THREE27.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
   const smtPadGeoms = [];
   const smtPads = su16(circuitJson).pcb_smtpad.list();
@@ -35759,7 +35772,7 @@ function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifold
 
 // src/utils/manifold/process-vias.ts
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -35812,7 +35825,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR3 = new THREE27.Color(...colors.copper);
+var COPPER_COLOR3 = new THREE28.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su17(circuitJson).pcb_via.list();
@@ -35864,7 +35877,7 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 }
 
 // src/textures/create-copper-pour-texture-for-layer.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
 function drawPolygon({
   ctx,
@@ -36010,17 +36023,17 @@ function createCopperPourTextureForLayer({
     ctx.fillStyle = copperColor;
     drawBrepShape({ ctx, pour, canvasXFromPcb, canvasYFromPcb });
   }
-  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-three-texture-meshes.ts
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 function createTexturePlane(config, boardData) {
   const {
     texture,
@@ -36028,25 +36041,27 @@ function createTexturePlane(config, boardData) {
     isBottomLayer,
     textureType,
     usePolygonOffset = false,
-    renderOrder = 0
+    renderOrder = 0,
+    isFaux = false
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE29.PlaneGeometry(
+  const planeGeom = new THREE30.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  const material = new THREE29.MeshBasicMaterial({
+  const material = new THREE30.MeshBasicMaterial({
     map: texture,
     transparent: true,
-    side: THREE29.DoubleSide,
+    side: THREE30.DoubleSide,
     depthWrite: textureType === "panel-outlines",
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
     // Increased for better z-fighting prevention
-    polygonOffsetUnits: usePolygonOffset ? -4 : 0
+    polygonOffsetUnits: usePolygonOffset ? -4 : 0,
+    opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   });
-  const mesh = new THREE29.Mesh(planeGeom, material);
+  const mesh = new THREE30.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -36059,7 +36074,7 @@ function createTexturePlane(config, boardData) {
   mesh.renderOrder = renderOrder;
   return mesh;
 }
-function createTextureMeshes(textures, boardData, pcbThickness) {
+function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const topTraceMesh = createTexturePlane(
@@ -36070,8 +36085,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "trace",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36083,8 +36099,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "trace-with-mask",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36097,8 +36114,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "silkscreen",
       usePolygonOffset: false,
-      renderOrder: 3
+      renderOrder: 3,
       // Render after traces
+      isFaux
     },
     boardData
   );
@@ -36111,8 +36129,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "trace",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36124,8 +36143,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "trace-with-mask",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36137,8 +36157,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "silkscreen",
       usePolygonOffset: false,
-      renderOrder: 3
+      renderOrder: 3,
       // Render after traces
+      isFaux
     },
     boardData
   );
@@ -36152,8 +36173,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       textureType: "soldermask",
       usePolygonOffset: true,
       // Enable polygon offset
-      renderOrder: 1
+      renderOrder: 1,
       // Render after board (renderOrder)
+      isFaux
     },
     boardData
   );
@@ -36167,8 +36189,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       textureType: "soldermask",
       usePolygonOffset: true,
       // Enable polygon offset
-      renderOrder: 1
+      renderOrder: 1,
       // Render after board (renderOrder)
+      isFaux
     },
     boardData
   );
@@ -36180,8 +36203,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "copper-text",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36193,8 +36217,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "copper-text",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36206,8 +36231,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "copper",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36219,8 +36245,9 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "copper",
       usePolygonOffset: false,
-      renderOrder: 2
+      renderOrder: 2,
       // Render after soldermask
+      isFaux
     },
     boardData
   );
@@ -36233,7 +36260,8 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: false,
       textureType: "panel-outlines",
       usePolygonOffset: false,
-      renderOrder: 4
+      renderOrder: 4,
+      isFaux
     },
     boardData
   );
@@ -36246,7 +36274,8 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
       isBottomLayer: true,
       textureType: "panel-outlines",
       usePolygonOffset: false,
-      renderOrder: 4
+      renderOrder: 4,
+      isFaux
     },
     boardData
   );
@@ -36422,7 +36451,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE30.Color(
+              color: new THREE31.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -36452,7 +36481,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE30.Color(
+          color: new THREE31.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -36602,11 +36631,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE31 from "three";
-var DEFAULT_SIDE = THREE31.DoubleSide;
+import * as THREE32 from "three";
+var DEFAULT_SIDE = THREE32.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -36614,7 +36643,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE31.MeshPhysicalMaterial({
+    return new THREE32.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -36624,18 +36653,18 @@ var createBoardMaterial = ({
       sheen: 0,
       clearcoat: 0,
       transparent: isFaux,
-      opacity: isFaux ? 0.6 : 1,
+      opacity: isFaux ? FAUX_BOARD_OPACITY : 1,
       flatShading: true
     });
   }
-  return new THREE31.MeshStandardMaterial({
+  return new THREE32.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
     metalness: 0.1,
     roughness: 0.8,
     transparent: true,
-    opacity: isFaux ? 0.6 : 0.9
+    opacity: isFaux ? FAUX_BOARD_OPACITY : 0.9
   });
 };
 
@@ -36644,12 +36673,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE32.Mesh(
+    const mesh = new THREE33.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE32.DoubleSide,
+        side: THREE33.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -36659,11 +36688,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE32.Mesh(
+        const mesh = new THREE33.Mesh(
           comp.geometry,
-          new THREE32.MeshStandardMaterial({
+          new THREE33.MeshStandardMaterial({
             color: comp.color,
-            side: THREE32.DoubleSide,
+            side: THREE33.DoubleSide,
             flatShading: true,
             // Consistent with board
             polygonOffset: true,
@@ -36843,12 +36872,13 @@ try {
     pcbThickness,
     error: builderError,
     isLoading: builderIsLoading,
-    boardData
+    boardData,
+    isFauxBoard
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
   const geometryMeshes = useMemo22(() => createGeometryMeshes(geoms), [geoms]);
   const textureMeshes = useMemo22(
-    () => createTextureMeshes(textures, boardData, pcbThickness),
-    [textures, boardData, pcbThickness]
+    () => createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard),
+    [textures, boardData, pcbThickness, isFauxBoard]
   );
   const cadComponents = useMemo22(
     () => su19(circuitJson).cad_component.list(),
@@ -43592,7 +43622,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE33.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE34.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState35("manifold");
@@ -43859,11 +43889,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su20 } from "@tscircuit/circuit-json-util";
-import * as THREE37 from "three";
+import * as THREE38 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -43877,12 +43907,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE34.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE34.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE34.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE34.Vector3().crossVectors(
-        new THREE34.Vector3().subVectors(v2, v1),
-        new THREE34.Vector3().subVectors(v3, v1)
+      const v1 = new THREE35.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE35.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE35.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE35.Vector3().crossVectors(
+        new THREE35.Vector3().subVectors(v2, v1),
+        new THREE35.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -43906,10 +43936,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 THREE36 from "three";
+import * as THREE37 from "three";
 
 // src/utils/load-model.ts
-import * as THREE35 from "three";
+import * as THREE36 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";
@@ -43917,12 +43947,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE35.MeshStandardMaterial({
+    const material = new THREE36.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE35.Mesh(geometry, material);
+    return new THREE36.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -43955,9 +43985,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -43971,13 +44001,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE36.MeshStandardMaterial({
+      const material2 = new THREE37.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE36.DoubleSide
+        side: THREE37.DoubleSide
       });
-      const mesh2 = new THREE36.Mesh(threeGeom, material2);
+      const mesh2 = new THREE37.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -43987,9 +44017,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -44006,17 +44036,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE36.Color(geomInfo.color);
+      const color = new THREE37.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE36.MeshStandardMaterial({
+      const material2 = new THREE37.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE36.DoubleSide
+        side: THREE37.DoubleSide
       });
-      const mesh2 = new THREE36.Mesh(threeGeom, material2);
+      const mesh2 = new THREE37.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -44026,22 +44056,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE36.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE36.MeshStandardMaterial({
+  const geometry = new THREE37.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE37.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE36.Mesh(geometry, material);
+  const mesh = new THREE37.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -44062,11 +44092,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE37.Scene();
+  const scene = new THREE38.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE37.Color(backgroundColor), 1);
-  const camera = new THREE37.OrthographicCamera();
+  renderer.setClearColor(new THREE38.Color(backgroundColor), 1);
+  const camera = new THREE38.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -44080,11 +44110,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 THREE37.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE38.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE37.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE38.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE37.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE38.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su20(circuitJson).cad_component.list();
@@ -44095,7 +44125,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE37.Color(
+    const baseColor = new THREE38.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -44107,28 +44137,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE37.DoubleSide
+        side: THREE38.DoubleSide
       });
-      const mesh = new THREE37.Mesh(geometry, material);
+      const mesh = new THREE38.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE37.Color(8947848);
-  const gridHelper = new THREE37.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE38.Color(8947848);
+  const gridHelper = new THREE38.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 THREE37.LineBasicMaterial) {
+    if (mat instanceof THREE38.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE37.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE37.Vector3());
-  const size5 = box.getSize(new THREE37.Vector3());
+  const box = new THREE38.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE38.Vector3());
+  const size5 = box.getSize(new THREE38.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size5.x, size5.y, size5.z);
   if (maxDim > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.478",
+  "version": "0.0.480",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",