@tscircuit/3d-viewer 0.0.439 → 0.0.440

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
@@ -28288,7 +28288,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.438",
+  version: "0.0.439",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -34503,8 +34503,110 @@ 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 matchesKey = (eventKey, targetKey) => {
+  if (!eventKey || !targetKey) return false;
+  return eventKey.toLowerCase() === targetKey.toLowerCase();
+};
+var matchesModifiers = (event, modifiers) => {
+  if (!modifiers || modifiers.length === 0) {
+    return !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
+  }
+  const hasCtrl = modifiers.includes("Ctrl");
+  const hasCmd = modifiers.includes("Cmd");
+  const hasShift = modifiers.includes("Shift");
+  const hasAlt = modifiers.includes("Alt");
+  if (hasCtrl && !event.ctrlKey) return false;
+  if (hasCmd && !event.metaKey) return false;
+  if (hasShift && !event.shiftKey) return false;
+  if (hasAlt && !event.altKey) return false;
+  return true;
+};
+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 (matchesKey(event.key, entry.key) && matchesModifiers(event, entry.modifiers)) {
+      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(
+    () => ({
+      key: metadata.key,
+      description: metadata.description,
+      modifiers: metadata.modifiers
+    }),
+    [metadata.key, metadata.description, metadata.modifiers]
+  );
+  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 +38234,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 +39960,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";
@@ -39964,8 +40066,8 @@ var iconContainerStyles = {
 };
 var AppearanceMenu = () => {
   const { visibility, toggleLayer } = useLayerVisibility();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState32(false);
-  const [hoveredItem, setHoveredItem] = useState32(null);
+  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: [
@@ -40216,11 +40318,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 +40516,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 +40582,216 @@ var ContextMenu = ({
   );
 };
 
+// src/components/KeyboardShortcutsDialog.tsx
+import { useEffect as useEffect41, useMemo as useMemo27, useRef as useRef25, useState as useState35 } from "react";
+import { Fragment as Fragment10, 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.key} ${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"
+                            },
+                            children: hotkey.modifiers?.length ? /* @__PURE__ */ jsxs9(Fragment10, { children: [
+                              hotkey.modifiers.map((mod) => `${mod}+`).join(""),
+                              hotkey.key.toUpperCase()
+                            ] }) : hotkey.key.toUpperCase()
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                      ]
+                    },
+                    hotkey.id
+                  )) })
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
 // src/CadViewer.tsx
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+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 cameraControllerRef = useRef26(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -40475,10 +40800,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 +40843,46 @@ var CadViewerInner = (props) => {
     isAnimatingRef,
     lastPresetSelectTime
   });
-  useEffect40(() => {
+  useRegisteredHotkey(
+    "open_keyboard_shortcuts_dialog",
+    () => {
+      setIsKeyboardShortcutsDialogOpen(true);
+    },
+    {
+      key: "?",
+      description: "Open keyboard shortcuts",
+      modifiers: ["Shift"]
+    }
+  );
+  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 +40898,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx35(
+        engine === "jscad" ? /* @__PURE__ */ jsx36(
           CadViewerJscad,
           {
             ...props,
@@ -40571,7 +40907,7 @@ var CadViewerInner = (props) => {
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx35(
+        ) : /* @__PURE__ */ jsx36(
           CadViewerManifold_default,
           {
             ...props,
@@ -40581,7 +40917,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -40598,11 +40934,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 +40958,19 @@ var CadViewerInner = (props) => {
             onDownloadGltf: () => {
               downloadGltf();
               closeMenu();
+            },
+            onOpenKeyboardShortcuts: () => {
+              setIsKeyboardShortcutsDialogOpen(true);
+              closeMenu();
             }
           }
+        ),
+        /* @__PURE__ */ jsx36(
+          KeyboardShortcutsDialog,
+          {
+            open: isKeyboardShortcutsDialogOpen,
+            onClose: () => setIsKeyboardShortcutsDialogOpen(false)
+          }
         )
       ]
     },
@@ -40631,17 +40978,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 +41272,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 +41285,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect41(
+  useEffect43(
     () => () => {
       link.remove();
       instance = null;
@@ -40953,17 +41300,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.440",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",