@tscircuit/3d-viewer 0.0.570 → 0.0.572

package/dist/index.js

@@ -14432,7 +14432,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState37, useCallback as useCallback23, useRef as useRef28, useEffect as useEffect47 } from "react";
+import { useState as useState37, useCallback as useCallback23, useRef as useRef29, useEffect as useEffect46 } from "react";
 import * as THREE44 from "three";
 
 // src/CadViewerJscad.tsx
@@ -31205,12 +31205,15 @@ function GltfModel({
   useEffect7(() => {
     if (!model) return;
     model.traverse((child) => {
-      if (child instanceof THREE7.Mesh && child.material instanceof THREE7.MeshStandardMaterial) {
+      if (!(child instanceof THREE7.Mesh)) return;
+      const materials = Array.isArray(child.material) ? child.material : [child.material];
+      for (const material of materials) {
+        if (!(material instanceof THREE7.MeshStandardMaterial)) continue;
         if (isHovered) {
-          child.material.emissive.setHex(255);
-          child.material.emissiveIntensity = 0.2;
+          material.emissive.setHex(255);
+          material.emissiveIntensity = 0.2;
         } else {
-          child.material.emissiveIntensity = 0;
+          material.emissiveIntensity = 0;
         }
       }
     });
@@ -31486,6 +31489,9 @@ function MixedStlModel({
 
 // src/three-components/StepModel.tsx
 import { useEffect as useEffect10, useState as useState6 } from "react";
+import { GLTFExporter } from "three-stdlib";
+
+// src/three-components/step-mesh-to-group.ts
 import {
   BufferGeometry as BufferGeometry2,
   Color as Color3,
@@ -31494,7 +31500,88 @@ import {
   Mesh as Mesh6,
   MeshStandardMaterial as MeshStandardMaterial5
 } from "three";
-import { GLTFExporter } from "three-stdlib";
+var DEFAULT_COLOR = new Color3(0.82, 0.82, 0.82);
+var createMaterial = (color) => new MeshStandardMaterial5({
+  color: color ? new Color3(color[0], color[1], color[2]) : DEFAULT_COLOR
+});
+function applyFaceColorGroups(geometry, mesh) {
+  const defaultMaterial = createMaterial(mesh.color);
+  const brepFaces = mesh.brep_faces ?? [];
+  if (brepFaces.length === 0) {
+    return [defaultMaterial];
+  }
+  const sortedBrepFaces = brepFaces.length > 1 ? [...brepFaces].sort((a, b) => a.first - b.first) : brepFaces;
+  const materials = [defaultMaterial];
+  const materialIndexByColor = /* @__PURE__ */ new Map();
+  const triangleCount = mesh.index.array.length / 3;
+  let triangleIndex = 0;
+  let faceIndex = 0;
+  const getMaterialIndexForFace = (color) => {
+    if (!color) return 0;
+    const key = color.join(",");
+    const existingIndex = materialIndexByColor.get(key);
+    if (existingIndex !== void 0) {
+      return existingIndex;
+    }
+    const nextIndex = materials.length;
+    materials.push(createMaterial(color));
+    materialIndexByColor.set(key, nextIndex);
+    return nextIndex;
+  };
+  while (triangleIndex < triangleCount) {
+    const currentFace = sortedBrepFaces[faceIndex];
+    let lastTriangleExclusive = triangleCount;
+    let materialIndex = 0;
+    if (currentFace) {
+      if (triangleIndex < currentFace.first) {
+        lastTriangleExclusive = currentFace.first;
+      } else {
+        lastTriangleExclusive = currentFace.last + 1;
+        materialIndex = getMaterialIndexForFace(currentFace.color);
+        faceIndex += 1;
+      }
+    }
+    if (lastTriangleExclusive > triangleIndex) {
+      geometry.addGroup(
+        triangleIndex * 3,
+        (lastTriangleExclusive - triangleIndex) * 3,
+        materialIndex
+      );
+    }
+    triangleIndex = lastTriangleExclusive;
+  }
+  return materials;
+}
+function occtMeshesToGroup(meshes) {
+  const group = new Group3();
+  for (const mesh of meshes) {
+    const positions = mesh.attributes.position?.array ?? [];
+    const indices = mesh.index?.array ?? [];
+    if (!positions.length || !indices.length) {
+      continue;
+    }
+    const geometry = new BufferGeometry2();
+    geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+    const normals = mesh.attributes.normal?.array ?? [];
+    if (normals.length) {
+      geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    } else {
+      geometry.computeVertexNormals();
+    }
+    geometry.setIndex(indices);
+    geometry.clearGroups();
+    const materials = applyFaceColorGroups(geometry, mesh);
+    const threeMesh = new Mesh6(
+      geometry,
+      materials.length > 1 ? materials : materials[0]
+    );
+    threeMesh.name = mesh.name;
+    group.add(threeMesh);
+  }
+  return group;
+}
+
+// src/three-components/StepModel.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
 var occtImportPromise;
 var OCCT_CDN_BASE_URL = "https://cdn.jsdelivr.net/npm/occt-import-js@0.0.23/dist";
@@ -31520,32 +31607,6 @@ async function loadOcctImport() {
   }
   return occtImportPromise;
 }
-function occtMeshesToGroup(meshes) {
-  const group = new Group3();
-  for (const mesh of meshes) {
-    const positions = mesh.attributes.position?.array ?? [];
-    const indices = mesh.index?.array ?? [];
-    if (!positions.length || !indices.length) {
-      continue;
-    }
-    const geometry = new BufferGeometry2();
-    geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
-    const normals = mesh.attributes.normal?.array ?? [];
-    if (normals.length) {
-      geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
-    } else {
-      geometry.computeVertexNormals();
-    }
-    geometry.setIndex(indices);
-    const material = new MeshStandardMaterial5({
-      color: mesh.color ? new Color3(mesh.color[0], mesh.color[1], mesh.color[2]) : new Color3(0.82, 0.82, 0.82)
-    });
-    const threeMesh = new Mesh6(geometry, material);
-    threeMesh.name = mesh.name;
-    group.add(threeMesh);
-  }
-  return group;
-}
 async function convertStepUrlToGlb(stepUrl) {
   const response = await fetch(stepUrl);
   if (!response.ok) {
@@ -31577,7 +31638,7 @@ async function convertStepUrlToGlb(stepUrl) {
   });
   return glb;
 }
-var CACHE_PREFIX = "step-glb-cache:";
+var CACHE_PREFIX = "step-glb-cache:v2:";
 function arrayBufferToBase64(buffer) {
   const bytes = new Uint8Array(buffer);
   const chunkSize = 32768;
@@ -32337,7 +32398,7 @@ import * as THREE20 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.569",
+  version: "0.0.571",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32966,25 +33027,35 @@ import { useEffect as useEffect15, useMemo as useMemo13 } from "react";
 import * as THREE17 from "three";
 var Lights = () => {
   const { scene } = useThree();
-  const ambientLight = useMemo13(
-    () => new THREE17.AmbientLight(16777215, Math.PI / 2),
-    []
-  );
-  const pointLight = useMemo13(() => {
-    const light = new THREE17.PointLight(16777215, Math.PI / 4);
-    light.position.set(-10, -10, 10);
-    light.decay = 0;
-    return light;
+  const lightRig = useMemo13(() => {
+    const rig = new THREE17.Group();
+    rig.name = "cad-viewer-light-rig";
+    const ambientLight = new THREE17.AmbientLight(16777215, 0.18);
+    ambientLight.name = "cad-viewer-soft-ambient";
+    rig.add(ambientLight);
+    const hemisphereLight = new THREE17.HemisphereLight(14543103, 2040093, 0.45);
+    hemisphereLight.name = "cad-viewer-hemisphere";
+    rig.add(hemisphereLight);
+    const addDirectionalLight = (name, color, intensity, position) => {
+      const light = new THREE17.DirectionalLight(color, intensity);
+      light.name = name;
+      light.position.set(...position);
+      light.target.position.set(0, 0, 0);
+      rig.add(light);
+      rig.add(light.target);
+    };
+    addDirectionalLight("cad-viewer-key-light", 16773343, 2.4, [8, -10, 12]);
+    addDirectionalLight("cad-viewer-fill-light", 14543103, 0.7, [-10, 8, 5]);
+    addDirectionalLight("cad-viewer-rim-light", 16777215, 1.1, [-4, 10, 8]);
+    return rig;
   }, []);
   useEffect15(() => {
     if (!scene) return;
-    scene.add(ambientLight);
-    scene.add(pointLight);
+    scene.add(lightRig);
     return () => {
-      scene.remove(ambientLight);
-      scene.remove(pointLight);
+      scene.remove(lightRig);
     };
-  }, [scene, ambientLight, pointLight]);
+  }, [scene, lightRig]);
   return null;
 };
 
@@ -39472,7 +39543,7 @@ function composeContextScopes(...scopes) {
 }
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React15 from "react";
+import * as React16 from "react";
 
 // node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
 import * as React14 from "react";
@@ -39481,7 +39552,32 @@ var useLayoutEffect2 = globalThis?.document ? React14.useLayoutEffect : () => {
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import * as React22 from "react";
-var useInsertionEffect = React15[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+
+// node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
+import * as React15 from "react";
+var useReactEffectEvent = React15[" useEffectEvent ".trim().toString()];
+var useReactInsertionEffect = React15[" useInsertionEffect ".trim().toString()];
+function useEffectEvent(callback) {
+  if (typeof useReactEffectEvent === "function") {
+    return useReactEffectEvent(callback);
+  }
+  const ref = React15.useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  if (typeof useReactInsertionEffect === "function") {
+    useReactInsertionEffect(() => {
+      ref.current = callback;
+    });
+  } else {
+    useLayoutEffect2(() => {
+      ref.current = callback;
+    });
+  }
+  return React15.useMemo(() => ((...args) => ref.current?.(...args)), []);
+}
+
+// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var useInsertionEffect = React16[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -39496,8 +39592,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React15.useRef(prop !== void 0);
-    React15.useEffect(() => {
+    const isControlledRef = React16.useRef(prop !== void 0);
+    React16.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -39509,7 +39605,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React15.useCallback(
+  const setValue = React16.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -39528,13 +39624,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React15.useState(defaultProp);
-  const prevValueRef = React15.useRef(value);
-  const onChangeRef = React15.useRef(onChange);
+  const [value, setValue] = React16.useState(defaultProp);
+  const prevValueRef = React16.useRef(value);
+  const onChangeRef = React16.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -39547,14 +39643,14 @@ function isFunction(value) {
 }
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React17 from "react";
+import * as React18 from "react";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React16 from "react";
+import * as React17 from "react";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const Slot2 = React16.forwardRef((props, forwardedRef) => {
+  const Slot2 = React17.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     let slottableElement = null;
     let hasSlottable = false;
@@ -39562,7 +39658,7 @@ function createSlot(ownerName) {
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    React16.Children.forEach(children, (maybeSlottable) => {
+    React17.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
@@ -39577,13 +39673,13 @@ function createSlot(ownerName) {
       }
     });
     if (slottableElement) {
-      slottableElement = React16.cloneElement(slottableElement, void 0, newChildren);
+      slottableElement = React17.cloneElement(slottableElement, void 0, newChildren);
     } else if (
       // A `Slottable` was found but it didn't resolve to a single element (e.g.
       // it wrapped multiple elements, text, or a render-prop `child` that
       // wasn't an element). Don't fall back to treating the `Slottable` wrapper
       // itself as the slot target — throw a descriptive error below instead.
-      !hasSlottable && React16.Children.count(children) === 1 && React16.isValidElement(children)
+      !hasSlottable && React17.Children.count(children) === 1 && React17.isValidElement(children)
     ) {
       slottableElement = children;
     }
@@ -39598,10 +39694,10 @@ function createSlot(ownerName) {
       return children;
     }
     const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
-    if (slottableElement.type !== React16.Fragment) {
+    if (slottableElement.type !== React17.Fragment) {
       mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
     }
-    return React16.cloneElement(slottableElement, mergedProps);
+    return React17.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -39610,10 +39706,10 @@ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol.for("radix.slottable");
 var getSlottableElementFromSlottable = (slottable, child) => {
   if ("child" in slottable.props) {
     const child2 = slottable.props.child;
-    if (!React16.isValidElement(child2)) return null;
-    return React16.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    if (!React17.isValidElement(child2)) return null;
+    return React17.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
   }
-  return React16.isValidElement(child) ? child : null;
+  return React17.isValidElement(child) ? child : null;
 };
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -39653,7 +39749,7 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 function isSlottable(child) {
-  return React16.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React17.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
 function isLazyComponent(element) {
@@ -39668,7 +39764,7 @@ var createSlotError = (ownerName) => {
 var createSlottableError = (ownerName) => {
   return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
 };
-var use = React16[" use ".trim().toString()];
+var use = React17[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -39693,7 +39789,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot2 = createSlot(`Primitive.${node}`);
-  const Node2 = React17.forwardRef((props, forwardedRef) => {
+  const Node2 = React18.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -39712,7 +39808,7 @@ function dispatchDiscreteCustomEvent(target, event) {
 import * as React42 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import * as React23 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -39725,14 +39821,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React18.useRef(null);
-    const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React19.useRef(null);
+    const itemMap = React19.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React18.forwardRef(
+  const CollectionSlot = React19.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -39744,13 +39840,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React18.forwardRef(
+  const CollectionItemSlot = React19.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = React18.useRef(null);
+      const ref = React19.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React18.useEffect(() => {
+      React19.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -39760,7 +39856,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection3(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React18.useCallback(() => {
+    const getItems = React19.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -39780,11 +39876,11 @@ function createCollection(name) {
 }
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React19 from "react";
+import * as React20 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var DirectionContext = React19.createContext(void 0);
+var DirectionContext = React20.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React19.useContext(DirectionContext);
+  const globalDir = React20.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 
@@ -39792,28 +39888,13 @@ function useDirection(localDir) {
 import * as React24 from "react";
 
 // node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React20 from "react";
+import * as React21 from "react";
 function useCallbackRef(callback) {
-  const callbackRef = React20.useRef(callback);
-  React20.useEffect(() => {
+  const callbackRef = React21.useRef(callback);
+  React21.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React20.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
-}
-
-// node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
-import * as React21 from "react";
-function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
-  const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React21.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onEscapeKeyDown(event);
-      }
-    };
-    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [onEscapeKeyDown, ownerDocument]);
+  return React21.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
@@ -39850,7 +39931,7 @@ var DismissableLayer = React24.forwardRef(
     const [node, setNode] = React24.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
     const [, force] = React24.useState({});
-    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+    const composedRefs = useComposedRefs(forwardedRef, setNode);
     const layers = Array.from(context.layers);
     const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
     const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
@@ -39890,15 +39971,24 @@ var DismissableLayer = React24.forwardRef(
       onInteractOutside?.(event);
       if (!event.defaultPrevented) onDismiss?.();
     }, ownerDocument);
-    useEscapeKeydown((event) => {
-      const isHighestLayer = index2 === context.layers.size - 1;
-      if (!isHighestLayer) return;
+    const isHighestLayer = node ? index2 === layers.length - 1 : false;
+    const handleKeyDown = useEffectEvent((event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
       onEscapeKeyDown?.(event);
       if (!event.defaultPrevented && onDismiss) {
         event.preventDefault();
         onDismiss();
       }
-    }, ownerDocument);
+    });
+    React24.useEffect(() => {
+      if (!isHighestLayer) {
+        return;
+      }
+      ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+      return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+    }, [ownerDocument, isHighestLayer]);
     React24.useEffect(() => {
       if (!node) return;
       if (disableOutsidePointerEvents) {
@@ -40174,7 +40264,7 @@ var FocusScope = React26.forwardRef((props, forwardedRef) => {
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
   const lastFocusedElementRef = React26.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
+  const composedRefs = useComposedRefs(forwardedRef, setContainer);
   const focusScope = React26.useRef({
     paused: false,
     pause() {
@@ -42448,7 +42538,7 @@ var PopperContent = React31.forwardRef(
     } = props;
     const context = usePopperContext(CONTENT_NAME, __scopePopper);
     const [content, setContent] = React31.useState(null);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
+    const composedRefs = useComposedRefs(forwardedRef, setContent);
     const [arrow4, setArrow] = React31.useState(null);
     const arrowSize = useSize(arrow4);
     const arrowWidth = arrowSize?.width ?? 0;
@@ -44538,6 +44628,7 @@ var MenuSubTrigger = React42.forwardRef(
         onPointerGraceIntentChange(null);
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+    const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
     return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
@@ -44547,7 +44638,7 @@ var MenuSubTrigger = React42.forwardRef(
         "aria-controls": context.open ? subContext.contentId : void 0,
         "data-state": getOpenState(context.open),
         ...props,
-        ref: composeRefs(forwardedRef, subContext.onTriggerChange),
+        ref: composedRefs,
         onClick: (event) => {
           props.onClick?.(event);
           if (props.disabled || event.defaultPrevented) return;
@@ -44724,7 +44815,7 @@ var Root32 = Menu;
 var Anchor2 = MenuAnchor;
 var Portal2 = MenuPortal;
 var Content2 = MenuContent;
-var Group6 = MenuGroup;
+var Group7 = MenuGroup;
 var Label = MenuLabel;
 var Item2 = MenuItem;
 var CheckboxItem = MenuCheckboxItem;
@@ -44786,6 +44877,7 @@ var DropdownMenuTrigger = React43.forwardRef(
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
+    const composedRefs = useComposedRefs(forwardedRef, context.triggerRef);
     return /* @__PURE__ */ jsx32(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
@@ -44798,7 +44890,7 @@ var DropdownMenuTrigger = React43.forwardRef(
         "data-disabled": disabled ? "" : void 0,
         disabled,
         ...triggerProps,
-        ref: composeRefs(forwardedRef, context.triggerRef),
+        ref: composedRefs,
         onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
           if (!disabled && event.button === 0 && event.ctrlKey === false) {
             context.onOpenToggle();
@@ -44870,7 +44962,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx32(Group6, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Group7, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -45722,16 +45814,16 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect46, useMemo as useMemo29, useRef as useRef27, useState as useState36 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo30, useRef as useRef28, useState as useState36 } from "react";
 import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
   const [query, setQuery] = useState36("");
-  const inputRef = useRef27(null);
+  const inputRef = useRef28(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect46(() => {
+  useEffect45(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -45742,14 +45834,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo29(() => {
+  const filteredHotkeys = useMemo30(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -45925,7 +46017,7 @@ var CadViewerInner = (props) => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
-  const containerRef = useRef28(null);
+  const containerRef = useRef29(null);
   const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState37(false);
   const [autoRotate, setAutoRotate] = useState37(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
@@ -45939,7 +46031,7 @@ var CadViewerInner = (props) => {
   const { cameraType, setCameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
-  const cameraControllerRef = useRef28(null);
+  const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -45948,10 +46040,10 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef28(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef29(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef28(false);
-  const lastPresetSelectTime = useRef28(0);
+  const isAnimatingRef = useRef29(false);
+  const lastPresetSelectTime = useRef29(0);
   const PRESET_COOLDOWN = 1e3;
   const handleUserInteraction = useCallback23(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
@@ -46046,24 +46138,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect47(() => {
+  useEffect46(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect47(() => {
+  useEffect46(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect47(() => {
+  useEffect46(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect47(() => {
+  useEffect46(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect47(() => {
+  useEffect46(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -46464,10 +46556,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect48, useState as useState38, useMemo as useMemo30, useCallback as useCallback24 } from "react";
+import { useEffect as useEffect47, useState as useState38, useMemo as useMemo31, useCallback as useCallback24 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo30(() => document.createElement("a"), []);
+  const link = useMemo31(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -46477,7 +46569,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect48(
+  useEffect47(
     () => () => {
       link.remove();
       instance = null;
@@ -46498,11 +46590,11 @@ function useExportGltfUrl(options = {}) {
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect48(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect47(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo30(() => new GLTFExporter3(), []);
+  const exporter = useMemo31(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.570",
+  "version": "0.0.572",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",