@tanstack/react-hotkeys 0.9.1 → 0.11.0

package/README.md

@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_hotkeys.png" alt="TanStack Hotkeys" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/hotkeys.png"
+      alt="TanStack Hotkeys"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />

package/dist/index.cjs

@@ -10,12 +10,14 @@ const require_useHotkeySequences = require('./useHotkeySequences.cjs');
 const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
 const require_useHotkeyRegistrations = require('./useHotkeyRegistrations.cjs');
 const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
+const require_useHotkeyHint = require('./useHotkeyHint.cjs');
 
 exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
 exports.useDefaultHotkeysOptions = require_HotkeysProvider.useDefaultHotkeysOptions;
 exports.useHeldKeyCodes = require_useHeldKeyCodes.useHeldKeyCodes;
 exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
 exports.useHotkey = require_useHotkey.useHotkey;
+exports.useHotkeyHint = require_useHotkeyHint.useHotkeyHint;
 exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
 exports.useHotkeyRegistrations = require_useHotkeyRegistrations.useHotkeyRegistrations;
 exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;

package/dist/index.d.cts

@@ -9,5 +9,6 @@ import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequ
 import { ReactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
 import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.cjs";
 import { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
+import { useHotkeyHint } from "./useHotkeyHint.cjs";
 export * from "@tanstack/hotkeys";
-export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/index.d.ts

@@ -9,5 +9,6 @@ import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequ
 import { ReactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
 import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 import { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
+import { useHotkeyHint } from "./useHotkeyHint.js";
 export * from "@tanstack/hotkeys";
-export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/index.js

@@ -9,7 +9,8 @@ import { useHotkeySequences } from "./useHotkeySequences.js";
 import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
 import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
+import { useHotkeyHint } from "./useHotkeyHint.js";
 
 export * from "@tanstack/hotkeys"
 
-export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/useHeldKeyCodes.cjs

@@ -30,7 +30,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
 * ```
 */
 function useHeldKeyCodes() {
-	return (0, _tanstack_react_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
+	return (0, _tanstack_react_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
 }
 
 //#endregion

package/dist/useHeldKeyCodes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHeldKeyCodes.cjs","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = useHeldKeys()\n *   const heldCodes = useHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       {heldKeys.map((key) => (\n *         <kbd key={key}>\n *           {key} <small>{heldCodes[key]}</small>\n *         </kbd>\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,uFADoC,CACZ,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"useHeldKeyCodes.cjs","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = useHeldKeys()\n *   const heldCodes = useHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       {heldKeys.map((key) => (\n *         <kbd key={key}>\n *           {key} <small>{heldCodes[key]}</small>\n *         </kbd>\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,0FADoC,CACT,QAAQ,UAAU,MAAM,UAAU"}

package/dist/useHeldKeyCodes.js

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useStore } from "@tanstack/react-store";
+import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHeldKeyCodes.ts
 /**
@@ -29,7 +29,7 @@ import { useStore } from "@tanstack/react-store";
 * ```
 */
 function useHeldKeyCodes() {
-	return useStore(getKeyStateTracker().store, (state) => state.heldCodes);
+	return useSelector(getKeyStateTracker().store, (state) => state.heldCodes);
 }
 
 //#endregion

package/dist/useHeldKeyCodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeldKeyCodes.js","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = useHeldKeys()\n *   const heldCodes = useHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       {heldKeys.map((key) => (\n *         <kbd key={key}>\n *           {key} <small>{heldCodes[key]}</small>\n *         </kbd>\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,QAAO,SADS,oBAAoB,CACZ,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"useHeldKeyCodes.js","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = useHeldKeys()\n *   const heldCodes = useHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       {heldKeys.map((key) => (\n *         <kbd key={key}>\n *           {key} <small>{heldCodes[key]}</small>\n *         </kbd>\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,UAAU"}

package/dist/useHeldKeys.cjs

@@ -6,7 +6,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
 /**
 * React hook that returns an array of currently held keyboard keys.
 *
-* This hook uses `useStore` from `@tanstack/react-store` to subscribe
+* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
 * to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
@@ -26,7 +26,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
 * ```
 */
 function useHeldKeys() {
-	return (0, _tanstack_react_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, _tanstack_react_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
 }
 
 //#endregion

package/dist/useHeldKeys.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHeldKeys.cjs","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useStore` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n *   const heldKeys = useHeldKeys()\n *\n *   return (\n *     <div>\n *       Currently pressed: {heldKeys.join(' + ') || 'None'}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,uFADoC,CACZ,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"useHeldKeys.cjs","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n *   const heldKeys = useHeldKeys()\n *\n *   return (\n *     <div>\n *       Currently pressed: {heldKeys.join(' + ') || 'None'}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,0FADoC,CACT,QAAQ,UAAU,MAAM,SAAS"}

package/dist/useHeldKeys.d.cts

@@ -2,7 +2,7 @@
 /**
  * React hook that returns an array of currently held keyboard keys.
  *
- * This hook uses `useStore` from `@tanstack/react-store` to subscribe
+ * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
  * to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *

package/dist/useHeldKeys.d.ts

@@ -2,7 +2,7 @@
 /**
  * React hook that returns an array of currently held keyboard keys.
  *
- * This hook uses `useStore` from `@tanstack/react-store` to subscribe
+ * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
  * to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *

package/dist/useHeldKeys.js

@@ -1,11 +1,11 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useStore } from "@tanstack/react-store";
+import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHeldKeys.ts
 /**
 * React hook that returns an array of currently held keyboard keys.
 *
-* This hook uses `useStore` from `@tanstack/react-store` to subscribe
+* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
 * to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
@@ -25,7 +25,7 @@ import { useStore } from "@tanstack/react-store";
 * ```
 */
 function useHeldKeys() {
-	return useStore(getKeyStateTracker().store, (state) => state.heldKeys);
+	return useSelector(getKeyStateTracker().store, (state) => state.heldKeys);
 }
 
 //#endregion

package/dist/useHeldKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeldKeys.js","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useStore` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n *   const heldKeys = useHeldKeys()\n *\n *   return (\n *     <div>\n *       Currently pressed: {heldKeys.join(' + ') || 'None'}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,QAAO,SADS,oBAAoB,CACZ,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"useHeldKeys.js","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n *   const heldKeys = useHeldKeys()\n *\n *   return (\n *     <div>\n *       Currently pressed: {heldKeys.join(' + ') || 'None'}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,SAAS"}

package/dist/useHotkey.cjs

@@ -104,17 +104,21 @@ function useHotkey(hotkey, callback, options = {}) {
 		});
 		prevTargetRef.current = resolvedTarget;
 		prevHotkeyRef.current = hotkeyString;
+	});
+	(0, react.useEffect)(() => {
 		return () => {
 			if (registrationRef.current?.isActive) {
 				registrationRef.current.unregister();
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeyString]);
-	if (registrationRef.current?.isActive) {
-		registrationRef.current.callback = callback;
-		registrationRef.current.setOptions(optionsWithoutTarget);
-	}
+	}, []);
+	(0, react.useEffect)(() => {
+		if (registrationRef.current?.isActive) {
+			registrationRef.current.callback = callback;
+			registrationRef.current.setOptions(optionsWithoutTarget);
+		}
+	});
 }
 
 //#endregion

package/dist/useHotkey.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkey.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  detectPlatform,\n  getHotkeyManager,\n  normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyOptions,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a React ref, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?:\n    | React.RefObject<HTMLElement | null>\n    | HTMLElement\n    | Document\n    | Window\n    | null\n}\n\n/**\n * React hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference React state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)\n *   and only suppresses firing; the hook updates the existing handle instead of unregistering.\n *\n * @example\n * ```tsx\n * function SaveButton() {\n *   const [count, setCount] = useState(0)\n *\n *   // Callback always has access to latest count value\n *   useHotkey('Mod+S', (event, { hotkey }) => {\n *     console.log(`Save triggered, count is ${count}`)\n *     handleSave()\n *   })\n *\n *   return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n *   // enabled option is synced on every render\n *   useHotkey('Escape', () => {\n *     onClose()\n *   }, { enabled: isOpen })\n *\n *   if (!isOpen) return null\n *   return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n *   const editorRef = useRef<HTMLDivElement>(null)\n *\n *   // Scoped to a specific element\n *   useHotkey('Mod+S', () => {\n *     save()\n *   }, { target: editorRef })\n *\n *   return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n  hotkey: RegisterableHotkey,\n  callback: HotkeyCallback,\n  options: UseHotkeyOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkey,\n    ...options,\n  } as UseHotkeyOptions\n\n  const manager = getHotkeyManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n  // Refs to capture current values for use in effect without adding dependencies\n  const callbackRef = useRef(callback)\n  const optionsRef = useRef(mergedOptions)\n  const managerRef = useRef(manager)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n\n  // Track previous target and hotkey to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevHotkeyRef = useRef<string | null>(null)\n\n  // Normalize to hotkey string\n  const platform = mergedOptions.platform ?? detectPlatform()\n  const hotkeyString = normalizeRegisterableHotkey(hotkey, platform)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    // Resolve target inside the effect so refs are already attached after mount\n    const resolvedTarget = isRef(optionsRef.current.target)\n      ? optionsRef.current.target.current\n      : (optionsRef.current.target ??\n        (typeof document !== 'undefined' ? document : null))\n\n    // Skip if no valid target (SSR or ref still null)\n    if (!resolvedTarget) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevHotkeyRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or hotkey changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const hotkeyChanged =\n      prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n    // If we have an active registration and target/hotkey changed, unregister first\n    if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    // Use refs to access current values without adding them to dependencies\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        hotkeyString,\n        callbackRef.current,\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevHotkeyRef.current = hotkeyString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeyString])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  // This avoids stale closures - the callback always has access to latest state\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = callback\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,mDAA4B;CAGlC,MAAM,oCAA0D,KAAK;CAGrE,MAAM,gCAAqB,SAAS;CACpC,MAAM,+BAAoB,cAAc;CACxC,MAAM,+BAAoB,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,kCAA+D,KAAK;CAC1E,MAAM,kCAAsC,KAAK;CAIjD,MAAM,kEAA2C,QADhC,cAAc,mDAA4B,CACO;CAGlE,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,4BAAgB;EAEd,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,gBAAgB;AACnB,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;AAGxB,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,aAAa,CAAC;AAIlB,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,WAAW;AACnC,kBAAgB,QAAQ,WAAW,qBAAqB"}
+{"version":3,"file":"useHotkey.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  detectPlatform,\n  getHotkeyManager,\n  normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyOptions,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a React ref, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?:\n    | React.RefObject<HTMLElement | null>\n    | HTMLElement\n    | Document\n    | Window\n    | null\n}\n\n/**\n * React hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference React state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)\n *   and only suppresses firing; the hook updates the existing handle instead of unregistering.\n *\n * @example\n * ```tsx\n * function SaveButton() {\n *   const [count, setCount] = useState(0)\n *\n *   // Callback always has access to latest count value\n *   useHotkey('Mod+S', (event, { hotkey }) => {\n *     console.log(`Save triggered, count is ${count}`)\n *     handleSave()\n *   })\n *\n *   return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n *   // enabled option is synced on every render\n *   useHotkey('Escape', () => {\n *     onClose()\n *   }, { enabled: isOpen })\n *\n *   if (!isOpen) return null\n *   return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n *   const editorRef = useRef<HTMLDivElement>(null)\n *\n *   // Scoped to a specific element\n *   useHotkey('Mod+S', () => {\n *     save()\n *   }, { target: editorRef })\n *\n *   return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n  hotkey: RegisterableHotkey,\n  callback: HotkeyCallback,\n  options: UseHotkeyOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkey,\n    ...options,\n  } as UseHotkeyOptions\n\n  const manager = getHotkeyManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n  // Refs to capture current values for use in effect without adding dependencies\n  const callbackRef = useRef(callback)\n  const optionsRef = useRef(mergedOptions)\n  const managerRef = useRef(manager)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n\n  // Track previous target and hotkey to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevHotkeyRef = useRef<string | null>(null)\n\n  // Normalize to hotkey string\n  const platform = mergedOptions.platform ?? detectPlatform()\n  const hotkeyString = normalizeRegisterableHotkey(hotkey, platform)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    // Resolve target inside the effect so refs are already attached after mount\n    const resolvedTarget = isRef(optionsRef.current.target)\n      ? optionsRef.current.target.current\n      : (optionsRef.current.target ??\n        (typeof document !== 'undefined' ? document : null))\n\n    // Skip if no valid target (SSR or ref still null)\n    if (!resolvedTarget) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevHotkeyRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or hotkey changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const hotkeyChanged =\n      prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n    // If we have an active registration and target/hotkey changed, unregister first\n    if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    // Use refs to access current values without adding them to dependencies\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        hotkeyString,\n        callbackRef.current,\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevHotkeyRef.current = hotkeyString\n  })\n\n  useEffect(() => {\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [])\n\n  // Publish option changes after commit, never during render.\n  useEffect(() => {\n    if (registrationRef.current?.isActive) {\n      registrationRef.current.callback = callback\n      registrationRef.current.setOptions(optionsWithoutTarget)\n    }\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,mDAA4B;CAGlC,MAAM,oCAA0D,KAAK;CAGrE,MAAM,gCAAqB,SAAS;CACpC,MAAM,+BAAoB,cAAc;CACxC,MAAM,+BAAoB,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,kCAA+D,KAAK;CAC1E,MAAM,kCAAsC,KAAK;CAIjD,MAAM,kEAA2C,QADhC,cAAc,mDAA4B,CACO;CAGlE,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,4BAAgB;EAEd,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,gBAAgB;AACnB,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;GACxB;AAEF,4BAAgB;AAEd,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,EAAE,CAAC;AAGN,4BAAgB;AACd,MAAI,gBAAgB,SAAS,UAAU;AACrC,mBAAgB,QAAQ,WAAW;AACnC,mBAAgB,QAAQ,WAAW,qBAAqB;;GAE1D"}

package/dist/useHotkey.js

@@ -103,17 +103,21 @@ function useHotkey(hotkey, callback, options = {}) {
 		});
 		prevTargetRef.current = resolvedTarget;
 		prevHotkeyRef.current = hotkeyString;
+	});
+	useEffect(() => {
 		return () => {
 			if (registrationRef.current?.isActive) {
 				registrationRef.current.unregister();
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeyString]);
-	if (registrationRef.current?.isActive) {
-		registrationRef.current.callback = callback;
-		registrationRef.current.setOptions(optionsWithoutTarget);
-	}
+	}, []);
+	useEffect(() => {
+		if (registrationRef.current?.isActive) {
+			registrationRef.current.callback = callback;
+			registrationRef.current.setOptions(optionsWithoutTarget);
+		}
+	});
 }
 
 //#endregion

package/dist/useHotkey.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkey.js","names":[],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  detectPlatform,\n  getHotkeyManager,\n  normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyOptions,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a React ref, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?:\n    | React.RefObject<HTMLElement | null>\n    | HTMLElement\n    | Document\n    | Window\n    | null\n}\n\n/**\n * React hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference React state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)\n *   and only suppresses firing; the hook updates the existing handle instead of unregistering.\n *\n * @example\n * ```tsx\n * function SaveButton() {\n *   const [count, setCount] = useState(0)\n *\n *   // Callback always has access to latest count value\n *   useHotkey('Mod+S', (event, { hotkey }) => {\n *     console.log(`Save triggered, count is ${count}`)\n *     handleSave()\n *   })\n *\n *   return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n *   // enabled option is synced on every render\n *   useHotkey('Escape', () => {\n *     onClose()\n *   }, { enabled: isOpen })\n *\n *   if (!isOpen) return null\n *   return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n *   const editorRef = useRef<HTMLDivElement>(null)\n *\n *   // Scoped to a specific element\n *   useHotkey('Mod+S', () => {\n *     save()\n *   }, { target: editorRef })\n *\n *   return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n  hotkey: RegisterableHotkey,\n  callback: HotkeyCallback,\n  options: UseHotkeyOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkey,\n    ...options,\n  } as UseHotkeyOptions\n\n  const manager = getHotkeyManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n  // Refs to capture current values for use in effect without adding dependencies\n  const callbackRef = useRef(callback)\n  const optionsRef = useRef(mergedOptions)\n  const managerRef = useRef(manager)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n\n  // Track previous target and hotkey to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevHotkeyRef = useRef<string | null>(null)\n\n  // Normalize to hotkey string\n  const platform = mergedOptions.platform ?? detectPlatform()\n  const hotkeyString = normalizeRegisterableHotkey(hotkey, platform)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    // Resolve target inside the effect so refs are already attached after mount\n    const resolvedTarget = isRef(optionsRef.current.target)\n      ? optionsRef.current.target.current\n      : (optionsRef.current.target ??\n        (typeof document !== 'undefined' ? document : null))\n\n    // Skip if no valid target (SSR or ref still null)\n    if (!resolvedTarget) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevHotkeyRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or hotkey changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const hotkeyChanged =\n      prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n    // If we have an active registration and target/hotkey changed, unregister first\n    if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    // Use refs to access current values without adding them to dependencies\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        hotkeyString,\n        callbackRef.current,\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevHotkeyRef.current = hotkeyString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeyString])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  // This avoids stale closures - the callback always has access to latest state\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = callback\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,kBAAkB;CAGlC,MAAM,kBAAkB,OAAwC,KAAK;CAGrE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,gBAAgB,OAAsB,KAAK;CAIjD,MAAM,eAAe,4BAA4B,QADhC,cAAc,YAAY,gBAAgB,CACO;CAGlE,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;EAEd,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,gBAAgB;AACnB,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;AAGxB,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,aAAa,CAAC;AAIlB,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,WAAW;AACnC,kBAAgB,QAAQ,WAAW,qBAAqB"}
+{"version":3,"file":"useHotkey.js","names":[],"sources":["../src/useHotkey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  detectPlatform,\n  getHotkeyManager,\n  normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyOptions,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a React ref, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?:\n    | React.RefObject<HTMLElement | null>\n    | HTMLElement\n    | Document\n    | Window\n    | null\n}\n\n/**\n * React hook for registering a keyboard hotkey.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * The callback receives both the keyboard event and a context object\n * containing the hotkey string and parsed hotkey.\n *\n * This hook syncs the callback and options on every render to avoid\n * stale closures. This means\n * callbacks that reference React state will always have access to\n * the latest values.\n *\n * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)\n * @param callback - The function to call when the hotkey is pressed\n * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)\n *   and only suppresses firing; the hook updates the existing handle instead of unregistering.\n *\n * @example\n * ```tsx\n * function SaveButton() {\n *   const [count, setCount] = useState(0)\n *\n *   // Callback always has access to latest count value\n *   useHotkey('Mod+S', (event, { hotkey }) => {\n *     console.log(`Save triggered, count is ${count}`)\n *     handleSave()\n *   })\n *\n *   return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Modal({ isOpen, onClose }) {\n *   // enabled option is synced on every render\n *   useHotkey('Escape', () => {\n *     onClose()\n *   }, { enabled: isOpen })\n *\n *   if (!isOpen) return null\n *   return <div className=\"modal\">...</div>\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Editor() {\n *   const editorRef = useRef<HTMLDivElement>(null)\n *\n *   // Scoped to a specific element\n *   useHotkey('Mod+S', () => {\n *     save()\n *   }, { target: editorRef })\n *\n *   return <div ref={editorRef}>...</div>\n * }\n * ```\n */\nexport function useHotkey(\n  hotkey: RegisterableHotkey,\n  callback: HotkeyCallback,\n  options: UseHotkeyOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkey,\n    ...options,\n  } as UseHotkeyOptions\n\n  const manager = getHotkeyManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<HotkeyRegistrationHandle | null>(null)\n\n  // Refs to capture current values for use in effect without adding dependencies\n  const callbackRef = useRef(callback)\n  const optionsRef = useRef(mergedOptions)\n  const managerRef = useRef(manager)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n\n  // Track previous target and hotkey to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevHotkeyRef = useRef<string | null>(null)\n\n  // Normalize to hotkey string\n  const platform = mergedOptions.platform ?? detectPlatform()\n  const hotkeyString = normalizeRegisterableHotkey(hotkey, platform)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    // Resolve target inside the effect so refs are already attached after mount\n    const resolvedTarget = isRef(optionsRef.current.target)\n      ? optionsRef.current.target.current\n      : (optionsRef.current.target ??\n        (typeof document !== 'undefined' ? document : null))\n\n    // Skip if no valid target (SSR or ref still null)\n    if (!resolvedTarget) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevHotkeyRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or hotkey changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const hotkeyChanged =\n      prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString\n\n    // If we have an active registration and target/hotkey changed, unregister first\n    if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    // Use refs to access current values without adding them to dependencies\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        hotkeyString,\n        callbackRef.current,\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevHotkeyRef.current = hotkeyString\n  })\n\n  useEffect(() => {\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [])\n\n  // Publish option changes after commit, never during render.\n  useEffect(() => {\n    if (registrationRef.current?.isActive) {\n      registrationRef.current.callback = callback\n      registrationRef.current.setOptions(optionsWithoutTarget)\n    }\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAgB,UACd,QACA,UACA,UAA4B,EAAE,EACxB;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,kBAAkB;CAGlC,MAAM,kBAAkB,OAAwC,KAAK;CAGrE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,gBAAgB,OAAsB,KAAK;CAIjD,MAAM,eAAe,4BAA4B,QADhC,cAAc,YAAY,gBAAgB,CACO;CAGlE,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;EAEd,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,gBAAgB;AACnB,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;AAG9D,MAAI,gBAAgB,SAAS,aAAa,iBAAiB,gBAAgB;AACzE,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAK5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,cACA,YAAY,SACZ;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,gBAAc,UAAU;GACxB;AAEF,iBAAgB;AAEd,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,gBAAgB,SAAS,UAAU;AACrC,mBAAgB,QAAQ,WAAW;AACnC,mBAAgB,QAAQ,WAAW,qBAAqB;;GAE1D"}

package/dist/useHotkeyHint.cjs

@@ -0,0 +1,19 @@
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let _tanstack_react_store = require("@tanstack/react-store");
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a boolean indicating whether held modifiers reveal this shortcut.
+* Only visibility changes from held-key updates cause a rerender.
+* Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+* every modifier. Combine with the action's enabled state before showing a badge.
+* This helper does not register a shortcut or check whether its target is focused.
+*/
+function useHotkeyHint(hotkey, options = {}) {
+	return (0, _tanstack_react_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => (0, _tanstack_hotkeys.matchesHeldModifiers)(hotkey, state.heldKeys, options));
+}
+
+//#endregion
+exports.useHotkeyHint = useHotkeyHint;
+//# sourceMappingURL=useHotkeyHint.cjs.map

package/dist/useHotkeyHint.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.cjs","names":[],"sources":["../src/useHotkeyHint.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a boolean indicating whether held modifiers reveal this shortcut.\n * Only visibility changes from held-key updates cause a rerender.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function useHotkeyHint(\n  hotkey: RegisterableHotkey,\n  options: HeldModifierOptions = {},\n): boolean {\n  return useSelector(getKeyStateTracker().store, (state) =>\n    matchesHeldModifiers(hotkey, state.heldKeys, options),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,cACd,QACA,UAA+B,EAAE,EACxB;AACT,0FAAuC,CAAC,QAAQ,sDACzB,QAAQ,MAAM,UAAU,QAAQ,CACtD"}

package/dist/useHotkeyHint.d.cts

@@ -0,0 +1,14 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a boolean indicating whether held modifiers reveal this shortcut.
+ * Only visibility changes from held-key updates cause a rerender.
+ * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+ * every modifier. Combine with the action's enabled state before showing a badge.
+ * This helper does not register a shortcut or check whether its target is focused.
+ */
+declare function useHotkeyHint(hotkey: RegisterableHotkey, options?: HeldModifierOptions): boolean;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.cts.map

package/dist/useHotkeyHint.d.ts

@@ -0,0 +1,14 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a boolean indicating whether held modifiers reveal this shortcut.
+ * Only visibility changes from held-key updates cause a rerender.
+ * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+ * every modifier. Combine with the action's enabled state before showing a badge.
+ * This helper does not register a shortcut or check whether its target is focused.
+ */
+declare function useHotkeyHint(hotkey: RegisterableHotkey, options?: HeldModifierOptions): boolean;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.ts.map

package/dist/useHotkeyHint.js

@@ -0,0 +1,18 @@
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+import { useSelector } from "@tanstack/react-store";
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a boolean indicating whether held modifiers reveal this shortcut.
+* Only visibility changes from held-key updates cause a rerender.
+* Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires
+* every modifier. Combine with the action's enabled state before showing a badge.
+* This helper does not register a shortcut or check whether its target is focused.
+*/
+function useHotkeyHint(hotkey, options = {}) {
+	return useSelector(getKeyStateTracker().store, (state) => matchesHeldModifiers(hotkey, state.heldKeys, options));
+}
+
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.js.map

package/dist/useHotkeyHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.js","names":[],"sources":["../src/useHotkeyHint.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a boolean indicating whether held modifiers reveal this shortcut.\n * Only visibility changes from held-key updates cause a rerender.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function useHotkeyHint(\n  hotkey: RegisterableHotkey,\n  options: HeldModifierOptions = {},\n): boolean {\n  return useSelector(getKeyStateTracker().store, (state) =>\n    matchesHeldModifiers(hotkey, state.heldKeys, options),\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,cACd,QACA,UAA+B,EAAE,EACxB;AACT,QAAO,YAAY,oBAAoB,CAAC,QAAQ,UAC9C,qBAAqB,QAAQ,MAAM,UAAU,QAAQ,CACtD"}

package/dist/useHotkeyRecorder.cjs

@@ -51,8 +51,8 @@ function useHotkeyRecorder(options) {
 	const recorderRef = (0, react.useRef)(null);
 	if (!recorderRef.current) recorderRef.current = new _tanstack_hotkeys.HotkeyRecorder(mergedOptions);
 	recorderRef.current.setOptions(mergedOptions);
-	const isRecording = (0, _tanstack_react_store.useStore)(recorderRef.current.store, (state) => state.isRecording);
-	const recordedHotkey = (0, _tanstack_react_store.useStore)(recorderRef.current.store, (state) => state.recordedHotkey);
+	const isRecording = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.isRecording);
+	const recordedHotkey = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.recordedHotkey);
 	(0, react.useEffect)(() => {
 		return () => {
 			recorderRef.current?.destroy();

package/dist/useHotkeyRecorder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: boolean\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Hotkey | null\n  /** Start recording a new hotkey */\n  startRecording: () => void\n  /** Stop recording (same as cancel) */\n  stopRecording: () => void\n  /** Cancel recording without saving */\n  cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n *   const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n *   const recorder = useHotkeyRecorder({\n *     onRecord: (hotkey) => {\n *       setShortcut(hotkey)\n *     },\n *     onCancel: () => {\n *       console.log('Recording cancelled')\n *     },\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={recorder.startRecording}>\n *         {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n *       </button>\n *       {recorder.recordedHotkey && (\n *         <div>Recording: {recorder.recordedHotkey}</div>\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n  options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeyRecorder,\n    ...options,\n  } as HotkeyRecorderOptions\n\n  const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n  // Create recorder instance once\n  if (!recorderRef.current) {\n    recorderRef.current = new HotkeyRecorder(mergedOptions)\n  }\n\n  // Sync options on every render (same pattern as useHotkey)\n  // This ensures callbacks always have access to latest values\n  recorderRef.current.setOptions(mergedOptions)\n\n  // Subscribe to recorder state using useStore (same pattern as useHeldKeys)\n  const isRecording = useStore(\n    recorderRef.current.store,\n    (state) => state.isRecording,\n  )\n  const recordedHotkey = useStore(\n    recorderRef.current.store,\n    (state) => state.recordedHotkey,\n  )\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      recorderRef.current?.destroy()\n    }\n  }, [])\n\n  return {\n    isRecording,\n    recordedHotkey,\n    startRecording: () => recorderRef.current?.start(),\n    stopRecording: () => recorderRef.current?.stop(),\n    cancelRecording: () => recorderRef.current?.cancel(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,gCAA4C,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,iCAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,kDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,qDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,4BAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
+{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: boolean\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Hotkey | null\n  /** Start recording a new hotkey */\n  startRecording: () => void\n  /** Stop recording (same as cancel) */\n  stopRecording: () => void\n  /** Cancel recording without saving */\n  cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n *   const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n *   const recorder = useHotkeyRecorder({\n *     onRecord: (hotkey) => {\n *       setShortcut(hotkey)\n *     },\n *     onCancel: () => {\n *       console.log('Recording cancelled')\n *     },\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={recorder.startRecording}>\n *         {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n *       </button>\n *       {recorder.recordedHotkey && (\n *         <div>Recording: {recorder.recordedHotkey}</div>\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n  options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeyRecorder,\n    ...options,\n  } as HotkeyRecorderOptions\n\n  const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n  // Create recorder instance once\n  if (!recorderRef.current) {\n    recorderRef.current = new HotkeyRecorder(mergedOptions)\n  }\n\n  // Sync options on every render (same pattern as useHotkey)\n  // This ensures callbacks always have access to latest values\n  recorderRef.current.setOptions(mergedOptions)\n\n  // Subscribe to recorder state using useSelector (same pattern as useHeldKeys)\n  const isRecording = useSelector(\n    recorderRef.current.store,\n    (state) => state.isRecording,\n  )\n  const recordedHotkey = useSelector(\n    recorderRef.current.store,\n    (state) => state.recordedHotkey,\n  )\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      recorderRef.current?.destroy()\n    }\n  }, [])\n\n  return {\n    isRecording,\n    recordedHotkey,\n    startRecording: () => recorderRef.current?.start(),\n    stopRecording: () => recorderRef.current?.stop(),\n    cancelRecording: () => recorderRef.current?.cancel(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,gCAA4C,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,iCAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,qDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,wDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,4BAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,7 @@
 import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { useEffect, useRef } from "react";
-import { useStore } from "@tanstack/react-store";
+import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyRecorder.ts
 /**
@@ -50,8 +50,8 @@ function useHotkeyRecorder(options) {
 	const recorderRef = useRef(null);
 	if (!recorderRef.current) recorderRef.current = new HotkeyRecorder(mergedOptions);
 	recorderRef.current.setOptions(mergedOptions);
-	const isRecording = useStore(recorderRef.current.store, (state) => state.isRecording);
-	const recordedHotkey = useStore(recorderRef.current.store, (state) => state.recordedHotkey);
+	const isRecording = useSelector(recorderRef.current.store, (state) => state.isRecording);
+	const recordedHotkey = useSelector(recorderRef.current.store, (state) => state.recordedHotkey);
 	useEffect(() => {
 		return () => {
 			recorderRef.current?.destroy();

package/dist/useHotkeyRecorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: boolean\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Hotkey | null\n  /** Start recording a new hotkey */\n  startRecording: () => void\n  /** Stop recording (same as cancel) */\n  stopRecording: () => void\n  /** Cancel recording without saving */\n  cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n *   const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n *   const recorder = useHotkeyRecorder({\n *     onRecord: (hotkey) => {\n *       setShortcut(hotkey)\n *     },\n *     onCancel: () => {\n *       console.log('Recording cancelled')\n *     },\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={recorder.startRecording}>\n *         {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n *       </button>\n *       {recorder.recordedHotkey && (\n *         <div>Recording: {recorder.recordedHotkey}</div>\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n  options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeyRecorder,\n    ...options,\n  } as HotkeyRecorderOptions\n\n  const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n  // Create recorder instance once\n  if (!recorderRef.current) {\n    recorderRef.current = new HotkeyRecorder(mergedOptions)\n  }\n\n  // Sync options on every render (same pattern as useHotkey)\n  // This ensures callbacks always have access to latest values\n  recorderRef.current.setOptions(mergedOptions)\n\n  // Subscribe to recorder state using useStore (same pattern as useHeldKeys)\n  const isRecording = useStore(\n    recorderRef.current.store,\n    (state) => state.isRecording,\n  )\n  const recordedHotkey = useStore(\n    recorderRef.current.store,\n    (state) => state.recordedHotkey,\n  )\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      recorderRef.current?.destroy()\n    }\n  }, [])\n\n  return {\n    isRecording,\n    recordedHotkey,\n    startRecording: () => recorderRef.current?.start(),\n    stopRecording: () => recorderRef.current?.stop(),\n    cancelRecording: () => recorderRef.current?.cancel(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,cAAc,OAA8B,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAI,eAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,cAAc,SAClB,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,iBAAiB,SACrB,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
+{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: boolean\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Hotkey | null\n  /** Start recording a new hotkey */\n  startRecording: () => void\n  /** Stop recording (same as cancel) */\n  stopRecording: () => void\n  /** Cancel recording without saving */\n  cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n *   const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n *   const recorder = useHotkeyRecorder({\n *     onRecord: (hotkey) => {\n *       setShortcut(hotkey)\n *     },\n *     onCancel: () => {\n *       console.log('Recording cancelled')\n *     },\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={recorder.startRecording}>\n *         {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n *       </button>\n *       {recorder.recordedHotkey && (\n *         <div>Recording: {recorder.recordedHotkey}</div>\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n  options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeyRecorder,\n    ...options,\n  } as HotkeyRecorderOptions\n\n  const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n  // Create recorder instance once\n  if (!recorderRef.current) {\n    recorderRef.current = new HotkeyRecorder(mergedOptions)\n  }\n\n  // Sync options on every render (same pattern as useHotkey)\n  // This ensures callbacks always have access to latest values\n  recorderRef.current.setOptions(mergedOptions)\n\n  // Subscribe to recorder state using useSelector (same pattern as useHeldKeys)\n  const isRecording = useSelector(\n    recorderRef.current.store,\n    (state) => state.isRecording,\n  )\n  const recordedHotkey = useSelector(\n    recorderRef.current.store,\n    (state) => state.recordedHotkey,\n  )\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      recorderRef.current?.destroy()\n    }\n  }, [])\n\n  return {\n    isRecording,\n    recordedHotkey,\n    startRecording: () => recorderRef.current?.start(),\n    stopRecording: () => recorderRef.current?.stop(),\n    cancelRecording: () => recorderRef.current?.cancel(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,cAAc,OAA8B,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAI,eAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,cAAc,YAClB,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,iBAAiB,YACrB,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}

package/dist/useHotkeyRegistrations.cjs

@@ -39,8 +39,8 @@ function useHotkeyRegistrations() {
 	const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
 	const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
 	return {
-		hotkeys: (0, _tanstack_react_store.useStore)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
-		sequences: (0, _tanstack_react_store.useStore)(sequenceManager.registrations, (state) => Array.from(state.values()))
+		hotkeys: (0, _tanstack_react_store.useSelector)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
+		sequences: (0, _tanstack_react_store.useSelector)(sequenceManager.registrations, (state) => Array.from(state.values()))
 	};
 }
 

package/dist/useHotkeyRegistrations.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Array<HotkeyRegistrationView>\n  /** All registered sequences */\n  sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n *   const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n *   return (\n *     <ul>\n *       {hotkeys.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.hotkey}\n *         </li>\n *       ))}\n *       {sequences.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.sequence.join(' ')}\n *         </li>\n *       ))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = useStore(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = useStore(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,6CARgB,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,+CAJS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
+{"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Array<HotkeyRegistrationView>\n  /** All registered sequences */\n  sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n *   const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n *   return (\n *     <ul>\n *       {hotkeys.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.hotkey}\n *         </li>\n *       ))}\n *       {sequences.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.sequence.join(' ')}\n *         </li>\n *       ))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = useSelector(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = useSelector(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,gDARmB,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,kDAJY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}

package/dist/useHotkeyRegistrations.js

@@ -1,5 +1,5 @@
 import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
-import { useStore } from "@tanstack/react-store";
+import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyRegistrations.ts
 /**
@@ -38,8 +38,8 @@ function useHotkeyRegistrations() {
 	const hotkeyManager = getHotkeyManager();
 	const sequenceManager = getSequenceManager();
 	return {
-		hotkeys: useStore(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
-		sequences: useStore(sequenceManager.registrations, (state) => Array.from(state.values()))
+		hotkeys: useSelector(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
+		sequences: useSelector(sequenceManager.registrations, (state) => Array.from(state.values()))
 	};
 }
 

package/dist/useHotkeyRegistrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Array<HotkeyRegistrationView>\n  /** All registered sequences */\n  sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n *   const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n *   return (\n *     <ul>\n *       {hotkeys.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.hotkey}\n *         </li>\n *       ))}\n *       {sequences.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.sequence.join(' ')}\n *         </li>\n *       ))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = useStore(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = useStore(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,SAAS,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,SAAS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
+{"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Array<HotkeyRegistrationView>\n  /** All registered sequences */\n  sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n *   const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n *   return (\n *     <ul>\n *       {hotkeys.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.hotkey}\n *         </li>\n *       ))}\n *       {sequences.map((reg) => (\n *         <li key={reg.id}>\n *           {reg.options.meta?.name ?? reg.sequence.join(' ')}\n *         </li>\n *       ))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = useSelector(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = useSelector(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,YAAY,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,YAAY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}

package/dist/useHotkeySequence.cjs

@@ -99,17 +99,21 @@ function useHotkeySequence(sequence, callback, options = {}) {
 		});
 		prevTargetRef.current = resolvedTarget;
 		prevSequenceRef.current = hotkeySequenceString;
+	});
+	(0, react.useEffect)(() => {
 		return () => {
 			if (registrationRef.current?.isActive) {
 				registrationRef.current.unregister();
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeySequenceString]);
-	if (registrationRef.current?.isActive) {
-		registrationRef.current.callback = (event, context) => callbackRef.current(event, context);
-		registrationRef.current.setOptions(optionsWithoutTarget);
-	}
+	}, []);
+	(0, react.useEffect)(() => {
+		if (registrationRef.current?.isActive) {
+			registrationRef.current.callback = (event, context) => callbackRef.current(event, context);
+			registrationRef.current.setOptions(optionsWithoutTarget);
+		}
+	});
 }
 
 //#endregion