@tscircuit/3d-viewer 0.0.522 → 0.0.524

package/dist/index.js

@@ -14245,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 THREE36 from "three";
+import * as THREE38 from "three";
 
 // src/CadViewerJscad.tsx
 import { su as su11 } from "@tscircuit/circuit-json-util";
@@ -28483,7 +28483,7 @@ import * as THREE16 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.521",
+  version: "0.0.523",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -31452,7 +31452,7 @@ 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
-import * as THREE26 from "three";
+import * as THREE28 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -32164,9 +32164,158 @@ function createCopperPourTextureForLayer({
   return texture;
 }
 
-// src/textures/create-silkscreen-texture-for-layer.ts
+// src/textures/create-fabrication-note-texture-for-layer.ts
 import * as THREE24 from "three";
 
+// src/textures/fabrication-note/fabrication-note-drawing.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
+
+// 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/textures/fabrication-note/fabrication-note-drawing.ts
+var FABRICATION_NOTE_COLOR = "rgb(255,243,204)";
+var TRANSPARENT = "rgba(0,0,0,0)";
+var setDrawerBounds2 = (drawer, bounds) => {
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY
+  });
+};
+var normalizeFabricationElement = (element) => {
+  if (element.type === "pcb_fabrication_note_rect") {
+    return {
+      ...element,
+      width: parseDimensionToMm(element.width) ?? 0,
+      height: parseDimensionToMm(element.height) ?? 0,
+      stroke_width: coerceDimensionToMm(element.stroke_width, 0.1),
+      corner_radius: parseDimensionToMm(element.corner_radius)
+    };
+  }
+  if (element.type === "pcb_fabrication_note_path") {
+    return {
+      ...element,
+      stroke_width: coerceDimensionToMm(element.stroke_width, 0.1)
+    };
+  }
+  if (element.type === "pcb_fabrication_note_text") {
+    return {
+      ...element,
+      font_size: coerceDimensionToMm(element.font_size, 1)
+    };
+  }
+  if (element.type === "pcb_fabrication_note_dimension") {
+    return {
+      ...element,
+      font_size: coerceDimensionToMm(element.font_size, 1),
+      arrow_size: coerceDimensionToMm(element.arrow_size, 1),
+      offset_distance: coerceDimensionToMm(element.offset_distance, 0)
+    };
+  }
+  return element;
+};
+var drawFabricationNoteLayer = ({
+  ctx,
+  layer,
+  bounds,
+  elements
+}) => {
+  const renderLayer = `${layer}_fabrication_note`;
+  const normalizedElements = elements.map(normalizeFabricationElement);
+  const drawer = new CircuitToCanvasDrawer3(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: TRANSPARENT,
+        bottom: TRANSPARENT
+      },
+      fabricationNote: FABRICATION_NOTE_COLOR
+    }
+  });
+  setDrawerBounds2(drawer, bounds);
+  drawer.drawElements(normalizedElements, {
+    layers: [renderLayer]
+  });
+};
+
 // src/textures/soldermask/soldermask-bounds.ts
 var boundsFromPanel = (panel) => ({
   minX: panel.center.x - panel.width / 2,
@@ -32209,11 +32358,218 @@ var getSoldermaskRenderBounds = (circuitJson, boardData) => {
   return boardsForBounds.map((board) => calculateOutlineBounds(board)).reduce((acc, bounds) => mergeBounds(acc, bounds));
 };
 
+// src/textures/create-fabrication-note-texture-for-layer.ts
+var isFabricationNoteElement = (element, layer) => {
+  if (!("layer" in element) || element.layer !== layer) return false;
+  return element.type.startsWith("pcb_fabrication_note_");
+};
+function createFabricationNoteTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceTextureResolution = TRACE_TEXTURE_RESOLUTION
+}) {
+  const elements = circuitJson.filter(
+    (element) => isFabricationNoteElement(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);
+  }
+  drawFabricationNoteLayer({
+    ctx,
+    layer,
+    bounds,
+    elements
+  });
+  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-pcb-note-texture-for-layer.ts
+import * as THREE25 from "three";
+
+// src/textures/pcb-note/pcb-note-drawing.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
+var TRANSPARENT2 = "rgba(0,0,0,0)";
+var setDrawerBounds3 = (drawer, bounds) => {
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY
+  });
+};
+var normalizePcbNoteElement = (element) => {
+  if (element.type === "pcb_note_line") {
+    return {
+      ...element,
+      x1: coerceDimensionToMm(element.x1, 0),
+      y1: coerceDimensionToMm(element.y1, 0),
+      x2: coerceDimensionToMm(element.x2, 0),
+      y2: coerceDimensionToMm(element.y2, 0),
+      stroke_width: coerceDimensionToMm(element.stroke_width, 0.1)
+    };
+  }
+  if (element.type === "pcb_note_rect") {
+    return {
+      ...element,
+      center: {
+        x: coerceDimensionToMm(element.center.x, 0),
+        y: coerceDimensionToMm(element.center.y, 0)
+      },
+      width: coerceDimensionToMm(element.width, 0),
+      height: coerceDimensionToMm(element.height, 0),
+      stroke_width: coerceDimensionToMm(element.stroke_width, 0.1),
+      corner_radius: coerceDimensionToMm(element.corner_radius, 0)
+    };
+  }
+  if (element.type === "pcb_note_text") {
+    return {
+      ...element,
+      anchor_position: {
+        x: coerceDimensionToMm(element.anchor_position.x, 0),
+        y: coerceDimensionToMm(element.anchor_position.y, 0)
+      },
+      font_size: coerceDimensionToMm(element.font_size, 1)
+    };
+  }
+  if (element.type === "pcb_note_path") {
+    return {
+      ...element,
+      route: element.route.map((point) => ({
+        ...point,
+        x: coerceDimensionToMm(point.x, 0),
+        y: coerceDimensionToMm(point.y, 0)
+      })),
+      stroke_width: coerceDimensionToMm(element.stroke_width, 0.1)
+    };
+  }
+  if (element.type === "pcb_note_dimension") {
+    return {
+      ...element,
+      from: {
+        x: coerceDimensionToMm(element.from.x, 0),
+        y: coerceDimensionToMm(element.from.y, 0)
+      },
+      to: {
+        x: coerceDimensionToMm(element.to.x, 0),
+        y: coerceDimensionToMm(element.to.y, 0)
+      },
+      font_size: coerceDimensionToMm(element.font_size, 1),
+      arrow_size: coerceDimensionToMm(element.arrow_size, 1),
+      offset_distance: coerceDimensionToMm(element.offset_distance, 0)
+    };
+  }
+  return element;
+};
+var drawPcbNoteLayer = ({
+  ctx,
+  bounds,
+  elements
+}) => {
+  const normalizedElements = elements.map(normalizePcbNoteElement);
+  const drawer = new CircuitToCanvasDrawer4(ctx);
+  drawer.configure({
+    colorOverrides: {
+      copper: {
+        top: TRANSPARENT2,
+        bottom: TRANSPARENT2,
+        inner1: TRANSPARENT2,
+        inner2: TRANSPARENT2,
+        inner3: TRANSPARENT2,
+        inner4: TRANSPARENT2,
+        inner5: TRANSPARENT2,
+        inner6: TRANSPARENT2
+      },
+      copperPour: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
+      drill: TRANSPARENT2,
+      boardOutline: TRANSPARENT2,
+      substrate: TRANSPARENT2,
+      keepout: TRANSPARENT2,
+      courtyard: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
+      soldermask: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
+      soldermaskWithCopperUnderneath: {
+        top: TRANSPARENT2,
+        bottom: TRANSPARENT2
+      },
+      soldermaskOverCopper: {
+        top: TRANSPARENT2,
+        bottom: TRANSPARENT2
+      },
+      silkscreen: { top: TRANSPARENT2, bottom: TRANSPARENT2 },
+      fabricationNote: TRANSPARENT2
+    }
+  });
+  setDrawerBounds3(drawer, bounds);
+  drawer.drawElements(normalizedElements);
+};
+
+// src/textures/create-pcb-note-texture-for-layer.ts
+var isPcbNoteElement = (element, layer) => {
+  if (!("layer" in element) || element.layer !== layer) return false;
+  return element.type.startsWith("pcb_note_");
+};
+function createPcbNoteTextureForLayer({
+  layer,
+  circuitJson,
+  boardData,
+  traceTextureResolution = TRACE_TEXTURE_RESOLUTION
+}) {
+  const elements = circuitJson.filter(
+    (element) => isPcbNoteElement(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);
+  }
+  drawPcbNoteLayer({
+    ctx,
+    bounds,
+    elements
+  });
+  const texture = new THREE25.CanvasTexture(canvas);
+  texture.generateMipmaps = true;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
+  texture.anisotropy = 16;
+  texture.needsUpdate = true;
+  return texture;
+}
+
+// src/textures/create-silkscreen-texture-for-layer.ts
+import * as THREE26 from "three";
+
 // src/textures/silkscreen/silkscreen-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
