@tscircuit/3d-viewer 0.0.595 → 0.0.596

package/dist/index.js

@@ -14433,7 +14433,7 @@ var require_browser = __commonJS({
 
 // src/CadViewer.tsx
 import { useCallback as useCallback24, useEffect as useEffect49, useRef as useRef29, useState as useState39 } from "react";
-import * as THREE48 from "three";
+import * as THREE51 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
@@ -33696,7 +33696,7 @@ import * as THREE23 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.594",
+  version: "0.0.595",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -35559,37 +35559,10 @@ var useStlsFromGeom = (geom) => {
 import { useState as useState13, useEffect as useEffect22, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
-var import_primitives2 = __toESM(require_primitives(), 1);
 var import_colors = __toESM(require_colors(), 1);
+var import_primitives2 = __toESM(require_primitives(), 1);
 import { su as su3 } from "@tscircuit/circuit-json-util";
 
-// src/geoms/constants.ts
-var M = 0.01;
-var colors = {
-  // Warm ENIG gold, rather than saturated orange, matches manufactured pads.
-  copper: [0.78, 0.63, 0.39],
-  fr4Tan: [0.6, 0.43, 0.28],
-  // Deep, slightly blue-green solder mask keeps detail visible on dark UI.
-  fr4SolderMaskGreen: [0.06, 0.31, 0.19],
-  fr4TracesWithMaskGreen: [0.09, 0.38, 0.23],
-  fr4TracesWithoutMaskTan: [0.6, 0.43, 0.28],
-  fr1Tan: [0.8, 0.4, 0.2],
-  fr1TracesWithMaskCopper: [0.9, 0.6, 0.2],
-  fr1SolderMaskGreen: [0.02, 0.1, 0.04]
-};
-var MANIFOLD_Z_OFFSET = 1e-3;
-var SMOOTH_CIRCLE_SEGMENTS = 32;
-var TRACE_TEXTURE_RESOLUTION = 150;
-var FAUX_BOARD_OPACITY = 0.6;
-var boardMaterialColors = {
-  fr1: colors.fr1Tan,
-  fr4: colors.fr4Tan
-};
-var soldermaskColors = {
-  fr1: colors.fr1SolderMaskGreen,
-  fr4: colors.fr4SolderMaskGreen
-};
-
 // src/geoms/create-board-with-outline.ts
 var import_extrusions = __toESM(require_extrusions(), 1);
 var import_primitives = __toESM(require_primitives(), 1);
@@ -35621,6 +35594,109 @@ var createBoardGeomWithOutline = (board, depth = 1.2, options = {}) => {
   return boardGeom;
 };
 
+// src/utils/get-board-edge-color.ts
+import * as THREE25 from "three";
+
+// src/geoms/constants.ts
+var M = 0.01;
+var colors = {
+  // Warm ENIG gold, rather than saturated orange, matches manufactured pads.
+  copper: [0.78, 0.63, 0.39],
+  fr4Tan: [0.6, 0.43, 0.28],
+  // Deep, slightly blue-green solder mask keeps detail visible on dark UI.
+  fr4SolderMaskGreen: [0.06, 0.31, 0.19],
+  fr4TracesWithMaskGreen: [0.09, 0.38, 0.23],
+  fr4TracesWithoutMaskTan: [0.6, 0.43, 0.28],
+  fr1Tan: [0.8, 0.4, 0.2],
+  fr1TracesWithMaskCopper: [0.9, 0.6, 0.2],
+  fr1SolderMaskGreen: [0.02, 0.1, 0.04]
+};
+var MANIFOLD_Z_OFFSET = 1e-3;
+var SMOOTH_CIRCLE_SEGMENTS = 32;
+var TRACE_TEXTURE_RESOLUTION = 150;
+var FAUX_BOARD_OPACITY = 0.6;
+var boardMaterialColors = {
+  fr1: colors.fr1Tan,
+  fr4: colors.fr4Tan
+};
+var soldermaskColors = {
+  fr1: colors.fr1SolderMaskGreen,
+  fr4: colors.fr4SolderMaskGreen
+};
+
+// src/utils/soldermask-color.ts
+import * as THREE24 from "three";
+var SOLDERMASK_PRESET_HEX = {
+  red: "#650202",
+  blue: "#003f7d",
+  purple: "#4c1d69",
+  black: "#071014",
+  white: "#dddddd",
+  yellow: "#dcc84a"
+};
+var DEFAULT_SOLDERMASK_OPACITY = 0.875;
+var CSS_HEX_COLOR_PATTERN = /^#(?:[\da-f]{3}|[\da-f]{6})$/i;
+var CSS_RGB_INTEGER_PATTERN = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/i;
+var CSS_RGB_PERCENT_PATTERN = /^rgb\(\s*\d+%\s*,\s*\d+%\s*,\s*\d+%\s*\)$/i;
+var CSS_HSL_PATTERN = /^hsl\(\s*\d*\.?\d+\s*,\s*\d*\.?\d+%\s*,\s*\d*\.?\d+%\s*\)$/i;
+var SOLDERMASK_PRESET_OPACITY = {
+  blue: 0.96,
+  purple: 0.96,
+  black: 0.99,
+  yellow: 0.92
+};
+var resolveSoldermaskColor = (requestedColor) => {
+  const normalizedColor = requestedColor?.trim();
+  if (!normalizedColor) {
+    return null;
+  }
+  const lowercaseColor = normalizedColor.toLowerCase();
+  if (lowercaseColor === "green" || lowercaseColor === "not_specified") {
+    return null;
+  }
+  const presetName = lowercaseColor;
+  const presetColor = SOLDERMASK_PRESET_HEX[presetName];
+  if (presetColor) return new THREE24.Color(presetColor);
+  const isCssColor = Object.hasOwn(THREE24.Color.NAMES, lowercaseColor) || CSS_HEX_COLOR_PATTERN.test(normalizedColor) || CSS_RGB_INTEGER_PATTERN.test(normalizedColor) || CSS_RGB_PERCENT_PATTERN.test(normalizedColor) || CSS_HSL_PATTERN.test(normalizedColor);
+  return isCssColor ? new THREE24.Color(lowercaseColor) : null;
+};
+var resolveSoldermaskOpacity = (requestedColor) => {
+  const presetName = requestedColor?.trim().toLowerCase();
+  return SOLDERMASK_PRESET_OPACITY[presetName] ?? DEFAULT_SOLDERMASK_OPACITY;
+};
+var isYellowSoldermaskColor = ({
+  red,
+  green,
+  blue
+}) => Math.hypot(red - 220, green - 200, blue - 74) < 4 || Math.hypot(red - 218, green - 197, blue - 76) < 4;
+var compositeSoldermaskOverCopper = ({
+  soldermaskColor,
+  copperColor,
+  soldermaskOpacity
+}) => soldermaskColor.clone().multiplyScalar(soldermaskOpacity).add(copperColor.clone().multiplyScalar(1 - soldermaskOpacity));
+var soldermaskColorToCss = (color) => {
+  const displayColor = color.clone().convertLinearToSRGB();
+  const channels = [
+    Math.round(displayColor.r * 255),
+    Math.round(displayColor.g * 255),
+    Math.round(displayColor.b * 255)
+  ];
+  return `rgb(${channels.join(",")})`;
+};
+
+// src/utils/get-board-edge-color.ts
+var LEGACY_FR4_EDGE_COLOR = new THREE25.Color(1063462);
+var getBoardEdgeColor = ({
+  material,
+  solder_mask_color
+}) => {
+  const soldermaskColor = resolveSoldermaskColor(solder_mask_color);
+  if (soldermaskColor) return soldermaskColor;
+  if (material === "fr4") return LEGACY_FR4_EDGE_COLOR.clone();
+  const materialColor = boardMaterialColors[material] ?? colors.fr4Tan;
+  return new THREE25.Color(materialColor[0], materialColor[1], materialColor[2]);
+};
+
 // src/soup-to-3d/index.ts
 var createSimplifiedBoardGeom = (circuitJson) => {
   const panels = circuitJson.filter(
@@ -35628,13 +35704,12 @@ var createSimplifiedBoardGeom = (circuitJson) => {
   );
   const boards = su3(circuitJson).pcb_board.list();
   let boardOrPanel;
+  let board;
   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;
+    board = boards.find((b) => b.pcb_panel_id === boardOrPanel.pcb_panel_id);
+    pcbThickness = board?.thickness ?? 1.2;
   } else {
     const boardsNotInPanel = boards.filter(
       (b) => !b.pcb_panel_id
@@ -35644,6 +35719,7 @@ var createSimplifiedBoardGeom = (circuitJson) => {
       console.warn("No pcb_board or pcb_panel found for simplified geometry");
       return [];
     }
+    board = boardOrPanel;
     pcbThickness = boardOrPanel.thickness ?? 1.2;
   }
   let boardGeom;
@@ -35660,11 +35736,13 @@ var createSimplifiedBoardGeom = (circuitJson) => {
       center: [boardOrPanel.center.x, boardOrPanel.center.y, 0]
     });
   }
-  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)];
+  const boardEdgeColor = getBoardEdgeColor({
+    material: board?.material ?? "fr4",
+    solder_mask_color: board?.solder_mask_color
+  });
+  return [
+    (0, import_colors.colorize)([boardEdgeColor.r, boardEdgeColor.g, boardEdgeColor.b], boardGeom)
+  ];
 };
 
 // src/BoardGeomBuilder.ts
@@ -36381,7 +36459,8 @@ var BoardGeomBuilder = class {
         height: panel.height,
         thickness: firstBoardInPanel?.thickness ?? 1.4,
         material: firstBoardInPanel?.material ?? "fr4",
-        num_layers: firstBoardInPanel?.num_layers ?? 2
+        num_layers: firstBoardInPanel?.num_layers ?? 2,
+        solder_mask_color: firstBoardInPanel?.solder_mask_color
       };
     } else {
       const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
@@ -36850,8 +36929,11 @@ var BoardGeomBuilder = class {
   }
   finalize() {
     if (!this.boardGeom) return;
-    const boardMaterialColor = boardMaterialColors[this.board.material] ?? colors.fr4Tan;
-    this.boardGeom = (0, import_colors3.colorize)(boardMaterialColor, this.boardGeom);
+    const boardEdgeColor = getBoardEdgeColor(this.board);
+    this.boardGeom = (0, import_colors3.colorize)(
+      [boardEdgeColor.r, boardEdgeColor.g, boardEdgeColor.b],
+      this.boardGeom
+    );
     this.finalGeoms = [
       this.boardGeom,
       ...this.platedHoleGeoms,
@@ -36972,7 +37054,7 @@ var Text = ({
 };
 
 // src/three-components/Error3d.tsx
-import * as THREE24 from "three";
+import * as THREE26 from "three";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -37006,7 +37088,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component]);
   const group = useMemo19(() => {
-    const g = new THREE24.Group();
+    const g = new THREE26.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -37066,9 +37148,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo19(() => {
-    const m = new THREE24.Mesh(
-      new THREE24.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE24.MeshStandardMaterial({
+    const m = new THREE26.Mesh(
+      new THREE26.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE26.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -37093,7 +37175,7 @@ import { su as su8 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect25, useMemo as useMemo20 } from "react";
 
 // src/textures/create-combined-board-textures.ts
-import * as THREE36 from "three";
+import * as THREE39 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -37148,7 +37230,7 @@ function calculateOutlineBounds(boardData) {
 // src/utils/pad-texture.ts
 import { su as su5 } from "@tscircuit/circuit-json-util";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-import * as THREE25 from "three";
+import * as THREE27 from "three";
 function createPadTextureForLayer({
   layer,
   circuitJson,
@@ -37228,10 +37310,10 @@ function createPadTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -37239,7 +37321,7 @@ function createPadTextureForLayer({
 
 // src/utils/panel-outline-texture.ts
 import { su as su6 } from "@tscircuit/circuit-json-util";
-import * as THREE26 from "three";
+import * as THREE28 from "three";
 var resolvePanelIdForTexture = (circuitJson) => {
   const panels = circuitJson.filter(
     (e) => e.type === "pcb_panel"
@@ -37307,17 +37389,17 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE28.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE28.LinearMipmapLinearFilter;
+  texture.magFilter = THREE28.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE27 from "three";
+import * as THREE29 from "three";
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 import { getElementRenderLayers, su as su7 } from "@tscircuit/circuit-json-util";
 
@@ -37437,10 +37519,10 @@ function createTraceTextureForLayer({
     drawSoldermaskTop: false,
     drawSoldermaskBottom: false
   });
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE29.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE29.LinearMipmapLinearFilter;
+  texture.magFilter = THREE29.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -37448,7 +37530,7 @@ function createTraceTextureForLayer({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-import * as THREE28 from "three";
+import * as THREE30 from "three";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -37572,17 +37654,17 @@ function createCopperPourTextureForLayer({
   if (!onlyCoveredBySoldermask) {
     setColorAndDraw(uncoveredPours, uncoveredColor);
   }
-  const texture = new THREE28.CanvasTexture(canvas);
+  const texture = new THREE30.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE28.LinearMipmapLinearFilter;
-  texture.magFilter = THREE28.LinearFilter;
+  texture.minFilter = THREE30.LinearMipmapLinearFilter;
+  texture.magFilter = THREE30.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-text-texture-for-layer.ts
-import * as THREE29 from "three";
+import * as THREE31 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
@@ -37697,17 +37779,17 @@ function createCopperTextTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE29.CanvasTexture(canvas);
+  const texture = new THREE31.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE29.LinearMipmapLinearFilter;
-  texture.magFilter = THREE29.LinearFilter;
+  texture.minFilter = THREE31.LinearMipmapLinearFilter;
+  texture.magFilter = THREE31.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-fabrication-note-texture-for-layer.ts
-import * as THREE30 from "three";
+import * as THREE32 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
@@ -37937,17 +38019,17 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE30.CanvasTexture(canvas);
+  const texture = new THREE32.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE30.LinearMipmapLinearFilter;
-  texture.magFilter = THREE30.LinearFilter;
+  texture.minFilter = THREE32.LinearMipmapLinearFilter;
+  texture.magFilter = THREE32.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-keepout-texture-for-layer.ts
-import * as THREE31 from "three";
+import * as THREE33 from "three";
 
 // src/textures/keepout/keepout-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
@@ -38022,17 +38104,17 @@ function createKeepoutTextureForLayer({
     elements,
     keepoutColor
   });
-  const texture = new THREE31.CanvasTexture(canvas);
+  const texture = new THREE33.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE31.LinearMipmapLinearFilter;
-  texture.magFilter = THREE31.LinearFilter;
+  texture.minFilter = THREE33.LinearMipmapLinearFilter;
+  texture.magFilter = THREE33.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE32 from "three";
+import * as THREE34 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
@@ -38185,17 +38267,17 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE32.CanvasTexture(canvas);
+  const texture = new THREE34.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE32.LinearMipmapLinearFilter;
-  texture.magFilter = THREE32.LinearFilter;
+  texture.minFilter = THREE34.LinearMipmapLinearFilter;
+  texture.magFilter = THREE34.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE33 from "three";
+import * as THREE35 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
@@ -38323,42 +38405,60 @@ function createSilkscreenTextureForLayer({
     apertureElements,
     silkscreenColor
   });
-  const texture = new THREE33.CanvasTexture(canvas);
+  const texture = new THREE35.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE33.LinearMipmapLinearFilter;
-  texture.magFilter = THREE33.LinearFilter;
+  texture.minFilter = THREE35.LinearMipmapLinearFilter;
+  texture.magFilter = THREE35.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE34 from "three";
+import * as THREE37 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer9 } from "circuit-to-canvas";
+import * as THREE36 from "three";
 var toRgb2 = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
     b * 255
   )})`;
 };
-var NAMED_SOLDER_MASK_COLORS = {
-  green: { mask: "#0b5d3b", maskOverCopper: "#2f7a4f" },
-  purple: { mask: "#56317d", maskOverCopper: "#77549a" },
-  red: { mask: "#8f1f2d", maskOverCopper: "#b04b54" },
-  yellow: { mask: "#b49a00", maskOverCopper: "#c9b633" },
-  blue: { mask: "#145da0", maskOverCopper: "#3d7fb8" },
-  white: { mask: "#d5d7db", maskOverCopper: "#e2b84a" },
-  black: { mask: "#161b22", maskOverCopper: "#62666b" }
-};
-var getSoldermaskPalette = (material, solderMaskColor) => {
-  const namedColor = solderMaskColor ? NAMED_SOLDER_MASK_COLORS[solderMaskColor.trim().toLowerCase()] : void 0;
-  const soldermask = namedColor?.mask ?? solderMaskColor ?? toRgb2(soldermaskColors[material] ?? colors.fr4SolderMaskGreen);
-  const soldermaskOverCopper = namedColor?.maskOverCopper ?? (material === "fr1" ? toRgb2(colors.fr1TracesWithMaskCopper) : toRgb2(colors.fr4TracesWithMaskGreen));
+var getSoldermaskPalette = (boardData) => {
+  const legacySoldermask = toRgb2(
+    soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen
+  );
+  const legacySoldermaskOverCopper = boardData.material === "fr1" ? toRgb2(colors.fr1TracesWithMaskCopper) : toRgb2(colors.fr4TracesWithMaskGreen);
+  const requestedSoldermaskColor = resolveSoldermaskColor(
+    boardData.solder_mask_color
+  );
+  if (!requestedSoldermaskColor) {
+    return {
+      soldermask: legacySoldermask,
+      soldermaskOverCopper: legacySoldermaskOverCopper,
+      copper: toRgb2(colors.copper),
+      transparent: "rgba(0,0,0,0)"
+    };
+  }
+  const copperColor = new THREE36.Color().setRGB(
+    colors.copper[0],
+    colors.copper[1],
+    colors.copper[2],
+    THREE36.SRGBColorSpace
+  );
   return {
-    soldermask,
-    soldermaskOverCopper,
+    soldermask: soldermaskColorToCss(requestedSoldermaskColor),
+    soldermaskOverCopper: soldermaskColorToCss(
+      compositeSoldermaskOverCopper({
+        soldermaskColor: requestedSoldermaskColor,
+        copperColor,
+        soldermaskOpacity: resolveSoldermaskOpacity(
+          boardData.solder_mask_color
+        )
+      })
+    ),
     copper: toRgb2(colors.copper),
     transparent: "rgba(0,0,0,0)"
   };
@@ -38376,10 +38476,9 @@ var drawSoldermaskLayer = ({
   layer,
   bounds,
   elements,
-  boardMaterial,
-  solderMaskColor
+  boardData
 }) => {
-  const palette = getSoldermaskPalette(boardMaterial, solderMaskColor);
+  const palette = getSoldermaskPalette(boardData);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
   const drawer = new CircuitToCanvasDrawer9(ctx);
   drawer.configure({
@@ -38479,20 +38578,19 @@ function createSoldermaskTextureForLayer({
     layer,
     bounds,
     elements,
-    boardMaterial: boardData.material,
-    solderMaskColor: boardData.solder_mask_color
+    boardData
   });
-  const texture = new THREE34.CanvasTexture(canvas);
+  const texture = new THREE37.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE34.LinearMipmapLinearFilter;
-  texture.magFilter = THREE34.LinearFilter;
+  texture.minFilter = THREE37.LinearMipmapLinearFilter;
+  texture.magFilter = THREE37.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-through-hole-texture-for-layer.ts
-import * as THREE35 from "three";
+import * as THREE38 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
 import { CircuitToCanvasDrawer as CircuitToCanvasDrawer10 } from "circuit-to-canvas";
@@ -38587,10 +38685,10 @@ function createThroughHoleTextureForLayer({
     elements,
     copperColor
   });
-  const texture = new THREE35.CanvasTexture(canvas);
+  const texture = new THREE38.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE35.LinearMipmapLinearFilter;
-  texture.magFilter = THREE35.LinearFilter;
+  texture.minFilter = THREE38.LinearMipmapLinearFilter;
+  texture.magFilter = THREE38.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -38678,10 +38776,10 @@ var createCombinedTexture = ({
   applySoldermaskSurfaceFilter(ctx, canvasWidth, canvasHeight, {
     includeReflection: layer === "top"
   });
-  const combinedTexture = new THREE36.CanvasTexture(canvas);
+  const combinedTexture = new THREE39.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE36.LinearFilter;
-  combinedTexture.magFilter = THREE36.LinearFilter;
+  combinedTexture.minFilter = THREE39.LinearFilter;
+  combinedTexture.magFilter = THREE39.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -38706,11 +38804,11 @@ var createMaskedCopperMask = ({
     if (!texture?.image) continue;
     ctx.drawImage(texture.image, 0, 0, width10, height10);
   }
-  const maskTexture = new THREE36.CanvasTexture(canvas);
-  maskTexture.colorSpace = THREE36.NoColorSpace;
+  const maskTexture = new THREE39.CanvasTexture(canvas);
+  maskTexture.colorSpace = THREE39.NoColorSpace;
   maskTexture.generateMipmaps = false;
-  maskTexture.minFilter = THREE36.LinearFilter;
-  maskTexture.magFilter = THREE36.LinearFilter;
+  maskTexture.minFilter = THREE39.LinearFilter;
+  maskTexture.magFilter = THREE39.LinearFilter;
   maskTexture.premultiplyAlpha = false;
   maskTexture.needsUpdate = true;
   return maskTexture;
@@ -38849,7 +38947,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE38 from "three";
+import * as THREE41 from "three";
 
 // src/board-surface-textures.ts
 var REALISTIC_BOARD_SURFACE_MATERIAL = {
@@ -38872,10 +38970,26 @@ var PAD_COPPER_TEXTURE_MATERIAL = {
 };
 
 // src/utils/create-board-relief-textures.ts
-import * as THREE37 from "three";
+import * as THREE40 from "three";
 var PLAIN_SOLDERMASK_HEIGHT = 0.22;
 var MASKED_COPPER_HEIGHT = 0.7;
 var EXPOSED_COPPER_HEIGHT = 0.86;
+var PLAIN_SOLDERMASK_PROFILE = {
+  height: PLAIN_SOLDERMASK_HEIGHT,
+  microSurfaceWeight: 1,
+  roughness: 0.7,
+  metalness: 0.015,
+  isExposedCopper: false,
+  isMaskedCopper: false
+};
+var MASKED_COPPER_PROFILE = {
+  height: MASKED_COPPER_HEIGHT,
+  microSurfaceWeight: 0.9,
+  roughness: 0.54,
+  metalness: 0.025,
+  isExposedCopper: false,
+  isMaskedCopper: true
+};
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 var invertSurfaceHeight = (height10) => 1 - height10;
 var hashNoise = (x, y, salt) => {
@@ -38911,6 +39025,10 @@ var createMaskedTraceDetail = (x, y, salt) => {
   return (etch + routingGrain) * 0.045;
 };
 var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
+  if (hasMaskedCopper) return MASKED_COPPER_PROFILE;
+  if (isYellowSoldermaskColor({ red: r, green: g, blue: b })) {
+    return PLAIN_SOLDERMASK_PROFILE;
+  }
   const isExposedCopper = r > 120 && g > 70 && b < 150 && r > g * 1.05 && g > b * 1.15;
   if (isExposedCopper) {
     return {
@@ -38944,30 +39062,16 @@ var getBoardSurfaceProfile = (r, g, b, hasMaskedCopper) => {
       isMaskedCopper: false
     };
   }
-  return hasMaskedCopper ? {
-    height: MASKED_COPPER_HEIGHT,
-    microSurfaceWeight: 0.9,
-    roughness: 0.54,
-    metalness: 0.025,
-    isExposedCopper: false,
-    isMaskedCopper: true
-  } : {
-    height: PLAIN_SOLDERMASK_HEIGHT,
-    microSurfaceWeight: 1,
-    roughness: 0.7,
-    metalness: 0.015,
-    isExposedCopper: false,
-    isMaskedCopper: false
-  };
+  return PLAIN_SOLDERMASK_PROFILE;
 };
 var createDataTexture = (canvas) => {
-  const texture = new THREE37.CanvasTexture(canvas);
-  texture.colorSpace = THREE37.NoColorSpace;
+  const texture = new THREE40.CanvasTexture(canvas);
+  texture.colorSpace = THREE40.NoColorSpace;
   texture.generateMipmaps = false;
-  texture.minFilter = THREE37.LinearFilter;
-  texture.magFilter = THREE37.LinearFilter;
-  texture.wrapS = THREE37.ClampToEdgeWrapping;
-  texture.wrapT = THREE37.ClampToEdgeWrapping;
+  texture.minFilter = THREE40.LinearFilter;
+  texture.magFilter = THREE40.LinearFilter;
+  texture.wrapS = THREE40.ClampToEdgeWrapping;
+  texture.wrapT = THREE40.ClampToEdgeWrapping;
   texture.needsUpdate = true;
   return texture;
 };
@@ -39074,7 +39178,7 @@ var createBoardReliefTextures = (texture, maskedCopperMask) => {
     for (let x = 0; x < sourceCanvas.width; x++) {
       const dx = (getHeight4(x + 1, y) - getHeight4(x - 1, y)) * 4;
       const dy = (getHeight4(x, y + 1) - getHeight4(x, y - 1)) * 4;
-      const normal = new THREE37.Vector3(-dx, -dy, 1).normalize();
+      const normal = new THREE40.Vector3(-dx, -dy, 1).normalize();
       const i = (y * sourceCanvas.width + x) * 4;
       normalData[i] = (normal.x * 0.5 + 0.5) * 255;
       normalData[i + 1] = (normal.y * 0.5 + 0.5) * 255;
@@ -39104,16 +39208,16 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE38.PlaneGeometry(
+  const planeGeom = new THREE41.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  texture.colorSpace = THREE38.SRGBColorSpace;
+  texture.colorSpace = THREE41.SRGBColorSpace;
   const sharedMaterialOptions = {
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE38.FrontSide,
+    side: THREE41.FrontSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -39122,12 +39226,12 @@ function createTexturePlane(config, boardData) {
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   };
   const reliefTextures = createBoardReliefTextures(texture, maskedCopperMask);
-  const material = new THREE38.MeshPhysicalMaterial({
+  const material = new THREE41.MeshPhysicalMaterial({
     ...sharedMaterialOptions,
     bumpMap: reliefTextures?.bumpMap ?? null,
     bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
     normalMap: reliefTextures?.normalMap ?? null,
-    normalScale: new THREE38.Vector2(
+    normalScale: new THREE41.Vector2(
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
       REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
     ),
@@ -39141,7 +39245,7 @@ function createTexturePlane(config, boardData) {
     clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
     envMapIntensity: 0.18
   });
-  const mesh = new THREE38.Mesh(planeGeom, material);
+  const mesh = new THREE41.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -39189,7 +39293,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE39 from "three";
+import * as THREE42 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -39244,7 +39348,8 @@ function JscadBoardTextures({
         height: panel.height,
         thickness: firstBoardInPanel?.thickness ?? 1.4,
         material: firstBoardInPanel?.material ?? "fr4",
-        num_layers: firstBoardInPanel?.num_layers ?? 2
+        num_layers: firstBoardInPanel?.num_layers ?? 2,
+        solder_mask_color: firstBoardInPanel?.solder_mask_color
       };
     }
     const boardsNotInPanel = boards.filter(
@@ -39285,7 +39390,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE39.Texture) {
+        if (texture && texture instanceof THREE42.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -39304,16 +39409,16 @@ function JscadBoardTextures({
     }) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE39.PlaneGeometry(
+      const planeGeom = new THREE42.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      texture.colorSpace = THREE39.SRGBColorSpace;
+      texture.colorSpace = THREE42.SRGBColorSpace;
       const sharedMaterialOptions = {
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE39.FrontSide,
+        side: THREE42.FrontSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -39324,12 +39429,12 @@ function JscadBoardTextures({
         texture,
         maskedCopperMask
       );
-      const material = new THREE39.MeshPhysicalMaterial({
+      const material = new THREE42.MeshPhysicalMaterial({
         ...sharedMaterialOptions,
         bumpMap: reliefTextures?.bumpMap ?? null,
         bumpScale: REALISTIC_BOARD_SURFACE_MATERIAL.bumpScale,
         normalMap: reliefTextures?.normalMap ?? null,
-        normalScale: new THREE39.Vector2(
+        normalScale: new THREE42.Vector2(
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale,
           REALISTIC_BOARD_SURFACE_MATERIAL.normalScale
         ),
@@ -39341,7 +39446,7 @@ function JscadBoardTextures({
         clearcoatRoughness: REALISTIC_BOARD_SURFACE_MATERIAL.clearcoatRoughness,
         envMapIntensity: 0.18
       });
-      const mesh = new THREE39.Mesh(planeGeom, material);
+      const mesh = new THREE42.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -39391,7 +39496,7 @@ function JscadBoardTextures({
           for (const material of mesh.material) {
             disposeTextureMaterial(material);
           }
-        } else if (mesh.material instanceof THREE39.Material) {
+        } else if (mesh.material instanceof THREE42.Material) {
           disposeTextureMaterial(mesh.material);
         }
       }
@@ -39404,7 +39509,7 @@ function JscadBoardTextures({
 
 // src/three-components/STLModel.tsx
 import { useState as useState15, useEffect as useEffect26, useMemo as useMemo21 } from "react";
-import * as THREE40 from "three";
+import * as THREE43 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -39437,15 +39542,15 @@ function STLModel({
   const mesh = useMemo21(() => {
     if (!geom) return null;
     const isBoardLayer = layerType === "board";
-    const material = new THREE40.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE40.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE43.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE43.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity,
       polygonOffset: isBoardLayer,
       polygonOffsetFactor: isBoardLayer ? 6 : 0,
       polygonOffsetUnits: isBoardLayer ? 6 : 0
     });
-    const createdMesh = new THREE40.Mesh(geom, material);
+    const createdMesh = new THREE43.Mesh(geom, material);
     createdMesh.renderOrder = isBoardLayer ? -1 : 1;
     configureObjectShadows(createdMesh, {
       castShadow: !isBoardLayer && opacity === 1,
@@ -39730,12 +39835,12 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect28, useMemo as useMemo24, useState as useState17 } from "react";
-import * as THREE47 from "three";
+import * as THREE50 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect27, useMemo as useMemo23, useRef as useRef9, useState as useState16 } from "react";
-import * as THREE44 from "three";
+import * as THREE47 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -40084,17 +40189,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE42 from "three";
+import * as THREE45 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE41 from "three";
+import * as THREE44 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE41.BufferGeometry();
+  const geometry = new THREE44.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE41.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE44.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE41.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE44.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];
@@ -40128,7 +40233,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE42.Color(...colors.copper);
+var COPPER_COLOR = new THREE45.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -40759,7 +40864,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE43 from "three";
+import * as THREE46 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -40797,7 +40902,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE43.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE46.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -40873,7 +40978,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         height: panel.height,
         thickness: firstBoardInPanel?.thickness ?? 1.4,
         material: firstBoardInPanel?.material ?? "fr4",
-        num_layers: firstBoardInPanel?.num_layers ?? 2
+        num_layers: firstBoardInPanel?.num_layers ?? 2,
+        solder_mask_color: firstBoardInPanel?.solder_mask_color
       };
     }
     const boardsNotInPanel = boards.filter((b) => !b.pcb_panel_id);
@@ -41017,7 +41123,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE44.Color(
+              color: new THREE47.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -41044,14 +41150,9 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
       if (boardManifold) {
         const boardThreeMesh = boardManifold.getMesh();
         const finalBoardGeom = manifoldMeshToThreeGeometry(boardThreeMesh);
-        const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE44.Color(
-            matColorArray[0],
-            matColorArray[1],
-            matColorArray[2]
-          ),
+          color: getBoardEdgeColor(boardData),
           material: boardData.material,
           isFaux: isFauxBoard
         };
@@ -41092,11 +41193,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE46 from "three";
+import * as THREE49 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE45 from "three";
-var DEFAULT_SIDE = THREE45.DoubleSide;
+import * as THREE48 from "three";
+var DEFAULT_SIDE = THREE48.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -41104,10 +41205,8 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE45.MeshPhysicalMaterial({
-      // A dark edge lets the green solder mask read as a finished PCB rather
-      // than a tan substrate with a decal placed on top.
-      color: 1063462,
+    return new THREE48.MeshPhysicalMaterial({
+      color,
       side,
       metalness: 0,
       roughness: 0.48,
@@ -41124,7 +41223,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE45.MeshStandardMaterial({
+  return new THREE48.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -41143,12 +41242,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board?.geometry) {
-    const mesh = new THREE46.Mesh(
+    const mesh = new THREE49.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE46.DoubleSide,
+        side: THREE49.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -41159,11 +41258,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       for (const comp of geomArray) {
-        const mesh = new THREE46.Mesh(
+        const mesh = new THREE49.Mesh(
           comp.geometry,
-          new THREE46.MeshStandardMaterial({
+          new THREE49.MeshStandardMaterial({
             color: comp.color,
-            side: THREE46.DoubleSide,
+            side: THREE49.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -41208,7 +41307,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE47.Texture) {
+        if (texture && texture instanceof THREE50.Texture) {
           texture.dispose();
         }
       }
@@ -49141,7 +49240,7 @@ var useGlobalDownloadGltf = () => {
 
 // src/CadViewer.tsx
 import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE48.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE51.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
   if (typeof window === "undefined") return void 0;
@@ -49421,11 +49520,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE52 from "three";
+import * as THREE55 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE49 from "three";
+import * as THREE52 from "three";
 import { BufferGeometry as BufferGeometry5, Float32BufferAttribute as Float32BufferAttribute4 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry5();
@@ -49439,12 +49538,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE49.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE49.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE49.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE49.Vector3().crossVectors(
-        new THREE49.Vector3().subVectors(v2, v1),
-        new THREE49.Vector3().subVectors(v3, v1)
+      const v1 = new THREE52.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE52.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE52.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE52.Vector3().crossVectors(
+        new THREE52.Vector3().subVectors(v2, v1),
+        new THREE52.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -49468,10 +49567,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 THREE51 from "three";
+import * as THREE54 from "three";
 
 // src/utils/load-model.ts
-import * as THREE50 from "three";
+import * as THREE53 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";
@@ -49479,12 +49578,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE50.MeshStandardMaterial({
+    const material = new THREE53.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE50.Mesh(geometry, material);
+    return new THREE53.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -49517,9 +49616,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE54.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -49533,13 +49632,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE51.MeshStandardMaterial({
+      const material2 = new THREE54.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE51.DoubleSide
+        side: THREE54.DoubleSide
       });
-      const mesh2 = new THREE51.Mesh(threeGeom, material2);
+      const mesh2 = new THREE54.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -49549,9 +49648,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE54.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -49568,17 +49667,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE51.Color(geomInfo.color);
+      const color = new THREE54.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE51.MeshStandardMaterial({
+      const material2 = new THREE54.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE51.DoubleSide
+        side: THREE54.DoubleSide
       });
-      const mesh2 = new THREE51.Mesh(threeGeom, material2);
+      const mesh2 = new THREE54.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -49588,22 +49687,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE51.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE51.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE54.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE54.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE51.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE51.MeshStandardMaterial({
+  const geometry = new THREE54.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE54.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE51.Mesh(geometry, material);
+  const mesh = new THREE54.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -49624,11 +49723,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE52.Scene();
+  const scene = new THREE55.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE52.Color(backgroundColor), 1);
-  const camera = new THREE52.OrthographicCamera();
+  renderer.setClearColor(new THREE55.Color(backgroundColor), 1);
+  const camera = new THREE55.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -49642,55 +49741,57 @@ 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 THREE52.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE55.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE52.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE55.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE52.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE55.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
-  const boardData = su18(circuitJson).pcb_board.list()[0];
+  const boards = su18(circuitJson).pcb_board.list();
+  const firstPanel = circuitJson.find(
+    (circuitElement) => circuitElement.type === "pcb_panel"
+  );
+  const boardData = firstPanel ? boards.find((board) => board.pcb_panel_id === firstPanel.pcb_panel_id) : boards.find((board) => !board.pcb_panel_id);
   const boardGeom = createSimplifiedBoardGeom(circuitJson);
   if (boardGeom) {
-    const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE52.Color(
-      solderMaskColor[0],
-      solderMaskColor[1],
-      solderMaskColor[2]
-    );
+    const edgeColor = getBoardEdgeColor({
+      material: boardData?.material ?? "fr4",
+      solder_mask_color: boardData?.solder_mask_color
+    });
     for (const geom of boardGeom) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
       const material = createBoardMaterial({
         material: boardData?.material,
-        color: baseColor,
-        side: THREE52.DoubleSide
+        color: edgeColor,
+        side: THREE55.DoubleSide
       });
-      const mesh = new THREE52.Mesh(geometry, material);
+      const mesh = new THREE55.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE52.Color(8947848);
-  const gridHelper = new THREE52.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE55.Color(8947848);
+  const gridHelper = new THREE55.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 THREE52.LineBasicMaterial) {
+    if (mat instanceof THREE55.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE52.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE52.Vector3());
-  const size4 = box.getSize(new THREE52.Vector3());
+  const box = new THREE55.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE55.Vector3());
+  const size4 = box.getSize(new THREE55.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.595",
+  "version": "0.0.596",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"