@tscircuit/3d-viewer 0.0.442 → 0.0.444

package/dist/index.js

@@ -1073,13 +1073,13 @@ var require_rotateZ = __commonJS({
 var require_scale = __commonJS({
   "node_modules/@jscad/modeling/src/maths/vec3/scale.js"(exports, module) {
     "use strict";
-    var scale2 = (out, vector, amount) => {
+    var scale3 = (out, vector, amount) => {
       out[0] = vector[0] * amount;
       out[1] = vector[1] * amount;
       out[2] = vector[2] * amount;
       return out;
     };
-    module.exports = scale2;
+    module.exports = scale3;
   }
 });
 
@@ -1646,7 +1646,7 @@ var require_rotateZ2 = __commonJS({
 var require_scale2 = __commonJS({
   "node_modules/@jscad/modeling/src/maths/mat4/scale.js"(exports, module) {
     "use strict";
-    var scale2 = (out, matrix, dimensions) => {
+    var scale3 = (out, matrix, dimensions) => {
       const x = dimensions[0];
       const y = dimensions[1];
       const z135 = dimensions[2];
@@ -1668,7 +1668,7 @@ var require_scale2 = __commonJS({
       out[15] = matrix[15];
       return out;
     };
-    module.exports = scale2;
+    module.exports = scale3;
   }
 });
 
@@ -2153,12 +2153,12 @@ var require_normalize2 = __commonJS({
 var require_scale3 = __commonJS({
   "node_modules/@jscad/modeling/src/maths/vec2/scale.js"(exports, module) {
     "use strict";
-    var scale2 = (out, vector, amount) => {
+    var scale3 = (out, vector, amount) => {
       out[0] = vector[0] * amount;
       out[1] = vector[1] * amount;
       return out;
     };
-    module.exports = scale2;
+    module.exports = scale3;
   }
 });
 
@@ -2914,7 +2914,7 @@ var require_Face = __commonJS({
     var dot = require_dot();
     var length2 = require_length();
     var normalize = require_normalize();
-    var scale2 = require_scale();
+    var scale3 = require_scale();
     var subtract6 = require_subtract();
     var HalfEdge = require_HalfEdge();
     var VISIBLE = 0;
@@ -2962,7 +2962,7 @@ var require_Face = __commonJS({
           this.nVertices += 1;
         }
         this.area = length2(this.normal);
-        this.normal = scale2(this.normal, this.normal, 1 / this.area);
+        this.normal = scale3(this.normal, this.normal, 1 / this.area);
       }
       computeNormalMinArea(minArea) {
         this.computeNormal();
@@ -2982,9 +2982,9 @@ var require_Face = __commonJS({
           const p2 = maxEdge.head().point;
           const maxVector = subtract6([], p2, p1);
           const maxLength = Math.sqrt(maxSquaredLength);
-          scale2(maxVector, maxVector, 1 / maxLength);
+          scale3(maxVector, maxVector, 1 / maxLength);
           const maxProjection = dot(this.normal, maxVector);
-          scale2(maxVector, maxVector, -maxProjection);
+          scale3(maxVector, maxVector, -maxProjection);
           add(this.normal, this.normal, maxVector);
           normalize(this.normal, this.normal);
         }
@@ -2996,7 +2996,7 @@ var require_Face = __commonJS({
           add(this.centroid, this.centroid, edge.head().point);
           edge = edge.next;
         } while (edge !== this.edge);
-        scale2(this.centroid, this.centroid, 1 / this.nVertices);
+        scale3(this.centroid, this.centroid, 1 / this.nVertices);
       }
       computeNormalAndCentroid(minArea) {
         if (typeof minArea !== "undefined") {
@@ -13656,7 +13656,7 @@ var require_scale4 = __commonJS({
     var geom2 = require_geom2();
     var geom3 = require_geom3();
     var path2 = require_path2();
-    var scale2 = (factors, ...objects) => {
+    var scale3 = (factors, ...objects) => {
       if (!Array.isArray(factors)) throw new Error("factors must be an array");
       objects = flatten(objects);
       if (objects.length === 0) throw new Error("wrong number of arguments");
@@ -13672,11 +13672,11 @@ var require_scale4 = __commonJS({
       });
       return results.length === 1 ? results[0] : results;
     };
-    var scaleX = (factor, ...objects) => scale2([factor, 1, 1], objects);
-    var scaleY = (factor, ...objects) => scale2([1, factor, 1], objects);
-    var scaleZ = (factor, ...objects) => scale2([1, 1, factor], objects);
+    var scaleX = (factor, ...objects) => scale3([factor, 1, 1], objects);
+    var scaleY = (factor, ...objects) => scale3([1, factor, 1], objects);
+    var scaleZ = (factor, ...objects) => scale3([1, 1, factor], objects);
     module.exports = {
-      scale: scale2,
+      scale: scale3,
       scaleX,
       scaleY,
       scaleZ
@@ -14530,7 +14530,7 @@ function MixedStlModel({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale2
+  scale: scale3
 }) {
   const obj = useGlobalObjLoader(url);
   const { rootObject } = useThree();
@@ -14570,8 +14570,8 @@ function MixedStlModel({
         model.rotation.copy(rotation2);
       }
     }
-    if (scale2 !== void 0) {
-      model.scale.setScalar(scale2);
+    if (scale3 !== void 0) {
+      model.scale.setScalar(scale3);
     }
   }, [
     model,
@@ -14581,7 +14581,7 @@ function MixedStlModel({
     Array.isArray(rotation2) ? rotation2[0] : rotation2?.x,
     Array.isArray(rotation2) ? rotation2[1] : rotation2?.y,
     Array.isArray(rotation2) ? rotation2[2] : rotation2?.z,
-    scale2
+    scale3
   ]);
   if (obj instanceof Error) {
     throw obj;
@@ -14639,7 +14639,7 @@ function GltfModel({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale2
+  scale: scale3
 }) {
   const { renderer, rootObject } = useThree();
   const [model, setModel] = useState3(null);
@@ -14666,7 +14666,7 @@ function GltfModel({
     if (!model) return;
     if (position) model.position.fromArray(position);
     if (rotation2) model.rotation.fromArray(rotation2);
-    if (scale2 !== void 0) model.scale.setScalar(scale2);
+    if (scale3 !== void 0) model.scale.setScalar(scale3);
   }, [
     model,
     position?.[0],
@@ -14675,7 +14675,7 @@ function GltfModel({
     rotation2?.[0],
     rotation2?.[1],
     rotation2?.[2],
-    scale2
+    scale3
   ]);
   useEffect5(() => {
     if (!rootObject || !model) return;
@@ -24828,9 +24828,9 @@ function getExpandedStroke(strokeInput, width10) {
       addPoint(current2, normalPrev, -1);
       addPoint(current2, normalNext, -1);
     } else {
-      const scale2 = 1 / miterLength;
-      addPoint(current2, { x: miterX * scale2, y: miterY * scale2 }, 1);
-      addPoint(current2, { x: miterX * scale2, y: miterY * scale2 }, -1);
+      const scale3 = 1 / miterLength;
+      addPoint(current2, { x: miterX * scale3, y: miterY * scale3 }, 1);
+      addPoint(current2, { x: miterX * scale3, y: miterY * scale3 }, -1);
     }
   }
   const lastNormal = getNormal(
@@ -27905,7 +27905,7 @@ var JscadModel = ({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale2
+  scale: scale3
 }) => {
   const { rootObject } = useThree();
   const { threeGeom, material } = useMemo4(() => {
@@ -27936,7 +27936,7 @@ var JscadModel = ({
     if (!mesh) return;
     if (positionOffset) mesh.position.fromArray(positionOffset);
     if (rotationOffset) mesh.rotation.fromArray(rotationOffset);
-    if (scale2 !== void 0) mesh.scale.setScalar(scale2);
+    if (scale3 !== void 0) mesh.scale.setScalar(scale3);
   }, [
     mesh,
     positionOffset?.[0],
@@ -27945,7 +27945,7 @@ var JscadModel = ({
     rotationOffset?.[0],
     rotationOffset?.[1],
     rotationOffset?.[2],
-    scale2
+    scale3
   ]);
   useMemo4(() => {
     if (!material) return;
@@ -27982,7 +27982,7 @@ var FootprinterModel = ({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale2
+  scale: scale3
 }) => {
   const { rootObject } = useThree();
   const group = useMemo5(() => {
@@ -28018,7 +28018,7 @@ var FootprinterModel = ({
     if (!group) return;
     if (positionOffset) group.position.fromArray(positionOffset);
     if (rotationOffset) group.rotation.fromArray(rotationOffset);
-    if (scale2 !== void 0) group.scale.setScalar(scale2);
+    if (scale3 !== void 0) group.scale.setScalar(scale3);
   }, [
     group,
     positionOffset?.[0],
@@ -28027,7 +28027,7 @@ var FootprinterModel = ({
     rotationOffset?.[0],
     rotationOffset?.[1],
     rotationOffset?.[2],
-    scale2
+    scale3
   ]);
   useEffect7(() => {
     if (!group) return;
@@ -28200,6 +28200,12 @@ var AnyCadComponent = ({
       source_component_id: cad_component2.source_component_id
     })?.name;
   }, [circuitJson, cad_component2.source_component_id]);
+  const isThroughHole = useMemo7(() => {
+    const platedHoles = circuitJson.filter(
+      (elm) => elm.type === "pcb_plated_hole" && elm.pcb_component_id === cad_component2.pcb_component_id
+    );
+    return platedHoles.length > 0;
+  }, [circuitJson, cad_component2.pcb_component_id]);
   const url = cad_component2.model_obj_url ?? cad_component2.model_wrl_url ?? cad_component2.model_stl_url;
   const gltfUrl = cad_component2.model_glb_url ?? cad_component2.model_gltf_url;
   const rotationOffset = cad_component2.rotation ? tuple(
@@ -28275,7 +28281,10 @@ var AnyCadComponent = ({
       }
     );
   }
-  if (!visibility.smtModels) {
+  if (isThroughHole && !visibility.throughHoleModels) {
+    return null;
+  }
+  if (!isThroughHole && !visibility.smtModels) {
     return null;
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
@@ -28309,7 +28318,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.441",
+  version: "0.0.443",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28338,6 +28347,7 @@ var package_default = {
   dependencies: {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
+    "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
     "troika-three-text": "^0.52.4"
@@ -29607,7 +29617,7 @@ var createBoardGeomFromCircuitJson = (circuitJson, opts = {}) => {
 };
 
 // src/BoardGeomBuilder.ts
-var import_transforms8 = __toESM(require_transforms(), 1);
+var import_transforms9 = __toESM(require_transforms(), 1);
 var import_primitives10 = __toESM(require_primitives(), 1);
 var import_colors7 = __toESM(require_colors(), 1);
 var import_booleans6 = __toESM(require_booleans(), 1);
@@ -29617,8 +29627,9 @@ import { su as su3 } from "@tscircuit/circuit-json-util";
 var import_primitives4 = __toESM(require_primitives(), 1);
 var import_colors2 = __toESM(require_colors(), 1);
 var import_booleans2 = __toESM(require_booleans(), 1);
-var import_extrusions3 = __toESM(require_extrusions(), 1);
 var import_transforms3 = __toESM(require_transforms(), 1);
+var import_extrusions3 = __toESM(require_extrusions(), 1);
+var import_transforms4 = __toESM(require_transforms(), 1);
 
 // src/utils/rect-border-radius.ts
 function clampRectBorderRadius(width10, height10, rawRadius) {
@@ -29750,7 +29761,7 @@ var createRectPadGeom = ({
   });
   const extruded = (0, import_extrusions3.extrudeLinear)({ height: thickness }, rect2d);
   const offsetZ = center[2] - thickness / 2;
-  return (0, import_transforms3.translate)([center[0], center[1], offsetZ], extruded);
+  return (0, import_transforms4.translate)([center[0], center[1], offsetZ], extruded);
 };
 var platedHole = (plated_hole, ctx, options = {}) => {
   const { clipGeom } = options;
@@ -29775,6 +29786,39 @@ var platedHole = (plated_hole, ctx, options = {}) => {
     });
     return (0, import_colors2.colorize)(colors.copper, (0, import_booleans2.subtract)(copperSolid, drill));
   }
+  if (plated_hole.shape === "oval") {
+    const outerWidth = plated_hole.outer_width || plated_hole.hole_width || 0;
+    const outerHeight = plated_hole.outer_height || plated_hole.hole_height || 0;
+    const holeWidth = plated_hole.hole_width || 0;
+    const holeHeight = plated_hole.hole_height || 0;
+    const copperBody = (() => {
+      const circle2 = (0, import_primitives4.cylinder)({
+        center: [0, 0, 0],
+        radius: 1,
+        height: copperSpan + 0.01,
+        segments: 64
+        // High segment count for smooth ellipse
+      });
+      const scaled = (0, import_transforms3.scale)([outerWidth / 2, outerHeight / 2, 1], circle2);
+      return (0, import_transforms4.translate)([plated_hole.x, plated_hole.y, 0], scaled);
+    })();
+    const copperSolid = maybeClip(copperBody, clipGeom);
+    const drill = (() => {
+      const circle2 = (0, import_primitives4.cylinder)({
+        center: [0, 0, 0],
+        radius: 1,
+        height: throughDrillHeight,
+        segments: 64
+        // High segment count for smooth ellipse
+      });
+      const scaled = (0, import_transforms3.scale)(
+        [Math.max(holeWidth / 2, 0.01), Math.max(holeHeight / 2, 0.01), 1],
+        circle2
+      );
+      return (0, import_transforms4.translate)([plated_hole.x, plated_hole.y, 0], scaled);
+    })();
+    return (0, import_colors2.colorize)(colors.copper, (0, import_booleans2.subtract)(copperSolid, drill));
+  }
   if (plated_hole.shape === "circular_hole_with_rect_pad") {
     const holeOffsetX = plated_hole.hole_offset_x || 0;
     const holeOffsetY = plated_hole.hole_offset_y || 0;
@@ -29813,7 +29857,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
             segments: RECT_PAD_SEGMENTS
           });
           const extruded = (0, import_extrusions3.extrudeLinear)({ height: height10 }, rect2d);
-          return (0, import_transforms3.translate)(
+          return (0, import_transforms4.translate)(
             [plated_hole.x, plated_hole.y, centerZ - height10 / 2],
             extruded
           );
@@ -29866,9 +29910,9 @@ var platedHole = (plated_hole, ctx, options = {}) => {
     const rotationRadians = (plated_hole.ccw_rotation || 0) * Math.PI / 180;
     const rotateAroundCenter = (geom) => {
       if (!rotationRadians) return geom;
-      const toOrigin = (0, import_transforms3.translate)([-plated_hole.x, -plated_hole.y, 0], geom);
-      const rotated = (0, import_transforms3.rotate)([0, 0, rotationRadians], toOrigin);
-      return (0, import_transforms3.translate)([plated_hole.x, plated_hole.y, 0], rotated);
+      const toOrigin = (0, import_transforms4.translate)([-plated_hole.x, -plated_hole.y, 0], geom);
+      const rotated = (0, import_transforms4.rotate)([0, 0, rotationRadians], toOrigin);
+      return (0, import_transforms4.translate)([plated_hole.x, plated_hole.y, 0], rotated);
     };
     const shouldRotate = plated_hole.hole_height > plated_hole.hole_width;
     const holeWidth = shouldRotate ? plated_hole.hole_height : plated_hole.hole_width;
@@ -30039,7 +30083,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
         segments: RECT_PAD_SEGMENTS
       });
       const extruded = (0, import_extrusions3.extrudeLinear)({ height: height10 }, rect2d);
-      return (0, import_transforms3.translate)(
+      return (0, import_transforms4.translate)(
         [plated_hole.x, plated_hole.y, centerZ - height10 / 2],
         extruded
       );
@@ -30101,7 +30145,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
     const createPolygonPad = (thickness, zCenter) => {
       const safeThickness = Math.max(thickness, M);
       const extruded = (0, import_extrusions3.extrudeLinear)({ height: safeThickness }, polygon2d);
-      return (0, import_transforms3.translate)(
+      return (0, import_transforms4.translate)(
         [plated_hole.x, plated_hole.y, zCenter - safeThickness / 2],
         extruded
       );
@@ -30439,7 +30483,7 @@ function createSilkscreenTextGeoms(silkscreenText) {
 var import_primitives5 = __toESM(require_primitives(), 1);
 var import_expansions2 = __toESM(require_expansions(), 1);
 var import_extrusions4 = __toESM(require_extrusions(), 1);
-var import_transforms4 = __toESM(require_transforms(), 1);
+var import_transforms5 = __toESM(require_transforms(), 1);
 var import_colors3 = __toESM(require_colors(), 1);
 
 // src/utils/units.ts
@@ -30502,7 +30546,7 @@ function createSilkscreenPathGeom(sp, ctx) {
   );
   const layerSign = sp.layer === "bottom" ? -1 : 1;
   const zPos = layerSign * ctx.pcbThickness / 2 + layerSign * M * 1.5;
-  let pathGeom = (0, import_transforms4.translate)(
+  let pathGeom = (0, import_transforms5.translate)(
     [0, 0, zPos],
     (0, import_extrusions4.extrudeLinear)({ height: 0.012 }, expandedPath)
     // Standard silkscreen thickness
@@ -30515,7 +30559,7 @@ function createSilkscreenPathGeom(sp, ctx) {
 var import_primitives6 = __toESM(require_primitives(), 1);
 var import_expansions3 = __toESM(require_expansions(), 1);
 var import_extrusions5 = __toESM(require_extrusions(), 1);
-var import_transforms5 = __toESM(require_transforms(), 1);
+var import_transforms6 = __toESM(require_transforms(), 1);
 var import_colors4 = __toESM(require_colors(), 1);
 function createSilkscreenLineGeom(sl, ctx) {
   const x1 = parseDimensionToMm(sl.x1) ?? 0;
@@ -30535,7 +30579,7 @@ function createSilkscreenLineGeom(sl, ctx) {
   );
   const layerSign = sl.layer === "bottom" ? -1 : 1;
   const zPos = layerSign * ctx.pcbThickness / 2 + layerSign * M * 1.5;
-  let lineGeom = (0, import_transforms5.translate)(
+  let lineGeom = (0, import_transforms6.translate)(
     [0, 0, zPos],
     (0, import_extrusions5.extrudeLinear)({ height: 0.012 }, expandedLine)
   );
@@ -30546,7 +30590,7 @@ function createSilkscreenLineGeom(sl, ctx) {
 // src/geoms/create-geoms-for-silkscreen-rect.ts
 var import_primitives7 = __toESM(require_primitives(), 1);
 var import_extrusions6 = __toESM(require_extrusions(), 1);
-var import_transforms6 = __toESM(require_transforms(), 1);
+var import_transforms7 = __toESM(require_transforms(), 1);
 var import_colors5 = __toESM(require_colors(), 1);
 var import_booleans3 = __toESM(require_booleans(), 1);
 var RECT_SEGMENTS = 64;
@@ -30601,14 +30645,14 @@ function createSilkscreenRectGeom(rect, ctx) {
   if (!rectGeom) return void 0;
   const layerSign = rect.layer === "bottom" ? -1 : 1;
   const zPos = layerSign * ctx.pcbThickness / 2 + layerSign * M * 1.5;
-  rectGeom = (0, import_transforms6.translate)([centerX, centerY, zPos], rectGeom);
+  rectGeom = (0, import_transforms7.translate)([centerX, centerY, zPos], rectGeom);
   return (0, import_colors5.colorize)([1, 1, 1], rectGeom);
 }
 
 // src/geoms/create-geoms-for-silkscreen-circle.ts
 var import_primitives8 = __toESM(require_primitives(), 1);
 var import_extrusions7 = __toESM(require_extrusions(), 1);
-var import_transforms7 = __toESM(require_transforms(), 1);
+var import_transforms8 = __toESM(require_transforms(), 1);
 var import_colors6 = __toESM(require_colors(), 1);
 var import_booleans4 = __toESM(require_booleans(), 1);
 var CIRCLE_SEGMENTS = 64;
@@ -30644,7 +30688,7 @@ function createSilkscreenCircleGeom(circleEl, ctx) {
     const filledCircle2d = (0, import_primitives8.circle)({ radius, segments: CIRCLE_SEGMENTS });
     circleGeom = (0, import_extrusions7.extrudeLinear)({ height: baseHeight }, filledCircle2d);
   }
-  const translatedGeom = (0, import_transforms7.translate)([centerX, centerY, zPos], circleGeom);
+  const translatedGeom = (0, import_transforms8.translate)([centerX, centerY, zPos], circleGeom);
   return (0, import_colors6.colorize)([1, 1, 1], translatedGeom);
 }
 
@@ -30748,7 +30792,7 @@ var createCenteredRectPadGeom = (width10, height10, thickness, rectBorderRadius)
     segments: PAD_ROUNDED_SEGMENTS
   });
   const extruded = (0, import_extrusions8.extrudeLinear)({ height: thickness }, rect2d);
-  return (0, import_transforms8.translate)([0, 0, -thickness / 2], extruded);
+  return (0, import_transforms9.translate)([0, 0, -thickness / 2], extruded);
 };
 var buildStateOrder = [
   "initializing",
@@ -31027,8 +31071,8 @@ var BoardGeomBuilder = class {
             segments: PAD_ROUNDED_SEGMENTS
           });
           cutoutGeom = (0, import_extrusions8.extrudeLinear)({ height: cutoutHeight }, rect2d);
-          cutoutGeom = (0, import_transforms8.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
-          cutoutGeom = (0, import_transforms8.translate)(
+          cutoutGeom = (0, import_transforms9.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
+          cutoutGeom = (0, import_transforms9.translate)(
             [cutout.center.x, cutout.center.y, 0],
             cutoutGeom
           );
@@ -31037,14 +31081,14 @@ var BoardGeomBuilder = class {
             center: [0, 0, 0],
             size: [cutout.width, cutout.height, cutoutHeight]
           });
-          cutoutGeom = (0, import_transforms8.translate)(
+          cutoutGeom = (0, import_transforms9.translate)(
             [cutout.center.x, cutout.center.y, 0],
             baseCutoutGeom
           );
         }
         if (cutout.rotation) {
           const rotationRadians = cutout.rotation * Math.PI / 180;
-          cutoutGeom = (0, import_transforms8.rotateZ)(rotationRadians, cutoutGeom);
+          cutoutGeom = (0, import_transforms9.rotateZ)(rotationRadians, cutoutGeom);
         }
         break;
       case "circle":
@@ -31067,7 +31111,7 @@ var BoardGeomBuilder = class {
         }
         const polygon2d = (0, import_primitives10.polygon)({ points: pointsVec2 });
         cutoutGeom = (0, import_extrusions8.extrudeLinear)({ height: cutoutHeight }, polygon2d);
-        cutoutGeom = (0, import_transforms8.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
+        cutoutGeom = (0, import_transforms9.translate)([0, 0, -cutoutHeight / 2], cutoutGeom);
         break;
     }
     if (cutoutGeom) {
@@ -31086,15 +31130,15 @@ var BoardGeomBuilder = class {
       });
       if ("rotation" in pour && pour.rotation) {
         const rotationRadians = pour.rotation * Math.PI / 180;
-        baseGeom = (0, import_transforms8.rotateZ)(rotationRadians, baseGeom);
+        baseGeom = (0, import_transforms9.rotateZ)(rotationRadians, baseGeom);
       }
-      pourGeom = (0, import_transforms8.translate)([pour.center.x, pour.center.y, zPos], baseGeom);
+      pourGeom = (0, import_transforms9.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_extrusions8.extrudeLinear)({ height: M }, pourGeom2);
-        pourGeom = (0, import_transforms8.translate)([0, 0, zPos], pourGeom);
+        pourGeom = (0, import_transforms9.translate)([0, 0, zPos], pourGeom);
       }
     } else if (pour.shape === "polygon") {
       let pointsVec2 = pour.points.map((p) => [p.x, p.y]);
@@ -31109,7 +31153,7 @@ var BoardGeomBuilder = class {
       }
       const polygon2d = (0, import_primitives10.polygon)({ points: pointsVec2 });
       pourGeom = (0, import_extrusions8.extrudeLinear)({ height: M }, polygon2d);
-      pourGeom = (0, import_transforms8.translate)([0, 0, zPos], pourGeom);
+      pourGeom = (0, import_transforms9.translate)([0, 0, zPos], pourGeom);
     }
     if (pourGeom) {
       if (this.boardClipGeom) {
@@ -31181,9 +31225,9 @@ var BoardGeomBuilder = class {
       );
       if (ph.ccw_rotation) {
         const rotationRadians = ph.ccw_rotation * Math.PI / 180;
-        pillHole = (0, import_transforms8.translate)(
+        pillHole = (0, import_transforms9.translate)(
           [ph.x, ph.y, 0],
-          (0, import_transforms8.rotateZ)(rotationRadians, (0, import_transforms8.translate)([-ph.x, -ph.y, 0], pillHole))
+          (0, import_transforms9.rotateZ)(rotationRadians, (0, import_transforms9.translate)([-ph.x, -ph.y, 0], pillHole))
         );
       }
       if (!opts.dontCutBoard) {
@@ -31333,7 +31377,7 @@ var BoardGeomBuilder = class {
       }
       if (isRotated) {
         const rotationRadians = hole.ccw_rotation * Math.PI / 180;
-        pillHole = (0, import_transforms8.rotateZ)(rotationRadians, pillHole);
+        pillHole = (0, import_transforms9.rotateZ)(rotationRadians, pillHole);
       }
       this.boardGeom = (0, import_booleans6.subtract)(this.boardGeom, pillHole);
       this.padGeoms = this.padGeoms.map(
@@ -31356,7 +31400,7 @@ var BoardGeomBuilder = class {
         M,
         rectBorderRadius
       );
-      const positionedPadGeom = (0, import_transforms8.translate)([pad2.x, pad2.y, zPos], basePadGeom);
+      const positionedPadGeom = (0, import_transforms9.translate)([pad2.x, pad2.y, zPos], basePadGeom);
       let finalPadGeom = positionedPadGeom;
       if (this.boardClipGeom) {
         finalPadGeom = (0, import_booleans6.intersect)(this.boardClipGeom, finalPadGeom);
@@ -31371,8 +31415,8 @@ var BoardGeomBuilder = class {
         rectBorderRadius
       );
       const rotationRadians = pad2.ccw_rotation * Math.PI / 180;
-      basePadGeom = (0, import_transforms8.rotateZ)(rotationRadians, basePadGeom);
-      const positionedPadGeom = (0, import_transforms8.translate)([pad2.x, pad2.y, zPos], basePadGeom);
+      basePadGeom = (0, import_transforms9.rotateZ)(rotationRadians, basePadGeom);
+      const positionedPadGeom = (0, import_transforms9.translate)([pad2.x, pad2.y, zPos], basePadGeom);
       let finalPadGeom = positionedPadGeom;
       if (this.boardClipGeom) {
         finalPadGeom = (0, import_booleans6.intersect)(this.boardClipGeom, finalPadGeom);
@@ -31407,7 +31451,7 @@ var BoardGeomBuilder = class {
           { delta: currentWidth / 2, corners: "round" },
           linePath
         );
-        let traceGeom = (0, import_transforms8.translate)(
+        let traceGeom = (0, import_transforms9.translate)(
           [0, 0, zCenter - M / 2],
           (0, import_extrusions8.extrudeLinear)({ height: M }, expandedPath)
         );
@@ -31517,13 +31561,13 @@ var BoardGeomBuilder = class {
       );
       let textGeom;
       if (st.layer === "bottom") {
-        textGeom = (0, import_transforms8.translate)(
+        textGeom = (0, import_transforms9.translate)(
           [0, 0, -this.ctx.pcbThickness / 2 - M],
           // Position above board
           (0, import_extrusions8.extrudeLinear)({ height: 0.012 }, expandedPath)
         );
       } else {
-        textGeom = (0, import_transforms8.translate)(
+        textGeom = (0, import_transforms9.translate)(
           [0, 0, this.ctx.pcbThickness / 2 + M],
           // Position above board
           (0, import_extrusions8.extrudeLinear)({ height: 0.012 }, expandedPath)
@@ -31643,7 +31687,7 @@ var Text = ({
   parent,
   position,
   rotation: rotation2,
-  scale: scale2,
+  scale: scale3,
   color,
   fontSize,
   anchorX,
@@ -31656,7 +31700,7 @@ var Text = ({
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
     if (rotation2) textMesh.rotation.fromArray(rotation2);
-    if (scale2) textMesh.scale.fromArray(scale2);
+    if (scale3) textMesh.scale.fromArray(scale3);
     textMesh.color = color || "white";
     textMesh.fontSize = fontSize || 1;
     textMesh.anchorX = anchorX || "center";
@@ -31669,7 +31713,7 @@ var Text = ({
     children,
     position,
     rotation2,
-    scale2,
+    scale3,
     color,
     fontSize,
     anchorX,
@@ -33078,6 +33122,105 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
         geometry: threeGeom,
         color: COPPER_COLOR
       });
+    } else if (ph.shape === "oval") {
+      const holeW = ph.hole_width;
+      const holeH = ph.hole_height;
+      const outerW = ph.outer_width ?? holeW + 0.4;
+      const outerH = ph.outer_height ?? holeH + 0.4;
+      const drillW = holeW + 2 * MANIFOLD_Z_OFFSET;
+      const drillH = holeH + 2 * MANIFOLD_Z_OFFSET;
+      const drillDepth = pcbThickness * 1.2;
+      let boardDrillPoints = createEllipsePoints(
+        drillW,
+        drillH,
+        SMOOTH_CIRCLE_SEGMENTS
+      );
+      if (arePointsClockwise3(boardDrillPoints)) {
+        boardDrillPoints = boardDrillPoints.reverse();
+      }
+      const boardDrillCrossSection = CrossSection.ofPolygons([boardDrillPoints]);
+      manifoldInstancesForCleanup.push(boardDrillCrossSection);
+      let boardDrillOp = Manifold.extrude(
+        boardDrillCrossSection,
+        drillDepth,
+        0,
+        0,
+        [1, 1],
+        true
+      );
+      manifoldInstancesForCleanup.push(boardDrillOp);
+      if (ph.ccw_rotation) {
+        const rotatedDrill = boardDrillOp.rotate([0, 0, ph.ccw_rotation]);
+        manifoldInstancesForCleanup.push(rotatedDrill);
+        boardDrillOp = rotatedDrill;
+      }
+      const translatedDrill = boardDrillOp.translate([ph.x, ph.y, 0]);
+      manifoldInstancesForCleanup.push(translatedDrill);
+      platedHoleBoardDrills.push(translatedDrill);
+      const copperPartThickness = pcbThickness + 2 * MANIFOLD_Z_OFFSET;
+      let outerPoints = createEllipsePoints(
+        outerW,
+        outerH,
+        SMOOTH_CIRCLE_SEGMENTS
+      );
+      if (arePointsClockwise3(outerPoints)) {
+        outerPoints = outerPoints.reverse();
+      }
+      const outerCrossSection = CrossSection.ofPolygons([outerPoints]);
+      manifoldInstancesForCleanup.push(outerCrossSection);
+      let outerCopperOp = Manifold.extrude(
+        outerCrossSection,
+        copperPartThickness,
+        0,
+        0,
+        [1, 1],
+        true
+      );
+      manifoldInstancesForCleanup.push(outerCopperOp);
+      let innerPoints = createEllipsePoints(
+        holeW,
+        holeH,
+        SMOOTH_CIRCLE_SEGMENTS
+      );
+      if (arePointsClockwise3(innerPoints)) {
+        innerPoints = innerPoints.reverse();
+      }
+      const innerCrossSection = CrossSection.ofPolygons([innerPoints]);
+      manifoldInstancesForCleanup.push(innerCrossSection);
+      let innerDrillOp = Manifold.extrude(
+        innerCrossSection,
+        copperPartThickness * 1.05,
+        0,
+        0,
+        [1, 1],
+        true
+      );
+      manifoldInstancesForCleanup.push(innerDrillOp);
+      let finalPlatedPartOp = outerCopperOp.subtract(innerDrillOp);
+      manifoldInstancesForCleanup.push(finalPlatedPartOp);
+      if (ph.ccw_rotation) {
+        const rotatedOp = finalPlatedPartOp.rotate([0, 0, ph.ccw_rotation]);
+        manifoldInstancesForCleanup.push(rotatedOp);
+        finalPlatedPartOp = rotatedOp;
+      }
+      const translatedPlatedPart = finalPlatedPartOp.translate([ph.x, ph.y, 0]);
+      manifoldInstancesForCleanup.push(translatedPlatedPart);
+      let finalCopperOp = translatedPlatedPart;
+      if (boardClipVolume) {
+        const clipped = Manifold.intersection([
+          translatedPlatedPart,
+          boardClipVolume
+        ]);
+        manifoldInstancesForCleanup.push(clipped);
+        finalCopperOp = clipped;
+      }
+      platedHoleCopperOpsForSubtract.push(finalCopperOp);
+      const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
+      platedHoleCopperGeoms.push({
+        key: `ph-${ph.pcb_plated_hole_id || index2}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR
+      });
     } else if (ph.shape === "circular_hole_with_rect_pad") {
       const holeOffsetX = ph.hole_offset_x || 0;
       const holeOffsetY = ph.hole_offset_y || 0;
@@ -34547,6 +34690,11 @@ import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef11, use
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
+var lastMouseX = 0;
+var lastMouseY = 0;
+var viewerElement = null;
+var mouseTrackingAttached = false;
+var MAX_PARENT_DEPTH = 20;
 var parseShortcut = (shortcut) => {
   const parts = shortcut.toLowerCase().split("+");
   const key = parts[parts.length - 1];
@@ -34576,10 +34724,53 @@ var isEditableTarget = (target) => {
   if (editableTags.includes(tagName)) {
     return true;
   }
-  return Boolean(element.getAttribute?.("contenteditable"));
+  const contentEditable = element.getAttribute?.("contenteditable");
+  if (contentEditable === "true" || contentEditable === "") {
+    return true;
+  }
+  let current2 = element.parentElement;
+  for (let depth = 0; depth < MAX_PARENT_DEPTH && current2; depth++) {
+    const tagName2 = current2.tagName;
+    if (editableTags.includes(tagName2)) {
+      return true;
+    }
+    const contentEditable2 = current2.getAttribute?.("contenteditable");
+    if (contentEditable2 === "true" || contentEditable2 === "") {
+      return true;
+    }
+    current2 = current2.parentElement;
+  }
+  return false;
+};
+var isInputFocused = () => {
+  if (typeof document === "undefined") return false;
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+  const tagName = activeElement.tagName;
+  if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+    return true;
+  }
+  const contentEditable = activeElement.getAttribute("contenteditable");
+  return contentEditable === "true" || contentEditable === "";
+};
+var isMouseOverViewer = () => {
+  if (!viewerElement) return true;
+  const rect = viewerElement.getBoundingClientRect();
+  return lastMouseX >= rect.left && lastMouseX <= rect.right && lastMouseY >= rect.top && lastMouseY <= rect.bottom;
+};
+var attachMouseTracking = () => {
+  if (mouseTrackingAttached || typeof window === "undefined") return;
+  window.addEventListener("mousemove", (e) => {
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+  });
+  mouseTrackingAttached = true;
 };
 var handleKeydown = (event) => {
-  if (isEditableTarget(event.target)) {
+  if (isEditableTarget(event.target) || isInputFocused()) {
+    return;
+  }
+  if (viewerElement && !isMouseOverViewer()) {
     return;
   }
   hotkeyRegistry.forEach((entry) => {
@@ -34645,6 +34836,29 @@ var useHotkeyRegistry = () => {
   useEffect25(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
+var registerHotkeyViewer = (element) => {
+  viewerElement = element;
+  attachMouseTracking();
+};
+
+// src/contexts/ToastContext.tsx
+import { Toaster, toast as hotToast } from "react-hot-toast";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var useToast = () => {
+  return {
+    showToast: (message, duration = 2e3) => {
+      hotToast(message, { duration });
+    }
+  };
+};
+var ToastProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    children,
+    /* @__PURE__ */ jsx18(Toaster, { position: "bottom-right" })
+  ] });
+};
 
 // src/components/ContextMenu.tsx
 import { useState as useState34 } from "react";
@@ -34702,7 +34916,7 @@ function useComposedRefs(...refs) {
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React13 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -34713,7 +34927,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React13.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx19(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -34843,7 +35057,7 @@ import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React16 from "react";
-import { Fragment as Fragment23, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx20 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -34861,9 +35075,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ jsx20(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx20(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -34928,7 +35142,7 @@ function getElementRef(element) {
 }
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var NODES = [
   "a",
   "button",
@@ -34956,7 +35170,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx20(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx21(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -34970,9 +35184,9 @@ import * as React42 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 import React18 from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-import React23 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
+import React23 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope3] = createContextScope(PROVIDER_NAME);
@@ -34984,7 +35198,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx21(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -34994,7 +35208,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx21(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -35011,7 +35225,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx21(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -35038,7 +35252,7 @@ function createCollection(name) {
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React19.useContext(DirectionContext);
@@ -35074,7 +35288,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -35162,7 +35376,7 @@ var DismissableLayer = React24.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       Primitive.div,
       {
         ...layerProps,
@@ -35196,7 +35410,7 @@ var DismissableLayerBranch = React24.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx24(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx25(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -35308,7 +35522,7 @@ function createFocusGuard() {
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React26 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -35427,7 +35641,7 @@ var FocusScope = React26.forwardRef((props, forwardedRef) => {
     },
     [loop, trapped, focusScope.paused]
   );
-  return /* @__PURE__ */ jsx25(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx26(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -36595,21 +36809,21 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const clientRect = element.getBoundingClientRect();
   const domElement = unwrapElement(element);
-  let scale2 = createCoords(1);
+  let scale3 = createCoords(1);
   if (includeScale) {
     if (offsetParent) {
       if (isElement(offsetParent)) {
-        scale2 = getScale(offsetParent);
+        scale3 = getScale(offsetParent);
       }
     } else {
-      scale2 = getScale(element);
+      scale3 = getScale(element);
     }
   }
   const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
-  let x = (clientRect.left + visualOffsets.x) / scale2.x;
-  let y = (clientRect.top + visualOffsets.y) / scale2.y;
-  let width10 = clientRect.width / scale2.x;
-  let height10 = clientRect.height / scale2.y;
+  let x = (clientRect.left + visualOffsets.x) / scale3.x;
+  let y = (clientRect.top + visualOffsets.y) / scale3.y;
+  let width10 = clientRect.width / scale3.x;
+  let height10 = clientRect.height / scale3.y;
   if (domElement) {
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
@@ -36671,7 +36885,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     scrollLeft: 0,
     scrollTop: 0
   };
-  let scale2 = createCoords(1);
+  let scale3 = createCoords(1);
   const offsets = createCoords(0);
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
@@ -36680,17 +36894,17 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     }
     if (isHTMLElement(offsetParent)) {
       const offsetRect = getBoundingClientRect(offsetParent);
-      scale2 = getScale(offsetParent);
+      scale3 = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
-    width: rect.width * scale2.x,
-    height: rect.height * scale2.y,
-    x: rect.x * scale2.x - scroll.scrollLeft * scale2.x + offsets.x + htmlOffset.x,
-    y: rect.y * scale2.y - scroll.scrollTop * scale2.y + offsets.y + htmlOffset.y
+    width: rect.width * scale3.x,
+    height: rect.height * scale3.y,
+    x: rect.x * scale3.x - scroll.scrollLeft * scale3.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale3.y - scroll.scrollTop * scale3.y + offsets.y + htmlOffset.y
   };
 }
 function getClientRects(element) {
@@ -36757,11 +36971,11 @@ function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
   const top = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
-  const scale2 = isHTMLElement(element) ? getScale(element) : createCoords(1);
-  const width10 = element.clientWidth * scale2.x;
-  const height10 = element.clientHeight * scale2.y;
-  const x = left * scale2.x;
-  const y = top * scale2.y;
+  const scale3 = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width10 = element.clientWidth * scale3.x;
+  const height10 = element.clientHeight * scale3.y;
+  const x = left * scale3.x;
+  const y = top * scale3.y;
   return {
     width: width10,
     height: height10,
@@ -37417,11 +37631,11 @@ var arrow3 = (options, deps) => ({
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 import * as React29 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var NAME = "Arrow";
 var Arrow = React29.forwardRef((props, forwardedRef) => {
   const { children, width: width10 = 10, height: height10 = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Primitive.svg,
     {
       ...arrowProps,
@@ -37430,7 +37644,7 @@ var Arrow = React29.forwardRef((props, forwardedRef) => {
       height: height10,
       viewBox: "0 0 30 10",
       preserveAspectRatio: "none",
-      children: props.asChild ? children : /* @__PURE__ */ jsx26("polygon", { points: "0,0 30,0 15,10" })
+      children: props.asChild ? children : /* @__PURE__ */ jsx27("polygon", { points: "0,0 30,0 15,10" })
     }
   );
 });
@@ -37475,14 +37689,14 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React31.useState(null);
-  return /* @__PURE__ */ jsx27(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ jsx28(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -37500,7 +37714,7 @@ var PopperAnchor = React31.forwardRef(
         context.onAnchorChange(anchorRef.current);
       }
     });
-    return virtualRef ? null : /* @__PURE__ */ jsx27(Primitive.div, { ...anchorProps, ref: composedRefs });
+    return virtualRef ? null : /* @__PURE__ */ jsx28(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME;
@@ -37593,7 +37807,7 @@ var PopperContent = React31.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         ref: refs.setFloating,
@@ -37617,7 +37831,7 @@ var PopperContent = React31.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -37626,7 +37840,7 @@ var PopperContent = React31.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -37663,7 +37877,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "span",
       {
         ref: contentContext.onArrowChange,
@@ -37686,7 +37900,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
           }[contentContext.placedSide],
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           Root,
           {
             ...arrowProps,
@@ -37749,14 +37963,14 @@ var Arrow2 = PopperArrow;
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React32 from "react";
 import ReactDOM4 from "react-dom";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
 var Portal = React32.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React32.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx28(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx29(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -37888,7 +38102,7 @@ function getElementRef2(element) {
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import * as React34 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
 var GROUP_NAME = "RovingFocusGroup";
@@ -37900,7 +38114,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
 var RovingFocusGroup = React34.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx29(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+    return /* @__PURE__ */ jsx30(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }
 );
 RovingFocusGroup.displayName = GROUP_NAME;
@@ -37938,7 +38152,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -37959,7 +38173,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -38017,14 +38231,14 @@ var RovingFocusGroupItem = React34.forwardRef(
         return () => onFocusableItemRemove();
       }
     }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -38935,7 +39149,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -38980,7 +39194,7 @@ var Menu = (props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -38988,7 +39202,7 @@ var Menu = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -39008,7 +39222,7 @@ var MenuAnchor = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx30(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
 MenuAnchor.displayName = ANCHOR_NAME2;
@@ -39019,7 +39233,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME2, {
 var MenuPortal = (props) => {
   const { __scopeMenu, forceMount, children, container } = props;
   const context = useMenuContext(PORTAL_NAME2, __scopeMenu);
-  return /* @__PURE__ */ jsx30(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx31(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Portal, { asChild: true, container, children }) }) });
 };
 MenuPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "MenuContent";
@@ -39030,7 +39244,7 @@ var MenuContent = React42.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
-    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx30(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx30(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx31(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx31(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React42.forwardRef(
@@ -39042,7 +39256,7 @@ var MenuRootContentModal = React42.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         ...props,
@@ -39062,7 +39276,7 @@ var MenuRootContentModal = React42.forwardRef(
 );
 var MenuRootContentNonModal = React42.forwardRef((props, forwardedRef) => {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     MenuContentImpl,
     {
       ...props,
@@ -39134,7 +39348,7 @@ var MenuContentImpl = React42.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -39163,7 +39377,7 @@ var MenuContentImpl = React42.forwardRef(
         onPointerGraceIntentChange: React42.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
           FocusScope,
           {
             asChild: true,
@@ -39173,7 +39387,7 @@ var MenuContentImpl = React42.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               DismissableLayer,
               {
                 asChild: true,
@@ -39183,7 +39397,7 @@ var MenuContentImpl = React42.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx30(
+                children: /* @__PURE__ */ jsx31(
                   Root3,
                   {
                     asChild: true,
@@ -39197,7 +39411,7 @@ var MenuContentImpl = React42.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx30(
+                    children: /* @__PURE__ */ jsx31(
                       Content,
                       {
                         role: "menu",
@@ -39262,7 +39476,7 @@ var GROUP_NAME2 = "MenuGroup";
 var MenuGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...groupProps } = props;
-    return /* @__PURE__ */ jsx30(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
   }
 );
 MenuGroup.displayName = GROUP_NAME2;
@@ -39270,7 +39484,7 @@ var LABEL_NAME = "MenuLabel";
 var MenuLabel = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...labelProps } = props;
-    return /* @__PURE__ */ jsx30(Primitive.div, { ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { ...labelProps, ref: forwardedRef });
   }
 );
 MenuLabel.displayName = LABEL_NAME;
@@ -39297,7 +39511,7 @@ var MenuItem = React42.forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         ...itemProps,
@@ -39339,13 +39553,13 @@ var MenuItemImpl = React42.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx30(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
           Primitive.div,
           {
             role: "menuitem",
@@ -39384,7 +39598,7 @@ var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
 var MenuCheckboxItem = React42.forwardRef(
   (props, forwardedRef) => {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
-    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -39412,7 +39626,7 @@ var MenuRadioGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef(onValueChange);
-    return /* @__PURE__ */ jsx30(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx30(MenuGroup, { ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx31(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx31(MenuGroup, { ...groupProps, ref: forwardedRef }) });
   }
 );
 MenuRadioGroup.displayName = RADIO_GROUP_NAME;
@@ -39422,7 +39636,7 @@ var MenuRadioItem = React42.forwardRef(
     const { value, ...radioItemProps } = props;
     const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
     const checked = value === context.value;
-    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemradio",
@@ -39449,11 +39663,11 @@ var MenuItemIndicator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
     const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Presence,
       {
         present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(
           Primitive.span,
           {
             ...itemIndicatorProps,
@@ -39470,7 +39684,7 @@ var SEPARATOR_NAME = "MenuSeparator";
 var MenuSeparator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Primitive.div,
       {
         role: "separator",
@@ -39487,7 +39701,7 @@ var MenuArrow = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx30(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 MenuArrow.displayName = ARROW_NAME2;
@@ -39504,7 +39718,7 @@ var MenuSub = (props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -39512,7 +39726,7 @@ var MenuSub = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -39549,7 +39763,7 @@ var MenuSubTrigger = React42.forwardRef(
         onPointerGraceIntentChange(null);
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
-    return /* @__PURE__ */ jsx30(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         id: subContext.triggerId,
@@ -39638,7 +39852,7 @@ var MenuSubContent = React42.forwardRef(
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
     const ref = React42.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -39749,7 +39963,7 @@ var SubTrigger = MenuSubTrigger;
 var SubContent = MenuSubContent;
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
   DROPDOWN_MENU_NAME,
@@ -39775,7 +39989,7 @@ var DropdownMenu = (props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -39786,7 +40000,7 @@ var DropdownMenu = (props) => {
       onOpenChange: setOpen,
       onOpenToggle: React43.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx31(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx32(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 };
@@ -39797,7 +40011,7 @@ var DropdownMenuTrigger = React43.forwardRef(
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
         type: "button",
@@ -39831,7 +40045,7 @@ var PORTAL_NAME3 = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(Portal2, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx32(Portal2, { ...menuScope, ...portalProps });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME3;
 var CONTENT_NAME3 = "DropdownMenuContent";
@@ -39841,7 +40055,7 @@ var DropdownMenuContent = React43.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React43.useRef(false);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       Content2,
       {
         id: context.contentId,
@@ -39881,7 +40095,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -39890,7 +40104,7 @@ var DropdownMenuLabel = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...labelProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
   }
 );
 DropdownMenuLabel.displayName = LABEL_NAME2;
@@ -39899,7 +40113,7 @@ var DropdownMenuItem = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }
 );
 DropdownMenuItem.displayName = ITEM_NAME3;
@@ -39907,35 +40121,35 @@ var CHECKBOX_ITEM_NAME2 = "DropdownMenuCheckboxItem";
 var DropdownMenuCheckboxItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME2;
 var RADIO_GROUP_NAME2 = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME2;
 var RADIO_ITEM_NAME2 = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME2;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME2 = "DropdownMenuSeparator";
 var DropdownMenuSeparator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME2;
 var ARROW_NAME3 = "DropdownMenuArrow";
@@ -39943,7 +40157,7 @@ var DropdownMenuArrow = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...arrowProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
   }
 );
 DropdownMenuArrow.displayName = ARROW_NAME3;
@@ -39956,20 +40170,20 @@ var DropdownMenuSub = (props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx31(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx32(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 };
 var SUB_TRIGGER_NAME2 = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME2;
 var SUB_CONTENT_NAME2 = "DropdownMenuSubContent";
 var DropdownMenuSubContent = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     SubContent,
     {
       ...menuScope,
@@ -40004,8 +40218,8 @@ var SubContent2 = DropdownMenuSubContent;
 import { useState as useState33 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx32(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40017,10 +40231,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx32(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx32("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx33("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40037,10 +40251,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx32(
+var DotIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40053,12 +40267,12 @@ var DotIcon = () => /* @__PURE__ */ jsx32(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx32("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx33("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -40109,10 +40323,10 @@ var AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const [appearanceSubOpen, setAppearanceSubOpen] = useState33(false);
   const [hoveredItem, setHoveredItem] = useState33(null);
-  return /* @__PURE__ */ jsxs7(Fragment9, { children: [
-    /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
-    /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
-      /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment10, { children: [
+    /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
+    /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
+      /* @__PURE__ */ jsxs8(
         SubTrigger2,
         {
           style: {
@@ -40124,8 +40338,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx33("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx34(
               "div",
               {
                 style: {
@@ -40134,20 +40348,20 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx33(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx33(Portal22, { children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
         SubContent2,
         {
           style: { ...contentStyles, marginLeft: -2 },
           collisionPadding: 10,
           avoidCollisions: true,
           children: [
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40163,12 +40377,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40184,12 +40398,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40205,12 +40419,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40226,12 +40440,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40250,12 +40464,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40271,8 +40485,32 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "CAD Models" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "throughHoleModels" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility(
+                    "throughHoleModels",
+                    !visibility.throughHoleModels
+                  );
+                },
+                onMouseEnter: () => setHoveredItem("throughHoleModels"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("throughHoleModels"),
+                children: [
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
             )
@@ -40284,7 +40522,7 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -40368,7 +40606,7 @@ var ContextMenu = ({
   const { cameraType, setCameraType } = useCameraController();
   const [cameraSubOpen, setCameraSubOpen] = useState34(false);
   const [hoveredItem, setHoveredItem] = useState34(null);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ref: menuRef,
@@ -40379,9 +40617,9 @@ var ContextMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs8(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx34(Trigger, { asChild: true, children: /* @__PURE__ */ jsx34("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9(Root22, { open: true, modal: false, children: [
+        /* @__PURE__ */ jsx35(Trigger, { asChild: true, children: /* @__PURE__ */ jsx35("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs9(
           Content22,
           {
             style: contentStyles2,
@@ -40390,8 +40628,8 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
-                /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(Sub2, { onOpenChange: setCameraSubOpen, children: [
+                /* @__PURE__ */ jsxs9(
                   SubTrigger2,
                   {
                     style: {
@@ -40403,14 +40641,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx34(
+                      /* @__PURE__ */ jsx35(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Camera Position"
                         }
                       ),
-                      /* @__PURE__ */ jsxs8(
+                      /* @__PURE__ */ jsxs9(
                         "div",
                         {
                           style: {
@@ -40420,21 +40658,21 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx34("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx35("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsx34(
+                /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsx35(
                   SubContent2,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
                     avoidCollisions: true,
-                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
+                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs9(
                       Item22,
                       {
                         style: {
@@ -40450,8 +40688,8 @@ var ContextMenu = ({
                         onMouseLeave: () => setHoveredItem(null),
                         onTouchStart: () => setHoveredItem(option),
                         children: [
-                          /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx34(DotIcon, {}) }),
-                          /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                          /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx35(DotIcon, {}) }),
+                          /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option })
                         ]
                       },
                       option
@@ -40459,7 +40697,7 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40476,12 +40714,12 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("autorotate"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40500,14 +40738,14 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("cameratype"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx35(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 Item22,
                 {
                   style: {
@@ -40519,11 +40757,11 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40540,12 +40778,12 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("engine"),
                   children: [
-                    /* @__PURE__ */ jsxs8("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsxs9("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
                       "Switch to ",
                       engine === "jscad" ? "Manifold" : "JSCAD",
                       " Engine"
                     ] }),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -40559,8 +40797,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40573,8 +40811,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -40588,8 +40826,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   style: {
@@ -40600,7 +40838,7 @@ var ContextMenu = ({
                     paddingTop: 4,
                     paddingBottom: 4
                   },
-                  children: /* @__PURE__ */ jsxs8(
+                  children: /* @__PURE__ */ jsxs9(
                     "span",
                     {
                       style: {
@@ -40628,7 +40866,7 @@ var ContextMenu = ({
 
 // src/components/KeyboardShortcutsDialog.tsx
 import { useEffect as useEffect41, useMemo as useMemo27, useRef as useRef25, useState as useState35 } from "react";
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
@@ -40667,7 +40905,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       role: "dialog",
@@ -40682,7 +40920,7 @@ var KeyboardShortcutsDialog = ({
         zIndex: 9999
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -40698,7 +40936,7 @@ var KeyboardShortcutsDialog = ({
           },
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs10(
               "header",
               {
                 style: {
@@ -40706,8 +40944,8 @@ var KeyboardShortcutsDialog = ({
                   borderBottom: "1px solid rgba(255, 255, 255, 0.08)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx36(
                       "h2",
                       {
                         style: {
@@ -40719,7 +40957,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "button",
                       {
                         type: "button",
@@ -40735,7 +40973,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36(
                     "input",
                     {
                       ref: inputRef,
@@ -40758,7 +40996,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx35("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsx36("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs10(
               "table",
               {
                 style: {
@@ -40767,23 +41005,23 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs10("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx35("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
                     "td",
                     {
                       colSpan: 2,
                       style: { padding: "24px", textAlign: "center" },
                       children: "No shortcuts found"
                     }
-                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs9(
+                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs10(
                     "tr",
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx35(
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx36(
                           "span",
                           {
                             style: {
@@ -40801,7 +41039,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -40817,7 +41055,7 @@ var KeyboardShortcutsDialog = ({
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState36("manifold");
   const containerRef = useRef26(null);
@@ -40833,6 +41071,7 @@ var CadViewerInner = (props) => {
   const [cameraPreset, setCameraPreset] = useState36("Custom");
   const { cameraType, setCameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
+  const { showToast } = useToast();
   const cameraControllerRef = useRef26(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
@@ -40895,6 +41134,41 @@ var CadViewerInner = (props) => {
       description: "Open keyboard shortcuts"
     }
   );
+  useRegisteredHotkey(
+    "toggle_smt_models",
+    () => {
+      const newVisibility = !visibility.smtModels;
+      setLayerVisibility("smtModels", newVisibility);
+      showToast(
+        newVisibility ? "SMT components visible" : "SMT components hidden",
+        1500
+      );
+    },
+    {
+      shortcut: "shift+s",
+      description: "Toggle surface mount components"
+    }
+  );
+  useRegisteredHotkey(
+    "toggle_through_hole_models",
+    () => {
+      const newVisibility = !visibility.throughHoleModels;
+      setLayerVisibility("throughHoleModels", newVisibility);
+      showToast(
+        newVisibility ? "Through-hole components visible" : "Through-hole components hidden",
+        1500
+      );
+    },
+    {
+      shortcut: "shift+t",
+      description: "Toggle through-hole components"
+    }
+  );
+  useEffect42(() => {
+    if (containerRef.current) {
+      registerHotkeyViewer(containerRef.current);
+    }
+  }, []);
   useEffect42(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
@@ -40923,7 +41197,7 @@ var CadViewerInner = (props) => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -40939,7 +41213,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx36(
+        engine === "jscad" ? /* @__PURE__ */ jsx37(
           CadViewerJscad,
           {
             ...props,
@@ -40948,7 +41222,7 @@ var CadViewerInner = (props) => {
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx36(
+        ) : /* @__PURE__ */ jsx37(
           CadViewerManifold_default,
           {
             ...props,
@@ -40958,7 +41232,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             style: {
@@ -40975,11 +41249,11 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx36("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx37("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx36(
+        menuVisible && /* @__PURE__ */ jsx37(
           ContextMenu,
           {
             menuRef,
@@ -41006,7 +41280,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -41024,12 +41298,12 @@ var CadViewer = (props) => {
     () => [5, -5, 5],
     []
   );
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     CameraControllerProvider,
     {
       defaultTarget,
       initialCameraPosition,
-      children: /* @__PURE__ */ jsx36(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx36(CadViewerInner, { ...props }) })
+      children: /* @__PURE__ */ jsx37(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx37(ToastProvider, { children: /* @__PURE__ */ jsx37(CadViewerInner, { ...props }) }) })
     }
   );
 };
@@ -41299,8 +41573,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   scene.position.sub(center);
   const maxDim = Math.max(size5.x, size5.y, size5.z);
   if (maxDim > 0) {
-    const scale2 = (1 - padding / 100) / maxDim;
-    scene.scale.multiplyScalar(scale2 * 100);
+    const scale3 = (1 - padding / 100) / maxDim;
+    scene.scale.multiplyScalar(scale3 * 100);
   }
   camera.updateProjectionMatrix();
   renderer.render(scene, camera);