@tscircuit/3d-viewer 0.0.574 → 0.0.576

package/dist/index.js

@@ -14432,7 +14432,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState38, useCallback as useCallback24, useRef as useRef29, useEffect as useEffect47 } from "react";
+import { useState as useState39, useCallback as useCallback25, useRef as useRef28, useEffect as useEffect48 } from "react";
 import * as THREE46 from "three";
 
 // src/CadViewerJscad.tsx
@@ -32429,7 +32429,7 @@ import * as THREE21 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.573",
+  version: "0.0.575",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32459,7 +32459,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.421",
-    "circuit-to-canvas": "^0.0.110",
+    "circuit-to-canvas": "^0.0.111",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -35468,6 +35468,7 @@ function createPadTextureForLayer({
   const holes = su5(circuitJson).pcb_hole.list();
   const platedHolesOnLayer = su5(circuitJson).pcb_plated_hole.list().filter((e) => !Array.isArray(e.layers) || e.layers.includes(layer));
   const viasOnLayer = su5(circuitJson).pcb_via.list().filter((e) => !Array.isArray(e.layers) || e.layers.includes(layer));
+  const cutouts = su5(circuitJson).pcb_cutout.list();
   const drillElements = [...holes, ...platedHolesOnLayer, ...viasOnLayer];
   const pcbRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
   const boardOutlineBounds = calculateOutlineBounds(boardData);
@@ -35525,7 +35526,7 @@ function createPadTextureForLayer({
     minY: boardOutlineBounds.minY,
     maxY: boardOutlineBounds.maxY
   });
-  drawer.drawElements([...smtPadsOnLayer, ...drillElements], {
+  drawer.drawElements([...smtPadsOnLayer, ...drillElements, ...cutouts], {
     layers: [pcbRenderLayer],
     drawSoldermask: false,
     drawSoldermaskTop: false,
@@ -39091,7 +39092,6 @@ var BoardMeshes = ({
         const texture = typedMaterial[prop];
         if (texture && texture instanceof THREE45.Texture) {
           texture.dispose();
-          typedMaterial[prop] = null;
         }
       }
       material.dispose();
@@ -39735,7 +39735,7 @@ var ToastProvider = ({
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
 import * as React44 from "react";
@@ -39745,7 +39745,7 @@ var canUseDOM = !!(typeof window !== "undefined" && window.document && window.do
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+    if (checkForDefaultPrevented === false || !event || !event.defaultPrevented) {
       return ourEventHandler?.(event);
     }
   };
@@ -39805,11 +39805,13 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       return /* @__PURE__ */ jsx21(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
-    function useContext22(consumerName, scope) {
+    function useContext22(consumerName, scope, options = {}) {
+      const { optional = false } = options;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const context = React14.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
+      if (optional) return void 0;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
     return [Provider, useContext22];
@@ -39851,7 +39853,7 @@ function composeContextScopes(...scopes) {
 }
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React17 from "react";
+import * as React16 from "react";
 
 // node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
 import * as React15 from "react";
@@ -39860,32 +39862,7 @@ var useLayoutEffect2 = globalThis?.document ? React15.useLayoutEffect : () => {
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import * as React22 from "react";
-
-// node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
-import * as React16 from "react";
-var useReactEffectEvent = React16[" useEffectEvent ".trim().toString()];
-var useReactInsertionEffect = React16[" useInsertionEffect ".trim().toString()];
-function useEffectEvent(callback) {
-  if (typeof useReactEffectEvent === "function") {
-    return useReactEffectEvent(callback);
-  }
-  const ref = React16.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 React16.useMemo(() => ((...args) => ref.current?.(...args)), []);
-}
-
-// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-var useInsertionEffect = React17[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React16[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -39900,8 +39877,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React17.useRef(prop !== void 0);
-    React17.useEffect(() => {
+    const isControlledRef = React16.useRef(prop !== void 0);
+    React16.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -39913,7 +39890,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React17.useCallback(
+  const setValue = React16.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -39932,13 +39909,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React17.useState(defaultProp);
-  const prevValueRef = React17.useRef(value);
-  const onChangeRef = React17.useRef(onChange);
+  const [value, setValue] = React16.useState(defaultProp);
+  const prevValueRef = React16.useRef(value);
+  const onChangeRef = React16.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React17.useEffect(() => {
+  React16.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -39951,14 +39928,14 @@ function isFunction(value) {
 }
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React19 from "react";
+import * as React18 from "react";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import * as React18 from "react";
+import * as React17 from "react";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
-  const Slot2 = React18.forwardRef((props, forwardedRef) => {
+  const Slot2 = React17.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     let slottableElement = null;
     let hasSlottable = false;
@@ -39966,7 +39943,7 @@ function createSlot(ownerName) {
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    React18.Children.forEach(children, (maybeSlottable) => {
+    React17.Children.forEach(children, (maybeSlottable) => {
       if (isSlottable(maybeSlottable)) {
         hasSlottable = true;
         const slottable = maybeSlottable;
@@ -39981,13 +39958,13 @@ function createSlot(ownerName) {
       }
     });
     if (slottableElement) {
-      slottableElement = React18.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 && React18.Children.count(children) === 1 && React18.isValidElement(children)
+      !hasSlottable && React17.Children.count(children) === 1 && React17.isValidElement(children)
     ) {
       slottableElement = children;
     }
@@ -40002,10 +39979,10 @@ function createSlot(ownerName) {
       return children;
     }
     const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
-    if (slottableElement.type !== React18.Fragment) {
+    if (slottableElement.type !== React17.Fragment) {
       mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
     }
-    return React18.cloneElement(slottableElement, mergedProps);
+    return React17.cloneElement(slottableElement, mergedProps);
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -40014,10 +39991,10 @@ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol.for("radix.slottable");
 var getSlottableElementFromSlottable = (slottable, child) => {
   if ("child" in slottable.props) {
     const child2 = slottable.props.child;
-    if (!React18.isValidElement(child2)) return null;
-    return React18.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 React18.isValidElement(child) ? child : null;
+  return React17.isValidElement(child) ? child : null;
 };
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -40057,7 +40034,7 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 function isSlottable(child) {
-  return React18.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) {
@@ -40072,7 +40049,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 = React18[" use ".trim().toString()];
+var use = React17[" use ".trim().toString()];
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -40097,7 +40074,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot2 = createSlot(`Primitive.${node}`);
-  const Node2 = React19.forwardRef((props, forwardedRef) => {
+  const Node2 = React18.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -40116,7 +40093,7 @@ function dispatchDiscreteCustomEvent(target, event) {
 import * as React43 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
-import * as React20 from "react";
+import * as React19 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import * as React23 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -40129,14 +40106,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React20.useRef(null);
-    const itemMap = React20.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = React19.useRef(null);
+    const itemMap = React19.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsx23(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React20.forwardRef(
+  const CollectionSlot = React19.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -40148,13 +40125,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 = React20.forwardRef(
+  const CollectionItemSlot = React19.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = React20.useRef(null);
+      const ref = React19.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      React20.useEffect(() => {
+      React19.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -40164,7 +40141,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection3(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React20.useCallback(() => {
+    const getItems = React19.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -40184,25 +40161,25 @@ function createCollection(name) {
 }
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
-import * as React21 from "react";
+import * as React20 from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var DirectionContext = React21.createContext(void 0);
+var DirectionContext = React20.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React21.useContext(DirectionContext);
+  const globalDir = React20.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import * as React25 from "react";
+import * as React24 from "react";
 
 // node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import * as React24 from "react";
+import * as React21 from "react";
 function useCallbackRef(callback) {
-  const callbackRef = React24.useRef(callback);
-  React24.useEffect(() => {
+  const callbackRef = React21.useRef(callback);
+  React21.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React24.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+  return React21.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
@@ -40212,7 +40189,7 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React25.createContext({
+var DismissableLayerContext = React24.createContext({
   layers: /* @__PURE__ */ new Set(),
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
   branches: /* @__PURE__ */ new Set(),
@@ -40223,7 +40200,7 @@ var DismissableLayerContext = React25.createContext({
   // See https://github.com/radix-ui/primitives/issues/3346
   dismissableSurfaces: /* @__PURE__ */ new Set()
 });
-var DismissableLayer = React25.forwardRef(
+var DismissableLayer = React24.forwardRef(
   (props, forwardedRef) => {
     const {
       disableOutsidePointerEvents = false,
@@ -40235,28 +40212,22 @@ var DismissableLayer = React25.forwardRef(
       onDismiss,
       ...layerProps
     } = props;
-    const context = React25.useContext(DismissableLayerContext);
-    const [node, setNode] = React25.useState(null);
+    const context = React24.useContext(DismissableLayerContext);
+    const [node, setNode] = React24.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-    const [, force] = React25.useState({});
+    const [, force] = React24.useState({});
     const composedRefs = useComposedRefs(forwardedRef, setNode);
     const layers = Array.from(context.layers);
-    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [
+      ...context.layersWithOutsidePointerEventsDisabled
+    ].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = highestLayerWithOutsidePointerEventsDisabled ? layers.indexOf(highestLayerWithOutsidePointerEventsDisabled) : -1;
     const index2 = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index2 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const isDeferredPointerDownOutsideRef = React25.useRef(false);
+    const isDeferredPointerDownOutsideRef = React24.useRef(false);
     const pointerDownOutside = usePointerDownOutside(
       (event) => {
-        const target = event.target;
-        if (!(target instanceof Node)) {
-          return;
-        }
-        const isPointerDownOnBranch = [...context.branches].some(
-          (branch) => branch.contains(target)
-        );
-        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
         onPointerDownOutside?.(event);
         onInteractOutside?.(event);
         if (!event.defaultPrevented) onDismiss?.();
@@ -40265,7 +40236,19 @@ var DismissableLayer = React25.forwardRef(
         ownerDocument,
         deferPointerDownOutside,
         isDeferredPointerDownOutsideRef,
-        dismissableSurfaces: context.dismissableSurfaces
+        dismissableSurfaces: context.dismissableSurfaces,
+        shouldHandlePointerDownOutside: React24.useCallback(
+          (target) => {
+            if (!(target instanceof Node)) {
+              return false;
+            }
+            const isPointerDownOnBranch = [...context.branches].some(
+              (branch) => branch.contains(target)
+            );
+            return isPointerEventsEnabled && !isPointerDownOnBranch;
+          },
+          [context.branches, isPointerEventsEnabled]
+        )
       }
     );
     const focusOutside = useFocusOutside((event) => {
@@ -40280,7 +40263,7 @@ var DismissableLayer = React25.forwardRef(
       if (!event.defaultPrevented) onDismiss?.();
     }, ownerDocument);
     const isHighestLayer = node ? index2 === layers.length - 1 : false;
-    const handleKeyDown = useEffectEvent((event) => {
+    const handleKeyDown = useCallbackRef((event) => {
       if (event.key !== "Escape") {
         return;
       }
@@ -40290,14 +40273,14 @@ var DismissableLayer = React25.forwardRef(
         onDismiss();
       }
     });
-    React25.useEffect(() => {
+    React24.useEffect(() => {
       if (!isHighestLayer) {
         return;
       }
       ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
       return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
-    }, [ownerDocument, isHighestLayer]);
-    React25.useEffect(() => {
+    }, [ownerDocument, isHighestLayer, handleKeyDown]);
+    React24.useEffect(() => {
       if (!node) return;
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -40317,7 +40300,7 @@ var DismissableLayer = React25.forwardRef(
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-    React25.useEffect(() => {
+    React24.useEffect(() => {
       return () => {
         if (!node) return;
         context.layers.delete(node);
@@ -40325,7 +40308,7 @@ var DismissableLayer = React25.forwardRef(
         dispatchUpdate();
       };
     }, [node, context]);
-    React25.useEffect(() => {
+    React24.useEffect(() => {
       const handleUpdate = () => force({});
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -40351,11 +40334,11 @@ var DismissableLayer = React25.forwardRef(
 );
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React25.forwardRef((props, forwardedRef) => {
-  const context = React25.useContext(DismissableLayerContext);
-  const ref = React25.useRef(null);
+var DismissableLayerBranch = React24.forwardRef((props, forwardedRef) => {
+  const context = React24.useContext(DismissableLayerContext);
+  const ref = React24.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React25.useEffect(() => {
+  React24.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -40367,20 +40350,22 @@ var DismissableLayerBranch = React25.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx26(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
+var IS_TRUE = () => true;
 function usePointerDownOutside(onPointerDownOutside, args) {
   const {
     ownerDocument = globalThis?.document,
     deferPointerDownOutside = false,
     isDeferredPointerDownOutsideRef,
-    dismissableSurfaces
+    dismissableSurfaces,
+    shouldHandlePointerDownOutside = IS_TRUE
   } = args;
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React25.useRef(false);
-  const isPointerDownOutsideRef = React25.useRef(false);
-  const interceptedOutsideInteractionEventsRef = React25.useRef(/* @__PURE__ */ new Map());
-  const handleClickRef = React25.useRef(() => {
+  const isPointerInsideReactTreeRef = React24.useRef(false);
+  const isPointerDownOutsideRef = React24.useRef(false);
+  const interceptedOutsideInteractionEventsRef = React24.useRef(/* @__PURE__ */ new Map());
+  const handleClickRef = React24.useRef(() => {
   });
-  React25.useEffect(() => {
+  React24.useEffect(() => {
     function resetOutsideInteraction() {
       isPointerDownOutsideRef.current = false;
       isDeferredPointerDownOutsideRef.current = false;
@@ -40427,6 +40412,12 @@ function usePointerDownOutside(onPointerDownOutside, args) {
           }
         };
         var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
+        if (!shouldHandlePointerDownOutside(event.target)) {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          resetOutsideInteraction();
+          isPointerInsideReactTreeRef.current = false;
+          return;
+        }
         const eventDetail = { originalEvent: event };
         isPointerDownOutsideRef.current = true;
         isDeferredPointerDownOutsideRef.current = deferPointerDownOutside && event.button === 0;
@@ -40473,7 +40464,8 @@ function usePointerDownOutside(onPointerDownOutside, args) {
     handlePointerDownOutside,
     deferPointerDownOutside,
     isDeferredPointerDownOutsideRef,
-    dismissableSurfaces
+    dismissableSurfaces,
+    shouldHandlePointerDownOutside
   ]);
   return {
     // ensures we check React component tree (not just DOM tree)
@@ -40482,8 +40474,8 @@ function usePointerDownOutside(onPointerDownOutside, args) {
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React25.useRef(false);
-  React25.useEffect(() => {
+  const isFocusInsideReactTreeRef = React24.useRef(false);
+  React24.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -40516,11 +40508,11 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 
 // node_modules/@radix-ui/react-focus-guards/dist/index.mjs
-import * as React26 from "react";
+import * as React25 from "react";
 var count = 0;
 var guards = null;
 function useFocusGuards() {
-  React26.useEffect(() => {
+  React25.useEffect(() => {
     if (!guards) {
       guards = { start: createFocusGuard(), end: createFocusGuard() };
     }
@@ -40554,13 +40546,13 @@ function createFocusGuard() {
 }
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
-import * as React27 from "react";
+import * as React26 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React27.forwardRef((props, forwardedRef) => {
+var FocusScope = React26.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -40568,12 +40560,12 @@ var FocusScope = React27.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container, setContainer] = React27.useState(null);
+  const [container, setContainer] = React26.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React27.useRef(null);
+  const lastFocusedElementRef = React26.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, setContainer);
-  const focusScope = React27.useRef({
+  const focusScope = React26.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -40582,7 +40574,7 @@ var FocusScope = React27.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container) return;
@@ -40618,7 +40610,7 @@ var FocusScope = React27.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container, focusScope.paused]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (container) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -40649,7 +40641,7 @@ var FocusScope = React27.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React27.useCallback(
+  const handleKeyDown = React26.useCallback(
     (event) => {
       if (!loop && !trapped) return;
       if (focusScope.paused) return;
@@ -40703,8 +40695,12 @@ function getTabbableCandidates(container) {
   return nodes;
 }
 function findVisible(elements, container) {
+  const canUseCheckVisibility = typeof container.checkVisibility === "function" && container.checkVisibility({ checkVisibilityCSS: true });
   for (const element of elements) {
-    if (!isHidden(element, { upTo: container })) return element;
+    const hidden = canUseCheckVisibility ? !element.checkVisibility({ checkVisibilityCSS: true }) : isHidden(element, { upTo: container });
+    if (!hidden) {
+      return element;
+    }
   }
 }
 function isHidden(node, { upTo }) {
@@ -40758,11 +40754,11 @@ function removeLinks(items) {
 }
 
 // node_modules/@radix-ui/react-id/dist/index.mjs
-import * as React28 from "react";
-var useReactId = React28[" useId ".trim().toString()] || (() => void 0);
+import * as React27 from "react";
+var useReactId = React27[" useId ".trim().toString()] || (() => void 0);
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React28.useState(useReactId());
+  const [id, setId] = React27.useState(useReactId());
   useLayoutEffect2(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count2++));
   }, [deterministicId]);
@@ -40770,7 +40766,7 @@ function useId(deterministicId) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import * as React32 from "react";
+import * as React31 from "react";
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
@@ -42390,7 +42386,7 @@ var computePosition2 = (reference, floating, options) => {
 };
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-import * as React29 from "react";
+import * as React28 from "react";
 import { useLayoutEffect as useLayoutEffect3 } from "react";
 import * as ReactDOM3 from "react-dom";
 var isClient = typeof document !== "undefined";
@@ -42456,7 +42452,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React29.useRef(value);
+  const ref = React28.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -42479,7 +42475,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React29.useState({
+  const [data, setData] = React28.useState({
     x: 0,
     y: 0,
     strategy,
@@ -42487,19 +42483,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React29.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React28.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React29.useState(null);
-  const [_floating, _setFloating] = React29.useState(null);
-  const setReference = React29.useCallback((node) => {
+  const [_reference, _setReference] = React28.useState(null);
+  const [_floating, _setFloating] = React28.useState(null);
+  const setReference = React28.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React29.useCallback((node) => {
+  const setFloating = React28.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -42507,14 +42503,14 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React29.useRef(null);
-  const floatingRef = React29.useRef(null);
-  const dataRef = React29.useRef(data);
+  const referenceRef = React28.useRef(null);
+  const floatingRef = React28.useRef(null);
+  const dataRef = React28.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
   const openRef = useLatestRef(open);
-  const update = React29.useCallback(() => {
+  const update = React28.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -42552,7 +42548,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React29.useRef(false);
+  const isMountedRef = React28.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -42569,17 +42565,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React29.useMemo(() => ({
+  const refs = React28.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React29.useMemo(() => ({
+  const elements = React28.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React29.useMemo(() => {
+  const floatingStyles = React28.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -42605,7 +42601,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React29.useMemo(() => ({
+  return React28.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -42701,10 +42697,10 @@ var arrow3 = (options, deps) => {
 };
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
-import * as React30 from "react";
+import * as React29 from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var NAME = "Arrow";
-var Arrow = React30.forwardRef((props, forwardedRef) => {
+var Arrow = React29.forwardRef((props, forwardedRef) => {
   const { children, width: width10 = 10, height: height10 = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx28(
     Primitive.svg,
@@ -42723,9 +42719,9 @@ Arrow.displayName = NAME;
 var Root = Arrow;
 
 // node_modules/@radix-ui/react-use-size/dist/index.mjs
-import * as React31 from "react";
+import * as React30 from "react";
 function useSize(element) {
-  const [size4, setSize] = React31.useState(void 0);
+  const [size4, setSize] = React30.useState(void 0);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -42766,8 +42762,8 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React32.useState(null);
-  const [placementState, setPlacementState] = React32.useState(void 0);
+  const [anchor, setAnchor] = React31.useState(null);
+  const [placementState, setPlacementState] = React31.useState(void 0);
   return /* @__PURE__ */ jsx29(
     PopperProvider,
     {
@@ -42782,13 +42778,13 @@ var Popper = (props) => {
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React32.forwardRef(
+var PopperAnchor = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopper, virtualRef, ...anchorProps } = props;
     const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-    const ref = React32.useRef(null);
+    const ref = React31.useRef(null);
     const onAnchorChange = context.onAnchorChange;
-    const callbackRef = React32.useCallback(
+    const callbackRef = React31.useCallback(
       (node) => {
         ref.current = node;
         if (node) {
@@ -42798,8 +42794,8 @@ var PopperAnchor = React32.forwardRef(
       [onAnchorChange]
     );
     const composedRefs = useComposedRefs(forwardedRef, callbackRef);
-    const anchorRef = React32.useRef(null);
-    React32.useEffect(() => {
+    const anchorRef = React31.useRef(null);
+    React31.useEffect(() => {
       if (!virtualRef) {
         return;
       }
@@ -42826,7 +42822,7 @@ var PopperAnchor = React32.forwardRef(
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React32.forwardRef(
+var PopperContent = React31.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopePopper,
@@ -42845,9 +42841,9 @@ var PopperContent = React32.forwardRef(
       ...contentProps
     } = props;
     const context = usePopperContext(CONTENT_NAME, __scopePopper);
-    const [content, setContent] = React32.useState(null);
+    const [content, setContent] = React31.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, setContent);
-    const [arrow4, setArrow] = React32.useState(null);
+    const [arrow4, setArrow] = React31.useState(null);
     const arrowSize = useSize(arrow4);
     const arrowWidth = arrowSize?.width ?? 0;
     const arrowHeight = arrowSize?.height ?? 0;
@@ -42927,7 +42923,7 @@ var PopperContent = React32.forwardRef(
     const arrowX = middlewareData.arrow?.x;
     const arrowY = middlewareData.arrow?.y;
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-    const [contentZIndex, setContentZIndex] = React32.useState();
+    const [contentZIndex, setContentZIndex] = React31.useState();
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
@@ -42994,7 +42990,7 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React32.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
@@ -43086,13 +43082,13 @@ var Content = PopperContent;
 var Arrow2 = PopperArrow;
 
 // node_modules/@radix-ui/react-portal/dist/index.mjs
-import * as React33 from "react";
+import * as React32 from "react";
 import * as ReactDOM4 from "react-dom";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
-var Portal = React33.forwardRef((props, forwardedRef) => {
+var Portal = React32.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React33.useState(false);
+  const [mounted, setMounted] = React32.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
   return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx30(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
@@ -43101,9 +43097,9 @@ Portal.displayName = PORTAL_NAME;
 
 // node_modules/@radix-ui/react-presence/dist/index.mjs
 import * as React210 from "react";
-import * as React34 from "react";
+import * as React33 from "react";
 function useStateMachine(initialState, machine) {
-  return React34.useReducer((state, event) => {
+  return React33.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -43122,6 +43118,7 @@ function usePresence(present) {
   const stylesRef = React210.useRef(null);
   const prevPresentRef = React210.useRef(present);
   const prevAnimationNameRef = React210.useRef("none");
+  const mountAnimationNameRef = React210.useRef(void 0);
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -43137,8 +43134,12 @@ function usePresence(present) {
     }
   });
   React210.useEffect(() => {
-    const currentAnimationName = getAnimationName(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+    if (state === "mounted") {
+      prevAnimationNameRef.current = mountAnimationNameRef.current ?? getAnimationName(stylesRef.current);
+      mountAnimationNameRef.current = void 0;
+    } else {
+      prevAnimationNameRef.current = "none";
+    }
   }, [state]);
   useLayoutEffect2(() => {
     const styles = stylesRef.current;
@@ -43148,6 +43149,7 @@ function usePresence(present) {
       const prevAnimationName = prevAnimationNameRef.current;
       const currentAnimationName = getAnimationName(styles);
       if (present) {
+        mountAnimationNameRef.current = currentAnimationName;
         send("MOUNT");
       } else if (currentAnimationName === "none" || styles?.display === "none") {
         send("UNMOUNT");
@@ -43203,7 +43205,13 @@ function usePresence(present) {
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
     ref: React210.useCallback((node2) => {
-      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      if (node2) {
+        const styles = getComputedStyle(node2);
+        stylesRef.current = styles;
+        mountAnimationNameRef.current = getAnimationName(styles);
+      } else {
+        stylesRef.current = null;
+      }
       setNode(node2);
     }, [])
   };
@@ -43261,6 +43269,36 @@ function getElementRef2(element) {
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import * as React35 from "react";
+
+// node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
+import * as React211 from "react";
+import * as React34 from "react";
+var _isHydrated = false;
+function useIsHydrated() {
+  const [isHydrated, setIsHydrated] = React34.useState(_isHydrated);
+  React34.useEffect(() => {
+    if (!_isHydrated) {
+      _isHydrated = true;
+      setIsHydrated(true);
+    }
+  }, []);
+  return isHydrated;
+}
+var useReactSyncExternalStore = React211[" useSyncExternalStore ".trim().toString()];
+function subscribe() {
+  return () => {
+  };
+}
+function useIsHydratedModern() {
+  return useReactSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+var useIsHydrated2 = typeof useReactSyncExternalStore === "function" ? useIsHydratedModern : useIsHydrated;
+
+// node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import { jsx as jsx31 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
@@ -43384,12 +43422,21 @@ var RovingFocusGroupItem = React35.forwardRef(
     const isCurrentTabStop = context.currentTabStopId === id;
     const getItems = useCollection(__scopeRovingFocusGroup);
     const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
+    const isHydrated = useIsHydrated2();
+    useLayoutEffect2(() => {
+      if (!isHydrated || !focusable) {
+        return;
+      }
+      onFocusableItemAdd();
+      return () => onFocusableItemRemove();
+    }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
     React35.useEffect(() => {
-      if (focusable) {
-        onFocusableItemAdd();
-        return () => onFocusableItemRemove();
+      if (isHydrated || !focusable) {
+        return;
       }
-    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+      onFocusableItemAdd();
+      return () => onFocusableItemRemove();
+    }, [isHydrated, focusable, onFocusableItemAdd, onFocusableItemRemove]);
     return /* @__PURE__ */ jsx31(
       Collection.ItemSlot,
       {
@@ -43648,9 +43695,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState31 } from "react";
+import { useState as useState32 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState31(function() {
+  var ref = useState32(function() {
     return {
       // value
       value: initialValue,
@@ -44699,8 +44746,13 @@ var MenuItem = React43.forwardRef(
           if (!isPointerDownRef.current) event.currentTarget?.click();
         }),
         onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+          if (disabled || event.target !== event.currentTarget) {
+            return;
+          }
           const isTypingAhead = contentContext.searchRef.current !== "";
-          if (disabled || isTypingAhead && event.key === " ") return;
+          if (isTypingAhead && event.key === " ") {
+            return;
+          }
           if (SELECTION_KEYS.includes(event.key)) {
             event.currentTarget.click();
             event.preventDefault();
@@ -45003,8 +45055,13 @@ var MenuSubTrigger = React43.forwardRef(
           })
         ),
         onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+          if (props.disabled || event.target !== event.currentTarget) {
+            return;
+          }
           const isTypingAhead = contentContext.searchRef.current !== "";
-          if (props.disabled || isTypingAhead && event.key === " ") return;
+          if (isTypingAhead && event.key === " ") {
+            return;
+          }
           if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
             context.onOpenChange(true);
             context.content?.focus();
@@ -45390,7 +45447,7 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 
 // src/components/Icons.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -45497,8 +45554,8 @@ var iconContainerStyles = {
 var AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { lightingEnabled, setLightingEnabled } = useRenderingMode();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState35(false);
-  const [hoveredItem, setHoveredItem] = useState35(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState36(false);
+  const [hoveredItem, setHoveredItem] = useState36(null);
   return /* @__PURE__ */ jsxs8(Fragment11, { children: [
     /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
@@ -45886,8 +45943,8 @@ var ContextMenu = ({
   onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
-  const [cameraSubOpen, setCameraSubOpen] = useState36(false);
-  const [hoveredItem, setHoveredItem] = useState36(null);
+  const [cameraSubOpen, setCameraSubOpen] = useState37(false);
+  const [hoveredItem, setHoveredItem] = useState37(null);
   return /* @__PURE__ */ jsx36(
     "div",
     {
@@ -46145,16 +46202,16 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect46, useMemo as useMemo31, useRef as useRef28, useState as useState37 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo30, useRef as useRef27, useState as useState38 } from "react";
 import { jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState37("");
-  const inputRef = useRef28(null);
+  const [query, setQuery] = useState38("");
+  const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
-  useEffect46(() => {
+  useEffect47(() => {
     if (!open) return void 0;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -46165,14 +46222,14 @@ var KeyboardShortcutsDialog = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, onClose]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (open) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo31(() => {
+  const filteredHotkeys = useMemo30(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -46344,25 +46401,25 @@ var readStoredCameraType = () => {
   return stored === "orthographic" || stored === "perspective" ? stored : void 0;
 };
 var CadViewerInner = (props) => {
-  const [engine, setEngine] = useState38(() => {
+  const [engine, setEngine] = useState39(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
-  const containerRef = useRef29(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState38(false);
-  const [autoRotate, setAutoRotate] = useState38(() => {
+  const containerRef = useRef28(null);
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState39(false);
+  const [autoRotate, setAutoRotate] = useState39(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored === "false" ? false : true;
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState38(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState39(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState38("Custom");
+  const [cameraPreset, setCameraPreset] = useState39("Custom");
   const { cameraType, setCameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
-  const cameraControllerRef = useRef29(null);
+  const cameraControllerRef = useRef28(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -46371,12 +46428,12 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef29(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef28(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef29(false);
-  const lastPresetSelectTime = useRef29(0);
+  const isAnimatingRef = useRef28(false);
+  const lastPresetSelectTime = useRef28(0);
   const PRESET_COOLDOWN = 1e3;
-  const handleUserInteraction = useCallback24(() => {
+  const handleUserInteraction = useCallback25(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
       return;
     }
@@ -46387,15 +46444,15 @@ var CadViewerInner = (props) => {
       setCameraPreset("Custom");
     }
   }, [menuVisible]);
-  const toggleAutoRotate = useCallback24(() => {
+  const toggleAutoRotate = useCallback25(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
   const downloadGltf = useGlobalDownloadGltf();
-  const closeMenu = useCallback24(() => {
+  const closeMenu = useCallback25(() => {
     setMenuVisible(false);
   }, [setMenuVisible]);
-  const handleCameraControllerReady = useCallback24(
+  const handleCameraControllerReady = useCallback25(
     (controller) => {
       cameraControllerRef.current = controller;
       externalCameraControllerReady?.(controller);
@@ -46469,24 +46526,24 @@ var CadViewerInner = (props) => {
       description: "Toggle translucent components"
     }
   );
-  useEffect47(() => {
+  useEffect48(() => {
     if (containerRef.current) {
       registerHotkeyViewer(containerRef.current);
     }
   }, []);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect47(() => {
+  useEffect48(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -46887,10 +46944,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect48, useState as useState39, useMemo as useMemo32, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect49, useState as useState40, useMemo as useMemo31, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo32(() => 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");
@@ -46900,7 +46957,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect48(
+  useEffect49(
     () => () => {
       link.remove();
       instance = null;
@@ -46908,24 +46965,24 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback25((obj3D) => {
+  const ref = useCallback26((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState39();
-  const [error, setError] = useState39();
-  const ref = useCallback25(
+  const [url, setUrl] = useState40();
+  const [error, setError] = useState40();
+  const ref = useCallback26(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect48(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect49(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo32(() => 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.574",
+  "version": "0.0.576",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -30,7 +30,7 @@
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.421",
-    "circuit-to-canvas": "^0.0.110",
+    "circuit-to-canvas": "^0.0.111",
     "react-hot-toast": "^2.6.0",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",