@tscircuit/3d-viewer 0.0.428 → 0.0.430

package/dist/index.js

@@ -1129,13 +1129,13 @@ var require_squaredLength = __commonJS({
 var require_subtract = __commonJS({
   "node_modules/@jscad/modeling/src/maths/vec3/subtract.js"(exports, module) {
     "use strict";
-    var subtract5 = (out, a, b) => {
+    var subtract6 = (out, a, b) => {
       out[0] = a[0] - b[0];
       out[1] = a[1] - b[1];
       out[2] = a[2] - b[2];
       return out;
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -1676,7 +1676,7 @@ var require_scale2 = __commonJS({
 var require_subtract2 = __commonJS({
   "node_modules/@jscad/modeling/src/maths/mat4/subtract.js"(exports, module) {
     "use strict";
-    var subtract5 = (out, a, b) => {
+    var subtract6 = (out, a, b) => {
       out[0] = a[0] - b[0];
       out[1] = a[1] - b[1];
       out[2] = a[2] - b[2];
@@ -1695,7 +1695,7 @@ var require_subtract2 = __commonJS({
       out[15] = a[15] - b[15];
       return out;
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -1712,7 +1712,7 @@ var require_toString2 = __commonJS({
 var require_translate = __commonJS({
   "node_modules/@jscad/modeling/src/maths/mat4/translate.js"(exports, module) {
     "use strict";
-    var translate8 = (out, matrix, offsets) => {
+    var translate9 = (out, matrix, offsets) => {
       const x = offsets[0];
       const y = offsets[1];
       const z133 = offsets[2];
@@ -1765,7 +1765,7 @@ var require_translate = __commonJS({
       }
       return out;
     };
-    module.exports = translate8;
+    module.exports = translate9;
   }
 });
 
@@ -2205,12 +2205,12 @@ var require_squaredLength2 = __commonJS({
 var require_subtract3 = __commonJS({
   "node_modules/@jscad/modeling/src/maths/vec2/subtract.js"(exports, module) {
     "use strict";
-    var subtract5 = (out, a, b) => {
+    var subtract6 = (out, a, b) => {
       out[0] = a[0] - b[0];
       out[1] = a[1] - b[1];
       return out;
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -2671,14 +2671,14 @@ var require_point_line_distance = __commonJS({
   "node_modules/@jscad/modeling/src/operations/hulls/quickhull/point-line-distance.js"(exports, module) {
     "use strict";
     var cross = require_cross();
-    var subtract5 = require_subtract();
+    var subtract6 = require_subtract();
     var squaredLength = require_squaredLength();
     var distanceSquared = (p, a, b) => {
       const ab = [];
       const ap = [];
       const cr = [];
-      subtract5(ab, b, a);
-      subtract5(ap, p, a);
+      subtract6(ab, b, a);
+      subtract6(ap, p, a);
       const area = squaredLength(cross(cr, ap, ab));
       const s = squaredLength(ab);
       if (s === 0) {
@@ -2697,11 +2697,11 @@ var require_get_plane_normal = __commonJS({
     "use strict";
     var cross = require_cross();
     var normalize = require_normalize();
-    var subtract5 = require_subtract();
+    var subtract6 = require_subtract();
     var planeNormal = (out, point1, point2, point32) => {
       const tmp = [0, 0, 0];
-      subtract5(out, point1, point2);
-      subtract5(tmp, point2, point32);
+      subtract6(out, point1, point2);
+      subtract6(tmp, point2, point32);
       cross(out, out, tmp);
       return normalize(out, out);
     };
@@ -2915,7 +2915,7 @@ var require_Face = __commonJS({
     var length2 = require_length();
     var normalize = require_normalize();
     var scale2 = require_scale();
-    var subtract5 = require_subtract();
+    var subtract6 = require_subtract();
     var HalfEdge = require_HalfEdge();
     var VISIBLE = 0;
     var NON_CONVEX = 1;
@@ -2949,14 +2949,14 @@ var require_Face = __commonJS({
         const e0 = this.edge;
         const e1 = e0.next;
         let e2 = e1.next;
-        const v2 = subtract5([], e1.head().point, e0.head().point);
+        const v2 = subtract6([], e1.head().point, e0.head().point);
         const t = [];
         const v1 = [];
         this.nVertices = 2;
         this.normal = [0, 0, 0];
         while (e2 !== e0) {
           copy(v1, v2);
-          subtract5(v2, e2.head().point, e0.head().point);
+          subtract6(v2, e2.head().point, e0.head().point);
           add(this.normal, this.normal, cross(t, v1, v2));
           e2 = e2.next;
           this.nVertices += 1;
@@ -2980,7 +2980,7 @@ var require_Face = __commonJS({
           } while (edge !== this.edge);
           const p1 = maxEdge.tail().point;
           const p2 = maxEdge.head().point;
-          const maxVector = subtract5([], p2, p1);
+          const maxVector = subtract6([], p2, p1);
           const maxLength = Math.sqrt(maxSquaredLength);
           scale2(maxVector, maxVector, 1 / maxLength);
           const maxProjection = dot(this.normal, maxVector);
@@ -5426,7 +5426,7 @@ var require_colorize = __commonJS({
       newpoly.color = color;
       return newpoly;
     };
-    var colorize7 = (color, ...objects) => {
+    var colorize8 = (color, ...objects) => {
       if (!Array.isArray(color)) throw new Error("color must be an array");
       if (color.length < 3) throw new Error("color must contain R, G and B values");
       if (color.length === 3) color = [color[0], color[1], color[2], 1];
@@ -5442,7 +5442,7 @@ var require_colorize = __commonJS({
       });
       return results.length === 1 ? results[0] : results;
     };
-    module.exports = colorize7;
+    module.exports = colorize8;
   }
 });
 
@@ -7555,7 +7555,7 @@ var require_circle = __commonJS({
     var { TAU } = require_constants();
     var ellipse = require_ellipse();
     var { isGTE } = require_commonChecks();
-    var circle = (options) => {
+    var circle2 = (options) => {
       const defaults = {
         center: [0, 0],
         radius: 1,
@@ -7568,7 +7568,7 @@ var require_circle = __commonJS({
       radius = [radius, radius];
       return ellipse({ center, radius, startAngle, endAngle, segments });
     };
-    module.exports = circle;
+    module.exports = circle2;
   }
 });
 
@@ -9746,7 +9746,7 @@ var require_translate2 = __commonJS({
     var geom2 = require_geom2();
     var geom3 = require_geom3();
     var path2 = require_path2();
-    var translate8 = (offset4, ...objects) => {
+    var translate9 = (offset4, ...objects) => {
       if (!Array.isArray(offset4)) throw new Error("offset must be an array");
       objects = flatten(objects);
       if (objects.length === 0) throw new Error("wrong number of arguments");
@@ -9761,11 +9761,11 @@ var require_translate2 = __commonJS({
       });
       return results.length === 1 ? results[0] : results;
     };
-    var translateX = (offset4, ...objects) => translate8([offset4, 0, 0], objects);
-    var translateY = (offset4, ...objects) => translate8([0, offset4, 0], objects);
-    var translateZ = (offset4, ...objects) => translate8([0, 0, offset4], objects);
+    var translateX = (offset4, ...objects) => translate9([offset4, 0, 0], objects);
+    var translateY = (offset4, ...objects) => translate9([0, offset4, 0], objects);
+    var translateZ = (offset4, ...objects) => translate9([0, 0, offset4], objects);
     module.exports = {
-      translate: translate8,
+      translate: translate9,
       translateX,
       translateY,
       translateZ
@@ -9780,8 +9780,8 @@ var require_torus = __commonJS({
     var { TAU } = require_constants();
     var extrudeRotate = require_extrudeRotate();
     var { rotate: rotate2 } = require_rotate3();
-    var { translate: translate8 } = require_translate2();
-    var circle = require_circle();
+    var { translate: translate9 } = require_translate2();
+    var circle2 = require_circle();
     var { isGT, isGTE } = require_commonChecks();
     var torus = (options) => {
       const defaults = {
@@ -9801,11 +9801,11 @@ var require_torus = __commonJS({
       if (!isGTE(startAngle, 0)) throw new Error("startAngle must be positive");
       if (!isGT(outerRotation, 0)) throw new Error("outerRotation must be greater than zero");
       if (innerRadius >= outerRadius) throw new Error("inner circle is too large to rotate about the outer circle");
-      let innerCircle = circle({ radius: innerRadius, segments: innerSegments });
+      let innerCircle = circle2({ radius: innerRadius, segments: innerSegments });
       if (innerRotation !== 0) {
         innerCircle = rotate2([0, 0, innerRotation], innerCircle);
       }
-      innerCircle = translate8([outerRadius, 0], innerCircle);
+      innerCircle = translate9([outerRadius, 0], innerCircle);
       const extrudeOptions = {
         startAngle,
         angle: outerRotation,
@@ -11612,7 +11612,7 @@ var require_subtractGeom3 = __commonJS({
     var flatten = require_flatten();
     var retessellate = require_retessellate();
     var subtractSub = require_subtractGeom3Sub();
-    var subtract5 = (...geometries) => {
+    var subtract6 = (...geometries) => {
       geometries = flatten(geometries);
       let newgeometry = geometries.shift();
       geometries.forEach((geometry) => {
@@ -11621,7 +11621,7 @@ var require_subtractGeom3 = __commonJS({
       newgeometry = retessellate(newgeometry);
       return newgeometry;
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -11635,14 +11635,14 @@ var require_subtractGeom2 = __commonJS({
     var fromFakePolygons = require_fromFakePolygons();
     var to3DWalls = require_to3DWalls();
     var subtractGeom3 = require_subtractGeom3();
-    var subtract5 = (...geometries) => {
+    var subtract6 = (...geometries) => {
       geometries = flatten(geometries);
       const newgeometries = geometries.map((geometry) => to3DWalls({ z0: -1, z1: 1 }, geometry));
       const newgeom3 = subtractGeom3(newgeometries);
       const epsilon = measureEpsilon(newgeom3);
       return fromFakePolygons(epsilon, geom3.toPolygons(newgeom3));
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -11656,7 +11656,7 @@ var require_subtract4 = __commonJS({
     var geom3 = require_geom3();
     var subtractGeom2 = require_subtractGeom2();
     var subtractGeom3 = require_subtractGeom3();
-    var subtract5 = (...geometries) => {
+    var subtract6 = (...geometries) => {
       geometries = flatten(geometries);
       if (geometries.length === 0) throw new Error("wrong number of arguments");
       if (!areAllShapesTheSameType(geometries)) {
@@ -11667,7 +11667,7 @@ var require_subtract4 = __commonJS({
       if (geom3.isA(geometry)) return subtractGeom3(geometries);
       return geometry;
     };
-    module.exports = subtract5;
+    module.exports = subtract6;
   }
 });
 
@@ -12451,7 +12451,7 @@ var require_extrudeLinear = __commonJS({
     var path2 = require_path2();
     var extrudeLinearGeom2 = require_extrudeLinearGeom2();
     var extrudeLinearPath2 = require_extrudeLinearPath2();
-    var extrudeLinear7 = (options, ...objects) => {
+    var extrudeLinear8 = (options, ...objects) => {
       const defaults = {
         height: 1,
         twistAngle: 0,
@@ -12469,7 +12469,7 @@ var require_extrudeLinear = __commonJS({
       });
       return results.length === 1 ? results[0] : results;
     };
-    module.exports = extrudeLinear7;
+    module.exports = extrudeLinear8;
   }
 });
 
@@ -13528,7 +13528,7 @@ var require_align = __commonJS({
     var flatten = require_flatten();
     var padArrayToLength = require_padArrayToLength();
     var measureAggregateBoundingBox = require_measureAggregateBoundingBox();
-    var { translate: translate8 } = require_translate2();
+    var { translate: translate9 } = require_translate2();
     var validateOptions = (options) => {
       if (!Array.isArray(options.modes) || options.modes.length > 3) throw new Error("align(): modes must be an array of length <= 3");
       options.modes = padArrayToLength(options.modes, "none", 3);
@@ -13565,7 +13565,7 @@ var require_align = __commonJS({
           translation[i] = relativeTo[i] - bounds[0][i];
         }
       }
-      return translate8(translation, geometry);
+      return translate9(translation, geometry);
     };
     var align = (options, ...geometries) => {
       const defaults = {
@@ -13602,7 +13602,7 @@ var require_center = __commonJS({
     var geom3 = require_geom3();
     var path2 = require_path2();
     var measureBoundingBox = require_measureBoundingBox2();
-    var { translate: translate8 } = require_translate2();
+    var { translate: translate9 } = require_translate2();
     var centerGeometry = (options, object) => {
       const defaults = {
         axes: [true, true, true],
@@ -13614,7 +13614,7 @@ var require_center = __commonJS({
       if (axes[0]) offset4[0] = relativeTo[0] - (bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2);
       if (axes[1]) offset4[1] = relativeTo[1] - (bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2);
       if (axes[2]) offset4[2] = relativeTo[2] - (bounds[0][2] + (bounds[1][2] - bounds[0][2]) / 2);
-      return translate8(offset4, object);
+      return translate9(offset4, object);
     };
     var center = (options, ...objects) => {
       const defaults = {
@@ -24319,7 +24319,7 @@ var m2host = (raw_params) => {
   }
   const centerX = (minX + maxX) / 2;
   const centerY = (minY + maxY) / 2;
-  const translate8 = (el) => {
+  const translate9 = (el) => {
     if (typeof el.x === "number") el.x -= centerX;
     if (typeof el.y === "number") el.y -= centerY;
     if (el.center) {
@@ -24333,9 +24333,9 @@ var m2host = (raw_params) => {
       }));
     }
   };
-  for (const pad2 of pads) translate8(pad2);
-  translate8(cutout);
-  translate8(pin1Marker);
+  for (const pad2 of pads) translate9(pad2);
+  translate9(cutout);
+  translate9(pin1Marker);
   return {
     circuitJson: [
       ...pads,
@@ -26789,7 +26789,7 @@ import * as THREE14 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.427",
+  version: "0.0.429",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -27952,10 +27952,10 @@ var createBoardGeomFromCircuitJson = (circuitJson, opts = {}) => {
 };
 
 // src/BoardGeomBuilder.ts
-var import_transforms6 = __toESM(require_transforms(), 1);
-var import_primitives8 = __toESM(require_primitives(), 1);
-var import_colors6 = __toESM(require_colors(), 1);
-var import_booleans4 = __toESM(require_booleans(), 1);
+var import_transforms7 = __toESM(require_transforms(), 1);
+var import_primitives9 = __toESM(require_primitives(), 1);
+var import_colors7 = __toESM(require_colors(), 1);
+var import_booleans5 = __toESM(require_booleans(), 1);
 import { su as su3 } from "@tscircuit/circuit-json-util";
 
 // src/geoms/plated-hole.ts
@@ -28338,7 +28338,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
 };
 
 // src/BoardGeomBuilder.ts
-var import_extrusions6 = __toESM(require_extrusions(), 1);
+var import_extrusions7 = __toESM(require_extrusions(), 1);
 var import_expansions4 = __toESM(require_expansions(), 1);
 
 // src/geoms/create-geoms-for-silkscreen-text.ts
@@ -28812,9 +28812,52 @@ function createSilkscreenRectGeom(rect, ctx) {
   return (0, import_colors5.colorize)([1, 1, 1], rectGeom);
 }
 
-// src/geoms/brep-converter.ts
+// src/geoms/create-geoms-for-silkscreen-circle.ts
 var import_primitives7 = __toESM(require_primitives(), 1);
+var import_extrusions6 = __toESM(require_extrusions(), 1);
+var import_transforms6 = __toESM(require_transforms(), 1);
+var import_colors6 = __toESM(require_colors(), 1);
 var import_booleans3 = __toESM(require_booleans(), 1);
+var CIRCLE_SEGMENTS = 64;
+function createSilkscreenCircleGeom(circleEl, ctx) {
+  const radius = coerceDimensionToMm(circleEl.radius, 0);
+  if (radius <= 0) return void 0;
+  const strokeWidth = coerceDimensionToMm(circleEl.stroke_width, 0.12);
+  const hasStroke = strokeWidth > 0;
+  const centerX = parseDimensionToMm(circleEl.center?.x) ?? 0;
+  const centerY = parseDimensionToMm(circleEl.center?.y) ?? 0;
+  const layerSign = circleEl.layer === "bottom" ? -1 : 1;
+  const zPos = layerSign * ctx.pcbThickness / 2 + layerSign * M * 1.5;
+  const baseHeight = 0.012;
+  let circleGeom;
+  if (hasStroke) {
+    const outerRadius = radius + strokeWidth / 2;
+    const innerRadius = radius - strokeWidth / 2;
+    const outerCircle2d = (0, import_primitives7.circle)({
+      radius: outerRadius,
+      segments: CIRCLE_SEGMENTS
+    });
+    let ring3d = (0, import_extrusions6.extrudeLinear)({ height: baseHeight }, outerCircle2d);
+    if (innerRadius > 0) {
+      const innerCircle2d = (0, import_primitives7.circle)({
+        radius: innerRadius,
+        segments: CIRCLE_SEGMENTS
+      });
+      const inner3d = (0, import_extrusions6.extrudeLinear)({ height: baseHeight }, innerCircle2d);
+      ring3d = (0, import_booleans3.subtract)(ring3d, inner3d);
+    }
+    circleGeom = ring3d;
+  } else {
+    const filledCircle2d = (0, import_primitives7.circle)({ radius, segments: CIRCLE_SEGMENTS });
+    circleGeom = (0, import_extrusions6.extrudeLinear)({ height: baseHeight }, filledCircle2d);
+  }
+  const translatedGeom = (0, import_transforms6.translate)([centerX, centerY, zPos], circleGeom);
+  return (0, import_colors6.colorize)([1, 1, 1], translatedGeom);
+}
+
+// src/geoms/brep-converter.ts
+var import_primitives8 = __toESM(require_primitives(), 1);
+var import_booleans4 = __toESM(require_booleans(), 1);
 function segmentToPoints(p1, p2, bulge, arcSegments) {
   if (!bulge || Math.abs(bulge) < 1e-9) {
     return [];
@@ -28882,7 +28925,7 @@ function createGeom2FromBRep(brep, arcSegments = 16) {
   if (arePointsClockwise2(outerPoints)) {
     outerPoints.reverse();
   }
-  const outerGeom = (0, import_primitives7.polygon)({ points: outerPoints });
+  const outerGeom = (0, import_primitives8.polygon)({ points: outerPoints });
   if (!brep.inner_rings || brep.inner_rings.length === 0) {
     return outerGeom;
   }
@@ -28891,10 +28934,10 @@ function createGeom2FromBRep(brep, arcSegments = 16) {
     if (arePointsClockwise2(innerPoints)) {
       innerPoints.reverse();
     }
-    return (0, import_primitives7.polygon)({ points: innerPoints });
+    return (0, import_primitives8.polygon)({ points: innerPoints });
   });
   if (innerGeoms.length === 0) return outerGeom;
-  return (0, import_booleans3.subtract)(outerGeom, innerGeoms);
+  return (0, import_booleans4.subtract)(outerGeom, innerGeoms);
 }
 
 // src/BoardGeomBuilder.ts
@@ -28904,15 +28947,15 @@ var BOARD_CLIP_XY_OUTSET = 0.05;
 var createCenteredRectPadGeom = (width10, height10, thickness, rectBorderRadius) => {
   const clampedRadius = clampRectBorderRadius(width10, height10, rectBorderRadius);
   if (clampedRadius <= 0) {
-    return (0, import_primitives8.cuboid)({ center: [0, 0, 0], size: [width10, height10, thickness] });
+    return (0, import_primitives9.cuboid)({ center: [0, 0, 0], size: [width10, height10, thickness] });
   }
-  const rect2d = (0, import_primitives8.roundedRectangle)({
+  const rect2d = (0, import_primitives9.roundedRectangle)({
     size: [width10, height10],
     roundRadius: clampedRadius,
     segments: PAD_ROUNDED_SEGMENTS
   });
-  const extruded = (0, import_extrusions6.extrudeLinear)({ height: thickness }, rect2d);
-  return (0, import_transforms6.translate)([0, 0, -thickness / 2], extruded);
+  const extruded = (0, import_extrusions7.extrudeLinear)({ height: thickness }, rect2d);
+  return (0, import_transforms7.translate)([0, 0, -thickness / 2], extruded);
 };
 var buildStateOrder = [
   "initializing",
@@ -28925,6 +28968,7 @@ var buildStateOrder = [
   "processing_vias",
   "processing_silkscreen_text",
   "processing_silkscreen_lines",
+  "processing_silkscreen_circles",
   "processing_silkscreen_rects",
   "processing_silkscreen_paths",
   "finalizing",
@@ -28941,6 +28985,7 @@ var BoardGeomBuilder = class {
   silkscreenTexts;
   silkscreenPaths;
   silkscreenLines;
+  silkscreenCircles;
   silkscreenRects;
   pcb_cutouts;
   pcb_copper_pours;
@@ -28955,6 +29000,7 @@ var BoardGeomBuilder = class {
   silkscreenTextGeoms = [];
   silkscreenPathGeoms = [];
   silkscreenLineGeoms = [];
+  silkscreenCircleGeoms = [];
   silkscreenRectGeoms = [];
   copperPourGeoms = [];
   boardClipGeom = null;
@@ -28990,6 +29036,7 @@ var BoardGeomBuilder = class {
     this.silkscreenTexts = su3(circuitJson).pcb_silkscreen_text.list();
     this.silkscreenPaths = su3(circuitJson).pcb_silkscreen_path.list();
     this.silkscreenLines = su3(circuitJson).pcb_silkscreen_line.list();
+    this.silkscreenCircles = su3(circuitJson).pcb_silkscreen_circle.list();
     this.silkscreenRects = su3(circuitJson).pcb_silkscreen_rect.list();
     this.pcb_cutouts = su3(circuitJson).pcb_cutout.list();
     this.pcb_copper_pours = circuitJson.filter(
@@ -29015,11 +29062,11 @@ var BoardGeomBuilder = class {
         { xyOutset: BOARD_CLIP_XY_OUTSET }
       );
     } else {
-      this.boardGeom = (0, import_primitives8.cuboid)({
+      this.boardGeom = (0, import_primitives9.cuboid)({
         size: [this.board.width, this.board.height, this.ctx.pcbThickness],
         center: [this.board.center.x, this.board.center.y, 0]
       });
-      this.boardClipGeom = (0, import_primitives8.cuboid)({
+      this.boardClipGeom = (0, import_primitives9.cuboid)({
         size: [
           this.board.width + 2 * BOARD_CLIP_XY_OUTSET,
           this.board.height + 2 * BOARD_CLIP_XY_OUTSET,
@@ -29099,6 +29146,16 @@ var BoardGeomBuilder = class {
             this.goToNextState();
           }
           break;
+        case "processing_silkscreen_circles":
+          if (this.currentIndex < this.silkscreenCircles.length) {
+            this.processSilkscreenCircle(
+              this.silkscreenCircles[this.currentIndex]
+            );
+            this.currentIndex++;
+          } else {
+            this.goToNextState();
+          }
+          break;
         case "processing_silkscreen_rects":
           if (this.currentIndex < this.silkscreenRects.length) {
             this.processSilkscreenRect(this.silkscreenRects[this.currentIndex]);
@@ -29145,17 +29202,17 @@ var BoardGeomBuilder = class {
     const cutoutHeight = this.ctx.pcbThickness * 1.5;
     switch (cutout.shape) {
       case "rect":
-        cutoutGeom = (0, import_primitives8.cuboid)({
+        cutoutGeom = (0, import_primitives9.cuboid)({
           center: [cutout.center.x, cutout.center.y, 0],
           size: [cutout.width, cutout.height, cutoutHeight]
         });
         if (cutout.rotation) {
           const rotationRadians = cutout.rotation * Math.PI / 180;
-          cutoutGeom = (0, import_transforms6.rotateZ)(rotationRadians, cutoutGeom);
+          cutoutGeom = (0, import_transforms7.rotateZ)(rotationRadians, cutoutGeom);
         }
         break;
       case "circle":
-        cutoutGeom = (0, import_primitives8.cylinder)({
+        cutoutGeom = (0, import_primitives9.cylinder)({
           center: [cutout.center.x, cutout.center.y, 0],
           radius: cutout.radius,
           height: cutoutHeight
@@ -29172,13 +29229,13 @@ var BoardGeomBuilder = class {
         if (arePointsClockwise(pointsVec2)) {
           pointsVec2 = pointsVec2.reverse();
         }
-        const polygon2d = (0, import_primitives8.polygon)({ points: pointsVec2 });
-        cutoutGeom = (0, import_extrusions6.extrudeLinear)({ height: cutoutHeight }, polygon2d);
-        cutoutGeom = (0, import_transforms6.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
+        const polygon2d = (0, import_primitives9.polygon)({ points: pointsVec2 });
+        cutoutGeom = (0, import_extrusions7.extrudeLinear)({ height: cutoutHeight }, polygon2d);
+        cutoutGeom = (0, import_transforms7.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
         break;
     }
     if (cutoutGeom) {
-      this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, cutoutGeom);
+      this.boardGeom = (0, import_booleans5.subtract)(this.boardGeom, cutoutGeom);
     }
   }
   processCopperPour(pour) {
@@ -29186,22 +29243,22 @@ var BoardGeomBuilder = class {
     const zPos = layerSign * this.ctx.pcbThickness / 2 + layerSign * BOARD_SURFACE_OFFSET.copper;
     let pourGeom = null;
     if (pour.shape === "rect") {
-      let baseGeom = (0, import_primitives8.cuboid)({
+      let baseGeom = (0, import_primitives9.cuboid)({
         center: [0, 0, 0],
         // Create at origin for rotation
         size: [pour.width, pour.height, M]
       });
       if ("rotation" in pour && pour.rotation) {
         const rotationRadians = pour.rotation * Math.PI / 180;
-        baseGeom = (0, import_transforms6.rotateZ)(rotationRadians, baseGeom);
+        baseGeom = (0, import_transforms7.rotateZ)(rotationRadians, baseGeom);
       }
-      pourGeom = (0, import_transforms6.translate)([pour.center.x, pour.center.y, zPos], baseGeom);
+      pourGeom = (0, import_transforms7.translate)([pour.center.x, pour.center.y, zPos], baseGeom);
     } else if (pour.shape === "brep") {
       const brepShape = pour.brep_shape;
       if (brepShape && brepShape.outer_ring) {
         const pourGeom2 = createGeom2FromBRep(brepShape);
-        pourGeom = (0, import_extrusions6.extrudeLinear)({ height: M }, pourGeom2);
-        pourGeom = (0, import_transforms6.translate)([0, 0, zPos], pourGeom);
+        pourGeom = (0, import_extrusions7.extrudeLinear)({ height: M }, pourGeom2);
+        pourGeom = (0, import_transforms7.translate)([0, 0, zPos], pourGeom);
       }
     } else if (pour.shape === "polygon") {
       let pointsVec2 = pour.points.map((p) => [p.x, p.y]);
@@ -29214,17 +29271,17 @@ var BoardGeomBuilder = class {
       if (arePointsClockwise(pointsVec2)) {
         pointsVec2 = pointsVec2.reverse();
       }
-      const polygon2d = (0, import_primitives8.polygon)({ points: pointsVec2 });
-      pourGeom = (0, import_extrusions6.extrudeLinear)({ height: M }, polygon2d);
-      pourGeom = (0, import_transforms6.translate)([0, 0, zPos], pourGeom);
+      const polygon2d = (0, import_primitives9.polygon)({ points: pointsVec2 });
+      pourGeom = (0, import_extrusions7.extrudeLinear)({ height: M }, polygon2d);
+      pourGeom = (0, import_transforms7.translate)([0, 0, zPos], pourGeom);
     }
     if (pourGeom) {
       if (this.boardClipGeom) {
-        pourGeom = (0, import_booleans4.intersect)(this.boardClipGeom, pourGeom);
+        pourGeom = (0, import_booleans5.intersect)(this.boardClipGeom, pourGeom);
       }
       const covered = pour.covered_with_solder_mask !== false;
       const pourMaterialColor = covered ? tracesMaterialColors[this.board.material] ?? colors.fr4GreenSolderWithMask : colors.copper;
-      const coloredPourGeom = (0, import_colors6.colorize)(pourMaterialColor, pourGeom);
+      const coloredPourGeom = (0, import_colors7.colorize)(pourMaterialColor, pourGeom);
       this.copperPourGeoms.push(coloredPourGeom);
     }
   }
@@ -29233,7 +29290,7 @@ var BoardGeomBuilder = class {
     if (ph.shape === "circle" || ph.shape === "circular_hole_with_rect_pad") {
       let cyGeom = null;
       if (ph.shape === "circular_hole_with_rect_pad") {
-        cyGeom = (0, import_primitives8.cylinder)({
+        cyGeom = (0, import_primitives9.cylinder)({
           center: [
             ph.x + (ph.hole_offset_x || 0),
             ph.y + (ph.hole_offset_y || 0),
@@ -29245,7 +29302,7 @@ var BoardGeomBuilder = class {
           // Ensure it cuts through
         });
       } else {
-        cyGeom = (0, import_primitives8.cylinder)({
+        cyGeom = (0, import_primitives9.cylinder)({
           center: [ph.x, ph.y, 0],
           radius: ph.hole_diameter / 2 + M,
           // Add margin for subtraction
@@ -29254,10 +29311,10 @@ var BoardGeomBuilder = class {
         });
       }
       if (!opts.dontCutBoard) {
-        this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, cyGeom);
+        this.boardGeom = (0, import_booleans5.subtract)(this.boardGeom, cyGeom);
       }
       this.padGeoms = this.padGeoms.map(
-        (pg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(pg, cyGeom))
+        (pg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(pg, cyGeom))
       );
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -29271,8 +29328,8 @@ var BoardGeomBuilder = class {
       const rectLength = Math.abs(holeWidth - holeHeight);
       let pillHole;
       if (ph.shape === "pill_hole_with_rect_pad") {
-        pillHole = (0, import_booleans4.union)(
-          (0, import_primitives8.cuboid)({
+        pillHole = (0, import_booleans5.union)(
+          (0, import_primitives9.cuboid)({
             center: [
               ph.x + (ph.hole_offset_x || 0),
               ph.y + (ph.hole_offset_y || 0),
@@ -29280,7 +29337,7 @@ var BoardGeomBuilder = class {
             ],
             size: shouldRotate ? [holeHeight, rectLength, this.ctx.pcbThickness * 1.5] : [rectLength, holeHeight, this.ctx.pcbThickness * 1.5]
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: shouldRotate ? [
               ph.x + (ph.hole_offset_x || 0),
               ph.y + (ph.hole_offset_y || 0) - rectLength / 2,
@@ -29293,7 +29350,7 @@ var BoardGeomBuilder = class {
             radius: holeRadius,
             height: this.ctx.pcbThickness * 1.5
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: shouldRotate ? [
               ph.x + (ph.hole_offset_x || 0),
               ph.y + (ph.hole_offset_y || 0) + rectLength / 2,
@@ -29308,17 +29365,17 @@ var BoardGeomBuilder = class {
           })
         );
       } else {
-        pillHole = (0, import_booleans4.union)(
-          (0, import_primitives8.cuboid)({
+        pillHole = (0, import_booleans5.union)(
+          (0, import_primitives9.cuboid)({
             center: [ph.x, ph.y, 0],
             size: shouldRotate ? [holeHeight, rectLength, this.ctx.pcbThickness * 1.5] : [rectLength, holeHeight, this.ctx.pcbThickness * 1.5]
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: shouldRotate ? [ph.x, ph.y - rectLength / 2, 0] : [ph.x - rectLength / 2, ph.y, 0],
             radius: holeRadius,
             height: this.ctx.pcbThickness * 1.5
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: shouldRotate ? [ph.x, ph.y + rectLength / 2, 0] : [ph.x + rectLength / 2, ph.y, 0],
             radius: holeRadius,
             height: this.ctx.pcbThickness * 1.5
@@ -29326,10 +29383,10 @@ var BoardGeomBuilder = class {
         );
       }
       if (!opts.dontCutBoard) {
-        this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, pillHole);
+        this.boardGeom = (0, import_booleans5.subtract)(this.boardGeom, pillHole);
       }
       this.padGeoms = this.padGeoms.map(
-        (pg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(pg, pillHole))
+        (pg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(pg, pillHole))
       );
       const platedHoleGeom = platedHole(ph, this.ctx, {
         clipGeom: this.boardClipGeom
@@ -29342,22 +29399,22 @@ var BoardGeomBuilder = class {
     const holeDepth = this.ctx.pcbThickness * 1.5;
     const copperInset = 0.02;
     if (hole.hole_shape === "round" || hole.hole_shape === "circle") {
-      const cyGeom = (0, import_primitives8.cylinder)({
+      const cyGeom = (0, import_primitives9.cylinder)({
         center: [hole.x, hole.y, 0],
         radius: hole.hole_diameter / 2 + M,
         height: holeDepth
       });
-      this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, cyGeom);
+      this.boardGeom = (0, import_booleans5.subtract)(this.boardGeom, cyGeom);
       this.padGeoms = this.padGeoms.map(
-        (pg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(pg, cyGeom))
+        (pg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(pg, cyGeom))
       );
-      const copperCut = (0, import_primitives8.cylinder)({
+      const copperCut = (0, import_primitives9.cylinder)({
         center: [hole.x, hole.y, 0],
         radius: hole.hole_diameter / 2 + M / 2,
         height: holeDepth
       });
       this.platedHoleGeoms = this.platedHoleGeoms.map(
-        (phg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(phg, copperCut))
+        (phg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(phg, copperCut))
       );
     } else if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
       const holeWidth = hole.hole_width;
@@ -29367,34 +29424,34 @@ var BoardGeomBuilder = class {
       const isRotated = hole.hole_shape === "rotated_pill";
       let pillHole;
       if (holeWidth > holeHeight) {
-        pillHole = (0, import_booleans4.union)(
-          (0, import_primitives8.cuboid)({
+        pillHole = (0, import_booleans5.union)(
+          (0, import_primitives9.cuboid)({
             center: [hole.x, hole.y, 0],
             size: [rectLength, holeHeight, holeDepth]
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: [hole.x - rectLength / 2, hole.y, 0],
             radius: holeRadius,
             height: holeDepth
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: [hole.x + rectLength / 2, hole.y, 0],
             radius: holeRadius,
             height: holeDepth
           })
         );
       } else {
-        pillHole = (0, import_booleans4.union)(
-          (0, import_primitives8.cuboid)({
+        pillHole = (0, import_booleans5.union)(
+          (0, import_primitives9.cuboid)({
             center: [hole.x, hole.y, 0],
             size: [holeWidth, rectLength, holeDepth]
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: [hole.x, hole.y - rectLength / 2, 0],
             radius: holeRadius,
             height: holeDepth
           }),
-          (0, import_primitives8.cylinder)({
+          (0, import_primitives9.cylinder)({
             center: [hole.x, hole.y + rectLength / 2, 0],
             radius: holeRadius,
             height: holeDepth
@@ -29403,15 +29460,15 @@ var BoardGeomBuilder = class {
       }
       if (isRotated) {
         const rotationRadians = hole.ccw_rotation * Math.PI / 180;
-        pillHole = (0, import_transforms6.rotateZ)(rotationRadians, pillHole);
+        pillHole = (0, import_transforms7.rotateZ)(rotationRadians, pillHole);
       }
-      this.boardGeom = (0, import_booleans4.subtract)(this.boardGeom, pillHole);
+      this.boardGeom = (0, import_booleans5.subtract)(this.boardGeom, pillHole);
       this.padGeoms = this.padGeoms.map(
-        (pg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(pg, pillHole))
+        (pg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(pg, pillHole))
       );
       const copperPill = (0, import_expansions4.expand)({ delta: -copperInset }, pillHole);
       this.platedHoleGeoms = this.platedHoleGeoms.map(
-        (phg) => (0, import_colors6.colorize)(colors.copper, (0, import_booleans4.subtract)(phg, copperPill))
+        (phg) => (0, import_colors7.colorize)(colors.copper, (0, import_booleans5.subtract)(phg, copperPill))
       );
     }
   }
@@ -29426,12 +29483,12 @@ var BoardGeomBuilder = class {
         M,
         rectBorderRadius
       );
-      const positionedPadGeom = (0, import_transforms6.translate)([pad2.x, pad2.y, zPos], basePadGeom);
+      const positionedPadGeom = (0, import_transforms7.translate)([pad2.x, pad2.y, zPos], basePadGeom);
       let finalPadGeom = positionedPadGeom;
       if (this.boardClipGeom) {
-        finalPadGeom = (0, import_booleans4.intersect)(this.boardClipGeom, finalPadGeom);
+        finalPadGeom = (0, import_booleans5.intersect)(this.boardClipGeom, finalPadGeom);
       }
-      finalPadGeom = (0, import_colors6.colorize)(colors.copper, finalPadGeom);
+      finalPadGeom = (0, import_colors7.colorize)(colors.copper, finalPadGeom);
       this.padGeoms.push(finalPadGeom);
     } else if (pad2.shape === "rotated_rect") {
       let basePadGeom = createCenteredRectPadGeom(
@@ -29441,24 +29498,24 @@ var BoardGeomBuilder = class {
         rectBorderRadius
       );
       const rotationRadians = pad2.ccw_rotation * Math.PI / 180;
-      basePadGeom = (0, import_transforms6.rotateZ)(rotationRadians, basePadGeom);
-      const positionedPadGeom = (0, import_transforms6.translate)([pad2.x, pad2.y, zPos], basePadGeom);
+      basePadGeom = (0, import_transforms7.rotateZ)(rotationRadians, basePadGeom);
+      const positionedPadGeom = (0, import_transforms7.translate)([pad2.x, pad2.y, zPos], basePadGeom);
       let finalPadGeom = positionedPadGeom;
       if (this.boardClipGeom) {
-        finalPadGeom = (0, import_booleans4.intersect)(this.boardClipGeom, finalPadGeom);
+        finalPadGeom = (0, import_booleans5.intersect)(this.boardClipGeom, finalPadGeom);
       }
-      finalPadGeom = (0, import_colors6.colorize)(colors.copper, finalPadGeom);
+      finalPadGeom = (0, import_colors7.colorize)(colors.copper, finalPadGeom);
       this.padGeoms.push(finalPadGeom);
     } else if (pad2.shape === "circle") {
-      let padGeom = (0, import_primitives8.cylinder)({
+      let padGeom = (0, import_primitives9.cylinder)({
         center: [pad2.x, pad2.y, zPos],
         radius: pad2.radius,
         height: M
       });
       if (this.boardClipGeom) {
-        padGeom = (0, import_booleans4.intersect)(this.boardClipGeom, padGeom);
+        padGeom = (0, import_booleans5.intersect)(this.boardClipGeom, padGeom);
       }
-      padGeom = (0, import_colors6.colorize)(colors.copper, padGeom);
+      padGeom = (0, import_colors7.colorize)(colors.copper, padGeom);
       this.padGeoms.push(padGeom);
     }
   }
@@ -29472,14 +29529,14 @@ var BoardGeomBuilder = class {
       if (currentSegmentPoints.length >= 2 && currentLayer) {
         const layerSign = currentLayer === "bottom" ? -1 : 1;
         const zCenter = layerSign * this.ctx.pcbThickness / 2 + layerSign * BOARD_SURFACE_OFFSET.traces;
-        const linePath = (0, import_primitives8.line)(currentSegmentPoints);
+        const linePath = (0, import_primitives9.line)(currentSegmentPoints);
         const expandedPath = (0, import_expansions4.expand)(
           { delta: currentWidth / 2, corners: "round" },
           linePath
         );
-        let traceGeom = (0, import_transforms6.translate)(
+        let traceGeom = (0, import_transforms7.translate)(
           [0, 0, zCenter - M / 2],
-          (0, import_extrusions6.extrudeLinear)({ height: M }, expandedPath)
+          (0, import_extrusions7.extrudeLinear)({ height: M }, expandedPath)
         );
         const startPointCoords = currentSegmentPoints[0];
         const endPointCoords = currentSegmentPoints[currentSegmentPoints.length - 1];
@@ -29488,27 +29545,27 @@ var BoardGeomBuilder = class {
           startPointCoords[1]
         );
         if (startHole) {
-          const cuttingCylinder = (0, import_primitives8.cylinder)({
+          const cuttingCylinder = (0, import_primitives9.cylinder)({
             center: [startPointCoords[0], startPointCoords[1], zCenter],
             radius: startHole.diameter / 2 + M,
             height: M
           });
-          traceGeom = (0, import_booleans4.subtract)(traceGeom, cuttingCylinder);
+          traceGeom = (0, import_booleans5.subtract)(traceGeom, cuttingCylinder);
         }
         const endHole = this.getHoleToCut(endPointCoords[0], endPointCoords[1]);
         if (endHole) {
-          const cuttingCylinder = (0, import_primitives8.cylinder)({
+          const cuttingCylinder = (0, import_primitives9.cylinder)({
             center: [endPointCoords[0], endPointCoords[1], zCenter],
             radius: endHole.diameter / 2 + M,
             height: M
           });
-          traceGeom = (0, import_booleans4.subtract)(traceGeom, cuttingCylinder);
+          traceGeom = (0, import_booleans5.subtract)(traceGeom, cuttingCylinder);
         }
         const tracesMaterialColor = tracesMaterialColors[this.board.material] ?? colors.fr4GreenSolderWithMask;
         if (this.boardClipGeom) {
-          traceGeom = (0, import_booleans4.intersect)(this.boardClipGeom, traceGeom);
+          traceGeom = (0, import_booleans5.intersect)(this.boardClipGeom, traceGeom);
         }
-        traceGeom = (0, import_colors6.colorize)(tracesMaterialColor, traceGeom);
+        traceGeom = (0, import_colors7.colorize)(tracesMaterialColor, traceGeom);
         this.traceGeoms.push(traceGeom);
       }
       currentSegmentPoints = [];
@@ -29575,7 +29632,7 @@ var BoardGeomBuilder = class {
         point2[0] + xOffset + st.anchor_position.x,
         point2[1] + yOffset + st.anchor_position.y
       ]);
-      const textPath = (0, import_primitives8.line)(alignedOutline);
+      const textPath = (0, import_primitives9.line)(alignedOutline);
       const fontSize = st.font_size || 0.25;
       const expansionDelta = Math.min(
         Math.max(0.01, fontSize * 0.1),
@@ -29587,19 +29644,19 @@ var BoardGeomBuilder = class {
       );
       let textGeom;
       if (st.layer === "bottom") {
-        textGeom = (0, import_transforms6.translate)(
+        textGeom = (0, import_transforms7.translate)(
           [0, 0, -this.ctx.pcbThickness / 2 - M],
           // Position above board
-          (0, import_extrusions6.extrudeLinear)({ height: 0.012 }, expandedPath)
+          (0, import_extrusions7.extrudeLinear)({ height: 0.012 }, expandedPath)
         );
       } else {
-        textGeom = (0, import_transforms6.translate)(
+        textGeom = (0, import_transforms7.translate)(
           [0, 0, this.ctx.pcbThickness / 2 + M],
           // Position above board
-          (0, import_extrusions6.extrudeLinear)({ height: 0.012 }, expandedPath)
+          (0, import_extrusions7.extrudeLinear)({ height: 0.012 }, expandedPath)
         );
       }
-      textGeom = (0, import_colors6.colorize)([1, 1, 1], textGeom);
+      textGeom = (0, import_colors7.colorize)([1, 1, 1], textGeom);
       this.silkscreenTextGeoms.push(textGeom);
     }
   }
@@ -29615,6 +29672,12 @@ var BoardGeomBuilder = class {
       this.silkscreenLineGeoms.push(lineGeom);
     }
   }
+  processSilkscreenCircle(sc) {
+    const circleGeom = createSilkscreenCircleGeom(sc, this.ctx);
+    if (circleGeom) {
+      this.silkscreenCircleGeoms.push(circleGeom);
+    }
+  }
   processSilkscreenRect(sr) {
     const rectGeom = createSilkscreenRectGeom(sr, this.ctx);
     if (rectGeom) {
@@ -29624,7 +29687,7 @@ var BoardGeomBuilder = class {
   finalize() {
     if (!this.boardGeom) return;
     const boardMaterialColor = boardMaterialColors[this.board.material] ?? colors.fr4Green;
-    this.boardGeom = (0, import_colors6.colorize)(boardMaterialColor, this.boardGeom);
+    this.boardGeom = (0, import_colors7.colorize)(boardMaterialColor, this.boardGeom);
     this.finalGeoms = [
       this.boardGeom,
       ...this.platedHoleGeoms,
@@ -29634,6 +29697,7 @@ var BoardGeomBuilder = class {
       ...this.copperPourGeoms,
       ...this.silkscreenTextGeoms,
       ...this.silkscreenLineGeoms,
+      ...this.silkscreenCircleGeoms,
       ...this.silkscreenRectGeoms,
       ...this.silkscreenPathGeoms
     ];
@@ -30160,11 +30224,13 @@ function createSilkscreenTextureForLayer({
   const pcbSilkscreenPaths = su6(circuitJson).pcb_silkscreen_path.list();
   const pcbSilkscreenLines = su6(circuitJson).pcb_silkscreen_line.list();
   const pcbSilkscreenRects = su6(circuitJson).pcb_silkscreen_rect.list();
+  const pcbSilkscreenCircles = su6(circuitJson).pcb_silkscreen_circle.list();
   const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer);
   const pathsOnLayer = pcbSilkscreenPaths.filter((p) => p.layer === layer);
   const linesOnLayer = pcbSilkscreenLines.filter((l) => l.layer === layer);
   const rectsOnLayer = pcbSilkscreenRects.filter((r) => r.layer === layer);
-  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0 && linesOnLayer.length === 0 && rectsOnLayer.length === 0) {
+  const circlesOnLayer = pcbSilkscreenCircles.filter((c) => c.layer === layer);
+  if (textsOnLayer.length === 0 && pathsOnLayer.length === 0 && linesOnLayer.length === 0 && rectsOnLayer.length === 0 && circlesOnLayer.length === 0) {
     return null;
   }
   const canvas = document.createElement("canvas");
@@ -30209,6 +30275,41 @@ function createSilkscreenTextureForLayer({
     });
     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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.428",
+  "version": "0.0.430",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -61,7 +61,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "bun-match-svg": "^0.0.9",
     "bun-types": "1.2.1",
-    "circuit-json": "0.0.300",
+    "circuit-json": "0.0.303",
     "circuit-to-svg": "^0.0.179",
     "debug": "^4.4.0",
     "jscad-electronics": "^0.0.48",