npm - @tscircuit/3d-viewer - Versions diffs - 0.0.367 → 0.0.369 - Mend

@tscircuit/3d-viewer 0.0.367 → 0.0.369

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +515 -411
package/package.json +4 -4

package/dist/index.js CHANGED Viewed

@@ -14228,15 +14228,15 @@ var require_browser = __commonJS({
 });
 // src/CadViewer.tsx
-import { useState as useState15, useCallback as useCallback8, useRef as useRef9, useEffect as useEffect22 } from "react";
+import { useState as useState16, useCallback as useCallback8, useRef as useRef9, useEffect as useEffect23 } from "react";
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo16 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo17 } from "react";
 // src/AnyCadComponent.tsx
 import { su } from "@tscircuit/circuit-json-util";
-import { useMemo as useMemo5, useState as useState4, useCallback as useCallback2 } from "react";
+import { useMemo as useMemo6, useState as useState5, useCallback as useCallback2 } from "react";
 // src/ContainerWithTooltip.tsx
 import { useEffect as useEffect2 } from "react";
@@ -14567,6 +14567,85 @@ function MixedStlModel({
   );
 }
+// src/three-components/GltfModel.tsx
+import { useState as useState3, useEffect as useEffect5 } from "react";
+import * as THREE3 from "three";
+import { GLTFLoader } from "three-stdlib";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function GltfModel({
+  gltfUrl,
+  position,
+  rotation: rotation2,
+  onHover,
+  onUnhover,
+  isHovered
+}) {
+  const { rootObject } = useThree();
+  const [model, setModel] = useState3(null);
+  useEffect5(() => {
+    if (!gltfUrl) return;
+    const loader = new GLTFLoader();
+    let isMounted = true;
+    loader.load(
+      gltfUrl,
+      (gltf) => {
+        if (isMounted) setModel(gltf.scene);
+      },
+      void 0,
+      (error) => {
+        if (isMounted)
+          console.error(`An error happened loading ${gltfUrl}`, error);
+      }
+    );
+    return () => {
+      isMounted = false;
+    };
+  }, [gltfUrl]);
+  useEffect5(() => {
+    if (!model) return;
+    if (position) model.position.fromArray(position);
+    if (rotation2) model.rotation.fromArray(rotation2);
+  }, [
+    model,
+    position?.[0],
+    position?.[1],
+    position?.[2],
+    rotation2?.[0],
+    rotation2?.[1],
+    rotation2?.[2]
+  ]);
+  useEffect5(() => {
+    if (!rootObject || !model) return;
+    rootObject.add(model);
+    return () => {
+      rootObject.remove(model);
+    };
+  }, [rootObject, model]);
+  useEffect5(() => {
+    if (!model) return;
+    model.traverse((child) => {
+      if (child instanceof THREE3.Mesh && child.material instanceof THREE3.MeshStandardMaterial) {
+        if (isHovered) {
+          child.material.emissive.setHex(255);
+          child.material.emissiveIntensity = 0.2;
+        } else {
+          child.material.emissiveIntensity = 0;
+        }
+      }
+    });
+  }, [isHovered, model]);
+  if (!model) return null;
+  return /* @__PURE__ */ jsx4(
+    ContainerWithTooltip_default,
+    {
+      isHovered,
+      onHover,
+      onUnhover,
+      object: model
+    }
+  );
+}
 // src/three-components/JscadModel.tsx
 var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling2 = __toESM(require_src(), 1);
@@ -16471,6 +16550,7 @@ var cad_component = z98.object({
   model_obj_url: z98.string().optional(),
   model_stl_url: z98.string().optional(),
   model_3mf_url: z98.string().optional(),
+  model_gltf_url: z98.string().optional(),
   model_jscad: z98.any().optional()
 }).describe("Defines a component on the PCB");
 expectTypesMatch(true);
@@ -23669,7 +23749,7 @@ var Colorize = Symbol("Colorize");
 var Polygon = Symbol("Polygon");
 var ExtrudeLinear = Symbol("ExtrudeLinear");
 var Fragment22 = Fragment2;
