@tscircuit/3d-viewer 0.0.451 → 0.0.452

package/dist/index.js

@@ -14229,7 +14229,7 @@ var require_browser = __commonJS({
 
 // src/CadViewer.tsx
 import { useState as useState36, useCallback as useCallback22, useRef as useRef26, useEffect as useEffect42, useMemo as useMemo28 } from "react";
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su6 } from "@tscircuit/circuit-json-util";
@@ -28509,7 +28509,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.450",
+  version: "0.0.451",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32356,13 +32356,74 @@ var CadViewerJscad = forwardRef3(
 );
 
 // src/CadViewerManifold.tsx
-import { su as su15 } from "@tscircuit/circuit-json-util";
+import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect23, useMemo as useMemo20, useState as useState16 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState15, useEffect as useEffect22, useMemo as useMemo19, useRef as useRef9 } from "react";
-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";
+
+// src/utils/manifold/create-manifold-board.ts
+var arePointsClockwise3 = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    if (points[i] && points[j]) {
+      area += points[i][0] * points[j][1];
+      area -= points[j][0] * points[i][1];
+    }
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, manifoldInstancesForCleanup) {
+  let boardOp;
+  let outlineCrossSection = null;
+  if (boardData.outline && boardData.outline.length >= 3) {
+    let outlineVec2 = boardData.outline.map((p) => [
+      p.x,
+      p.y
+    ]);
+    if (arePointsClockwise3(outlineVec2)) {
+      outlineVec2 = outlineVec2.reverse();
+    }
+    const crossSection = CrossSection.ofPolygons([outlineVec2]);
+    manifoldInstancesForCleanup.push(crossSection);
+    outlineCrossSection = crossSection;
+    boardOp = Manifold.extrude(
+      crossSection,
+      pcbThickness,
+      void 0,
+      // nDivisions
+      void 0,
+      // twistDegrees
+      void 0,
+      // scaleTop
+      true
+      // center (for Z-axis)
+    );
+    manifoldInstancesForCleanup.push(boardOp);
+  } else {
+    if (boardData.outline && boardData.outline.length > 0) {
+      console.warn(
+        "Board outline has fewer than 3 points, falling back to rectangular board."
+      );
+    }
+    boardOp = Manifold.cube(
+      [boardData.width, boardData.height, pcbThickness],
+      true
+      // center (for all axes)
+    );
+    manifoldInstancesForCleanup.push(boardOp);
+    boardOp = boardOp.translate([boardData.center.x, boardData.center.y, 0]);
+    manifoldInstancesForCleanup.push(boardOp);
+  }
+  return { boardOp, outlineCrossSection };
+}
+
+// src/utils/manifold/process-copper-pours.ts
+import * as THREE19 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
 import * as THREE18 from "three";
@@ -32385,409 +32446,181 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
   return geometry;
 }
 
