@tscircuit/3d-viewer 0.0.525 → 0.0.527

package/dist/index.d.ts

@@ -61,6 +61,7 @@ interface LayerVisibilityState {
     modelsMarkedDNP: boolean;
     modelBoundingBoxes: boolean;
     threedAxis: boolean;
+    pcbNotes: boolean;
     backgroundStart: boolean;
     backgroundEnd: boolean;
 }

package/dist/index.js

@@ -14469,6 +14469,7 @@ var defaultVisibility = {
   modelsMarkedDNP: false,
   modelBoundingBoxes: false,
   threedAxis: false,
+  pcbNotes: false,
   backgroundStart: true,
   backgroundEnd: true
 };
@@ -28768,7 +28769,7 @@ import * as THREE16 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.524",
+  version: "0.0.526",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28798,7 +28799,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.81",
+    "circuit-to-canvas": "^0.0.87",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -31737,7 +31738,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 THREE28 from "three";
+import * as THREE27 from "three";
 
 // node_modules/@tscircuit/math-utils/dist/chunk-5N7UJNVK.js
 var getBoundsFromPoints = (points) => {
@@ -32233,227 +32234,11 @@ function createCopperTextTextureForLayer({
   return texture;
 }
 
-// src/textures/create-copper-pour-texture-for-layer.ts
-import * as THREE23 from "three";
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } 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 CircuitToCanvasDrawer2(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 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-fabrication-note-texture-for-layer.ts
-import * as THREE24 from "three";
+import * as THREE23 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 
 // src/utils/units.ts
 var MM_PER_INCH = 25.4;
@@ -32551,7 +32336,7 @@ var drawFabricationNoteLayer = ({
 }) => {
   const renderLayer = `${layer}_fabrication_note`;
   const normalizedElements = elements.map(normalizeFabricationElement);
-  const drawer = new CircuitToCanvasDrawer3(ctx);
+  const drawer = new CircuitToCanvasDrawer2(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32677,20 +32462,20 @@ function createFabricationNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE24.CanvasTexture(canvas);
+  const texture = new THREE23.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE24.LinearMipmapLinearFilter;
-  texture.magFilter = THREE24.LinearFilter;
+  texture.minFilter = THREE23.LinearMipmapLinearFilter;
+  texture.magFilter = THREE23.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-pcb-note-texture-for-layer.ts
-import * as THREE25 from "three";
+import * as THREE24 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 var TRANSPARENT2 = "rgba(0,0,0,0)";
 var setDrawerBounds3 = (drawer, bounds) => {
   drawer.setCameraBounds({
@@ -32769,7 +32554,7 @@ var drawPcbNoteLayer = ({
   elements
 }) => {
   const normalizedElements = elements.map(normalizePcbNoteElement);
-  const drawer = new CircuitToCanvasDrawer4(ctx);
+  const drawer = new CircuitToCanvasDrawer3(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32838,20 +32623,20 @@ function createPcbNoteTextureForLayer({
     bounds,
     elements
   });
-  const texture = new THREE25.CanvasTexture(canvas);
+  const texture = new THREE24.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE25.LinearMipmapLinearFilter;
-  texture.magFilter = THREE25.LinearFilter;
+  texture.minFilter = THREE24.LinearMipmapLinearFilter;
+  texture.magFilter = THREE24.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-silkscreen-texture-for-layer.ts
-import * as THREE26 from "three";
+import * as THREE25 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
 var FABRICATION_NOTE_COLOR2 = "rgb(255,243,204)";
 var TRANSPARENT3 = "rgba(0,0,0,0)";
 var setDrawerBounds4 = (drawer, bounds) => {
@@ -32870,7 +32655,7 @@ var drawSilkscreenLayer = ({
   silkscreenColor
 }) => {
   const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
-  const drawer = new CircuitToCanvasDrawer5(ctx);
+  const drawer = new CircuitToCanvasDrawer4(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32957,20 +32742,20 @@ function createSilkscreenTextureForLayer({
     elements,
     silkscreenColor
   });
-  const texture = new THREE26.CanvasTexture(canvas);
+  const texture = new THREE25.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE26.LinearMipmapLinearFilter;
-  texture.magFilter = THREE26.LinearFilter;
+  texture.minFilter = THREE25.LinearMipmapLinearFilter;
+  texture.magFilter = THREE25.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/textures/create-soldermask-texture-for-layer.ts
-import * as THREE27 from "three";
+import * as THREE26 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } 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(
@@ -33006,7 +32791,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardMaterial);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer6(ctx);
+  const drawer = new CircuitToCanvasDrawer5(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -33050,7 +32835,7 @@ var drawSoldermaskLayer = ({
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer6(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer5(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -33099,10 +32884,10 @@ function createSoldermaskTextureForLayer({
     elements,
     boardMaterial: boardData.material
   });
-  const texture = new THREE27.CanvasTexture(canvas);
+  const texture = new THREE26.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE27.LinearMipmapLinearFilter;
-  texture.magFilter = THREE27.LinearFilter;
+  texture.minFilter = THREE26.LinearMipmapLinearFilter;
+  texture.magFilter = THREE26.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -33140,10 +32925,10 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   });
-  const combinedTexture = new THREE28.CanvasTexture(canvas);
+  const combinedTexture = new THREE27.CanvasTexture(canvas);
   combinedTexture.generateMipmaps = false;
-  combinedTexture.minFilter = THREE28.LinearFilter;
-  combinedTexture.magFilter = THREE28.LinearFilter;
+  combinedTexture.minFilter = THREE27.LinearFilter;
+  combinedTexture.magFilter = THREE27.LinearFilter;
   combinedTexture.premultiplyAlpha = true;
   combinedTexture.anisotropy = 16;
   combinedTexture.needsUpdate = true;
@@ -33184,12 +32969,6 @@ function createCombinedBoardTextures({
       copperColor,
       traceTextureResolution
     }) : null;
-    const copperPourTexture = showCopper ? createCopperPourTextureForLayer({
-      layer,
-      circuitJson,
-      boardData,
-      traceTextureResolution
-    }) : null;
     const padTexture = showCopper ? createPadTextureForLayer({
       layer,
       circuitJson,
@@ -33210,7 +32989,8 @@ function createCombinedBoardTextures({
       boardData,
       traceTextureResolution
     }) : null;
-    const pcbNoteTexture = showSilkscreen ? createPcbNoteTextureForLayer({
+    const showPcbNotes = visibility?.pcbNotes ?? false;
+    const pcbNoteTexture = showPcbNotes ? createPcbNoteTextureForLayer({
       layer,
       circuitJson,
       boardData,
@@ -33224,7 +33004,6 @@ function createCombinedBoardTextures({
     }) : null;
     return createCombinedTexture({
       textures: [
-        copperPourTexture,
         traceTexture,
         padTexture,
         soldermaskTexture,
@@ -33245,6 +33024,14 @@ function createCombinedBoardTextures({
   };
 }
 
+// src/textures/create-copper-pour-texture-for-layer.ts
+import * as THREE28 from "three";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
+
+// src/geoms/brep-converter.ts
+var import_primitives7 = __toESM(require_primitives(), 1);
+var import_booleans5 = __toESM(require_booleans(), 1);
+
 // src/textures/create-three-texture-meshes.ts
 import * as THREE29 from "three";
 function createTexturePlane(config, boardData) {
@@ -36846,10 +36633,6 @@ var oppositeSideMap = {
   bottom: "top",
   top: "bottom"
 };
-var oppositeAlignmentMap = {
-  start: "end",
-  end: "start"
-};
 function clamp2(start, value, end) {
   return max(start, min(value, end));
 }
@@ -36868,9 +36651,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === "y" ? "height" : "width";
 }
-var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
 function getSideAxis(placement) {
-  return yAxisSides.has(getSide(placement)) ? "y" : "x";
+  const firstChar = placement[0];
+  return firstChar === "t" || firstChar === "b" ? "y" : "x";
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -36893,7 +36676,7 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+  return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
 }
 var lrPlacement = ["left", "right"];
 var rlPlacement = ["right", "left"];
@@ -36924,7 +36707,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   return list;
 }
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
   return {
@@ -37074,6 +36858,7 @@ async function detectOverflow(state, options) {
     right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
+var MAX_RESET_COUNT = 50;
 var computePosition = async (reference, floating, config) => {
   const {
     placement = "bottom",
@@ -37081,7 +36866,10 @@ var computePosition = async (reference, floating, config) => {
     middleware = [],
     platform: platform2
   } = config;
-  const validMiddleware = middleware.filter(Boolean);
+  const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
+    ...platform2,
+    detectOverflow
+  };
   const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
   let rects = await platform2.getElementRects({
     reference,
@@ -37093,14 +36881,17 @@ var computePosition = async (reference, floating, config) => {
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
-  let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
-    var _platform$detectOverf;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = currentMiddleware;
     const {
       x: nextX,
       y: nextY,
@@ -37114,10 +36905,7 @@ var computePosition = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform: {
-        ...platform2,
-        detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
-      },
+      platform: platformWithDetectOverflow,
       elements: {
         reference,
         floating
@@ -37125,14 +36913,11 @@ var computePosition = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
     };
-    if (reset && resetCount <= 50) {
+    if (reset && resetCount < MAX_RESET_COUNT) {
       resetCount++;
       if (typeof reset === "object") {
         if (reset.placement) {
@@ -37720,7 +37505,6 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
-var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -37728,29 +37512,31 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle2(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
 }
-var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
 function isTableElement(element) {
-  return tableElements.has(getNodeName(element));
+  return /^(table|td|th)$/.test(getNodeName(element));
 }
-var topLayerSelectors = [":popover-open", ":modal"];
 function isTopLayer(element) {
-  return topLayerSelectors.some((selector) => {
-    try {
-      return element.matches(selector);
-    } catch (_e) {
-      return false;
+  try {
+    if (element.matches(":popover-open")) {
+      return true;
     }
-  });
+  } catch (_e) {
+  }
+  try {
+    return element.matches(":modal");
+  } catch (_e) {
+    return false;
+  }
 }
-var transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
-var willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
-var containValues = ["paint", "layout", "strict", "content"];
+var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+var containRe = /paint|layout|strict|content/;
+var isNotNone = (value) => !!value && value !== "none";
+var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -37765,12 +37551,13 @@ function getContainingBlock(element) {
   return null;
 }
 function isWebKit() {
-  if (typeof CSS === "undefined" || !CSS.supports) return false;
-  return CSS.supports("-webkit-backdrop-filter", "none");
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+  }
+  return isWebKitValue;
 }
-var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
 function isLastTraversableNode(node) {
-  return lastTraversableNodeNames.has(getNodeName(node));
+  return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle2(element) {
   return getWindow(element).getComputedStyle(element);
@@ -37824,8 +37611,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
   if (isBody) {
     const frameElement = getFrameElement(win);
     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -37989,7 +37777,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
-    if (isHTMLElement(offsetParent)) {
+    if (isOffsetParentAnElement) {
       const offsetRect = getBoundingClientRect(offsetParent);
       scale2 = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -38063,7 +37851,6 @@ function getViewportRect(element, strategy) {
     y
   };
 }
-var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
   const top = clientRect.top + element.clientTop;
@@ -38121,7 +37908,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === "fixed") {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       result = result.filter((ancestor) => ancestor !== currentNode);
     } else {
@@ -38141,20 +37928,23 @@ function getClippingRect(_ref) {
   } = _ref;
   const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-  const firstClippingAncestor = clippingAncestors[0];
-  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-    accRect.top = max(rect.top, accRect.top);
-    accRect.right = min(rect.right, accRect.right);
-    accRect.bottom = min(rect.bottom, accRect.bottom);
-    accRect.left = max(rect.left, accRect.left);
-    return accRect;
-  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
   return {
-    width: clippingRect.right - clippingRect.left,
-    height: clippingRect.bottom - clippingRect.top,
-    x: clippingRect.left,
-    y: clippingRect.top
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
   };
 }
 function getDimensions(element) {
@@ -38363,7 +38153,7 @@ function autoUpdate(reference, floating, update, options) {
     animationFrame = false
   } = options;
   const referenceEl = unwrapElement(reference);
-  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
   ancestors.forEach((ancestor) => {
     ancestorScroll && ancestor.addEventListener("scroll", update, {
       passive: true
@@ -38376,7 +38166,7 @@ function autoUpdate(reference, floating, update, options) {
   if (elementResize) {
     resizeObserver = new ResizeObserver((_ref) => {
       let [firstEntry] = _ref;
-      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
         resizeObserver.unobserve(floating);
         cancelAnimationFrame(reobserveFrame);
         reobserveFrame = requestAnimationFrame(() => {
@@ -38389,7 +38179,9 @@ function autoUpdate(reference, floating, update, options) {
     if (referenceEl && !animationFrame) {
       resizeObserver.observe(referenceEl);
     }
-    resizeObserver.observe(floating);
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -38697,34 +38489,61 @@ var arrow$1 = (options) => {
     }
   };
 };
-var offset3 = (options, deps) => ({
-  ...offset2(options),
-  options: [options, deps]
-});
-var shift3 = (options, deps) => ({
-  ...shift2(options),
-  options: [options, deps]
-});
-var limitShift3 = (options, deps) => ({
-  ...limitShift2(options),
-  options: [options, deps]
-});
-var flip3 = (options, deps) => ({
-  ...flip2(options),
-  options: [options, deps]
-});
-var size3 = (options, deps) => ({
-  ...size2(options),
-  options: [options, deps]
-});
-var hide3 = (options, deps) => ({
-  ...hide2(options),
-  options: [options, deps]
-});
-var arrow3 = (options, deps) => ({
-  ...arrow$1(options),
-  options: [options, deps]
-});
+var offset3 = (options, deps) => {
+  const result = offset2(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var shift3 = (options, deps) => {
+  const result = shift2(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var limitShift3 = (options, deps) => {
+  const result = limitShift2(options);
+  return {
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var flip3 = (options, deps) => {
+  const result = flip2(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var size3 = (options, deps) => {
+  const result = size2(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var hide3 = (options, deps) => {
+  const result = hide2(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
+var arrow3 = (options, deps) => {
+  const result = arrow$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 import * as React29 from "react";
@@ -41614,6 +41433,27 @@ var AppearanceMenu = () => {
                 ]
               }
             ),
+            /* @__PURE__ */ jsxs8(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "pcbNotes" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility("pcbNotes", !visibility.pcbNotes);
+                },
+                onMouseEnter: () => setHoveredItem("pcbNotes"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("pcbNotes"),
+                children: [
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs8(
               Item22,
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.525",
+  "version": "0.0.527",
   "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.81",
+    "circuit-to-canvas": "^0.0.87",
     "react-hot-toast": "^2.6.0",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",