@tscircuit/3d-viewer 0.0.608 → 0.0.609

package/dist/index.js

@@ -14548,7 +14548,7 @@ function resolveFoldPcbs(circuitJson, foldPcbs) {
 }
 
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState39 } from "react";
+import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState40 } from "react";
 import * as THREE54 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
@@ -14687,8 +14687,8 @@ var zIndexMap = {
   clickToInteractOverlay: 100,
   htmlElements: 95,
   orientationCube: 95,
-  contextMenu: 90,
-  appearanceMenu: 91
+  contextMenu: 110,
+  appearanceMenu: 111
 };
 
 // src/react-three/Html.tsx
@@ -39315,7 +39315,7 @@ import * as THREE25 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.607",
+  version: "0.0.608",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -54582,15 +54582,74 @@ var Sub2 = DropdownMenuSub;
 var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
+// src/components/ViewportSubContent.tsx
+import { useLayoutEffect as useLayoutEffect5, useState as useState34 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var ViewportSubContent = (props) => {
+  const [content, setContent] = useState34(null);
+  const [overlapWidth, setOverlapWidth] = useState34();
+  useLayoutEffect5(() => {
+    if (!content) return;
+    const trigger = document.getElementById(
+      content.getAttribute("aria-labelledby") ?? ""
+    );
+    if (!trigger) return;
+    let naturalWidth = 0;
+    const update = () => {
+      naturalWidth = Math.max(naturalWidth, content.offsetWidth);
+      if (!naturalWidth) return;
+      const bounds = trigger.getBoundingClientRect();
+      const availableWidth = Math.max(
+        bounds.left - 10,
+        document.documentElement.clientWidth - bounds.right - 10
+      );
+      setOverlapWidth(availableWidth < naturalWidth ? bounds.width : void 0);
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(content);
+    observer.observe(trigger);
+    update();
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [content]);
+  return /* @__PURE__ */ jsx33(
+    SubContent2,
+    {
+      ...props,
+      ref: setContent,
+      sideOffset: overlapWidth === void 0 ? props.sideOffset : -overlapWidth,
+      style: {
+        ...props.style,
+        ...overlapWidth === void 0 ? {} : { minWidth: Math.min(160, overlapWidth), maxWidth: overlapWidth }
+      }
+    }
+  );
+};
+
+// src/components/menu-viewport-styles.ts
+var menuViewportStyles = {
+  boxSizing: "border-box",
+  minWidth: "min(160px, calc(100vw - 20px))",
+  maxWidth: "calc(100vw - 20px)",
+  maxHeight: "var(--radix-dropdown-menu-content-available-height, calc(100dvh - 20px))",
+  overflowY: "auto",
+  overflowX: "hidden",
+  overscrollBehavior: "contain",
+  overflowWrap: "anywhere"
+};
+
 // src/components/ContextMenu.tsx
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx33(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -54602,10 +54661,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx33(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx33("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx34("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -54622,10 +54681,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx34("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var CheckMinusIcon = () => /* @__PURE__ */ jsx33(
+var CheckMinusIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -54637,10 +54696,10 @@ var CheckMinusIcon = () => /* @__PURE__ */ jsx33(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx33("path", { d: "M5 12h14" })
+    children: /* @__PURE__ */ jsx34("path", { d: "M5 12h14" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx33(
+var DotIcon = () => /* @__PURE__ */ jsx34(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -54653,12 +54712,12 @@ var DotIcon = () => /* @__PURE__ */ jsx33(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx33("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx34("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs7 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -54686,13 +54745,13 @@ var separatorStyles = {
   margin: "4px 0"
 };
 var contentStyles = {
+  ...menuViewportStyles,
   backgroundColor: "#262626",
   color: "#fafafa",
   borderRadius: 8,
   boxShadow: "0px 12px 48px -12px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.3)",
   border: "1px solid #333333",
   padding: "4px",
-  minWidth: 160,
   zIndex: zIndexMap.appearanceMenu,
   fontSize: 14,
   fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
@@ -54713,10 +54772,10 @@ var AppearanceMenu = () => {
     lightingEnabled,
     setLightingEnabled
   } = useAppearance();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState34(false);
-  const [hoveredItem, setHoveredItem] = useState34(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState35(false);
+  const [hoveredItem, setHoveredItem] = useState35(null);
   return /* @__PURE__ */ jsxs7(Fragment10, { children: [
-    /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
+    /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
       /* @__PURE__ */ jsxs7(
         SubTrigger2,
@@ -54730,8 +54789,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx35(
               "div",
               {
                 style: {
@@ -54740,14 +54799,14 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs7(
-        SubContent2,
+      /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs7(
+        ViewportSubContent,
         {
           style: { ...contentStyles, marginLeft: -2 },
           collisionPadding: 10,
@@ -54769,8 +54828,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("darkBackground"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: darkBackgroundEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Dark Background" })
                 ]
               }
             ),
@@ -54790,12 +54849,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("lighting"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: lightingEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Lighting" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
             /* @__PURE__ */ jsxs7(
               Item22,
               {
@@ -54812,8 +54871,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                 ]
               }
             ),
@@ -54833,8 +54892,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                 ]
               }
             ),
@@ -54854,8 +54913,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                 ]
               }
             ),
@@ -54875,8 +54934,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("keepout"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.keepout && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Keepout" })
                 ]
               }
             ),
@@ -54896,8 +54955,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                 ]
               }
             ),
@@ -54920,8 +54979,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                 ]
               }
             ),
@@ -54941,8 +55000,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topMask"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.topMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Top Soldermask" })
                 ]
               }
             ),
@@ -54962,8 +55021,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomMask"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.bottomMask && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Soldermask" })
                 ]
               }
             ),