-// src/utils/trace-texture.ts
-import * as THREE19 from "three";
-import { su as su7 } from "@tscircuit/circuit-json-util";
-function isWireRoutePoint(point2) {
-  return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
-}
-function createTraceTextureForLayer({
-  layer,
-  circuitJson,
-  boardData,
-  traceColor,
-  traceTextureResolution
-}) {
-  const pcbTraces = su7(circuitJson).pcb_trace.list();
-  const allPcbVias = su7(circuitJson).pcb_via.list();
-  const allPcbPlatedHoles = su7(
-    circuitJson
-  ).pcb_plated_hole.list();
-  const tracesOnLayer = pcbTraces.filter(
-    (t) => t.route.some((p) => isWireRoutePoint(p) && p.layer === layer)
+// src/utils/manifold/process-copper-pours.ts
+var arePointsClockwise4 = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    if (points[i] && points[j]) {
+      area += points[i][0] * points[j][1];
+      area -= points[j][0] * points[i][1];
+    }
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+function segmentToPoints2(p1, p2, bulge, arcSegments) {
+  if (!bulge || Math.abs(bulge) < 1e-9) {
+    return [];
+  }
+  const theta = 4 * Math.atan(bulge);
+  const dx = p2[0] - p1[0];
+  const dy = p2[1] - p1[1];
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist < 1e-9) return [];
+  const radius = Math.abs(dist / (2 * Math.sin(theta / 2)));
+  const m = Math.sqrt(Math.max(0, radius * radius - dist / 2 * (dist / 2)));
+  const midPoint = [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
+  const ux = dx / dist;
+  const uy = dy / dist;
+  const nx = -uy;
+  const ny = ux;
+  const centerX = midPoint[0] + nx * m * Math.sign(bulge);
+  const centerY = midPoint[1] + ny * m * Math.sign(bulge);
+  const startAngle = Math.atan2(p1[1] - centerY, p1[0] - centerX);
+  const points = [];
+  const numSteps = Math.max(
+    2,
+    Math.ceil(arcSegments * Math.abs(theta) / (Math.PI * 2) * 4)
   );
-  if (tracesOnLayer.length === 0) return null;
-  const canvas = document.createElement("canvas");
-  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
-  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
-  canvas.width = canvasWidth;
-  canvas.height = canvasHeight;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return null;
-  if (layer === "bottom") {
-    ctx.translate(0, canvasHeight);
-    ctx.scale(1, -1);
+  const angleStep = theta / numSteps;
+  for (let i = 1; i < numSteps; i++) {
+    const angle = startAngle + angleStep * i;
+    points.push([
+      centerX + radius * Math.cos(angle),
+      centerY + radius * Math.sin(angle)
+    ]);
   }
-  tracesOnLayer.forEach((trace) => {
-    let firstPoint = true;
-    ctx.beginPath();
-    ctx.strokeStyle = traceColor;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    let currentLineWidth = 0;
-    for (const point2 of trace.route) {
-      if (!isWireRoutePoint(point2) || point2.layer !== layer) {
-        if (!firstPoint) ctx.stroke();
-        firstPoint = true;
-        continue;
-      }
-      const pcbX = point2.x;
-      const pcbY = point2.y;
-      currentLineWidth = point2.width * traceTextureResolution;
-      ctx.lineWidth = currentLineWidth;
-      const canvasX = (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
-      const canvasY = (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
-      if (firstPoint) {
-        ctx.moveTo(canvasX, canvasY);
-        firstPoint = false;
-      } else {
-        ctx.lineTo(canvasX, canvasY);
-      }
-    }
-    if (!firstPoint) {
-      ctx.stroke();
-    }
-  });
-  ctx.globalCompositeOperation = "destination-out";
-  ctx.fillStyle = "black";
-  allPcbVias.forEach((via) => {
-    const canvasX = (via.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
-    const canvasY = (-(via.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
-    const canvasRadius = via.outer_diameter / 2 * traceTextureResolution;
-    ctx.beginPath();
-    ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
-    ctx.fill();
-  });
-  allPcbPlatedHoles.forEach((ph) => {
-    if (ph.layers.includes(layer) && ph.shape === "circle") {
-      const canvasX = (ph.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
-      const canvasY = (-(ph.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
-      const canvasRadius = ph.outer_diameter / 2 * traceTextureResolution;
-      ctx.beginPath();
-      ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
-      ctx.fill();
-    }
-  });
-  ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE19.CanvasTexture(canvas);
-  texture.generateMipmaps = true;
-  texture.minFilter = THREE19.LinearMipmapLinearFilter;
-  texture.magFilter = THREE19.LinearFilter;
-  texture.anisotropy = 16;
-  texture.needsUpdate = true;
-  return texture;
+  return points;
 }
-
-// src/utils/silkscreen-texture.ts
-var import_text2 = __toESM(require_text(), 1);
-import * as THREE20 from "three";
-import { su as su8 } from "@tscircuit/circuit-json-util";
-function createSilkscreenTextureForLayer({
-  layer,
-  circuitJson,
-  boardData,
-  silkscreenColor = "rgb(255,255,255)",
-  traceTextureResolution
-}) {
-  const pcbSilkscreenTexts = su8(circuitJson).pcb_silkscreen_text.list();
-  const pcbSilkscreenPaths = su8(circuitJson).pcb_silkscreen_path.list();
-  const pcbSilkscreenLines = su8(circuitJson).pcb_silkscreen_line.list();
-  const pcbSilkscreenRects = su8(circuitJson).pcb_silkscreen_rect.list();
-  const pcbSilkscreenCircles = su8(circuitJson).pcb_silkscreen_circle.list();
-  const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer);
-  const pathsOnLayer = pcbSilkscreenPaths.filter((p) => p.layer === layer);
-  const linesOnLayer = pcbSilkscreenLines.filter((l) => l.layer === layer);
-  const rectsOnLayer = pcbSilkscreenRects.filter((r) => r.layer === layer);
-  const circlesOnLayer = pcbSilkscreenCircles.filter((c) => c.layer === layer);
-  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0 && linesOnLayer.length === 0 && rectsOnLayer.length === 0 && circlesOnLayer.length === 0) {
-    return null;
-  }
-  const canvas = document.createElement("canvas");
-  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
-  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
-  canvas.width = canvasWidth;
-  canvas.height = canvasHeight;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return null;
-  if (layer === "bottom") {
-    ctx.translate(0, canvasHeight);
-    ctx.scale(1, -1);
+function ringToPoints2(ring2, arcSegments) {
+  const allPoints = [];
+  const vertices = ring2.vertices;
+  for (let i = 0; i < vertices.length; i++) {
+    const p1 = vertices[i];
+    const p2 = vertices[(i + 1) % vertices.length];
+    allPoints.push([p1.x, p1.y]);
+    if (p1.bulge) {
+      const arcPoints = segmentToPoints2(
+        [p1.x, p1.y],
+        [p2.x, p2.y],
+        p1.bulge,
+        arcSegments
+      );
+      allPoints.push(...arcPoints);
+    }
   }
-  ctx.strokeStyle = silkscreenColor;
-  ctx.fillStyle = silkscreenColor;
-  const canvasXFromPcb = (pcbX) => (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
-  const canvasYFromPcb = (pcbY) => (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
-  linesOnLayer.forEach((lineEl) => {
-    const startXmm = parseDimensionToMm(lineEl.x1) ?? 0;
-    const startYmm = parseDimensionToMm(lineEl.y1) ?? 0;
-    const endXmm = parseDimensionToMm(lineEl.x2) ?? 0;
-    const endYmm = parseDimensionToMm(lineEl.y2) ?? 0;
-    if (startXmm === endXmm && startYmm === endYmm) return;
-    ctx.beginPath();
-    ctx.lineWidth = coerceDimensionToMm(lineEl.stroke_width, 0.1) * traceTextureResolution;
-    ctx.lineCap = "round";
-    ctx.moveTo(canvasXFromPcb(startXmm), canvasYFromPcb(startYmm));
-    ctx.lineTo(canvasXFromPcb(endXmm), canvasYFromPcb(endYmm));
-    ctx.stroke();
-  });
-  pathsOnLayer.forEach((path) => {
-    if (path.route.length < 2) return;
-    ctx.beginPath();
-    ctx.lineWidth = coerceDimensionToMm(path.stroke_width, 0.1) * traceTextureResolution;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    path.route.forEach((point2, index2) => {
-      const canvasX = canvasXFromPcb(parseDimensionToMm(point2.x) ?? 0);
-      const canvasY = canvasYFromPcb(parseDimensionToMm(point2.y) ?? 0);
-      if (index2 === 0) ctx.moveTo(canvasX, canvasY);
-      else ctx.lineTo(canvasX, canvasY);
-    });
-    ctx.stroke();
-  });
-  circlesOnLayer.forEach((circleEl) => {
-    const radius = coerceDimensionToMm(circleEl.radius, 0);
-    if (radius <= 0) return;
-    const strokeWidth = coerceDimensionToMm(circleEl.stroke_width, 0.12);
-    const hasStroke = strokeWidth > 0;
-    const centerXmm = parseDimensionToMm(circleEl.center?.x) ?? 0;
-    const centerYmm = parseDimensionToMm(circleEl.center?.y) ?? 0;
-    const canvasCenterX = canvasXFromPcb(centerXmm);
-    const canvasCenterY = canvasYFromPcb(centerYmm);
-    const radiusPx = radius * traceTextureResolution;
-    ctx.save();
-    ctx.translate(canvasCenterX, canvasCenterY);
-    if (hasStroke) {
-      const outerRadiusPx = radiusPx + strokeWidth / 2 * traceTextureResolution;
-      const innerRadiusPx = Math.max(
-        0,
-        radiusPx - strokeWidth / 2 * traceTextureResolution
-      );
-      if (innerRadiusPx > 0) {
-        ctx.beginPath();
-        ctx.arc(0, 0, outerRadiusPx, 0, 2 * Math.PI);
-        ctx.arc(0, 0, innerRadiusPx, 0, 2 * Math.PI, true);
-        ctx.fill("evenodd");
-      } else {
-        ctx.beginPath();
-        ctx.arc(0, 0, outerRadiusPx, 0, 2 * Math.PI);
-        ctx.fill();
-      }
-    } else {
-      ctx.beginPath();
-      ctx.arc(0, 0, radiusPx, 0, 2 * Math.PI);
-      ctx.fill();
-    }
-    ctx.restore();
-  });
-  rectsOnLayer.forEach((rect) => {
-    const width10 = coerceDimensionToMm(rect.width, 0);
-    const height10 = coerceDimensionToMm(rect.height, 0);
-    if (width10 <= 0 || height10 <= 0) return;
-    const centerXmm = parseDimensionToMm(rect.center?.x) ?? 0;
-    const centerYmm = parseDimensionToMm(rect.center?.y) ?? 0;
-    const canvasCenterX = canvasXFromPcb(centerXmm);
-    const canvasCenterY = canvasYFromPcb(centerYmm);
-    const rawRadius = extractRectBorderRadius(rect);
-    const borderRadiusInput = typeof rawRadius === "string" ? parseDimensionToMm(rawRadius) : rawRadius;
-    const borderRadiusMm = clampRectBorderRadius(
-      width10,
-      height10,
-      borderRadiusInput
-    );
-    ctx.save();
-    ctx.translate(canvasCenterX, canvasCenterY);
-    const halfWidthPx = width10 / 2 * traceTextureResolution;
-    const halfHeightPx = height10 / 2 * traceTextureResolution;
-    const borderRadiusPx = Math.min(
-      borderRadiusMm * traceTextureResolution,
-      halfWidthPx,
-      halfHeightPx
-    );
-    const hasStroke = rect.has_stroke ?? false;
-    const isFilled = rect.is_filled ?? true;
-    const isDashed = rect.is_stroke_dashed ?? false;
-    const strokeWidthPx = hasStroke ? coerceDimensionToMm(rect.stroke_width, 0.1) * traceTextureResolution : 0;
-    const drawRoundedRectPath = (x, y, rectWidth, rectHeight, radius) => {
-      ctx.beginPath();
-      if (radius <= 0) {
-        ctx.rect(x, y, rectWidth, rectHeight);
-      } else {
-        const r = radius;
-        const right = x + rectWidth;
-        const bottom = y + rectHeight;
-        ctx.moveTo(x + r, y);
-        ctx.lineTo(right - r, y);
-        ctx.quadraticCurveTo(right, y, right, y + r);
-        ctx.lineTo(right, bottom - r);
-        ctx.quadraticCurveTo(right, bottom, right - r, bottom);
-        ctx.lineTo(x + r, bottom);
-        ctx.quadraticCurveTo(x, bottom, x, bottom - r);
-        ctx.lineTo(x, y + r);
-        ctx.quadraticCurveTo(x, y, x + r, y);
-        ctx.closePath();
+  return allPoints;
+}
+function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardMaterial, holeUnion, boardClipVolume) {
+  const copperPourGeoms = [];
+  const copperPours = circuitJson.filter(
+    (e) => e.type === "pcb_copper_pour"
+  );
+  for (const pour of copperPours) {
+    const pourThickness = DEFAULT_SMT_PAD_THICKNESS;
+    const layerSign = pour.layer === "bottom" ? -1 : 1;
+    const zPos = layerSign * (pcbThickness / 2 + pourThickness / 2 + MANIFOLD_Z_OFFSET);
+    let pourOp;
+    if (pour.shape === "rect") {
+      pourOp = Manifold.cube([pour.width, pour.height, pourThickness], true);
+      manifoldInstancesForCleanup.push(pourOp);
+      if (pour.rotation) {
+        const rotatedOp = pourOp.rotate([0, 0, pour.rotation]);
+        manifoldInstancesForCleanup.push(rotatedOp);
+        pourOp = rotatedOp;
       }
-    };
-    drawRoundedRectPath(
-      -halfWidthPx,
-      -halfHeightPx,
-      halfWidthPx * 2,
-      halfHeightPx * 2,
-      borderRadiusPx
-    );
-    if (isFilled) {
-      ctx.fill();
-    }
-    if (hasStroke && strokeWidthPx > 0) {
-      ctx.lineWidth = strokeWidthPx;
-      if (isDashed) {
-        const dashLength = Math.max(strokeWidthPx * 2, 1);
-        ctx.setLineDash([dashLength, dashLength]);
+      pourOp = pourOp.translate([pour.center.x, pour.center.y, zPos]);
+      manifoldInstancesForCleanup.push(pourOp);
+    } else if (pour.shape === "polygon") {
+      if (pour.points.length < 3) continue;
+      let pointsVec2 = pour.points.map((p) => [
+        p.x,
+        p.y
+      ]);
+      if (arePointsClockwise4(pointsVec2)) {
+        pointsVec2 = pointsVec2.reverse();
       }
-      ctx.stroke();
-      if (isDashed) {
-        ctx.setLineDash([]);
+      const crossSection = CrossSection.ofPolygons([pointsVec2]);
+      manifoldInstancesForCleanup.push(crossSection);
+      pourOp = Manifold.extrude(
+        crossSection,
+        pourThickness,
+        0,
+        // nDivisions
+        0,
+        // twistDegrees
+        [1, 1],
+        // scaleTop
+        true
+        // center extrusion
+      ).translate([0, 0, zPos]);
+      manifoldInstancesForCleanup.push(pourOp);
+    } else if (pour.shape === "brep") {
+      const brepShape = pour.brep_shape;
+      if (!brepShape || !brepShape.outer_ring) continue;
+      let outerRingPoints = ringToPoints2(
+        brepShape.outer_ring,
+        SMOOTH_CIRCLE_SEGMENTS
+      );
+      if (arePointsClockwise4(outerRingPoints)) {
+        outerRingPoints = outerRingPoints.reverse();
       }
-    }
-    ctx.restore();
-  });
-  textsOnLayer.forEach((textS) => {
-    const fontSize = textS.font_size || 0.25;
-    const textStrokeWidth = Math.min(Math.max(0.01, fontSize * 0.1), fontSize * 0.05) * traceTextureResolution;
-    ctx.lineWidth = textStrokeWidth;
-    ctx.lineCap = "butt";
-    ctx.lineJoin = "miter";
-    const rawTextOutlines = (0, import_text2.vectorText)({
-      height: fontSize * 0.45,
-      input: textS.text
-    });
-    const processedTextOutlines = [];
-    rawTextOutlines.forEach((outline) => {
-      if (outline.length === 29) {
-        processedTextOutlines.push(
-          outline.slice(0, 15)
-        );
-        processedTextOutlines.push(
-          outline.slice(14, 29)
-        );
-      } else if (outline.length === 17) {
-        processedTextOutlines.push(
-          outline.slice(0, 10)
-        );
-        processedTextOutlines.push(
-          outline.slice(9, 17)
-        );
-      } else {
-        processedTextOutlines.push(outline);
+      const polygons = [outerRingPoints];
+      if (brepShape.inner_rings) {
+        const innerRingsPoints = brepShape.inner_rings.map((ring2) => {
+          let points = ringToPoints2(ring2, SMOOTH_CIRCLE_SEGMENTS);
+          if (!arePointsClockwise4(points)) {
+            points = points.reverse();
+          }
+          return points;
+        });
+        polygons.push(...innerRingsPoints);
       }
-    });
-    const points = processedTextOutlines.flat();
-    const textBounds = {
-      minX: points.length > 0 ? Math.min(...points.map((p) => p[0])) : 0,
-      maxX: points.length > 0 ? Math.max(...points.map((p) => p[0])) : 0,
-      minY: points.length > 0 ? Math.min(...points.map((p) => p[1])) : 0,
-      maxY: points.length > 0 ? Math.max(...points.map((p) => p[1])) : 0
-    };
-    const textCenterX = (textBounds.minX + textBounds.maxX) / 2;
-    const textCenterY = (textBounds.minY + textBounds.maxY) / 2;
-    let xOff = -textCenterX;
-    let yOff = -textCenterY;
-    const alignment = textS.anchor_alignment || "center";
-    if (alignment.includes("left")) {
-      xOff = -textBounds.minX;
-    } else if (alignment.includes("right")) {
-      xOff = -textBounds.maxX;
-    }
-    if (alignment.includes("top")) {
-      yOff = -textBounds.maxY;
-    } else if (alignment.includes("bottom")) {
-      yOff = -textBounds.minY;
-    }
-    const transformMatrices = [];
-    let rotationDeg = textS.ccw_rotation ?? 0;
-    if (textS.layer === "bottom") {
-      transformMatrices.push(
-        translate4(textCenterX, textCenterY),
-        { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 },
-        translate4(-textCenterX, -textCenterY)
-      );
-      rotationDeg = -rotationDeg;
-    }
-    if (rotationDeg) {
-      const rad = rotationDeg * Math.PI / 180;
-      transformMatrices.push(
-        translate4(textCenterX, textCenterY),
-        rotate2(rad),
-        translate4(-textCenterX, -textCenterY)
-      );
+      const crossSection = CrossSection.ofPolygons(polygons);
+      manifoldInstancesForCleanup.push(crossSection);
+      pourOp = Manifold.extrude(
+        crossSection,
+        pourThickness,
+        0,
+        // nDivisions
+        0,
+        // twistDegrees
+        [1, 1],
+        // scaleTop
+        true
+        // center extrusion
+      ).translate([0, 0, zPos]);
+      manifoldInstancesForCleanup.push(pourOp);
     }
-    const finalTransformMatrix = transformMatrices.length > 0 ? compose(...transformMatrices) : void 0;
-    processedTextOutlines.forEach((segment) => {
-      ctx.beginPath();
-      segment.forEach((p, index2) => {
-        let transformedP = { x: p[0], y: p[1] };
-        if (finalTransformMatrix) {
-          transformedP = applyToPoint(finalTransformMatrix, transformedP);
-        }
-        const pcbX = transformedP.x + xOff + textS.anchor_position.x;
-        const pcbY = transformedP.y + yOff + textS.anchor_position.y;
-        const canvasX = canvasXFromPcb(pcbX);
-        const canvasY = canvasYFromPcb(pcbY);
-        if (index2 === 0) ctx.moveTo(canvasX, canvasY);
-        else ctx.lineTo(canvasX, canvasY);
-      });
-      ctx.stroke();
-    });
-  });
-  const texture = new THREE20.CanvasTexture(canvas);
-  texture.generateMipmaps = true;
-  texture.minFilter = THREE20.LinearMipmapLinearFilter;
-  texture.magFilter = THREE20.LinearFilter;
-  texture.anisotropy = 16;
-  texture.needsUpdate = true;
-  return texture;
-}
-
-// src/utils/manifold/process-non-plated-holes.ts
-import { su as su9 } from "@tscircuit/circuit-json-util";
-
-// src/utils/hole-geoms.ts
-function createCircleHoleDrill({
-  Manifold,
-  x,
-  y,
-  diameter,
-  thickness,
-  segments = 32
-}) {
-  const drill = Manifold.cylinder(
-    thickness * 1.2,
-    diameter / 2,
-    diameter / 2,
-    segments,
-    true
-  );
-  return drill.translate([x, y, 0]);
-}
-function createPlatedHoleDrill({
-  Manifold,
-  x,
-  y,
-  holeDiameter,
-  thickness,
-  zOffset = 1e-3,
-  segments = 32
-}) {
-  const boardHoleRadius = holeDiameter / 2 + zOffset;
-  const drill = Manifold.cylinder(
-    thickness * 1.2,
-    boardHoleRadius,
-    boardHoleRadius,
-    segments,
-    true
-  );
-  return drill.translate([x, y, 0]);
+    if (pourOp) {
+      if (holeUnion) {
+        const withHoles = pourOp.subtract(holeUnion);
+        manifoldInstancesForCleanup.push(withHoles);
+        pourOp = withHoles;
+      }
+      if (boardClipVolume) {
+        const clipped = Manifold.intersection([pourOp, boardClipVolume]);
+        manifoldInstancesForCleanup.push(clipped);
+        pourOp = clipped;
+      }
+      const covered = pour.covered_with_solder_mask !== false;
+      const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4GreenSolderWithMask : colors.copper;
+      const pourColor = new THREE19.Color(...pourColorArr);
+      const threeGeom = manifoldMeshToThreeGeometry(pourOp.getMesh());
+      copperPourGeoms.push({
+        key: `coppour-${pour.pcb_copper_pour_id}`,
+        geometry: threeGeom,
+        color: pourColor
+      });
+    }
+  }
+  return { copperPourGeoms };
 }
 
+// src/utils/manifold/process-cutouts.ts
+import { su as su7 } from "@tscircuit/circuit-json-util";
+
 // src/utils/pad-geoms.ts
 var RECT_PAD_SEGMENTS2 = 64;
 function createRoundedRectPrism({
@@ -32863,6 +32696,156 @@ function createPadManifoldOp({
   return null;
 }
 
+// src/utils/manifold/process-cutouts.ts
+var arePointsClockwise5 = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    if (points[i] && points[j]) {
+      area += points[i][0] * points[j][1];
+      area -= points[j][0] * points[i][1];
+    }
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const cutoutOps = [];
+  const pcbCutouts = su7(circuitJson).pcb_cutout.list();
+  for (const cutout of pcbCutouts) {
+    let cutoutOp;
+    const cutoutHeight = pcbThickness * 1.5;
+    switch (cutout.shape) {
+      case "rect": {
+        const rectCornerRadius = extractRectBorderRadius(cutout);
+        if (typeof rectCornerRadius === "number" && rectCornerRadius > 0) {
+          cutoutOp = createRoundedRectPrism({
+            Manifold,
+            width: cutout.width,
+            height: cutout.height,
+            thickness: cutoutHeight,
+            borderRadius: rectCornerRadius
+          });
+        } else {
+          cutoutOp = Manifold.cube(
+            [cutout.width, cutout.height, cutoutHeight],
+            true
+            // centered
+          );
+        }
+        manifoldInstancesForCleanup.push(cutoutOp);
+        if (cutout.rotation) {
+          const rotatedOp = cutoutOp.rotate([0, 0, cutout.rotation]);
+          manifoldInstancesForCleanup.push(rotatedOp);
+          cutoutOp = rotatedOp;
+        }
+        cutoutOp = cutoutOp.translate([
+          cutout.center.x,
+          cutout.center.y,
+          0
+          // Centered vertically by Manifold.cube, so Z is 0 for board plane
+        ]);
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      }
+      case "circle":
+        cutoutOp = Manifold.cylinder(
+          cutoutHeight,
+          cutout.radius,
+          -1,
+          // default for radiusHigh
+          SMOOTH_CIRCLE_SEGMENTS,
+          true
+          // centered
+        );
+        manifoldInstancesForCleanup.push(cutoutOp);
+        cutoutOp = cutoutOp.translate([cutout.center.x, cutout.center.y, 0]);
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      case "polygon":
+        if (cutout.points.length < 3) {
+          console.warn(
+            `PCB Cutout [${cutout.pcb_cutout_id}] polygon has fewer than 3 points, skipping.`
+          );
+          continue;
+        }
+        let pointsVec2 = cutout.points.map((p) => [
+          p.x,
+          p.y
+        ]);
+        if (arePointsClockwise5(pointsVec2)) {
+          pointsVec2 = pointsVec2.reverse();
+        }
+        const crossSection = CrossSection.ofPolygons([pointsVec2]);
+        manifoldInstancesForCleanup.push(crossSection);
+        cutoutOp = Manifold.extrude(
+          crossSection,
+          cutoutHeight,
+          0,
+          // nDivisions
+          0,
+          // twistDegrees
+          [1, 1],
+          // scaleTop
+          true
+          // center extrusion
+        );
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      default:
+        console.warn(
+          `Unsupported cutout shape: ${cutout.shape} for cutout ${cutout.pcb_cutout_id}`
+        );
+        continue;
+    }
+    if (cutoutOp) {
+      cutoutOps.push(cutoutOp);
+    }
+  }
+  return { cutoutOps };
+}
+
+// src/utils/manifold/process-non-plated-holes.ts
+import { su as su8 } from "@tscircuit/circuit-json-util";
+
+// src/utils/hole-geoms.ts
+function createCircleHoleDrill({
+  Manifold,
+  x,
+  y,
+  diameter,
+  thickness,
+  segments = 32
+}) {
+  const drill = Manifold.cylinder(
+    thickness * 1.2,
+    diameter / 2,
+    diameter / 2,
+    segments,
+    true
+  );
+  return drill.translate([x, y, 0]);
+}
+function createPlatedHoleDrill({
+  Manifold,
+  x,
+  y,
+  holeDiameter,
+  thickness,
+  zOffset = 1e-3,
+  segments = 32
+}) {
+  const boardHoleRadius = holeDiameter / 2 + zOffset;
+  const drill = Manifold.cylinder(
+    thickness * 1.2,
+    boardHoleRadius,
+    boardHoleRadius,
+    segments,
+    true
+  );
+  return drill.translate([x, y, 0]);
+}
+
 // src/utils/manifold/process-non-plated-holes.ts
 function isCircleHole(hole) {
   return (hole.shape === "circle" || hole.hole_shape === "circle") && typeof hole.hole_diameter === "number";
@@ -32875,7 +32858,7 @@ function isRotatedPillHole(hole) {
 }
 function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const nonPlatedHoleBoardDrills = [];
-  const pcbHoles = su9(circuitJson).pcb_hole.list();
+  const pcbHoles = su8(circuitJson).pcb_hole.list();
   const createPillOp = (width10, height10, depth) => {
     const pillOp = createRoundedRectPrism({
       Manifold,
@@ -32924,9 +32907,9 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 }
 
 // src/utils/manifold/process-plated-holes.ts
-import { su as su10 } from "@tscircuit/circuit-json-util";
-import * as THREE21 from "three";
-var arePointsClockwise3 = (points) => {
+import { su as su9 } from "@tscircuit/circuit-json-util";
+import * as THREE20 from "three";
+var arePointsClockwise6 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
     const j = (i + 1) % points.length;
@@ -32946,11 +32929,11 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE21.Color(...colors.copper);
+var COPPER_COLOR = new THREE20.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
-  const pcbPlatedHoles = su10(circuitJson).pcb_plated_hole.list();
+  const pcbPlatedHoles = su9(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
   const platedHoleCopperOpsForSubtract = [];
   const createPillOp = (width10, height10, depth) => {
@@ -32973,7 +32956,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
       point2.x,
       point2.y
     ]);
-    if (arePointsClockwise3(points)) {
+    if (arePointsClockwise6(points)) {
       points = points.reverse();
     }
     const crossSection = CrossSection.ofPolygons([points]);
@@ -33018,7 +33001,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
       const height10 = Math.max(baseHeight + sizeDelta, M);
       if (holeShape === "oval") {
         let points = createEllipsePoints(width10, height10, SMOOTH_CIRCLE_SEGMENTS);
-        if (arePointsClockwise3(points)) {
+        if (arePointsClockwise6(points)) {
           points = points.reverse();
         }
         const crossSection = CrossSection.ofPolygons([points]);
@@ -33333,7 +33316,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
         drillH,
         SMOOTH_CIRCLE_SEGMENTS
       );
-      if (arePointsClockwise3(boardDrillPoints)) {
+      if (arePointsClockwise6(boardDrillPoints)) {
         boardDrillPoints = boardDrillPoints.reverse();
       }
       const boardDrillCrossSection = CrossSection.ofPolygons([boardDrillPoints]);
@@ -33361,7 +33344,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
         outerH,
         SMOOTH_CIRCLE_SEGMENTS
       );
-      if (arePointsClockwise3(outerPoints)) {
+      if (arePointsClockwise6(outerPoints)) {
         outerPoints = outerPoints.reverse();
       }
       const outerCrossSection = CrossSection.ofPolygons([outerPoints]);
@@ -33380,7 +33363,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
         holeH,
         SMOOTH_CIRCLE_SEGMENTS
       );
-      if (arePointsClockwise3(innerPoints)) {
+      if (arePointsClockwise6(innerPoints)) {
         innerPoints = innerPoints.reverse();
       }
       const innerCrossSection = CrossSection.ofPolygons([innerPoints]);
@@ -33518,6 +33501,46 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
   return { platedHoleBoardDrills, platedHoleCopperGeoms, platedHoleSubtractOp };
 }
 
+// src/utils/manifold/process-smt-pads.ts
+import { su as su10 } from "@tscircuit/circuit-json-util";
+import * as THREE21 from "three";
+var COPPER_COLOR2 = new THREE21.Color(...colors.copper);
+function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
+  const smtPadGeoms = [];
+  const smtPads = su10(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;
+    let padManifoldOp = createPadManifoldOp({
+      Manifold,
+      pad: pad2,
+      padBaseThickness
+    });
+    if (padManifoldOp) {
+      manifoldInstancesForCleanup.push(padManifoldOp);
+      const translatedPad = padManifoldOp.translate([pad2.x, pad2.y, zPos]);
+      manifoldInstancesForCleanup.push(translatedPad);
+      let finalPadOp = translatedPad;
+      if (holeUnion) {
+        finalPadOp = translatedPad.subtract(holeUnion);
+        manifoldInstancesForCleanup.push(finalPadOp);
+      }
+      if (boardClipVolume) {
+        const clipped = Manifold.intersection([finalPadOp, boardClipVolume]);
+        manifoldInstancesForCleanup.push(clipped);
+        finalPadOp = clipped;
+      }
+      const threeGeom = manifoldMeshToThreeGeometry(finalPadOp.getMesh());
+      smtPadGeoms.push({
+        key: `smt_pad-${pad2.layer || "top"}-${pad2.pcb_smtpad_id || index2}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR2
+      });
+    }
+  });
+  return { smtPadGeoms };
+}
+
 // src/utils/manifold/process-vias.ts
 import { su as su11 } from "@tscircuit/circuit-json-util";
 import * as THREE22 from "three";
@@ -33573,7 +33596,7 @@ function createViaCopper({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE22.Color(...colors.copper);
+var COPPER_COLOR3 = new THREE22.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su11(circuitJson).pcb_via.list();
@@ -33613,396 +33636,523 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
         manifoldInstancesForCleanup.push(clipped);
         finalCopperOp = clipped;
       }
-      const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
-      viaCopperGeoms.push({
-        key: `via-${via.pcb_via_id || index2}`,
-        geometry: threeGeom,
-        color: COPPER_COLOR2
-      });
-    }
-  });
-  return { viaBoardDrills, viaCopperGeoms };
-}
-
-// src/utils/manifold/process-smt-pads.ts
-import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE23 from "three";
-var COPPER_COLOR3 = new THREE23.Color(...colors.copper);
-function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
-  const smtPadGeoms = [];
-  const smtPads = su12(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;
-    let padManifoldOp = createPadManifoldOp({
-      Manifold,
-      pad: pad2,
-      padBaseThickness
-    });
-    if (padManifoldOp) {
-      manifoldInstancesForCleanup.push(padManifoldOp);
-      const translatedPad = padManifoldOp.translate([pad2.x, pad2.y, zPos]);
-      manifoldInstancesForCleanup.push(translatedPad);
-      let finalPadOp = translatedPad;
-      if (holeUnion) {
-        finalPadOp = translatedPad.subtract(holeUnion);
-        manifoldInstancesForCleanup.push(finalPadOp);
-      }
-      if (boardClipVolume) {
-        const clipped = Manifold.intersection([finalPadOp, boardClipVolume]);
-        manifoldInstancesForCleanup.push(clipped);
-        finalPadOp = clipped;
-      }
-      const threeGeom = manifoldMeshToThreeGeometry(finalPadOp.getMesh());
-      smtPadGeoms.push({
-        key: `smt_pad-${pad2.layer || "top"}-${pad2.pcb_smtpad_id || index2}`,
+      const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
+      viaCopperGeoms.push({
+        key: `via-${via.pcb_via_id || index2}`,
         geometry: threeGeom,
         color: COPPER_COLOR3
       });
     }
   });
-  return { smtPadGeoms };
+  return { viaBoardDrills, viaCopperGeoms };
 }
 
-// src/utils/manifold/create-manifold-board.ts
-var arePointsClockwise4 = (points) => {
-  let area = 0;
-  for (let i = 0; i < points.length; i++) {
-    const j = (i + 1) % points.length;
-    if (points[i] && points[j]) {
-      area += points[i][0] * points[j][1];
-      area -= points[j][0] * points[i][1];
-    }
+// src/utils/silkscreen-texture.ts
+var import_text2 = __toESM(require_text(), 1);
+import * as THREE23 from "three";
+import { su as su12 } from "@tscircuit/circuit-json-util";
+function createSilkscreenTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  silkscreenColor = "rgb(255,255,255)",
+  traceTextureResolution
+}) {
+  const pcbSilkscreenTexts = su12(circuitJson).pcb_silkscreen_text.list();
+  const pcbSilkscreenPaths = su12(circuitJson).pcb_silkscreen_path.list();
+  const pcbSilkscreenLines = su12(circuitJson).pcb_silkscreen_line.list();
+  const pcbSilkscreenRects = su12(circuitJson).pcb_silkscreen_rect.list();
+  const pcbSilkscreenCircles = su12(circuitJson).pcb_silkscreen_circle.list();
+  const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer);
+  const pathsOnLayer = pcbSilkscreenPaths.filter((p) => p.layer === layer);
+  const linesOnLayer = pcbSilkscreenLines.filter((l) => l.layer === layer);
+  const rectsOnLayer = pcbSilkscreenRects.filter((r) => r.layer === layer);
+  const circlesOnLayer = pcbSilkscreenCircles.filter((c) => c.layer === layer);
+  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0 && linesOnLayer.length === 0 && rectsOnLayer.length === 0 && circlesOnLayer.length === 0) {
+    return null;
   }
-  const signedArea = area / 2;
-  return signedArea <= 0;
-};
-function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, manifoldInstancesForCleanup) {
-  let boardOp;
-  let outlineCrossSection = null;
-  if (boardData.outline && boardData.outline.length >= 3) {
-    let outlineVec2 = boardData.outline.map((p) => [
-      p.x,
-      p.y
-    ]);
-    if (arePointsClockwise4(outlineVec2)) {
-      outlineVec2 = outlineVec2.reverse();
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
+  }
+  ctx.strokeStyle = silkscreenColor;
+  ctx.fillStyle = silkscreenColor;
+  const canvasXFromPcb = (pcbX) => (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+  const canvasYFromPcb = (pcbY) => (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+  linesOnLayer.forEach((lineEl) => {
+    const startXmm = parseDimensionToMm(lineEl.x1) ?? 0;
+    const startYmm = parseDimensionToMm(lineEl.y1) ?? 0;
+    const endXmm = parseDimensionToMm(lineEl.x2) ?? 0;
+    const endYmm = parseDimensionToMm(lineEl.y2) ?? 0;
+    if (startXmm === endXmm && startYmm === endYmm) return;
+    ctx.beginPath();
+    ctx.lineWidth = coerceDimensionToMm(lineEl.stroke_width, 0.1) * traceTextureResolution;
+    ctx.lineCap = "round";
+    ctx.moveTo(canvasXFromPcb(startXmm), canvasYFromPcb(startYmm));
+    ctx.lineTo(canvasXFromPcb(endXmm), canvasYFromPcb(endYmm));
+    ctx.stroke();
+  });
+  pathsOnLayer.forEach((path) => {
+    if (path.route.length < 2) return;
+    ctx.beginPath();
+    ctx.lineWidth = coerceDimensionToMm(path.stroke_width, 0.1) * traceTextureResolution;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    path.route.forEach((point2, index2) => {
+      const canvasX = canvasXFromPcb(parseDimensionToMm(point2.x) ?? 0);
+      const canvasY = canvasYFromPcb(parseDimensionToMm(point2.y) ?? 0);
+      if (index2 === 0) ctx.moveTo(canvasX, canvasY);
+      else ctx.lineTo(canvasX, canvasY);
+    });
+    ctx.stroke();
+  });
+  circlesOnLayer.forEach((circleEl) => {
+    const radius = coerceDimensionToMm(circleEl.radius, 0);
+    if (radius <= 0) return;
+    const strokeWidth = coerceDimensionToMm(circleEl.stroke_width, 0.12);
+    const hasStroke = strokeWidth > 0;
+    const centerXmm = parseDimensionToMm(circleEl.center?.x) ?? 0;
+    const centerYmm = parseDimensionToMm(circleEl.center?.y) ?? 0;
+    const canvasCenterX = canvasXFromPcb(centerXmm);
+    const canvasCenterY = canvasYFromPcb(centerYmm);
+    const radiusPx = radius * traceTextureResolution;
+    ctx.save();
+    ctx.translate(canvasCenterX, canvasCenterY);
+    if (hasStroke) {
+      const outerRadiusPx = radiusPx + strokeWidth / 2 * traceTextureResolution;
+      const innerRadiusPx = Math.max(
+        0,
+        radiusPx - strokeWidth / 2 * traceTextureResolution
+      );
+      if (innerRadiusPx > 0) {
+        ctx.beginPath();
+        ctx.arc(0, 0, outerRadiusPx, 0, 2 * Math.PI);
+        ctx.arc(0, 0, innerRadiusPx, 0, 2 * Math.PI, true);
+        ctx.fill("evenodd");
+      } else {
+        ctx.beginPath();
+        ctx.arc(0, 0, outerRadiusPx, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    } else {
+      ctx.beginPath();
+      ctx.arc(0, 0, radiusPx, 0, 2 * Math.PI);
+      ctx.fill();
     }
-    const crossSection = CrossSection.ofPolygons([outlineVec2]);
-    manifoldInstancesForCleanup.push(crossSection);
-    outlineCrossSection = crossSection;
-    boardOp = Manifold.extrude(
-      crossSection,
-      pcbThickness,
-      void 0,
-      // nDivisions
-      void 0,
-      // twistDegrees
-      void 0,
-      // scaleTop
-      true
-      // center (for Z-axis)
+    ctx.restore();
+  });
+  rectsOnLayer.forEach((rect) => {
+    const width10 = coerceDimensionToMm(rect.width, 0);
+    const height10 = coerceDimensionToMm(rect.height, 0);
+    if (width10 <= 0 || height10 <= 0) return;
+    const centerXmm = parseDimensionToMm(rect.center?.x) ?? 0;
+    const centerYmm = parseDimensionToMm(rect.center?.y) ?? 0;
+    const canvasCenterX = canvasXFromPcb(centerXmm);
+    const canvasCenterY = canvasYFromPcb(centerYmm);
+    const rawRadius = extractRectBorderRadius(rect);
+    const borderRadiusInput = typeof rawRadius === "string" ? parseDimensionToMm(rawRadius) : rawRadius;
+    const borderRadiusMm = clampRectBorderRadius(
+      width10,
+      height10,
+      borderRadiusInput
     );
-    manifoldInstancesForCleanup.push(boardOp);
-  } else {
-    if (boardData.outline && boardData.outline.length > 0) {
-      console.warn(
-        "Board outline has fewer than 3 points, falling back to rectangular board."
+    ctx.save();
+    ctx.translate(canvasCenterX, canvasCenterY);
+    const halfWidthPx = width10 / 2 * traceTextureResolution;
+    const halfHeightPx = height10 / 2 * traceTextureResolution;
+    const borderRadiusPx = Math.min(
+      borderRadiusMm * traceTextureResolution,
+      halfWidthPx,
+      halfHeightPx
+    );
+    const hasStroke = rect.has_stroke ?? false;
+    const isFilled = rect.is_filled ?? true;
+    const isDashed = rect.is_stroke_dashed ?? false;
+    const strokeWidthPx = hasStroke ? coerceDimensionToMm(rect.stroke_width, 0.1) * traceTextureResolution : 0;
+    const drawRoundedRectPath = (x, y, rectWidth, rectHeight, radius) => {
+      ctx.beginPath();
+      if (radius <= 0) {
+        ctx.rect(x, y, rectWidth, rectHeight);
+      } else {
+        const r = radius;
+        const right = x + rectWidth;
+        const bottom = y + rectHeight;
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(right - r, y);
+        ctx.quadraticCurveTo(right, y, right, y + r);
+        ctx.lineTo(right, bottom - r);
+        ctx.quadraticCurveTo(right, bottom, right - r, bottom);
+        ctx.lineTo(x + r, bottom);
+        ctx.quadraticCurveTo(x, bottom, x, bottom - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+        ctx.closePath();
+      }
+    };
+    drawRoundedRectPath(
+      -halfWidthPx,
+      -halfHeightPx,
+      halfWidthPx * 2,
+      halfHeightPx * 2,
+      borderRadiusPx
+    );
+    if (isFilled) {
+      ctx.fill();
+    }
+    if (hasStroke && strokeWidthPx > 0) {
+      ctx.lineWidth = strokeWidthPx;
+      if (isDashed) {
+        const dashLength = Math.max(strokeWidthPx * 2, 1);
+        ctx.setLineDash([dashLength, dashLength]);
+      }
+      ctx.stroke();
+      if (isDashed) {
+        ctx.setLineDash([]);
+      }
+    }
+    ctx.restore();
+  });
+  textsOnLayer.forEach((textS) => {
+    const fontSize = textS.font_size || 0.25;
+    const textStrokeWidth = Math.min(Math.max(0.01, fontSize * 0.1), fontSize * 0.05) * traceTextureResolution;
+    ctx.lineWidth = textStrokeWidth;
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "miter";
+    const rawTextOutlines = (0, import_text2.vectorText)({
+      height: fontSize * 0.45,
+      input: textS.text
+    });
+    const processedTextOutlines = [];
+    rawTextOutlines.forEach((outline) => {
+      if (outline.length === 29) {
+        processedTextOutlines.push(
+          outline.slice(0, 15)
+        );
+        processedTextOutlines.push(
+          outline.slice(14, 29)
+        );
+      } else if (outline.length === 17) {
+        processedTextOutlines.push(
+          outline.slice(0, 10)
+        );
+        processedTextOutlines.push(
+          outline.slice(9, 17)
+        );
+      } else {
+        processedTextOutlines.push(outline);
+      }
+    });
+    const points = processedTextOutlines.flat();
+    const textBounds = {
+      minX: points.length > 0 ? Math.min(...points.map((p) => p[0])) : 0,
+      maxX: points.length > 0 ? Math.max(...points.map((p) => p[0])) : 0,
+      minY: points.length > 0 ? Math.min(...points.map((p) => p[1])) : 0,
+      maxY: points.length > 0 ? Math.max(...points.map((p) => p[1])) : 0
+    };
+    const textCenterX = (textBounds.minX + textBounds.maxX) / 2;
+    const textCenterY = (textBounds.minY + textBounds.maxY) / 2;
+    let xOff = -textCenterX;
+    let yOff = -textCenterY;
+    const alignment = textS.anchor_alignment || "center";
+    if (alignment.includes("left")) {
+      xOff = -textBounds.minX;
+    } else if (alignment.includes("right")) {
+      xOff = -textBounds.maxX;
+    }
+    if (alignment.includes("top")) {
+      yOff = -textBounds.maxY;
+    } else if (alignment.includes("bottom")) {
+      yOff = -textBounds.minY;
+    }
+    const transformMatrices = [];
+    let rotationDeg = textS.ccw_rotation ?? 0;
+    if (textS.layer === "bottom") {
+      transformMatrices.push(
+        translate4(textCenterX, textCenterY),
+        { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+        translate4(-textCenterX, -textCenterY)
       );
+      rotationDeg = -rotationDeg;
     }
-    boardOp = Manifold.cube(
-      [boardData.width, boardData.height, pcbThickness],
-      true
-      // center (for all axes)
-    );
-    manifoldInstancesForCleanup.push(boardOp);
-    boardOp = boardOp.translate([boardData.center.x, boardData.center.y, 0]);
-    manifoldInstancesForCleanup.push(boardOp);
-  }
-  return { boardOp, outlineCrossSection };
+    if (rotationDeg) {
+      const rad = rotationDeg * Math.PI / 180;
+      transformMatrices.push(
+        translate4(textCenterX, textCenterY),
+        rotate2(rad),
+        translate4(-textCenterX, -textCenterY)
+      );
+    }
+    const finalTransformMatrix = transformMatrices.length > 0 ? compose(...transformMatrices) : void 0;
+    processedTextOutlines.forEach((segment) => {
+      ctx.beginPath();
+      segment.forEach((p, index2) => {
+        let transformedP = { x: p[0], y: p[1] };
+        if (finalTransformMatrix) {
+          transformedP = applyToPoint(finalTransformMatrix, transformedP);
+        }
+        const pcbX = transformedP.x + xOff + textS.anchor_position.x;
+        const pcbY = transformedP.y + yOff + textS.anchor_position.y;
+        const canvasX = canvasXFromPcb(pcbX);
+        const canvasY = canvasYFromPcb(pcbY);
+        if (index2 === 0) ctx.moveTo(canvasX, canvasY);
+        else ctx.lineTo(canvasX, canvasY);
+      });
+      ctx.stroke();
+    });
+  });
+  const texture = new THREE23.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE23.LinearMipmapLinearFilter;
+  texture.magFilter = THREE23.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
 }
 
-// src/utils/manifold/process-copper-pours.ts
+// src/utils/soldermask-texture.ts
 import * as THREE24 from "three";
-var arePointsClockwise5 = (points) => {
-  let area = 0;
-  for (let i = 0; i < points.length; i++) {
-    const j = (i + 1) % points.length;
-    if (points[i] && points[j]) {
-      area += points[i][0] * points[j][1];
-      area -= points[j][0] * points[i][1];
-    }
-  }
-  const signedArea = area / 2;
-  return signedArea <= 0;
-};
-function segmentToPoints2(p1, p2, bulge, arcSegments) {
-  if (!bulge || Math.abs(bulge) < 1e-9) {
-    return [];
-  }
-  const theta = 4 * Math.atan(bulge);
-  const dx = p2[0] - p1[0];
-  const dy = p2[1] - p1[1];
-  const dist = Math.sqrt(dx * dx + dy * dy);
-  if (dist < 1e-9) return [];
-  const radius = Math.abs(dist / (2 * Math.sin(theta / 2)));
-  const m = Math.sqrt(Math.max(0, radius * radius - dist / 2 * (dist / 2)));
-  const midPoint = [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
-  const ux = dx / dist;
-  const uy = dy / dist;
-  const nx = -uy;
-  const ny = ux;
-  const centerX = midPoint[0] + nx * m * Math.sign(bulge);
-  const centerY = midPoint[1] + ny * m * Math.sign(bulge);
-  const startAngle = Math.atan2(p1[1] - centerY, p1[0] - centerX);
-  const points = [];
-  const numSteps = Math.max(
-    2,
-    Math.ceil(arcSegments * Math.abs(theta) / (Math.PI * 2) * 4)
-  );
-  const angleStep = theta / numSteps;
-  for (let i = 1; i < numSteps; i++) {
-    const angle = startAngle + angleStep * i;
-    points.push([
-      centerX + radius * Math.cos(angle),
-      centerY + radius * Math.sin(angle)
-    ]);
+import { su as su13 } from "@tscircuit/circuit-json-util";
+function createSoldermaskTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  soldermaskColor,
+  traceTextureResolution
+}) {
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
   }
-  return points;
-}
-function ringToPoints2(ring2, arcSegments) {
-  const allPoints = [];
-  const vertices = ring2.vertices;
-  for (let i = 0; i < vertices.length; i++) {
-    const p1 = vertices[i];
-    const p2 = vertices[(i + 1) % vertices.length];
-    allPoints.push([p1.x, p1.y]);
-    if (p1.bulge) {
-      const arcPoints = segmentToPoints2(
-        [p1.x, p1.y],
-        [p2.x, p2.y],
-        p1.bulge,
-        arcSegments
+  ctx.fillStyle = soldermaskColor;
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  const canvasXFromPcb = (pcbX) => (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+  const canvasYFromPcb = (pcbY) => (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "black";
+  const pcbSmtPads = su13(circuitJson).pcb_smtpad.list();
+  const smtPadsOnLayer = pcbSmtPads.filter((pad2) => pad2.layer === layer);
+  smtPadsOnLayer.forEach((pad2) => {
+    if (pad2.shape === "polygon" && pad2.points) {
+      ctx.beginPath();
+      pad2.points.forEach((point2, index2) => {
+        const px = canvasXFromPcb(point2.x);
+        const py = canvasYFromPcb(point2.y);
+        if (index2 === 0) {
+          ctx.moveTo(px, py);
+        } else {
+          ctx.lineTo(px, py);
+        }
+      });
+      ctx.closePath();
+      ctx.fill();
+      return;
+    }
+    if (pad2.x === void 0 || pad2.y === void 0) return;
+    const x = pad2.x;
+    const y = pad2.y;
+    const canvasX = canvasXFromPcb(x);
+    const canvasY = canvasYFromPcb(y);
+    if (pad2.shape === "rect") {
+      const width10 = pad2.width * traceTextureResolution;
+      const height10 = pad2.height * traceTextureResolution;
+      ctx.fillRect(canvasX - width10 / 2, canvasY - height10 / 2, width10, height10);
+    } else if (pad2.shape === "circle") {
+      const radius = (pad2.radius ?? pad2.width / 2) * traceTextureResolution;
+      ctx.beginPath();
+      ctx.arc(canvasX, canvasY, radius, 0, 2 * Math.PI);
+      ctx.fill();
+    } else if (pad2.shape === "pill" || pad2.shape === "rotated_rect") {
+      const width10 = pad2.width * traceTextureResolution;
+      const height10 = pad2.height * traceTextureResolution;
+      const radius = Math.min(width10, height10) / 2;
+      ctx.beginPath();
+      ctx.roundRect(
+        canvasX - width10 / 2,
+        canvasY - height10 / 2,
+        width10,
+        height10,
+        radius
       );
-      allPoints.push(...arcPoints);
+      ctx.fill();
     }
-  }
-  return allPoints;
-}
-function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardMaterial, holeUnion, boardClipVolume) {
-  const copperPourGeoms = [];
-  const copperPours = circuitJson.filter(
-    (e) => e.type === "pcb_copper_pour"
-  );
-  for (const pour of copperPours) {
-    const pourThickness = DEFAULT_SMT_PAD_THICKNESS;
-    const layerSign = pour.layer === "bottom" ? -1 : 1;
-    const zPos = layerSign * (pcbThickness / 2 + pourThickness / 2 + MANIFOLD_Z_OFFSET);
-    let pourOp;
-    if (pour.shape === "rect") {
-      pourOp = Manifold.cube([pour.width, pour.height, pourThickness], true);
-      manifoldInstancesForCleanup.push(pourOp);
-      if (pour.rotation) {
-        const rotatedOp = pourOp.rotate([0, 0, pour.rotation]);
-        manifoldInstancesForCleanup.push(rotatedOp);
-        pourOp = rotatedOp;
-      }
-      pourOp = pourOp.translate([pour.center.x, pour.center.y, zPos]);
-      manifoldInstancesForCleanup.push(pourOp);
-    } else if (pour.shape === "polygon") {
-      if (pour.points.length < 3) continue;
-      let pointsVec2 = pour.points.map((p) => [
-        p.x,
-        p.y
-      ]);
-      if (arePointsClockwise5(pointsVec2)) {
-        pointsVec2 = pointsVec2.reverse();
-      }
-      const crossSection = CrossSection.ofPolygons([pointsVec2]);
-      manifoldInstancesForCleanup.push(crossSection);
-      pourOp = Manifold.extrude(
-        crossSection,
-        pourThickness,
-        0,
-        // nDivisions
-        0,
-        // twistDegrees
-        [1, 1],
-        // scaleTop
-        true
-        // center extrusion
-      ).translate([0, 0, zPos]);
-      manifoldInstancesForCleanup.push(pourOp);
-    } else if (pour.shape === "brep") {
-      const brepShape = pour.brep_shape;
-      if (!brepShape || !brepShape.outer_ring) continue;
-      let outerRingPoints = ringToPoints2(
-        brepShape.outer_ring,
-        SMOOTH_CIRCLE_SEGMENTS
+  });
+  const pcbVias = su13(circuitJson).pcb_via.list();
+  pcbVias.forEach((via) => {
+    const canvasX = canvasXFromPcb(via.x);
+    const canvasY = canvasYFromPcb(via.y);
+    const canvasRadius = via.outer_diameter / 2 * traceTextureResolution;
+    ctx.beginPath();
+    ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI);
+    ctx.fill();
+  });
+  const pcbPlatedHoles = su13(circuitJson).pcb_plated_hole.list();
+  pcbPlatedHoles.forEach((hole) => {
+    if (!hole.layers?.includes(layer)) return;
+    const x = hole.x;
+    const y = hole.y;
+    const canvasX = canvasXFromPcb(x);
+    const canvasY = canvasYFromPcb(y);
+    if (hole.shape === "circle") {
+      const outerDiameter = hole.outer_diameter;
+      const canvasRadius = outerDiameter / 2 * traceTextureResolution;
+      ctx.beginPath();
+      ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI);
+      ctx.fill();
+    } else if (hole.shape === "pill" || hole.shape === "oval") {
+      const width10 = (hole.outer_width ?? hole.outer_diameter ?? hole.hole_width) * traceTextureResolution;
+      const height10 = (hole.outer_height ?? hole.outer_diameter ?? hole.hole_height) * traceTextureResolution;
+      const radius = Math.min(width10, height10) / 2;
+      ctx.beginPath();
+      ctx.roundRect(
+        canvasX - width10 / 2,
+        canvasY - height10 / 2,
+        width10,
+        height10,
+        radius
       );
-      if (arePointsClockwise5(outerRingPoints)) {
-        outerRingPoints = outerRingPoints.reverse();
-      }
-      const polygons = [outerRingPoints];
-      if (brepShape.inner_rings) {
-        const innerRingsPoints = brepShape.inner_rings.map((ring2) => {
-          let points = ringToPoints2(ring2, SMOOTH_CIRCLE_SEGMENTS);
-          if (!arePointsClockwise5(points)) {
-            points = points.reverse();
-          }
-          return points;
-        });
-        polygons.push(...innerRingsPoints);
-      }
-      const crossSection = CrossSection.ofPolygons(polygons);
-      manifoldInstancesForCleanup.push(crossSection);
-      pourOp = Manifold.extrude(
-        crossSection,
-        pourThickness,
-        0,
-        // nDivisions
-        0,
-        // twistDegrees
-        [1, 1],
-        // scaleTop
-        true
-        // center extrusion
-      ).translate([0, 0, zPos]);
-      manifoldInstancesForCleanup.push(pourOp);
+      ctx.fill();
     }
-    if (pourOp) {
-      if (holeUnion) {
-        const withHoles = pourOp.subtract(holeUnion);
-        manifoldInstancesForCleanup.push(withHoles);
-        pourOp = withHoles;
-      }
-      if (boardClipVolume) {
-        const clipped = Manifold.intersection([pourOp, boardClipVolume]);
-        manifoldInstancesForCleanup.push(clipped);
-        pourOp = clipped;
-      }
-      const covered = pour.covered_with_solder_mask !== false;
-      const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4GreenSolderWithMask : colors.copper;
-      const pourColor = new THREE24.Color(...pourColorArr);
-      const threeGeom = manifoldMeshToThreeGeometry(pourOp.getMesh());
-      copperPourGeoms.push({
-        key: `coppour-${pour.pcb_copper_pour_id}`,
-        geometry: threeGeom,
-        color: pourColor
+  });
+  const pcbCopperPours = su13(circuitJson).pcb_copper_pour.list();
+  pcbCopperPours.forEach((pour) => {
+    if (pour.layer !== layer) return;
+    if (pour.covered_with_solder_mask !== false) return;
+    if (pour.shape === "rect") {
+      const centerX = canvasXFromPcb(pour.center.x);
+      const centerY = canvasYFromPcb(pour.center.y);
+      const width10 = pour.width * traceTextureResolution;
+      const height10 = pour.height * traceTextureResolution;
+      ctx.fillRect(centerX - width10 / 2, centerY - height10 / 2, width10, height10);
+    } else if (pour.shape === "polygon" && pour.points) {
+      ctx.beginPath();
+      pour.points.forEach((point2, index2) => {
+        const px = canvasXFromPcb(point2.x);
+        const py = canvasYFromPcb(point2.y);
+        if (index2 === 0) {
+          ctx.moveTo(px, py);
+        } else {
+          ctx.lineTo(px, py);
+        }
       });
+      ctx.closePath();
+      ctx.fill();
     }
-  }
-  return { copperPourGeoms };
+  });
+  ctx.globalCompositeOperation = "source-over";
+  const texture = new THREE24.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE24.LinearMipmapLinearFilter;
+  texture.magFilter = THREE24.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
 }
 
-// src/utils/manifold/process-cutouts.ts
-import { su as su13 } from "@tscircuit/circuit-json-util";
-var arePointsClockwise6 = (points) => {
-  let area = 0;
-  for (let i = 0; i < points.length; i++) {
-    const j = (i + 1) % points.length;
-    if (points[i] && points[j]) {
-      area += points[i][0] * points[j][1];
-      area -= points[j][0] * points[i][1];
-    }
+// src/utils/trace-texture.ts
+import * as THREE25 from "three";
+import { su as su14 } from "@tscircuit/circuit-json-util";
+function isWireRoutePoint(point2) {
+  return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
+}
+function createTraceTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceColor,
+  traceTextureResolution
+}) {
+  const pcbTraces = su14(circuitJson).pcb_trace.list();
+  const allPcbVias = su14(circuitJson).pcb_via.list();
+  const allPcbPlatedHoles = su14(
+    circuitJson
+  ).pcb_plated_hole.list();
+  const tracesOnLayer = pcbTraces.filter(
+    (t) => t.route.some((p) => isWireRoutePoint(p) && p.layer === layer)
+  );
+  if (tracesOnLayer.length === 0) return null;
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(boardData.width * traceTextureResolution);
+  const canvasHeight = Math.floor(boardData.height * traceTextureResolution);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
   }
-  const signedArea = area / 2;
-  return signedArea <= 0;
-};
-function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
-  const cutoutOps = [];
-  const pcbCutouts = su13(circuitJson).pcb_cutout.list();
-  for (const cutout of pcbCutouts) {
-    let cutoutOp;
-    const cutoutHeight = pcbThickness * 1.5;
-    switch (cutout.shape) {
-      case "rect": {
-        const rectCornerRadius = extractRectBorderRadius(cutout);
-        if (typeof rectCornerRadius === "number" && rectCornerRadius > 0) {
-          cutoutOp = createRoundedRectPrism({
-            Manifold,
-            width: cutout.width,
-            height: cutout.height,
-            thickness: cutoutHeight,
-            borderRadius: rectCornerRadius
-          });
-        } else {
-          cutoutOp = Manifold.cube(
-            [cutout.width, cutout.height, cutoutHeight],
-            true
-            // centered
-          );
-        }
-        manifoldInstancesForCleanup.push(cutoutOp);
-        if (cutout.rotation) {
-          const rotatedOp = cutoutOp.rotate([0, 0, cutout.rotation]);
-          manifoldInstancesForCleanup.push(rotatedOp);
-          cutoutOp = rotatedOp;
-        }
-        cutoutOp = cutoutOp.translate([
-          cutout.center.x,
-          cutout.center.y,
-          0
-          // Centered vertically by Manifold.cube, so Z is 0 for board plane
-        ]);
-        manifoldInstancesForCleanup.push(cutoutOp);
-        break;
-      }
-      case "circle":
-        cutoutOp = Manifold.cylinder(
-          cutoutHeight,
-          cutout.radius,
-          -1,
-          // default for radiusHigh
-          SMOOTH_CIRCLE_SEGMENTS,
-          true
-          // centered
-        );
-        manifoldInstancesForCleanup.push(cutoutOp);
-        cutoutOp = cutoutOp.translate([cutout.center.x, cutout.center.y, 0]);
-        manifoldInstancesForCleanup.push(cutoutOp);
-        break;
-      case "polygon":
-        if (cutout.points.length < 3) {
-          console.warn(
-            `PCB Cutout [${cutout.pcb_cutout_id}] polygon has fewer than 3 points, skipping.`
-          );
-          continue;
-        }
-        let pointsVec2 = cutout.points.map((p) => [
-          p.x,
-          p.y
-        ]);
-        if (arePointsClockwise6(pointsVec2)) {
-          pointsVec2 = pointsVec2.reverse();
-        }
-        const crossSection = CrossSection.ofPolygons([pointsVec2]);
-        manifoldInstancesForCleanup.push(crossSection);
-        cutoutOp = Manifold.extrude(
-          crossSection,
-          cutoutHeight,
-          0,
-          // nDivisions
-          0,
-          // twistDegrees
-          [1, 1],
-          // scaleTop
-          true
-          // center extrusion
-        );
-        manifoldInstancesForCleanup.push(cutoutOp);
-        break;
-      default:
-        console.warn(
-          `Unsupported cutout shape: ${cutout.shape} for cutout ${cutout.pcb_cutout_id}`
-        );
+  tracesOnLayer.forEach((trace) => {
+    let firstPoint = true;
+    ctx.beginPath();
+    ctx.strokeStyle = traceColor;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    let currentLineWidth = 0;
+    for (const point2 of trace.route) {
+      if (!isWireRoutePoint(point2) || point2.layer !== layer) {
+        if (!firstPoint) ctx.stroke();
+        firstPoint = true;
         continue;
+      }
+      const pcbX = point2.x;
+      const pcbY = point2.y;
+      currentLineWidth = point2.width * traceTextureResolution;
+      ctx.lineWidth = currentLineWidth;
+      const canvasX = (pcbX - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+      const canvasY = (-(pcbY - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+      if (firstPoint) {
+        ctx.moveTo(canvasX, canvasY);
+        firstPoint = false;
+      } else {
+        ctx.lineTo(canvasX, canvasY);
+      }
     }
-    if (cutoutOp) {
-      cutoutOps.push(cutoutOp);
+    if (!firstPoint) {
+      ctx.stroke();
     }
-  }
-  return { cutoutOps };
+  });
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillStyle = "black";
+  allPcbVias.forEach((via) => {
+    const canvasX = (via.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+    const canvasY = (-(via.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+    const canvasRadius = via.outer_diameter / 2 * traceTextureResolution;
+    ctx.beginPath();
+    ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
+    ctx.fill();
+  });
+  allPcbPlatedHoles.forEach((ph) => {
+    if (ph.layers.includes(layer) && ph.shape === "circle") {
+      const canvasX = (ph.x - boardData.center.x + boardData.width / 2) * traceTextureResolution;
+      const canvasY = (-(ph.y - boardData.center.y) + boardData.height / 2) * traceTextureResolution;
+      const canvasRadius = ph.outer_diameter / 2 * traceTextureResolution;
+      ctx.beginPath();
+      ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
+      ctx.fill();
+    }
+  });
+  ctx.globalCompositeOperation = "source-over";
+  const texture = new THREE25.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
 }
 
 // src/hooks/useManifoldBoardBuilder.ts
@@ -34017,7 +34167,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
-    const boards = su14(circuitJson).pcb_board.list();
+    const boards = su15(circuitJson).pcb_board.list();
     if (panels.length > 0) {
       const panel = panels[0];
       return {
@@ -34036,7 +34186,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
   const isFauxBoard = useMemo19(() => {
-    const boards = su14(circuitJson).pcb_board.list();
+    const boards = su15(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
   useEffect22(() => {
@@ -34171,7 +34321,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE25.Color(
+              color: new THREE26.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -34201,7 +34351,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE25.Color(
+          color: new THREE26.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -34262,6 +34412,22 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         silkscreenColor,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       });
+      const soldermaskColorArr = tracesMaterialColors[boardData.material] ?? colors.fr4GreenSolderWithMask;
+      const soldermaskColor = `rgb(${Math.round(soldermaskColorArr[0] * 255)}, ${Math.round(soldermaskColorArr[1] * 255)}, ${Math.round(soldermaskColorArr[2] * 255)})`;
+      currentTextures.topSoldermask = createSoldermaskTextureForLayer({
+        layer: "top",
+        circuitJson,
+        boardData,
+        soldermaskColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      currentTextures.bottomSoldermask = createSoldermaskTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        boardData,
+        soldermaskColor,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
       setTextures(currentTextures);
     } catch (e) {
       console.error("Error processing geometry with Manifold in hook:", e);
@@ -34290,11 +34456,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE26 from "three";
-var DEFAULT_SIDE = THREE26.DoubleSide;
+import * as THREE27 from "three";
+var DEFAULT_SIDE = THREE27.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -34302,7 +34468,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE26.MeshPhysicalMaterial({
+    return new THREE27.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -34316,7 +34482,7 @@ var createBoardMaterial = ({
       flatShading: true
     });
   }
-  return new THREE26.MeshStandardMaterial({
+  return new THREE27.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -34332,12 +34498,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE27.Mesh(
+    const mesh = new THREE28.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE27.DoubleSide,
+        side: THREE28.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -34347,11 +34513,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE27.Mesh(
+        const mesh = new THREE28.Mesh(
           comp.geometry,
-          new THREE27.MeshStandardMaterial({
+          new THREE28.MeshStandardMaterial({
             color: comp.color,
-            side: THREE27.DoubleSide,
+            side: THREE28.DoubleSide,
             flatShading: true,
             // Consistent with board
             polygonOffset: true,
@@ -34372,21 +34538,24 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
-  const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
+  const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix, usePolygonOffset = false) => {
     if (!texture) return null;
-    const planeGeom = new THREE28.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE28.MeshBasicMaterial({
+    const planeGeom = new THREE29.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE29.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE28.DoubleSide,
-      depthWrite: false
+      side: THREE29.DoubleSide,
+      depthWrite: false,
       // Important for layers to avoid z-fighting issues with board itself
+      polygonOffset: usePolygonOffset,
+      polygonOffsetFactor: usePolygonOffset ? -1 : 0,
+      polygonOffsetUnits: usePolygonOffset ? -1 : 0
     });
-    const mesh = new THREE28.Mesh(planeGeom, material);
+    const mesh = new THREE29.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -34425,6 +34594,26 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
     "silkscreen"
   );
   if (bottomSilkscreenMesh) meshes.push(bottomSilkscreenMesh);
+  const topSoldermaskMesh = createTexturePlane(
+    textures.topSoldermask,
+    pcbThickness / 2 + 8e-4,
+    // Just above board surface, below traces
+    false,
+    "soldermask",
+    true
+    // Enable polygon offset
+  );
+  if (topSoldermaskMesh) meshes.push(topSoldermaskMesh);
+  const bottomSoldermaskMesh = createTexturePlane(
+    textures.bottomSoldermask,
+    -pcbThickness / 2 - 8e-4,
+    // Just below board surface (bottom side)
+    true,
+    "soldermask",
+    true
+    // Enable polygon offset
+  );
+  if (bottomSoldermaskMesh) meshes.push(bottomSoldermaskMesh);
   return meshes;
 }
 
@@ -34469,6 +34658,10 @@ var BoardMeshes = ({
         shouldShow = visibility.topSilkscreen;
       } else if (mesh.name.includes("bottom-silkscreen")) {
         shouldShow = visibility.bottomSilkscreen;
+      } else if (mesh.name.includes("top-soldermask")) {
+        shouldShow = visibility.topMask;
+      } else if (mesh.name.includes("bottom-soldermask")) {
+        shouldShow = visibility.bottomMask;
       }
       if (shouldShow) {
         rootObject.add(mesh);
@@ -34581,7 +34774,7 @@ try {
     [textures, boardData, pcbThickness]
   );
   const cadComponents = useMemo20(
-    () => su15(circuitJson).cad_component.list(),
+    () => su16(circuitJson).cad_component.list(),
     [circuitJson]
   );
   const boardDimensions = useMemo20(() => {
@@ -40696,6 +40889,48 @@ var AppearanceMenu = () => {
                 ]
               }
             ),
+            /* @__PURE__ */ jsxs8(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "topMask" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility("topMask", !visibility.topMask);
+                },
+                onMouseEnter: () => setHoveredItem("topMask"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("topMask"),
+                children: [
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "bottomMask" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility("bottomMask", !visibility.bottomMask);
+                },
+                onMouseEnter: () => setHoveredItem("bottomMask"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("bottomMask"),
+                children: [
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs8(
               Item22,
               {
@@ -41535,7 +41770,7 @@ var CadViewerInner = (props) => {
   );
 };
 var CadViewer = (props) => {
-  const defaultTarget = useMemo28(() => new THREE29.Vector3(0, 0, 0), []);
+  const defaultTarget = useMemo28(() => new THREE30.Vector3(0, 0, 0), []);
   const initialCameraPosition = useMemo28(
     () => [5, -5, 5],
     []
@@ -41552,12 +41787,12 @@ var CadViewer = (props) => {
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
-import { su as su16 } from "@tscircuit/circuit-json-util";
-import * as THREE33 from "three";
+import { su as su17 } from "@tscircuit/circuit-json-util";
+import * as THREE34 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -41571,12 +41806,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE30.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE30.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE30.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE30.Vector3().crossVectors(
-        new THREE30.Vector3().subVectors(v2, v1),
-        new THREE30.Vector3().subVectors(v3, v1)
+      const v1 = new THREE31.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE31.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE31.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE31.Vector3().crossVectors(
+        new THREE31.Vector3().subVectors(v2, v1),
+        new THREE31.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -41600,10 +41835,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 THREE32 from "three";
+import * as THREE33 from "three";
 
 // src/utils/load-model.ts
-import * as THREE31 from "three";
+import * as THREE32 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";
@@ -41611,12 +41846,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE31.MeshStandardMaterial({
+    const material = new THREE32.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE31.Mesh(geometry, material);
+    return new THREE32.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -41649,9 +41884,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE33.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -41665,13 +41900,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE32.MeshStandardMaterial({
+      const material2 = new THREE33.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE32.DoubleSide
+        side: THREE33.DoubleSide
       });
-      const mesh2 = new THREE32.Mesh(threeGeom, material2);
+      const mesh2 = new THREE33.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -41681,9 +41916,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE33.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -41700,17 +41935,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE32.Color(geomInfo.color);
+      const color = new THREE33.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE32.MeshStandardMaterial({
+      const material2 = new THREE33.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE32.DoubleSide
+        side: THREE33.DoubleSide
       });
-      const mesh2 = new THREE32.Mesh(threeGeom, material2);
+      const mesh2 = new THREE33.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -41720,22 +41955,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE32.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE32.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE33.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE33.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE32.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE32.MeshStandardMaterial({
+  const geometry = new THREE33.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE33.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE32.Mesh(geometry, material);
+  const mesh = new THREE33.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -41756,11 +41991,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE33.Scene();
+  const scene = new THREE34.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE33.Color(backgroundColor), 1);
-  const camera = new THREE33.OrthographicCamera();
+  renderer.setClearColor(new THREE34.Color(backgroundColor), 1);
+  const camera = new THREE34.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -41774,25 +42009,25 @@ 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 THREE33.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE34.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE33.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE34.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE33.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE34.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su16(circuitJson).cad_component.list();
+  const components = su17(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
-  const boardData = su16(circuitJson).pcb_board.list()[0];
+  const boardData = su17(circuitJson).pcb_board.list()[0];
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     for (const geom of boardGeom) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const baseColor = new THREE33.Color(
+      const baseColor = new THREE34.Color(
         g.color?.[0] ?? 0,
         g.color?.[1] ?? 0,
         g.color?.[2] ?? 0
@@ -41800,18 +42035,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE33.DoubleSide
+        side: THREE34.DoubleSide
       });
-      const mesh = new THREE33.Mesh(geometry, material);
+      const mesh = new THREE34.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE33.GridHelper(100, 100);
+  const gridHelper = new THREE34.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE33.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE33.Vector3());
-  const size5 = box.getSize(new THREE33.Vector3());
+  const box = new THREE34.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE34.Vector3());
+  const size5 = box.getSize(new THREE34.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size5.x, size5.y, size5.z);
   if (maxDim > 0) {