@tscircuit/3d-viewer 0.0.615 → 0.0.616

package/dist/index.js

@@ -18979,7 +18979,7 @@ var useHiddenCadComponents = (circuitKey) => {
 };
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState42 } from "react";
+import { useCallback as useCallback24, useContext as useContext11, useEffect as useEffect50, useRef as useRef29, useState as useState42 } from "react";
 import * as THREE54 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
@@ -45485,7 +45485,7 @@ import * as THREE25 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.614",
+  version: "0.0.615",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -54551,6 +54551,8 @@ function mergeProps(slotProps, childProps) {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
       overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else if (propName === "aria-describedby") {
+      overrideProps[propName] = concatAriaDescribedby(childPropValue, slotPropValue);
     }
   }
   return { ...slotProps, ...overrideProps };
@@ -54583,6 +54585,17 @@ function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
 __name6(isPromiseLike, "isPromiseLike");
+function concatAriaDescribedby(...values) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const value of values) {
+    if (typeof value !== "string") continue;
+    for (const id of String(value).trim().split(/\s+/)) {
+      if (id) ids.add(id);
+    }
+  }
+  return ids.size > 0 ? Array.from(ids).join(" ") : void 0;
+}
+__name6(concatAriaDescribedby, "concatAriaDescribedby");
 var createSlotError = /* @__PURE__ */ __name6((ownerName) => {
   return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
 }, "createSlotError");
@@ -55186,10 +55199,14 @@ import * as React19 from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var __defProp11 = Object.defineProperty;
 var __name9 = (target, value) => __defProp11(target, "name", { value, configurable: true });
+var Direction = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
 var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React19.useContext(DirectionContext);
-  return localDir || globalDir || "ltr";
+  return localDir || globalDir || Direction.LTR;
 }
 __name9(useDirection, "useDirection");
 
@@ -55602,6 +55619,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
     const {
       loop = false,
       trapped = false,
+      branches,
       onMountAutoFocus: onMountAutoFocusProp,
       onUnmountAutoFocus: onUnmountAutoFocusProp,
       ...scopeProps
@@ -55611,6 +55629,18 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
     const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
     const lastFocusedElementRef = React25.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, setContainer);