@@ -54983,8 +55042,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("pcbNotes"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.pcbNotes && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "PCB Notes" })
                 ]
               }
             ),
@@ -55004,8 +55063,8 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
                 ]
               }
             ),
@@ -55028,12 +55087,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("throughHoleModels"),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
+                  /* @__PURE__ */ jsx35("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
             /* @__PURE__ */ jsxs7(
               Item22,
               {
@@ -55055,10 +55114,10 @@ var AppearanceMenu = () => {
                 title: `Enclosure: ${visibility.enclosure}`,
                 children: [
                   /* @__PURE__ */ jsxs7("span", { style: iconContainerStyles, children: [
-                    visibility.enclosure === "opaque" && /* @__PURE__ */ jsx34(CheckIcon, {}),
-                    visibility.enclosure === "translucent" && /* @__PURE__ */ jsx34(CheckMinusIcon, {})
+                    visibility.enclosure === "opaque" && /* @__PURE__ */ jsx35(CheckIcon, {}),
+                    visibility.enclosure === "translucent" && /* @__PURE__ */ jsx35(CheckMinusIcon, {})
                   ] }),
-                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
+                  /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
                 ]
               }
             )
@@ -55070,7 +55129,7 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs8 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -55082,13 +55141,13 @@ var cameraOptions = [
   "Front"
 ];
 var contentStyles2 = {
+  ...menuViewportStyles,
   backgroundColor: "#262626",
   color: "#fafafa",
   borderRadius: 6,
   boxShadow: "0px 12px 48px -12px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.3)",
   border: "1px solid #333333",
   padding: "4px",
-  minWidth: 160,
   zIndex: zIndexMap.contextMenu,
   fontSize: 14,
   fontWeight: 400,
@@ -55160,10 +55219,10 @@ var ContextMenu = ({
 }) => {
   const { cameraType, setCameraType } = useCameraController();
   const { gridEnabled, setGridEnabled } = useAppearance();
-  const [cameraSubOpen, setCameraSubOpen] = useState35(false);
-  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState35(false);
-  const [hoveredItem, setHoveredItem] = useState35(null);
-  return /* @__PURE__ */ jsx35(
+  const [cameraSubOpen, setCameraSubOpen] = useState36(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState36(false);
+  const [hoveredItem, setHoveredItem] = useState36(null);
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ref: menuRef,
@@ -55175,8 +55234,8 @@ var ContextMenu = ({
         height: 0
       },
       children: /* @__PURE__ */ jsxs8(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx35(Trigger, { asChild: true, children: /* @__PURE__ */ jsx35("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx36(Trigger, { asChild: true, children: /* @__PURE__ */ jsx36("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsxs8(
           Content22,
           {
             style: contentStyles2,
@@ -55186,7 +55245,7 @@ var ContextMenu = ({
             align: "start",
             children: [
               onViewSchematicComponent && /* @__PURE__ */ jsxs8(Fragment11, { children: [
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(
                   Item22,
                   {
                     style: {
@@ -55200,7 +55259,7 @@ var ContextMenu = ({
                     children: "Show on schematic"
                   }
                 ),
-                /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 })
+                /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 })
               ] }),
               /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
                 /* @__PURE__ */ jsxs8(
@@ -55215,11 +55274,11 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
-                          children: "Camera Position"
+                          children: "Camera"
                         }
                       ),
                       /* @__PURE__ */ jsxs8(
@@ -55232,89 +55291,83 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx36("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx36(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsx35(
-                  SubContent2,
+                /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsxs8(
+                  ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
                     avoidCollisions: true,
-                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
-                      Item22,
-                      {
-                        style: {
-                          ...itemStyles2,
-                          backgroundColor: hoveredItem === option ? "#404040" : "transparent"
-                        },
-                        onSelect: (e) => e.preventDefault(),
-                        onPointerDown: (e) => {
-                          e.preventDefault();
-                          onCameraPresetSelect(option);
+                    children: [
+                      cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
+                        Item22,
+                        {
+                          style: {
+                            ...itemStyles2,
+                            backgroundColor: hoveredItem === option ? "#404040" : "transparent"
+                          },
+                          onSelect: () => onCameraPresetSelect(option),
+                          onMouseEnter: () => setHoveredItem(option),
+                          onMouseLeave: () => setHoveredItem(null),
+                          onTouchStart: () => setHoveredItem(option),
+                          children: [
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx36(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                          ]
                         },
-                        onMouseEnter: () => setHoveredItem(option),
-                        onMouseLeave: () => setHoveredItem(null),
-                        onTouchStart: () => setHoveredItem(option),
-                        children: [
-                          /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx35(DotIcon, {}) }),
-                          /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option })
-                        ]
-                      },
-                      option
-                    ))
+                        option
+                      )),
+                      /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+                      /* @__PURE__ */ jsxs8(
+                        Item22,
+                        {
+                          style: {
+                            ...itemStyles2,
+                            backgroundColor: hoveredItem === "autorotate" ? "#404040" : "transparent"
+                          },
+                          onSelect: onAutoRotateToggle,
+                          onMouseEnter: () => setHoveredItem("autorotate"),
+                          onMouseLeave: () => setHoveredItem(null),
+                          onTouchStart: () => setHoveredItem("autorotate"),
+                          children: [
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs8(
+                        Item22,
+                        {
+                          style: {
+                            ...itemStyles2,
+                            backgroundColor: hoveredItem === "cameratype" ? "#404040" : "transparent"
+                          },
+                          onSelect: (e) => {
+                            e.preventDefault();
+                            setCameraType(
+                              cameraType === "perspective" ? "orthographic" : "perspective"
+                            );
+                          },
+                          onMouseEnter: () => setHoveredItem("cameratype"),
+                          onMouseLeave: () => setHoveredItem(null),
+                          onTouchStart: () => setHoveredItem("cameratype"),
+                          children: [
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                          ]
+                        }
+                      )
+                    ]
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs8(
-                Item22,
-                {
-                  style: {
-                    ...itemStyles2,
-                    backgroundColor: hoveredItem === "autorotate" ? "#404040" : "transparent"
-                  },
-                  onSelect: (e) => e.preventDefault(),
-                  onPointerDown: (e) => {
-                    e.preventDefault();
-                    onAutoRotateToggle();
-                  },
-                  onMouseEnter: () => setHoveredItem("autorotate"),
-                  onMouseLeave: () => setHoveredItem(null),
-                  onTouchStart: () => setHoveredItem("autorotate"),
-                  children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs8(
-                Item22,
-                {
-                  style: {
-                    ...itemStyles2,
-                    backgroundColor: hoveredItem === "cameratype" ? "#404040" : "transparent"
-                  },
-                  onSelect: (e) => e.preventDefault(),
-                  onPointerDown: (e) => {
-                    e.preventDefault();
-                    setCameraType(
-                      cameraType === "perspective" ? "orthographic" : "perspective"
-                    );
-                  },
-                  onMouseEnter: () => setHoveredItem("cameratype"),
-                  onMouseLeave: () => setHoveredItem(null),
-                  onTouchStart: () => setHoveredItem("cameratype"),
-                  children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
-                  ]
-                }
-              ),
               /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setReferenceObjectSubOpen, children: [
                 /* @__PURE__ */ jsxs8(
                   SubTrigger2,
@@ -55328,14 +55381,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("reference-object"),
                     children: [
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Show Reference Object"
                         }
                       ),
-                      /* @__PURE__ */ jsx35(
+                      /* @__PURE__ */ jsx36(
                         "div",
                         {
                           style: {
@@ -55344,14 +55397,14 @@ var ContextMenu = ({
                             gap: 6,
                             marginLeft: "auto"
                           },
-                          children: /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
+                          children: /* @__PURE__ */ jsx36(ChevronRightIcon, { isOpen: referenceObjectSubOpen })
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsx35(
-                  SubContent2,
+                /* @__PURE__ */ jsx36(Portal22, { children: /* @__PURE__ */ jsx36(
+                  ViewportSubContent,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
@@ -55374,8 +55427,8 @@ var ContextMenu = ({
                           onMouseLeave: () => setHoveredItem(null),
                           onTouchStart: () => setHoveredItem(optionKey),
                           children: [
-                            /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx35(DotIcon, {}) }),
-                            /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
+                            /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: referenceObject === option.type && /* @__PURE__ */ jsx36(DotIcon, {}) }),
+                            /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: option.label })
                           ]
                         },
                         optionKey
@@ -55396,8 +55449,8 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("fold"),
                   onMouseLeave: () => setHoveredItem(null),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { children: "Fold PCBs" })
+                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: foldPcbs && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx36("span", { children: "Fold PCBs" })
                   ]
                 }
               ),
@@ -55417,14 +55470,14 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("grid"),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
+                    /* @__PURE__ */ jsx36("span", { style: iconContainerStyles2, children: gridEnabled && /* @__PURE__ */ jsx36(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(
                 Item22,
                 {
                   style: {
@@ -55436,10 +55489,10 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx36("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
               !flexScene && /* @__PURE__ */ jsxs8(
                 Item22,
                 {
@@ -55468,7 +55521,7 @@ var ContextMenu = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "div",
                       {
                         style: {
@@ -55482,7 +55535,7 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs8(
                 Item22,
                 {
@@ -55496,8 +55549,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx36(
                       "div",
                       {
                         style: {
@@ -55511,8 +55564,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx36(
                 "div",
                 {
                   style: {
@@ -55550,10 +55603,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState37 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState38 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState36 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState37 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -55697,7 +55750,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
   }, [id, normalizedMetadata]);
 };
 var useHotkeyRegistry = () => {
-  const [entries, setEntries] = useState36(
+  const [entries, setEntries] = useState37(
     () => Array.from(hotkeyRegistry.values())
   );
   useEffect47(() => subscribeToRegistry(setEntries), []);
@@ -55709,12 +55762,12 @@ var registerHotkeyViewer = (element) => {
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState37("");
+  const [query, setQuery] = useState38("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
   useEffect48(() => {
@@ -55748,7 +55801,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       role: "dialog",
@@ -55788,7 +55841,7 @@ var KeyboardShortcutsDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ jsxs9("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "h2",
                       {
                         style: {
@@ -55800,7 +55853,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "button",
                       {
                         type: "button",
@@ -55816,7 +55869,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37(
                     "input",
                     {
                       ref: inputRef,
@@ -55839,7 +55892,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx36("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsx37("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
               "table",
               {
                 style: {
@@ -55848,11 +55901,11 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx37("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx36("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37(
                     "td",
                     {
                       colSpan: 2,
@@ -55864,7 +55917,7 @@ var KeyboardShortcutsDialog = ({
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx37(
                           "span",
                           {
                             style: {
@@ -55882,7 +55935,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx37("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -55899,7 +55952,7 @@ var KeyboardShortcutsDialog = ({
 
 // src/contexts/ToastContext.tsx
 import { Toaster, toast as hotToast } from "react-hot-toast";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 var useToast = () => {
   return {
     showToast: (message, duration = 2e3) => {
@@ -55912,7 +55965,7 @@ var ToastProvider = ({
 }) => {
   return /* @__PURE__ */ jsxs10(Fragment12, { children: [
     children,
-    /* @__PURE__ */ jsx37(Toaster, { position: "bottom-right" })
+    /* @__PURE__ */ jsx38(Toaster, { position: "bottom-right" })
   ] });
 };
 
@@ -55957,10 +56010,10 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState38, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
+import { useState as useState39, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
-  const [menuVisible, setMenuVisible] = useState38(false);
-  const [menuPos, setMenuPos] = useState38({
+  const [menuVisible, setMenuVisible] = useState39(false);
+  const [menuPos, setMenuPos] = useState39({
     x: 0,
     y: 0
   });
@@ -56137,7 +56190,7 @@ var useGlobalDownloadGltf = () => {
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_TARGET = new THREE54.Vector3(0, 0, 0);
 var INITIAL_CAMERA_POSITION = [5, -5, 5];
 var readStoredCameraType = () => {
@@ -56152,35 +56205,35 @@ var CadViewerInner = (props) => {
   const circuitJson = props.circuitJson ?? childrenCircuitJson;
   const hasBends = circuitJson.some((element) => element.type === "pcb_bend");
   const hasFlexGeometry = hasBends || circuitJson.some((element) => element.type === "pcb_stiffener");
-  const [foldPcbsOverride, setFoldPcbs] = useState39(
+  const [foldPcbsOverride, setFoldPcbs] = useState40(
     void 0
   );
   const foldPcbs = foldPcbsOverride ?? props.foldPcbs;
   const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
   const resolvedProps = { ...props, circuitJson, children: void 0 };
-  const [engine, setEngine] = useState39(() => {
+  const [engine, setEngine] = useState40(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
   const containerRef = useRef29(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState39(false);
-  const [autoRotate, setAutoRotate] = useState39(() => {
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState40(false);
+  const [autoRotate, setAutoRotate] = useState40(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored !== "false";
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState39(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState40(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState39("Custom");
-  const [referenceObject, setReferenceObject] = useState39(null);
+  const [cameraPreset, setCameraPreset] = useState40("Custom");
+  const [referenceObject, setReferenceObject] = useState40(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
   const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext10(SchematicNavigationContext);
-  const [selectedComponent, setSelectedComponent] = useState39();
+  const [selectedComponent, setSelectedComponent] = useState40();
   const handleMenuOpen = useCallback24(
     (position) => {
       setSelectedComponent(
@@ -56331,7 +56384,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        hasFlexGeometry ? /* @__PURE__ */ jsx38(
+        hasFlexGeometry ? /* @__PURE__ */ jsx39(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -56341,7 +56394,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : engine === "jscad" ? /* @__PURE__ */ jsx38(
+        ) : engine === "jscad" ? /* @__PURE__ */ jsx39(
           CadViewerJscad,
           {
             ...resolvedProps,
@@ -56351,7 +56404,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady,
             referenceObject
           }
-        ) : /* @__PURE__ */ jsx38(
+        ) : /* @__PURE__ */ jsx39(
           CadViewerManifold_default,
           {
             ...resolvedProps,
@@ -56362,7 +56415,7 @@ var CadViewerInner = (props) => {
             referenceObject
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx38(
+        menuVisible && /* @__PURE__ */ jsx39(
           ContextMenu,
           {
             onViewSchematicComponent: selectedComponent && props.onViewSchematicComponent ? () => {
@@ -56413,7 +56466,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -56427,13 +56480,13 @@ var CadViewerInner = (props) => {
 };
 var CadViewer = (props) => {
   const sceneRef = useRef29(null);
-  return /* @__PURE__ */ jsx38(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(SchematicNavigationContext.Provider, { value: sceneRef, children: /* @__PURE__ */ jsx39(
     CameraControllerProvider,
     {
       defaultTarget: DEFAULT_TARGET,
       initialCameraPosition: INITIAL_CAMERA_POSITION,
       initialCameraType: readStoredCameraType(),
-      children: /* @__PURE__ */ jsx38(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx38(AppearanceProvider, { children: /* @__PURE__ */ jsx38(ToastProvider, { children: /* @__PURE__ */ jsx38(CadViewerInner, { ...props }) }) }) })
+      children: /* @__PURE__ */ jsx39(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx39(AppearanceProvider, { children: /* @__PURE__ */ jsx39(ToastProvider, { children: /* @__PURE__ */ jsx39(CadViewerInner, { ...props }) }) }) })
     }
   ) });
 };
@@ -56730,7 +56783,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect51, useState as useState40, useMemo as useMemo34, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect51, useState as useState41, useMemo as useMemo34, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo34(() => document.createElement("a"), []);
@@ -56758,8 +56811,8 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState40();
-  const [error, setError] = useState40();
+  const [url, setUrl] = useState41();
+  const [error, setError] = useState41();
   const ref = useCallback25(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []

package/package.json

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