-var FABRICATION_NOTE_COLOR = "rgb(255,243,204)";
-var TRANSPARENT = "rgba(0,0,0,0)";
-var setDrawerBounds2 = (drawer, bounds) => {
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
+var FABRICATION_NOTE_COLOR2 = "rgb(255,243,204)";
+var TRANSPARENT3 = "rgba(0,0,0,0)";
+var setDrawerBounds4 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -32229,51 +32585,51 @@ var drawSilkscreenLayer = ({
   silkscreenColor
 }) => {
   const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
-  const drawer = new CircuitToCanvasDrawer3(ctx);
+  const drawer = new CircuitToCanvasDrawer5(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT,
-        inner1: TRANSPARENT,
-        inner2: TRANSPARENT,
-        inner3: TRANSPARENT,
-        inner4: TRANSPARENT,
-        inner5: TRANSPARENT,
-        inner6: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3,
+        inner1: TRANSPARENT3,
+        inner2: TRANSPARENT3,
+        inner3: TRANSPARENT3,
+        inner4: TRANSPARENT3,
+        inner5: TRANSPARENT3,
+        inner6: TRANSPARENT3
       },
       copperPour: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3
       },
-      drill: TRANSPARENT,
-      boardOutline: TRANSPARENT,
-      substrate: TRANSPARENT,
-      keepout: TRANSPARENT,
+      drill: TRANSPARENT3,
+      boardOutline: TRANSPARENT3,
+      substrate: TRANSPARENT3,
+      keepout: TRANSPARENT3,
       courtyard: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3
       },
       soldermask: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3
       },
       soldermaskWithCopperUnderneath: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3
       },
       soldermaskOverCopper: {
-        top: TRANSPARENT,
-        bottom: TRANSPARENT
+        top: TRANSPARENT3,
+        bottom: TRANSPARENT3
       },
       silkscreen: {
         top: silkscreenColor,
         bottom: silkscreenColor
       },
