@tscircuit/3d-viewer 0.0.231 → 0.0.232

package/dist/index.js

@@ -11721,7 +11721,7 @@ var require_vectorText = __commonJS({
       }
       return line3;
     };
-    var vectorText2 = (options, text) => {
+    var vectorText3 = (options, text) => {
       const {
         xOffset,
         yOffset,
@@ -11778,7 +11778,7 @@ var require_vectorText = __commonJS({
       }
       return output;
     };
-    module.exports = vectorText2;
+    module.exports = vectorText3;
   }
 });
 
@@ -13979,12 +13979,15 @@ var require_browser = __commonJS({
   }
 });
 
+// src/CadViewer.tsx
+import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
 import { useMemo } from "react";
-var useConvertChildrenToSoup = (children, defaultSoup) => {
+var useConvertChildrenToSoup = (children) => {
   return useMemo(() => {
-    if (!children) return;
+    if (!children) return void 0;
     const circuit = new Circuit();
     circuit.add(children);
     circuit.render();
@@ -13992,7 +13995,7 @@ var useConvertChildrenToSoup = (children, defaultSoup) => {
   }, [children]);
 };
 
-// src/CadViewer.tsx
+// src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/soup-util";
 import { useMemo as useMemo5, forwardRef as forwardRef2 } from "react";
 
@@ -16982,7 +16985,7 @@ import { Canvas, useFrame as useFrame2 } from "@react-three/fiber";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.230",
+  version: "0.0.231",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17019,6 +17022,7 @@ var package_default = {
     "jscad-electronics": "^0.0.27",
     "jscad-fiber": "^0.0.79",
     "jscad-planner": "^0.0.13",
+    "manifold-3d": "^3.1.0",
     react: "^18.3.1",
     "react-dom": "^18.3.1",
     "react-use-gesture": "^9.1.3"
@@ -17399,15 +17403,23 @@ var platedHole = (plated_hole, ctx) => {
           (0, import_primitives3.cylinder)({
             center: [plated_hole.x, plated_hole.y, 0],
             radius: plated_hole.hole_diameter / 2,
-            height: 1.2
+            height: ctx.pcbThickness
           }),
           (0, import_primitives3.cylinder)({
-            center: [plated_hole.x, plated_hole.y, 1.2 / 2],
+            center: [
+              plated_hole.x,
+              plated_hole.y,
+              ctx.pcbThickness / 2 + platedHoleLipHeight / 2 + M
+            ],
             radius: plated_hole.outer_diameter / 2,
             height: platedHoleLipHeight
           }),
           (0, import_primitives3.cylinder)({
-            center: [plated_hole.x, plated_hole.y, -1.2 / 2],
+            center: [
+              plated_hole.x,
+              plated_hole.y,
+              -ctx.pcbThickness / 2 - platedHoleLipHeight / 2 - M
+            ],
             radius: plated_hole.outer_diameter / 2,
             height: platedHoleLipHeight
           })
@@ -17457,82 +17469,81 @@ var platedHole = (plated_hole, ctx) => {
     const shouldRotate = plated_hole.hole_height > plated_hole.hole_width;
     const holeWidth = shouldRotate ? plated_hole.hole_height : plated_hole.hole_width;
     const holeHeight = shouldRotate ? plated_hole.hole_width : plated_hole.hole_height;
-    const outerHeight = shouldRotate ? plated_hole.outer_width || holeWidth + 0.2 : plated_hole.outer_height || holeHeight + 0.2;
+    const outerPillWidth = shouldRotate ? plated_hole.outer_height || holeHeight + 0.2 : plated_hole.outer_width || holeWidth + 0.2;
+    const outerPillHeight = shouldRotate ? plated_hole.outer_width || holeWidth + 0.2 : plated_hole.outer_height || holeHeight + 0.2;
     const holeRadius = holeHeight / 2;
+    const outerRadius = outerPillHeight / 2;
     const rectLength = Math.abs(holeWidth - holeHeight);
-    const mainRect = (0, import_primitives3.cuboid)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y, 0] : [plated_hole.x, plated_hole.y, 0],
-      size: shouldRotate ? [holeHeight, rectLength, 1.2] : [rectLength, holeHeight, 1.2]
+    const outerRectLength = Math.abs(outerPillWidth - outerPillHeight);
+    const mainRectBarrel = (0, import_primitives3.cuboid)({
+      center: [plated_hole.x, plated_hole.y, 0],
+      size: shouldRotate ? [holeHeight, rectLength, ctx.pcbThickness] : [rectLength, holeHeight, ctx.pcbThickness]
     });
-    const leftCap = (0, import_primitives3.cylinder)({
+    const leftCapBarrel = (0, import_primitives3.cylinder)({
       center: shouldRotate ? [plated_hole.x, plated_hole.y - rectLength / 2, 0] : [plated_hole.x - rectLength / 2, plated_hole.y, 0],
       radius: holeRadius,
-      height: 1.2
+      height: ctx.pcbThickness
     });
-    const rightCap = (0, import_primitives3.cylinder)({
+    const rightCapBarrel = (0, import_primitives3.cylinder)({
       center: shouldRotate ? [plated_hole.x, plated_hole.y + rectLength / 2, 0] : [plated_hole.x + rectLength / 2, plated_hole.y, 0],
       radius: holeRadius,
-      height: 1.2
+      height: ctx.pcbThickness
     });
-    const outerMainRect = (0, import_primitives3.cuboid)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y, 1.2 / 2] : [plated_hole.x, plated_hole.y, 1.2 / 2],
-      size: shouldRotate ? [outerHeight, rectLength, M] : [rectLength, outerHeight, M]
+    const barrelUnion = (0, import_booleans.union)(mainRectBarrel, leftCapBarrel, rightCapBarrel);
+    const topLipZ = ctx.pcbThickness / 2 + platedHoleLipHeight / 2 + M;
+    const topLipRect = (0, import_primitives3.cuboid)({
+      center: [plated_hole.x, plated_hole.y, topLipZ],
+      size: shouldRotate ? [outerPillHeight, outerRectLength, platedHoleLipHeight] : [outerRectLength, outerPillHeight, platedHoleLipHeight]
     });
-    const outerLeftCap = (0, import_primitives3.cylinder)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y - rectLength / 2, 1.2 / 2] : [plated_hole.x - rectLength / 2, plated_hole.y, 1.2 / 2],
-      radius: outerHeight / 2,
+    const topLipLeftCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y - outerRectLength / 2, topLipZ] : [plated_hole.x - outerRectLength / 2, plated_hole.y, topLipZ],
+      radius: outerRadius,
       height: platedHoleLipHeight
     });
-    const outerRightCap = (0, import_primitives3.cylinder)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y + rectLength / 2, 1.2 / 2] : [plated_hole.x + rectLength / 2, plated_hole.y, 1.2 / 2],
-      radius: outerHeight / 2,
+    const topLipRightCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y + outerRectLength / 2, topLipZ] : [plated_hole.x + outerRectLength / 2, plated_hole.y, topLipZ],
+      radius: outerRadius,
       height: platedHoleLipHeight
     });
-    const bottomMainRect = (0, import_primitives3.cuboid)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y, -1.2 / 2] : [plated_hole.x, plated_hole.y, -1.2 / 2],
-      size: shouldRotate ? [outerHeight, rectLength, M] : [rectLength, outerHeight, M]
+    const topLipUnion = (0, import_booleans.union)(topLipRect, topLipLeftCap, topLipRightCap);
+    const bottomLipZ = -ctx.pcbThickness / 2 - platedHoleLipHeight / 2 - M;
+    const bottomLipRect = (0, import_primitives3.cuboid)({
+      center: [plated_hole.x, plated_hole.y, bottomLipZ],
+      size: shouldRotate ? [outerPillHeight, outerRectLength, platedHoleLipHeight] : [outerRectLength, outerPillHeight, platedHoleLipHeight]
     });
-    const bottomLeftCap = (0, import_primitives3.cylinder)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y - rectLength / 2, -1.2 / 2] : [plated_hole.x - rectLength / 2, plated_hole.y, -1.2 / 2],
-      radius: outerHeight / 2,
+    const bottomLipLeftCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y - outerRectLength / 2, bottomLipZ] : [plated_hole.x - outerRectLength / 2, plated_hole.y, bottomLipZ],
+      radius: outerRadius,
       height: platedHoleLipHeight
     });
-    const bottomRightCap = (0, import_primitives3.cylinder)({
-      center: shouldRotate ? [plated_hole.x, plated_hole.y + rectLength / 2, -1.2 / 2] : [plated_hole.x + rectLength / 2, plated_hole.y, -1.2 / 2],
-      radius: outerHeight / 2,
+    const bottomLipRightCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y + outerRectLength / 2, bottomLipZ] : [plated_hole.x + outerRectLength / 2, plated_hole.y, bottomLipZ],
+      radius: outerRadius,
       height: platedHoleLipHeight
     });
