@tscircuit/3d-viewer 0.0.519 → 0.0.521

package/dist/index.js

@@ -9928,7 +9928,7 @@ var require_vectorText = __commonJS({
       }
       return line;
     };
-    var vectorText3 = (options, text) => {
+    var vectorText2 = (options, text) => {
       const {
         xOffset,
         yOffset,
@@ -9985,7 +9985,7 @@ var require_vectorText = __commonJS({
       }
       return output;
     };
-    module.exports = vectorText3;
+    module.exports = vectorText2;
   }
 });
 
@@ -14248,7 +14248,7 @@ import { useState as useState36, useCallback as useCallback21, useRef as useRef2
 import * as THREE36 from "three";
 
 // src/CadViewerJscad.tsx
-import { su as su12 } from "@tscircuit/circuit-json-util";
+import { su as su11 } from "@tscircuit/circuit-json-util";
 import { forwardRef as forwardRef3, useMemo as useMemo20 } from "react";
 
 // src/AnyCadComponent.tsx
@@ -28483,7 +28483,7 @@ import * as THREE16 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.518",
+  version: "0.0.520",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28513,7 +28513,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.372",
-    "circuit-to-canvas": "^0.0.80",
+    "circuit-to-canvas": "^0.0.81",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -31448,7 +31448,7 @@ var ThreeErrorBoundary = class extends React11.Component {
 };
 
 // src/three-components/JscadBoardTextures.tsx
-import { su as su9 } from "@tscircuit/circuit-json-util";
+import { su as su8 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect23, useMemo as useMemo19 } from "react";
 
 // src/textures/create-combined-board-textures.ts
@@ -32166,467 +32166,9 @@ function createPanelOutlineTextureForLayer({
   return texture;
 }
 
-// src/utils/silkscreen-texture.ts
-var import_text2 = __toESM(require_text(), 1);
+// src/utils/trace-texture.ts
 import * as THREE22 from "three";
 import { su as su7 } from "@tscircuit/circuit-json-util";
-
-// src/utils/units.ts
-var MM_PER_INCH = 25.4;
-var MM_PER_MIL = MM_PER_INCH / 1e3;
-var dimensionRegex = /^\s*(-?\d*(?:\.\d+)?)(?:\s*(mm|mil|inch|in|"))?\s*$/i;
-function normalizeUnit(unit) {
-  if (!unit) return void 0;
-  const normalized = unit.trim().toLowerCase();
-  if (normalized === '"') return "in";
-  if (normalized === "inch") return "in";
-  return normalized;
-}
-function parseDimensionToMm(value) {
-  if (value === null || value === void 0) return void 0;
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : void 0;
-  }
-  if (typeof value !== "string") return void 0;
-  const trimmed = value.trim();
-  if (trimmed.length === 0) return void 0;
-  const match = trimmed.match(dimensionRegex);
-  if (!match) {
-    const numeric = Number.parseFloat(trimmed);
-    return Number.isFinite(numeric) ? numeric : void 0;
-  }
-  const [, magnitudeRaw, unitRaw] = match;
-  const magnitude = Number.parseFloat(magnitudeRaw || "0");
-  if (!Number.isFinite(magnitude)) return void 0;
-  const unit = normalizeUnit(unitRaw);
-  switch (unit) {
-    case "mil":
-      return magnitude * MM_PER_MIL;
-    case "in":
-      return magnitude * MM_PER_INCH;
-    case "mm":
-    case void 0:
-      return magnitude;
-    default:
-      return magnitude;
-  }
-}
-function coerceDimensionToMm(value, fallback) {
-  const parsed = parseDimensionToMm(value);
-  return parsed === void 0 ? fallback : parsed;
-}
-
-// src/utils/silkscreen-texture.ts
-function parseFabricationNoteColor(colorString) {
-  let hex = colorString;
-  if (hex.startsWith("#")) {
-    hex = hex.slice(1);
-  }
-  if (hex.length === 6) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-  if (colorString.startsWith("rgb")) {
-    return colorString;
-  }
-  return "rgb(255, 243, 204)";
-}
-function createSilkscreenTextureForLayer({
-  layer,
-  circuitJson,
-  boardData,
-  silkscreenColor = "rgb(255,255,255)",
-  traceTextureResolution
-}) {
-  const pcbSilkscreenTexts = su7(circuitJson).pcb_silkscreen_text.list();
-  const pcbSilkscreenPaths = su7(circuitJson).pcb_silkscreen_path.list();
-  const pcbSilkscreenLines = su7(circuitJson).pcb_silkscreen_line.list();
-  const pcbSilkscreenRects = su7(circuitJson).pcb_silkscreen_rect.list();
-  const pcbSilkscreenCircles = su7(circuitJson).pcb_silkscreen_circle.list();
-  const pcbFabricationNoteRects = su7(circuitJson).pcb_fabrication_note_rect.list();
-  const pcbNoteLines = su7(circuitJson).pcb_note_line.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);
-  const fabricationNoteRectsOnLayer = pcbFabricationNoteRects.filter(
-    (r) => r.layer === layer
-  );
-  const noteLinesOnLayer = pcbNoteLines.filter(
-    (l) => l.layer === layer
-  );
-  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0 && linesOnLayer.length === 0 && rectsOnLayer.length === 0 && circlesOnLayer.length === 0 && fabricationNoteRectsOnLayer.length === 0 && noteLinesOnLayer.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);
-  }
-  ctx.strokeStyle = silkscreenColor;
-  ctx.fillStyle = silkscreenColor;
-  const canvasXFromPcb = (pcbX) => (pcbX - boardOutlineBounds.minX) * traceTextureResolution;
-  const canvasYFromPcb = (pcbY) => (boardOutlineBounds.maxY - pcbY) * 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();
-  });
-  noteLinesOnLayer.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.save();
-    let strokeColor = silkscreenColor;
-    if (lineEl.color) {
-      strokeColor = parseFabricationNoteColor(lineEl.color);
-    } else {
-      strokeColor = "rgb(255, 243, 204)";
-    }
-    ctx.strokeStyle = strokeColor;
-    ctx.beginPath();
-    ctx.lineWidth = coerceDimensionToMm(lineEl.stroke_width, 0.1) * traceTextureResolution;
-    ctx.lineCap = "round";
-    const isDashed = lineEl.is_dashed ?? false;
-    if (isDashed) {
-      const dashLength = Math.max(ctx.lineWidth * 2, 1);
-      ctx.setLineDash([dashLength, dashLength]);
-    }
-    ctx.moveTo(canvasXFromPcb(startXmm), canvasYFromPcb(startYmm));
-    ctx.lineTo(canvasXFromPcb(endXmm), canvasYFromPcb(endYmm));
-    ctx.stroke();
-    if (isDashed) {
-      ctx.setLineDash([]);
-    }
-    ctx.restore();
-  });
-  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((point, index2) => {
-      const canvasX = canvasXFromPcb(parseDimensionToMm(point.x) ?? 0);
-      const canvasY = canvasYFromPcb(parseDimensionToMm(point.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.stroke_width ?? 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();
-  });
-  fabricationNoteRectsOnLayer.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;
-    let fillColor = silkscreenColor;
-    let strokeColor = silkscreenColor;
-    if (rect.color) {
-      const parsedColor = parseFabricationNoteColor(rect.color);
-      fillColor = parsedColor;
-      strokeColor = parsedColor;
-    } else {
-      fillColor = "rgb(255, 243, 204)";
-      strokeColor = "rgb(255, 243, 204)";
-    }
-    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.fillStyle = fillColor;
-      ctx.fill();
-    }
-    if (hasStroke && strokeWidthPx > 0) {
-      ctx.strokeStyle = strokeColor;
-      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(
-        translate6(textCenterX, textCenterY),
-        { a: -1, b: 0, c: 0, d: 1, e: 0, f: 0 },
-        translate6(-textCenterX, -textCenterY)
-      );
-      rotationDeg = -rotationDeg;
-    }
-    if (rotationDeg) {
-      const rad = rotationDeg * Math.PI / 180;
-      transformMatrices.push(
-        translate6(textCenterX, textCenterY),
-        rotate2(rad),
-        translate6(-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 THREE22.CanvasTexture(canvas);
-  texture.generateMipmaps = true;
-  texture.minFilter = THREE22.LinearMipmapLinearFilter;
-  texture.magFilter = THREE22.LinearFilter;
-  texture.anisotropy = 16;
-  texture.needsUpdate = true;
-  return texture;
-}
-
-// src/utils/trace-texture.ts
-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";
 }
@@ -32637,9 +32179,9 @@ function createTraceTextureForLayer({
   traceColor,
   traceTextureResolution
 }) {
-  const pcbTraces = su8(circuitJson).pcb_trace.list();
-  const allPcbVias = su8(circuitJson).pcb_via.list();
-  const allPcbPlatedHoles = su8(
+  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(
@@ -32738,17 +32280,17 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE23.CanvasTexture(canvas);
+  const texture = new THREE22.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE23.LinearMipmapLinearFilter;
-  texture.magFilter = THREE23.LinearFilter;
+  texture.minFilter = THREE22.LinearMipmapLinearFilter;
+  texture.magFilter = THREE22.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-copper-pour-texture-for-layer.ts
-import * as THREE24 from "three";
+import * as THREE23 from "three";
 import { CircuitToCanvasDrawer } from "circuit-to-canvas";
 
 // src/geoms/brep-converter.ts
@@ -32954,6 +32496,167 @@ function createCopperPourTextureForLayer({
     ctx.fillStyle = copperColor;
     drawBrepShape({ ctx, pour, canvasXFromPcb, canvasYFromPcb });
   }
+  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/textures/create-silkscreen-texture-for-layer.ts
+import * as THREE24 from "three";
+
+// src/textures/soldermask/soldermask-bounds.ts
+var boundsFromPanel = (panel) => ({
+  minX: panel.center.x - panel.width / 2,
+  maxX: panel.center.x + panel.width / 2,
+  minY: panel.center.y - panel.height / 2,
+  maxY: panel.center.y + panel.height / 2,
+  width: panel.width,
+  height: panel.height,
+  centerX: panel.center.x,
+  centerY: panel.center.y
+});
+var mergeBounds = (a, b) => {
+  const minX = Math.min(a.minX, b.minX);
+  const maxX = Math.max(a.maxX, b.maxX);
+  const minY = Math.min(a.minY, b.minY);
+  const maxY = Math.max(a.maxY, b.maxY);
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+    centerX: (minX + maxX) / 2,
+    centerY: (minY + maxY) / 2
+  };
+};
+var getSoldermaskRenderBounds = (circuitJson, boardData) => {
+  const panels = circuitJson.filter(
+    (e) => e.type === "pcb_panel"
+  );
+  const boards = circuitJson.filter(
+    (e) => e.type === "pcb_board"
+  );
+  const activePanel = panels.find((panel) => panel.pcb_panel_id === boardData.pcb_board_id) ?? panels[0];
+  if (activePanel && activePanel.width > 0 && activePanel.height > 0) {
+    return boundsFromPanel(activePanel);
+  }
+  const boardsForBounds = boards.length > 1 ? boards : [boardData];
+  return boardsForBounds.map((board) => calculateOutlineBounds(board)).reduce((acc, bounds) => mergeBounds(acc, bounds));
+};
+
+// src/textures/silkscreen/silkscreen-drawing.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+var FABRICATION_NOTE_COLOR = "rgb(255,243,204)";
+var TRANSPARENT = "rgba(0,0,0,0)";
+var setDrawerBounds = (drawer, bounds) => {
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY
+  });
+};
+var drawSilkscreenLayer = ({
+  ctx,
+  layer,
+  bounds,
+  elements,
+  silkscreenColor
+}) => {
+  const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
+  const drawer = new CircuitToCanvasDrawer2(ctx);
+  drawer.configure({
+    colorOverrides: {
+      copper: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT,
+        inner1: TRANSPARENT,
+        inner2: TRANSPARENT,
+        inner3: TRANSPARENT,
+        inner4: TRANSPARENT,
+        inner5: TRANSPARENT,
+        inner6: TRANSPARENT
+      },
+      copperPour: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      drill: TRANSPARENT,
+      boardOutline: TRANSPARENT,
+      substrate: TRANSPARENT,
+      keepout: TRANSPARENT,
+      courtyard: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      soldermask: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      soldermaskWithCopperUnderneath: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      soldermaskOverCopper: {
+        top: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      silkscreen: {
+        top: silkscreenColor,
+        bottom: silkscreenColor
+      },
+      fabricationNote: FABRICATION_NOTE_COLOR
+    }
+  });
+  setDrawerBounds(drawer, bounds);
+  drawer.drawElements(elements, {
+    layers: [renderLayer]
+  });
+};
+
+// src/textures/create-silkscreen-texture-for-layer.ts
+var isSilkscreenElement = (element, layer) => {
+  if (!("layer" in element) || element.layer !== layer) return false;
+  const elementType = element.type;
+  return elementType.startsWith("pcb_silkscreen_") || elementType === "pcb_fabrication_note_rect" || elementType === "pcb_note_line";
+};
+function createSilkscreenTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceTextureResolution = TRACE_TEXTURE_RESOLUTION,
+  silkscreenColor = "rgb(255,255,255)"
+}) {
+  const elements = circuitJson.filter(
+    (element) => isSilkscreenElement(element, layer)
+  );
+  if (elements.length === 0) return null;
+  const bounds = getSoldermaskRenderBounds(circuitJson, boardData);
+  const canvasWidth = Math.floor(bounds.width * traceTextureResolution);
+  const canvasHeight = Math.floor(bounds.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;
+  if (layer === "bottom") {
+    ctx.translate(0, canvasHeight);
+    ctx.scale(1, -1);
+  }
+  drawSilkscreenLayer({
+    ctx,
+    layer,
+    bounds,
+    elements,
+    silkscreenColor
+  });
   const texture = new THREE24.CanvasTexture(canvas);
   texture.generateMipmaps = true;
   texture.minFilter = THREE24.LinearMipmapLinearFilter;
@@ -32967,7 +32670,7 @@ function createCopperPourTextureForLayer({
 import * as THREE25 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -32986,7 +32689,7 @@ var getSoldermaskPalette = (material) => {
     transparent: "rgba(0,0,0,0)"
   };
 };
-var setDrawerBounds = (drawer, bounds) => {
+var setDrawerBounds2 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -33003,7 +32706,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardMaterial);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer2(ctx);
+  const drawer = new CircuitToCanvasDrawer3(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -33034,7 +32737,7 @@ var drawSoldermaskLayer = ({
       }
     }
   });
-  setDrawerBounds(drawer, bounds);
+  setDrawerBounds2(drawer, bounds);
   drawer.drawElements(elements, {
     layers: [copperRenderLayer],
     drawSoldermask: true,
@@ -33047,7 +32750,7 @@ var drawSoldermaskLayer = ({
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer2(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer3(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -33062,54 +32765,12 @@ var drawSoldermaskLayer = ({
         }
       }
     });
-    setDrawerBounds(cutoutDrawer, bounds);
+    setDrawerBounds2(cutoutDrawer, bounds);
     cutoutDrawer.drawElements(uncoveredPours, { layers: [copperRenderLayer] });
     ctx.restore();
   }
 };
 
-// src/textures/soldermask/soldermask-bounds.ts
-var boundsFromPanel = (panel) => ({
-  minX: panel.center.x - panel.width / 2,
-  maxX: panel.center.x + panel.width / 2,
-  minY: panel.center.y - panel.height / 2,
-  maxY: panel.center.y + panel.height / 2,
-  width: panel.width,
-  height: panel.height,
-  centerX: panel.center.x,
-  centerY: panel.center.y
-});
-var mergeBounds = (a, b) => {
-  const minX = Math.min(a.minX, b.minX);
-  const maxX = Math.max(a.maxX, b.maxX);
-  const minY = Math.min(a.minY, b.minY);
-  const maxY = Math.max(a.maxY, b.maxY);
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width: maxX - minX,
-    height: maxY - minY,
-    centerX: (minX + maxX) / 2,
-    centerY: (minY + maxY) / 2
-  };
-};
-var getSoldermaskRenderBounds = (circuitJson, boardData) => {
-  const panels = circuitJson.filter(
-    (e) => e.type === "pcb_panel"
-  );
-  const boards = circuitJson.filter(
-    (e) => e.type === "pcb_board"
-  );
-  const activePanel = panels.find((panel) => panel.pcb_panel_id === boardData.pcb_board_id) ?? panels[0];
-  if (activePanel && activePanel.width > 0 && activePanel.height > 0) {
-    return boundsFromPanel(activePanel);
-  }
-  const boardsForBounds = boards.length > 1 ? boards : [boardData];
-  return boardsForBounds.map((board) => calculateOutlineBounds(board)).reduce((acc, bounds) => mergeBounds(acc, bounds));
-};
-
 // src/textures/create-soldermask-texture-for-layer.ts
 function createSoldermaskTextureForLayer({
   layer,
@@ -33385,7 +33046,7 @@ function JscadBoardTextures({
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
-    const boards = su9(circuitJson).pcb_board.list();
+    const boards = su8(circuitJson).pcb_board.list();
     if (panels.length > 0) {
       const panel = panels[0];
       const firstBoardInPanel = boards.find(
@@ -33522,16 +33183,16 @@ function JscadBoardTextures({
 }
 
 // src/utils/preprocess-circuit-json.ts
-import { su as su11 } from "@tscircuit/circuit-json-util";
+import { su as su10 } from "@tscircuit/circuit-json-util";
 
 // src/utils/create-faux-board.ts
-import { su as su10, getBoundsOfPcbElements } from "@tscircuit/circuit-json-util";
+import { su as su9, getBoundsOfPcbElements } from "@tscircuit/circuit-json-util";
 function createFauxBoard(circuitJson) {
-  const cadComponents = su10(circuitJson).cad_component.list();
-  const pads = su10(circuitJson).pcb_smtpad.list();
-  const holes = su10(circuitJson).pcb_hole.list();
-  const platedHoles = su10(circuitJson).pcb_plated_hole.list();
-  const vias = su10(circuitJson).pcb_via.list();
+  const cadComponents = su9(circuitJson).cad_component.list();
+  const pads = su9(circuitJson).pcb_smtpad.list();
+  const holes = su9(circuitJson).pcb_hole.list();
+  const platedHoles = su9(circuitJson).pcb_plated_hole.list();
+  const vias = su9(circuitJson).pcb_via.list();
   if (cadComponents.length === 0 && pads.length === 0 && holes.length === 0 && platedHoles.length === 0 && vias.length === 0) {
     return null;
   }
@@ -33580,7 +33241,7 @@ function createFauxBoard(circuitJson) {
 
 // src/utils/preprocess-circuit-json.ts
 function addFauxBoardIfNeeded(circuitJson) {
-  const boards = su11(circuitJson).pcb_board.list();
+  const boards = su10(circuitJson).pcb_board.list();
   if (boards.length > 0) {
     return circuitJson;
   }
@@ -33631,7 +33292,7 @@ var CadViewerJscad = forwardRef3(
     const initialCameraPosition = useMemo20(() => {
       if (!internalCircuitJson) return [5, -5, 5];
       try {
-        const board = su12(internalCircuitJson).pcb_board.list()[0];
+        const board = su11(internalCircuitJson).pcb_board.list()[0];
         if (!board) return [5, -5, 5];
         const { width: width10, height: height10 } = board;
         if (!width10 && !height10) {
@@ -33657,7 +33318,7 @@ var CadViewerJscad = forwardRef3(
     const isFauxBoard = useMemo20(() => {
       if (!internalCircuitJson) return false;
       try {
-        const board = su12(internalCircuitJson).pcb_board.list()[0];
+        const board = su11(internalCircuitJson).pcb_board.list()[0];
         return !!board && board.pcb_board_id === "faux-board";
       } catch (e) {
         return false;
@@ -33666,7 +33327,7 @@ var CadViewerJscad = forwardRef3(
     const boardDimensions = useMemo20(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su12(internalCircuitJson).pcb_board.list()[0];
+        const board = su11(internalCircuitJson).pcb_board.list()[0];
         if (!board) return void 0;
         return { width: board.width ?? 0, height: board.height ?? 0 };
       } catch (e) {
@@ -33677,7 +33338,7 @@ var CadViewerJscad = forwardRef3(
     const boardCenter = useMemo20(() => {
       if (!internalCircuitJson) return void 0;
       try {
-        const board = su12(internalCircuitJson).pcb_board.list()[0];
+        const board = su11(internalCircuitJson).pcb_board.list()[0];
         if (!board || !board.center) return void 0;
         return { x: board.center.x, y: board.center.y };
       } catch (e) {
@@ -33687,7 +33348,7 @@ var CadViewerJscad = forwardRef3(
     }, [internalCircuitJson]);
     const pcbThickness = usePcbThickness(internalCircuitJson);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-    const cad_components = su12(internalCircuitJson).cad_component.list();
+    const cad_components = su11(internalCircuitJson).cad_component.list();
     return /* @__PURE__ */ jsxs5(
       CadViewerContainer,
       {
@@ -33741,12 +33402,12 @@ var CadViewerJscad = forwardRef3(
 );
 
 // src/CadViewerManifold.tsx
-import { su as su18 } from "@tscircuit/circuit-json-util";
+import { su as su17 } 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 { su as su17 } from "@tscircuit/circuit-json-util";
+import { su as su16 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect24, useMemo as useMemo21, useRef as useRef9, useState as useState15 } from "react";
 import * as THREE32 from "three";
 
@@ -33809,7 +33470,7 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 
 // src/utils/manifold/process-cutouts.ts
-import { su as su13 } from "@tscircuit/circuit-json-util";
+import { su as su12 } from "@tscircuit/circuit-json-util";
 
 // src/utils/pad-geoms.ts
 var RECT_PAD_SEGMENTS2 = 64;
@@ -33868,7 +33529,7 @@ var arePointsClockwise3 = (points) => {
 };
 function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const cutoutOps = [];
-  const pcbCutouts = su13(circuitJson).pcb_cutout.list();
+  const pcbCutouts = su12(circuitJson).pcb_cutout.list();
   for (const cutout of pcbCutouts) {
     let cutoutOp;
     const cutoutHeight = pcbThickness * 1.5;
@@ -33963,7 +33624,7 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 }
 
 // src/utils/manifold/process-non-plated-holes.ts
-import { su as su14 } from "@tscircuit/circuit-json-util";
+import { su as su13 } from "@tscircuit/circuit-json-util";
 
 // src/utils/hole-geoms.ts
 function createCircleHoleDrill({
@@ -34006,7 +33667,7 @@ function createPlatedHoleDrill({
 // src/utils/manifold/process-non-plated-holes.ts
 function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const nonPlatedHoleBoardDrills = [];
-  const pcbHoles = su14(circuitJson).pcb_hole.list();
+  const pcbHoles = su13(circuitJson).pcb_hole.list();
   const createPillOp = (width10, height10, depth) => {
     const pillOp = createRoundedRectPrism({
       Manifold,
@@ -34089,7 +33750,7 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 }
 
 // src/utils/manifold/process-plated-holes.ts
-import { su as su15 } from "@tscircuit/circuit-json-util";
+import { su as su14 } from "@tscircuit/circuit-json-util";
 import * as THREE30 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
@@ -34141,7 +33802,7 @@ var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
 var PLATED_HOLE_FILL_CLEARANCE = 4e-3;
 function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const platedHoleBoardDrills = [];
-  const pcbPlatedHoles = su15(circuitJson).pcb_plated_hole.list();
+  const pcbPlatedHoles = su14(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
   const platedHoleCopperOpsForSubtract = [];
   const createPillOp = (width10, height10, depth) => {
@@ -34875,7 +34536,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 }
 
 // src/utils/manifold/process-vias.ts
-import { su as su16 } from "@tscircuit/circuit-json-util";
+import { su as su15 } from "@tscircuit/circuit-json-util";
 import * as THREE31 from "three";
 
 // src/utils/via-geoms.ts
@@ -34932,7 +34593,7 @@ function createViaCopper2({
 var COPPER_COLOR2 = new THREE31.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
-  const pcbVias = su16(circuitJson).pcb_via.list();
+  const pcbVias = su15(circuitJson).pcb_via.list();
   const viaCopperGeoms = [];
   pcbVias.forEach((via, index2) => {
     if (typeof via.hole_diameter === "number") {
@@ -34991,7 +34652,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     const panels = circuitJson.filter(
       (e) => e.type === "pcb_panel"
     );
-    const boards = su17(circuitJson).pcb_board.list();
+    const boards = su16(circuitJson).pcb_board.list();
     if (panels.length > 0) {
       const panel = panels[0];
       const firstBoardInPanel = boards.find(
@@ -35012,7 +34673,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
     return boardsNotInPanel.length > 0 ? boardsNotInPanel[0] : null;
   }, [circuitJson]);
   const isFauxBoard = useMemo21(() => {
-    const boards = su17(circuitJson).pcb_board.list();
+    const boards = su16(circuitJson).pcb_board.list();
     return boards.length > 0 && boards[0].pcb_board_id === "faux-board";
   }, [circuitJson]);
   const traceTextureResolution = useMemo21(() => {
@@ -35314,7 +34975,7 @@ var BoardMeshes = ({
 }) => {
   const { rootObject } = useThree();
   const { visibility } = useLayerVisibility();
-  const disposeTextureMesh = (mesh) => {
+  const disposeMesh = (mesh) => {
     mesh.geometry.dispose();
     const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
     for (const material of materials) {
@@ -35356,23 +35017,29 @@ var BoardMeshes = ({
         rootObject.add(mesh);
       }
     });
-    textureMeshes.forEach((mesh) => {
-      rootObject.add(mesh);
-    });
     return () => {
       geometryMeshes.forEach((mesh) => {
         if (mesh.parent === rootObject) {
           rootObject.remove(mesh);
         }
+        disposeMesh(mesh);
       });
+    };
+  }, [rootObject, geometryMeshes, visibility]);
+  useEffect25(() => {
+    if (!rootObject) return;
+    textureMeshes.forEach((mesh) => {
+      rootObject.add(mesh);
+    });
+    return () => {
       textureMeshes.forEach((mesh) => {
         if (mesh.parent === rootObject) {
           rootObject.remove(mesh);
         }
-        disposeTextureMesh(mesh);
+        disposeMesh(mesh);
       });
     };
-  }, [rootObject, geometryMeshes, textureMeshes, visibility]);
+  }, [rootObject, textureMeshes]);
   return null;
 };
 var MANIFOLD_CDN_BASE_URL = "https://cdn.jsdelivr.net/npm/manifold-3d@3.2.1";
@@ -35470,7 +35137,7 @@ try {
     [textures, boardData, pcbThickness, isFauxBoard]
   );
   const cadComponents = useMemo22(
-    () => su18(circuitJson).cad_component.list(),
+    () => su17(circuitJson).cad_component.list(),
     [circuitJson]
   );
   const boardDimensions = useMemo22(() => {
@@ -42484,7 +42151,7 @@ var CadViewer = (props) => {
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
-import { su as su19 } from "@tscircuit/circuit-json-util";
+import { su as su18 } from "@tscircuit/circuit-json-util";
 import * as THREE40 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
@@ -42713,11 +42380,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const pointLight = new THREE40.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su19(circuitJson).cad_component.list();
+  const components = su18(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
-  const boardData = su19(circuitJson).pcb_board.list()[0];
+  const boardData = su18(circuitJson).pcb_board.list()[0];
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.519",
+  "version": "0.0.521",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -30,7 +30,7 @@
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.372",
-    "circuit-to-canvas": "^0.0.80",
+    "circuit-to-canvas": "^0.0.81",
     "react-hot-toast": "^2.6.0",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",