-      fabricationNote: FABRICATION_NOTE_COLOR
+      fabricationNote: FABRICATION_NOTE_COLOR2
     }
   });
-  setDrawerBounds2(drawer, bounds);
+  setDrawerBounds4(drawer, bounds);
   drawer.drawElements(elements, {
     layers: [renderLayer]
   });
@@ -32283,7 +32639,7 @@ var drawSilkscreenLayer = ({
 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";
+  return elementType.startsWith("pcb_silkscreen_");
 };
 function createSilkscreenTextureForLayer({
   layer,
@@ -32316,20 +32672,20 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE25 from "three";
+import * as THREE27 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } 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(
@@ -32348,7 +32704,7 @@ var getSoldermaskPalette = (material) => {
     transparent: "rgba(0,0,0,0)"
   };
 };
-var setDrawerBounds3 = (drawer, bounds) => {
+var setDrawerBounds5 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
     maxX: bounds.maxX,
@@ -32365,7 +32721,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardMaterial);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer4(ctx);
+  const drawer = new CircuitToCanvasDrawer6(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32396,7 +32752,7 @@ var drawSoldermaskLayer = ({
       }
     }
   });
-  setDrawerBounds3(drawer, bounds);
+  setDrawerBounds5(drawer, bounds);
   drawer.drawElements(elements, {
     layers: [copperRenderLayer],
     drawSoldermask: true,
@@ -32409,7 +32765,7 @@ var drawSoldermaskLayer = ({
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer4(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer6(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -32424,7 +32780,7 @@ var drawSoldermaskLayer = ({
         }
       }
     });
-    setDrawerBounds3(cutoutDrawer, bounds);
+    setDrawerBounds5(cutoutDrawer, bounds);
     cutoutDrawer.drawElements(uncoveredPours, { layers: [copperRenderLayer] });
     ctx.restore();
   }
@@ -32458,10 +32814,10 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE27.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE27.LinearMipmapLinearFilter;
+  texture.magFilter = THREE27.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -32499,10 +32855,10 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   });
-  const combinedTexture = new THREE26.CanvasTexture(canvas);
+  const combinedTexture = new THREE28.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE26.LinearFilter;
-  combinedTexture.magFilter = THREE26.LinearFilter;
+  combinedTexture.minFilter = THREE28.LinearFilter;
+  combinedTexture.magFilter = THREE28.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -32563,6 +32919,18 @@ function createCombinedBoardTextures({
       silkscreenColor,
       traceTextureResolution
     }) : null;
+    const fabricationNoteTexture = showSilkscreen ? createFabricationNoteTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      traceTextureResolution
+    }) : null;
+    const pcbNoteTexture = showSilkscreen ? createPcbNoteTextureForLayer({
+      layer,
+      circuitJson,
+      boardData,
+      traceTextureResolution
+    }) : null;
     const panelOutlineTexture = showBoardBody ? createPanelOutlineTextureForLayer({
       layer,
       circuitJson,
@@ -32577,6 +32945,8 @@ function createCombinedBoardTextures({
         soldermaskTexture,
         copperTextTexture,
         silkscreenTexture,
+        fabricationNoteTexture,
+        pcbNoteTexture,
         panelOutlineTexture
       ],
       boardData,
@@ -32591,7 +32961,7 @@ function createCombinedBoardTextures({
 }
 
 // src/textures/create-three-texture-meshes.ts
-import * as THREE27 from "three";
+import * as THREE29 from "three";
 function createTexturePlane(config, boardData) {
   const {
     texture,
@@ -32603,15 +32973,15 @@ function createTexturePlane(config, boardData) {
   } = config;
   if (!texture) return null;
   const boardOutlineBounds = calculateOutlineBounds(boardData);
-  const planeGeom = new THREE27.PlaneGeometry(
+  const planeGeom = new THREE29.PlaneGeometry(
     boardOutlineBounds.width,
     boardOutlineBounds.height
   );
-  const material = new THREE27.MeshBasicMaterial({
+  const material = new THREE29.MeshBasicMaterial({
     map: texture,
     transparent: true,
     alphaTest: 0.08,
-    side: THREE27.DoubleSide,
+    side: THREE29.DoubleSide,
     depthWrite: true,
     polygonOffset: usePolygonOffset,
     polygonOffsetFactor: usePolygonOffset ? -4 : 0,
@@ -32619,7 +32989,7 @@ function createTexturePlane(config, boardData) {
     polygonOffsetUnits: usePolygonOffset ? -4 : 0,
     opacity: isFaux ? FAUX_BOARD_OPACITY : 1
   });
-  const mesh = new THREE27.Mesh(planeGeom, material);
+  const mesh = new THREE29.Mesh(planeGeom, material);
   mesh.position.set(
     boardOutlineBounds.centerX,
     boardOutlineBounds.centerY,
@@ -32664,7 +33034,7 @@ function createTextureMeshes(textures, boardData, pcbThickness, isFaux = false)
 }
 
 // src/three-components/JscadBoardTextures.tsx
-import * as THREE28 from "three";
+import * as THREE30 from "three";
 
 // src/utils/layer-texture-resolution.ts
 var DEFAULT_MAX_TEXTURE_PIXELS = 4e6;
@@ -32760,7 +33130,7 @@ function JscadBoardTextures({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE28.Texture) {
+        if (texture && texture instanceof THREE30.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -32770,22 +33140,22 @@ function JscadBoardTextures({
     const createTexturePlane2 = (texture, zOffset, isBottomLayer, name, usePolygonOffset = false, depthWrite = true, renderOrder = 1) => {
       if (!texture) return null;
       const boardOutlineBounds = calculateOutlineBounds(boardData);
-      const planeGeom = new THREE28.PlaneGeometry(
+      const planeGeom = new THREE30.PlaneGeometry(
         boardOutlineBounds.width,
         boardOutlineBounds.height
       );
-      const material = new THREE28.MeshBasicMaterial({
+      const material = new THREE30.MeshBasicMaterial({
         map: texture,
         transparent: true,
         alphaTest: 0.08,
-        side: THREE28.DoubleSide,
+        side: THREE30.DoubleSide,
         depthWrite,
         polygonOffset: usePolygonOffset,
         polygonOffsetFactor: usePolygonOffset ? -4 : 0,
         polygonOffsetUnits: usePolygonOffset ? -4 : 0,
         opacity: isFaux ? FAUX_BOARD_OPACITY : 1
       });
-      const mesh = new THREE28.Mesh(planeGeom, material);
+      const mesh = new THREE30.Mesh(planeGeom, material);
       mesh.position.set(
         boardOutlineBounds.centerX,
         boardOutlineBounds.centerY,
@@ -32830,7 +33200,7 @@ function JscadBoardTextures({
         mesh.geometry.dispose();
         if (Array.isArray(mesh.material)) {
           mesh.material.forEach((material) => disposeTextureMaterial(material));
-        } else if (mesh.material instanceof THREE28.Material) {
+        } else if (mesh.material instanceof THREE30.Material) {
           disposeTextureMaterial(mesh.material);
         }
       });
@@ -33063,12 +33433,12 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 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";
+import * as THREE37 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 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";
+import * as THREE34 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
 var arePointsClockwise2 = (points) => {
@@ -33410,17 +33780,17 @@ function processNonPlatedHolesForManifold(Manifold, CrossSection, circuitJson, p
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE30 from "three";
+import * as THREE32 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE29 from "three";
+import * as THREE31 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE29.BufferGeometry();
+  const geometry = new THREE31.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE29.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE31.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE29.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE31.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];
@@ -33454,7 +33824,7 @@ var createEllipsePoints = (width10, height10, segments) => {
   }
   return points;
 };
-var COPPER_COLOR = new THREE30.Color(...colors.copper);
+var COPPER_COLOR = new THREE32.Color(...colors.copper);
 var PLATED_HOLE_LIP_HEIGHT = 0.05;
 var PLATED_HOLE_PAD_THICKNESS = 3e-3;
 var PLATED_HOLE_SURFACE_CLEARANCE = 5e-4;
@@ -34196,7 +34566,7 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
 
 // src/utils/manifold/process-vias.ts
 import { su as su15 } from "@tscircuit/circuit-json-util";
-import * as THREE31 from "three";
+import * as THREE33 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper2({
@@ -34249,7 +34619,7 @@ function createViaCopper2({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE31.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE33.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, boardClipVolume) {
   const viaBoardDrills = [];
   const pcbVias = su15(circuitJson).pcb_via.list();
@@ -34469,7 +34839,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
             {
               key: "plated-holes-union",
               geometry: cutPlatedGeom,
-              color: new THREE32.Color(
+              color: new THREE34.Color(
                 colors.copper[0],
                 colors.copper[1],
                 colors.copper[2]
@@ -34499,7 +34869,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE32.Color(
+          color: new THREE34.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -34544,11 +34914,11 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE34 from "three";
+import * as THREE36 from "three";
 
 // src/utils/create-board-material.ts
-import * as THREE33 from "three";
-var DEFAULT_SIDE = THREE33.DoubleSide;
+import * as THREE35 from "three";
+var DEFAULT_SIDE = THREE35.DoubleSide;
 var createBoardMaterial = ({
   material,
   color,
@@ -34556,7 +34926,7 @@ var createBoardMaterial = ({
   isFaux = false
 }) => {
   if (material === "fr4") {
-    return new THREE33.MeshPhysicalMaterial({
+    return new THREE35.MeshPhysicalMaterial({
       color,
       side,
       metalness: 0,
@@ -34573,7 +34943,7 @@ var createBoardMaterial = ({
       polygonOffsetUnits: 1
     });
   }
-  return new THREE33.MeshStandardMaterial({
+  return new THREE35.MeshStandardMaterial({
     color,
     side,
     flatShading: true,
@@ -34592,12 +34962,12 @@ function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE34.Mesh(
+    const mesh = new THREE36.Mesh(
       geoms.board.geometry,
       createBoardMaterial({
         material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE34.DoubleSide,
+        side: THREE36.DoubleSide,
         isFaux: geoms.board.isFaux
       })
     );
@@ -34607,11 +34977,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE34.Mesh(
+        const mesh = new THREE36.Mesh(
           comp.geometry,
-          new THREE34.MeshStandardMaterial({
+          new THREE36.MeshStandardMaterial({
             color: comp.color,
-            side: THREE34.DoubleSide,
+            side: THREE36.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -34655,7 +35025,7 @@ var BoardMeshes = ({
       const typedMaterial = material;
       for (const prop of textureProps) {
         const texture = typedMaterial[prop];
-        if (texture && texture instanceof THREE35.Texture) {
+        if (texture && texture instanceof THREE37.Texture) {
           texture.dispose();
           typedMaterial[prop] = null;
         }
@@ -41544,7 +41914,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/CadViewer.tsx
 import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
-var DEFAULT_TARGET = new THREE36.Vector3(0, 0, 0);
+var DEFAULT_TARGET = new THREE38.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState36("manifold");
@@ -41811,11 +42181,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su18 } from "@tscircuit/circuit-json-util";
-import * as THREE40 from "three";
+import * as THREE42 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE37 from "three";
+import * as THREE39 from "three";
 import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute3 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry4();
@@ -41829,12 +42199,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      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)
+      const v1 = new THREE39.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE39.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE39.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE39.Vector3().crossVectors(
+        new THREE39.Vector3().subVectors(v2, v1),
+        new THREE39.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -41858,10 +42228,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 THREE39 from "three";
+import * as THREE41 from "three";
 
 // src/utils/load-model.ts
-import * as THREE38 from "three";
+import * as THREE40 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";
@@ -41869,12 +42239,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE38.MeshStandardMaterial({
+    const material = new THREE40.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE38.Mesh(geometry, material);
+    return new THREE40.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -41907,9 +42277,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE41.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -41923,13 +42293,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE39.MeshStandardMaterial({
+      const material2 = new THREE41.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE39.DoubleSide
+        side: THREE41.DoubleSide
       });
-      const mesh2 = new THREE39.Mesh(threeGeom, material2);
+      const mesh2 = new THREE41.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -41939,9 +42309,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE41.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -41958,17 +42328,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE39.Color(geomInfo.color);
+      const color = new THREE41.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE39.MeshStandardMaterial({
+      const material2 = new THREE41.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE39.DoubleSide
+        side: THREE41.DoubleSide
       });
-      const mesh2 = new THREE39.Mesh(threeGeom, material2);
+      const mesh2 = new THREE41.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -41978,22 +42348,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE39.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE39.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE41.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE41.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE39.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE39.MeshStandardMaterial({
+  const geometry = new THREE41.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE41.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE39.Mesh(geometry, material);
+  const mesh = new THREE41.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -42014,11 +42384,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE40.Scene();
+  const scene = new THREE42.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE40.Color(backgroundColor), 1);
-  const camera = new THREE40.OrthographicCamera();
+  renderer.setClearColor(new THREE42.Color(backgroundColor), 1);
+  const camera = new THREE42.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -42032,11 +42402,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 THREE40.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE42.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE40.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE42.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE40.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE42.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su18(circuitJson).cad_component.list();
@@ -42047,7 +42417,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     const solderMaskColor = colors.fr4SolderMaskGreen;
-    const baseColor = new THREE40.Color(
+    const baseColor = new THREE42.Color(
       solderMaskColor[0],
       solderMaskColor[1],
       solderMaskColor[2]
@@ -42059,28 +42429,28 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const material = createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
-        side: THREE40.DoubleSide
+        side: THREE42.DoubleSide
       });
-      const mesh = new THREE40.Mesh(geometry, material);
+      const mesh = new THREE42.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridColor = new THREE40.Color(8947848);
-  const gridHelper = new THREE40.GridHelper(100, 100, gridColor, gridColor);
+  const gridColor = new THREE42.Color(8947848);
+  const gridHelper = new THREE42.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 THREE40.LineBasicMaterial) {
+    if (mat instanceof THREE42.LineBasicMaterial) {
       mat.color = gridColor;
       mat.vertexColors = false;
     }
   }
   scene.add(gridHelper);
-  const box = new THREE40.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE40.Vector3());
-  const size4 = box.getSize(new THREE40.Vector3());
+  const box = new THREE42.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE42.Vector3());
+  const size4 = box.getSize(new THREE42.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size4.x, size4.y, size4.z);
   if (maxDim > 0) {

package/package.json

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