+    const bottomLipUnion = (0, import_booleans.union)(
+      bottomLipRect,
+      bottomLipLeftCap,
+      bottomLipRightCap
+    );
+    const drillRect = (0, import_primitives3.cuboid)({
+      center: [plated_hole.x, plated_hole.y, 0],
+      size: shouldRotate ? [holeHeight - 2 * M, rectLength, ctx.pcbThickness + 2 * M] : [rectLength, holeHeight - 2 * M, ctx.pcbThickness + 2 * M]
+    });
+    const drillLeftCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y - rectLength / 2, 0] : [plated_hole.x - rectLength / 2, plated_hole.y, 0],
+      radius: holeRadius - M,
+      height: ctx.pcbThickness + 2 * M
+    });
+    const drillRightCap = (0, import_primitives3.cylinder)({
+      center: shouldRotate ? [plated_hole.x, plated_hole.y + rectLength / 2, 0] : [plated_hole.x + rectLength / 2, plated_hole.y, 0],
+      radius: holeRadius - M,
+      height: ctx.pcbThickness + 2 * M
+    });
+    const drillUnion = (0, import_booleans.union)(drillRect, drillLeftCap, drillRightCap);
     return (0, import_colors2.colorize)(
       colors.copper,
-      (0, import_booleans.subtract)(
-        (0, import_booleans.union)(
-          mainRect,
-          leftCap,
-          rightCap,
-          outerMainRect,
-          outerLeftCap,
-          outerRightCap,
-          bottomMainRect,
-          bottomLeftCap,
-          bottomRightCap
-        ),
-        (0, import_booleans.union)(
-          (0, import_primitives3.cuboid)({
-            center: [plated_hole.x, plated_hole.y, 0],
-            size: shouldRotate ? [holeHeight - platedHoleLipHeight, rectLength, 1.5] : [rectLength, holeHeight - platedHoleLipHeight, 1.5]
-          }),
-          (0, import_primitives3.cylinder)({
-            center: shouldRotate ? [plated_hole.x, plated_hole.y - rectLength / 2, 0] : [plated_hole.x - rectLength / 2, plated_hole.y, 0],
-            radius: holeRadius - platedHoleLipHeight,
-            height: 1.5
-          }),
-          (0, import_primitives3.cylinder)({
-            center: shouldRotate ? [plated_hole.x, plated_hole.y + rectLength / 2, 0] : [plated_hole.x + rectLength / 2, plated_hole.y, 0],
-            radius: holeRadius - platedHoleLipHeight,
-            height: 1.5
-          })
-        )
-      )
+      (0, import_booleans.subtract)((0, import_booleans.union)(barrelUnion, topLipUnion, bottomLipUnion), drillUnion)
     );
   }
   if (plated_hole.shape === "pill_hole_with_rect_pad") {
@@ -18893,14 +18904,15 @@ var Error3d = ({
   );
 };
 
-// src/CadViewer.tsx
+// src/CadViewerJscad.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var CadViewer = forwardRef2(
+var CadViewerJscad = forwardRef2(
   ({ soup, circuitJson, children, autoRotateDisabled, clickToInteractEnabled }, ref) => {
+    const childrenSoup = useConvertChildrenToSoup(children);
     const internalCircuitJson = useMemo5(() => {
       const cj = soup ?? circuitJson;
-      return cj ?? useConvertChildrenToSoup(children, cj);
-    }, [soup, circuitJson, children]);
+      return cj ?? childrenSoup;
+    }, [soup, circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
     const initialCameraPosition = useMemo5(() => {
       if (!internalCircuitJson) return [5, 5, 5];
@@ -18962,17 +18974,1072 @@ var CadViewer = forwardRef2(
   }
 );
 
-// src/convert-circuit-json-to-3d-svg.ts
-var import_debug = __toESM(require_browser(), 1);
+// src/CadViewerManifold.tsx
+import { useEffect as useEffect6, useState as useState8, useMemo as useMemo7 } from "react";
+import { su as su6 } from "@tscircuit/soup-util";
+import * as THREE8 from "three";
+import ManifoldModule from "manifold-3d";
+
+// src/hooks/useManifoldBoardBuilder.ts
+import { useState as useState7, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef6 } from "react";
 import { su as su5 } from "@tscircuit/soup-util";
 import * as THREE7 from "three";
+
+// src/utils/manifold-mesh-to-three-geometry.ts
+import * as THREE4 from "three";
+function manifoldMeshToThreeGeometry(manifoldMesh) {
+  const geometry = new THREE4.BufferGeometry();
+  geometry.setAttribute(
+    "position",
+    new THREE4.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+  );
+  geometry.setIndex(new THREE4.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];
+      const count = manifoldMesh.runIndex[i + 1] - start;
+      geometry.addGroup(start, count, 0);
+    }
+  } else {
+    geometry.addGroup(0, manifoldMesh.triVerts.length, 0);
+  }
+  return geometry;
+}
+
+// src/utils/trace-texture.ts
+import * as THREE5 from "three";
+function isWireRoutePoint(point) {
+  return point && point.route_type === "wire" && typeof point.layer === "string" && typeof point.width === "number";
+}
+function createTraceTextureForLayer({
+  layer,
+  pcbTraces,
+  boardData,
+  traceColor,
+  traceTextureResolution,
+  allPcbVias,
+  allPcbPlatedHoles
+}) {
+  const tracesOnLayer = pcbTraces.filter(
+    (t) => t.route.some((p) => isWireRoutePoint(p) && p.layer === layer)
+  );
+  if (tracesOnLayer.length === 0) return null;
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
+  }
+  tracesOnLayer.forEach((trace) => {
+    let firstPoint = true;
+    ctx.beginPath();
+    ctx.strokeStyle = traceColor;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    let currentLineWidth = 0;
+    for (const point of trace.route) {
+      if (!isWireRoutePoint(point) || point.layer !== layer) {
+        if (!firstPoint) ctx.stroke();
+        firstPoint = true;
+        continue;
+      }
+      const pcbX = point.x;
+      const pcbY = point.y;
+      currentLineWidth = point.width * traceTextureResolution;
+      ctx.lineWidth = currentLineWidth;
+      const canvasX = (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+      const canvasY = (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+      if (firstPoint) {
+        ctx.moveTo(canvasX, canvasY);
+        firstPoint = false;
+      } else {
+        ctx.lineTo(canvasX, canvasY);
+      }
+    }
+    if (!firstPoint) {
+      ctx.stroke();
+    }
+  });
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "black";
+  allPcbVias.forEach((via) => {
+    const canvasX = (via.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+    const canvasY = (-(via.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+    const canvasRadius = via.outer_diameter / 2 * traceTextureResolution;
+    ctx.beginPath();
+    ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
+    ctx.fill();
+  });
+  allPcbPlatedHoles.forEach((ph) => {
+    if (ph.layers.includes(layer) && ph.shape === "circle") {
+      const canvasX = (ph.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+      const canvasY = (-(ph.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+      const canvasRadius = ph.outer_diameter / 2 * traceTextureResolution;
+      ctx.beginPath();
+      ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
+      ctx.fill();
+    }
+  });
+  ctx.globalCompositeOperation = "source-over";
+  const texture = new THREE5.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE5.LinearMipmapLinearFilter;
+  texture.magFilter = THREE5.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
+}
+
+// src/utils/silkscreen-texture.ts
+var import_text2 = __toESM(require_text(), 1);
+import * as THREE6 from "three";
+function createSilkscreenTextureForLayer({
+  layer,
+  pcbSilkscreenTexts,
+  pcbSilkscreenPaths,
+  boardData,
+  silkscreenColor = "rgb(255,255,255)",
+  traceTextureResolution
+}) {
+  const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer);
+  const pathsOnLayer = pcbSilkscreenPaths.filter((p) => p.layer === layer);
+  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0) return null;
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
+  }
+  ctx.strokeStyle = silkscreenColor;
+  ctx.fillStyle = silkscreenColor;
+  pathsOnLayer.forEach((path) => {
+    if (path.route.length < 2) return;
+    ctx.beginPath();
+    ctx.lineWidth = (path.stroke_width || 0.1) * traceTextureResolution;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    path.route.forEach((point, index) => {
+      const canvasX = (point.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+      const canvasY = (-(point.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+      if (index === 0) ctx.moveTo(canvasX, canvasY);
+      else ctx.lineTo(canvasX, canvasY);
+    });
+    ctx.stroke();
+  });
+  textsOnLayer.forEach((textS) => {
+    const fontSize = textS.font_size || 0.25;
+    const textStrokeWidth = Math.min(Math.max(0.01, fontSize * 0.1), fontSize * 0.05) * traceTextureResolution;
+    ctx.lineWidth = textStrokeWidth;
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "miter";
+    const rawTextOutlines = (0, import_text2.vectorText)({
+      height: fontSize * 0.57,
+      input: textS.text
+    });
+    const processedTextOutlines = [];
+    rawTextOutlines.forEach((outline) => {
+      if (outline.length === 29) {
+        processedTextOutlines.push(
+          outline.slice(0, 15)
+        );
+        processedTextOutlines.push(
+          outline.slice(14, 29)
+        );
+      } else if (outline.length === 17) {
+        processedTextOutlines.push(
+          outline.slice(0, 10)
+        );
+        processedTextOutlines.push(
+          outline.slice(9, 17)
+        );
+      } else {
+        processedTextOutlines.push(outline);
+      }
+    });
+    const points = processedTextOutlines.flat();
+    const textBounds = {
+      minX: points.length > 0 ? Math.min(...points.map((p) => p[0])) : 0,
+      maxX: points.length > 0 ? Math.max(...points.map((p) => p[0])) : 0,
+      minY: points.length > 0 ? Math.min(...points.map((p) => p[1])) : 0,
+      maxY: points.length > 0 ? Math.max(...points.map((p) => p[1])) : 0
+    };
+    const textCenterX = (textBounds.minX + textBounds.maxX) / 2;
+    const textCenterY = (textBounds.minY + textBounds.maxY) / 2;
+    let xOff = -textCenterX;
+    let yOff = -textCenterY;
+    if (textS.anchor_alignment?.includes("right")) xOff = -textBounds.maxX;
+    else if (textS.anchor_alignment?.includes("left")) xOff = -textBounds.minX;
+    if (textS.anchor_alignment?.includes("top")) yOff = -textBounds.maxY;
+    else if (textS.anchor_alignment?.includes("bottom")) yOff = -textBounds.minY;
+    const transformMatrices = [];
+    let rotationDeg = textS.ccw_rotation ?? 0;
+    if (textS.layer === "bottom") {
+      transformMatrices.push(
+        translate2(textCenterX, textCenterY),
+        { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+        translate2(-textCenterX, -textCenterY)
+      );
+      rotationDeg = -rotationDeg;
+    }
+    if (rotationDeg) {
+      const rad = rotationDeg * Math.PI / 180;
+      transformMatrices.push(
+        translate2(textCenterX, textCenterY),
+        rotate(rad),
+        translate2(-textCenterX, -textCenterY)
+      );
+    }
+    const finalTransformMatrix = transformMatrices.length > 0 ? compose(...transformMatrices) : void 0;
+    processedTextOutlines.forEach((segment) => {
+      ctx.beginPath();
+      segment.forEach((p, index) => {
+        let transformedP = { x: p[0], y: p[1] };
+        if (finalTransformMatrix) {
+          transformedP = applyToPoint(finalTransformMatrix, transformedP);
+        }
+        const pcbX = transformedP.x + xOff + textS.anchor_position.x;
+        const pcbY = transformedP.y + yOff + textS.anchor_position.y;
+        const canvasX = (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+        const canvasY = (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+        if (index === 0) ctx.moveTo(canvasX, canvasY);
+        else ctx.lineTo(canvasX, canvasY);
+      });
+      ctx.stroke();
+    });
+  });
+  const texture = new THREE6.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE6.LinearMipmapLinearFilter;
+  texture.magFilter = THREE6.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
+}
+
+// src/utils/pad-geoms.ts
+function createPadManifoldOp({
+  Manifold,
+  pad,
+  padBaseThickness
+}) {
+  if (pad.shape === "rect") {
+    return Manifold.cube([pad.width, pad.height, padBaseThickness], true);
+  } else if (pad.shape === "circle" && pad.radius) {
+    return Manifold.cylinder(padBaseThickness, pad.radius, -1, 32, true);
+  }
+  return null;
+}
+
+// src/utils/hole-geoms.ts
+function createCircleHoleDrill({
+  Manifold,
+  x,
+  y,
+  diameter,
+  thickness,
+  segments = 32
+}) {
+  const drill = Manifold.cylinder(
+    thickness * 1.2,
+    diameter / 2,
+    diameter / 2,
+    segments,
+    true
+  );
+  return drill.translate([x, y, 0]);
+}
+function createPlatedHoleDrill({
+  Manifold,
+  x,
+  y,
+  outerDiameter,
+  thickness,
+  zOffset = 1e-3,
+  segments = 32
+}) {
+  const boardHoleRadius = outerDiameter / 2 + zOffset;
+  const drill = Manifold.cylinder(
+    thickness * 1.2,
+    boardHoleRadius,
+    boardHoleRadius,
+    segments,
+    true
+  );
+  return drill.translate([x, y, 0]);
+}
+
+// src/utils/via-geoms.ts
+function createViaCopper({
+  Manifold,
+  x,
+  y,
+  outerDiameter,
+  holeDiameter,
+  thickness,
+  zOffset = 1e-3,
+  segments = 32
+}) {
+  const copperPartThickness = thickness + 2 * zOffset;
+  let viaCopper = Manifold.cylinder(
+    copperPartThickness,
+    outerDiameter / 2,
+    -1,
+    segments,
+    true
+  );
+  const drill = Manifold.cylinder(
+    copperPartThickness * 1.05,
+    holeDiameter / 2,
+    -1,
+    segments,
+    true
+  );
+  const finalViaCopperOp = viaCopper.subtract(drill);
+  return finalViaCopperOp.translate([x, y, 0]);
+}
+
+// src/hooks/useManifoldBoardBuilder.ts
+var arePointsClockwise2 = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    if (points[i] && points[j]) {
+      area += points[i][0] * points[j][1];
+      area -= points[j][0] * points[i][1];
+    }
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+var COPPER_COLOR = new THREE7.Color(
+  colors.copper[0],
+  colors.copper[1],
+  colors.copper[2]
+);
+var DEFAULT_SMT_PAD_THICKNESS = 0.035;
+var SMOOTH_CIRCLE_SEGMENTS = 32;
+var MANIFOLD_Z_OFFSET = 1e-3;
+var TRACE_TEXTURE_RESOLUTION = 50;
+var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
+  const [boardThreeGeom, setBoardThreeGeom] = useState7(null);
+  const [boardColor, setBoardColor] = useState7(
+    new THREE7.Color(
+      colors.fr4Green[0],
+      colors.fr4Green[1],
+      colors.fr4Green[2]
+    )
+  );
+  const [otherComponentGeoms, setOtherComponentGeoms] = useState7([]);
+  const [topTraceTexture, setTopTraceTexture] = useState7(null);
+  const [bottomTraceTexture, setBottomTraceTexture] = useState7(null);
+  const [topSilkscreenTexture, setTopSilkscreenTexture] = useState7(null);
+  const [bottomSilkscreenTexture, setBottomSilkscreenTexture] = useState7(null);
+  const [pcbThickness, setPcbThickness] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [isLoading, setIsLoading] = useState7(true);
+  const manifoldInstancesForCleanup = useRef6([]);
+  const boardData = useMemo6(() => {
+    if (!circuitJson) return null;
+    const boards = su5(circuitJson).pcb_board.list();
+    if (boards.length === 0) {
+      return null;
+    }
+    return boards[0];
+  }, [circuitJson]);
+  function isCircleHole(hole) {
+    return (hole.shape === "circle" || hole.hole_shape === "circle") && typeof hole.hole_diameter === "number";
+  }
+  useEffect5(() => {
+    if (!manifoldJSModule || !circuitJson || !boardData) {
+      setBoardThreeGeom(null);
+      setOtherComponentGeoms([]);
+      setTopTraceTexture(null);
+      setBottomTraceTexture(null);
+      setTopSilkscreenTexture(null);
+      setBottomSilkscreenTexture(null);
+      setPcbThickness(null);
+      if (circuitJson && su5(circuitJson).pcb_board.list().length === 0) {
+        setError("No pcb_board found in circuitJson.");
+      }
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    const Manifold = manifoldJSModule.Manifold;
+    const CrossSection = manifoldJSModule.CrossSection;
+    manifoldInstancesForCleanup.current.forEach((inst) => inst.delete());
+    manifoldInstancesForCleanup.current = [];
+    let boardManifold = null;
+    const newOtherGeoms = [];
+    try {
+      const currentPcbThickness = boardData.thickness || 1.6;
+      setPcbThickness(currentPcbThickness);
+      let currentBoardOp;
+      if (boardData.outline && boardData.outline.length >= 3) {
+        let outlineVec2 = boardData.outline.map(
+          (p) => [p.x, p.y]
+        );
+        if (arePointsClockwise2(outlineVec2)) {
+          outlineVec2 = outlineVec2.reverse();
+        }
+        const crossSection = CrossSection.ofPolygons([outlineVec2]);
+        manifoldInstancesForCleanup.current.push(crossSection);
+        currentBoardOp = Manifold.extrude(
+          crossSection,
+          currentPcbThickness,
+          void 0,
+          // nDivisions
+          void 0,
+          // twistDegrees
+          void 0,
+          // scaleTop
+          true
+          // center (for Z-axis)
+        );
+      } else {
+        if (boardData.outline && boardData.outline.length > 0) {
+          console.warn(
+            "Board outline has fewer than 3 points, falling back to rectangular board."
+          );
+        }
+        currentBoardOp = Manifold.cube(
+          [boardData.width, boardData.height, currentPcbThickness],
+          true
+          // center (for all axes)
+        );
+      }
+      manifoldInstancesForCleanup.current.push(currentBoardOp);
+      currentBoardOp = currentBoardOp.translate([
+        boardData.center.x,
+        boardData.center.y,
+        0
+      ]);
+      const pcbHoles = su5(circuitJson).pcb_hole.list();
+      const pcbPlatedHoles = su5(circuitJson).pcb_plated_hole.list();
+      const pcbVias = su5(circuitJson).pcb_via.list();
+      const allHoleDrills = [];
+      pcbHoles.forEach((hole) => {
+        if (isCircleHole(hole)) {
+          const translatedDrill = createCircleHoleDrill({
+            Manifold,
+            x: hole.x,
+            y: hole.y,
+            diameter: hole.hole_diameter,
+            thickness: currentPcbThickness,
+            segments: SMOOTH_CIRCLE_SEGMENTS
+          });
+          manifoldInstancesForCleanup.current.push(translatedDrill);
+          allHoleDrills.push(translatedDrill);
+        }
+      });
+      pcbPlatedHoles.forEach((ph) => {
+        if (ph.shape === "circle") {
+          const translatedDrill = createPlatedHoleDrill({
+            Manifold,
+            x: ph.x,
+            y: ph.y,
+            outerDiameter: ph.outer_diameter,
+            thickness: currentPcbThickness,
+            zOffset: MANIFOLD_Z_OFFSET,
+            segments: SMOOTH_CIRCLE_SEGMENTS
+          });
+          manifoldInstancesForCleanup.current.push(translatedDrill);
+          allHoleDrills.push(translatedDrill);
+        }
+      });
+      pcbVias.forEach((via) => {
+        if (typeof via.outer_diameter === "number") {
+          const translatedDrill = createPlatedHoleDrill({
+            Manifold,
+            x: via.x,
+            y: via.y,
+            outerDiameter: via.outer_diameter,
+            thickness: currentPcbThickness,
+            zOffset: MANIFOLD_Z_OFFSET,
+            segments: SMOOTH_CIRCLE_SEGMENTS
+          });
+          manifoldInstancesForCleanup.current.push(translatedDrill);
+          allHoleDrills.push(translatedDrill);
+        }
+      });
+      if (allHoleDrills.length > 0) {
+        const unionedDrills = Manifold.union(allHoleDrills);
+        manifoldInstancesForCleanup.current.push(unionedDrills);
+        const nextBoard = currentBoardOp.subtract(unionedDrills);
+        manifoldInstancesForCleanup.current.push(nextBoard);
+        currentBoardOp = nextBoard;
+      }
+      boardManifold = currentBoardOp;
+      if (boardManifold) {
+        const boardThreeMesh = boardManifold.getMesh();
+        const finalBoardGeom = manifoldMeshToThreeGeometry(boardThreeMesh);
+        setBoardThreeGeom(finalBoardGeom);
+      } else {
+        setBoardThreeGeom(null);
+      }
+      const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
+      setBoardColor(
+        new THREE7.Color(matColorArray[0], matColorArray[1], matColorArray[2])
+      );
+      pcbPlatedHoles.forEach((ph, index) => {
+        if (ph.shape === "circle") {
+          const copperPartThickness = currentPcbThickness + 2 * MANIFOLD_Z_OFFSET;
+          let platedPart = Manifold.cylinder(
+            copperPartThickness,
+            ph.outer_diameter / 2,
+            -1,
+            SMOOTH_CIRCLE_SEGMENTS,
+            true
+          );
+          manifoldInstancesForCleanup.current.push(platedPart);
+          const drill = Manifold.cylinder(
+            copperPartThickness * 1.05,
+            ph.hole_diameter / 2,
+            -1,
+            SMOOTH_CIRCLE_SEGMENTS,
+            true
+          );
+          manifoldInstancesForCleanup.current.push(drill);
+          const finalPlatedPartOp = platedPart.subtract(drill);
+          manifoldInstancesForCleanup.current.push(finalPlatedPartOp);
+          const translatedPlatedPart = finalPlatedPartOp.translate([
+            ph.x,
+            ph.y,
+            0
+          ]);
+          manifoldInstancesForCleanup.current.push(translatedPlatedPart);
+          const copperMesh = translatedPlatedPart.getMesh();
+          const copperGeom = manifoldMeshToThreeGeometry(copperMesh);
+          newOtherGeoms.push({
+            key: `ph-${ph.pcb_plated_hole_id || index}`,
+            geometry: copperGeom,
+            color: COPPER_COLOR,
+            manifoldSource: translatedPlatedPart
+          });
+        }
+      });
+      const smtPads = su5(circuitJson).pcb_smtpad.list();
+      smtPads.forEach((pad, index) => {
+        const padBaseThickness = DEFAULT_SMT_PAD_THICKNESS;
+        const zPos = pad.layer === "bottom" ? -currentPcbThickness / 2 - padBaseThickness / 2 - MANIFOLD_Z_OFFSET : currentPcbThickness / 2 + padBaseThickness / 2 + MANIFOLD_Z_OFFSET;
+        let padManifoldOp = createPadManifoldOp({
+          Manifold,
+          pad,
+          padBaseThickness
+        });
+        if (padManifoldOp) {
+          manifoldInstancesForCleanup.current.push(padManifoldOp);
+          const translatedPad = padManifoldOp.translate([pad.x, pad.y, zPos]);
+          manifoldInstancesForCleanup.current.push(translatedPad);
+          const padMesh = translatedPad.getMesh();
+          const padGeom = manifoldMeshToThreeGeometry(padMesh);
+          newOtherGeoms.push({
+            key: `pad-${pad.pcb_smtpad_id || index}`,
+            geometry: padGeom,
+            color: COPPER_COLOR,
+            manifoldSource: translatedPad
+          });
+        }
+      });
+      pcbVias.forEach((via, index) => {
+        if (typeof via.outer_diameter === "number" && typeof via.hole_diameter === "number") {
+          const translatedViaCopper = createViaCopper({
+            Manifold,
+            x: via.x,
+            y: via.y,
+            outerDiameter: via.outer_diameter,
+            holeDiameter: via.hole_diameter,
+            thickness: currentPcbThickness,
+            zOffset: MANIFOLD_Z_OFFSET,
+            segments: SMOOTH_CIRCLE_SEGMENTS
+          });
+          manifoldInstancesForCleanup.current.push(translatedViaCopper);
+          const viaMesh = translatedViaCopper.getMesh();
+          const viaGeom = manifoldMeshToThreeGeometry(viaMesh);
+          newOtherGeoms.push({
+            key: `via-${via.pcb_via_id || index}`,
+            geometry: viaGeom,
+            color: COPPER_COLOR,
+            manifoldSource: translatedViaCopper
+          });
+        }
+      });
+      const pcbTraces = su5(circuitJson).pcb_trace.list();
+      const traceColorArr = tracesMaterialColors[boardData.material] ?? colors.fr4GreenSolderWithMask;
+      const traceColor = `rgb(${Math.round(traceColorArr[0] * 255)}, ${Math.round(traceColorArr[1] * 255)}, ${Math.round(traceColorArr[2] * 255)})`;
+      const allPcbVias = su5(circuitJson).pcb_via.list();
+      const allPcbPlatedHoles = su5(circuitJson).pcb_plated_hole.list();
+      setTopTraceTexture(
+        createTraceTextureForLayer({
+          layer: "top",
+          pcbTraces,
+          boardData,
+          traceColor,
+          traceTextureResolution: TRACE_TEXTURE_RESOLUTION,
+          allPcbVias,
+          allPcbPlatedHoles
+        })
+      );
+      setBottomTraceTexture(
+        createTraceTextureForLayer({
+          layer: "bottom",
+          pcbTraces,
+          boardData,
+          traceColor,
+          traceTextureResolution: TRACE_TEXTURE_RESOLUTION,
+          allPcbVias,
+          allPcbPlatedHoles
+        })
+      );
+      const pcbSilkscreenTexts = su5(circuitJson).pcb_silkscreen_text.list();
+      const pcbSilkscreenPaths = su5(circuitJson).pcb_silkscreen_path.list();
+      const silkscreenColor = "rgb(255,255,255)";
+      setTopSilkscreenTexture(
+        createSilkscreenTextureForLayer({
+          layer: "top",
+          pcbSilkscreenTexts,
+          pcbSilkscreenPaths,
+          boardData,
+          silkscreenColor,
+          traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+        })
+      );
+      setBottomSilkscreenTexture(
+        createSilkscreenTextureForLayer({
+          layer: "bottom",
+          pcbSilkscreenTexts,
+          pcbSilkscreenPaths,
+          boardData,
+          silkscreenColor,
+          traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+        })
+      );
+      setOtherComponentGeoms(
+        newOtherGeoms.map((g) => ({
+          key: g.key,
+          geometry: g.geometry,
+          color: g.color
+        }))
+      );
+    } catch (e) {
+      console.error("Error processing geometry with Manifold in hook:", e);
+      setError(
+        e.message || "An unknown error occurred while processing geometry in hook."
+      );
+      setBoardThreeGeom(null);
+      setOtherComponentGeoms([]);
+      setTopTraceTexture(null);
+      setBottomTraceTexture(null);
+      setTopSilkscreenTexture(null);
+      setBottomSilkscreenTexture(null);
+    } finally {
+      setIsLoading(false);
+    }
+    return () => {
+      manifoldInstancesForCleanup.current.forEach((inst) => inst.delete());
+      manifoldInstancesForCleanup.current = [];
+    };
+  }, [manifoldJSModule, circuitJson, boardData]);
+  return {
+    boardThreeGeom,
+    boardColor,
+    otherComponentGeoms,
+    topTraceTexture,
+    bottomTraceTexture,
+    topSilkscreenTexture,
+    bottomSilkscreenTexture,
+    pcbThickness,
+    error,
+    isLoading,
+    boardData
+  };
+};
+
+// src/CadViewerManifold.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var CadViewerManifold = ({
+  circuitJson,
+  autoRotateDisabled,
+  clickToInteractEnabled
+}) => {
+  const [manifoldJSModule, setManifoldJSModule] = useState8(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState8(null);
+  useEffect6(() => {
+    const manifoldConfig = {
+      locateFile: (path, scriptDirectory) => path === "manifold.wasm" ? "/manifold.wasm" : scriptDirectory + path
+    };
+    ManifoldModule(manifoldConfig).then((loadedModule) => {
+      loadedModule.setup();
+      setManifoldJSModule(loadedModule);
+    }).catch(() => {
+      setManifoldLoadingError(
+        "Failed to load Manifold module. Check console for details."
+      );
+    });
+  }, []);
+  const {
+    boardThreeGeom,
+    boardColor,
+    otherComponentGeoms,
+    topTraceTexture,
+    bottomTraceTexture,
+    topSilkscreenTexture,
+    bottomSilkscreenTexture,
+    pcbThickness,
+    error: builderError,
+    isLoading: builderIsLoading,
+    boardData
+  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
+  const cadComponents = useMemo7(
+    () => circuitJson ? su6(circuitJson).cad_component.list() : [],
+    [circuitJson]
+  );
+  const initialCameraPosition = useMemo7(() => {
+    if (!boardData) return [5, 5, 5];
+    const { width = 0, height = 0 } = boardData;
+    const safeWidth = Math.max(width, 1);
+    const safeHeight = Math.max(height, 1);
+    const largestDim = Math.max(safeWidth, safeHeight, 5);
+    return [largestDim * 0.75, largestDim * 0.75, largestDim * 0.75];
+  }, [boardData]);
+  if (manifoldLoadingError) {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          color: "red",
+          padding: "1em",
+          border: "1px solid red",
+          margin: "1em"
+        },
+        children: [
+          "Error: ",
+          manifoldLoadingError
+        ]
+      }
+    );
+  }
+  if (!manifoldJSModule) {
+    return /* @__PURE__ */ jsx11("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+  }
+  if (builderError) {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          color: "red",
+          padding: "1em",
+          border: "1px solid red",
+          margin: "1em"
+        },
+        children: [
+          "Error: ",
+          builderError
+        ]
+      }
+    );
+  }
+  if (builderIsLoading || !boardData) {
+    return /* @__PURE__ */ jsx11("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+  }
+  if (!boardThreeGeom) {
+    return /* @__PURE__ */ jsx11("div", { style: { padding: "1em" }, children: "Preparing board display..." });
+  }
+  return /* @__PURE__ */ jsxs8(
+    CadViewerContainer,
+    {
+      initialCameraPosition,
+      autoRotateDisabled,
+      clickToInteractEnabled,
+      children: [
+        /* @__PURE__ */ jsx11("mesh", { geometry: boardThreeGeom, children: /* @__PURE__ */ jsx11(
+          "meshStandardMaterial",
+          {
+            color: boardColor,
+            side: THREE8.DoubleSide,
+            flatShading: true
+          }
+        ) }),
+        topTraceTexture && boardData && pcbThickness !== null && /* @__PURE__ */ jsxs8(
+          "mesh",
+          {
+            position: [
+              boardData.center.x,
+              boardData.center.y,
+              pcbThickness / 2 + 0.015
+            ],
+            children: [
+              /* @__PURE__ */ jsx11("planeGeometry", { args: [boardData.width, boardData.height] }),
+              /* @__PURE__ */ jsx11(
+                "meshBasicMaterial",
+                {
+                  map: topTraceTexture,
+                  transparent: true,
+                  side: THREE8.DoubleSide,
+                  depthWrite: false
+                }
+              )
+            ]
+          }
+        ),
+        topSilkscreenTexture && boardData && pcbThickness !== null && /* @__PURE__ */ jsxs8(
+          "mesh",
+          {
+            position: [
+              boardData.center.x,
+              boardData.center.y,
+              pcbThickness / 2 + 0.017
+            ],
+            children: [
+              /* @__PURE__ */ jsx11("planeGeometry", { args: [boardData.width, boardData.height] }),
+              /* @__PURE__ */ jsx11(
+                "meshBasicMaterial",
+                {
+                  map: topSilkscreenTexture,
+                  transparent: true,
+                  side: THREE8.DoubleSide,
+                  depthWrite: false
+                }
+              )
+            ]
+          }
+        ),
+        bottomTraceTexture && boardData && pcbThickness !== null && /* @__PURE__ */ jsxs8(
+          "mesh",
+          {
+            position: [
+              boardData.center.x,
+              boardData.center.y,
+              -pcbThickness / 2 - 0.015
+            ],
+            rotation: [Math.PI, 0, 0],
+            children: [
+              /* @__PURE__ */ jsx11("planeGeometry", { args: [boardData.width, boardData.height] }),
+              /* @__PURE__ */ jsx11(
+                "meshBasicMaterial",
+                {
+                  map: bottomTraceTexture,
+                  transparent: true,
+                  side: THREE8.DoubleSide,
+                  depthWrite: false
+                }
+              )
+            ]
+          }
+        ),
+        bottomSilkscreenTexture && boardData && pcbThickness !== null && /* @__PURE__ */ jsxs8(
+          "mesh",
+          {
+            position: [
+              boardData.center.x,
+              boardData.center.y,
+              -pcbThickness / 2 - 0.017
+            ],
+            rotation: [Math.PI, 0, 0],
+            children: [
+              /* @__PURE__ */ jsx11("planeGeometry", { args: [boardData.width, boardData.height] }),
+              /* @__PURE__ */ jsx11(
+                "meshBasicMaterial",
+                {
+                  map: bottomSilkscreenTexture,
+                  transparent: true,
+                  side: THREE8.DoubleSide,
+                  depthWrite: false
+                }
+              )
+            ]
+          }
+        ),
+        otherComponentGeoms.map((comp) => /* @__PURE__ */ jsx11("mesh", { geometry: comp.geometry, children: /* @__PURE__ */ jsx11(
+          "meshStandardMaterial",
+          {
+            color: comp.color,
+            side: THREE8.DoubleSide,
+            flatShading: true
+          }
+        ) }, comp.key)),
+        cadComponents.map((cad_component) => /* @__PURE__ */ jsx11(
+          ThreeErrorBoundary,
+          {
+            fallback: ({ error }) => /* @__PURE__ */ jsx11(Error3d, { cad_component, error }),
+            children: /* @__PURE__ */ jsx11(
+              AnyCadComponent,
+              {
+                cad_component,
+                circuitJson
+              }
+            )
+          },
+          cad_component.cad_component_id
+        ))
+      ]
+    }
+  );
+};
+var CadViewerManifold_default = CadViewerManifold;
+
+// src/CadViewer.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var CadViewer = (props) => {
+  const [engine, setEngine] = useState9("jscad");
+  const [menuVisible, setMenuVisible] = useState9(false);
+  const [menuPos, setMenuPos] = useState9({
+    x: 0,
+    y: 0
+  });
+  const containerRef = useRef7(null);
+  const menuRef = useRef7(null);
+  const handleContextMenu = useCallback4((e) => {
+    e.preventDefault();
+    setMenuPos({ x: e.clientX, y: e.clientY });
+    setMenuVisible(true);
+  }, []);
+  const handleMenuClick = (newEngine) => {
+    setEngine(newEngine);
+    setMenuVisible(false);
+  };
+  const handleClickAway = useCallback4((e) => {
+    const target = e.target;
+    if (!menuRef.current || !menuRef.current.contains(target)) {
+      setMenuVisible(false);
+    }
+  }, []);
+  useEffect7(() => {
+    if (menuVisible) {
+      document.addEventListener("mousedown", handleClickAway);
+      return () => document.removeEventListener("mousedown", handleClickAway);
+    }
+  }, [menuVisible, handleClickAway]);
+  useEffect7(() => {
+    const stored = window.localStorage.getItem("cadViewerEngine");
+    if (stored === "jscad" || stored === "manifold") {
+      setEngine(stored);
+    }
+  }, []);
+  useEffect7(() => {
+    window.localStorage.setItem("cadViewerEngine", engine);
+  }, [engine]);
+  const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: containerRef,
+      style: { width: "100%", height: "100%", position: "relative" },
+      onContextMenu: handleContextMenu,
+      children: [
+        engine === "jscad" ? /* @__PURE__ */ jsx12(CadViewerJscad, { ...props }) : /* @__PURE__ */ jsx12(CadViewerManifold_default, { ...props }),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              background: "#222",
+              color: "#fff",
+              padding: "2px 8px",
+              borderRadius: 4,
+              fontSize: 12,
+              opacity: 0.7,
+              userSelect: "none"
+            },
+            onClick: () => {
+              if ("ontouchstart" in window) {
+                setEngine(engine === "jscad" ? "manifold" : "jscad");
+              }
+            },
+            children: [
+              "Engine: ",
+              /* @__PURE__ */ jsx12("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+            ]
+          }
+        ),
+        menuVisible && /* @__PURE__ */ jsx12(
+          "div",
+          {
+            ref: menuRef,
+            style: {
+              position: "fixed",
+              top: menuPos.y,
+              left: menuPos.x,
+              background: "#23272f",
+              color: "#f5f6fa",
+              borderRadius: 6,
+              boxShadow: "0 6px 24px 0 rgba(0,0,0,0.18)",
+              zIndex: 1e3,
+              minWidth: 200,
+              border: "1px solid #353945",
+              padding: 0,
+              fontSize: 15,
+              fontWeight: 500,
+              transition: "opacity 0.1s"
+            },
+            children: /* @__PURE__ */ jsxs9(
+              "div",
+              {
+                style: {
+                  padding: "12px 18px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  color: "#f5f6fa",
+                  fontWeight: 500,
+                  borderRadius: 6,
+                  transition: "background 0.1s"
+                },
+                onClick: () => handleMenuClick(engine === "jscad" ? "manifold" : "jscad"),
+                onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
+                onMouseOut: (e) => e.currentTarget.style.background = "transparent",
+                children: [
+                  "Switch to ",
+                  engine === "jscad" ? "Manifold" : "JSCAD",
+                  " Engine",
+                  /* @__PURE__ */ jsx12(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 12,
+                        marginLeft: "auto",
+                        opacity: 0.5,
+                        fontWeight: 400
+                      },
+                      children: engine === "jscad" ? "experimental" : "default"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    },
+    viewerKey
+  );
+};
+
+// src/convert-circuit-json-to-3d-svg.ts
+var import_debug = __toESM(require_browser(), 1);
+import { su as su7 } from "@tscircuit/soup-util";
+import * as THREE12 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE4 from "three";
-import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
+import * as THREE9 from "three";
+import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute4 } from "three";
 function createGeometryFromPolygons(polygons) {
-  const geometry = new BufferGeometry3();
+  const geometry = new BufferGeometry4();
   const vertices = [];
   const normals = [];
   for (const polygon2 of polygons) {
@@ -18983,12 +20050,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE4.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE4.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE4.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE4.Vector3().crossVectors(
-        new THREE4.Vector3().subVectors(v2, v1),
-        new THREE4.Vector3().subVectors(v3, v1)
+      const v1 = new THREE9.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE9.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE9.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE9.Vector3().crossVectors(
+        new THREE9.Vector3().subVectors(v2, v1),
+        new THREE9.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -19003,8 +20070,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;
 }
 
@@ -19014,22 +20081,22 @@ import { Footprinter3d as Footprinter3d2 } from "jscad-electronics";
 import { convertCSGToThreeGeom as convertCSGToThreeGeom2 } from "jscad-fiber/three";
 import { createJSCADRenderer as createJSCADRenderer2 } from "jscad-fiber";
 import { executeJscadOperations as executeJscadOperations2, jscadPlanner as jscadPlanner2 } from "jscad-planner";
-import * as THREE6 from "three";
+import * as THREE11 from "three";
 
 // src/utils/load-model.ts
-import * as THREE5 from "three";
+import * as THREE10 from "three";
 import { OBJLoader as OBJLoader3 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
 async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE5.MeshStandardMaterial({
+    const material = new THREE10.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE5.Mesh(geometry, material);
+    return new THREE10.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader3();
@@ -19040,7 +20107,7 @@ async function load3DModel(url) {
 }
 
 // src/utils/render-component.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var { createJSCADRoot: createJSCADRoot2 } = createJSCADRenderer2(jscadPlanner2);
 async function renderComponent(component, scene) {
   const url = component.model_obj_url ?? component.model_stl_url;
@@ -19056,9 +20123,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE6.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE6.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE6.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -19071,13 +20138,13 @@ async function renderComponent(component, scene) {
       component.model_jscad
     );
     const threeGeom = convertCSGToThreeGeom2(jscadObject);
-    const material2 = new THREE6.MeshStandardMaterial({
+    const material2 = new THREE11.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5,
-      side: THREE6.DoubleSide
+      side: THREE11.DoubleSide
     });
-    const mesh2 = new THREE6.Mesh(threeGeom, material2);
+    const mesh2 = new THREE11.Mesh(threeGeom, material2);
     if (component.position) {
       mesh2.position.set(
         component.position.x ?? 0,
@@ -19087,9 +20154,9 @@ async function renderComponent(component, scene) {
     }
     if (component.rotation) {
       mesh2.rotation.set(
-        THREE6.MathUtils.degToRad(component.rotation.x ?? 0),
-        THREE6.MathUtils.degToRad(component.rotation.y ?? 0),
-        THREE6.MathUtils.degToRad(component.rotation.z ?? 0)
+        THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
+        THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
+        THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
       );
     }
     scene.add(mesh2);
@@ -19098,17 +20165,17 @@ async function renderComponent(component, scene) {
   if (component.footprinter_string) {
     const jscadOperations = [];
     const root = createJSCADRoot2(jscadOperations);
-    root.render(/* @__PURE__ */ jsx11(Footprinter3d2, { footprint: component.footprinter_string }));
+    root.render(/* @__PURE__ */ jsx13(Footprinter3d2, { footprint: component.footprinter_string }));
     for (const operation of jscadOperations) {
       const jscadObject = executeJscadOperations2(import_modeling2.default, operation);
       const threeGeom = convertCSGToThreeGeom2(jscadObject);
-      const material2 = new THREE6.MeshStandardMaterial({
+      const material2 = new THREE11.MeshStandardMaterial({
         color: 4473924,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE6.DoubleSide
+        side: THREE11.DoubleSide
       });
-      const mesh2 = new THREE6.Mesh(threeGeom, material2);
+      const mesh2 = new THREE11.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -19118,22 +20185,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE6.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE6.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE6.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE6.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE6.MeshStandardMaterial({
+  const geometry = new THREE11.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE11.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE6.Mesh(geometry, material);
+  const mesh = new THREE11.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -19154,11 +20221,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE7.Scene();
+  const scene = new THREE12.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE7.Color(backgroundColor), 1);
-  const camera = new THREE7.OrthographicCamera();
+  renderer.setClearColor(new THREE12.Color(backgroundColor), 1);
+  const camera = new THREE12.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -19172,14 +20239,14 @@ 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 THREE7.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE12.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE7.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE12.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE7.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE12.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su5(circuitJson).cad_component.list();
+  const components = su7(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
@@ -19187,8 +20254,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   if (boardGeom) {
     for (const geom of boardGeom) {
       const geometry = createGeometryFromPolygons(geom.polygons);
-      const material = new THREE7.MeshStandardMaterial({
-        color: new THREE7.Color(
+      const material = new THREE12.MeshStandardMaterial({
+        color: new THREE12.Color(
           geom.color?.[0] ?? 0,
           geom.color?.[1] ?? 0,
           geom.color?.[2] ?? 0
@@ -19197,18 +20264,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
         roughness: 0.8,
         opacity: 0.9,
         transparent: true,
-        side: THREE7.DoubleSide
+        side: THREE12.DoubleSide
       });
-      const mesh = new THREE7.Mesh(geometry, material);
+      const mesh = new THREE12.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE7.GridHelper(100, 100);
+  const gridHelper = new THREE12.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE7.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE7.Vector3());
-  const size = box.getSize(new THREE7.Vector3());
+  const box = new THREE12.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE12.Vector3());
+  const size = box.getSize(new THREE12.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size.x, size.y, size.z);
   if (maxDim > 0) {
@@ -19225,10 +20292,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // src/hooks/exporter/gltf.ts
-import { useEffect as useEffect5, useState as useState7, useMemo as useMemo6, useCallback as useCallback4 } from "react";
+import { useEffect as useEffect8, useState as useState10, useMemo as useMemo8, useCallback as useCallback5 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
-  const link = useMemo6(() => document.createElement("a"), []);
+  const link = useMemo8(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -19238,7 +20305,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect5(
+  useEffect8(
     () => () => {
       link.remove();
       instance = null;
@@ -19246,24 +20313,24 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback4((obj3D) => {
+  const ref = useCallback5((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState7();
-  const [error, setError] = useState7();
-  const ref = useCallback4(
+  const [url, setUrl] = useState10();
+  const [error, setError] = useState10();
+  const ref = useCallback5(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect5(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect8(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo6(() => new GLTFExporter(), []);
+  const exporter = useMemo8(() => new GLTFExporter(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(
@@ -19293,5 +20360,6 @@ export {
   applyJsdomShim,
   convertCircuitJsonTo3dSvg,
   useExportGltfUrl,
+  useManifoldBoardBuilder,
   useSaveGltfAs
 };