@tscircuit/3d-viewer 0.0.470 → 0.0.471

package/dist/index.d.ts

@@ -83,6 +83,8 @@ interface ManifoldTextures {
     bottomSoldermask?: THREE.CanvasTexture | null;
     topCopperText?: THREE.CanvasTexture | null;
     bottomCopperText?: THREE.CanvasTexture | null;
+    topPanelOutlines?: THREE.CanvasTexture | null;
+    bottomPanelOutlines?: THREE.CanvasTexture | null;
 }
 interface UseManifoldBoardBuilderResult {
     geoms: ManifoldGeoms | null;

package/dist/index.js

@@ -14229,10 +14229,10 @@ var require_browser = __commonJS({
 
 // src/CadViewer.tsx
 import { useState as useState35, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect43 } from "react";
-import * as THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/CadViewerJscad.tsx
-import { su as su11 } from "@tscircuit/circuit-json-util";
+import { su as su12 } from "@tscircuit/circuit-json-util";
 import { forwardRef as forwardRef3, useMemo as useMemo20 } from "react";
 
 // src/AnyCadComponent.tsx
@@ -28509,7 +28509,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.469",
+  version: "0.0.470",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -29782,6 +29782,10 @@ var createSimplifiedBoardGeom = (circuitJson) => {
   let pcbThickness = 1.2;
   if (panels.length > 0) {
     boardOrPanel = panels[0];
+    const firstBoardInPanel = boards.find(
+      (b) => b.pcb_panel_id === boardOrPanel.pcb_panel_id
+    );
+    pcbThickness = firstBoardInPanel?.thickness ?? 1.2;
   } else {
     const boardsNotInPanel = boards.filter(
       (b) => !b.pcb_panel_id
@@ -29807,7 +29811,10 @@ var createSimplifiedBoardGeom = (circuitJson) => {
       center: [boardOrPanel.center.x, boardOrPanel.center.y, 0]
     });
   }
-  const material = boardMaterialColors["material" in boardOrPanel ? boardOrPanel.material ?? "fr4" : "fr4"] ?? colors.fr4Tan;
+  const materialName = "material" in boardOrPanel && boardOrPanel.material ? boardOrPanel.material : panels.length > 0 ? boards.find(
+    (b) => b.pcb_panel_id === boardOrPanel.pcb_panel_id
+  )?.material ?? "fr4" : "fr4";
+  const material = boardMaterialColors[materialName] ?? colors.fr4Tan;
   return [(0, import_colors.colorize)(material, boardGeom)];
 };
 var createBoardGeomFromCircuitJson = (circuitJson, opts = {}) => {
@@ -30612,16 +30619,18 @@ var BoardGeomBuilder = class {
     const boards = su3(circuitJson).pcb_board.list();
     if (panels.length > 0) {
       const panel = panels[0];
+      const firstBoardInPanel = boards.find(
+        (b) => b.pcb_panel_id === panel.pcb_panel_id
+      );
       this.board = {
         type: "pcb_board",
         pcb_board_id: panel.pcb_panel_id,
         center: panel.center,
         width: panel.width,
         height: panel.height,
-        thickness: 1.6,
-        // Default thickness
-        material: "fr4",
-        num_layers: 2
+        thickness: firstBoardInPanel?.thickness ?? 1.6,
+        material: firstBoardInPanel?.material ?? "fr4",
+        num_layers: firstBoardInPanel?.num_layers ?? 2
       };
     } else {
       const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
@@ -31618,8 +31627,8 @@ var ThreeErrorBoundary = class extends React11.Component {
 
 // src/three-components/JscadBoardTextures.tsx
 import { useEffect as useEffect22, useMemo as useMemo19 } from "react";
-import * as THREE22 from "three";
-import { su as su8 } from "@tscircuit/circuit-json-util";
+import * as THREE23 from "three";
+import { su as su9 } from "@tscircuit/circuit-json-util";
 
 // src/utils/soldermask-texture.ts
 import * as THREE18 from "three";
@@ -33088,6 +33097,72 @@ function createCopperTextTextureForLayer({
   return texture;
 }
 
+// src/utils/panel-outline-texture.ts
+import * as THREE22 from "three";
+import { su as su8 } from "@tscircuit/circuit-json-util";
+function createPanelOutlineTextureForLayer({
+  layer,
+  circuitJson,
+  panelData,
+  outlineColor = "black",
+  traceTextureResolution
+}) {
+  const boardsInPanel = su8(circuitJson).pcb_board.list().filter((b) => b.pcb_panel_id === panelData.pcb_board_id);
+  if (boardsInPanel.length === 0) {
+    return null;
+  }
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(panelData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(panelData.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 = outlineColor;
+  ctx.lineWidth = 0.05 * traceTextureResolution;
+  const canvasXFromPcb = (pcbX) => (pcbX - panelData.center.x + panelData.width / 2) * traceTextureResolution;
+  const canvasYFromPcb = (pcbY) => (-(pcbY - panelData.center.y) + panelData.height / 2) * traceTextureResolution;
+  boardsInPanel.forEach((board) => {
+    if (board.outline && board.outline.length >= 2) {
+      ctx.beginPath();
+      board.outline.forEach((point2, index2) => {
+        const x = canvasXFromPcb(point2.x);
+        const y = canvasYFromPcb(point2.y);
+        if (index2 === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+      });
+      ctx.closePath();
+      ctx.stroke();
+    } else {
+      const width10 = board.width;
+      const height10 = board.height;
+      const { x: centerX, y: centerY } = board.center;
+      const x = canvasXFromPcb(centerX - width10 / 2);
+      const y = canvasYFromPcb(centerY + height10 / 2);
+      ctx.strokeRect(
+        x,
+        y,
+        width10 * traceTextureResolution,
+        height10 * traceTextureResolution
+      );
+    }
+  });
+  const texture = new THREE22.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE22.LinearMipmapLinearFilter;
+  texture.magFilter = THREE22.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
+}
+
 // src/three-components/JscadBoardTextures.tsx
 function JscadBoardTextures({
   circuitJson,
@@ -33096,8 +33171,30 @@ function JscadBoardTextures({
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
   const boardData = useMemo19(() => {
-    const boards = su8(circuitJson).pcb_board.list();
-    return boards.length > 0 ? boards[0] : null;
+    const panels = circuitJson.filter(
+      (e) => e.type === "pcb_panel"
+    );
+    const boards = su9(circuitJson).pcb_board.list();
+    if (panels.length > 0) {
+      const panel = panels[0];
+      const firstBoardInPanel = boards.find(
+        (b) => b.pcb_panel_id === panel.pcb_panel_id
+      );
+      return {
+        type: "pcb_board",
+        pcb_board_id: panel.pcb_panel_id,
+        center: panel.center,
+        width: panel.width,
+        height: panel.height,
+        thickness: firstBoardInPanel?.thickness ?? 1.6,
+        material: firstBoardInPanel?.material ?? "fr4",
+        num_layers: firstBoardInPanel?.num_layers ?? 2
+      };
+    }
+    const boardsNotInPanel = boards.filter(
+      (b) => !b.pcb_panel_id
+    );
+    return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
   const textures = useMemo19(() => {
     if (!boardData || !boardData.width || !boardData.height) return null;
@@ -33162,28 +33259,40 @@ function JscadBoardTextures({
         boardData,
         copperColor: `rgb(${Math.round(colors.copper[0] * 255)}, ${Math.round(colors.copper[1] * 255)}, ${Math.round(colors.copper[2] * 255)})`,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      }),
+      topPanelOutlines: createPanelOutlineTextureForLayer({
+        layer: "top",
+        circuitJson,
+        panelData: boardData,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      }),
+      bottomPanelOutlines: createPanelOutlineTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        panelData: boardData,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       })
     };
   }, [circuitJson, boardData]);
   useEffect22(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
-    const createTexturePlane = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false) => {
+    const createTexturePlane = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = false) => {
       if (!texture) return null;
-      const planeGeom = new THREE22.PlaneGeometry(
+      const planeGeom = new THREE23.PlaneGeometry(
         boardData.width,
         boardData.height
       );
-      const material = new THREE22.MeshBasicMaterial({
+      const material = new THREE23.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE22.DoubleSide,
-        depthWrite: false,
+        side: THREE23.DoubleSide,
+        depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -1 : 0,
         polygonOffsetUnits: usePolygonOffset ? -1 : 0
       });
-      const mesh = new THREE22.Mesh(planeGeom, material);
+      const mesh = new THREE23.Mesh(planeGeom, material);
       mesh.position.set(boardData.center.x, boardData.center.y, zOffset);
       if (isBottomLayer) {
         mesh.rotation.set(Math.PI, 0, 0);
@@ -33290,13 +33399,41 @@ function JscadBoardTextures({
         rootObject.add(bottomCopperTextMesh);
       }
     }
+    if (visibility.boardBody) {
+      const topPanelOutlinesMesh = createTexturePlane(
+        textures.topPanelOutlines,
+        pcbThickness / 2 + SURFACE_OFFSET + 3e-3,
+        // Above silkscreen
+        false,
+        "jscad-top-panel-outlines",
+        false,
+        true
+      );
+      if (topPanelOutlinesMesh) {
+        meshes.push(topPanelOutlinesMesh);
+        rootObject.add(topPanelOutlinesMesh);
+      }
+      const bottomPanelOutlinesMesh = createTexturePlane(
+        textures.bottomPanelOutlines,
+        -pcbThickness / 2 - SURFACE_OFFSET - 3e-3,
+        // Below bottom silkscreen
+        true,
+        "jscad-bottom-panel-outlines",
+        false,
+        true
+      );
+      if (bottomPanelOutlinesMesh) {
+        meshes.push(bottomPanelOutlinesMesh);
+        rootObject.add(bottomPanelOutlinesMesh);
+      }
+    }
     return () => {
       meshes.forEach((mesh) => {
         if (mesh.parent === rootObject) {
           rootObject.remove(mesh);
         }
         mesh.geometry.dispose();
-        if (mesh.material instanceof THREE22.Material) {
+        if (mesh.material instanceof THREE23.Material) {
           mesh.material.dispose();
         }
       });
@@ -33306,16 +33443,16 @@ function JscadBoardTextures({
 }
 
 // src/utils/preprocess-circuit-json.ts
-import { su as su10 } from "@tscircuit/circuit-json-util";
+import { su as su11 } from "@tscircuit/circuit-json-util";
 
 // src/utils/create-faux-board.ts
-import { su as su9, getBoundsOfPcbElements } from "@tscircuit/circuit-json-util";
+import { su as su10, getBoundsOfPcbElements } from "@tscircuit/circuit-json-util";
 function createFauxBoard(circuitJson) {
-  const cadComponents = su9(circuitJson).cad_component.list();
-  const pads = su9(circuitJson).pcb_smtpad.list();
-  const holes = su9(circuitJson).pcb_hole.list();
-  const platedHoles = su9(circuitJson).pcb_plated_hole.list();
-  const vias = su9(circuitJson).pcb_via.list();
+  const cadComponents = su10(circuitJson).cad_component.list();
+  const pads = su10(circuitJson).pcb_smtpad.list();
+  const holes = su10(circuitJson).pcb_hole.list();
+  const platedHoles = su10(circuitJson).pcb_plated_hole.list();
+  const vias = su10(circuitJson).pcb_via.list();
   if (cadComponents.length === 0 && pads.length === 0 && holes.length === 0 && platedHoles.length === 0 && vias.length === 0) {
     return null;
   }
@@ -33364,7 +33501,7 @@ function createFauxBoard(circuitJson) {
 
 // src/utils/preprocess-circuit-json.ts
 function addFauxBoardIfNeeded(circuitJson) {
-  const boards = su10(circuitJson).pcb_board.list();
+  const boards = su11(circuitJson).pcb_board.list();
   if (boards.length > 0) {
     return circuitJson;
   }
@@ -33414,7 +33551,7 @@ var CadViewerJscad = forwardRef3(
     const initialCameraPosition = useMemo20(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
-        const board = su11(internalCircuitJson).pcb_board.list()[0];
+        const board = su12(internalCircuitJson).pcb_board.list()[0];
         if (!board) return [5, -5, 5];
         const { width: width10, height: height10 } = board;
         if (!width10 && !height10) {
@@ -33440,7 +33577,7 @@ var CadViewerJscad = forwardRef3(
     const isFauxBoard = useMemo20(() => {
       if (!internalCircuitJson) return false;
       try {
-        const board = su11(internalCircuitJson).pcb_board.list()[0];
+        const board = su12(internalCircuitJson).pcb_board.list()[0];
         return !!board && board.pcb_board_id === "faux-board";
       } catch (e) {
         return false;
@@ -33449,7 +33586,7 @@ var CadViewerJscad = forwardRef3(
     const boardDimensions = useMemo20(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su11(internalCircuitJson).pcb_board.list()[0];
+        const board = su12(internalCircuitJson).pcb_board.list()[0];
         if (!board) return void 0;
         return { width: board.width ?? 0, height: board.height ?? 0 };
       } catch (e) {
@@ -33460,7 +33597,7 @@ var CadViewerJscad = forwardRef3(
     const boardCenter = useMemo20(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su11(internalCircuitJson).pcb_board.list()[0];
+        const board = su12(internalCircuitJson).pcb_board.list()[0];
         if (!board || !board.center) return void 0;
         return { x: board.center.x, y: board.center.y };
       } catch (e) {
@@ -33470,7 +33607,7 @@ var CadViewerJscad = forwardRef3(
     }, [internalCircuitJson]);
     const pcbThickness = usePcbThickness(internalCircuitJson);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-    const cad_components = su11(internalCircuitJson).cad_component.list();
+    const cad_components = su12(internalCircuitJson).cad_component.list();
     return /* @__PURE__ */ jsxs5(
       CadViewerContainer,
       {
@@ -33522,13 +33659,13 @@ var CadViewerJscad = forwardRef3(
 );
 
 // src/CadViewerManifold.tsx
-import { su as su18 } from "@tscircuit/circuit-json-util";
+import { su as su19 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect24, useMemo as useMemo22, useState as useState15 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState14, useEffect as useEffect23, useMemo as useMemo21, useRef as useRef9 } from "react";
-import { su as su17 } from "@tscircuit/circuit-json-util";
-import * as THREE28 from "three";
+import { su as su18 } from "@tscircuit/circuit-json-util";
+import * as THREE29 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise3 = (points) => {
@@ -33589,17 +33726,17 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 
 // src/utils/manifold/process-copper-pours.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE23.BufferGeometry();
+  const geometry = new THREE24.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE23.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE24.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE23.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE24.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];
@@ -33772,7 +33909,7 @@ function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbT
       }
       const covered = pour.covered_with_solder_mask !== false;
       const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4TracesWithoutMaskTan : colors.copper;
-      const pourColor = new THREE24.Color(...pourColorArr);
+      const pourColor = new THREE25.Color(...pourColorArr);
       const threeGeom = manifoldMeshToThreeGeometry(pourOp.getMesh());
       copperPourGeoms.push({
         key: `coppour-${pour.pcb_copper_pour_id}`,
@@ -33785,7 +33922,7 @@ function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-cutouts.ts
-import { su as su12 } from "@tscircuit/circuit-json-util";
+import { su as su13 } from "@tscircuit/circuit-json-util";
 
 // src/utils/pad-geoms.ts
 var RECT_PAD_SEGMENTS2 = 64;
@@ -33877,7 +34014,7 @@ var arePointsClockwise5 = (points) => {
 };
 function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const cutoutOps = [];
-  const pcbCutouts = su12(circuitJson).pcb_cutout.list();
+  const pcbCutouts = su13(circuitJson).pcb_cutout.list();
   for (const cutout of pcbCutouts) {
     let cutoutOp;
     const cutoutHeight = pcbThickness * 1.5;
@@ -33972,7 +34109,7 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 }
 
 // src/utils/manifold/process-non-plated-holes.ts
-import { su as su13 } from "@tscircuit/circuit-json-util";
+import { su as su14 } from "@tscircuit/circuit-json-util";
 
 // src/utils/hole-geoms.ts
 function createCircleHoleDrill({
@@ -34024,7 +34161,7 @@ function isRotatedPillHole(hole) {
 }
 function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const nonPlatedHoleBoardDrills = [];
-  const pcbHoles = su13(circuitJson).pcb_hole.list();
+  const pcbHoles = su14(circuitJson).pcb_hole.list();
   const createPillOp = (width10, height10, depth) => {
     const pillOp = createRoundedRectPrism({
       Manifold,
@@ -34073,8 +34210,8 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 }
 
 // src/utils/manifold/process-plated-holes.ts
-import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE25 from "three";
+import { su as su15 } from "@tscircuit/circuit-json-util";
+import * as THREE26 from "three";
 var arePointsClockwise6 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -34095,11 +34232,11 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE25.Color(...colors.copper);
+var COPPER_COLOR = new THREE26.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
-  const pcbPlatedHoles = su14(circuitJson).pcb_plated_hole.list();
+  const pcbPlatedHoles = su15(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
   const platedHoleCopperOpsForSubtract = [];
   const createPillOp = (width10, height10, depth) => {
@@ -34668,12 +34805,12 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-smt-pads.ts
-import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE26 from "three";
-var COPPER_COLOR2 = new THREE26.Color(...colors.copper);
+import { su as su16 } from "@tscircuit/circuit-json-util";
+import * as THREE27 from "three";
+var COPPER_COLOR2 = new THREE27.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
   const smtPadGeoms = [];
-  const smtPads = su15(circuitJson).pcb_smtpad.list();
+  const smtPads = su16(circuitJson).pcb_smtpad.list();
   smtPads.forEach((pad2, index2) => {
     const padBaseThickness = DEFAULT_SMT_PAD_THICKNESS;
     const zPos = pad2.layer === "bottom" ? -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper : pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper;
@@ -34708,8 +34845,8 @@ function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifold
 }
 
 // src/utils/manifold/process-vias.ts
-import { su as su16 } from "@tscircuit/circuit-json-util";
-import * as THREE27 from "three";
+import { su as su17 } from "@tscircuit/circuit-json-util";
+import * as THREE28 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -34762,10 +34899,10 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR3 = new THREE27.Color(...colors.copper);
+var COPPER_COLOR3 = new THREE28.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
-  const pcbVias = su16(circuitJson).pcb_via.list();
+  const pcbVias = su17(circuitJson).pcb_via.list();
   const viaCopperGeoms = [];
   pcbVias.forEach((via, index2) => {
     if (typeof via.hole_diameter === "number") {
@@ -34825,26 +34962,28 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
-    const boards = su17(circuitJson).pcb_board.list();
+    const boards = su18(circuitJson).pcb_board.list();
     if (panels.length > 0) {
       const panel = panels[0];
+      const firstBoardInPanel = boards.find(
+        (b) => b.pcb_panel_id === panel.pcb_panel_id
+      );
       return {
         type: "pcb_board",
         pcb_board_id: panel.pcb_panel_id,
         center: panel.center,
         width: panel.width,
         height: panel.height,
-        thickness: 1.6,
-        // Default thickness
-        material: "fr4",
-        num_layers: 2
+        thickness: firstBoardInPanel?.thickness ?? 1.6,
+        material: firstBoardInPanel?.material ?? "fr4",
+        num_layers: firstBoardInPanel?.num_layers ?? 2
       };
     }
     const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
   const isFauxBoard = useMemo21(() => {
-    const boards = su17(circuitJson).pcb_board.list();
+    const boards = su18(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
   useEffect23(() => {
@@ -34979,7 +35118,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE28.Color(
+              color: new THREE29.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -35009,7 +35148,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE28.Color(
+          color: new THREE29.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -35118,6 +35257,18 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         copperColor,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       });
+      currentTextures.topPanelOutlines = createPanelOutlineTextureForLayer({
+        layer: "top",
+        circuitJson,
+        panelData: boardData,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      currentTextures.bottomPanelOutlines = createPanelOutlineTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        panelData: boardData,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
       setTextures(currentTextures);
     } catch (e) {
       console.error("Error processing geometry with Manifold in hook:", e);
@@ -35146,11 +35297,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE29 from "three";
-var DEFAULT_SIDE = THREE29.DoubleSide;
+import * as THREE30 from "three";
+var DEFAULT_SIDE = THREE30.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -35158,7 +35309,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE29.MeshPhysicalMaterial({
+    return new THREE30.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -35172,7 +35323,7 @@ var createBoardMaterial = ({
       flatShading: true
     });
   }
-  return new THREE29.MeshStandardMaterial({
+  return new THREE30.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -35188,12 +35339,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE30.Mesh(
+    const mesh = new THREE31.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE30.DoubleSide,
+        side: THREE31.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -35203,11 +35354,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE30.Mesh(
+        const mesh = new THREE31.Mesh(
           comp.geometry,
-          new THREE30.MeshStandardMaterial({
+          new THREE31.MeshStandardMaterial({
             color: comp.color,
-            side: THREE30.DoubleSide,
+            side: THREE31.DoubleSide,
             flatShading: true,
             // Consistent with board
             polygonOffset: true,
@@ -35228,25 +35379,24 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix, usePolygonOffset = false, renderOrder = 0) => {
     if (!texture) return null;
-    const planeGeom = new THREE31.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE31.MeshBasicMaterial({
+    const planeGeom = new THREE32.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE32.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE31.DoubleSide,
-      depthWrite: false,
-      // Important for layers to avoid z-fighting issues with board itself
+      side: THREE32.DoubleSide,
+      depthWrite: keySuffix === "panel-outlines",
       polygonOffset: usePolygonOffset,
       polygonOffsetFactor: usePolygonOffset ? -4 : 0,
       // Increased for better z-fighting prevention
       polygonOffsetUnits: usePolygonOffset ? -4 : 0
     });
-    const mesh = new THREE31.Mesh(planeGeom, material);
+    const mesh = new THREE32.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -35362,6 +35512,26 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
     // Render after soldermask
   );
   if (bottomCopperTextMesh) meshes.push(bottomCopperTextMesh);
+  const topPanelOutlinesMesh = createTexturePlane(
+    textures.topPanelOutlines,
+    pcbThickness / 2 + 4e-3,
+    // Above silkscreen
+    false,
+    "panel-outlines",
+    false,
+    4
+  );
+  if (topPanelOutlinesMesh) meshes.push(topPanelOutlinesMesh);
+  const bottomPanelOutlinesMesh = createTexturePlane(
+    textures.bottomPanelOutlines,
+    -pcbThickness / 2 - 4e-3,
+    // Below bottom silkscreen
+    true,
+    "panel-outlines",
+    false,
+    4
+  );
+  if (bottomPanelOutlinesMesh) meshes.push(bottomPanelOutlinesMesh);
   return meshes;
 }
 
@@ -35418,6 +35588,8 @@ var BoardMeshes = ({
         shouldShow = visibility.topCopper;
       } else if (mesh.name.includes("bottom-copper-text")) {
         shouldShow = visibility.bottomCopper;
+      } else if (mesh.name.includes("panel-outlines")) {
+        shouldShow = visibility.boardBody;
       }
       if (shouldShow) {
         rootObject.add(mesh);
@@ -35530,7 +35702,7 @@ try {
     [textures, boardData, pcbThickness]
   );
   const cadComponents = useMemo22(
-    () => su18(circuitJson).cad_component.list(),
+    () => su19(circuitJson).cad_component.list(),
     [circuitJson]
   );
   const boardDimensions = useMemo22(() => {
@@ -42272,7 +42444,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE32.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE33.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState35("manifold");
@@ -42538,12 +42710,12 @@ var CadViewer = (props) => {
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
-import { su as su19 } from "@tscircuit/circuit-json-util";
-import * as THREE36 from "three";
+import { su as su20 } from "@tscircuit/circuit-json-util";
+import * as THREE37 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -42557,12 +42729,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE33.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE33.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE33.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE33.Vector3().crossVectors(
-        new THREE33.Vector3().subVectors(v2, v1),
-        new THREE33.Vector3().subVectors(v3, v1)
+      const v1 = new THREE34.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE34.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE34.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE34.Vector3().crossVectors(
+        new THREE34.Vector3().subVectors(v2, v1),
+        new THREE34.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -42586,10 +42758,10 @@ function createGeometryFromPolygons(polygons) {
 var import_modeling2 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 var jscadModeling2 = __toESM(require_src(), 1);
-import * as THREE35 from "three";
+import * as THREE36 from "three";
 
 // src/utils/load-model.ts
-import * as THREE34 from "three";
+import * as THREE35 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -42597,12 +42769,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE34.MeshStandardMaterial({
+    const material = new THREE35.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE34.Mesh(geometry, material);
+    return new THREE35.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -42635,9 +42807,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE35.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -42651,13 +42823,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE35.MeshStandardMaterial({
+      const material2 = new THREE36.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE35.DoubleSide
+        side: THREE36.DoubleSide
       });
-      const mesh2 = new THREE35.Mesh(threeGeom, material2);
+      const mesh2 = new THREE36.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -42667,9 +42839,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE35.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -42686,17 +42858,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE35.Color(geomInfo.color);
+      const color = new THREE36.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE35.MeshStandardMaterial({
+      const material2 = new THREE36.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE35.DoubleSide
+        side: THREE36.DoubleSide
       });
-      const mesh2 = new THREE35.Mesh(threeGeom, material2);
+      const mesh2 = new THREE36.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -42706,22 +42878,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE35.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE35.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE36.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE36.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE35.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE35.MeshStandardMaterial({
+  const geometry = new THREE36.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE36.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE35.Mesh(geometry, material);
+  const mesh = new THREE36.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -42742,11 +42914,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE36.Scene();
+  const scene = new THREE37.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE36.Color(backgroundColor), 1);
-  const camera = new THREE36.OrthographicCamera();
+  renderer.setClearColor(new THREE37.Color(backgroundColor), 1);
+  const camera = new THREE37.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -42760,22 +42932,22 @@ 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 THREE36.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE37.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE36.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE37.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE36.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE37.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su19(circuitJson).cad_component.list();
+  const components = su20(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
-  const boardData = su19(circuitJson).pcb_board.list()[0];
+  const boardData = su20(circuitJson).pcb_board.list()[0];
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE36.Color(
+    const baseColor = new THREE37.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -42787,28 +42959,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE36.DoubleSide
+        side: THREE37.DoubleSide
       });
-      const mesh = new THREE36.Mesh(geometry, material);
+      const mesh = new THREE37.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE36.Color(8947848);
-  const gridHelper = new THREE36.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE37.Color(8947848);
+  const gridHelper = new THREE37.GridHelper(100, 100, gridColor, gridColor);
   gridHelper.rotation.x = Math.PI / 2;
   const materials = Array.isArray(gridHelper.material) ? gridHelper.material : [gridHelper.material];
   for (const mat of materials) {
     mat.transparent = true;
     mat.opacity = 0.3;
-    if (mat instanceof THREE36.LineBasicMaterial) {
+    if (mat instanceof THREE37.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE36.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE36.Vector3());
-  const size5 = box.getSize(new THREE36.Vector3());
+  const box = new THREE37.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE37.Vector3());
+  const size5 = box.getSize(new THREE37.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size5.x, size5.y, size5.z);
   if (maxDim > 0) {

package/package.json

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