-var jsx4 = (type, props, _key) => h(type, props);
+var jsx5 = (type, props, _key) => h(type, props);
 var jsxs = (type, props, _key) => h(type, props);
 var ChipBody = ({
   center,
@@ -23678,7 +23758,7 @@ var ChipBody = ({
   height: height10,
   heightAboveSurface: heightAboveSurface2 = 0.15
 }) => {
-  return /* @__PURE__ */ jsx4(Colorize, { color: "#555", children: /* @__PURE__ */ jsx4(Translate, { offset: center, children: /* @__PURE__ */ jsx4(Translate, { offset: { x: 0, y: 0, z: height10 / 2 + heightAboveSurface2 }, children: /* @__PURE__ */ jsx4(RoundedCuboid, { roundRadius: 0.2, size: [width10, length2, height10] }) }) }) });
+  return /* @__PURE__ */ jsx5(Colorize, { color: "#555", children: /* @__PURE__ */ jsx5(Translate, { offset: center, children: /* @__PURE__ */ jsx5(Translate, { offset: { x: 0, y: 0, z: height10 / 2 + heightAboveSurface2 }, children: /* @__PURE__ */ jsx5(RoundedCuboid, { roundRadius: 0.2, size: [width10, length2, height10] }) }) }) });
 };
 var range = (end) => Array.from({ length: end }, (_, i) => i);
 function getExpandedStroke(strokeInput, width10) {
@@ -23767,8 +23847,8 @@ var heightAboveSurface = 0.5;
 var DipPinLeg = ({ x, y, z: z102 }) => {
   const isRotated = x > 0;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(Translate, { offset: { x: x + 0.25 / 2, y, z: z102 }, children: /* @__PURE__ */ jsx4(Rotate, { rotation: ["-90deg", 0, "90deg"], children: /* @__PURE__ */ jsx4(ExtrudeLinear, { height: 0.25, children: /* @__PURE__ */ jsx4(Polygon, { points: svgPathPoints.map((p) => [p.x, p.y]) }) }) }) }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(Translate, { offset: { x: x + 0.25 / 2, y, z: z102 }, children: /* @__PURE__ */ jsx5(Rotate, { rotation: ["-90deg", 0, "90deg"], children: /* @__PURE__ */ jsx5(ExtrudeLinear, { height: 0.25, children: /* @__PURE__ */ jsx5(Polygon, { points: svgPathPoints.map((p) => [p.x, p.y]) }) }) }) }),
+    /* @__PURE__ */ jsx5(
       Translate,
       {
         offset: {
@@ -23776,7 +23856,7 @@ var DipPinLeg = ({ x, y, z: z102 }) => {
           y: y + (isRotated ? 1 : -1),
           z: z102
         },
-        children: /* @__PURE__ */ jsx4(Rotate, { rotation: ["-90deg", "90deg", isRotated ? "180deg" : "0deg"], children: /* @__PURE__ */ jsx4(ExtrudeLinear, { height: 2, children: /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsx5(Rotate, { rotation: ["-90deg", "90deg", isRotated ? "180deg" : "0deg"], children: /* @__PURE__ */ jsx5(ExtrudeLinear, { height: 2, children: /* @__PURE__ */ jsx5(
           Polygon,
           {
             points: getExpandedStroke(
@@ -23804,7 +23884,7 @@ var Dip = ({
     range(numPins).map((i) => {
       const yRow = i % numPinsOnEachSide;
       const xRow = (Math.floor(i / numPinsOnEachSide) - 0.5) * 2;
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         DipPinLeg,
         {
           x: xRow * crossBodyPinWidth / 2,
@@ -23814,7 +23894,7 @@ var Dip = ({
         i
       );
     }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         width: bodyWidth,
@@ -23851,7 +23931,7 @@ var SmdChipLead = (props) => {
   const N = 15;
   const points = Array.from({ length: N }).map((_, i) => i / (N - 1) * bodyDistance).map((x) => [x, calculateSCurve(x, props)]);
   const polygon2 = getExpandedStroke(points, thickness);
-  return /* @__PURE__ */ jsx4(Colorize, { color: "#fff", children: /* @__PURE__ */ jsx4(Translate, { offset: { z: 0, y: 0, x: 0, ...props.position }, children: /* @__PURE__ */ jsx4(Rotate, { rotation: ["90deg", 0, rotation2 ?? 0], children: /* @__PURE__ */ jsx4(Translate, { offset: { x: 0, y: 0, z: -width10 / 2 }, children: /* @__PURE__ */ jsx4(ExtrudeLinear, { height: width10, children: /* @__PURE__ */ jsx4(Polygon, { points: polygon2.map((p) => [p.x, p.y]) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx5(Colorize, { color: "#fff", children: /* @__PURE__ */ jsx5(Translate, { offset: { z: 0, y: 0, x: 0, ...props.position }, children: /* @__PURE__ */ jsx5(Rotate, { rotation: ["90deg", 0, rotation2 ?? 0], children: /* @__PURE__ */ jsx5(Translate, { offset: { x: 0, y: 0, z: -width10 / 2 }, children: /* @__PURE__ */ jsx5(ExtrudeLinear, { height: width10, children: /* @__PURE__ */ jsx5(Polygon, { points: polygon2.map((p) => [p.x, p.y]) }) }) }) }) }) });
 };
 var Tssop = ({
   pinCount,
@@ -23865,7 +23945,7 @@ var Tssop = ({
   const pinOffsetToCenter = (sidePinCount - 1) * pitch / 2;
   const leadThickness = 0.25;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -23881,7 +23961,7 @@ var Tssop = ({
       },
       i
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -23898,7 +23978,7 @@ var Tssop = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         center: { x: 0, y: 0, z: leadThickness / 2 },
@@ -23916,7 +23996,7 @@ var terminatorWidth = 0.2;
 var bodyLength = fullLength - terminatorWidth * 2;
 var A0402 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength, width, height],
@@ -23924,7 +24004,7 @@ var A0402 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth, height, width],
@@ -23932,7 +24012,7 @@ var A0402 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth, height, width],
@@ -23949,7 +24029,7 @@ var width2 = 0.85;
 var height2 = 0.6;
 var A0603 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength2, width2, height2],
@@ -23957,7 +24037,7 @@ var A0603 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorLength, width2, height2],
@@ -23965,7 +24045,7 @@ var A0603 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorLength, width2, height2],
@@ -23982,7 +24062,7 @@ var terminatorWidth2 = 0.5;
 var bodyLength3 = fullLength3 - terminatorWidth2 * 2;
 var A0805 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength3, width3, height3],
@@ -23990,7 +24070,7 @@ var A0805 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth2, width3, height3],
@@ -23998,7 +24078,7 @@ var A0805 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth2, width3, height3],
@@ -24028,7 +24108,7 @@ var QFP = ({
   const leadThickness = 0.15;
   const bodyDistance = (fullWidth - bodyWidth) / 2;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -24044,7 +24124,7 @@ var QFP = ({
       },
       `left-${i}`
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -24061,7 +24141,7 @@ var QFP = ({
       },
       `right-${i}`
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI / 2,
@@ -24078,7 +24158,7 @@ var QFP = ({
       },
       `bottom-${i}`
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: -Math.PI / 2,
@@ -24095,7 +24175,7 @@ var QFP = ({
       },
       `top-${i}`
     )),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         center: { x: 0, y: 0, z: leadThickness / 2 },
@@ -24155,7 +24235,7 @@ var PinRow = ({
   const shortSidePinLength = 3;
   const xoff = -((numberOfPins - 1) / 2) * pitch;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         color: "#222",
@@ -24164,8 +24244,8 @@ var PinRow = ({
       }
     ),
     Array.from({ length: numberOfPins }, (_, i) => /* @__PURE__ */ jsxs(Fragment22, { children: [
-      /* @__PURE__ */ jsx4(Colorize, { color: "gold", children: /* @__PURE__ */ jsxs(Hull, { children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(Colorize, { color: "gold", children: /* @__PURE__ */ jsxs(Hull, { children: [
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "gold",
@@ -24177,7 +24257,7 @@ var PinRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "gold",
@@ -24190,8 +24270,8 @@ var PinRow = ({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx4(Colorize, { color: "gold", children: /* @__PURE__ */ jsxs(Hull, { children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(Colorize, { color: "gold", children: /* @__PURE__ */ jsxs(Hull, { children: [
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "gold",
@@ -24199,7 +24279,7 @@ var PinRow = ({
             center: [xoff + i * pitch, 0, -longSidePinLength / 2 * 0.9]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "gold",
@@ -24340,14 +24420,14 @@ var QFN = ({
     pinPositions.push({ pn, x, y, pw, pl });
   }
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(Colorize, { color: "grey", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(Colorize, { color: "grey", children: /* @__PURE__ */ jsx5(
       Cuboid,
       {
         center: { x: 0, y: 0, z: bodyThickness / 2 },
         size: [bodyWidth, bodyLength10, bodyThickness]
       }
     ) }),
-    pinPositions.map((p, i) => /* @__PURE__ */ jsx4(
+    pinPositions.map((p, i) => /* @__PURE__ */ jsx5(
       Cuboid,
       {
         center: { x: p.x, y: p.y, z: thermalPadThickness / 2 },
@@ -24355,7 +24435,7 @@ var QFN = ({
       },
       i
     )),
-    thermalPadSize?.length !== void 0 && thermalPadSize?.width !== void 0 && /* @__PURE__ */ jsx4(
+    thermalPadSize?.length !== void 0 && thermalPadSize?.width !== void 0 && /* @__PURE__ */ jsx5(
       Cuboid,
       {
         center: { x: 0, y: 0, z: thermalPadThickness / 2 },
@@ -24381,7 +24461,7 @@ var SOT235 = () => {
   const padPitch = 0.95;
   const extendedBodyDistance = fullWidth - bodyWidth;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -24398,7 +24478,7 @@ var SOT235 = () => {
       },
       1
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -24415,7 +24495,7 @@ var SOT235 = () => {
       },
       2
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -24431,7 +24511,7 @@ var SOT235 = () => {
       },
       3
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -24447,7 +24527,7 @@ var SOT235 = () => {
       },
       1
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -24463,7 +24543,7 @@ var SOT235 = () => {
       },
       2
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         center: { x: 0, y: 0, z: 0 },
@@ -24482,7 +24562,7 @@ var terminatorWidth3 = 0.1;
 var bodyLength4 = fullLength4 - terminatorWidth3 * 2;
 var A0201 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength4, width4, height4],
@@ -24490,7 +24570,7 @@ var A0201 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth3, width4, height4],
@@ -24498,7 +24578,7 @@ var A0201 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth3, width4, height4],
@@ -24515,7 +24595,7 @@ var terminatorWidth4 = 0.07;
 var bodyLength5 = fullLength5 - terminatorWidth4 * 2;
 var A01005 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength5, width5, height5],
@@ -24523,7 +24603,7 @@ var A01005 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth4, width5, height5],
@@ -24531,7 +24611,7 @@ var A01005 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth4, width5, height5],
@@ -24548,7 +24628,7 @@ var terminatorWidth5 = 0.5;
 var bodyLength6 = fullLength6 - terminatorWidth5 * 2;
 var A1206 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength6, width6, height6],
@@ -24556,7 +24636,7 @@ var A1206 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth5, width6, height6],
@@ -24564,7 +24644,7 @@ var A1206 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth5, width6, height6],
@@ -24581,7 +24661,7 @@ var terminatorWidth6 = 0.6;
 var bodyLength7 = fullLength7 - terminatorWidth6 * 2;
 var A1210 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength7, width7, height7],
@@ -24589,7 +24669,7 @@ var A1210 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth6, width7, height7],
@@ -24597,7 +24677,7 @@ var A1210 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth6, width7, height7],
@@ -24614,7 +24694,7 @@ var terminatorWidth7 = 0.6;
 var bodyLength8 = fullLength8 - terminatorWidth7 * 2;
 var A2010 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength8, width8, height8],
@@ -24622,7 +24702,7 @@ var A2010 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth7, width8, height8],
@@ -24630,7 +24710,7 @@ var A2010 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth7, width8, height8],
@@ -24647,7 +24727,7 @@ var terminatorWidth8 = 0.8;
 var bodyLength9 = fullLength9 - terminatorWidth8 * 2;
 var A2512 = ({ color = "#333" }) => {
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [bodyLength9, width9, height9],
@@ -24655,7 +24735,7 @@ var A2512 = ({ color = "#333" }) => {
         color
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth8, width9, height9],
@@ -24663,7 +24743,7 @@ var A2512 = ({ color = "#333" }) => {
         color: "#ccc"
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         size: [terminatorWidth8, width9, height9],
@@ -24686,8 +24766,8 @@ var FemaleHeader = ({
   const bodyWidth = (numberOfPins - 1) * pitch + outerDiameter + pitch / 2;
   const gapWidth = pinThickness * 1.6;
   const xoff = -((numberOfPins - 1) / 2) * pitch;
-  const Body = /* @__PURE__ */ jsx4(Colorize, { color: "#1a1a1a", children: /* @__PURE__ */ jsxs(Subtract, { children: [
-    /* @__PURE__ */ jsx4(
+  const Body = /* @__PURE__ */ jsx5(Colorize, { color: "#1a1a1a", children: /* @__PURE__ */ jsxs(Subtract, { children: [
+    /* @__PURE__ */ jsx5(
       Cuboid,
       {
         color: "#000",
@@ -24697,7 +24777,7 @@ var FemaleHeader = ({
     ),
     Array.from(
       { length: numberOfPins },
-      (_, i) => innerDiameter ? /* @__PURE__ */ jsx4(
+      (_, i) => innerDiameter ? /* @__PURE__ */ jsx5(
         Cylinder,
         {
           height: bodyHeight + 0.1,
@@ -24706,7 +24786,7 @@ var FemaleHeader = ({
           color: "#222"
         },
         i
-      ) : /* @__PURE__ */ jsx4(
+      ) : /* @__PURE__ */ jsx5(
         Cuboid,
         {
           size: [gapWidth, gapWidth, bodyHeight],
@@ -24720,7 +24800,7 @@ var FemaleHeader = ({
     Body,
     Array.from({ length: numberOfPins }, (_, i) => /* @__PURE__ */ jsxs(Colorize, { color: "silver", children: [
       /* @__PURE__ */ jsxs(Hull, { children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "silver",
@@ -24728,7 +24808,7 @@ var FemaleHeader = ({
             center: [xoff + i * pitch, 0, -legsLength / 2 * 0.9]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Cuboid,
           {
             color: "silver",
@@ -24737,7 +24817,7 @@ var FemaleHeader = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         Cuboid,
         {
           color: "silver",
@@ -24758,7 +24838,7 @@ var PushButton = ({
   const bodyHeight = width10 * 0.7;
   const legWidth = innerDiameter / 2.5;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       RoundedCuboid,
       {
         color: "#1a1a1f",
@@ -24767,7 +24847,7 @@ var PushButton = ({
         roundRadius: 0.3
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       RoundedCuboid,
       {
         color: "#f2f2f2",
@@ -24776,7 +24856,7 @@ var PushButton = ({
         roundRadius: 0.14
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cylinder,
       {
         color: "#1a1a1f",
@@ -24785,7 +24865,7 @@ var PushButton = ({
         center: [0, 0, bodyHeight + bodyHeight * 0.8 / 2]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cylinder,
       {
         color: "#1a1a1f",
@@ -24798,7 +24878,7 @@ var PushButton = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cylinder,
       {
         color: "#1a1a1f",
@@ -24811,7 +24891,7 @@ var PushButton = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cylinder,
       {
         color: "#1a1a1f",
@@ -24824,7 +24904,7 @@ var PushButton = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Cylinder,
       {
         color: "#1a1a1f",
@@ -24837,7 +24917,7 @@ var PushButton = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       PushButtonLeg,
       {
         thickness: innerDiameter / 3,
@@ -24851,7 +24931,7 @@ var PushButton = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       PushButtonLeg,
       {
         thickness: innerDiameter / 3,
@@ -24866,7 +24946,7 @@ var PushButton = ({
         rotation: Math.PI
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       PushButtonLeg,
       {
         thickness: innerDiameter / 3,
@@ -24877,7 +24957,7 @@ var PushButton = ({
         rotation: Math.PI
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       PushButtonLeg,
       {
         thickness: innerDiameter / 3,
@@ -24909,7 +24989,7 @@ var PushButtonLeg = (props) => {
     [0, 0]
   ];
   const polygon2 = getExpandedStroke(points, thickness);
-  return /* @__PURE__ */ jsx4(Colorize, { color: "#f2f2f2", children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(Colorize, { color: "#f2f2f2", children: /* @__PURE__ */ jsx5(
     Translate,
     {
       offset: {
@@ -24917,7 +24997,7 @@ var PushButtonLeg = (props) => {
         y: position?.y || 0,
         z: position?.z || 0
       },
-      children: /* @__PURE__ */ jsx4(Rotate, { rotation: [0, 55, rotation2], children: /* @__PURE__ */ jsx4(ExtrudeLinear, { height: width10, children: /* @__PURE__ */ jsx4(Polygon, { points: polygon2.map((p) => [p.y, p.x]) }) }) })
+      children: /* @__PURE__ */ jsx5(Rotate, { rotation: [0, 55, rotation2], children: /* @__PURE__ */ jsx5(ExtrudeLinear, { height: width10, children: /* @__PURE__ */ jsx5(Polygon, { points: polygon2.map((p) => [p.y, p.x]) }) }) })
     }
   ) });
 };
@@ -24937,7 +25017,7 @@ var SOIC = ({
   const fullLength10 = pitch * (sidePinCount - 1) + leadWidth + 0.2;
   const bodyWidthAdjusted = bodyWidth * 0.55;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -24953,7 +25033,7 @@ var SOIC = ({
       },
       i
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -24970,7 +25050,7 @@ var SOIC = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         center: { x: 0, y: 0, z: leadThickness / 2 },
@@ -25011,7 +25091,7 @@ var VSSOP = ({
   const leadBodyDistance = (componentFullWidth - _bodyWidth) / 2;
   const padContactLength = leadBodyDistance * 0.5;
   return /* @__PURE__ */ jsxs(Fragment22, { children: [
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         position: {
@@ -25027,7 +25107,7 @@ var VSSOP = ({
       },
       `left-${i}`
     )),
-    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx4(
+    Array.from({ length: sidePinCount }).map((_, i) => /* @__PURE__ */ jsx5(
       SmdChipLead,
       {
         rotation: Math.PI,
@@ -25044,7 +25124,7 @@ var VSSOP = ({
       },
       `right-${i}`
     )),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       ChipBody,
       {
         center: { x: 0, y: 0, z: leadThickness / 2 },
@@ -25059,9 +25139,9 @@ var Footprinter3d = ({ footprint }) => {
   const fpJson = fp.string(footprint).json();
   switch (fpJson.fn) {
     case "dip":
-      return /* @__PURE__ */ jsx4(Dip, { numPins: fpJson.num_pins, pitch: fpJson.p, bodyWidth: fpJson.w });
+      return /* @__PURE__ */ jsx5(Dip, { numPins: fpJson.num_pins, pitch: fpJson.p, bodyWidth: fpJson.w });
     case "tssop":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         Tssop,
         {
           pinCount: fpJson.num_pins,
@@ -25072,7 +25152,7 @@ var Footprinter3d = ({ footprint }) => {
         }
       );
     case "vssop":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         VSSOP,
         {
           pinCount: fpJson.num_pins,
@@ -25084,7 +25164,7 @@ var Footprinter3d = ({ footprint }) => {
         }
       );
     case "qfp":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         QFP,
         {
           pinCount: fpJson.num_pins,
@@ -25095,7 +25175,7 @@ var Footprinter3d = ({ footprint }) => {
         }
       );
     case "qfn":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         qfn_default,
         {
           num_pins: fpJson.num_pins,
@@ -25112,35 +25192,35 @@ var Footprinter3d = ({ footprint }) => {
       );
     case "pinrow":
       if (fpJson.male)
-        return /* @__PURE__ */ jsx4(PinRow, { numberOfPins: fpJson.num_pins, pitch: fpJson.p });
+        return /* @__PURE__ */ jsx5(PinRow, { numberOfPins: fpJson.num_pins, pitch: fpJson.p });
       if (fpJson.female)
-        return /* @__PURE__ */ jsx4(FemaleHeader, { numberOfPins: fpJson.num_pins, pitch: fpJson.p });
+        return /* @__PURE__ */ jsx5(FemaleHeader, { numberOfPins: fpJson.num_pins, pitch: fpJson.p });
     case "cap": {
       switch (fpJson.imperial) {
         case "0402":
-          return /* @__PURE__ */ jsx4(A0402, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A0402, { color: "#856c4d" });
         case "0603":
-          return /* @__PURE__ */ jsx4(A0603, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A0603, { color: "#856c4d" });
         case "0805":
-          return /* @__PURE__ */ jsx4(A0805, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A0805, { color: "#856c4d" });
         case "0201":
-          return /* @__PURE__ */ jsx4(A0201, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A0201, { color: "#856c4d" });
         case "01005":
-          return /* @__PURE__ */ jsx4(A01005, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A01005, { color: "#856c4d" });
         case "1206":
-          return /* @__PURE__ */ jsx4(A1206, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A1206, { color: "#856c4d" });
         case "1210":
-          return /* @__PURE__ */ jsx4(A1210, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A1210, { color: "#856c4d" });
         case "2010":
-          return /* @__PURE__ */ jsx4(A2010, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A2010, { color: "#856c4d" });
         case "2512":
-          return /* @__PURE__ */ jsx4(A2512, { color: "#856c4d" });
+          return /* @__PURE__ */ jsx5(A2512, { color: "#856c4d" });
       }
     }
     case "sot235":
-      return /* @__PURE__ */ jsx4(SOT_235_default, {});
+      return /* @__PURE__ */ jsx5(SOT_235_default, {});
     case "pushbutton":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         PushButton,
         {
           width: fpJson.w,
@@ -25149,7 +25229,7 @@ var Footprinter3d = ({ footprint }) => {
         }
       );
     case "soic":
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         SOIC,
         {
           pinCount: fpJson.num_pins,
@@ -25162,23 +25242,23 @@ var Footprinter3d = ({ footprint }) => {
   }
   switch (fpJson.imperial) {
     case "0402":
-      return /* @__PURE__ */ jsx4(A0402, {});
+      return /* @__PURE__ */ jsx5(A0402, {});
     case "0603":
-      return /* @__PURE__ */ jsx4(A0603, {});
+      return /* @__PURE__ */ jsx5(A0603, {});
     case "0805":
-      return /* @__PURE__ */ jsx4(A0805, {});
+      return /* @__PURE__ */ jsx5(A0805, {});
     case "0201":
-      return /* @__PURE__ */ jsx4(A0201, {});
+      return /* @__PURE__ */ jsx5(A0201, {});
     case "01005":
-      return /* @__PURE__ */ jsx4(A01005, {});
+      return /* @__PURE__ */ jsx5(A01005, {});
     case "1206":
-      return /* @__PURE__ */ jsx4(A1206, {});
+      return /* @__PURE__ */ jsx5(A1206, {});
     case "1210":
-      return /* @__PURE__ */ jsx4(A1210, {});
+      return /* @__PURE__ */ jsx5(A1210, {});
     case "2010":
-      return /* @__PURE__ */ jsx4(A2010, {});
+      return /* @__PURE__ */ jsx5(A2010, {});
     case "2512":
-      return /* @__PURE__ */ jsx4(A2512, {});
+      return /* @__PURE__ */ jsx5(A2512, {});
   }
   return null;
 };
@@ -25385,9 +25465,9 @@ function getJscadModelForFootprint(footprint) {
 }
 // src/three-components/JscadModel.tsx
-import * as THREE3 from "three";
-import { useMemo as useMemo3, useEffect as useEffect5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import * as THREE4 from "three";
+import { useMemo as useMemo4, useEffect as useEffect6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var JscadModel = ({
   jscadPlan,
   positionOffset,
@@ -25397,31 +25477,31 @@ var JscadModel = ({
   isHovered
 }) => {
   const { rootObject } = useThree();
-  const { threeGeom, material } = useMemo3(() => {
+  const { threeGeom, material } = useMemo4(() => {
     const jscadObject = (0, import_jscad_planner.executeJscadOperations)(import_modeling2.default, jscadPlan);
     if (!jscadObject || !jscadObject.polygons && !jscadObject.sides) {
       return { threeGeom: null, material: null };
     }
     const threeGeom2 = convertCSGToThreeGeom(jscadObject);
-    const material2 = new THREE3.MeshStandardMaterial({
+    const material2 = new THREE4.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE3.DoubleSide
+      side: THREE4.DoubleSide
       // Ensure both sides are visible
     });
     return { threeGeom: threeGeom2, material: material2 };
   }, [jscadPlan]);
-  const mesh = useMemo3(() => {
+  const mesh = useMemo4(() => {
     if (!threeGeom) return null;
-    return new THREE3.Mesh(threeGeom, material);
+    return new THREE4.Mesh(threeGeom, material);
   }, [threeGeom, material]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!mesh || !rootObject) return;
     rootObject.add(mesh);
     return () => {
       rootObject.remove(mesh);
     };
   }, [rootObject, mesh]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!mesh) return;
     if (positionOffset) mesh.position.fromArray(positionOffset);
     if (rotationOffset) mesh.rotation.fromArray(rotationOffset);
@@ -25434,10 +25514,10 @@ var JscadModel = ({
     rotationOffset?.[1],
     rotationOffset?.[2]
   ]);
-  useMemo3(() => {
+  useMemo4(() => {
     if (!material) return;
     if (isHovered) {
-      const color = new THREE3.Color(material.color.getHex());
+      const color = new THREE4.Color(material.color.getHex());
       material.emissive.copy(color);
       material.emissive.setRGB(0, 0, 1);
       material.emissiveIntensity = 0.2;
@@ -25446,7 +25526,7 @@ var JscadModel = ({
     }
   }, [isHovered, material]);
   if (!threeGeom) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     ContainerWithTooltip_default,
     {
       isHovered,
@@ -25458,9 +25538,9 @@ var JscadModel = ({
 };
 // src/three-components/FootprinterModel.tsx
-import { useMemo as useMemo4, useEffect as useEffect6 } from "react";
-import * as THREE4 from "three";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useMemo as useMemo5, useEffect as useEffect7 } from "react";
+import * as THREE5 from "three";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FootprinterModel = ({
   positionOffset,
   footprint,
@@ -25470,36 +25550,36 @@ var FootprinterModel = ({
   isHovered
 }) => {
   const { rootObject } = useThree();
-  const group = useMemo4(() => {
+  const group = useMemo5(() => {
     if (!footprint) return null;
     const { geometries: geometries2 } = getJscadModelForFootprint(footprint);
-    const group2 = new THREE4.Group();
+    const group2 = new THREE5.Group();
     for (const geomInfo of geometries2.flat(Infinity)) {
       const geom = geomInfo.geom;
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE4.Color(geomInfo.color);
+      const color = new THREE5.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material = new THREE4.MeshStandardMaterial({
+      const material = new THREE5.MeshStandardMaterial({
         vertexColors: true,
-        side: THREE4.DoubleSide
+        side: THREE5.DoubleSide
       });
-      const mesh = new THREE4.Mesh(threeGeom, material);
+      const mesh = new THREE5.Mesh(threeGeom, material);
       group2.add(mesh);
     }
     return group2;
   }, [footprint]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!group || !rootObject) return;
     rootObject.add(group);
     return () => {
       rootObject.remove(group);
     };
   }, [rootObject, group]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!group) return;
     if (positionOffset) group.position.fromArray(positionOffset);
     if (rotationOffset) group.rotation.fromArray(rotationOffset);
@@ -25512,10 +25592,10 @@ var FootprinterModel = ({
     rotationOffset?.[1],
     rotationOffset?.[2]
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!group) return;
     group.traverse((child) => {
-      if (child instanceof THREE4.Mesh && child.material instanceof THREE4.MeshStandardMaterial) {
+      if (child instanceof THREE5.Mesh && child.material instanceof THREE5.MeshStandardMaterial) {
         if (isHovered) {
           child.material.emissive.setHex(255);
           child.material.emissiveIntensity = 0.2;
@@ -25526,7 +25606,7 @@ var FootprinterModel = ({
     });
   }, [isHovered, group]);
   if (!group) return null;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ContainerWithTooltip_default,
     {
       isHovered,
@@ -25541,14 +25621,14 @@ var FootprinterModel = ({
 var tuple = (...args) => args;
 // src/react-three/Html.tsx
-import { useRef as useRef2, useEffect as useEffect7, useState as useState3 } from "react";
+import { useRef as useRef2, useEffect as useEffect8, useState as useState4 } from "react";
 import ReactDOM from "react-dom";
-import * as THREE5 from "three";
+import * as THREE6 from "three";
 var Html = ({ children, position, style }) => {
   const { camera, renderer } = useThree();
   const el = useRef2(document.createElement("div"));
-  const [portal, setPortal] = useState3(null);
-  useEffect7(() => {
+  const [portal, setPortal] = useState4(null);
+  useEffect8(() => {
     const rendererNode = renderer?.domElement.parentNode;
     if (!rendererNode) return;
     rendererNode.appendChild(el.current);
@@ -25561,7 +25641,7 @@ var Html = ({ children, position, style }) => {
   }, [renderer, children]);
   useFrame(() => {
     if (!camera || !el.current || !renderer) return;
-    const vector = new THREE5.Vector3(...position);
+    const vector = new THREE6.Vector3(...position);
     vector.project(camera);
     const rect = renderer.domElement.getBoundingClientRect();
     const x = Math.round((vector.x + 1) / 2 * rect.width);
@@ -25578,13 +25658,13 @@ var Html = ({ children, position, style }) => {
 };
 // src/AnyCadComponent.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var AnyCadComponent = ({
   cad_component: cad_component2,
   circuitJson
 }) => {
-  const [isHovered, setIsHovered] = useState4(false);
-  const [hoverPosition, setHoverPosition] = useState4(null);
+  const [isHovered, setIsHovered] = useState5(false);
+  const [hoverPosition, setHoverPosition] = useState5(null);
   const handleHover = useCallback2((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -25598,12 +25678,13 @@ var AnyCadComponent = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const componentName = useMemo5(() => {
+  const componentName = useMemo6(() => {
     return su(circuitJson).source_component.getUsing({
       source_component_id: cad_component2.source_component_id
     })?.name;
   }, [circuitJson, cad_component2.source_component_id]);
   const url = cad_component2.model_obj_url ?? cad_component2.model_stl_url;
+  const gltfUrl = cad_component2.model_gltf_url;
   const rotationOffset = cad_component2.rotation ? tuple(
     cad_component2.rotation.x * Math.PI / 180,
     cad_component2.rotation.y * Math.PI / 180,
@@ -25611,7 +25692,7 @@ var AnyCadComponent = ({
   ) : void 0;
   let modelComponent = null;
   if (url) {
-    modelComponent = /* @__PURE__ */ jsx7(
+    modelComponent = /* @__PURE__ */ jsx8(
       MixedStlModel,
       {
         url,
@@ -25627,8 +25708,25 @@ var AnyCadComponent = ({
       },
       cad_component2.cad_component_id
     );
+  } else if (gltfUrl) {
+    modelComponent = /* @__PURE__ */ jsx8(
+      GltfModel,
+      {
+        gltfUrl,
+        position: cad_component2.position ? [
+          cad_component2.position.x,
+          cad_component2.position.y,
+          cad_component2.position.z
+        ] : void 0,
+        rotation: rotationOffset,
+        onHover: handleHover,
+        onUnhover: handleUnhover,
+        isHovered
+      },
+      cad_component2.cad_component_id
+    );
   } else if (cad_component2.model_jscad) {
-    modelComponent = /* @__PURE__ */ jsx7(
+    modelComponent = /* @__PURE__ */ jsx8(
       JscadModel,
       {
         jscadPlan: cad_component2.model_jscad,
@@ -25640,7 +25738,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (cad_component2.footprinter_string) {
-    modelComponent = /* @__PURE__ */ jsx7(
+    modelComponent = /* @__PURE__ */ jsx8(
       FootprinterModel,
       {
         positionOffset: cad_component2.position ? [
@@ -25658,7 +25756,7 @@ var AnyCadComponent = ({
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
     modelComponent,
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx7(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx8(
       Html,
       {
         position: hoverPosition,
@@ -25683,15 +25781,15 @@ var AnyCadComponent = ({
 // src/CadViewerContainer.tsx
 import {
   forwardRef as forwardRef2,
-  useMemo as useMemo12,
-  useState as useState6
+  useMemo as useMemo13,
+  useState as useState7
 } from "react";
-import * as THREE10 from "three";
+import * as THREE11 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.366",
+  version: "0.0.368",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -25738,8 +25836,8 @@ var package_default = {
     "@storybook/blocks": "9.0.0-alpha.17",
     "@storybook/react-vite": "^9.1.2",
     "@tscircuit/circuit-json-util": "^0.0.67",
-    "@tscircuit/core": "^0.0.688",
-    "@tscircuit/props": "^0.0.296",
+    "@tscircuit/core": "^0.0.691",
+    "@tscircuit/props": "^0.0.298",
     "@types/jsdom": "^21.1.7",
     "@types/react": "19",
     "@types/react-dom": "19",
@@ -25747,7 +25845,7 @@ var package_default = {
     "@vitejs/plugin-react": "^4.3.4",
     "bun-match-svg": "^0.0.9",
     "bun-types": "1.2.1",
-    "circuit-json": "^0.0.241",
+    "circuit-json": "^0.0.242",
     "circuit-to-svg": "^0.0.179",
     debug: "^4.4.0",
     "jscad-electronics": "^0.0.38",
@@ -25766,11 +25864,11 @@ var package_default = {
 };
 // src/three-components/cube-with-labeled-sides.tsx
-import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
-import * as THREE6 from "three";
+import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
+import * as THREE7 from "three";
 // src/react-three/Text.tsx
-import { useEffect as useEffect8, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
 import { Text as TroikaText } from "troika-three-text";
 var Text = ({
   children,
@@ -25785,7 +25883,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo6(() => {
+  const mesh = useMemo7(() => {
     const textMesh = new TroikaText();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -25810,7 +25908,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -25823,24 +25921,24 @@ var Text = ({
 };
 // src/three-components/cube-with-labeled-sides.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 if (typeof window !== "undefined") {
-  window.TSCI_MAIN_CAMERA_ROTATION = new THREE6.Euler(0, 0, 0);
+  window.TSCI_MAIN_CAMERA_ROTATION = new THREE7.Euler(0, 0, 0);
 }
 function computePointInFront(rotationVector, distance2) {
-  const quaternion = new THREE6.Quaternion().setFromEuler(
-    new THREE6.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE7.Quaternion().setFromEuler(
+    new THREE7.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE6.Vector3(0, 0, 1);
+  const forwardVector = new THREE7.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance2);
   return result;
 }
 var CubeWithLabeledSides = ({}) => {
   const { camera, scene } = useThree();
-  useEffect9(() => {
+  useEffect10(() => {
     if (!scene) return;
-    const ambientLight = new THREE6.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE7.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
     return () => {
       scene.remove(ambientLight);
@@ -25853,22 +25951,22 @@ var CubeWithLabeledSides = ({}) => {
     camera.position.copy(cameraPosition);
     camera.lookAt(0, 0, 0);
   });
-  const group = useMemo7(() => {
-    const g = new THREE6.Group();
+  const group = useMemo8(() => {
+    const g = new THREE7.Group();
     g.rotation.fromArray([Math.PI / 2, 0, 0]);
-    const box = new THREE6.Mesh(
-      new THREE6.BoxGeometry(1, 1, 1),
-      new THREE6.MeshStandardMaterial({ color: "white" })
+    const box = new THREE7.Mesh(
+      new THREE7.BoxGeometry(1, 1, 1),
+      new THREE7.MeshStandardMaterial({ color: "white" })
     );
     g.add(box);
-    const edges = new THREE6.LineSegments(
-      new THREE6.EdgesGeometry(new THREE6.BoxGeometry(1, 1, 1)),
-      new THREE6.LineBasicMaterial({ color: 0, linewidth: 2 })
+    const edges = new THREE7.LineSegments(
+      new THREE7.EdgesGeometry(new THREE7.BoxGeometry(1, 1, 1)),
+      new THREE7.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     g.add(edges);
     return g;
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!scene) return;
     scene.add(group);
     return () => {
@@ -25876,7 +25974,7 @@ var CubeWithLabeledSides = ({}) => {
     };
   }, [scene, group]);
   return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25886,7 +25984,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Front"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25897,7 +25995,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25908,7 +26006,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Right"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25919,7 +26017,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Left"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25930,7 +26028,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Top"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Text,
       {
         parent: group,
@@ -25947,14 +26045,14 @@ var CubeWithLabeledSides = ({}) => {
 // src/react-three/Canvas.tsx
 import {
   useRef as useRef4,
-  useEffect as useEffect10,
-  useState as useState5,
+  useEffect as useEffect11,
+  useState as useState6,
   useCallback as useCallback3,
   forwardRef,
   useImperativeHandle,
-  useMemo as useMemo8
+  useMemo as useMemo9
 } from "react";
-import * as THREE7 from "three";
+import * as THREE8 from "three";
 // src/react-three/remove-existing-canvases.ts
 function removeExistingCanvases(container) {
@@ -25962,11 +26060,11 @@ function removeExistingCanvases(container) {
 }
 // src/react-three/Canvas.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style }, ref) => {
     const mountRef = useRef4(null);
-    const [contextState, setContextState] = useState5(
+    const [contextState, setContextState] = useState6(
       null
     );
     const frameListeners = useRef4(
@@ -25986,23 +26084,23 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo8(() => new THREE7.Scene(), []);
+    const scene = useMemo9(() => new THREE8.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef4(new THREE7.Object3D());
+    const rootObject = useRef4(new THREE8.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
-    useEffect10(() => {
+    useEffect11(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
-      const renderer = new THREE7.WebGLRenderer({ antialias: true, alpha: true });
+      const renderer = new THREE8.WebGLRenderer({ antialias: true, alpha: true });
       renderer.setSize(
         mountRef.current.clientWidth,
         mountRef.current.clientHeight
       );
       renderer.setPixelRatio(window.devicePixelRatio);
       mountRef.current.appendChild(renderer.domElement);
-      const camera = new THREE7.PerspectiveCamera(
+      const camera = new THREE8.PerspectiveCamera(
         75,
         mountRef.current.clientWidth / mountRef.current.clientHeight,
         0.1,
@@ -26030,7 +26128,7 @@ var Canvas = forwardRef(
         removeFrameListener
       });
       let animationFrameId;
-      const clock = new THREE7.Clock();
+      const clock = new THREE8.Clock();
       const animate = () => {
         const time2 = clock.getElapsedTime();
         const delta = clock.getDelta();
@@ -26063,12 +26161,12 @@ var Canvas = forwardRef(
         }
       };
     }, [scene, addFrameListener, removeFrameListener]);
-    return /* @__PURE__ */ jsx9("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx9(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx9(HoverProvider, { children }) }) });
+    return /* @__PURE__ */ jsx10("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx10(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx10(HoverProvider, { children }) }) });
   }
 );
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect11, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo10 } from "react";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -26081,11 +26179,11 @@ var OrbitControls = ({
   dampingFactor
 }) => {
   const { camera, renderer } = useThree();
-  const controls = useMemo9(() => {
+  const controls = useMemo10(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -26104,14 +26202,14 @@ var OrbitControls = ({
     enableDamping,
     dampingFactor
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -26124,8 +26222,8 @@ var OrbitControls = ({
 };
 // src/react-three/Grid.tsx
-import { useEffect as useEffect12, useMemo as useMemo10 } from "react";
-import * as THREE8 from "three";
+import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
+import * as THREE9 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -26170,25 +26268,25 @@ var Grid = ({
 }) => {
   const { scene, camera } = useThree();
   const size2 = 1e3;
-  const gridMesh = useMemo10(() => {
-    const geometry = new THREE8.PlaneGeometry(size2, size2);
+  const gridMesh = useMemo11(() => {
+    const geometry = new THREE9.PlaneGeometry(size2, size2);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE8.ShaderMaterial({
+    const material = new THREE9.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE8.Color(15658734) },
-        sectionColor: { value: new THREE8.Color(13421823) },
+        gridColor: { value: new THREE9.Color(15658734) },
+        sectionColor: { value: new THREE9.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE8.DoubleSide
+      side: THREE9.DoubleSide
     });
-    const mesh = new THREE8.Mesh(geometry, material);
+    const mesh = new THREE9.Mesh(geometry, material);
     if (rotation2) {
       mesh.rotation.fromArray(rotation2);
     }
@@ -26199,7 +26297,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -26216,21 +26314,21 @@ var Grid = ({
 };
 // src/react-three/Lights.tsx
-import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
-import * as THREE9 from "three";
+import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
+import * as THREE10 from "three";
 var Lights = () => {
   const { scene } = useThree();
-  const ambientLight = useMemo11(
-    () => new THREE9.AmbientLight(16777215, Math.PI / 2),
+  const ambientLight = useMemo12(
+    () => new THREE10.AmbientLight(16777215, Math.PI / 2),
     []
   );
-  const pointLight = useMemo11(() => {
-    const light = new THREE9.PointLight(16777215, Math.PI / 4);
+  const pointLight = useMemo12(() => {
+    const light = new THREE10.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scene) return;
     scene.add(ambientLight);
     scene.add(pointLight);
@@ -26243,7 +26341,7 @@ var Lights = () => {
 };
 // src/CadViewerContainer.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var RotationTracker = () => {
   const { camera } = useThree();
   useFrame(() => {
@@ -26262,10 +26360,10 @@ var CadViewerContainer = forwardRef2(
     boardDimensions,
     onUserInteraction
   }, ref) => {
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState7(
       !clickToInteractEnabled
     );
-    const gridSectionSize = useMemo12(() => {
+    const gridSectionSize = useMemo13(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
       const height10 = boardDimensions.height ?? 0;
@@ -26274,7 +26372,7 @@ var CadViewerContainer = forwardRef2(
       return desired > 10 ? desired : 10;
     }, [boardDimensions]);
     return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -26284,7 +26382,7 @@ var CadViewerContainer = forwardRef2(
             width: 120,
             height: 120
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             Canvas,
             {
               camera: {
@@ -26292,7 +26390,7 @@ var CadViewerContainer = forwardRef2(
                 position: [1, 1, 1]
               },
               style: { zIndex: 10 },
-              children: /* @__PURE__ */ jsx10(CubeWithLabeledSides, {})
+              children: /* @__PURE__ */ jsx11(CubeWithLabeledSides, {})
             }
           )
         }
@@ -26301,11 +26399,11 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE10.Vector3(0, 0, 1) },
+          scene: { up: new THREE11.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           children: [
-            /* @__PURE__ */ jsx10(RotationTracker, {}),
-            isInteractionEnabled && /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(RotationTracker, {}),
+            isInteractionEnabled && /* @__PURE__ */ jsx11(
               OrbitControls,
               {
                 autoRotate: !autoRotateDisabled,
@@ -26318,8 +26416,8 @@ var CadViewerContainer = forwardRef2(
                 dampingFactor: 0.1
               }
             ),
-            /* @__PURE__ */ jsx10(Lights, {}),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(Lights, {}),
+            /* @__PURE__ */ jsx11(
               Grid,
               {
                 rotation: [Math.PI / 2, 0, 0],
@@ -26351,7 +26449,7 @@ var CadViewerContainer = forwardRef2(
           ]
         }
       ),
-      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx10(
+      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -26370,7 +26468,7 @@ var CadViewerContainer = forwardRef2(
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -26393,9 +26491,9 @@ var CadViewerContainer = forwardRef2(
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 var useConvertChildrenToSoup = (children) => {
-  return useMemo13(() => {
+  return useMemo14(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -26405,12 +26503,12 @@ var useConvertChildrenToSoup = (children) => {
 };
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState7, useEffect as useEffect15 } from "react";
+import { useState as useState8, useEffect as useEffect16 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState7([]);
-  const [loading, setLoading] = useState7(true);
-  useEffect15(() => {
+  const [stls, setStls] = useState8([]);
+  const [loading, setLoading] = useState8(true);
+  useEffect16(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
@@ -26437,7 +26535,7 @@ var useStlsFromGeom = (geom) => {
 };
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState8, useEffect as useEffect16, useRef as useRef6 } from "react";
+import { useState as useState9, useEffect as useEffect17, useRef as useRef6 } from "react";
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -27610,9 +27708,9 @@ var BoardGeomBuilder = class {
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState8(null);
+  const [boardGeom, setBoardGeom] = useState9(null);
   const isProcessingRef = useRef6(false);
-  useEffect16(() => {
+  useEffect17(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -27655,16 +27753,16 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 // src/three-components/Error3d.tsx
-import { useState as useState9, useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo14 } from "react";
-import * as THREE11 from "three";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState10, useCallback as useCallback4, useEffect as useEffect18, useMemo as useMemo15 } from "react";
+import * as THREE12 from "three";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var Error3d = ({
   error,
   cad_component: cad_component2
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState9(false);
-  const [hoverPosition, setHoverPosition] = useState9(null);
+  const [isHovered, setIsHovered] = useState10(false);
+  const [hoverPosition, setHoverPosition] = useState10(null);
   const handleHover = useCallback4((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -27678,7 +27776,7 @@ var Error3d = ({
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo14(() => {
+  const position = useMemo15(() => {
     if (cad_component2?.position) {
       const p = [
         cad_component2.position.x,
@@ -27689,12 +27787,12 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component2]);
-  const group = useMemo14(() => {
-    const g = new THREE11.Group();
+  const group = useMemo15(() => {
+    const g = new THREE12.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -27710,8 +27808,8 @@ var Error3d = ({
         onUnhover: handleUnhover,
         object: group,
         children: [
-          /* @__PURE__ */ jsx11(ErrorBox, { parent: group }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(ErrorBox, { parent: group }),
+          /* @__PURE__ */ jsx12(
             Text,
             {
               parent: group,
@@ -27726,7 +27824,7 @@ var Error3d = ({
         ]
       }
     ),
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx11(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx12(
       Html,
       {
         position: hoverPosition,
@@ -27749,10 +27847,10 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo14(() => {
-    const m = new THREE11.Mesh(
-      new THREE11.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE11.MeshStandardMaterial({
+  const mesh = useMemo15(() => {
+    const m = new THREE12.Mesh(
+      new THREE12.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE12.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -27763,7 +27861,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -27773,8 +27871,8 @@ var ErrorBox = ({ parent }) => {
 };
 // src/three-components/STLModel.tsx
-import { useState as useState10, useEffect as useEffect18, useMemo as useMemo15 } from "react";
-import * as THREE12 from "three";
+import { useState as useState11, useEffect as useEffect19, useMemo as useMemo16 } from "react";
+import * as THREE13 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -27784,8 +27882,8 @@ function STLModel({
   opacity = 1
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState10(null);
-  useEffect18(() => {
+  const [geom, setGeom] = useState11(null);
+  useEffect19(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -27803,16 +27901,16 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo15(() => {
+  const mesh = useMemo16(() => {
     if (!geom) return null;
-    const material = new THREE12.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE12.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE13.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE13.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity
     });
-    return new THREE12.Mesh(geom, material);
+    return new THREE13.Mesh(geom, material);
   }, [geom, color, opacity]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -27847,7 +27945,7 @@ var ThreeErrorBoundary = class extends React10.Component {
 };
 // src/CadViewerJscad.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef3(
   ({
     soup,
@@ -27858,12 +27956,12 @@ var CadViewerJscad = forwardRef3(
     onUserInteraction
   }, ref) => {
     const childrenSoup = useConvertChildrenToSoup(children);
-    const internalCircuitJson = useMemo16(() => {
+    const internalCircuitJson = useMemo17(() => {
       const cj = soup ?? circuitJson;
       return cj ?? childrenSoup;
     }, [soup, circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo16(() => {
+    const initialCameraPosition = useMemo17(() => {
       if (!internalCircuitJson) return [5, 5, 5];
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -27882,7 +27980,7 @@ var CadViewerJscad = forwardRef3(
         return [5, 5, 5];
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo16(() => {
+    const boardDimensions = useMemo17(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -27905,7 +28003,7 @@ var CadViewerJscad = forwardRef3(
         boardDimensions,
         onUserInteraction,
         children: [
-          boardStls.map(({ stlData, color }, index) => /* @__PURE__ */ jsx12(
+          boardStls.map(({ stlData, color }, index) => /* @__PURE__ */ jsx13(
             STLModel,
             {
               stlData,
@@ -27914,11 +28012,11 @@ var CadViewerJscad = forwardRef3(
             },
             `board-${index - boardStls.length}`
           )),
-          cad_components.map((cad_component2) => /* @__PURE__ */ jsx12(
+          cad_components.map((cad_component2) => /* @__PURE__ */ jsx13(
             ThreeErrorBoundary,
             {
-              fallback: ({ error }) => /* @__PURE__ */ jsx12(Error3d, { cad_component: cad_component2, error }),
-              children: /* @__PURE__ */ jsx12(
+              fallback: ({ error }) => /* @__PURE__ */ jsx13(Error3d, { cad_component: cad_component2, error }),
+              children: /* @__PURE__ */ jsx13(
                 AnyCadComponent,
                 {
                   cad_component: cad_component2,
@@ -27937,22 +28035,22 @@ var CadViewerJscad = forwardRef3(
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect20, useMemo as useMemo18, useState as useState13 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo19, useState as useState14 } from "react";
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState12, useEffect as useEffect19, useMemo as useMemo17, useRef as useRef7 } from "react";
+import { useState as useState13, useEffect as useEffect20, useMemo as useMemo18, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE13 from "three";
+import * as THREE14 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE13.BufferGeometry();
+  const geometry = new THREE14.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE13.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE14.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE13.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE14.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
   if (manifoldMesh.runIndex && manifoldMesh.runIndex.length > 1 && manifoldMesh.runOriginalID) {
     for (let i = 0; i < manifoldMesh.runIndex.length - 1; i++) {
       const start = manifoldMesh.runIndex[i];
@@ -27966,7 +28064,7 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
 }
 // src/utils/trace-texture.ts
-import * as THREE14 from "three";
+import * as THREE15 from "three";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point2) {
   return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
@@ -28049,10 +28147,10 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE14.CanvasTexture(canvas);
+  const texture = new THREE15.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE14.LinearMipmapLinearFilter;
-  texture.magFilter = THREE14.LinearFilter;
+  texture.minFilter = THREE15.LinearMipmapLinearFilter;
+  texture.magFilter = THREE15.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -28060,7 +28158,7 @@ function createTraceTextureForLayer({
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE15 from "three";
+import * as THREE16 from "three";
 import { su as su6 } from "@tscircuit/circuit-json-util";
 function createSilkscreenTextureForLayer({
   layer,
@@ -28189,10 +28287,10 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE15.CanvasTexture(canvas);
+  const texture = new THREE16.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE15.LinearMipmapLinearFilter;
-  texture.magFilter = THREE15.LinearFilter;
+  texture.minFilter = THREE16.LinearMipmapLinearFilter;
+  texture.magFilter = THREE16.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -28265,8 +28363,8 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 // src/utils/manifold/process-plated-holes.ts
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import * as THREE16 from "three";
-var COPPER_COLOR = new THREE16.Color(...colors.copper);
+import * as THREE17 from "three";
+var COPPER_COLOR = new THREE17.Color(...colors.copper);
 function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const platedHoleBoardDrills = [];
   const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
@@ -28481,7 +28579,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
 // src/utils/manifold/process-vias.ts
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 // src/utils/via-geoms.ts
 function createViaCopper({
@@ -28514,7 +28612,7 @@ function createViaCopper({
 }
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE17.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE18.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const viaBoardDrills = [];
   const pcbVias = su9(circuitJson).pcb_via.list();
@@ -28560,7 +28658,7 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 // src/utils/manifold/process-smt-pads.ts
 import { su as su10 } from "@tscircuit/circuit-json-util";
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 // src/utils/pad-geoms.ts
 function createPadManifoldOp({
@@ -28577,7 +28675,7 @@ function createPadManifoldOp({
 }
 // src/utils/manifold/process-smt-pads.ts
-var COPPER_COLOR3 = new THREE18.Color(...colors.copper);
+var COPPER_COLOR3 = new THREE19.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion) {
   const smtPadGeoms = [];
   const smtPads = su10(circuitJson).pcb_smtpad.list();
@@ -28666,8 +28764,8 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 // src/utils/manifold/process-copper-pours.ts
-import * as THREE19 from "three";
-var COPPER_COLOR4 = new THREE19.Color(...colors.copper);
+import * as THREE20 from "three";
+var COPPER_COLOR4 = new THREE20.Color(...colors.copper);
 var arePointsClockwise3 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -28843,20 +28941,20 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
-  const [geoms, setGeoms] = useState12(null);
-  const [textures, setTextures] = useState12(null);
-  const [pcbThickness, setPcbThickness] = useState12(null);
-  const [error, setError] = useState12(null);
-  const [isLoading, setIsLoading] = useState12(true);
+  const [geoms, setGeoms] = useState13(null);
+  const [textures, setTextures] = useState13(null);
+  const [pcbThickness, setPcbThickness] = useState13(null);
+  const [error, setError] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
   const manifoldInstancesForCleanup = useRef7([]);
-  const boardData = useMemo17(() => {
+  const boardData = useMemo18(() => {
     const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
       return null;
     }
     return boards[0];
   }, [circuitJson]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setTextures(null);
@@ -28943,7 +29041,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE20.Color(
+          color: new THREE21.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -29026,16 +29124,16 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE21.Mesh(
+    const mesh = new THREE22.Mesh(
       geoms.board.geometry,
-      new THREE21.MeshStandardMaterial({
+      new THREE22.MeshStandardMaterial({
         color: geoms.board.color,
-        side: THREE21.DoubleSide,
+        side: THREE22.DoubleSide,
         flatShading: true
       })
     );
@@ -29045,11 +29143,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE21.Mesh(
+        const mesh = new THREE22.Mesh(
           comp.geometry,
-          new THREE21.MeshStandardMaterial({
+          new THREE22.MeshStandardMaterial({
             color: comp.color,
-            side: THREE21.DoubleSide,
+            side: THREE22.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -29067,21 +29165,21 @@ function createGeometryMeshes(geoms) {
 }
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE22 from "three";
+import * as THREE23 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
     if (!texture) return null;
-    const planeGeom = new THREE22.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE22.MeshBasicMaterial({
+    const planeGeom = new THREE23.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE23.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE22.DoubleSide,
+      side: THREE23.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE22.Mesh(planeGeom, material);
+    const mesh = new THREE23.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -29123,13 +29221,13 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
 }
 // src/CadViewerManifold.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var BoardMeshes = ({
   geometryMeshes,
   textureMeshes
 }) => {
   const { rootObject } = useThree();
-  useEffect20(() => {
+  useEffect21(() => {
     if (!rootObject) return;
     geometryMeshes.forEach((mesh) => rootObject.add(mesh));
     textureMeshes.forEach((mesh) => rootObject.add(mesh));
@@ -29149,12 +29247,12 @@ var CadViewerManifold = ({
   children
 }) => {
   const childrenCircuitJson = useConvertChildrenToSoup(children);
-  const circuitJson = useMemo18(() => {
+  const circuitJson = useMemo19(() => {
     return circuitJsonProp ?? childrenCircuitJson;
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState13(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState13(null);
-  useEffect20(() => {
+  const [manifoldJSModule, setManifoldJSModule] = useState14(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState14(null);
+  useEffect21(() => {
     const initManifold = async (ManifoldModule) => {
       try {
         const loadedModule = await ManifoldModule();
@@ -29219,21 +29317,21 @@ try {
     isLoading: builderIsLoading,
     boardData
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
-  const geometryMeshes = useMemo18(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo18(
+  const geometryMeshes = useMemo19(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo19(
     () => createTextureMeshes(textures, boardData, pcbThickness),
     [textures, boardData, pcbThickness]
   );
-  const cadComponents = useMemo18(
+  const cadComponents = useMemo19(
     () => su13(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo18(() => {
+  const boardDimensions = useMemo19(() => {
     if (!boardData) return void 0;
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     return { width: width10, height: height10 };
   }, [boardData]);
-  const initialCameraPosition = useMemo18(() => {
+  const initialCameraPosition = useMemo19(() => {
     if (!boardData) return [5, 5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -29259,7 +29357,7 @@ try {
     );
   }
   if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    return /* @__PURE__ */ jsx14("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
   }
   if (builderError) {
     return /* @__PURE__ */ jsxs7(
@@ -29279,7 +29377,7 @@ try {
     );
   }
   if (builderIsLoading) {
-    return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    return /* @__PURE__ */ jsx14("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
   }
   return /* @__PURE__ */ jsxs7(
     CadViewerContainer,
@@ -29290,18 +29388,18 @@ try {
       boardDimensions,
       onUserInteraction,
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           BoardMeshes,
           {
             geometryMeshes,
             textureMeshes
           }
         ),
-        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx13(
+        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx14(
           ThreeErrorBoundary,
           {
-            fallback: ({ error }) => /* @__PURE__ */ jsx13(Error3d, { cad_component: cad_component2, error }),
-            children: /* @__PURE__ */ jsx13(
+            fallback: ({ error }) => /* @__PURE__ */ jsx14(Error3d, { cad_component: cad_component2, error }),
+            children: /* @__PURE__ */ jsx14(
               AnyCadComponent,
               {
                 cad_component: cad_component2,
@@ -29318,10 +29416,10 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 // src/hooks/useContextMenu.ts
-import { useState as useState14, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect21 } from "react";
+import { useState as useState15, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect22 } from "react";
 var useContextMenu = ({ containerRef }) => {
-  const [menuVisible, setMenuVisible] = useState14(false);
-  const [menuPos, setMenuPos] = useState14({
+  const [menuVisible, setMenuVisible] = useState15(false);
+  const [menuPos, setMenuPos] = useState15({
     x: 0,
     y: 0
   });
@@ -29426,7 +29524,7 @@ var useContextMenu = ({ containerRef }) => {
       setMenuVisible(false);
     }
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -29489,12 +29587,12 @@ var useGlobalDownloadGltf = () => {
 };
 // src/CadViewer.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var CadViewer = (props) => {
-  const [engine, setEngine] = useState15("manifold");
+  const [engine, setEngine] = useState16("manifold");
   const containerRef = useRef9(null);
-  const [autoRotate, setAutoRotate] = useState15(true);
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState15(false);
+  const [autoRotate, setAutoRotate] = useState16(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState16(false);
   const {
     menuVisible,
     menuPos,
@@ -29518,13 +29616,13 @@ var CadViewer = (props) => {
     setEngine(newEngine);
     setMenuVisible(false);
   };
-  useEffect22(() => {
+  useEffect23(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -29544,14 +29642,14 @@ var CadViewer = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx14(
+        engine === "jscad" ? /* @__PURE__ */ jsx15(
           CadViewerJscad,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             onUserInteraction: handleUserInteraction
           }
-        ) : /* @__PURE__ */ jsx14(
+        ) : /* @__PURE__ */ jsx15(
           CadViewerManifold_default,
           {
             ...props,
@@ -29576,7 +29674,7 @@ var CadViewer = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx14("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx15("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
@@ -29622,7 +29720,7 @@ var CadViewer = (props) => {
                     "Switch to ",
                     engine === "jscad" ? "Manifold" : "JSCAD",
                     " Engine",
-                    /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx15(
                       "span",
                       {
                         style: {
@@ -29658,12 +29756,12 @@ var CadViewer = (props) => {
                   onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
                   onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx14("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
+                    /* @__PURE__ */ jsx15("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
                     "Auto rotate"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "div",
                 {
                   style: {
@@ -29686,7 +29784,7 @@ var CadViewer = (props) => {
                   children: "Download GLTF"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "div",
                 {
                   style: {
@@ -29725,11 +29823,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -29743,12 +29841,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon2.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE23.Vector3(...polygon2.vertices[0]);
-      const v2 = new THREE23.Vector3(...polygon2.vertices[i]);
-      const v3 = new THREE23.Vector3(...polygon2.vertices[i + 1]);
-      const normal = new THREE23.Vector3().crossVectors(
-        new THREE23.Vector3().subVectors(v2, v1),
-        new THREE23.Vector3().subVectors(v3, v1)
+      const v1 = new THREE24.Vector3(...polygon2.vertices[0]);
+      const v2 = new THREE24.Vector3(...polygon2.vertices[i]);
+      const v3 = new THREE24.Vector3(...polygon2.vertices[i + 1]);
+      const normal = new THREE24.Vector3().crossVectors(
+        new THREE24.Vector3().subVectors(v2, v1),
+        new THREE24.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -29771,34 +29869,40 @@ function createGeometryFromPolygons(polygons) {
 // src/utils/render-component.tsx
 var import_modeling3 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 // src/utils/load-model.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
+import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
 async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE24.MeshStandardMaterial({
+    const material = new THREE25.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE24.Mesh(geometry, material);
+    return new THREE25.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
     return await loader.loadAsync(url);
   }
+  if (url.endsWith(".gltf") || url.endsWith(".glb")) {
+    const loader = new GLTFLoader2();
+    const gltf = await loader.loadAsync(url);
+    return gltf.scene;
+  }
   console.error("Unsupported file format or failed to load 3D model.");
   return null;
 }
 // src/utils/render-component.tsx
 async function renderComponent(component, scene) {
-  const url = component.model_obj_url ?? component.model_stl_url;
+  const url = component.model_obj_url ?? component.model_stl_url ?? component.model_gltf_url;
   if (url) {
     const model = await load3DModel(url);
     if (model) {
@@ -29811,9 +29915,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE25.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -29827,13 +29931,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE25.MeshStandardMaterial({
+      const material2 = new THREE26.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE25.DoubleSide
+        side: THREE26.DoubleSide
       });
-      const mesh2 = new THREE25.Mesh(threeGeom, material2);
+      const mesh2 = new THREE26.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -29843,9 +29947,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE25.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -29861,17 +29965,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE25.Color(geomInfo.color);
+      const color = new THREE26.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE25.MeshStandardMaterial({
+      const material2 = new THREE26.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE25.DoubleSide
+        side: THREE26.DoubleSide
       });
-      const mesh2 = new THREE25.Mesh(threeGeom, material2);
+      const mesh2 = new THREE26.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -29881,22 +29985,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE25.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE25.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE25.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE25.MeshStandardMaterial({
+  const geometry = new THREE26.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE26.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE25.Mesh(geometry, material);
+  const mesh = new THREE26.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -29917,11 +30021,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE26.Scene();
+  const scene = new THREE27.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE26.Color(backgroundColor), 1);
-  const camera = new THREE26.OrthographicCamera();
+  renderer.setClearColor(new THREE27.Color(backgroundColor), 1);
+  const camera = new THREE27.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -29935,11 +30039,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE26.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE27.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE26.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE27.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE26.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE27.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su14(circuitJson).cad_component.list();
@@ -29952,8 +30056,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const material = new THREE26.MeshStandardMaterial({
-        color: new THREE26.Color(
+      const material = new THREE27.MeshStandardMaterial({
+        color: new THREE27.Color(
           g.color?.[0] ?? 0,
           g.color?.[1] ?? 0,
           g.color?.[2] ?? 0
@@ -29962,18 +30066,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
         roughness: 0.8,
         opacity: 0.9,
         transparent: true,
-        side: THREE26.DoubleSide
+        side: THREE27.DoubleSide
       });
-      const mesh = new THREE26.Mesh(geometry, material);
+      const mesh = new THREE27.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE26.GridHelper(100, 100);
+  const gridHelper = new THREE27.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE26.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE26.Vector3());
-  const size2 = box.getSize(new THREE26.Vector3());
+  const box = new THREE27.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE27.Vector3());
+  const size2 = box.getSize(new THREE27.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size2.x, size2.y, size2.z);
   if (maxDim > 0) {
@@ -29991,10 +30095,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
-import { useEffect as useEffect23, useState as useState16, useMemo as useMemo19, useCallback as useCallback9 } from "react";
+import { useEffect as useEffect24, useState as useState17, useMemo as useMemo20, useCallback as useCallback9 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
-  const link = useMemo19(() => document.createElement("a"), []);
+  const link = useMemo20(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -30004,7 +30108,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect23(
+  useEffect24(
     () => () => {
       link.remove();
       instance = null;
@@ -30019,17 +30123,17 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState16();
-  const [error, setError] = useState16();
+  const [url, setUrl] = useState17();
+  const [error, setError] = useState17();
   const ref = useCallback9(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect23(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect24(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo19(() => new GLTFExporter2(), []);
+  const exporter = useMemo20(() => new GLTFExporter2(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(