@tscircuit/3d-viewer 0.0.439 → 0.0.441

package/dist/index.js

@@ -14228,7 +14228,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState34, useCallback as useCallback22, useRef as useRef24, useEffect as useEffect40, useMemo as useMemo26 } from "react";
+import { useState as useState36, useCallback as useCallback22, useRef as useRef26, useEffect as useEffect42, useMemo as useMemo28 } from "react";
 import * as THREE29 from "three";
 
 // src/CadViewerJscad.tsx
@@ -28113,12 +28113,6 @@ var defaultVisibility = {
 var LayerVisibilityContext = createContext3(void 0);
 var LayerVisibilityProvider = ({ children }) => {
   const [visibility, setVisibility] = useState5(defaultVisibility);
-  const toggleLayer = useCallback2((layer) => {
-    setVisibility((prev) => ({
-      ...prev,
-      [layer]: !prev[layer]
-    }));
-  }, []);
   const setLayerVisibility = useCallback2(
     (layer, visible) => {
       setVisibility((prev) => ({
@@ -28134,11 +28128,10 @@ var LayerVisibilityProvider = ({ children }) => {
   const value = useMemo6(
     () => ({
       visibility,
-      toggleLayer,
       setLayerVisibility,
       resetToDefaults
     }),
-    [visibility, toggleLayer, setLayerVisibility, resetToDefaults]
+    [visibility, setLayerVisibility, resetToDefaults]
   );
   return /* @__PURE__ */ jsx8(LayerVisibilityContext.Provider, { value, children });
 };
@@ -28288,7 +28281,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.438",
+  version: "0.0.440",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -34503,8 +34496,112 @@ var useGlobalDownloadGltf = () => {
   }, []);
 };
 
+// src/hooks/useRegisteredHotkey.ts
+import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef11, useState as useState18 } from "react";
+var hotkeyRegistry = /* @__PURE__ */ new Map();
+var subscribers = /* @__PURE__ */ new Set();
+var isListenerAttached = false;
+var parseShortcut = (shortcut) => {
+  const parts = shortcut.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  const modifierParts = parts.slice(0, -1);
+  return {
+    key,
+    ctrl: modifierParts.includes("ctrl"),
+    cmd: modifierParts.includes("cmd"),
+    shift: modifierParts.includes("shift"),
+    alt: modifierParts.includes("alt")
+  };
+};
+var matchesShortcut = (event, shortcut) => {
+  const parsed = parseShortcut(shortcut);
+  const keyMatches = event.key.toLowerCase() === parsed.key;
+  const ctrlMatches = parsed.ctrl === event.ctrlKey;
+  const cmdMatches = parsed.cmd === event.metaKey;
+  const shiftMatches = parsed.shift === event.shiftKey;
+  const altMatches = parsed.alt === event.altKey;
+  return keyMatches && ctrlMatches && cmdMatches && shiftMatches && altMatches;
+};
+var isEditableTarget = (target) => {
+  if (!target || typeof target !== "object") return false;
+  const element = target;
+  const tagName = element.tagName;
+  const editableTags = ["INPUT", "TEXTAREA", "SELECT"];
+  if (editableTags.includes(tagName)) {
+    return true;
+  }
+  return Boolean(element.getAttribute?.("contenteditable"));
+};
+var handleKeydown = (event) => {
+  if (isEditableTarget(event.target)) {
+    return;
+  }
+  hotkeyRegistry.forEach((entry) => {
+    if (matchesShortcut(event, entry.shortcut)) {
+      event.preventDefault();
+      entry.invoke();
+    }
+  });
+};
+var notifySubscribers = () => {
+  const entries = Array.from(hotkeyRegistry.values());
+  subscribers.forEach((subscriber) => subscriber(entries));
+};
+var ensureListener = () => {
+  if (isListenerAttached) return;
+  if (typeof window === "undefined") return;
+  window.addEventListener("keydown", handleKeydown);
+  isListenerAttached = true;
+};
+var registerHotkey = (registration) => {
+  hotkeyRegistry.set(registration.id, registration);
+  notifySubscribers();
+  ensureListener();
+};
+var unregisterHotkey = (id) => {
+  if (hotkeyRegistry.delete(id)) {
+    notifySubscribers();
+  }
+};
+var subscribeToRegistry = (subscriber) => {
+  subscribers.add(subscriber);
+  subscriber(Array.from(hotkeyRegistry.values()));
+  return () => {
+    subscribers.delete(subscriber);
+  };
+};
+var useRegisteredHotkey = (id, handler, metadata) => {
+  const handlerRef = useRef11(handler);
+  handlerRef.current = handler;
+  const normalizedMetadata = useMemo21(
+    () => ({
+      shortcut: metadata.shortcut,
+      description: metadata.description
+    }),
+    [metadata.shortcut, metadata.description]
+  );
+  useEffect25(() => {
+    const registration = {
+      id,
+      ...normalizedMetadata,
+      invoke: () => handlerRef.current()
+    };
+    registerHotkey(registration);
+    return () => {
+      unregisterHotkey(id);
+    };
+  }, [id, normalizedMetadata]);
+};
+var useHotkeyRegistry = () => {
+  const [entries, setEntries] = useState18(
+    () => Array.from(hotkeyRegistry.values())
+  );
+  useEffect25(() => subscribeToRegistry(setEntries), []);
+  return entries;
+};
+
 // src/components/ContextMenu.tsx
-import { useState as useState33 } from "react";
+import { useState as useState34 } from "react";
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
 import * as React43 from "react";
@@ -38132,9 +38229,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState28 } from "react";
+import { useState as useState29 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState28(function() {
+  var ref = useState29(function() {
     return {
       // value
       value: initialValue,
@@ -39858,7 +39955,7 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState32 } from "react";
+import { useState as useState33 } from "react";
 
 // src/components/Icons.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -39963,9 +40060,9 @@ var iconContainerStyles = {
   flexShrink: 0
 };
 var AppearanceMenu = () => {
-  const { visibility, toggleLayer } = useLayerVisibility();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState32(false);
-  const [hoveredItem, setHoveredItem] = useState32(null);
+  const { visibility, setLayerVisibility } = useLayerVisibility();
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState33(false);
+  const [hoveredItem, setHoveredItem] = useState33(null);
   return /* @__PURE__ */ jsxs7(Fragment9, { children: [
     /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
@@ -40014,7 +40111,7 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("boardBody");
+                  setLayerVisibility("boardBody", !visibility.boardBody);
                 },
                 onMouseEnter: () => setHoveredItem("boardBody"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40035,7 +40132,7 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("topCopper");
+                  setLayerVisibility("topCopper", !visibility.topCopper);
                 },
                 onMouseEnter: () => setHoveredItem("topCopper"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40056,7 +40153,7 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("bottomCopper");
+                  setLayerVisibility("bottomCopper", !visibility.bottomCopper);
                 },
                 onMouseEnter: () => setHoveredItem("bottomCopper"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40077,7 +40174,7 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("topSilkscreen");
+                  setLayerVisibility("topSilkscreen", !visibility.topSilkscreen);
                 },
                 onMouseEnter: () => setHoveredItem("topSilkscreen"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40098,7 +40195,10 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("bottomSilkscreen");
+                  setLayerVisibility(
+                    "bottomSilkscreen",
+                    !visibility.bottomSilkscreen
+                  );
                 },
                 onMouseEnter: () => setHoveredItem("bottomSilkscreen"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40119,7 +40219,7 @@ var AppearanceMenu = () => {
                 onSelect: (e) => e.preventDefault(),
                 onPointerDown: (e) => {
                   e.preventDefault();
-                  toggleLayer("smtModels");
+                  setLayerVisibility("smtModels", !visibility.smtModels);
                 },
                 onMouseEnter: () => setHoveredItem("smtModels"),
                 onMouseLeave: () => setHoveredItem(null),
@@ -40216,11 +40316,12 @@ var ContextMenu = ({
   onEngineSwitch,
   onCameraPresetSelect,
   onAutoRotateToggle,
-  onDownloadGltf
+  onDownloadGltf,
+  onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
-  const [cameraSubOpen, setCameraSubOpen] = useState33(false);
-  const [hoveredItem, setHoveredItem] = useState33(null);
+  const [cameraSubOpen, setCameraSubOpen] = useState34(false);
+  const [hoveredItem, setHoveredItem] = useState34(null);
   return /* @__PURE__ */ jsx34(
     "div",
     {
@@ -40413,6 +40514,35 @@ var ContextMenu = ({
                 }
               ),
               /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs8(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "shortcuts" ? "#404040" : "transparent"
+                  },
+                  onSelect: onOpenKeyboardShortcuts,
+                  onMouseEnter: () => setHoveredItem("shortcuts"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("shortcuts"),
+                  children: [
+                    /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx34(
+                      "div",
+                      {
+                        style: {
+                          ...badgeStyles,
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: "Shift+?"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsx34(
                 "div",
                 {
@@ -40450,23 +40580,214 @@ var ContextMenu = ({
   );
 };
 
-// src/CadViewer.tsx
+// src/components/KeyboardShortcutsDialog.tsx
+import { useEffect as useEffect41, useMemo as useMemo27, useRef as useRef25, useState as useState35 } from "react";
 import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+var KeyboardShortcutsDialog = ({
+  open,
+  onClose
+}) => {
+  const [query, setQuery] = useState35("");
+  const inputRef = useRef25(null);
+  const hotkeys = useHotkeyRegistry();
+  useEffect41(() => {
+    if (!open) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  useEffect41(() => {
+    if (open) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    }
+  }, [open]);
+  const filteredHotkeys = useMemo27(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+      return hotkeys;
+    }
+    return hotkeys.filter((hotkey) => {
+      const haystack = `${hotkey.shortcut} ${hotkey.description}`;
+      return haystack.toLowerCase().includes(normalizedQuery);
+    });
+  }, [hotkeys, query]);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx35(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          style: {
+            backgroundColor: "#1f1f23",
+            color: "#f8f8ff",
+            borderRadius: 12,
+            width: "min(640px, 90vw)",
+            maxHeight: "80vh",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35)",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs9(
+              "header",
+              {
+                style: {
+                  padding: "20px 24px 12px",
+                  borderBottom: "1px solid rgba(255, 255, 255, 0.08)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx35(
+                      "h2",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: "1.1rem",
+                          fontWeight: 600,
+                          letterSpacing: "0.02em"
+                        },
+                        children: "Keyboard Shortcuts"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx35(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onClose,
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: "rgba(255, 255, 255, 0.8)",
+                          fontSize: "1rem",
+                          cursor: "pointer"
+                        },
+                        children: "\u2715"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx35(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      placeholder: "Search shortcuts...",
+                      value: query,
+                      onChange: (event) => setQuery(event.target.value),
+                      style: {
+                        marginTop: 12,
+                        width: "calc(100% - 24px)",
+                        padding: "10px 12px",
+                        borderRadius: 8,
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        backgroundColor: "rgba(255, 255, 255, 0.05)",
+                        color: "white",
+                        fontSize: "0.95rem"
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx35("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
+              "table",
+              {
+                style: {
+                  width: "100%",
+                  borderCollapse: "collapse",
+                  fontSize: "0.95rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx35("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35(
+                    "td",
+                    {
+                      colSpan: 2,
+                      style: { padding: "24px", textAlign: "center" },
+                      children: "No shortcuts found"
+                    }
+                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs9(
+                    "tr",
+                    {
+                      style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
+                      children: [
+                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx35(
+                          "span",
+                          {
+                            style: {
+                              display: "inline-flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              border: "1px solid rgba(255, 255, 255, 0.3)",
+                              borderRadius: 6,
+                              minWidth: 36,
+                              padding: "4px 8px",
+                              fontFamily: "monospace",
+                              fontSize: "0.95rem",
+                              textTransform: "capitalize"
+                            },
+                            children: hotkey.shortcut
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                      ]
+                    },
+                    hotkey.id
+                  )) })
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/CadViewer.tsx
+import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
-  const [engine, setEngine] = useState34("manifold");
-  const containerRef = useRef24(null);
-  const [autoRotate, setAutoRotate] = useState34(() => {
+  const [engine, setEngine] = useState36("manifold");
+  const containerRef = useRef26(null);
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState36(false);
+  const [autoRotate, setAutoRotate] = useState36(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored === "false" ? false : true;
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState34(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState36(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState34("Custom");
+  const [cameraPreset, setCameraPreset] = useState36("Custom");
   const { cameraType, setCameraType } = useCameraController();
-  const { visibility, toggleLayer } = useLayerVisibility();
-  const cameraControllerRef = useRef24(null);
+  const { visibility, setLayerVisibility } = useLayerVisibility();
+  const cameraControllerRef = useRef26(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -40475,10 +40796,10 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef24(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef26(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef24(false);
-  const lastPresetSelectTime = useRef24(0);
+  const isAnimatingRef = useRef26(false);
+  const lastPresetSelectTime = useRef26(0);
   const PRESET_COOLDOWN = 1e3;
   const handleUserInteraction = useCallback22(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {
@@ -40518,35 +40839,45 @@ var CadViewerInner = (props) => {
     isAnimatingRef,
     lastPresetSelectTime
   });
-  useEffect40(() => {
+  useRegisteredHotkey(
+    "open_keyboard_shortcuts_dialog",
+    () => {
+      setIsKeyboardShortcutsDialogOpen(true);
+    },
+    {
+      shortcut: "shift+?",
+      description: "Open keyboard shortcuts"
+    }
+  );
+  useEffect42(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect40(() => {
+  useEffect42(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
-  useEffect40(() => {
+  useEffect42(() => {
     window.localStorage.setItem("cadViewerAutoRotate", String(autoRotate));
   }, [autoRotate]);
-  useEffect40(() => {
+  useEffect42(() => {
     window.localStorage.setItem(
       "cadViewerAutoRotateUserToggled",
       String(autoRotateUserToggled)
     );
   }, [autoRotateUserToggled]);
-  useEffect40(() => {
+  useEffect42(() => {
     const stored = window.localStorage.getItem("cadViewerCameraType");
     if (stored === "orthographic" || stored === "perspective") {
       setCameraType(stored);
     }
   }, [setCameraType]);
-  useEffect40(() => {
+  useEffect42(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: containerRef,
@@ -40562,7 +40893,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx35(
+        engine === "jscad" ? /* @__PURE__ */ jsx36(
           CadViewerJscad,
           {
             ...props,
@@ -40571,7 +40902,7 @@ var CadViewerInner = (props) => {
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx35(
+        ) : /* @__PURE__ */ jsx36(
           CadViewerManifold_default,
           {
             ...props,
@@ -40581,7 +40912,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -40598,11 +40929,11 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx35("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx36("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx35(
+        menuVisible && /* @__PURE__ */ jsx36(
           ContextMenu,
           {
             menuRef,
@@ -40622,8 +40953,19 @@ var CadViewerInner = (props) => {
             onDownloadGltf: () => {
               downloadGltf();
               closeMenu();
+            },
+            onOpenKeyboardShortcuts: () => {
+              setIsKeyboardShortcutsDialogOpen(true);
+              closeMenu();
             }
           }
+        ),
+        /* @__PURE__ */ jsx36(
+          KeyboardShortcutsDialog,
+          {
+            open: isKeyboardShortcutsDialogOpen,
+            onClose: () => setIsKeyboardShortcutsDialogOpen(false)
+          }
         )
       ]
     },
@@ -40631,17 +40973,17 @@ var CadViewerInner = (props) => {
   );
 };
 var CadViewer = (props) => {
-  const defaultTarget = useMemo26(() => new THREE29.Vector3(0, 0, 0), []);
-  const initialCameraPosition = useMemo26(
+  const defaultTarget = useMemo28(() => new THREE29.Vector3(0, 0, 0), []);
+  const initialCameraPosition = useMemo28(
     () => [5, -5, 5],
     []
   );
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     CameraControllerProvider,
     {
       defaultTarget,
       initialCameraPosition,
-      children: /* @__PURE__ */ jsx35(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx35(CadViewerInner, { ...props }) })
+      children: /* @__PURE__ */ jsx36(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx36(CadViewerInner, { ...props }) })
     }
   );
 };
@@ -40925,10 +41267,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
-import { useEffect as useEffect41, useState as useState35, useMemo as useMemo27, useCallback as useCallback23 } from "react";
+import { useEffect as useEffect43, useState as useState37, useMemo as useMemo29, useCallback as useCallback23 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo27(() => document.createElement("a"), []);
+  const link = useMemo29(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -40938,7 +41280,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect41(
+  useEffect43(
     () => () => {
       link.remove();
       instance = null;
@@ -40953,17 +41295,17 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState35();
-  const [error, setError] = useState35();
+  const [url, setUrl] = useState37();
+  const [error, setError] = useState37();
   const ref = useCallback23(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect41(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect43(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo27(() => new GLTFExporter2(), []);
+  const exporter = useMemo29(() => new GLTFExporter2(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(

package/package.json

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