@tscircuit/3d-viewer 0.0.232 → 0.0.233

package/dist/index.d.ts

@@ -43,18 +43,36 @@ declare function useExportGltfUrl(options?: Options): [
     error: ErrorEvent | undefined
 ];
 
-interface UseManifoldBoardBuilderResult {
-    boardThreeGeom: THREE.BufferGeometry | null;
-    boardColor: THREE.Color;
-    otherComponentGeoms: Array<{
+interface ManifoldGeoms {
+    board?: {
+        geometry: THREE.BufferGeometry;
+        color: THREE.Color;
+    };
+    platedHoles?: Array<{
+        key: string;
+        geometry: THREE.BufferGeometry;
+        color: THREE.Color;
+    }>;
+    smtPads?: Array<{
         key: string;
         geometry: THREE.BufferGeometry;
         color: THREE.Color;
     }>;
-    topTraceTexture: THREE.CanvasTexture | null;
-    bottomTraceTexture: THREE.CanvasTexture | null;
-    topSilkscreenTexture: THREE.CanvasTexture | null;
-    bottomSilkscreenTexture: THREE.CanvasTexture | null;
+    vias?: Array<{
+        key: string;
+        geometry: THREE.BufferGeometry;
+        color: THREE.Color;
+    }>;
+}
+interface ManifoldTextures {
+    topTrace?: THREE.CanvasTexture | null;
+    bottomTrace?: THREE.CanvasTexture | null;
+    topSilkscreen?: THREE.CanvasTexture | null;
+    bottomSilkscreen?: THREE.CanvasTexture | null;
+}
+interface UseManifoldBoardBuilderResult {
+    geoms: ManifoldGeoms | null;
+    textures: ManifoldTextures | null;
     pcbThickness: number | null;
     error: string | null;
     isLoading: boolean;
@@ -64,4 +82,4 @@ declare const useManifoldBoardBuilder: (manifoldJSModule: ManifoldToplevel | nul
 
 declare function applyJsdomShim(jsdom: JSDOM): void;
 
-export { CadViewer, applyJsdomShim, convertCircuitJsonTo3dSvg, useExportGltfUrl, useManifoldBoardBuilder, useSaveGltfAs };
+export { CadViewer, type ManifoldGeoms, type ManifoldTextures, applyJsdomShim, convertCircuitJsonTo3dSvg, useExportGltfUrl, useManifoldBoardBuilder, useSaveGltfAs };

package/dist/index.js

@@ -16985,7 +16985,7 @@ import { Canvas, useFrame as useFrame2 } from "@react-three/fiber";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.231",
+  version: "0.0.232",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17310,6 +17310,10 @@ var colors = {
   fr1Copper: [0.8, 0.4, 0.2],
   fr1CopperSolderWithMask: [0.9, 0.6, 0.2]
 };
+var MANIFOLD_Z_OFFSET = 1e-3;
+var SMOOTH_CIRCLE_SEGMENTS = 32;
+var DEFAULT_SMT_PAD_THICKNESS = 0.035;
+var TRACE_TEXTURE_RESOLUTION = 200;
 var boardMaterialColors = {
   fr1: colors.fr1Copper,
   fr4: colors.fr4Green
@@ -18976,14 +18980,13 @@ var CadViewerJscad = forwardRef2(
 
 // 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 { su as su12 } from "@tscircuit/soup-util";
 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";
+import { su as su11 } from "@tscircuit/soup-util";
+import * as THREE10 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
 import * as THREE4 from "three";
@@ -19008,18 +19011,22 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
 
 // src/utils/trace-texture.ts
 import * as THREE5 from "three";
+import { su as su5 } from "@tscircuit/soup-util";
 function isWireRoutePoint(point) {
   return point && point.route_type === "wire" && typeof point.layer === "string" && typeof point.width === "number";
 }
 function createTraceTextureForLayer({
   layer,
-  pcbTraces,
+  circuitJson,
   boardData,
   traceColor,
-  traceTextureResolution,
-  allPcbVias,
-  allPcbPlatedHoles
+  traceTextureResolution
 }) {
+  const pcbTraces = su5(circuitJson).pcb_trace.list();
+  const allPcbVias = su5(circuitJson).pcb_via.list();
+  const allPcbPlatedHoles = su5(
+    circuitJson
+  ).pcb_plated_hole.list();
   const tracesOnLayer = pcbTraces.filter(
     (t) => t.route.some((p) => isWireRoutePoint(p) && p.layer === layer)
   );
@@ -19098,14 +19105,16 @@ function createTraceTextureForLayer({
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
 import * as THREE6 from "three";
+import { su as su6 } from "@tscircuit/soup-util";
 function createSilkscreenTextureForLayer({
   layer,
-  pcbSilkscreenTexts,
-  pcbSilkscreenPaths,
+  circuitJson,
   boardData,
   silkscreenColor = "rgb(255,255,255)",
   traceTextureResolution
 }) {
+  const pcbSilkscreenTexts = su6(circuitJson).pcb_silkscreen_text.list();
+  const pcbSilkscreenPaths = su6(circuitJson).pcb_silkscreen_path.list();
   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;
@@ -19226,19 +19235,8 @@ function createSilkscreenTextureForLayer({
   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/manifold/process-non-plated-holes.ts
+import { su as su7 } from "@tscircuit/soup-util";
 
 // src/utils/hole-geoms.ts
 function createCircleHoleDrill({
@@ -19278,6 +19276,91 @@ function createPlatedHoleDrill({
   return drill.translate([x, y, 0]);
 }
 
+// src/utils/manifold/process-non-plated-holes.ts
+function isCircleHole(hole) {
+  return (hole.shape === "circle" || hole.hole_shape === "circle") && typeof hole.hole_diameter === "number";
+}
+function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const nonPlatedHoleBoardDrills = [];
+  const pcbHoles = su7(circuitJson).pcb_hole.list();
+  pcbHoles.forEach((hole) => {
+    if (isCircleHole(hole)) {
+      const translatedDrill = createCircleHoleDrill({
+        Manifold,
+        x: hole.x,
+        y: hole.y,
+        diameter: hole.hole_diameter,
+        thickness: pcbThickness,
+        segments: SMOOTH_CIRCLE_SEGMENTS
+      });
+      manifoldInstancesForCleanup.push(translatedDrill);
+      nonPlatedHoleBoardDrills.push(translatedDrill);
+    }
+  });
+  return { nonPlatedHoleBoardDrills };
+}
+
+// src/utils/manifold/process-plated-holes.ts
+import { su as su8 } from "@tscircuit/soup-util";
+import * as THREE7 from "three";
+var COPPER_COLOR = new THREE7.Color(...colors.copper);
+function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const platedHoleBoardDrills = [];
+  const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
+  const platedHoleCopperGeoms = [];
+  pcbPlatedHoles.forEach((ph, index) => {
+    if (ph.shape === "circle") {
+      const translatedDrill = createPlatedHoleDrill({
+        Manifold,
+        x: ph.x,
+        y: ph.y,
+        outerDiameter: ph.outer_diameter,
+        // Drill for the board
+        thickness: pcbThickness,
+        zOffset: MANIFOLD_Z_OFFSET,
+        segments: SMOOTH_CIRCLE_SEGMENTS
+      });
+      manifoldInstancesForCleanup.push(translatedDrill);
+      platedHoleBoardDrills.push(translatedDrill);
+      const copperPartThickness = pcbThickness + 2 * MANIFOLD_Z_OFFSET;
+      let platedPart = Manifold.cylinder(
+        copperPartThickness,
+        ph.outer_diameter / 2,
+        -1,
+        SMOOTH_CIRCLE_SEGMENTS,
+        true
+      );
+      manifoldInstancesForCleanup.push(platedPart);
+      const drillForCopper = Manifold.cylinder(
+        copperPartThickness * 1.05,
+        // ensure it cuts through
+        ph.hole_diameter / 2,
+        -1,
+        SMOOTH_CIRCLE_SEGMENTS,
+        true
+      );
+      manifoldInstancesForCleanup.push(drillForCopper);
+      const finalPlatedPartOp = platedPart.subtract(drillForCopper);
+      manifoldInstancesForCleanup.push(finalPlatedPartOp);
+      const translatedPlatedPart = finalPlatedPartOp.translate([ph.x, ph.y, 0]);
+      manifoldInstancesForCleanup.push(translatedPlatedPart);
+      const threeGeom = manifoldMeshToThreeGeometry(
+        translatedPlatedPart.getMesh()
+      );
+      platedHoleCopperGeoms.push({
+        key: `ph-${ph.pcb_plated_hole_id || index}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR
+      });
+    }
+  });
+  return { platedHoleBoardDrills, platedHoleCopperGeoms };
+}
+
+// src/utils/manifold/process-vias.ts
+import { su as su9 } from "@tscircuit/soup-util";
+import * as THREE8 from "three";
+
 // src/utils/via-geoms.ts
 function createViaCopper({
   Manifold,
@@ -19308,7 +19391,98 @@ function createViaCopper({
   return finalViaCopperOp.translate([x, y, 0]);
 }
 
-// src/hooks/useManifoldBoardBuilder.ts
+// src/utils/manifold/process-vias.ts
+var COPPER_COLOR2 = new THREE8.Color(...colors.copper);
+function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const viaBoardDrills = [];
+  const pcbVias = su9(circuitJson).pcb_via.list();
+  const viaCopperGeoms = [];
+  pcbVias.forEach((via, index) => {
+    if (typeof via.outer_diameter === "number") {
+      const translatedDrill = createPlatedHoleDrill({
+        Manifold,
+        x: via.x,
+        y: via.y,
+        outerDiameter: via.outer_diameter,
+        thickness: pcbThickness,
+        zOffset: MANIFOLD_Z_OFFSET,
+        segments: SMOOTH_CIRCLE_SEGMENTS
+      });
+      manifoldInstancesForCleanup.push(translatedDrill);
+      viaBoardDrills.push(translatedDrill);
+    }
+    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: pcbThickness,
+        zOffset: MANIFOLD_Z_OFFSET,
+        segments: SMOOTH_CIRCLE_SEGMENTS
+      });
+      manifoldInstancesForCleanup.push(translatedViaCopper);
+      const threeGeom = manifoldMeshToThreeGeometry(
+        translatedViaCopper.getMesh()
+      );
+      viaCopperGeoms.push({
+        key: `via-${via.pcb_via_id || index}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR2
+      });
+    }
+  });
+  return { viaBoardDrills, viaCopperGeoms };
+}
+
+// src/utils/manifold/process-smt-pads.ts
+import { su as su10 } from "@tscircuit/soup-util";
+import * as THREE9 from "three";
+
+// 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/manifold/process-smt-pads.ts
+var COPPER_COLOR3 = new THREE9.Color(...colors.copper);
+function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const smtPadGeoms = [];
+  const smtPads = su10(circuitJson).pcb_smtpad.list();
+  smtPads.forEach((pad, index) => {
+    const padBaseThickness = DEFAULT_SMT_PAD_THICKNESS;
+    const zPos = pad.layer === "bottom" ? -pcbThickness / 2 - padBaseThickness / 2 - MANIFOLD_Z_OFFSET : pcbThickness / 2 + padBaseThickness / 2 + MANIFOLD_Z_OFFSET;
+    let padManifoldOp = createPadManifoldOp({
+      Manifold,
+      pad,
+      padBaseThickness
+    });
+    if (padManifoldOp) {
+      manifoldInstancesForCleanup.push(padManifoldOp);
+      const translatedPad = padManifoldOp.translate([pad.x, pad.y, zPos]);
+      manifoldInstancesForCleanup.push(translatedPad);
+      const threeGeom = manifoldMeshToThreeGeometry(translatedPad.getMesh());
+      smtPadGeoms.push({
+        key: `pad-${pad.pcb_smtpad_id || index}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR3
+      });
+    }
+  });
+  return { smtPadGeoms };
+}
+
+// src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -19321,54 +19495,70 @@ var arePointsClockwise2 = (points) => {
   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;
+function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, manifoldInstancesForCleanup) {
+  let boardOp;
+  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.push(crossSection);
+    boardOp = Manifold.extrude(
+      crossSection,
+      pcbThickness,
+      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."
+      );
+    }
+    boardOp = Manifold.cube(
+      [boardData.width, boardData.height, pcbThickness],
+      true
+      // center (for all axes)
+    );
+  }
+  manifoldInstancesForCleanup.push(boardOp);
+  boardOp = boardOp.translate([boardData.center.x, boardData.center.y, 0]);
+  manifoldInstancesForCleanup.push(boardOp);
+  return boardOp;
+}
+
+// src/hooks/useManifoldBoardBuilder.ts
 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 [geoms, setGeoms] = useState7(null);
+  const [textures, setTextures] = 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();
+    const boards = su11(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);
+      setGeoms(null);
+      setTextures(null);
       setPcbThickness(null);
-      if (circuitJson && su5(circuitJson).pcb_board.list().length === 0) {
+      if (circuitJson && su11(circuitJson).pcb_board.list().length === 0) {
         setError("No pcb_board found in circuitJson.");
       }
       setIsLoading(false);
@@ -19381,100 +19571,44 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     manifoldInstancesForCleanup.current.forEach((inst) => inst.delete());
     manifoldInstancesForCleanup.current = [];
     let boardManifold = null;
-    const newOtherGeoms = [];
+    const currentGeoms = {};
+    const currentTextures = {};
     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);
+      let currentBoardOp = createManifoldBoard(
+        Manifold,
+        CrossSection,
+        boardData,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
+      );
+      const allBoardDrills = [];
+      const { nonPlatedHoleBoardDrills } = processNonPlatedHolesForManifold(
+        Manifold,
+        circuitJson,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
+      );
+      allBoardDrills.push(...nonPlatedHoleBoardDrills);
+      const { platedHoleBoardDrills, platedHoleCopperGeoms } = processPlatedHolesForManifold(
+        Manifold,
+        circuitJson,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
+      );
+      allBoardDrills.push(...platedHoleBoardDrills);
+      currentGeoms.platedHoles = platedHoleCopperGeoms;
+      const { viaBoardDrills, viaCopperGeoms } = processViasForManifold(
+        Manifold,
+        circuitJson,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
+      );
+      allBoardDrills.push(...viaBoardDrills);
+      currentGeoms.vias = viaCopperGeoms;
+      if (allBoardDrills.length > 0) {
+        const unionedDrills = Manifold.union(allBoardDrills);
         manifoldInstancesForCleanup.current.push(unionedDrills);
         const nextBoard = currentBoardOp.subtract(unionedDrills);
         manifoldInstancesForCleanup.current.push(nextBoard);
@@ -19484,165 +19618,63 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       if (boardManifold) {
         const boardThreeMesh = boardManifold.getMesh();
         const finalBoardGeom = manifoldMeshToThreeGeometry(boardThreeMesh);
-        setBoardThreeGeom(finalBoardGeom);
-      } else {
-        setBoardThreeGeom(null);
+        const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
+        currentGeoms.board = {
+          geometry: finalBoardGeom,
+          color: new THREE10.Color(
+            matColorArray[0],
+            matColorArray[1],
+            matColorArray[2]
+          )
+        };
       }
-      const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
-      setBoardColor(
-        new THREE7.Color(matColorArray[0], matColorArray[1], matColorArray[2])
+      const { smtPadGeoms } = processSmtPadsForManifold(
+        Manifold,
+        circuitJson,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
       );
-      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();
+      currentGeoms.smtPads = smtPadGeoms;
+      setGeoms(currentGeoms);
       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();
+      currentTextures.topTrace = createTraceTextureForLayer({
+        layer: "top",
+        circuitJson,
+        boardData,
+        traceColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      currentTextures.bottomTrace = createTraceTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        boardData,
+        traceColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
       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
-        }))
-      );
+      currentTextures.topSilkscreen = createSilkscreenTextureForLayer({
+        layer: "top",
+        circuitJson,
+        boardData,
+        silkscreenColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      currentTextures.bottomSilkscreen = createSilkscreenTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        boardData,
+        silkscreenColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      setTextures(currentTextures);
     } 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);
+      setGeoms(null);
+      setTextures(null);
     } finally {
       setIsLoading(false);
     }
@@ -19652,13 +19684,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     };
   }, [manifoldJSModule, circuitJson, boardData]);
   return {
-    boardThreeGeom,
-    boardColor,
-    otherComponentGeoms,
-    topTraceTexture,
-    bottomTraceTexture,
-    topSilkscreenTexture,
-    bottomSilkscreenTexture,
+    geoms,
+    textures,
     pcbThickness,
     error,
     isLoading,
@@ -19666,6 +19693,102 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   };
 };
 
+// src/utils/manifold/create-three-geometry-meshes.ts
+import * as THREE11 from "three";
+function createGeometryMeshes(geoms) {
+  const meshes = [];
+  if (!geoms) return meshes;
+  if (geoms.board && geoms.board.geometry) {
+    const mesh = new THREE11.Mesh(
+      geoms.board.geometry,
+      new THREE11.MeshStandardMaterial({
+        color: geoms.board.color,
+        side: THREE11.DoubleSide,
+        flatShading: true
+      })
+    );
+    mesh.name = "board-geom";
+    meshes.push(mesh);
+  }
+  const createMeshesFromArray = (geomArray) => {
+    if (geomArray) {
+      geomArray.forEach((comp) => {
+        const mesh = new THREE11.Mesh(
+          comp.geometry,
+          new THREE11.MeshStandardMaterial({
+            color: comp.color,
+            side: THREE11.DoubleSide,
+            flatShading: true
+            // Consistent with board
+          })
+        );
+        mesh.name = comp.key;
+        meshes.push(mesh);
+      });
+    }
+  };
+  createMeshesFromArray(geoms.platedHoles);
+  createMeshesFromArray(geoms.smtPads);
+  createMeshesFromArray(geoms.vias);
+  return meshes;
+}
+
+// src/utils/manifold/create-three-texture-meshes.ts
+import * as THREE12 from "three";
+function createTextureMeshes(textures, boardData, pcbThickness) {
+  const meshes = [];
+  if (!textures || !boardData || pcbThickness === null) return meshes;
+  const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
+    if (!texture) return null;
+    const planeGeom = new THREE12.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE12.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      side: THREE12.DoubleSide,
+      depthWrite: false
+      // Important for layers to avoid z-fighting issues with board itself
+    });
+    const mesh = new THREE12.Mesh(planeGeom, material);
+    mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
+    if (isBottomLayer) {
+      mesh.rotation.set(Math.PI, 0, 0);
+    }
+    mesh.name = `${isBottomLayer ? "bottom" : "top"}-${keySuffix}-texture-plane`;
+    return mesh;
+  };
+  const topTraceMesh = createTexturePlane(
+    textures.topTrace,
+    pcbThickness / 2 + 0.015,
+    // Offset similar to CadViewerManifold
+    false,
+    "trace"
+  );
+  if (topTraceMesh) meshes.push(topTraceMesh);
+  const topSilkscreenMesh = createTexturePlane(
+    textures.topSilkscreen,
+    pcbThickness / 2 + 0.017,
+    // Slightly above trace
+    false,
+    "silkscreen"
+  );
+  if (topSilkscreenMesh) meshes.push(topSilkscreenMesh);
+  const bottomTraceMesh = createTexturePlane(
+    textures.bottomTrace,
+    -pcbThickness / 2 - 0.015,
+    true,
+    "trace"
+  );
+  if (bottomTraceMesh) meshes.push(bottomTraceMesh);
+  const bottomSilkscreenMesh = createTexturePlane(
+    textures.bottomSilkscreen,
+    -pcbThickness / 2 - 0.017,
+    true,
+    "silkscreen"
+  );
+  if (bottomSilkscreenMesh) meshes.push(bottomSilkscreenMesh);
+  return meshes;
+}
+
 // src/CadViewerManifold.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var CadViewerManifold = ({
@@ -19689,20 +19812,20 @@ var CadViewerManifold = ({
     });
   }, []);
   const {
-    boardThreeGeom,
-    boardColor,
-    otherComponentGeoms,
-    topTraceTexture,
-    bottomTraceTexture,
-    topSilkscreenTexture,
-    bottomSilkscreenTexture,
+    geoms,
+    textures,
     pcbThickness,
     error: builderError,
     isLoading: builderIsLoading,
     boardData
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
+  const geometryMeshes = useMemo7(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo7(
+    () => createTextureMeshes(textures, boardData, pcbThickness),
+    [textures, boardData, pcbThickness]
+  );
   const cadComponents = useMemo7(
-    () => circuitJson ? su6(circuitJson).cad_component.list() : [],
+    () => circuitJson ? su12(circuitJson).cad_component.list() : [],
     [circuitJson]
   );
   const initialCameraPosition = useMemo7(() => {
@@ -19750,12 +19873,9 @@ var CadViewerManifold = ({
       }
     );
   }
-  if (builderIsLoading || !boardData) {
+  if (builderIsLoading || !boardData || !geoms || !textures) {
     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,
     {
@@ -19763,112 +19883,8 @@ var CadViewerManifold = ({
       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)),
+        geometryMeshes.map((mesh, index) => /* @__PURE__ */ jsx11("primitive", { object: mesh }, `${mesh.name}-${index}`)),
+        textureMeshes.map((mesh, index) => /* @__PURE__ */ jsx11("primitive", { object: mesh }, `${mesh.name}-${index}`)),
         cadComponents.map((cad_component) => /* @__PURE__ */ jsx11(
           ThreeErrorBoundary,
           {
@@ -20031,12 +20047,12 @@ var CadViewer = (props) => {
 
 // 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 { su as su13 } from "@tscircuit/soup-util";
+import * as THREE16 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE9 from "three";
+import * as THREE13 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute4 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -20050,12 +20066,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      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)
+      const v1 = new THREE13.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE13.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE13.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE13.Vector3().crossVectors(
+        new THREE13.Vector3().subVectors(v2, v1),
+        new THREE13.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -20081,22 +20097,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 THREE11 from "three";
+import * as THREE15 from "three";
 
 // src/utils/load-model.ts
-import * as THREE10 from "three";
+import * as THREE14 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 THREE10.MeshStandardMaterial({
+    const material = new THREE14.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE10.Mesh(geometry, material);
+    return new THREE14.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader3();
@@ -20123,9 +20139,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE15.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE15.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE15.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -20138,13 +20154,13 @@ async function renderComponent(component, scene) {
       component.model_jscad
     );
     const threeGeom = convertCSGToThreeGeom2(jscadObject);
-    const material2 = new THREE11.MeshStandardMaterial({
+    const material2 = new THREE15.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5,
-      side: THREE11.DoubleSide
+      side: THREE15.DoubleSide
     });
-    const mesh2 = new THREE11.Mesh(threeGeom, material2);
+    const mesh2 = new THREE15.Mesh(threeGeom, material2);
     if (component.position) {
       mesh2.position.set(
         component.position.x ?? 0,
@@ -20154,9 +20170,9 @@ async function renderComponent(component, scene) {
     }
     if (component.rotation) {
       mesh2.rotation.set(
-        THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
-        THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
-        THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
+        THREE15.MathUtils.degToRad(component.rotation.x ?? 0),
+        THREE15.MathUtils.degToRad(component.rotation.y ?? 0),
+        THREE15.MathUtils.degToRad(component.rotation.z ?? 0)
       );
     }
     scene.add(mesh2);
@@ -20169,13 +20185,13 @@ async function renderComponent(component, scene) {
     for (const operation of jscadOperations) {
       const jscadObject = executeJscadOperations2(import_modeling2.default, operation);
       const threeGeom = convertCSGToThreeGeom2(jscadObject);
-      const material2 = new THREE11.MeshStandardMaterial({
+      const material2 = new THREE15.MeshStandardMaterial({
         color: 4473924,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE11.DoubleSide
+        side: THREE15.DoubleSide
       });
-      const mesh2 = new THREE11.Mesh(threeGeom, material2);
+      const mesh2 = new THREE15.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -20185,22 +20201,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE11.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE11.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE11.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE15.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE15.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE15.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE11.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE11.MeshStandardMaterial({
+  const geometry = new THREE15.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE15.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE11.Mesh(geometry, material);
+  const mesh = new THREE15.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -20221,11 +20237,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE12.Scene();
+  const scene = new THREE16.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width, height);
-  renderer.setClearColor(new THREE12.Color(backgroundColor), 1);
-  const camera = new THREE12.OrthographicCamera();
+  renderer.setClearColor(new THREE16.Color(backgroundColor), 1);
+  const camera = new THREE16.OrthographicCamera();
   const aspect = width / height;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -20239,14 +20255,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 THREE12.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE16.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE12.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE16.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE12.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE16.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su7(circuitJson).cad_component.list();
+  const components = su13(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
@@ -20254,8 +20270,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   if (boardGeom) {
     for (const geom of boardGeom) {
       const geometry = createGeometryFromPolygons(geom.polygons);
-      const material = new THREE12.MeshStandardMaterial({
-        color: new THREE12.Color(
+      const material = new THREE16.MeshStandardMaterial({
+        color: new THREE16.Color(
           geom.color?.[0] ?? 0,
           geom.color?.[1] ?? 0,
           geom.color?.[2] ?? 0
@@ -20264,18 +20280,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
         roughness: 0.8,
         opacity: 0.9,
         transparent: true,
-        side: THREE12.DoubleSide
+        side: THREE16.DoubleSide
       });
-      const mesh = new THREE12.Mesh(geometry, material);
+      const mesh = new THREE16.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE12.GridHelper(100, 100);
+  const gridHelper = new THREE16.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE12.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE12.Vector3());
-  const size = box.getSize(new THREE12.Vector3());
+  const box = new THREE16.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE16.Vector3());
+  const size = box.getSize(new THREE16.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size.x, size.y, size.z);
   if (maxDim > 0) {

package/package.json

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