+    const branchesRef = React25.useRef(branches);
+    React25.useEffect(() => {
+      branchesRef.current = branches;
+    });
+    const isTargetInScope = React25.useCallback(
+      (target) => {
+        if (!target) return false;
+        if (container?.contains(target)) return true;
+        return Boolean(branchesRef.current?.some((branch) => branch.contains(target)));
+      },
+      [container]
+    );
     const focusScope = React25.useRef({
       paused: false,
       pause() {
@@ -55625,7 +55655,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
         let handleFocusIn2 = function(event) {
           if (focusScope.paused || !container) return;
           const target = event.target;
-          if (container.contains(target)) {
+          if (isTargetInScope(target)) {
             lastFocusedElementRef.current = target;
           } else {
             focus(lastFocusedElementRef.current, { select: true });
@@ -55634,7 +55664,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
           if (focusScope.paused || !container) return;
           const relatedTarget = event.relatedTarget;
           if (relatedTarget === null) return;
-          if (!container.contains(relatedTarget)) {
+          if (!isTargetInScope(relatedTarget)) {
             focus(lastFocusedElementRef.current, { select: true });
           }
         }, handleMutations2 = function(mutations) {
@@ -55658,7 +55688,7 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
           mutationObserver.disconnect();
         };
       }
-    }, [trapped, container, focusScope.paused]);
+    }, [trapped, container, focusScope.paused, isTargetInScope]);
     React25.useEffect(() => {
       if (container) {
         focusScopesStack.add(focusScope);
@@ -55718,6 +55748,35 @@ var FocusScope = /* @__PURE__ */ React25.forwardRef(
     return /* @__PURE__ */ jsx27(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
   }, "FocusScope")
 );
+var FocusScopeBranchContext = React25.createContext(null);
+function FocusScopeBranchProvider({ registry, children }) {
+  if (!registry) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx27(FocusScopeBranchContext.Provider, { value: registry, children });
+}
+__name13(FocusScopeBranchProvider, "FocusScopeBranchProvider");
+function useFocusScopeBranchRegistry() {
+  const [nodes, setNodes] = React25.useState([]);
+  const registry = React25.useMemo(
+    () => ({
+      add: /* @__PURE__ */ __name13((node) => setNodes((prev) => prev.includes(node) ? prev : [...prev, node]), "add"),
+      remove: /* @__PURE__ */ __name13((node) => setNodes((prev) => prev.filter((current) => current !== node)), "remove")
+    }),
+    []
+  );
+  return { nodes, registry };
+}
+__name13(useFocusScopeBranchRegistry, "useFocusScopeBranchRegistry");
+function useFocusScopeBranch(node) {
+  const registry = React25.useContext(FocusScopeBranchContext);
+  React25.useEffect(() => {
+    if (!node || !registry) return;
+    registry.add(node);
+    return () => registry.remove(node);
+  }, [node, registry]);
+}
+__name13(useFocusScopeBranch, "useFocusScopeBranch");
 function focusFirst(candidates, { select = false } = {}) {
   const previouslyFocusedElement = document.activeElement;
   for (const candidate of candidates) {
@@ -57742,6 +57801,7 @@ function useSize(element) {
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      let rAF = 0;
       const resizeObserver = new ResizeObserver((entries) => {
         if (!Array.isArray(entries)) {
           return;
@@ -57750,21 +57810,27 @@ function useSize(element) {
           return;
         }
         const entry = entries[0];
-        let width10;
-        let height10;
-        if ("borderBoxSize" in entry) {
-          const borderSizeEntry = entry["borderBoxSize"];
-          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
-          width10 = borderSize["inlineSize"];
-          height10 = borderSize["blockSize"];
-        } else {
-          width10 = element.offsetWidth;
-          height10 = element.offsetHeight;
-        }
-        setSize({ width: width10, height: height10 });
+        window.cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(() => {
+          let width10;
+          let height10;
+          if ("borderBoxSize" in entry) {
+            const borderSizeEntry = entry["borderBoxSize"];
+            const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+            width10 = borderSize["inlineSize"];
+            height10 = borderSize["blockSize"];
+          } else {
+            width10 = element.offsetWidth;
+            height10 = element.offsetHeight;
+          }
+          setSize({ width: width10, height: height10 });
+        });
       });
       resizeObserver.observe(element, { box: "border-box" });
-      return () => resizeObserver.unobserve(element);
+      return () => {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.unobserve(element);
+      };
     } else {
       setSize(void 0);
     }
@@ -57777,6 +57843,14 @@ __name15(useSize, "useSize");
 import { jsx as jsx28 } from "react/jsx-runtime";
 var __defProp18 = Object.defineProperty;
 var __name16 = (target, value) => __defProp18(target, "name", { value, configurable: true });
+var Sticky = {
+  Partial: "partial",
+  Always: "always"
+};
+var UpdatePositionStrategy = {
+  Optimized: "optimized",
+  Always: "always"
+};
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
@@ -57852,9 +57926,9 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
       avoidCollisions = true,
       collisionBoundary = [],
       collisionPadding: collisionPaddingProp = 0,
-      sticky = "partial",
+      sticky = Sticky.Partial,
       hideWhenDetached = false,
-      updatePositionStrategy = "optimized",
+      updatePositionStrategy = UpdatePositionStrategy.Optimized,
       onPlaced,
       ...contentProps
     } = props;
@@ -57881,7 +57955,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
       placement: desiredPlacement,
       whileElementsMounted: /* @__PURE__ */ __name16((...args) => {
         const cleanup = autoUpdate(...args, {
-          animationFrame: updatePositionStrategy === "always"
+          animationFrame: updatePositionStrategy === UpdatePositionStrategy.Always
         });
         return cleanup;
       }, "whileElementsMounted"),
@@ -57893,7 +57967,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
         avoidCollisions && shift3({
           mainAxis: true,
           crossAxis: false,
-          limiter: sticky === "partial" ? limitShift3() : void 0,
+          limiter: sticky === Sticky.Partial ? limitShift3() : void 0,
           ...detectOverflowOptions
         }),
         avoidCollisions && flip3({ ...detectOverflowOptions }),
@@ -58041,9 +58115,6 @@ function getSideAndAlignFromPlacement(placement) {
   return [side, align];
 }
 __name16(getSideAndAlignFromPlacement, "getSideAndAlignFromPlacement");
-var Root2 = Popper;
-var Anchor = PopperAnchor;
-var Content = PopperContent;
 
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React30 from "react";
@@ -58288,6 +58359,14 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
   GROUP_NAME,
   [createCollectionScope]
 );
+var Orientation = {
+  Vertical: "vertical",
+  Horizontal: "horizontal"
+};
+var Direction2 = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
 var RovingFocusGroup = /* @__PURE__ */ React33.forwardRef(
   // blank line to reduce diff noise
@@ -58476,14 +58555,18 @@ var MAP_KEY_TO_FOCUS_INTENT = {
   End: "last"
 };
 function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
+  if (dir !== Direction2.RTL) return key;
   return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
 }
 __name20(getDirectionAwareKey, "getDirectionAwareKey");
 function getFocusIntent(event, orientation2, dir) {
   const key = getDirectionAwareKey(event.key, dir);
-  if (orientation2 === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation2 === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  if (orientation2 === Orientation.Vertical && ["ArrowLeft", "ArrowRight"].includes(key)) {
+    return void 0;
+  }
+  if (orientation2 === Orientation.Horizontal && ["ArrowUp", "ArrowDown"].includes(key)) {
+    return void 0;
+  }
   return MAP_KEY_TO_FOCUS_INTENT[key];
 }
 __name20(getFocusIntent, "getFocusIntent");
@@ -58500,8 +58583,6 @@ function wrapArray(array, startIndex) {
   return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
 __name20(wrapArray, "wrapArray");
-var Root = RovingFocusGroup;
-var Item = RovingFocusGroupItem;
 
 // node_modules/aria-hidden/dist/es2015/index.js
 var getDefaultParent = function(originalTarget) {
@@ -59348,6 +59429,10 @@ var Combination_default = ReactRemoveScroll;
 import { jsx as jsx31 } from "react/jsx-runtime";
 var __defProp23 = Object.defineProperty;
 var __name21 = (target, value) => __defProp23(target, "name", { value, configurable: true });
+var Direction3 = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -59400,7 +59485,7 @@ var Menu = /* @__PURE__ */ __name21((props) => {
     window.addEventListener("blur", handleBlur);
     return () => window.removeEventListener("blur", handleBlur);
   }, [open, handleOpenChange]);
-  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31(Popper, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -59426,7 +59511,7 @@ var MenuAnchor = /* @__PURE__ */ React41.forwardRef(
   /* @__PURE__ */ __name21(function MenuAnchor2(props, forwardedRef) {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx31(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(PopperAnchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }, "MenuAnchor")
 );
 var PORTAL_NAME = "MenuPortal";
@@ -59518,15 +59603,32 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
     const getItems = useCollection2(__scopeMenu);
     const [currentItemId, setCurrentItemId] = React41.useState(null);
     const contentRef = React41.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
+    const [branchNode, setBranchNode] = React41.useState(null);
+    useFocusScopeBranch(branchNode);
+    const { nodes: branchNodes, registry: branchRegistry } = useFocusScopeBranchRegistry();
+    const isModal = Boolean(trapFocus || disableOutsideScroll);
+    const composedRefs = useComposedRefs(
+      forwardedRef,
+      contentRef,
+      context.onContentChange,
+      setBranchNode
+    );
     const timerRef = React41.useRef(0);
     const searchRef = React41.useRef("");
     const pointerGraceTimerRef = React41.useRef(0);
     const pointerGraceIntentRef = React41.useRef(null);
     const pointerDirRef = React41.useRef("right");
     const lastPointerXRef = React41.useRef(0);
+    const shards = React41.useMemo(
+      () => disableOutsideScroll ? [contentRef, ...branchNodes.map((node) => ({ current: node }))] : [],
+      [contentRef, branchNodes, disableOutsideScroll]
+    );
     const ScrollLockWrapper = disableOutsideScroll ? Combination_default : React41.Fragment;
-    const scrollLockWrapperProps = disableOutsideScroll ? { as: Slot, allowPinchZoom: true } : void 0;
+    const scrollLockWrapperProps = disableOutsideScroll ? {
+      as: Slot,
+      allowPinchZoom: true,
+      shards
+    } : void 0;
     const handleTypeaheadSearch = /* @__PURE__ */ __name21((key) => {
       const search = searchRef.current + key;
       const items = getItems().filter((item) => !item.disabled);
@@ -59581,11 +59683,12 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
         onPointerGraceIntentChange: React41.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx31(FocusScopeBranchProvider, { registry: isModal ? branchRegistry : null, children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
           FocusScope,
           {
             asChild: true,
             trapped: trapFocus,
+            branches: branchNodes,
             onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
               event.preventDefault();
               contentRef.current?.focus({ preventScroll: true });
@@ -59602,7 +59705,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsx31(
-                  Root,
+                  RovingFocusGroup,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -59616,7 +59719,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
                     }),
                     preventScrollOnEntryFocus: true,
                     children: /* @__PURE__ */ jsx31(
-                      Content,
+                      PopperContent,
                       {
                         role: "menu",
                         "aria-orientation": "vertical",
@@ -59670,7 +59773,7 @@ var MenuContentImpl = /* @__PURE__ */ React41.forwardRef(
               }
             )
           }
-        ) })
+        ) }) })
       }
     );
   }, "MenuContentImpl")
@@ -59751,7 +59854,7 @@ var MenuItemImpl = /* @__PURE__ */ React41.forwardRef(
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx31(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
+        children: /* @__PURE__ */ jsx31(RovingFocusGroupItem, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
           Primitive.div,
           {
             role: "menuitem",
@@ -59845,7 +59948,7 @@ var MenuSub = /* @__PURE__ */ __name21((props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31(Popper, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -59991,7 +60094,7 @@ var MenuSubContent = /* @__PURE__ */ React41.forwardRef(
         ...subContentProps,
         ref: composedRefs,
         align,
-        side: rootContext.dir === "rtl" ? "left" : "right",
+        side: rootContext.dir === Direction3.RTL ? "left" : "right",
         disableOutsidePointerEvents: false,
         disableOutsideScroll: false,
         trapFocus: false,
@@ -60084,16 +60187,6 @@ function whenMouse(handler) {
   return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
 }
 __name21(whenMouse, "whenMouse");
-var Root3 = Menu;
-var Anchor2 = MenuAnchor;
-var Portal3 = MenuPortal;
-var Content2 = MenuContent;
-var Item2 = MenuItem;
-var CheckboxItem = MenuCheckboxItem;
-var Separator = MenuSeparator;
-var Sub = MenuSub;
-var SubTrigger = MenuSubTrigger;
-var SubContent = MenuSubContent;
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -60135,7 +60228,7 @@ var DropdownMenu = /* @__PURE__ */ __name22((props) => {
       onOpenChange: setOpen,
       onOpenToggle: React42.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx32(Root3, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx32(Menu, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 }, "DropdownMenu");
@@ -60147,7 +60240,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
     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(
+    return /* @__PURE__ */ jsx32(MenuAnchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
         type: "button",
@@ -60179,7 +60272,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React42.forwardRef(
 var DropdownMenuPortal = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx32(Portal3, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx32(MenuPortal, { ...menuScope, ...portalProps });
 }, "DropdownMenuPortal");
 var CONTENT_NAME3 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
@@ -60190,7 +60283,7 @@ var DropdownMenuContent = /* @__PURE__ */ React42.forwardRef(
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React42.useRef(false);
     return /* @__PURE__ */ jsx32(
-      Content2,
+      MenuContent,
       {
         id: context.contentId,
         "aria-labelledby": context.triggerId,
@@ -60228,18 +60321,18 @@ var DropdownMenuItem = /* @__PURE__ */ React42.forwardRef(
   /* @__PURE__ */ __name22(function DropdownMenuItem2(props, forwardedRef) {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx32(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(MenuItem, { ...menuScope, ...itemProps, ref: forwardedRef });
   }, "DropdownMenuItem")
 );
 var DropdownMenuCheckboxItem = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuCheckboxItem2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx32(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuCheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 }, "DropdownMenuCheckboxItem"));
 var DropdownMenuSeparator = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSeparator2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx32(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuSeparator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 }, "DropdownMenuSeparator"));
 var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -60250,18 +60343,18 @@ var DropdownMenuSub = /* @__PURE__ */ __name22((props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx32(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx32(MenuSub, { ...menuScope, open, onOpenChange: setOpen, children });
 }, "DropdownMenuSub");
 var DropdownMenuSubTrigger = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubTrigger2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx32(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(MenuSubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 }, "DropdownMenuSubTrigger"));
 var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */ __name22(function DropdownMenuSubContent2(props, forwardedRef) {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsx32(
-    SubContent,
+    MenuSubContent,
     {
       ...menuScope,
       ...subContentProps,
@@ -60280,16 +60373,6 @@ var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */
     }
   );
 }, "DropdownMenuSubContent"));
-var Root22 = DropdownMenu;
-var Trigger = DropdownMenuTrigger;
-var Portal22 = DropdownMenuPortal;
-var Content22 = DropdownMenuContent;
-var Item22 = DropdownMenuItem;
-var CheckboxItem2 = DropdownMenuCheckboxItem;
-var Separator2 = DropdownMenuSeparator;
-var Sub2 = DropdownMenuSub;
-var SubTrigger2 = DropdownMenuSubTrigger;
-var SubContent2 = DropdownMenuSubContent;
 
 // src/components/ViewportSubContent.tsx
 import { useLayoutEffect as useLayoutEffect5, useState as useState36 } from "react";
@@ -60325,7 +60408,7 @@ var ViewportSubContent = (props) => {
     };
   }, [content]);
   return /* @__PURE__ */ jsx33(
-    SubContent2,
+    DropdownMenuSubContent,
     {
       ...props,
       ref: setContent,
@@ -60484,10 +60567,10 @@ var AppearanceMenu = () => {
   const [appearanceSubOpen, setAppearanceSubOpen] = useState37(false);
   const [hoveredItem, setHoveredItem] = useState37(null);
   return /* @__PURE__ */ jsxs7(Fragment10, { children: [
-    /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
-    /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
+    /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
+    /* @__PURE__ */ jsxs7(DropdownMenuSub, { onOpenChange: setAppearanceSubOpen, children: [
       /* @__PURE__ */ jsxs7(
-        SubTrigger2,
+        DropdownMenuSubTrigger,
         {
           style: {
             ...itemStyles,
@@ -60514,7 +60597,7 @@ var AppearanceMenu = () => {
           ]
         }
       ),
-      /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx35(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(
         ViewportSubContent,
         {
           style: { ...contentStyles, marginLeft: -2 },
@@ -60522,7 +60605,7 @@ var AppearanceMenu = () => {
           avoidCollisions: true,
           children: [
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60543,7 +60626,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60563,9 +60646,9 @@ var AppearanceMenu = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60586,7 +60669,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60607,7 +60690,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60628,7 +60711,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60649,7 +60732,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60670,7 +60753,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60694,7 +60777,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60715,7 +60798,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60736,7 +60819,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60757,7 +60840,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60778,7 +60861,7 @@ var AppearanceMenu = () => {
               }
             ),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60801,9 +60884,9 @@ var AppearanceMenu = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsx35(DropdownMenuSeparator, { style: separatorStyles }),
             /* @__PURE__ */ jsxs7(
-              Item22,
+              DropdownMenuItem,
               {
                 style: {
                   ...itemStyles,
@@ -60945,10 +61028,10 @@ var ContextMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs8(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx36(Trigger, { asChild: true, children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsxs8(
-          Content22,
+      children: /* @__PURE__ */ jsxs8(DropdownMenu, { open: true, modal: false, children: [
+        /* @__PURE__ */ jsx36(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs8(
+          DropdownMenuContent,
           {
             style: contentStyles2,
             collisionPadding: 10,
@@ -60956,36 +61039,36 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              onViewSchematicComponent && /* @__PURE__ */ jsx36(Fragment11, { children: /* @__PURE__ */ jsx36(
-                Item22,
+              onHideComponent && /* @__PURE__ */ jsx36(
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
                     ...itemPaddingStyles2,
-                    backgroundColor: hoveredItem === "schematic" ? "#404040" : "transparent"
+                    backgroundColor: hoveredItem === "hide" ? "#404040" : "transparent"
                   },
-                  onSelect: onViewSchematicComponent,
-                  onMouseEnter: () => setHoveredItem("schematic"),
+                  onSelect: onHideComponent,
+                  onMouseEnter: () => setHoveredItem("hide"),
                   onMouseLeave: () => setHoveredItem(null),
-                  children: "Show on schematic"
+                  children: `Hide "${componentName}"`
                 }
-              ) }),
-              onHideComponent && /* @__PURE__ */ jsx36(
-                Item22,
+              ),
+              onViewSchematicComponent && /* @__PURE__ */ jsx36(Fragment11, { children: /* @__PURE__ */ jsx36(
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
                     ...itemPaddingStyles2,
-                    backgroundColor: hoveredItem === "hide" ? "#404040" : "transparent"
+                    backgroundColor: hoveredItem === "schematic" ? "#404040" : "transparent"
                   },
-                  onSelect: onHideComponent,
-                  onMouseEnter: () => setHoveredItem("hide"),
+                  onSelect: onViewSchematicComponent,
+                  onMouseEnter: () => setHoveredItem("schematic"),
                   onMouseLeave: () => setHoveredItem(null),
-                  children: `Hide "${componentName}"`
+                  children: "Show on schematic"
                 }
-              ),
+              ) }),
               onUnhideAllComponents && /* @__PURE__ */ jsx36(
-                Item22,
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
@@ -60998,10 +61081,10 @@ var ContextMenu = ({
                   children: "Unhide All Components"
                 }
               ),
-              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
+              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs8(DropdownMenuSub, { onOpenChange: setCameraSubOpen, children: [
                 /* @__PURE__ */ jsxs8(
-                  SubTrigger2,
+                  DropdownMenuSubTrigger,
                   {
                     style: {
                       ...itemStyles2,
@@ -61037,7 +61120,7 @@ var ContextMenu = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs8(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -61045,7 +61128,7 @@ var ContextMenu = ({
                     avoidCollisions: true,
                     children: [
                       cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
-                        Item22,
+                        DropdownMenuItem,
                         {
                           style: {
                             ...itemStyles2,
@@ -61062,9 +61145,9 @@ var ContextMenu = ({
                         },
                         option
                       )),
-                      /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+                      /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
                       /* @__PURE__ */ jsxs8(
-                        Item22,
+                        DropdownMenuItem,
                         {
                           style: {
                             ...itemStyles2,
@@ -61081,7 +61164,7 @@ var ContextMenu = ({
                         }
                       ),
                       /* @__PURE__ */ jsxs8(
-                        Item22,
+                        DropdownMenuItem,
                         {
                           style: {
                             ...itemStyles2,
@@ -61106,9 +61189,9 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setReferenceObjectSubOpen, children: [
+              /* @__PURE__ */ jsxs8(DropdownMenuSub, { onOpenChange: setReferenceObjectSubOpen, children: [
                 /* @__PURE__ */ jsxs8(
-                  SubTrigger2,
+                  DropdownMenuSubTrigger,
                   {
                     style: {
                       ...itemStyles2,
@@ -61141,7 +61224,7 @@ var ContextMenu = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx36(DropdownMenuPortal, { children: /* @__PURE__ */ jsx36(
                   ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
@@ -61150,7 +61233,7 @@ var ContextMenu = ({
                     children: REFERENCE_OBJECT_MENU_OPTIONS.map((option) => {
                       const optionKey = option.type ?? "none";
                       return /* @__PURE__ */ jsxs8(
-                        Item22,
+                        DropdownMenuItem,
                         {
                           style: {
                             ...itemStyles2,
@@ -61176,7 +61259,7 @@ var ContextMenu = ({
                 ) })
               ] }),
               onFoldPcbsToggle && /* @__PURE__ */ jsxs8(
-                CheckboxItem2,
+                DropdownMenuCheckboxItem,
                 {
                   checked: foldPcbs,
                   onCheckedChange: onFoldPcbsToggle,
@@ -61193,7 +61276,7 @@ var ContextMenu = ({
                 }
               ),
               /* @__PURE__ */ jsxs8(
-                Item22,
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
@@ -61214,9 +61297,9 @@ var ContextMenu = ({
                 }
               ),
               /* @__PURE__ */ jsx36(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
               /* @__PURE__ */ jsx36(
-                Item22,
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
@@ -61230,9 +61313,9 @@ var ContextMenu = ({
                   children: /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
               !flexScene && /* @__PURE__ */ jsxs8(
-                Item22,
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
@@ -61273,9 +61356,9 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs8(
-                Item22,
+                DropdownMenuItem,
                 {
                   style: {
                     ...itemStyles2,
@@ -61302,7 +61385,7 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(DropdownMenuSeparator, { style: separatorStyles2 }),
               /* @__PURE__ */ jsx36(
                 "div",
                 {
@@ -61341,10 +61424,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState40 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo35, useRef as useRef27, useState as useState40 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState39 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo34, useRef as useRef26, useState as useState39 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -61468,7 +61551,7 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef26(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo32(
+  const normalizedMetadata = useMemo34(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
@@ -61526,7 +61609,7 @@ var KeyboardShortcutsDialog = ({
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo33(() => {
+  const filteredHotkeys = useMemo35(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -61977,7 +62060,7 @@ var CadViewerInner = (props) => {
   const { showToast } = useToast();
   const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
-  const sceneRef = useContext10(SchematicNavigationContext);
+  const sceneRef = useContext11(SchematicNavigationContext);
   const [selectedComponent, setSelectedComponent] = useState42();
   const [selectedCadComponent, setSelectedCadComponent] = useState42();
   const handleMenuOpen = useCallback24(
@@ -62541,10 +62624,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect51, useState as useState43, useMemo as useMemo34, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect51, useState as useState43, useMemo as useMemo36, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo34(() => document.createElement("a"), []);
+  const link = useMemo36(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -62579,7 +62662,7 @@ function useExportGltfUrl(options = {}) {
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo34(() => new GLTFExporter3(), []);
+  const exporter = useMemo36(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve: resolve2, reject } = Promise.withResolvers();
     exporter.parse(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.615",
+  "version": "0.0.616",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"