@tscircuit/3d-viewer 0.0.511 → 0.0.513

package/dist/index.js

@@ -28,7 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var require_flatten = __commonJS({
   "node_modules/@jscad/modeling/src/utils/flatten.js"(exports, module) {
     "use strict";
-    var flatten = (arr) => arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
+    var flatten = (arr) => arr.flat(Infinity);
     module.exports = flatten;
   }
 });
@@ -9255,9 +9255,10 @@ var require_extrudeWalls = __commonJS({
         return edges;
       }
       const divisor = vec3.fromValues(multiple, multiple, multiple);
+      const increment = vec3.create();
       const newEdges = [];
       edges.forEach((edge) => {
-        const increment = vec3.subtract(vec3.create(), edge[1], edge[0]);
+        vec3.subtract(increment, edge[1], edge[0]);
         vec3.divide(increment, increment, divisor);
         let prev = edge[0];
         for (let i = 1; i <= multiple; ++i) {
@@ -9336,7 +9337,10 @@ var require_extrudeFromSlices = __commonJS({
           const edges = slice.toEdges(currentSlice);
           if (edges.length === 0) throw new Error("the callback function must return slices with one or more edges");
           if (prevSlice) {
-            polygons = polygons.concat(extrudeWalls(prevSlice, currentSlice));
+            const walls = extrudeWalls(prevSlice, currentSlice);
+            for (let i = 0; i < walls.length; i++) {
+              polygons.push(walls[i]);
+            }
           }
           if (s === 0) startSlice = currentSlice;
           if (s === numberOfSlices - 1) endSlice = currentSlice;
@@ -9345,15 +9349,22 @@ var require_extrudeFromSlices = __commonJS({
       }
       if (capEnd) {
         const endPolygons = slice.toPolygons(endSlice);
-        polygons = polygons.concat(endPolygons);
+        for (let i = 0; i < endPolygons.length; i++) {
+          polygons.push(endPolygons[i]);
+        }
       }
       if (capStart) {
         const startPolygons = slice.toPolygons(startSlice).map(poly3.invert);
-        polygons = polygons.concat(startPolygons);
+        for (let i = 0; i < startPolygons.length; i++) {
+          polygons.push(startPolygons[i]);
+        }
       }
       if (!capStart && !capEnd) {
         if (close && !slice.equals(endSlice, startSlice)) {
-          polygons = polygons.concat(extrudeWalls(endSlice, startSlice));
+          const walls = extrudeWalls(endSlice, startSlice);
+          for (let i = 0; i < walls.length; i++) {
+            polygons.push(walls[i]);
+          }
         }
       }
       return geom3.create(polygons);
@@ -9429,12 +9440,15 @@ var require_extrudeRotate = __commonJS({
       const baseSlice = slice.fromSides(geom2.toSides(geometry));
       slice.reverse(baseSlice, baseSlice);
       const matrix = mat4.create();
+      const xRotationMatrix = mat4.fromXRotation(mat4.create(), TAU / 4);
+      const zRotationMatrix = mat4.create();
       const createSlice = (progress, index2, base) => {
         let Zrotation = rotationPerSlice * index2 + startAngle;
         if (totalRotation === TAU && index2 === segments) {
           Zrotation = startAngle;
         }
-        mat4.multiply(matrix, mat4.fromZRotation(matrix, Zrotation), mat4.fromXRotation(mat4.create(), TAU / 4));
+        mat4.fromZRotation(zRotationMatrix, Zrotation);
+        mat4.multiply(matrix, zRotationMatrix, xRotationMatrix);
         return slice.transform(matrix, base);
       };
       options = {
@@ -10323,6 +10337,7 @@ var require_reTesselateCoplanarPolygons = __commonJS({
         const newoutpolygonrow = [];
         const ycoordinate = ycoordinates[yindex];
         const polygonindexeswithcorner = ycoordinatetopolygonindexes.get(ycoordinate);
+        let removeCount = 0;
         for (let activepolygonindex = 0; activepolygonindex < activepolygons.length; ++activepolygonindex) {
           const activepolygon = activepolygons[activepolygonindex];
           const polygonindex = activepolygon.polygonindex;
@@ -10343,8 +10358,8 @@ var require_reTesselateCoplanarPolygons = __commonJS({
               newrightvertexindex = nextrightvertexindex;
             }
             if (newleftvertexindex !== activepolygon.leftvertexindex && newleftvertexindex === newrightvertexindex) {
-              activepolygons.splice(activepolygonindex, 1);
-              --activepolygonindex;
+              activepolygon._remove = true;
+              removeCount++;
             } else {
               activepolygon.leftvertexindex = newleftvertexindex;
               activepolygon.rightvertexindex = newrightvertexindex;
@@ -10359,6 +10374,9 @@ var require_reTesselateCoplanarPolygons = __commonJS({
             }
           }
         }
+        if (removeCount > 0) {
+          activepolygons = activepolygons.filter((p) => !p._remove);
+        }
         let nextycoordinate;
         if (yindex >= ycoordinates.length - 1) {
           activepolygons = [];
@@ -10534,8 +10552,10 @@ var require_retessellate = __commonJS({
       const destPolygons = [];
       classified.forEach((group) => {
         if (Array.isArray(group)) {
-          const reTessellateCoplanarPolygons = reTesselateCoplanarPolygons(group);
-          destPolygons.push(...reTessellateCoplanarPolygons);
+          const coplanarPolygons = reTesselateCoplanarPolygons(group);
+          for (let i = 0; i < coplanarPolygons.length; i++) {
+            destPolygons.push(coplanarPolygons[i]);
+          }
         } else {
           destPolygons.push(group);
         }
@@ -10768,6 +10788,19 @@ var require_splitPolygonByPlane = __commonJS({
     var vec3 = require_vec3();
     var poly3 = require_poly3();
     var splitLineSegmentByPlane = require_splitLineSegmentByPlane();
+    var EPS_SQUARED = EPS * EPS;
+    var removeConsecutiveDuplicates = (vertices) => {
+      const result = [];
+      let prevvertex = vertices[vertices.length - 1];
+      for (let i = 0; i < vertices.length; i++) {
+        const vertex = vertices[i];
+        if (vec3.squaredDistance(vertex, prevvertex) >= EPS_SQUARED) {
+          result.push(vertex);
+        }
+        prevvertex = vertex;
+      }
+      return result;
+    };
     var splitPolygonByPlane = (splane, polygon3) => {
       const result = {
         type: null,
@@ -10829,34 +10862,17 @@ var require_splitPolygonByPlane = __commonJS({
             }
             isback = nextisback;
           }
-          const EPS_SQUARED = EPS * EPS;
-          if (backvertices.length >= 3) {
-            let prevvertex = backvertices[backvertices.length - 1];
-            for (let vertexindex = 0; vertexindex < backvertices.length; vertexindex++) {
-              const vertex = backvertices[vertexindex];
-              if (vec3.squaredDistance(vertex, prevvertex) < EPS_SQUARED) {
-                backvertices.splice(vertexindex, 1);
-                vertexindex--;
-              }
-              prevvertex = vertex;
-            }
-          }
           if (frontvertices.length >= 3) {
-            let prevvertex = frontvertices[frontvertices.length - 1];
-            for (let vertexindex = 0; vertexindex < frontvertices.length; vertexindex++) {
-              const vertex = frontvertices[vertexindex];
-              if (vec3.squaredDistance(vertex, prevvertex) < EPS_SQUARED) {
-                frontvertices.splice(vertexindex, 1);
-                vertexindex--;
-              }
-              prevvertex = vertex;
+            const frontFiltered = removeConsecutiveDuplicates(frontvertices);
+            if (frontFiltered.length >= 3) {
+              result.front = poly3.fromPointsAndPlane(frontFiltered, pplane);
             }
           }
-          if (frontvertices.length >= 3) {
-            result.front = poly3.fromPointsAndPlane(frontvertices, pplane);
-          }
           if (backvertices.length >= 3) {
-            result.back = poly3.fromPointsAndPlane(backvertices, pplane);
+            const backFiltered = removeConsecutiveDuplicates(backvertices);
+            if (backFiltered.length >= 3) {
+              result.back = poly3.fromPointsAndPlane(backFiltered, pplane);
+            }
           }
         }
       }
@@ -10900,10 +10916,6 @@ var require_PolygonTreeNode = __commonJS({
         if (!this.removed) {
           this.removed = true;
           this.polygon = null;
-          const parentschildren = this.parent.children;
-          const i = parentschildren.indexOf(this);
-          if (i < 0) throw new Error("Assertion failed");
-          parentschildren.splice(i, 1);
           this.parent.recursivelyInvalidatePolygon();
         }
       }
@@ -10923,6 +10935,13 @@ var require_PolygonTreeNode = __commonJS({
         return this.polygon;
       }
       getPolygons(result) {
+        if (this.isRootNode() && this.children.length > 0) {
+          const compacted = [];
+          for (let i2 = 0; i2 < this.children.length; i2++) {
+            if (!this.children[i2].removed) compacted.push(this.children[i2]);
+          }
+          this.children = compacted;
+        }
         let children = [this];
         const queue = [children];
         let i, j, l, node;
@@ -14226,7 +14245,7 @@ var require_browser = __commonJS({
 
 // src/CadViewer.tsx
 import { useState as useState36, useCallback as useCallback21, useRef as useRef26, useEffect as useEffect44 } from "react";
-import * as THREE34 from "three";
+import * as THREE36 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su12 } from "@tscircuit/circuit-json-util";
@@ -28338,9 +28357,9 @@ var AnyCadComponent = ({
     if (!cad_component.position) return void 0;
     let z18;
     if (layer === "top") {
-      z18 = pcbThickness / 2;
+      z18 = cad_component.position.z;
     } else if (layer === "bottom") {
-      z18 = -(pcbThickness / 2);
+      z18 = -(cad_component.position.z + pcbThickness);
     } else {
       z18 = cad_component.position.z;
     }
@@ -28464,7 +28483,7 @@ import * as THREE16 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.510",
+  version: "0.0.512",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -31543,529 +31562,12 @@ var ThreeErrorBoundary = class extends React11.Component {
 import { su as su9 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect23, useMemo as useMemo19 } from "react";
 
-// src/textures/create-copper-pour-texture-for-layer.ts
-import * as THREE19 from "three";
-import { CircuitToCanvasDrawer } from "circuit-to-canvas";
-
-// node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
-var getBoundsFromPoints = (points) => {
-  if (points.length === 0) {
-    return null;
-  }
-  let minX = points[0].x;
-  let minY = points[0].y;
-  let maxX = points[0].x;
-  let maxY = points[0].y;
-  for (let i = 1; i < points.length; i++) {
-    const point = points[i];
-    if (point.x < minX) minX = point.x;
-    if (point.y < minY) minY = point.y;
-    if (point.x > maxX) maxX = point.x;
-    if (point.y > maxY) maxY = point.y;
-  }
-  return { minX, minY, maxX, maxY };
-};
-
-// src/utils/outline-bounds.ts
-function calculateOutlineBounds(boardData) {
-  if (boardData.outline && boardData.outline.length >= 3) {
-    const bounds2 = getBoundsFromPoints(boardData.outline);
-    return {
-      ...bounds2,
-      width: bounds2.maxX - bounds2.minX,
-      height: bounds2.maxY - bounds2.minY,
-      centerX: (bounds2.minX + bounds2.maxX) / 2,
-      centerY: (bounds2.minY + bounds2.maxY) / 2
-    };
-  }
-  const boardWidth = boardData.width ?? 0;
-  const boardHeight = boardData.height ?? 0;
-  const boardCenterX = boardData.center?.x ?? 0;
-  const boardCenterY = boardData.center?.y ?? 0;
-  const bounds = {
-    minX: boardCenterX - boardWidth / 2,
-    maxX: boardCenterX + boardWidth / 2,
-    minY: boardCenterY - boardHeight / 2,
-    maxY: boardCenterY + boardHeight / 2
-  };
-  return {
-    ...bounds,
-    width: boardWidth,
-    height: boardHeight,
-    centerX: boardCenterX,
-    centerY: boardCenterY
-  };
-}
-
-// src/geoms/brep-converter.ts
-var import_primitives7 = __toESM(require_primitives(), 1);
-var import_booleans5 = __toESM(require_booleans(), 1);
-function segmentToPoints(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)
-    ]);
-  }
-  return points;
-}
-function ringToPoints(ring, arcSegments) {
-  const allPoints = [];
-  const vertices = ring.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 = segmentToPoints(
-        [p1.x, p1.y],
-        [p2.x, p2.y],
-        p1.bulge,
-        arcSegments
-      );
-      allPoints.push(...arcPoints);
-    }
-  }
-  return allPoints;
-}
-
-// src/textures/create-copper-pour-texture-for-layer.ts
-function drawPolygon({
-  ctx,
-  points,
-  canvasXFromPcb,
-  canvasYFromPcb
-}) {
-  if (points.length < 3) return;
-  ctx.beginPath();
-  points.forEach((point, index2) => {
-    const canvasX = canvasXFromPcb(point[0]);
-    const canvasY = canvasYFromPcb(point[1]);
-    if (index2 === 0) {
-      ctx.moveTo(canvasX, canvasY);
-    } else {
-      ctx.lineTo(canvasX, canvasY);
-    }
-  });
-  ctx.closePath();
-  ctx.fill();
-}
-function drawBrepShape({
-  ctx,
-  pour,
-  canvasXFromPcb,
-  canvasYFromPcb
-}) {
-  const brepShape = pour.brep_shape;
-  if (!brepShape || !brepShape.outer_ring) return;
-  const outerRingPoints = ringToPoints(brepShape.outer_ring, 32);
-  if (outerRingPoints.length >= 3) {
-    drawPolygon({
-      ctx,
-      points: outerRingPoints,
-      canvasXFromPcb,
-      canvasYFromPcb
-    });
-  }
-  if (brepShape.inner_rings && brepShape.inner_rings.length > 0) {
-    ctx.globalCompositeOperation = "destination-out";
-    for (const innerRing of brepShape.inner_rings) {
-      const innerRingPoints = ringToPoints(innerRing, 32);
-      if (innerRingPoints.length >= 3) {
-        drawPolygon({
-          ctx,
-          points: innerRingPoints,
-          canvasXFromPcb,
-          canvasYFromPcb
-        });
-      }
-    }
-    ctx.globalCompositeOperation = "source-over";
-  }
-}
-function createCopperPourTextureForLayer({
-  layer,
-  circuitJson,
-  boardData,
-  traceTextureResolution = TRACE_TEXTURE_RESOLUTION
-}) {
-  const copperPours = circuitJson.filter(
-    (e) => e.type === "pcb_copper_pour"
-  );
-  const pcbRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const poursOnLayer = copperPours.filter((p) => p.layer === layer);
-  if (poursOnLayer.length === 0) return null;
-  const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const canvas = document.createElement("canvas");
-  const canvasWidth = Math.floor(
-    boardOutlineBounds.width * traceTextureResolution
-  );
-  const canvasHeight = Math.floor(
-    boardOutlineBounds.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 canvasXFromPcb = (pcbX) => (pcbX - boardOutlineBounds.minX) * traceTextureResolution;
-  const canvasYFromPcb = (pcbY) => (boardOutlineBounds.maxY - pcbY) * traceTextureResolution;
-  const rectAndPolygonPours = poursOnLayer.filter(
-    (pour) => pour.shape === "rect" || pour.shape === "polygon"
-  );
-  const brepPours = poursOnLayer.filter((pour) => pour.shape === "brep");
-  if (rectAndPolygonPours.length > 0) {
-    const drawer = new CircuitToCanvasDrawer(ctx);
-    drawer.setCameraBounds({
-      minX: boardOutlineBounds.minX,
-      maxX: boardOutlineBounds.maxX,
-      minY: boardOutlineBounds.minY,
-      maxY: boardOutlineBounds.maxY
-    });
-    const coveredPours = rectAndPolygonPours.filter(
-      (p) => p.covered_with_solder_mask !== false
-    );
-    const uncoveredPours = rectAndPolygonPours.filter(
-      (p) => p.covered_with_solder_mask === false
-    );
-    const coveredColor = `rgb(${colors.fr4TracesWithMaskGreen.map((c) => c * 255).join(",")})`;
-    const uncoveredColor = `rgb(${colors.copper.map((c) => c * 255).join(",")})`;
-    if (coveredPours.length > 0) {
-      drawer.configure({
-        colorOverrides: {
-          copper: {
-            top: coveredColor,
-            bottom: coveredColor,
-            inner1: coveredColor,
-            inner2: coveredColor,
-            inner3: coveredColor,
-            inner4: coveredColor,
-            inner5: coveredColor,
-            inner6: coveredColor
-          }
-        }
-      });
-      drawer.drawElements(coveredPours, { layers: [pcbRenderLayer] });
-    }
-    if (uncoveredPours.length > 0) {
-      drawer.configure({
-        colorOverrides: {
-          copper: {
-            top: uncoveredColor,
-            bottom: uncoveredColor,
-            inner1: uncoveredColor,
-            inner2: uncoveredColor,
-            inner3: uncoveredColor,
-            inner4: uncoveredColor,
-            inner5: uncoveredColor,
-            inner6: uncoveredColor
-          }
-        }
-      });
-      drawer.drawElements(uncoveredPours, { layers: [pcbRenderLayer] });
-    }
-  }
-  for (const pour of brepPours) {
-    const covered = pour.covered_with_solder_mask !== false;
-    const colorArr = covered ? colors.fr4TracesWithMaskGreen : colors.copper;
-    const copperColor = `rgb(${colorArr[0] * 255}, ${colorArr[1] * 255}, ${colorArr[2] * 255})`;
-    ctx.fillStyle = copperColor;
-    drawBrepShape({ ctx, pour, canvasXFromPcb, canvasYFromPcb });
-  }
-  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;
-}
-
-// src/textures/create-three-texture-meshes.ts
-import * as THREE20 from "three";
-function createTexturePlane(config, boardData) {
-  const {
-    texture,
-    yOffset,
-    isBottomLayer,
-    textureType,
-    usePolygonOffset = false,
-    renderOrder = 0,
-    isFaux = false
-  } = config;
-  if (!texture) return null;
-  const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE20.PlaneGeometry(
-    boardOutlineBounds.width,
-    boardOutlineBounds.height
-  );
-  const material = new THREE20.MeshBasicMaterial({
-    map: texture,
-    transparent: true,
-    side: THREE20.DoubleSide,
-    depthWrite: textureType === "panel-outlines",
-    polygonOffset: usePolygonOffset,
-    polygonOffsetFactor: usePolygonOffset ? -4 : 0,
-    // Increased for better z-fighting prevention
-    polygonOffsetUnits: usePolygonOffset ? -4 : 0,
-    opacity: isFaux ? FAUX_BOARD_OPACITY : 1
-  });
-  const mesh = new THREE20.Mesh(planeGeom, material);
-  mesh.position.set(
-    boardOutlineBounds.centerX,
-    boardOutlineBounds.centerY,
-    yOffset
-  );
-  if (isBottomLayer) {
-    mesh.rotation.set(Math.PI, 0, 0);
-  }
-  mesh.name = `${isBottomLayer ? "bottom" : "top"}-${textureType}-texture-plane`;
-  mesh.renderOrder = renderOrder;
-  return mesh;
-}
-function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false) {
-  const meshes = [];
-  if (!textures || !boardData || pcbThickness === null) return meshes;
-  const topTraceMesh = createTexturePlane(
-    {
-      texture: textures.topTrace,
-      yOffset: pcbThickness / 2 + BOARD_SURFACE_OFFSET.traces,
-      // Use consistent copper offset
-      isBottomLayer: false,
-      textureType: "trace",
-      usePolygonOffset: false,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (topTraceMesh) meshes.push(topTraceMesh);
-  const topTraceWithMaskMesh = createTexturePlane(
-    {
-      texture: textures.topTraceWithMask,
-      yOffset: pcbThickness / 2 + BOARD_SURFACE_OFFSET.traces,
-      isBottomLayer: false,
-      textureType: "trace-with-mask",
-      usePolygonOffset: false,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (topTraceWithMaskMesh) meshes.push(topTraceWithMaskMesh);
-  const topSilkscreenMesh = createTexturePlane(
-    {
-      texture: textures.topSilkscreen,
-      yOffset: pcbThickness / 2 + 3e-3,
-      // Slightly above soldermask
-      isBottomLayer: false,
-      textureType: "silkscreen",
-      usePolygonOffset: false,
-      renderOrder: 3,
-      // Render after traces
-      isFaux
-    },
-    boardData
-  );
-  if (topSilkscreenMesh) meshes.push(topSilkscreenMesh);
-  const bottomTraceMesh = createTexturePlane(
-    {
-      texture: textures.bottomTrace,
-      yOffset: -pcbThickness / 2 - BOARD_SURFACE_OFFSET.traces,
-      // Use consistent copper offset
-      isBottomLayer: true,
-      textureType: "trace",
-      usePolygonOffset: false,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (bottomTraceMesh) meshes.push(bottomTraceMesh);
-  const bottomTraceWithMaskMesh = createTexturePlane(
-    {
-      texture: textures.bottomTraceWithMask,
-      yOffset: -pcbThickness / 2 - BOARD_SURFACE_OFFSET.traces,
-      isBottomLayer: true,
-      textureType: "trace-with-mask",
-      usePolygonOffset: false,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (bottomTraceWithMaskMesh) meshes.push(bottomTraceWithMaskMesh);
-  const bottomSilkscreenMesh = createTexturePlane(
-    {
-      texture: textures.bottomSilkscreen,
-      yOffset: -pcbThickness / 2 - 3e-3,
-      isBottomLayer: true,
-      textureType: "silkscreen",
-      usePolygonOffset: false,
-      renderOrder: 3,
-      // Render after traces
-      isFaux
-    },
-    boardData
-  );
-  if (bottomSilkscreenMesh) meshes.push(bottomSilkscreenMesh);
-  const topSoldermaskMesh = createTexturePlane(
-    {
-      texture: textures.topSoldermask,
-      yOffset: pcbThickness / 2 + 1e-3,
-      // Just above board surface
-      isBottomLayer: false,
-      textureType: "soldermask",
-      usePolygonOffset: true,
-      // Enable polygon offset
-      renderOrder: 1,
-      // Render after board (renderOrder)
-      isFaux
-    },
-    boardData
-  );
-  if (topSoldermaskMesh) meshes.push(topSoldermaskMesh);
-  const bottomSoldermaskMesh = createTexturePlane(
-    {
-      texture: textures.bottomSoldermask,
-      yOffset: -pcbThickness / 2 - 1e-3,
-      // Just below board surface (bottom side)
-      isBottomLayer: true,
-      textureType: "soldermask",
-      usePolygonOffset: true,
-      // Enable polygon offset
-      renderOrder: 1,
-      // Render after board (renderOrder)
-      isFaux
-    },
-    boardData
-  );
-  if (bottomSoldermaskMesh) meshes.push(bottomSoldermaskMesh);
-  const topCopperTextMesh = createTexturePlane(
-    {
-      texture: textures.topCopperText,
-      yOffset: pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper,
-      isBottomLayer: false,
-      textureType: "copper-text",
-      usePolygonOffset: true,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (topCopperTextMesh) meshes.push(topCopperTextMesh);
-  const bottomCopperTextMesh = createTexturePlane(
-    {
-      texture: textures.bottomCopperText,
-      yOffset: -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper,
-      isBottomLayer: true,
-      textureType: "copper-text",
-      usePolygonOffset: true,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (bottomCopperTextMesh) meshes.push(bottomCopperTextMesh);
-  const topCopperMesh = createTexturePlane(
-    {
-      texture: textures.topCopper,
-      yOffset: pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper,
-      isBottomLayer: false,
-      textureType: "copper",
-      usePolygonOffset: true,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (topCopperMesh) meshes.push(topCopperMesh);
-  const bottomCopperMesh = createTexturePlane(
-    {
-      texture: textures.bottomCopper,
-      yOffset: -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper,
-      isBottomLayer: true,
-      textureType: "copper",
-      usePolygonOffset: true,
-      renderOrder: 2,
-      // Render after soldermask
-      isFaux
-    },
-    boardData
-  );
-  if (bottomCopperMesh) meshes.push(bottomCopperMesh);
-  const topPanelOutlinesMesh = createTexturePlane(
-    {
-      texture: textures.topPanelOutlines,
-      yOffset: pcbThickness / 2 + 4e-3,
-      // Above silkscreen
-      isBottomLayer: false,
-      textureType: "panel-outlines",
-      usePolygonOffset: false,
-      renderOrder: 4,
-      isFaux
-    },
-    boardData
-  );
-  if (topPanelOutlinesMesh) meshes.push(topPanelOutlinesMesh);
-  const bottomPanelOutlinesMesh = createTexturePlane(
-    {
-      texture: textures.bottomPanelOutlines,
-      yOffset: -pcbThickness / 2 - 4e-3,
-      // Below bottom silkscreen
-      isBottomLayer: true,
-      textureType: "panel-outlines",
-      usePolygonOffset: false,
-      renderOrder: 4,
-      isFaux
-    },
-    boardData
-  );
-  if (bottomPanelOutlinesMesh) meshes.push(bottomPanelOutlinesMesh);
-  return meshes;
-}
-
-// src/three-components/JscadBoardTextures.tsx
-import * as THREE26 from "three";
+// src/textures/create-combined-board-textures.ts
+import * as THREE25 from "three";
 
 // src/utils/copper-text-texture.ts
 var import_text = __toESM(require_text(), 1);
-import * as THREE21 from "three";
+import * as THREE19 from "three";
 
 // node_modules/transformation-matrix/src/applyToPoint.js
 function applyToPoint(matrix, point) {
@@ -32277,6 +31779,56 @@ peg$SyntaxError.buildMessage = function(expected, found) {
   return "Expected " + describeExpected(expected) + " but " + describeFound(found) + " found.";
 };
 
+// node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
+var getBoundsFromPoints = (points) => {
+  if (points.length === 0) {
+    return null;
+  }
+  let minX = points[0].x;
+  let minY = points[0].y;
+  let maxX = points[0].x;
+  let maxY = points[0].y;
+  for (let i = 1; i < points.length; i++) {
+    const point = points[i];
+    if (point.x < minX) minX = point.x;
+    if (point.y < minY) minY = point.y;
+    if (point.x > maxX) maxX = point.x;
+    if (point.y > maxY) maxY = point.y;
+  }
+  return { minX, minY, maxX, maxY };
+};
+
+// src/utils/outline-bounds.ts
+function calculateOutlineBounds(boardData) {
+  if (boardData.outline && boardData.outline.length >= 3) {
+    const bounds2 = getBoundsFromPoints(boardData.outline);
+    return {
+      ...bounds2,
+      width: bounds2.maxX - bounds2.minX,
+      height: bounds2.maxY - bounds2.minY,
+      centerX: (bounds2.minX + bounds2.maxX) / 2,
+      centerY: (bounds2.minY + bounds2.maxY) / 2
+    };
+  }
+  const boardWidth = boardData.width ?? 0;
+  const boardHeight = boardData.height ?? 0;
+  const boardCenterX = boardData.center?.x ?? 0;
+  const boardCenterY = boardData.center?.y ?? 0;
+  const bounds = {
+    minX: boardCenterX - boardWidth / 2,
+    maxX: boardCenterX + boardWidth / 2,
+    minY: boardCenterY - boardHeight / 2,
+    maxY: boardCenterY + boardHeight / 2
+  };
+  return {
+    ...bounds,
+    width: boardWidth,
+    height: boardHeight,
+    centerX: boardCenterX,
+    centerY: boardCenterY
+  };
+}
+
 // src/utils/copper-text-texture.ts
 function parseDimension2(value, defaultValue) {
   if (value === void 0) return defaultValue;
@@ -32516,17 +32068,17 @@ function createCopperTextTextureForLayer({
       );
     }
   });
-  const texture = new THREE21.CanvasTexture(canvas);
+  const texture = new THREE19.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE21.LinearMipmapLinearFilter;
-  texture.magFilter = THREE21.LinearFilter;
+  texture.minFilter = THREE19.LinearMipmapLinearFilter;
+  texture.magFilter = THREE19.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/panel-outline-texture.ts
-import * as THREE22 from "three";
+import * as THREE20 from "three";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 function createPanelOutlineTextureForLayer({
   layer,
@@ -32582,10 +32134,10 @@ function createPanelOutlineTextureForLayer({
       );
     }
   });
-  const texture = new THREE22.CanvasTexture(canvas);
+  const texture = new THREE20.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE22.LinearMipmapLinearFilter;
-  texture.magFilter = THREE22.LinearFilter;
+  texture.minFilter = THREE20.LinearMipmapLinearFilter;
+  texture.magFilter = THREE20.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -32593,7 +32145,7 @@ function createPanelOutlineTextureForLayer({
 
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE23 from "three";
+import * as THREE21 from "three";
 import { su as su6 } from "@tscircuit/circuit-json-util";
 
 // src/utils/units.ts
@@ -33040,10 +32592,10 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE23.CanvasTexture(canvas);
+  const texture = new THREE21.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE23.LinearMipmapLinearFilter;
-  texture.magFilter = THREE23.LinearFilter;
+  texture.minFilter = THREE21.LinearMipmapLinearFilter;
+  texture.magFilter = THREE21.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -33051,7 +32603,7 @@ function createSilkscreenTextureForLayer({
 
 // src/utils/soldermask-texture.ts
 import { su as su7 } from "@tscircuit/circuit-json-util";
-import * as THREE24 from "three";
+import * as THREE22 from "three";
 function createSoldermaskTextureForLayer({
   layer,
   circuitJson,
@@ -33616,17 +33168,17 @@ function createSoldermaskTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE22.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE22.LinearMipmapLinearFilter;
+  texture.magFilter = THREE22.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/utils/trace-texture.ts
-import * as THREE25 from "three";
+import * as THREE23 from "three";
 import { su as su8 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point) {
   return point && point.route_type === "wire" && typeof point.layer === "string" && typeof point.width === "number";
@@ -33739,15 +33291,422 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE23.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE23.LinearMipmapLinearFilter;
+  texture.magFilter = THREE23.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
+// src/textures/create-copper-pour-texture-for-layer.ts
+import * as THREE24 from "three";
+import { CircuitToCanvasDrawer } from "circuit-to-canvas";
+
+// src/geoms/brep-converter.ts
+var import_primitives7 = __toESM(require_primitives(), 1);
+var import_booleans5 = __toESM(require_booleans(), 1);
+function segmentToPoints(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)
+    ]);
+  }
+  return points;
+}
+function ringToPoints(ring, arcSegments) {
+  const allPoints = [];
+  const vertices = ring.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 = segmentToPoints(
+        [p1.x, p1.y],
+        [p2.x, p2.y],
+        p1.bulge,
+        arcSegments
+      );
+      allPoints.push(...arcPoints);
+    }
+  }
+  return allPoints;
+}
+
+// src/textures/create-copper-pour-texture-for-layer.ts
+function drawPolygon({
+  ctx,
+  points,
+  canvasXFromPcb,
+  canvasYFromPcb
+}) {
+  if (points.length < 3) return;
+  ctx.beginPath();
+  points.forEach((point, index2) => {
+    const canvasX = canvasXFromPcb(point[0]);
+    const canvasY = canvasYFromPcb(point[1]);
+    if (index2 === 0) {
+      ctx.moveTo(canvasX, canvasY);
+    } else {
+      ctx.lineTo(canvasX, canvasY);
+    }
+  });
+  ctx.closePath();
+  ctx.fill();
+}
+function drawBrepShape({
+  ctx,
+  pour,
+  canvasXFromPcb,
+  canvasYFromPcb
+}) {
+  const brepShape = pour.brep_shape;
+  if (!brepShape || !brepShape.outer_ring) return;
+  const outerRingPoints = ringToPoints(brepShape.outer_ring, 32);
+  if (outerRingPoints.length >= 3) {
+    drawPolygon({
+      ctx,
+      points: outerRingPoints,
+      canvasXFromPcb,
+      canvasYFromPcb
+    });
+  }
+  if (brepShape.inner_rings && brepShape.inner_rings.length > 0) {
+    ctx.globalCompositeOperation = "destination-out";
+    for (const innerRing of brepShape.inner_rings) {
+      const innerRingPoints = ringToPoints(innerRing, 32);
+      if (innerRingPoints.length >= 3) {
+        drawPolygon({
+          ctx,
+          points: innerRingPoints,
+          canvasXFromPcb,
+          canvasYFromPcb
+        });
+      }
+    }
+    ctx.globalCompositeOperation = "source-over";
+  }
+}
+function createCopperPourTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceTextureResolution = TRACE_TEXTURE_RESOLUTION
+}) {
+  const copperPours = circuitJson.filter(
+    (e) => e.type === "pcb_copper_pour"
+  );
+  const pcbRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
+  const poursOnLayer = copperPours.filter((p) => p.layer === layer);
+  if (poursOnLayer.length === 0) return null;
+  const boardOutlineBounds = calculateOutlineBounds(boardData);
+  const canvas = document.createElement("canvas");
+  const canvasWidth = Math.floor(
+    boardOutlineBounds.width * traceTextureResolution
+  );
+  const canvasHeight = Math.floor(
+    boardOutlineBounds.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 canvasXFromPcb = (pcbX) => (pcbX - boardOutlineBounds.minX) * traceTextureResolution;
+  const canvasYFromPcb = (pcbY) => (boardOutlineBounds.maxY - pcbY) * traceTextureResolution;
+  const rectAndPolygonPours = poursOnLayer.filter(
+    (pour) => pour.shape === "rect" || pour.shape === "polygon"
+  );
+  const brepPours = poursOnLayer.filter((pour) => pour.shape === "brep");
+  if (rectAndPolygonPours.length > 0) {
+    const drawer = new CircuitToCanvasDrawer(ctx);
+    drawer.setCameraBounds({
+      minX: boardOutlineBounds.minX,
+      maxX: boardOutlineBounds.maxX,
+      minY: boardOutlineBounds.minY,
+      maxY: boardOutlineBounds.maxY
+    });
+    const coveredPours = rectAndPolygonPours.filter(
+      (p) => p.covered_with_solder_mask !== false
+    );
+    const uncoveredPours = rectAndPolygonPours.filter(
+      (p) => p.covered_with_solder_mask === false
+    );
+    const coveredColor = `rgb(${colors.fr4TracesWithMaskGreen.map((c) => c * 255).join(",")})`;
+    const uncoveredColor = `rgb(${colors.copper.map((c) => c * 255).join(",")})`;
+    if (coveredPours.length > 0) {
+      drawer.configure({
+        colorOverrides: {
+          copper: {
+            top: coveredColor,
+            bottom: coveredColor,
+            inner1: coveredColor,
+            inner2: coveredColor,
+            inner3: coveredColor,
+            inner4: coveredColor,
+            inner5: coveredColor,
+            inner6: coveredColor
+          }
+        }
+      });
+      drawer.drawElements(coveredPours, { layers: [pcbRenderLayer] });
+    }
+    if (uncoveredPours.length > 0) {
+      drawer.configure({
+        colorOverrides: {
+          copper: {
+            top: uncoveredColor,
+            bottom: uncoveredColor,
+            inner1: uncoveredColor,
+            inner2: uncoveredColor,
+            inner3: uncoveredColor,
+            inner4: uncoveredColor,
+            inner5: uncoveredColor,
+            inner6: uncoveredColor
+          }
+        }
+      });
+      drawer.drawElements(uncoveredPours, { layers: [pcbRenderLayer] });
+    }
+  }
+  for (const pour of brepPours) {
+    const covered = pour.covered_with_solder_mask !== false;
+    const colorArr = covered ? colors.fr4TracesWithMaskGreen : colors.copper;
+    const copperColor = `rgb(${colorArr[0] * 255}, ${colorArr[1] * 255}, ${colorArr[2] * 255})`;
+    ctx.fillStyle = copperColor;
+    drawBrepShape({ ctx, pour, canvasXFromPcb, canvasYFromPcb });
+  }
+  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/textures/create-combined-board-textures.ts
+var toRgb = (colorArr) => {
+  const [r = 0, g = 0, b = 0] = colorArr;
+  return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
+    b * 255
+  )})`;
+};
+var createCombinedTexture = ({
+  textures,
+  boardData,
+  traceTextureResolution
+}) => {
+  const hasImage = textures.some((texture) => texture?.image);
+  if (!hasImage) return null;
+  const boardOutlineBounds = calculateOutlineBounds(boardData);
+  const canvasWidth = Math.floor(
+    boardOutlineBounds.width * traceTextureResolution
+  );
+  const canvasHeight = Math.floor(
+    boardOutlineBounds.height * traceTextureResolution
+  );
+  if (canvasWidth <= 0 || canvasHeight <= 0) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  textures.forEach((texture) => {
+    if (!texture?.image) return;
+    const image = texture.image;
+    ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+  });
+  const combinedTexture = new THREE25.CanvasTexture(canvas);
+  combinedTexture.generateMipmaps = true;
+  combinedTexture.minFilter = THREE25.LinearMipmapLinearFilter;
+  combinedTexture.magFilter = THREE25.LinearFilter;
+  combinedTexture.anisotropy = 16;
+  combinedTexture.needsUpdate = true;
+  return combinedTexture;
+};
+function createCombinedBoardTextures({
+  circuitJson,
+  boardData,
+  traceTextureResolution,
+  visibility
+}) {
+  const soldermaskColor = toRgb(
+    soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen
+  );
+  const traceColorWithMask = toRgb(colors.fr4TracesWithMaskGreen);
+  const traceColorWithoutMask = toRgb(colors.fr4TracesWithoutMaskTan);
+  const silkscreenColor = "rgb(255,255,255)";
+  const copperColor = toRgb(colors.copper);
+  const showBoardBody = visibility?.boardBody ?? true;
+  const buildForLayer = (layer) => {
+    const showMask = (layer === "top" ? visibility?.topMask : visibility?.bottomMask) ?? true;
+    const showCopper = (layer === "top" ? visibility?.topCopper : visibility?.bottomCopper) ?? true;
+    const showSilkscreen = (layer === "top" ? visibility?.topSilkscreen : visibility?.bottomSilkscreen) ?? true;
+    const soldermaskTexture = showMask ? createSoldermaskTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      soldermaskColor,
+      traceTextureResolution
+    }) : null;
+    const traceTexture = showCopper ? createTraceTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      traceColor: showMask ? traceColorWithMask : traceColorWithoutMask,
+      traceTextureResolution
+    }) : null;
+    const copperTextTexture = showCopper ? createCopperTextTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      copperColor,
+      traceTextureResolution
+    }) : null;
+    const copperPourTexture = showCopper ? createCopperPourTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      traceTextureResolution
+    }) : null;
+    const silkscreenTexture = showSilkscreen ? createSilkscreenTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      silkscreenColor,
+      traceTextureResolution
+    }) : null;
+    const panelOutlineTexture = showBoardBody ? createPanelOutlineTextureForLayer({
+      layer,
+      circuitJson,
+      panelData: boardData,
+      traceTextureResolution
+    }) : null;
+    return createCombinedTexture({
+      textures: [
+        soldermaskTexture,
+        copperPourTexture,
+        traceTexture,
+        copperTextTexture,
+        silkscreenTexture,
+        panelOutlineTexture
+      ],
+      boardData,
+      traceTextureResolution
+    });
+  };
+  return {
+    topBoard: buildForLayer("top"),
+    bottomBoard: buildForLayer("bottom")
+  };
+}
+
+// src/textures/create-three-texture-meshes.ts
+import * as THREE26 from "three";
+function createTexturePlane(config, boardData) {
+  const {
+    texture,
+    yOffset,
+    isBottomLayer,
+    usePolygonOffset = false,
+    renderOrder = 0,
+    isFaux = false
+  } = config;
+  if (!texture) return null;
+  const boardOutlineBounds = calculateOutlineBounds(boardData);
+  const planeGeom = new THREE26.PlaneGeometry(
+    boardOutlineBounds.width,
+    boardOutlineBounds.height
+  );
+  const material = new THREE26.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    side: THREE26.DoubleSide,
+    depthWrite: false,
+    polygonOffset: usePolygonOffset,
+    polygonOffsetFactor: usePolygonOffset ? -4 : 0,
+    // Increased for better z-fighting prevention
+    polygonOffsetUnits: usePolygonOffset ? -4 : 0,
+    opacity: isFaux ? FAUX_BOARD_OPACITY : 1
+  });
+  const mesh = new THREE26.Mesh(planeGeom, material);
+  mesh.position.set(
+    boardOutlineBounds.centerX,
+    boardOutlineBounds.centerY,
+    yOffset
+  );
+  if (isBottomLayer) {
+    mesh.rotation.set(Math.PI, 0, 0);
+  }
+  mesh.name = `${isBottomLayer ? "bottom" : "top"}-board-texture-plane`;
+  mesh.renderOrder = renderOrder;
+  return mesh;
+}
+function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false) {
+  const meshes = [];
+  if (!textures || !boardData || pcbThickness === null) return meshes;
+  const topBoardMesh = createTexturePlane(
+    {
+      texture: textures.topBoard,
+      yOffset: pcbThickness / 2 + 1e-3,
+      isBottomLayer: false,
+      usePolygonOffset: true,
+      renderOrder: 1,
+      isFaux
+    },
+    boardData
+  );
+  if (topBoardMesh) meshes.push(topBoardMesh);
+  const bottomBoardMesh = createTexturePlane(
+    {
+      texture: textures.bottomBoard,
+      yOffset: -pcbThickness / 2 - 1e-3,
+      isBottomLayer: true,
+      usePolygonOffset: true,
+      renderOrder: 1,
+      isFaux
+    },
+    boardData
+  );
+  if (bottomBoardMesh) meshes.push(bottomBoardMesh);
+  return meshes;
+}
+
+// src/three-components/JscadBoardTextures.tsx
+import * as THREE27 from "three";
+
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
 var DEFAULT_MAX_TEXTURE_DIMENSION = 4096;
@@ -33815,114 +33774,57 @@ function JscadBoardTextures({
   }, [boardData]);
   const textures = useMemo19(() => {
     if (!boardData || !boardData.width || !boardData.height) return null;
-    const soldermaskColorArr = soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen;
-    const soldermaskColor = `rgb(${Math.round(soldermaskColorArr[0] * 255)}, ${Math.round(soldermaskColorArr[1] * 255)}, ${Math.round(soldermaskColorArr[2] * 255)})`;
-    const silkscreenColor = "rgb(255,255,255)";
-    const traceColorWithMaskArr = colors.fr4TracesWithMaskGreen;
-    const traceColorWithMask = `rgb(${Math.round(traceColorWithMaskArr[0] * 255)}, ${Math.round(traceColorWithMaskArr[1] * 255)}, ${Math.round(traceColorWithMaskArr[2] * 255)})`;
-    return {
-      topSoldermask: createSoldermaskTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        soldermaskColor,
-        traceTextureResolution
-      }),
-      bottomSoldermask: createSoldermaskTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        soldermaskColor,
-        traceTextureResolution
-      }),
-      topSilkscreen: createSilkscreenTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        silkscreenColor,
-        traceTextureResolution
-      }),
-      bottomSilkscreen: createSilkscreenTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        silkscreenColor,
-        traceTextureResolution
-      }),
-      topTraceWithMask: createTraceTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithMask,
-        traceTextureResolution
-      }),
-      bottomTraceWithMask: createTraceTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithMask,
-        traceTextureResolution
-      }),
-      topCopperText: createCopperTextTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        copperColor: `rgb(${Math.round(colors.copper[0] * 255)}, ${Math.round(colors.copper[1] * 255)}, ${Math.round(colors.copper[2] * 255)})`,
-        traceTextureResolution
-      }),
-      bottomCopperText: createCopperTextTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        copperColor: `rgb(${Math.round(colors.copper[0] * 255)}, ${Math.round(colors.copper[1] * 255)}, ${Math.round(colors.copper[2] * 255)})`,
-        traceTextureResolution
-      }),
-      topPanelOutlines: createPanelOutlineTextureForLayer({
-        layer: "top",
-        circuitJson,
-        panelData: boardData,
-        traceTextureResolution
-      }),
-      bottomPanelOutlines: createPanelOutlineTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        panelData: boardData,
-        traceTextureResolution
-      }),
-      topCopper: createCopperPourTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        traceTextureResolution
-      }),
-      bottomCopper: createCopperPourTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        traceTextureResolution
-      })
-    };
-  }, [circuitJson, boardData, traceTextureResolution]);
+    return createCombinedBoardTextures({
+      circuitJson,
+      boardData,
+      traceTextureResolution,
+      visibility
+    });
+  }, [circuitJson, boardData, traceTextureResolution, visibility]);
   useEffect23(() => {
     if (!rootObject || !boardData || !textures) return;
     const meshes = [];
+    const disposeTextureMaterial = (material) => {
+      const textureProps = [
+        "map",
+        "alphaMap",
+        "aoMap",
+        "bumpMap",
+        "displacementMap",
+        "emissiveMap",
+        "lightMap",
+        "metalnessMap",
+        "normalMap",
+        "roughnessMap",
+        "specularMap"
+      ];
+      const typedMaterial = material;
+      for (const prop of textureProps) {
+        const texture = typedMaterial[prop];
+        if (texture && texture instanceof THREE27.Texture) {
+          texture.dispose();
+          typedMaterial[prop] = null;
+        }
+      }
+      material.dispose();
+    };
     const createTexturePlane2 = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = false) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE26.PlaneGeometry(
+      const planeGeom = new THREE27.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      const material = new THREE26.MeshBasicMaterial({
+      const material = new THREE27.MeshBasicMaterial({
         map: texture,
         transparent: true,
-        side: THREE26.DoubleSide,
+        side: THREE27.DoubleSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetUnits: usePolygonOffset ? -0.8 : 0,
         opacity: isFaux ? FAUX_BOARD_OPACITY : 1
       });
-      const mesh = new THREE26.Mesh(planeGeom, material);
+      const mesh = new THREE27.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -33935,159 +33837,27 @@ function JscadBoardTextures({
       return mesh;
     };
     const SURFACE_OFFSET = 1e-3;
-    if (visibility.topMask) {
-      const topSoldermaskMesh = createTexturePlane2(
-        textures.topSoldermask,
-        pcbThickness / 2 + SURFACE_OFFSET,
-        false,
-        "jscad-top-soldermask",
-        true
-      );
-      if (topSoldermaskMesh) {
-        meshes.push(topSoldermaskMesh);
-        rootObject.add(topSoldermaskMesh);
-      }
-    }
-    if (visibility.bottomMask) {
-      const bottomSoldermaskMesh = createTexturePlane2(
-        textures.bottomSoldermask,
-        -pcbThickness / 2 - SURFACE_OFFSET,
-        true,
-        "jscad-bottom-soldermask",
-        true
-      );
-      if (bottomSoldermaskMesh) {
-        meshes.push(bottomSoldermaskMesh);
-        rootObject.add(bottomSoldermaskMesh);
-      }
-    }
-    if (visibility.topCopper && visibility.topMask) {
-      const topTraceWithMaskMesh = createTexturePlane2(
-        textures.topTraceWithMask,
-        pcbThickness / 2 + BOARD_SURFACE_OFFSET.traces + 4e-3,
-        false,
-        "jscad-top-trace-with-mask"
-      );
-      if (topTraceWithMaskMesh) {
-        meshes.push(topTraceWithMaskMesh);
-        rootObject.add(topTraceWithMaskMesh);
-      }
-    }
-    if (visibility.bottomCopper && visibility.bottomMask) {
-      const bottomTraceWithMaskMesh = createTexturePlane2(
-        textures.bottomTraceWithMask,
-        -pcbThickness / 2 - BOARD_SURFACE_OFFSET.traces - 5e-3,
-        true,
-        "jscad-bottom-trace-with-mask"
-      );
-      if (bottomTraceWithMaskMesh) {
-        meshes.push(bottomTraceWithMaskMesh);
-        rootObject.add(bottomTraceWithMaskMesh);
-      }
-    }
-    if (visibility.topSilkscreen) {
-      const topSilkscreenMesh = createTexturePlane2(
-        textures.topSilkscreen,
-        pcbThickness / 2 + SURFACE_OFFSET + 2e-3,
-        false,
-        "jscad-top-silkscreen"
-      );
-      if (topSilkscreenMesh) {
-        meshes.push(topSilkscreenMesh);
-        rootObject.add(topSilkscreenMesh);
-      }
-    }
-    if (visibility.bottomSilkscreen) {
-      const bottomSilkscreenMesh = createTexturePlane2(
-        textures.bottomSilkscreen,
-        -pcbThickness / 2 - SURFACE_OFFSET - 2e-3,
-        true,
-        "jscad-bottom-silkscreen"
-      );
-      if (bottomSilkscreenMesh) {
-        meshes.push(bottomSilkscreenMesh);
-        rootObject.add(bottomSilkscreenMesh);
-      }
-    }
-    if (visibility.topCopper) {
-      const topCopperTextMesh = createTexturePlane2(
-        textures.topCopperText,
-        pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper,
-        false,
-        "jscad-top-copper-text",
-        true
-      );
-      if (topCopperTextMesh) {
-        meshes.push(topCopperTextMesh);
-        rootObject.add(topCopperTextMesh);
-      }
-    }
-    if (visibility.bottomCopper) {
-      const bottomCopperTextMesh = createTexturePlane2(
-        textures.bottomCopperText,
-        -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper,
-        true,
-        "jscad-bottom-copper-text",
-        true
-      );
-      if (bottomCopperTextMesh) {
-        meshes.push(bottomCopperTextMesh);
-        rootObject.add(bottomCopperTextMesh);
-      }
-    }
-    if (visibility.topCopper) {
-      const topCopperMesh = createTexturePlane2(
-        textures.topCopper,
-        pcbThickness / 2 + BOARD_SURFACE_OFFSET.copper,
-        false,
-        "jscad-top-copper-pour",
-        true
-      );
-      if (topCopperMesh) {
-        meshes.push(topCopperMesh);
-        rootObject.add(topCopperMesh);
-      }
-    }
-    if (visibility.bottomCopper) {
-      const bottomCopperMesh = createTexturePlane2(
-        textures.bottomCopper,
-        -pcbThickness / 2 - BOARD_SURFACE_OFFSET.copper,
-        true,
-        "jscad-bottom-copper-pour",
-        true
-      );
-      if (bottomCopperMesh) {
-        meshes.push(bottomCopperMesh);
-        rootObject.add(bottomCopperMesh);
-      }
-    }
-    if (visibility.boardBody) {
-      const topPanelOutlinesMesh = createTexturePlane2(
-        textures.topPanelOutlines,
-        pcbThickness / 2 + SURFACE_OFFSET + 3e-3,
-        // Above silkscreen
-        false,
-        "jscad-top-panel-outlines",
-        false,
-        true
-      );
-      if (topPanelOutlinesMesh) {
-        meshes.push(topPanelOutlinesMesh);
-        rootObject.add(topPanelOutlinesMesh);
-      }
-      const bottomPanelOutlinesMesh = createTexturePlane2(
-        textures.bottomPanelOutlines,
-        -pcbThickness / 2 - SURFACE_OFFSET - 3e-3,
-        // Below bottom silkscreen
-        true,
-        "jscad-bottom-panel-outlines",
-        false,
-        true
-      );
-      if (bottomPanelOutlinesMesh) {
-        meshes.push(bottomPanelOutlinesMesh);
-        rootObject.add(bottomPanelOutlinesMesh);
-      }
+    const topBoardMesh = createTexturePlane2(
+      textures.topBoard,
+      pcbThickness / 2 + SURFACE_OFFSET,
+      false,
+      "jscad-top-board-texture",
+      true
+    );
+    if (topBoardMesh) {
+      meshes.push(topBoardMesh);
+      rootObject.add(topBoardMesh);
+    }
+    const bottomBoardMesh = createTexturePlane2(
+      textures.bottomBoard,
+      -pcbThickness / 2 - SURFACE_OFFSET,
+      true,
+      "jscad-bottom-board-texture",
+      true
+    );
+    if (bottomBoardMesh) {
+      meshes.push(bottomBoardMesh);
+      rootObject.add(bottomBoardMesh);
     }
     return () => {
       meshes.forEach((mesh) => {
@@ -34095,12 +33865,16 @@ function JscadBoardTextures({
           rootObject.remove(mesh);
         }
         mesh.geometry.dispose();
-        if (mesh.material instanceof THREE26.Material) {
-          mesh.material.dispose();
+        if (Array.isArray(mesh.material)) {
+          mesh.material.forEach((material) => disposeTextureMaterial(material));
+        } else if (mesh.material instanceof THREE27.Material) {
+          disposeTextureMaterial(mesh.material);
         }
       });
+      textures.topBoard?.dispose();
+      textures.bottomBoard?.dispose();
     };
-  }, [rootObject, boardData, textures, pcbThickness, visibility]);
+  }, [rootObject, boardData, textures, pcbThickness]);
   return null;
 }
 
@@ -34326,11 +34100,12 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 import { su as su19 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect25, useMemo as useMemo22, useState as useState16 } from "react";
+import * as THREE35 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState15, useEffect as useEffect24, useMemo as useMemo21, useRef as useRef9 } from "react";
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE31 from "three";
+import * as THREE32 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -34705,17 +34480,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE27.BufferGeometry();
+  const geometry = new THREE28.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE27.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE28.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE27.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE28.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];
@@ -34749,7 +34524,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE28.Color(...colors.copper);
+var COPPER_COLOR = new THREE29.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
@@ -35455,8 +35230,8 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-smt-pads.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import * as THREE29 from "three";
-var COPPER_COLOR2 = new THREE29.Color(...colors.copper);
+import * as THREE30 from "three";
+var COPPER_COLOR2 = new THREE30.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion, boardClipVolume) {
   const smtPadGeoms = [];
   const smtPads = su16(circuitJson).pcb_smtpad.list();
@@ -35495,7 +35270,7 @@ function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifold
 
 // src/utils/manifold/process-vias.ts
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import * as THREE30 from "three";
+import * as THREE31 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -35548,7 +35323,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR3 = new THREE30.Color(...colors.copper);
+var COPPER_COLOR3 = new THREE31.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su17(circuitJson).pcb_via.list();
@@ -35600,9 +35375,8 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 }
 
 // src/hooks/useManifoldBoardBuilder.ts
-var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
+var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
   const [geoms, setGeoms] = useState15(null);
-  const [textures, setTextures] = useState15(null);
   const [pcbThickness, setPcbThickness] = useState15(null);
   const [error, setError] = useState15(null);
   const [isLoading, setIsLoading] = useState15(true);
@@ -35642,14 +35416,12 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   useEffect24(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
-      setTextures(null);
       setPcbThickness(null);
       setIsLoading(false);
       return;
     }
     if ((boardData.width === 0 || !boardData.width) && (boardData.height === 0 || !boardData.height) && (!boardData.outline || boardData.outline.length < 3)) {
       setGeoms({ platedHoles: [], smtPads: [], vias: [] });
-      setTextures({});
       setPcbThickness(boardData.thickness ?? 0);
       setIsLoading(false);
       return;
@@ -35672,7 +35444,6 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
     manifoldInstancesForCleanup.current = [];
     let boardManifold = null;
     const currentGeoms = {};
-    const layerTextureMap = {};
     try {
       const currentPcbThickness = boardData.thickness || 1.4;
       setPcbThickness(currentPcbThickness);
@@ -35772,7 +35543,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE31.Color(
+              color: new THREE32.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -35802,7 +35573,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE31.Color(
+          color: new THREE32.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -35821,117 +35592,12 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       );
       currentGeoms.smtPads = smtPadGeoms;
       setGeoms(currentGeoms);
-      const traceColorWithoutMaskArr = colors.fr4TracesWithoutMaskTan;
-      const traceColorWithoutMask = `rgb(${Math.round(traceColorWithoutMaskArr[0] * 255)}, ${Math.round(traceColorWithoutMaskArr[1] * 255)}, ${Math.round(traceColorWithoutMaskArr[2] * 255)})`;
-      layerTextureMap.topTrace = createTraceTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithoutMask,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomTrace = createTraceTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithoutMask,
-        traceTextureResolution
-      });
-      const traceColorWithMaskArr = colors.fr4TracesWithMaskGreen;
-      const traceColorWithMask = `rgb(${Math.round(traceColorWithMaskArr[0] * 255)}, ${Math.round(traceColorWithMaskArr[1] * 255)}, ${Math.round(traceColorWithMaskArr[2] * 255)})`;
-      layerTextureMap.topTraceWithMask = createTraceTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithMask,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomTraceWithMask = createTraceTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        traceColor: traceColorWithMask,
-        traceTextureResolution
-      });
-      const silkscreenColor = "rgb(255,255,255)";
-      layerTextureMap.topSilkscreen = createSilkscreenTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        silkscreenColor,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomSilkscreen = createSilkscreenTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        silkscreenColor,
-        traceTextureResolution
-      });
-      const soldermaskColorArr = soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen;
-      const soldermaskColor = `rgb(${Math.round(soldermaskColorArr[0] * 255)}, ${Math.round(soldermaskColorArr[1] * 255)}, ${Math.round(soldermaskColorArr[2] * 255)})`;
-      layerTextureMap.topSoldermask = createSoldermaskTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        soldermaskColor,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomSoldermask = createSoldermaskTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        soldermaskColor,
-        traceTextureResolution
-      });
-      const copperColorArr = colors.copper;
-      const copperColor = `rgb(${Math.round(copperColorArr[0] * 255)}, ${Math.round(copperColorArr[1] * 255)}, ${Math.round(copperColorArr[2] * 255)})`;
-      layerTextureMap.topCopperText = createCopperTextTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        copperColor,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomCopperText = createCopperTextTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        copperColor,
-        traceTextureResolution
-      });
-      layerTextureMap.topPanelOutlines = createPanelOutlineTextureForLayer({
-        layer: "top",
-        circuitJson,
-        panelData: boardData,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomPanelOutlines = createPanelOutlineTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        panelData: boardData,
-        traceTextureResolution
-      });
-      layerTextureMap.topCopper = createCopperPourTextureForLayer({
-        layer: "top",
-        circuitJson,
-        boardData,
-        traceTextureResolution
-      });
-      layerTextureMap.bottomCopper = createCopperPourTextureForLayer({
-        layer: "bottom",
-        circuitJson,
-        boardData,
-        traceTextureResolution
-      });
-      setTextures(layerTextureMap);
     } catch (e) {
       console.error("Error processing geometry with Manifold in hook:", e);
       setError(
         e.message || "An unknown error occurred while processing geometry in hook."
       );
       setGeoms(null);
-      setTextures(null);
     } finally {
       setIsLoading(false);
     }
@@ -35939,7 +35605,16 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       manifoldInstancesForCleanup.current.forEach(safeDelete);
       manifoldInstancesForCleanup.current = [];
     };
-  }, [manifoldJSModule, circuitJson, boardData, traceTextureResolution]);
+  }, [manifoldJSModule, circuitJson, boardData]);
+  const textures = useMemo21(() => {
+    if (!boardData || !traceTextureResolution) return null;
+    return createCombinedBoardTextures({
+      circuitJson,
+      boardData,
+      traceTextureResolution,
+      visibility
+    });
+  }, [circuitJson, boardData, traceTextureResolution, visibility]);
   return {
     geoms,
     textures,
@@ -35952,11 +35627,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE33 from "three";
+import * as THREE34 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE32 from "three";
-var DEFAULT_SIDE = THREE32.DoubleSide;
+import * as THREE33 from "three";
+var DEFAULT_SIDE = THREE33.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -35964,7 +35639,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE32.MeshPhysicalMaterial({
+    return new THREE33.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -35978,7 +35653,7 @@ var createBoardMaterial = ({
       flatShading: true
     });
   }
-  return new THREE32.MeshStandardMaterial({
+  return new THREE33.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -35994,12 +35669,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE33.Mesh(
+    const mesh = new THREE34.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE33.DoubleSide,
+        side: THREE34.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -36009,11 +35684,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE33.Mesh(
+        const mesh = new THREE34.Mesh(
           comp.geometry,
-          new THREE33.MeshStandardMaterial({
+          new THREE34.MeshStandardMaterial({
             color: comp.color,
-            side: THREE33.DoubleSide,
+            side: THREE34.DoubleSide,
             flatShading: true,
             // Consistent with board
             polygonOffset: true,
@@ -36040,6 +35715,35 @@ var BoardMeshes = ({
 }) => {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
+  const disposeTextureMesh = (mesh) => {
+    mesh.geometry.dispose();
+    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+    for (const material of materials) {
+      if (!material) continue;
+      const textureProps = [
+        "map",
+        "alphaMap",
+        "aoMap",
+        "bumpMap",
+        "displacementMap",
+        "emissiveMap",
+        "lightMap",
+        "metalnessMap",
+        "normalMap",
+        "roughnessMap",
+        "specularMap"
+      ];
+      const typedMaterial = material;
+      for (const prop of textureProps) {
+        const texture = typedMaterial[prop];
+        if (texture && texture instanceof THREE35.Texture) {
+          texture.dispose();
+          typedMaterial[prop] = null;
+        }
+      }
+      material.dispose();
+    }
+  };
   useEffect25(() => {
     if (!rootObject) return;
     geometryMeshes.forEach((mesh) => {
@@ -36062,37 +35766,7 @@ var BoardMeshes = ({
       }
     });
     textureMeshes.forEach((mesh) => {
-      let shouldShow = true;
-      if (mesh.name.includes("top-trace-texture-plane") && !mesh.name.includes("with-mask")) {
-        shouldShow = visibility.topCopper && !visibility.topMask;
-      } else if (mesh.name.includes("top-trace-with-mask")) {
-        shouldShow = visibility.topCopper && visibility.topMask;
-      } else if (mesh.name.includes("bottom-trace-texture-plane") && !mesh.name.includes("with-mask")) {
-        shouldShow = visibility.bottomCopper && !visibility.bottomMask;
-      } else if (mesh.name.includes("bottom-trace-with-mask")) {
-        shouldShow = visibility.bottomCopper && visibility.bottomMask;
-      } else if (mesh.name.includes("top-silkscreen")) {
-        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;
-      } else if (mesh.name.includes("top-copper-text")) {
-        shouldShow = visibility.topCopper;
-      } else if (mesh.name.includes("bottom-copper-text")) {
-        shouldShow = visibility.bottomCopper;
-      } else if (mesh.name.includes("top-copper")) {
-        shouldShow = visibility.topCopper;
-      } else if (mesh.name.includes("bottom-copper")) {
-        shouldShow = visibility.bottomCopper;
-      } else if (mesh.name.includes("panel-outlines")) {
-        shouldShow = visibility.boardBody;
-      }
-      if (shouldShow) {
-        rootObject.add(mesh);
-      }
+      rootObject.add(mesh);
     });
     return () => {
       geometryMeshes.forEach((mesh) => {
@@ -36104,6 +35778,7 @@ var BoardMeshes = ({
         if (mesh.parent === rootObject) {
           rootObject.remove(mesh);
         }
+        disposeTextureMesh(mesh);
       });
     };
   }, [rootObject, geometryMeshes, textureMeshes, visibility]);
@@ -36126,6 +35801,7 @@ var CadViewerManifold = ({
   }, [circuitJsonProp, childrenCircuitJson]);
   const [manifoldJSModule, setManifoldJSModule] = useState16(null);
   const [manifoldLoadingError, setManifoldLoadingError] = useState16(null);
+  const { visibility } = useLayerVisibility();
   useEffect25(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
@@ -36196,7 +35872,7 @@ try {
     isLoading: builderIsLoading,
     boardData,
     isFauxBoard
-  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
+  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility);
   const geometryMeshes = useMemo22(() => createGeometryMeshes(geoms), [geoms]);
   const textureMeshes = useMemo22(
     () => createTextureMeshes(textures, boardData, pcbThickness, isFauxBoard),
@@ -42951,7 +42627,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/CadViewer.tsx
 import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE34.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE36.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState36("manifold");
@@ -43218,11 +42894,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su20 } from "@tscircuit/circuit-json-util";
-import * as THREE38 from "three";
+import * as THREE40 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE35 from "three";
+import * as THREE37 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -43236,12 +42912,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE35.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE35.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE35.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE35.Vector3().crossVectors(
-        new THREE35.Vector3().subVectors(v2, v1),
-        new THREE35.Vector3().subVectors(v3, v1)
+      const v1 = new THREE37.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE37.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE37.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE37.Vector3().crossVectors(
+        new THREE37.Vector3().subVectors(v2, v1),
+        new THREE37.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -43265,10 +42941,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 THREE37 from "three";
+import * as THREE39 from "three";
 
 // src/utils/load-model.ts
-import * as THREE36 from "three";
+import * as THREE38 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";
@@ -43276,12 +42952,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE36.MeshStandardMaterial({
+    const material = new THREE38.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE36.Mesh(geometry, material);
+    return new THREE38.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -43314,9 +42990,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -43330,13 +43006,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE37.MeshStandardMaterial({
+      const material2 = new THREE39.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE37.DoubleSide
+        side: THREE39.DoubleSide
       });
-      const mesh2 = new THREE37.Mesh(threeGeom, material2);
+      const mesh2 = new THREE39.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -43346,9 +43022,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -43365,17 +43041,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE37.Color(geomInfo.color);
+      const color = new THREE39.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE37.MeshStandardMaterial({
+      const material2 = new THREE39.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE37.DoubleSide
+        side: THREE39.DoubleSide
       });
-      const mesh2 = new THREE37.Mesh(threeGeom, material2);
+      const mesh2 = new THREE39.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -43385,22 +43061,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE37.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE37.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE37.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE37.MeshStandardMaterial({
+  const geometry = new THREE39.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE39.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE37.Mesh(geometry, material);
+  const mesh = new THREE39.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -43421,11 +43097,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE38.Scene();
+  const scene = new THREE40.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE38.Color(backgroundColor), 1);
-  const camera = new THREE38.OrthographicCamera();
+  renderer.setClearColor(new THREE40.Color(backgroundColor), 1);
+  const camera = new THREE40.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -43439,11 +43115,11 @@ 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 THREE38.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE40.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE38.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE40.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE38.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE40.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su20(circuitJson).cad_component.list();
@@ -43454,7 +43130,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE38.Color(
+    const baseColor = new THREE40.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -43466,28 +43142,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE38.DoubleSide
+        side: THREE40.DoubleSide
       });
-      const mesh = new THREE38.Mesh(geometry, material);
+      const mesh = new THREE40.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE38.Color(8947848);
-  const gridHelper = new THREE38.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE40.Color(8947848);
+  const gridHelper = new THREE40.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 THREE38.LineBasicMaterial) {
+    if (mat instanceof THREE40.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE38.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE38.Vector3());
-  const size4 = box.getSize(new THREE38.Vector3());
+  const box = new THREE40.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE40.Vector3());
+  const size4 = box.getSize(new THREE40.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {