@tscircuit/3d-viewer 0.0.326 → 0.0.328

package/dist/index.js

@@ -16132,10 +16132,16 @@ function MixedStlModel({
 var import_jscad_planner = __toESM(require_dist(), 1);
 var import_modeling = __toESM(require_src(), 1);
 
-// node_modules/jscad-fiber/dist/chunk-GARWNMIM.js
+// node_modules/jscad-fiber/dist/chunk-3EKLBAF5.js
 var import_color = __toESM(require_color(), 1);
+var jscad = __toESM(require_src(), 1);
 import ReactReconciler from "react-reconciler";
+import {
+  DefaultEventPriority,
+  DiscreteEventPriority
+} from "react-reconciler/constants.js";
 import React4 from "react";
+import React42 from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -16167,6 +16173,15 @@ import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React22 from "react";
+import React32 from "react";
+import * as THREE3 from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Matrix4
+} from "three";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function flattenArray(arr) {
   return arr.reduce(
     (flat, item) => flat.concat(Array.isArray(item) ? flattenArray(item) : item),
@@ -16179,7 +16194,7 @@ var singleElementUnnest = (element) => {
   }
   return element;
 };
-function createHostConfig(jscad5) {
+function createHostConfig(jscad22) {
   const createInstance = (type, props, rootContainerInstance, hostContext, internalInstanceHandle) => {
     const renderChildren = (children) => {
       if (!children) return [];
@@ -16221,43 +16236,43 @@ function createHostConfig(jscad5) {
     }
     switch (type) {
       case "cube":
-        return jscad5.primitives.cube({ size: props.size });
+        return jscad22.primitives.cube({ size: props.size });
       case "sphere":
-        return jscad5.primitives.sphere({
+        return jscad22.primitives.sphere({
           radius: props.radius,
           segments: props.segments
         });
       case "cuboid":
-        return jscad5.primitives.cuboid({
+        return jscad22.primitives.cuboid({
           size: props.size
         });
       case "roundedCuboid":
-        return jscad5.primitives.roundedCuboid({
+        return jscad22.primitives.roundedCuboid({
           size: props.size,
           roundRadius: props.roundRadius
         });
       case "geodesicSphere":
-        return jscad5.primitives.geodesicSphere({
+        return jscad22.primitives.geodesicSphere({
           radius: props.radius,
           frequency: props.frequency
         });
       case "ellipsoid":
-        return jscad5.primitives.ellipsoid({
+        return jscad22.primitives.ellipsoid({
           radius: props.radius
         });
       case "cylinder":
-        return jscad5.primitives.cylinder({
+        return jscad22.primitives.cylinder({
           radius: props.radius,
           height: props.height
         });
       case "roundedCylinder":
-        return jscad5.primitives.roundedCylinder({
+        return jscad22.primitives.roundedCylinder({
           radius: props.radius,
           height: props.height,
           roundRadius: props.roundRadius
         });
       case "cylinderElliptic":
-        return jscad5.primitives.cylinderElliptic({
+        return jscad22.primitives.cylinderElliptic({
           radius: props.radius,
           height: props.height,
           startRadius: props.startRadius,
@@ -16266,7 +16281,7 @@ function createHostConfig(jscad5) {
           endAngle: props.endAngle
         });
       case "torus":
-        return jscad5.primitives.torus({
+        return jscad22.primitives.torus({
           innerRadius: props.innerRadius,
           outerRadius: props.outerRadius,
           innerSegments: props.innerSegments,
@@ -16276,14 +16291,14 @@ function createHostConfig(jscad5) {
           startAngle: props.startAngle
         });
       case "jscadPolygon": {
-        return jscad5.primitives.polygon({
+        return jscad22.primitives.polygon({
           points: props.points
         });
       }
       case "extrudeLinear": {
         const { children, ...extrudeProps } = props;
         const childrenGeometry = renderChildren(children);
-        const extrudedGeometry = jscad5.extrusions.extrudeLinear(
+        const extrudedGeometry = jscad22.extrusions.extrudeLinear(
           {
             height: extrudeProps.height
             // twistAngle: extrudeProps.twistAngle,
@@ -16296,7 +16311,7 @@ function createHostConfig(jscad5) {
       case "extrudeRotate": {
         const { children, ...extrudeProps } = props;
         const childrenGeometry = renderChildren(children);
-        const extrudedGeometry = jscad5.extrusions.extrudeRotate(
+        const extrudedGeometry = jscad22.extrusions.extrudeRotate(
           {
             angle: extrudeProps.angle
             // twistAngle: extrudeProps.twistAngle,
@@ -16309,7 +16324,7 @@ function createHostConfig(jscad5) {
       case "extrudeRectangular": {
         const { children, ...extrudeProps } = props;
         const childrenGeometry = renderChildren(children);
-        const extrudedGeometry = jscad5.extrusions.extrudeRectangular(
+        const extrudedGeometry = jscad22.extrusions.extrudeRectangular(
           {
             size: extrudeProps.size,
             height: extrudeProps.height
@@ -16321,7 +16336,7 @@ function createHostConfig(jscad5) {
       case "extrudeHelical": {
         const { children, ...extrudeProps } = props;
         const childrenGeometry = renderChildren(children);
-        const extrudedGeometry = jscad5.extrusions.extrudeHelical(
+        const extrudedGeometry = jscad22.extrusions.extrudeHelical(
           {
             height: extrudeProps.height,
             angle: extrudeProps.angle,
@@ -16336,7 +16351,7 @@ function createHostConfig(jscad5) {
       }
       case "extrudeFromSlices": {
         const { baseSlice, ...extrudeProps } = props;
-        const extrudedGeometry = jscad5.extrusions.extrudeFromSlices(
+        const extrudedGeometry = jscad22.extrusions.extrudeFromSlices(
           extrudeProps,
           baseSlice
         );
@@ -16345,7 +16360,7 @@ function createHostConfig(jscad5) {
       case "project": {
         const { children, ...projectProps } = props;
         const childrenGeometry = renderChildren(children);
-        const projectedGeometry = jscad5.extrusions.project(
+        const projectedGeometry = jscad22.extrusions.project(
           {
             axis: projectProps.axis,
             origin: projectProps.origin
@@ -16358,7 +16373,7 @@ function createHostConfig(jscad5) {
         const { children, ...colorizeProps } = props;
         const childrenGeometry = renderChildren(children);
         const color = colorizeProps.color;
-        const colorizedGeometry = jscad5.colors.colorize(
+        const colorizedGeometry = jscad22.colors.colorize(
           color,
           singleElementUnnest(childrenGeometry)
         );
@@ -16382,7 +16397,7 @@ function createHostConfig(jscad5) {
             internalInstanceHandle
           )
         );
-        return geometries.reduce((acc, curr) => jscad5.booleans.union(acc, curr));
+        return geometries.reduce((acc, curr) => jscad22.booleans.union(acc, curr));
       }
       case "subtract": {
         const { children } = props;
@@ -16422,12 +16437,12 @@ function createHostConfig(jscad5) {
             "One or more geometries could not be processed for subtraction."
           );
         }
-        return jscad5.booleans.subtract(baseGeometry, subtractGeometries);
+        return jscad22.booleans.subtract(baseGeometry, subtractGeometries);
       }
       case "translate": {
         const { args, children } = props;
         const childrenGeometries = renderChildren(children);
-        return jscad5.transforms.translate(
+        return jscad22.transforms.translate(
           args,
           singleElementUnnest(childrenGeometries)
         );
@@ -16435,7 +16450,7 @@ function createHostConfig(jscad5) {
       case "rotate": {
         const { children, ...rotateProps } = props;
         const childrenGeometries = renderChildren(children);
-        const rotateGeometry = jscad5.transforms.rotate(
+        const rotateGeometry = jscad22.transforms.rotate(
           rotateProps.angles,
           singleElementUnnest(childrenGeometries)
         );
@@ -16455,7 +16470,7 @@ function createHostConfig(jscad5) {
             internalInstanceHandle
           )
         );
-        return jscad5.hulls.hull(geometries);
+        return jscad22.hulls.hull(geometries);
       }
       case "hullChain": {
         const { children } = props;
@@ -16471,15 +16486,15 @@ function createHostConfig(jscad5) {
             internalInstanceHandle
           )
         );
-        return jscad5.hulls.hullChain(geometries);
+        return jscad22.hulls.hullChain(geometries);
       }
       case "rectangle": {
         const { size: size2 } = props;
-        return jscad5.primitives.rectangle({ size: size2 });
+        return jscad22.primitives.rectangle({ size: size2 });
       }
       case "circle": {
         const { radius } = props;
-        return jscad5.primitives.circle({ radius });
+        return jscad22.primitives.circle({ radius });
       }
       default:
         throw new Error(`Unknown element type: ${type}`);
@@ -16491,6 +16506,7 @@ function createHostConfig(jscad5) {
     supportsMutation: true,
     supportsPersistence: false,
     supportsHydration: false,
+    currentUpdatePriority: DefaultEventPriority,
     createInstance,
     createTextInstance() {
       throw new Error("Text elements are not supported in JSCAD");
@@ -16532,11 +16548,11 @@ function createHostConfig(jscad5) {
     getPublicInstance(instance) {
       return instance;
     },
-    getRootHostContext() {
-      return {};
+    getRootHostContext(rootContainer) {
+      return jscad22;
     },
-    getChildHostContext() {
-      return {};
+    getChildHostContext(parentHostContext, type, rootContainer) {
+      return parentHostContext;
     },
     shouldSetTextContent() {
       return false;
@@ -16557,6 +16573,15 @@ function createHostConfig(jscad5) {
     },
     getInstanceFromScope: () => null,
     detachDeletedInstance: () => {
+    },
+    resolveUpdatePriority: () => DiscreteEventPriority,
+    setCurrentUpdatePriority: (priority) => {
+    },
+    getCurrentUpdatePriority: () => {
+      return DefaultEventPriority;
+    },
+    maySuspendCommit() {
+      return false;
     }
   };
   return hostConfig2;
@@ -16850,48 +16875,6 @@ var ExtrudeFromSlicesBase = ({
 var ExtrudeFromSlices = withOffsetProp(
   withColorProp(ExtrudeFromSlicesBase)
 );
-function createJSCADRenderer(jscad5) {
-  const hostConfig2 = createHostConfig(jscad5);
-  function createJSCADRoot4(container) {
-    const reconciler2 = ReactReconciler(hostConfig2);
-    const root = reconciler2.createContainer(
-      container,
-      0,
-      null,
-      false,
-      null,
-      "",
-      (error) => console.error(error),
-      null
-    );
-    return {
-      render(element) {
-        reconciler2.updateContainer(element, root, null, () => {
-        });
-      }
-    };
-  }
-  return { createJSCADRoot: createJSCADRoot4 };
-}
-
-// node_modules/jscad-fiber/dist/three.js
-var jscad = __toESM(require_src(), 1);
-var jscad2 = __toESM(require_src(), 1);
-import { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
-import ReactReconciler2 from "react-reconciler";
-import * as THREE3 from "three";
-import {
-  BufferAttribute,
-  BufferGeometry,
-  Matrix4
-} from "three";
-import React5, { useContext as useContext3 } from "react";
-import React23 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-import React32 from "react";
-import * as THREE22 from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { jsx as jsx210 } from "react/jsx-runtime";
 function convertCSGToThreeGeom(csg) {
   if (csg.polygons) {
     const vertices = [];
@@ -16968,16 +16951,121 @@ function convertCSGToThreeGeom(csg) {
   console.error("Invalid CSG object: neither polygons nor sides found");
   return new BufferGeometry();
 }
-var hostConfig = createHostConfig(jscad);
+var { createJSCADRoot } = createJSCADRenderer(jscad);
+function createJSCADRenderer(jscad22) {
+  const hostConfig2 = createHostConfig(jscad22);
+  function renderElementSync(element, container) {
+    const createInstanceFromHostConfig = hostConfig2.createInstance;
+    function processElement(elem) {
+      if (Array.isArray(elem)) {
+        return elem.flatMap((child) => processElement(child));
+      }
+      const { type, props } = elem;
+      if (type === React42.Fragment || typeof type === "symbol" && String(type).includes("react.fragment")) {
+        if (props && typeof props === "object" && "children" in props) {
+          return processElement(props.children);
+        }
+        return [];
+      }
+      if (typeof type === "function") {
+        try {
+          const originalError = console.error;
+          console.error = (...args) => {
+            const message = args.join(" ");
+            if (!message.includes("Invalid hook call")) {
+              originalError(...args);
+            }
+          };
+          try {
+            const result = type(props);
+            console.error = originalError;
+            return processElement(result);
+          } finally {
+            console.error = originalError;
+          }
+        } catch (error) {
+          if (props && typeof props === "object" && "children" in props) {
+            return processElement(props.children);
+          }
+          if (error instanceof Error && error.message.includes("Invalid hook call")) {
+            return [];
+          }
+          throw error;
+        }
+      }
+      const instance = createInstanceFromHostConfig(
+        type,
+        props,
+        container,
+        jscad22,
+        // hostContext
+        null
+        // internalInstanceHandle
+      );
+      return instance;
+    }
+    try {
+      const result = processElement(element);
+      if (Array.isArray(result)) {
+        container.push(...result);
+      } else {
+        container.push(result);
+      }
+    } catch (error) {
+      console.error("Sync render error:", error);
+      throw error;
+    }
+  }
+  function createJSCADRoot22(container, onError) {
+    const reconciler2 = ReactReconciler(hostConfig2);
+    const root = reconciler2.createContainer(
+      container,
+      0,
+      null,
+      false,
+      null,
+      "",
+      (error) => {
+        console.error(error);
+        if (onError) onError(error);
+      },
+      null
+    );
+    return {
+      render(element, callback) {
+        if (callback) {
+          reconciler2.updateContainer(element, root, null, callback);
+        } else {
+          try {
+            renderElementSync(element, container);
+          } catch (error) {
+            if (onError) onError(error);
+            else throw error;
+          }
+        }
+      }
+    };
+  }
+  return { createJSCADRoot: createJSCADRoot22 };
+}
+
+// node_modules/jscad-fiber/dist/three.js
+var jscad2 = __toESM(require_src(), 1);
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
+import ReactReconciler2 from "react-reconciler";
+import * as THREE4 from "three";
+import React5, { useContext as useContext3 } from "react";
+import React23 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var hostConfig = createHostConfig(jscad2);
 var reconciler = ReactReconciler2(hostConfig);
 var ThreeContext2 = React5.createContext(null);
 var ThreeProvider = ThreeContext2.Provider;
-var { createJSCADRoot } = createJSCADRenderer(jscad2);
 
 // src/three-components/JscadModel.tsx
-import * as THREE4 from "three";
+import * as THREE5 from "three";
 import { useMemo as useMemo4, useEffect as useEffect6 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var JscadModel = ({
   jscadPlan,
   positionOffset,
@@ -16990,16 +17078,16 @@ var JscadModel = ({
   const { threeGeom, material } = useMemo4(() => {
     const jscadObject = (0, import_jscad_planner.executeJscadOperations)(import_modeling.default, jscadPlan);
     const threeGeom2 = convertCSGToThreeGeom(jscadObject);
-    const material2 = new THREE4.MeshStandardMaterial({
+    const material2 = new THREE5.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE4.DoubleSide
+      side: THREE5.DoubleSide
       // Ensure both sides are visible
     });
     return { threeGeom: threeGeom2, material: material2 };
   }, [jscadPlan]);
   const mesh = useMemo4(() => {
     if (!threeGeom) return null;
-    return new THREE4.Mesh(threeGeom, material);
+    return new THREE5.Mesh(threeGeom, material);
   }, [threeGeom, material]);
   useEffect6(() => {
     if (!mesh || !rootObject) return;
@@ -17013,7 +17101,7 @@ var JscadModel = ({
   useMemo4(() => {
     if (!material) return;
     if (isHovered) {
-      const color = new THREE4.Color(material.color.getHex());
+      const color = new THREE5.Color(material.color.getHex());
       material.emissive.copy(color);
       material.emissive.setRGB(0, 0, 1);
       material.emissiveIntensity = 0.2;
@@ -17022,7 +17110,7 @@ var JscadModel = ({
     }
   }, [isHovered, material]);
   if (!threeGeom) return null;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     ContainerWithTooltip_default,
     {
       isHovered,
@@ -31710,9 +31798,9 @@ var require_react_reconciler_development = __commonJS2({
             return null;
           }
         }
-        var DiscreteEventPriority = SyncLane;
+        var DiscreteEventPriority2 = SyncLane;
         var ContinuousEventPriority = InputContinuousLane;
-        var DefaultEventPriority = DefaultLane;
+        var DefaultEventPriority2 = DefaultLane;
         var IdleEventPriority = IdleLane;
         var currentUpdatePriority = NoLane;
         function getCurrentUpdatePriority() {
@@ -31741,14 +31829,14 @@ var require_react_reconciler_development = __commonJS2({
         }
         function lanesToEventPriority(lanes) {
           var lane = getHighestPriorityLane(lanes);
-          if (!isHigherEventPriority(DiscreteEventPriority, lane)) {
-            return DiscreteEventPriority;
+          if (!isHigherEventPriority(DiscreteEventPriority2, lane)) {
+            return DiscreteEventPriority2;
           }
           if (!isHigherEventPriority(ContinuousEventPriority, lane)) {
             return ContinuousEventPriority;
           }
           if (includesNonIdleWork(lane)) {
-            return DefaultEventPriority;
+            return DefaultEventPriority2;
           }
           return IdleEventPriority;
         }
@@ -31823,13 +31911,13 @@ var require_react_reconciler_development = __commonJS2({
               if (enableProfilerTimer) {
                 var schedulerPriority;
                 switch (eventPriority) {
-                  case DiscreteEventPriority:
+                  case DiscreteEventPriority2:
                     schedulerPriority = ImmediatePriority;
                     break;
                   case ContinuousEventPriority:
                     schedulerPriority = UserBlockingPriority;
                     break;
-                  case DefaultEventPriority:
+                  case DefaultEventPriority2:
                     schedulerPriority = NormalPriority;
                     break;
                   case IdleEventPriority:
@@ -32115,7 +32203,7 @@ var require_react_reconciler_development = __commonJS2({
             try {
               var isSync = true;
               var queue = syncQueue;
-              setCurrentUpdatePriority(DiscreteEventPriority);
+              setCurrentUpdatePriority(DiscreteEventPriority2);
               for (; i < queue.length; i++) {
                 var callback = queue[i];
                 do {
@@ -42474,13 +42562,13 @@ var require_react_reconciler_development = __commonJS2({
           } else {
             var schedulerPriorityLevel;
             switch (lanesToEventPriority(nextLanes)) {
-              case DiscreteEventPriority:
+              case DiscreteEventPriority2:
                 schedulerPriorityLevel = ImmediatePriority;
                 break;
               case ContinuousEventPriority:
                 schedulerPriorityLevel = UserBlockingPriority;
                 break;
-              case DefaultEventPriority:
+              case DefaultEventPriority2:
                 schedulerPriorityLevel = NormalPriority;
                 break;
               case IdleEventPriority:
@@ -42755,7 +42843,7 @@ var require_react_reconciler_development = __commonJS2({
           var prevTransition = ReactCurrentBatchConfig$2.transition;
           try {
             ReactCurrentBatchConfig$2.transition = null;
-            setCurrentUpdatePriority(DefaultEventPriority);
+            setCurrentUpdatePriority(DefaultEventPriority2);
             return fn();
           } finally {
             setCurrentUpdatePriority(previousPriority);
@@ -42781,7 +42869,7 @@ var require_react_reconciler_development = __commonJS2({
           var prevTransition = ReactCurrentBatchConfig$2.transition;
           try {
             ReactCurrentBatchConfig$2.transition = null;
-            setCurrentUpdatePriority(DiscreteEventPriority);
+            setCurrentUpdatePriority(DiscreteEventPriority2);
             return fn(a, b, c, d);
           } finally {
             setCurrentUpdatePriority(previousPriority);
@@ -42801,7 +42889,7 @@ var require_react_reconciler_development = __commonJS2({
           var previousPriority = getCurrentUpdatePriority();
           try {
             ReactCurrentBatchConfig$2.transition = null;
-            setCurrentUpdatePriority(DiscreteEventPriority);
+            setCurrentUpdatePriority(DiscreteEventPriority2);
             if (fn) {
               return fn();
             } else {
@@ -42826,7 +42914,7 @@ var require_react_reconciler_development = __commonJS2({
           var previousPriority = getCurrentUpdatePriority();
           try {
             ReactCurrentBatchConfig$2.transition = null;
-            setCurrentUpdatePriority(DiscreteEventPriority);
+            setCurrentUpdatePriority(DiscreteEventPriority2);
             fn();
           } finally {
             setCurrentUpdatePriority(previousPriority);
@@ -43148,7 +43236,7 @@ var require_react_reconciler_development = __commonJS2({
           var prevTransition = ReactCurrentBatchConfig$2.transition;
           try {
             ReactCurrentBatchConfig$2.transition = null;
-            setCurrentUpdatePriority(DiscreteEventPriority);
+            setCurrentUpdatePriority(DiscreteEventPriority2);
             commitRootImpl(root, recoverableErrors, transitions, previousUpdateLanePriority);
           } finally {
             ReactCurrentBatchConfig$2.transition = prevTransition;
@@ -43211,7 +43299,7 @@ var require_react_reconciler_development = __commonJS2({
             var prevTransition = ReactCurrentBatchConfig$2.transition;
             ReactCurrentBatchConfig$2.transition = null;
             var previousPriority = getCurrentUpdatePriority();
-            setCurrentUpdatePriority(DiscreteEventPriority);
+            setCurrentUpdatePriority(DiscreteEventPriority2);
             var prevExecutionContext = executionContext;
             executionContext |= CommitContext;
             ReactCurrentOwner$2.current = null;
@@ -43313,7 +43401,7 @@ var require_react_reconciler_development = __commonJS2({
         function flushPassiveEffects() {
           if (rootWithPendingPassiveEffects !== null) {
             var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
-            var priority = lowerEventPriority(DefaultEventPriority, renderPriority);
+            var priority = lowerEventPriority(DefaultEventPriority2, renderPriority);
             var prevTransition = ReactCurrentBatchConfig$2.transition;
             var previousPriority = getCurrentUpdatePriority();
             try {
@@ -99014,7 +99102,7 @@ var require_dist2 = __commonJS2({
       Hull: () => Hull3,
       HullChain: () => HullChain2,
       JSCadThreeMesh: () => JSCadThreeMesh,
-      JsCadView: () => JsCadView,
+      JsCadView: () => JsCadView2,
       Polygon: () => Polygon4,
       Project: () => Project2,
       Rectangle: () => Rectangle2,
@@ -99836,10 +99924,10 @@ var require_dist2 = __commonJS2({
       console.error("Invalid CSG object: neither polygons nor sides found");
       return new import_three22.BufferGeometry();
     }
-    var convert_csg_to_three_geom_default = convertCSGToThreeGeom2;
+    var convert_csg_to_three_geom_default2 = convertCSGToThreeGeom2;
     var import_jsx_runtime312 = require_jsx_runtime();
     var { createJSCADRoot: createJSCADRoot4 } = createJSCADRenderer2(jscad5);
-    function JsCadView({
+    function JsCadView2({
       children,
       wireframe,
       zAxisUp = false,
@@ -99856,7 +99944,7 @@ var require_dist2 = __commonJS2({
                 processCGS2(child);
               }
             } else {
-              const geometry = convert_csg_to_three_geom_default(csg);
+              const geometry = convert_csg_to_three_geom_default2(csg);
               if (csg.sides) {
                 const material = new THREE27.LineBasicMaterial({
                   vertexColors: true,
@@ -99943,14 +100031,14 @@ var require_dist2 = __commonJS2({
       return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { ref: containerRef, style: { width: "100%", minHeight: "400px" } });
     }
     var jscad22 = __toESM22(require_src2(), 1);
-    var import_react36 = require_react();
+    var import_react37 = require_react();
     var import_react_reconciler3 = __toESM22(require_react_reconciler(), 1);
     var THREE28 = __toESM22(require_three(), 1);
     var hostConfig2 = createHostConfig2(jscad22);
     var reconciler2 = (0, import_react_reconciler3.default)(hostConfig2);
     function useJSCADRenderer(children) {
-      const container = (0, import_react36.useMemo)(() => [], []);
-      const root = (0, import_react36.useMemo)(() => {
+      const container = (0, import_react37.useMemo)(() => [], []);
+      const root = (0, import_react37.useMemo)(() => {
         const root2 = reconciler2.createContainer(
           container,
           0,
@@ -99963,13 +100051,13 @@ var require_dist2 = __commonJS2({
         );
         return root2;
       }, [container]);
-      const [mesh, setMesh] = (0, import_react36.useState)(null);
-      (0, import_react36.useEffect)(() => {
+      const [mesh, setMesh] = (0, import_react37.useState)(null);
+      (0, import_react37.useEffect)(() => {
         reconciler2.updateContainer(children, root, null, () => {
         });
         const scene = new THREE28.Scene();
         container.map((csg) => {
-          const geometry = convert_csg_to_three_geom_default(csg);
+          const geometry = convert_csg_to_three_geom_default2(csg);
           if (csg.sides) {
             const material = new THREE28.LineBasicMaterial({
               vertexColors: true,
@@ -100366,7 +100454,7 @@ var A2512 = ({ color = "#333" }) => {
   ] });
 };
 var import_jscad_fiber10 = __toESM2(require_dist2(), 1);
-var import_react13 = __toESM2(require_react(), 1);
+var import_react14 = __toESM2(require_react(), 1);
 var import_jsx_runtime102 = __toESM2(require_jsx_runtime(), 1);
 var import_jscad_fiber11 = __toESM2(require_dist2(), 1);
 var import_jsx_runtime112 = __toESM2(require_jsx_runtime(), 1);
@@ -101530,7 +101618,7 @@ var import_jsx_runtime292 = __toESM2(require_jsx_runtime(), 1);
 // src/three-components/FootprinterModel.tsx
 var import_jscad_planner2 = __toESM(require_dist(), 1);
 import { useMemo as useMemo5 } from "react";
-import { Fragment as Fragment2, jsx as jsx34 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx35 } from "react/jsx-runtime";
 var { createJSCADRoot: createJSCADRoot2 } = createJSCADRenderer(import_jscad_planner2.jscadPlanner);
 var FootprinterModel = ({
   positionOffset,
@@ -101544,11 +101632,11 @@ var FootprinterModel = ({
     if (!footprint) return null;
     const jscadOperations2 = [];
     const root = createJSCADRoot2(jscadOperations2);
-    root.render(/* @__PURE__ */ jsx34(Footprinter3d, { footprint }));
+    root.render(/* @__PURE__ */ jsx35(Footprinter3d, { footprint }));
     return jscadOperations2;
   }, [footprint]);
   if (!jscadOperations) return null;
-  return /* @__PURE__ */ jsx34(Fragment2, { children: jscadOperations.map((operation, index) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(Fragment2, { children: jscadOperations.map((operation, index) => /* @__PURE__ */ jsx35(
     JscadModel,
     {
       positionOffset,
@@ -101568,7 +101656,7 @@ var tuple = (...args) => args;
 // src/react-three/Html.tsx
 import { useRef as useRef2, useEffect as useEffect7, 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"));
@@ -101586,7 +101674,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 x = Math.round((vector.x + 1) * renderer.domElement.width / 2);
     const y = Math.round((-vector.y + 1) * renderer.domElement.height / 2);
@@ -101602,7 +101690,7 @@ var Html = ({ children, position, style }) => {
 };
 
 // src/AnyCadComponent.tsx
-import { Fragment as Fragment3, jsx as jsx35, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs } from "react/jsx-runtime";
 var AnyCadComponent = ({
   cad_component: cad_component2,
   circuitJson
@@ -101635,7 +101723,7 @@ var AnyCadComponent = ({
   ) : void 0;
   let modelComponent = null;
   if (url) {
-    modelComponent = /* @__PURE__ */ jsx35(
+    modelComponent = /* @__PURE__ */ jsx36(
       MixedStlModel,
       {
         url,
@@ -101652,7 +101740,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (cad_component2.model_jscad) {
-    modelComponent = /* @__PURE__ */ jsx35(
+    modelComponent = /* @__PURE__ */ jsx36(
       JscadModel,
       {
         jscadPlan: cad_component2.model_jscad,
@@ -101664,7 +101752,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (cad_component2.footprinter_string) {
-    modelComponent = /* @__PURE__ */ jsx35(
+    modelComponent = /* @__PURE__ */ jsx36(
       FootprinterModel,
       {
         positionOffset: cad_component2.position ? [
@@ -101682,7 +101770,7 @@ var AnyCadComponent = ({
   }
   return /* @__PURE__ */ jsxs(Fragment3, { children: [
     modelComponent,
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx35(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx36(
       Html,
       {
         position: hoverPosition,
@@ -101710,12 +101798,12 @@ import {
   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.325",
+  version: "0.0.327",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -101759,9 +101847,9 @@ var package_default = {
   },
   devDependencies: {
     "@tscircuit/circuit-json-util": "^0.0.64",
-    "@tscircuit/props": "^0.0.282",
+    "@tscircuit/props": "^0.0.283",
     "jscad-electronics": "^0.0.29",
-    "jscad-fiber": "^0.0.83",
+    "jscad-fiber": "^0.0.84",
     "jscad-planner": "^0.0.13",
     "react-use-gesture": "^9.1.3",
     "@tscircuit/core": "^0.0.616",
@@ -101800,7 +101888,7 @@ var package_default = {
 
 // src/three-components/cube-with-labeled-sides.tsx
 import { useEffect as useEffect9, useMemo as useMemo8 } from "react";
-import * as THREE6 from "three";
+import * as THREE7 from "three";
 
 // src/react-three/Text.tsx
 import { useEffect as useEffect8, useMemo as useMemo7 } from "react";
@@ -101856,15 +101944,15 @@ var Text = ({
 };
 
 // src/three-components/cube-with-labeled-sides.tsx
-import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs2 } 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;
@@ -101873,7 +101961,7 @@ var CubeWithLabeledSides = ({}) => {
   const { camera, scene } = useThree();
   useEffect9(() => {
     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);
@@ -101887,16 +101975,16 @@ var CubeWithLabeledSides = ({}) => {
     camera.lookAt(0, 0, 0);
   });
   const group = useMemo8(() => {
-    const g = new THREE6.Group();
+    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;
@@ -101909,7 +101997,7 @@ var CubeWithLabeledSides = ({}) => {
     };
   }, [scene, group]);
   return /* @__PURE__ */ jsxs2(Fragment4, { children: [
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101919,7 +102007,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Front"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101930,7 +102018,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101941,7 +102029,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Right"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101952,7 +102040,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Left"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101963,7 +102051,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Top"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Text,
       {
         parent: group,
@@ -101987,8 +102075,8 @@ import {
   useImperativeHandle,
   useMemo as useMemo9
 } from "react";
-import * as THREE7 from "three";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import * as THREE8 from "three";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style }, ref) => {
     const mountRef = useRef4(null);
@@ -102012,22 +102100,22 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo9(() => 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(() => {
       if (!mountRef.current) return;
-      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,
@@ -102054,7 +102142,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();
@@ -102084,7 +102172,7 @@ var Canvas = forwardRef(
         scene.remove(rootObject.current);
       };
     }, [scene, addFrameListener, removeFrameListener]);
-    return /* @__PURE__ */ jsx37("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx37(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx37(HoverProvider, { children }) }) });
+    return /* @__PURE__ */ jsx38("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx38(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx38(HoverProvider, { children }) }) });
   }
 );
 
@@ -102146,7 +102234,7 @@ var OrbitControls3 = ({
 
 // src/react-three/Grid.tsx
 import { useEffect as useEffect12, useMemo as useMemo11 } from "react";
-import * as THREE8 from "three";
+import * as THREE9 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -102192,24 +102280,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size2 = 1e3;
   const gridMesh = useMemo11(() => {
-    const geometry = new THREE8.PlaneGeometry(size2, size2);
+    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);
     }
@@ -102238,15 +102326,15 @@ var Grid = ({
 
 // src/react-three/Lights.tsx
 import { useEffect as useEffect13, useMemo as useMemo12 } from "react";
-import * as THREE9 from "three";
+import * as THREE10 from "three";
 var Lights = () => {
   const { scene } = useThree();
   const ambientLight = useMemo12(
-    () => new THREE9.AmbientLight(16777215, Math.PI / 2),
+    () => new THREE10.AmbientLight(16777215, Math.PI / 2),
     []
   );
   const pointLight = useMemo12(() => {
-    const light = new THREE9.PointLight(16777215, Math.PI / 4);
+    const light = new THREE10.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
@@ -102264,7 +102352,7 @@ var Lights = () => {
 };
 
 // src/CadViewerContainer.tsx
-import { jsx as jsx38, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
 var RotationTracker = () => {
   const { camera } = useThree();
   useFrame(() => {
@@ -102295,7 +102383,7 @@ var CadViewerContainer = forwardRef2(
       return desired > 10 ? desired : 10;
     }, [boardDimensions]);
     return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "div",
         {
           style: {
@@ -102305,7 +102393,7 @@ var CadViewerContainer = forwardRef2(
             width: 120,
             height: 120
           },
-          children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39(
             Canvas,
             {
               camera: {
@@ -102313,7 +102401,7 @@ var CadViewerContainer = forwardRef2(
                 position: [1, 1, 1]
               },
               style: { zIndex: 10 },
-              children: /* @__PURE__ */ jsx38(CubeWithLabeledSides, {})
+              children: /* @__PURE__ */ jsx39(CubeWithLabeledSides, {})
             }
           )
         }
@@ -102322,11 +102410,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__ */ jsx38(RotationTracker, {}),
-            isInteractionEnabled && /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(RotationTracker, {}),
+            isInteractionEnabled && /* @__PURE__ */ jsx39(
               OrbitControls3,
               {
                 autoRotate: !autoRotateDisabled,
@@ -102339,8 +102427,8 @@ var CadViewerContainer = forwardRef2(
                 dampingFactor: 0.1
               }
             ),
-            /* @__PURE__ */ jsx38(Lights, {}),
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(Lights, {}),
+            /* @__PURE__ */ jsx39(
               Grid,
               {
                 rotation: [Math.PI / 2, 0, 0],
@@ -102372,7 +102460,7 @@ var CadViewerContainer = forwardRef2(
           ]
         }
       ),
-      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx38(
+      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -102391,7 +102479,7 @@ var CadViewerContainer = forwardRef2(
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39(
             "div",
             {
               style: {
@@ -103628,8 +103716,8 @@ var useBoardGeomBuilder = (circuitJson) => {
 
 // src/three-components/Error3d.tsx
 import { useState as useState10, useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo15 } from "react";
-import * as THREE11 from "three";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs4 } from "react/jsx-runtime";
+import * as THREE12 from "three";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 var Error3d = ({
   error,
   cad_component: cad_component2
@@ -103662,7 +103750,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component2]);
   const group = useMemo15(() => {
-    const g = new THREE11.Group();
+    const g = new THREE12.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -103682,8 +103770,8 @@ var Error3d = ({
         onUnhover: handleUnhover,
         object: group,
         children: [
-          /* @__PURE__ */ jsx39(ErrorBox, { parent: group }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(ErrorBox, { parent: group }),
+          /* @__PURE__ */ jsx40(
             Text,
             {
               parent: group,
@@ -103698,7 +103786,7 @@ var Error3d = ({
         ]
       }
     ),
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx39(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx40(
       Html,
       {
         position: hoverPosition,
@@ -103722,9 +103810,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo15(() => {
-    const m = new THREE11.Mesh(
-      new THREE11.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE11.MeshStandardMaterial({
+    const m = new THREE12.Mesh(
+      new THREE12.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE12.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -103746,7 +103834,7 @@ var ErrorBox = ({ parent }) => {
 
 // src/three-components/STLModel.tsx
 import { useState as useState11, useEffect as useEffect18, useMemo as useMemo16 } from "react";
-import * as THREE12 from "three";
+import * as THREE13 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -103764,12 +103852,12 @@ function STLModel({
   }, [stlUrl]);
   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(() => {
     if (!rootObject || !mesh) return;
@@ -103806,7 +103894,7 @@ var ThreeErrorBoundary = class extends React12.Component {
 };
 
 // src/CadViewerJscad.tsx
-import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs5 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef3(
   ({
     soup,
@@ -103864,7 +103952,7 @@ var CadViewerJscad = forwardRef3(
         boardDimensions,
         onUserInteraction,
         children: [
-          boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx40(
+          boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx41(
             STLModel,
             {
               stlUrl,
@@ -103873,11 +103961,11 @@ var CadViewerJscad = forwardRef3(
             },
             stlUrl
           )),
-          cad_components.map((cad_component2) => /* @__PURE__ */ jsx40(
+          cad_components.map((cad_component2) => /* @__PURE__ */ jsx41(
             ThreeErrorBoundary,
             {
-              fallback: ({ error }) => /* @__PURE__ */ jsx40(Error3d, { cad_component: cad_component2, error }),
-              children: /* @__PURE__ */ jsx40(
+              fallback: ({ error }) => /* @__PURE__ */ jsx41(Error3d, { cad_component: cad_component2, error }),
+              children: /* @__PURE__ */ jsx41(
                 AnyCadComponent,
                 {
                   cad_component: cad_component2,
@@ -103902,17 +103990,17 @@ import { useEffect as useEffect20, useMemo as useMemo19, useState as useState14
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState13, useEffect as useEffect19, useMemo as useMemo18, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE19 from "three";
+import * as THREE20 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];
@@ -103926,7 +104014,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";
@@ -104009,10 +104097,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;
@@ -104020,7 +104108,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,
@@ -104149,10 +104237,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;
@@ -104225,8 +104313,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();
@@ -104375,7 +104463,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({
@@ -104408,7 +104496,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();
@@ -104454,7 +104542,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({
@@ -104471,7 +104559,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) {
   const smtPadGeoms = [];
   const smtPads = su10(circuitJson).pcb_smtpad.list();
@@ -104754,7 +104842,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE19.Color(
+          color: new THREE20.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -104827,16 +104915,16 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE20.Mesh(
+    const mesh = new THREE21.Mesh(
       geoms.board.geometry,
-      new THREE20.MeshStandardMaterial({
+      new THREE21.MeshStandardMaterial({
         color: geoms.board.color,
-        side: THREE20.DoubleSide,
+        side: THREE21.DoubleSide,
         flatShading: true
       })
     );
@@ -104846,11 +104934,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE20.Mesh(
+        const mesh = new THREE21.Mesh(
           comp.geometry,
-          new THREE20.MeshStandardMaterial({
+          new THREE21.MeshStandardMaterial({
             color: comp.color,
-            side: THREE20.DoubleSide,
+            side: THREE21.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -104867,21 +104955,21 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE21 from "three";
+import * as THREE22 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 THREE21.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE21.MeshBasicMaterial({
+    const planeGeom = new THREE22.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE22.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE21.DoubleSide,
+      side: THREE22.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE21.Mesh(planeGeom, material);
+    const mesh = new THREE22.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -104923,7 +105011,7 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
 }
 
 // src/CadViewerManifold.tsx
-import { jsx as jsx41, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs6 } from "react/jsx-runtime";
 var BoardMeshes = ({
   geometryMeshes,
   textureMeshes
@@ -105028,7 +105116,7 @@ var CadViewerManifold = ({
     );
   }
   if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx41("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    return /* @__PURE__ */ jsx43("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
   }
   if (builderError) {
     return /* @__PURE__ */ jsxs6(
@@ -105048,7 +105136,7 @@ var CadViewerManifold = ({
     );
   }
   if (builderIsLoading) {
-    return /* @__PURE__ */ jsx41("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    return /* @__PURE__ */ jsx43("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
   }
   return /* @__PURE__ */ jsxs6(
     CadViewerContainer,
@@ -105059,18 +105147,18 @@ var CadViewerManifold = ({
       boardDimensions,
       onUserInteraction,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           BoardMeshes,
           {
             geometryMeshes,
             textureMeshes
           }
         ),
-        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx41(
+        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx43(
           ThreeErrorBoundary,
           {
-            fallback: ({ error }) => /* @__PURE__ */ jsx41(Error3d, { cad_component: cad_component2, error }),
-            children: /* @__PURE__ */ jsx41(
+            fallback: ({ error }) => /* @__PURE__ */ jsx43(Error3d, { cad_component: cad_component2, error }),
+            children: /* @__PURE__ */ jsx43(
               AnyCadComponent,
               {
                 cad_component: cad_component2,
@@ -105189,7 +105277,7 @@ var useContextMenu = ({ containerRef }) => {
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 var CadViewer = (props) => {
   const [engine, setEngine] = useState16("manifold");
   const containerRef = useRef9(null);
@@ -105234,14 +105322,14 @@ var CadViewer = (props) => {
       style: { width: "100%", height: "100%", position: "relative" },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx43(
+        engine === "jscad" ? /* @__PURE__ */ jsx44(
           CadViewerJscad,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             onUserInteraction: handleUserInteraction
           }
-        ) : /* @__PURE__ */ jsx43(
+        ) : /* @__PURE__ */ jsx44(
           CadViewerManifold_default,
           {
             ...props,
@@ -105266,7 +105354,7 @@ var CadViewer = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx43("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx44("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
@@ -105312,7 +105400,7 @@ var CadViewer = (props) => {
                     "Switch to ",
                     engine === "jscad" ? "Manifold" : "JSCAD",
                     " Engine",
-                    /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx44(
                       "span",
                       {
                         style: {
@@ -105348,12 +105436,12 @@ var CadViewer = (props) => {
                   onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
                   onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx43("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
+                    /* @__PURE__ */ jsx44("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
                     "Auto rotate"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "div",
                 {
                   style: {
@@ -105464,7 +105552,7 @@ async function load3DModel(url) {
 }
 
 // src/utils/render-component.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var { createJSCADRoot: createJSCADRoot3 } = createJSCADRenderer(import_jscad_planner3.jscadPlanner);
 async function renderComponent(component, scene) {
   const url = component.model_obj_url ?? component.model_stl_url;
@@ -105522,7 +105610,7 @@ async function renderComponent(component, scene) {
   if (component.footprinter_string) {
     const jscadOperations = [];
     const root = createJSCADRoot3(jscadOperations);
-    root.render(/* @__PURE__ */ jsx44(Footprinter3d, { footprint: component.footprinter_string }));
+    root.render(/* @__PURE__ */ jsx45(Footprinter3d, { footprint: component.footprinter_string }));
     for (const operation of jscadOperations) {
       const jscadObject = (0, import_jscad_planner3.executeJscadOperations)(import_modeling2.default, operation);
       const threeGeom = convertCSGToThreeGeom(jscadObject);