@tanstack/react-hotkeys 0.5.1 → 0.7.0

package/dist/HotkeysProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type { HotkeyRecorderOptions } from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<UseHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: ReactNode\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n  children,\n  defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n  const contextValue: HotkeysContextValue = useMemo(\n    () => ({\n      defaultOptions,\n    }),\n    [defaultOptions],\n  )\n\n  return (\n    // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n    <HotkeysContext.Provider value={contextValue}>\n      {children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;;AAgBA,MAAM,0CAA2D,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,yCACG,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,4CAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,8BAAkB,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,8BAD2B,eAAe,EAC1B,kBAAkB,EAAE"}
+{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n  HotkeyRecorderOptions,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<UseHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n  hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: ReactNode\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n  children,\n  defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n  const contextValue: HotkeysContextValue = useMemo(\n    () => ({\n      defaultOptions,\n    }),\n    [defaultOptions],\n  )\n\n  return (\n    // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n    <HotkeysContext.Provider value={contextValue}>\n      {children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;;AAoBA,MAAM,0CAA2D,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,yCACG,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,4CAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,8BAAkB,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,8BAD2B,eAAe,EAC1B,kBAAkB,EAAE"}

package/dist/HotkeysProvider.d.cts

@@ -1,12 +1,13 @@
 import { UseHotkeyOptions } from "./useHotkey.cjs";
 import { UseHotkeySequenceOptions } from "./useHotkeySequence.cjs";
-import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
 import React, { ReactNode } from "react";
 
 //#region src/HotkeysProvider.d.ts
 interface HotkeysProviderOptions {
   hotkey?: Partial<UseHotkeyOptions>;
   hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
   hotkeySequence?: Partial<UseHotkeySequenceOptions>;
 }
 interface HotkeysContextValue {

package/dist/HotkeysProvider.d.ts

@@ -1,12 +1,13 @@
 import { UseHotkeyOptions } from "./useHotkey.js";
 import { UseHotkeySequenceOptions } from "./useHotkeySequence.js";
-import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
 import React, { ReactNode } from "react";
 
 //#region src/HotkeysProvider.d.ts
 interface HotkeysProviderOptions {
   hotkey?: Partial<UseHotkeyOptions>;
   hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
   hotkeySequence?: Partial<UseHotkeySequenceOptions>;
 }
 interface HotkeysContextValue {

package/dist/HotkeysProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type { HotkeyRecorderOptions } from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<UseHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: ReactNode\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n  children,\n  defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n  const contextValue: HotkeysContextValue = useMemo(\n    () => ({\n      defaultOptions,\n    }),\n    [defaultOptions],\n  )\n\n  return (\n    // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n    <HotkeysContext.Provider value={contextValue}>\n      {children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;AAgBA,MAAM,iBAAiB,cAA0C,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,eAAoC,eACjC,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,oCAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,QAAO,WAAW,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,QADgB,WAAW,eAAe,EAC1B,kBAAkB,EAAE"}
+{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n  HotkeyRecorderOptions,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<UseHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n  hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: ReactNode\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n  children,\n  defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n  const contextValue: HotkeysContextValue = useMemo(\n    () => ({\n      defaultOptions,\n    }),\n    [defaultOptions],\n  )\n\n  return (\n    // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n    <HotkeysContext.Provider value={contextValue}>\n      {children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;AAoBA,MAAM,iBAAiB,cAA0C,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,eAAoC,eACjC,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,oCAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,QAAO,WAAW,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,QADgB,WAAW,eAAe,EAC1B,kBAAkB,EAAE"}

package/dist/index.cjs

@@ -6,7 +6,9 @@ const require_useHeldKeys = require('./useHeldKeys.cjs');
 const require_useHeldKeyCodes = require('./useHeldKeyCodes.cjs');
 const require_useKeyHold = require('./useKeyHold.cjs');
 const require_useHotkeySequence = require('./useHotkeySequence.cjs');
+const require_useHotkeySequences = require('./useHotkeySequences.cjs');
 const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
+const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
 
 exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
 exports.useDefaultHotkeysOptions = require_HotkeysProvider.useDefaultHotkeysOptions;
@@ -15,6 +17,8 @@ exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
 exports.useHotkey = require_useHotkey.useHotkey;
 exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
 exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
+exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
+exports.useHotkeySequences = require_useHotkeySequences.useHotkeySequences;
 exports.useHotkeys = require_useHotkeys.useHotkeys;
 exports.useHotkeysContext = require_HotkeysProvider.useHotkeysContext;
 exports.useKeyHold = require_useKeyHold.useKeyHold;

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/useHotkey.cjs

@@ -19,7 +19,8 @@ let react = require("react");
 *
 * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
 * @param callback - The function to call when the hotkey is pressed
-* @param options - Options for the hotkey behavior
+* @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+*   and only suppresses firing; the hook updates the existing handle instead of unregistering.
 *
 * @example
 * ```tsx
@@ -83,7 +84,15 @@ function useHotkey(hotkey, callback, options = {}) {
 	const { target: _target, ...optionsWithoutTarget } = mergedOptions;
 	(0, react.useEffect)(() => {
 		const resolvedTarget = require_utils.isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
-		if (!resolvedTarget) return;
+		if (!resolvedTarget) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevHotkeyRef.current = null;
+			return;
+		}
 		const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
 		const hotkeyChanged = prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString;
 		if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {
@@ -102,7 +111,7 @@ function useHotkey(hotkey, callback, options = {}) {
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeyString, options.enabled]);
+	}, [hotkeyString]);
 	if (registrationRef.current?.isActive) {
 		registrationRef.current.callback = callback;
 		registrationRef.current.setOptions(optionsWithoutTarget);

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  formatHotkey,\n  getHotkeyManager,\n  rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  Hotkey,\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\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: Hotkey =\n    typeof hotkey === 'string'\n      ? hotkey\n      : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\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      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, options.enabled])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,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;CAGjD,MAAM,WAAW,cAAc,mDAA4B;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,4FACsC,QAAQ,SAAS,CAAC;CAG9D,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,eACH;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,cAAc,QAAQ,QAAQ,CAAC;AAInC,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  formatHotkey,\n  getHotkeyManager,\n  rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  Hotkey,\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: Hotkey =\n    typeof hotkey === 'string'\n      ? hotkey\n      : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,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;CAGjD,MAAM,WAAW,cAAc,mDAA4B;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,4FACsC,QAAQ,SAAS,CAAC;CAG9D,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"}

package/dist/useHotkey.d.cts

@@ -23,7 +23,8 @@ interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {
  *
  * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
  * @param callback - The function to call when the hotkey is pressed
- * @param options - Options for the hotkey behavior
+ * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+ *   and only suppresses firing; the hook updates the existing handle instead of unregistering.
  *
  * @example
  * ```tsx

package/dist/useHotkey.d.ts

@@ -23,7 +23,8 @@ interface UseHotkeyOptions extends Omit<HotkeyOptions, 'target'> {
  *
  * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
  * @param callback - The function to call when the hotkey is pressed
- * @param options - Options for the hotkey behavior
+ * @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+ *   and only suppresses firing; the hook updates the existing handle instead of unregistering.
  *
  * @example
  * ```tsx

package/dist/useHotkey.js

@@ -18,7 +18,8 @@ import { useEffect, useRef } from "react";
 *
 * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
 * @param callback - The function to call when the hotkey is pressed
-* @param options - Options for the hotkey behavior
+* @param options - Options for the hotkey behavior. `enabled: false` keeps the registration (visible in devtools)
+*   and only suppresses firing; the hook updates the existing handle instead of unregistering.
 *
 * @example
 * ```tsx
@@ -82,7 +83,15 @@ function useHotkey(hotkey, callback, options = {}) {
 	const { target: _target, ...optionsWithoutTarget } = mergedOptions;
 	useEffect(() => {
 		const resolvedTarget = isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
-		if (!resolvedTarget) return;
+		if (!resolvedTarget) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevHotkeyRef.current = null;
+			return;
+		}
 		const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
 		const hotkeyChanged = prevHotkeyRef.current !== null && prevHotkeyRef.current !== hotkeyString;
 		if (registrationRef.current?.isActive && (targetChanged || hotkeyChanged)) {
@@ -101,7 +110,7 @@ function useHotkey(hotkey, callback, options = {}) {
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeyString, options.enabled]);
+	}, [hotkeyString]);
 	if (registrationRef.current?.isActive) {
 		registrationRef.current.callback = callback;
 		registrationRef.current.setOptions(optionsWithoutTarget);

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  formatHotkey,\n  getHotkeyManager,\n  rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  Hotkey,\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\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: Hotkey =\n    typeof hotkey === 'string'\n      ? hotkey\n      : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\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      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, options.enabled])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,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;CAGjD,MAAM,WAAW,cAAc,YAAY,gBAAgB;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,SACC,aAAa,wBAAwB,QAAQ,SAAS,CAAC;CAG9D,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,eACH;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,cAAc,QAAQ,QAAQ,CAAC;AAInC,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  formatHotkey,\n  getHotkeyManager,\n  rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  Hotkey,\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: Hotkey =\n    typeof hotkey === 'string'\n      ? hotkey\n      : (formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform)) as Hotkey)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,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;CAGjD,MAAM,WAAW,cAAc,YAAY,gBAAgB;CAC3D,MAAM,eACJ,OAAO,WAAW,WACd,SACC,aAAa,wBAAwB,QAAQ,SAAS,CAAC;CAG9D,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"}

package/dist/useHotkeySequence.cjs

@@ -18,7 +18,8 @@ let react = require("react");
 *
 * @param sequence - Array of hotkey strings that form the sequence
 * @param callback - Function to call when the sequence is completed
-* @param options - Options for the sequence behavior
+* @param options - Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+*   and only suppresses firing; the hook updates the existing handle instead of unregistering.
 *
 * @example
 * ```tsx
@@ -67,9 +68,25 @@ function useHotkeySequence(sequence, callback, options = {}) {
 	const hotkeySequenceString = (0, _tanstack_hotkeys.formatHotkeySequence)(sequence);
 	const { target: _target, ...optionsWithoutTarget } = mergedOptions;
 	(0, react.useEffect)(() => {
-		if (sequenceRef.current.length === 0) return;
+		if (sequenceRef.current.length === 0) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevSequenceRef.current = null;
+			return;
+		}
 		const resolvedTarget = require_utils.isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
-		if (!resolvedTarget) return;
+		if (!resolvedTarget) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevSequenceRef.current = null;
+			return;
+		}
 		const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
 		const sequenceChanged = prevSequenceRef.current !== null && prevSequenceRef.current !== hotkeySequenceString;
 		if (registrationRef.current?.isActive && (targetChanged || sequenceChanged)) {
@@ -88,7 +105,7 @@ function useHotkeySequence(sequence, callback, options = {}) {
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeySequenceString, mergedOptions.enabled]);
+	}, [hotkeySequenceString]);
 	if (registrationRef.current?.isActive) {
 		registrationRef.current.callback = (event, context) => callbackRef.current(event, context);
 		registrationRef.current.setOptions(optionsWithoutTarget);

package/dist/useHotkeySequence.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyCallbackContext,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'target'\n> {\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 shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n *   // 'g g' to go to top\n *   useHotkeySequence(['G', 'G'], () => {\n *     scrollToTop()\n *   })\n *\n *   // 'd d' to delete line\n *   useHotkeySequence(['D', 'D'], () => {\n *     deleteLine()\n *   })\n *\n *   // 'd i w' to delete inner word\n *   useHotkeySequence(['D', 'I', 'W'], () => {\n *     deleteInnerWord()\n *   }, { timeout: 500 })\n *\n *   // Same modifier on consecutive steps (bare Shift between chords is ignored)\n *   useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n *     nextAction()\n *   })\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n  sequence: HotkeySequence,\n  callback: HotkeyCallback,\n  options: UseHotkeySequenceOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeySequence,\n    ...options,\n  } as UseHotkeySequenceOptions\n\n  const manager = getSequenceManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<SequenceRegistrationHandle | 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  const sequenceRef = useRef(sequence)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n  sequenceRef.current = sequence\n\n  // Track previous target and sequence to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevSequenceRef = useRef<string | null>(null)\n\n  // Normalize to hotkey sequence string (join with spaces)\n  const hotkeySequenceString = formatHotkeySequence(sequence)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    if (sequenceRef.current.length === 0) {\n      return\n    }\n\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      return\n    }\n\n    // Check if we need to re-register (target or sequence changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const sequenceChanged =\n      prevSequenceRef.current !== null &&\n      prevSequenceRef.current !== hotkeySequenceString\n\n    // If we have an active registration and target/sequence changed, unregister first\n    if (\n      registrationRef.current?.isActive &&\n      (targetChanged || sequenceChanged)\n    ) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        sequenceRef.current,\n        (event, context) => callbackRef.current(event, context),\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevSequenceRef.current = hotkeySequenceString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeySequenceString, mergedOptions.enabled])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = (\n      event: KeyboardEvent,\n      context: HotkeyCallbackContext,\n    ) => callbackRef.current(event, context)\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,qDAA8B;CAGpC,MAAM,oCAA4D,KAAK;CAGvE,MAAM,gCAAqB,SAAS;CACpC,MAAM,+BAAoB,cAAc;CACxC,MAAM,+BAAoB,QAAQ;CAClC,MAAM,gCAAqB,SAAS;AAGpC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;AACrB,aAAY,UAAU;CAGtB,MAAM,kCAA+D,KAAK;CAC1E,MAAM,oCAAwC,KAAK;CAGnD,MAAM,mEAA4C,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,4BAAgB;AACd,MAAI,YAAY,QAAQ,WAAW,EACjC;EAIF,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,YAAY,UACX,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,sBAAsB,cAAc,QAAQ,CAAC;AAGjD,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
+{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyCallbackContext,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'target'\n> {\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 shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence 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 VimEditor() {\n *   // 'g g' to go to top\n *   useHotkeySequence(['G', 'G'], () => {\n *     scrollToTop()\n *   })\n *\n *   // 'd d' to delete line\n *   useHotkeySequence(['D', 'D'], () => {\n *     deleteLine()\n *   })\n *\n *   // 'd i w' to delete inner word\n *   useHotkeySequence(['D', 'I', 'W'], () => {\n *     deleteInnerWord()\n *   }, { timeout: 500 })\n *\n *   // Same modifier on consecutive steps (bare Shift between chords is ignored)\n *   useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n *     nextAction()\n *   })\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n  sequence: HotkeySequence,\n  callback: HotkeyCallback,\n  options: UseHotkeySequenceOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeySequence,\n    ...options,\n  } as UseHotkeySequenceOptions\n\n  const manager = getSequenceManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<SequenceRegistrationHandle | 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  const sequenceRef = useRef(sequence)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n  sequenceRef.current = sequence\n\n  // Track previous target and sequence to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevSequenceRef = useRef<string | null>(null)\n\n  // Normalize to hotkey sequence string (join with spaces)\n  const hotkeySequenceString = formatHotkeySequence(sequence)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    if (sequenceRef.current.length === 0) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevSequenceRef.current = null\n      return\n    }\n\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      prevSequenceRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or sequence changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const sequenceChanged =\n      prevSequenceRef.current !== null &&\n      prevSequenceRef.current !== hotkeySequenceString\n\n    // If we have an active registration and target/sequence changed, unregister first\n    if (\n      registrationRef.current?.isActive &&\n      (targetChanged || sequenceChanged)\n    ) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        sequenceRef.current,\n        (event, context) => callbackRef.current(event, context),\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevSequenceRef.current = hotkeySequenceString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeySequenceString])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = (\n      event: KeyboardEvent,\n      context: HotkeyCallbackContext,\n    ) => callbackRef.current(event, context)\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,qDAA8B;CAGpC,MAAM,oCAA4D,KAAK;CAGvE,MAAM,gCAAqB,SAAS;CACpC,MAAM,+BAAoB,cAAc;CACxC,MAAM,+BAAoB,QAAQ;CAClC,MAAM,gCAAqB,SAAS;AAGpC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;AACrB,aAAY,UAAU;CAGtB,MAAM,kCAA+D,KAAK;CAC1E,MAAM,oCAAwC,KAAK;CAGnD,MAAM,mEAA4C,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,4BAAgB;AACd,MAAI,YAAY,QAAQ,WAAW,GAAG;AACpC,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,mBAAgB,UAAU;AAC1B;;EAIF,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,mBAAgB,UAAU;AAC1B;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,YAAY,UACX,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,qBAAqB,CAAC;AAG1B,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}

package/dist/useHotkeySequence.d.cts

@@ -22,7 +22,8 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
  *
  * @param sequence - Array of hotkey strings that form the sequence
  * @param callback - Function to call when the sequence is completed
- * @param options - Options for the sequence behavior
+ * @param options - Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+ *   and only suppresses firing; the hook updates the existing handle instead of unregistering.
  *
  * @example
  * ```tsx

package/dist/useHotkeySequence.d.ts

@@ -22,7 +22,8 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
  *
  * @param sequence - Array of hotkey strings that form the sequence
  * @param callback - Function to call when the sequence is completed
- * @param options - Options for the sequence behavior
+ * @param options - Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+ *   and only suppresses firing; the hook updates the existing handle instead of unregistering.
  *
  * @example
  * ```tsx

package/dist/useHotkeySequence.js

@@ -17,7 +17,8 @@ import { useEffect, useRef } from "react";
 *
 * @param sequence - Array of hotkey strings that form the sequence
 * @param callback - Function to call when the sequence is completed
-* @param options - Options for the sequence behavior
+* @param options - Options for the sequence behavior. `enabled: false` keeps the registration (visible in devtools)
+*   and only suppresses firing; the hook updates the existing handle instead of unregistering.
 *
 * @example
 * ```tsx
@@ -66,9 +67,25 @@ function useHotkeySequence(sequence, callback, options = {}) {
 	const hotkeySequenceString = formatHotkeySequence(sequence);
 	const { target: _target, ...optionsWithoutTarget } = mergedOptions;
 	useEffect(() => {
-		if (sequenceRef.current.length === 0) return;
+		if (sequenceRef.current.length === 0) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevSequenceRef.current = null;
+			return;
+		}
 		const resolvedTarget = isRef(optionsRef.current.target) ? optionsRef.current.target.current : optionsRef.current.target ?? (typeof document !== "undefined" ? document : null);
-		if (!resolvedTarget) return;
+		if (!resolvedTarget) {
+			if (registrationRef.current?.isActive) {
+				registrationRef.current.unregister();
+				registrationRef.current = null;
+			}
+			prevTargetRef.current = null;
+			prevSequenceRef.current = null;
+			return;
+		}
 		const targetChanged = prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget;
 		const sequenceChanged = prevSequenceRef.current !== null && prevSequenceRef.current !== hotkeySequenceString;
 		if (registrationRef.current?.isActive && (targetChanged || sequenceChanged)) {
@@ -87,7 +104,7 @@ function useHotkeySequence(sequence, callback, options = {}) {
 				registrationRef.current = null;
 			}
 		};
-	}, [hotkeySequenceString, mergedOptions.enabled]);
+	}, [hotkeySequenceString]);
 	if (registrationRef.current?.isActive) {
 		registrationRef.current.callback = (event, context) => callbackRef.current(event, context);
 		registrationRef.current.setOptions(optionsWithoutTarget);

package/dist/useHotkeySequence.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyCallbackContext,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'target'\n> {\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 shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n *   // 'g g' to go to top\n *   useHotkeySequence(['G', 'G'], () => {\n *     scrollToTop()\n *   })\n *\n *   // 'd d' to delete line\n *   useHotkeySequence(['D', 'D'], () => {\n *     deleteLine()\n *   })\n *\n *   // 'd i w' to delete inner word\n *   useHotkeySequence(['D', 'I', 'W'], () => {\n *     deleteInnerWord()\n *   }, { timeout: 500 })\n *\n *   // Same modifier on consecutive steps (bare Shift between chords is ignored)\n *   useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n *     nextAction()\n *   })\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n  sequence: HotkeySequence,\n  callback: HotkeyCallback,\n  options: UseHotkeySequenceOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeySequence,\n    ...options,\n  } as UseHotkeySequenceOptions\n\n  const manager = getSequenceManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<SequenceRegistrationHandle | 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  const sequenceRef = useRef(sequence)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n  sequenceRef.current = sequence\n\n  // Track previous target and sequence to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevSequenceRef = useRef<string | null>(null)\n\n  // Normalize to hotkey sequence string (join with spaces)\n  const hotkeySequenceString = formatHotkeySequence(sequence)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    if (sequenceRef.current.length === 0) {\n      return\n    }\n\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      return\n    }\n\n    // Check if we need to re-register (target or sequence changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const sequenceChanged =\n      prevSequenceRef.current !== null &&\n      prevSequenceRef.current !== hotkeySequenceString\n\n    // If we have an active registration and target/sequence changed, unregister first\n    if (\n      registrationRef.current?.isActive &&\n      (targetChanged || sequenceChanged)\n    ) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        sequenceRef.current,\n        (event, context) => callbackRef.current(event, context),\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevSequenceRef.current = hotkeySequenceString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeySequenceString, mergedOptions.enabled])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = (\n      event: KeyboardEvent,\n      context: HotkeyCallbackContext,\n    ) => callbackRef.current(event, context)\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,oBAAoB;CAGpC,MAAM,kBAAkB,OAA0C,KAAK;CAGvE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,cAAc,OAAO,SAAS;AAGpC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;AACrB,aAAY,UAAU;CAGtB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,kBAAkB,OAAsB,KAAK;CAGnD,MAAM,uBAAuB,qBAAqB,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;AACd,MAAI,YAAY,QAAQ,WAAW,EACjC;EAIF,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,YAAY,UACX,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,sBAAsB,cAAc,QAAQ,CAAC;AAGjD,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
+{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type {\n  HotkeyCallback,\n  HotkeyCallbackContext,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'target'\n> {\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 shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence 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 VimEditor() {\n *   // 'g g' to go to top\n *   useHotkeySequence(['G', 'G'], () => {\n *     scrollToTop()\n *   })\n *\n *   // 'd d' to delete line\n *   useHotkeySequence(['D', 'D'], () => {\n *     deleteLine()\n *   })\n *\n *   // 'd i w' to delete inner word\n *   useHotkeySequence(['D', 'I', 'W'], () => {\n *     deleteInnerWord()\n *   }, { timeout: 500 })\n *\n *   // Same modifier on consecutive steps (bare Shift between chords is ignored)\n *   useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n *     nextAction()\n *   })\n *\n *   return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n  sequence: HotkeySequence,\n  callback: HotkeyCallback,\n  options: UseHotkeySequenceOptions = {},\n): void {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeySequence,\n    ...options,\n  } as UseHotkeySequenceOptions\n\n  const manager = getSequenceManager()\n\n  // Stable ref for registration handle\n  const registrationRef = useRef<SequenceRegistrationHandle | 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  const sequenceRef = useRef(sequence)\n\n  // Update refs on every render\n  callbackRef.current = callback\n  optionsRef.current = mergedOptions\n  managerRef.current = manager\n  sequenceRef.current = sequence\n\n  // Track previous target and sequence to detect changes requiring re-registration\n  const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n  const prevSequenceRef = useRef<string | null>(null)\n\n  // Normalize to hotkey sequence string (join with spaces)\n  const hotkeySequenceString = formatHotkeySequence(sequence)\n\n  // Extract options without target (target is handled separately)\n  const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n  useEffect(() => {\n    if (sequenceRef.current.length === 0) {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n      prevTargetRef.current = null\n      prevSequenceRef.current = null\n      return\n    }\n\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      prevSequenceRef.current = null\n      return\n    }\n\n    // Check if we need to re-register (target or sequence changed)\n    const targetChanged =\n      prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n    const sequenceChanged =\n      prevSequenceRef.current !== null &&\n      prevSequenceRef.current !== hotkeySequenceString\n\n    // If we have an active registration and target/sequence changed, unregister first\n    if (\n      registrationRef.current?.isActive &&\n      (targetChanged || sequenceChanged)\n    ) {\n      registrationRef.current.unregister()\n      registrationRef.current = null\n    }\n\n    // Register if needed (no active registration)\n    if (!registrationRef.current || !registrationRef.current.isActive) {\n      registrationRef.current = managerRef.current.register(\n        sequenceRef.current,\n        (event, context) => callbackRef.current(event, context),\n        {\n          ...optionsRef.current,\n          target: resolvedTarget,\n        },\n      )\n    }\n\n    // Update tracking refs\n    prevTargetRef.current = resolvedTarget\n    prevSequenceRef.current = hotkeySequenceString\n\n    // Cleanup on unmount\n    return () => {\n      if (registrationRef.current?.isActive) {\n        registrationRef.current.unregister()\n        registrationRef.current = null\n      }\n    }\n  }, [hotkeySequenceString])\n\n  // Sync callback and options on EVERY render (outside useEffect)\n  if (registrationRef.current?.isActive) {\n    registrationRef.current.callback = (\n      event: KeyboardEvent,\n      context: HotkeyCallbackContext,\n    ) => callbackRef.current(event, context)\n    registrationRef.current.setOptions(optionsWithoutTarget)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,oBAAoB;CAGpC,MAAM,kBAAkB,OAA0C,KAAK;CAGvE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,cAAc,OAAO,SAAS;AAGpC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;AACrB,aAAY,UAAU;CAGtB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,kBAAkB,OAAsB,KAAK;CAGnD,MAAM,uBAAuB,qBAAqB,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;AACd,MAAI,YAAY,QAAQ,WAAW,GAAG;AACpC,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;AAE5B,iBAAc,UAAU;AACxB,mBAAgB,UAAU;AAC1B;;EAIF,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,mBAAgB,UAAU;AAC1B;;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,YAAY,UACX,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B,CAAC,qBAAqB,CAAC;AAG1B,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}

package/dist/useHotkeySequenceRecorder.cjs

@@ -0,0 +1,42 @@
+const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
+const require_HotkeysProvider = require('./HotkeysProvider.cjs');
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+
+//#region src/useHotkeySequenceRecorder.ts
+/**
+* React hook for recording multi-chord sequences (Vim-style shortcuts).
+*
+* @param options - Configuration options for the hotkey sequence recorder
+*/
+function useHotkeySequenceRecorder(options) {
+	const mergedOptions = {
+		...require_HotkeysProvider.useDefaultHotkeysOptions().hotkeySequenceRecorder,
+		...options
+	};
+	const recorderRef = (0, react.useRef)(null);
+	if (!recorderRef.current) recorderRef.current = new _tanstack_hotkeys.HotkeySequenceRecorder(mergedOptions);
+	recorderRef.current.setOptions(mergedOptions);
+	const isRecording = (0, _tanstack_react_store.useStore)(recorderRef.current.store, (state) => state.isRecording);
+	const steps = (0, _tanstack_react_store.useStore)(recorderRef.current.store, (state) => state.steps);
+	const recordedSequence = (0, _tanstack_react_store.useStore)(recorderRef.current.store, (state) => state.recordedSequence);
+	(0, react.useEffect)(() => {
+		return () => {
+			recorderRef.current?.destroy();
+		};
+	}, []);
+	return {
+		isRecording,
+		steps,
+		recordedSequence,
+		startRecording: () => recorderRef.current?.start(),
+		stopRecording: () => recorderRef.current?.stop(),
+		cancelRecording: () => recorderRef.current?.cancel(),
+		commitRecording: () => recorderRef.current?.commit()
+	};
+}
+
+//#endregion
+exports.useHotkeySequenceRecorder = useHotkeySequenceRecorder;
+//# sourceMappingURL=useHotkeySequenceRecorder.cjs.map

package/dist/useHotkeySequenceRecorder.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type {\n  HotkeySequence,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface ReactHotkeySequenceRecorder {\n  /** Whether recording is currently active */\n  isRecording: boolean\n  /** Chords captured in the current session */\n  steps: HotkeySequence\n  /** Last committed sequence */\n  recordedSequence: HotkeySequence | null\n  startRecording: () => void\n  stopRecording: () => void\n  cancelRecording: () => void\n  /** Commit current steps (no-op if empty) */\n  commitRecording: () => void\n}\n\n/**\n * React hook for recording multi-chord sequences (Vim-style shortcuts).\n *\n * @param options - Configuration options for the hotkey sequence recorder\n */\nexport function useHotkeySequenceRecorder(\n  options: HotkeySequenceRecorderOptions,\n): ReactHotkeySequenceRecorder {\n  const mergedOptions = {\n    ...useDefaultHotkeysOptions().hotkeySequenceRecorder,\n    ...options,\n  } as HotkeySequenceRecorderOptions\n\n  const recorderRef = useRef<HotkeySequenceRecorder | null>(null)\n\n  if (!recorderRef.current) {\n    recorderRef.current = new HotkeySequenceRecorder(mergedOptions)\n  }\n\n  recorderRef.current.setOptions(mergedOptions)\n\n  const isRecording = useStore(\n    recorderRef.current.store,\n    (state) => state.isRecording,\n  )\n  const steps = useStore(recorderRef.current.store, (state) => state.steps)\n  const recordedSequence = useStore(\n    recorderRef.current.store,\n    (state) => state.recordedSequence,\n  )\n\n  useEffect(() => {\n    return () => {\n      recorderRef.current?.destroy()\n    }\n  }, [])\n\n  return {\n    isRecording,\n    steps,\n    recordedSequence,\n    startRecording: () => recorderRef.current?.start(),\n    stopRecording: () => recorderRef.current?.stop(),\n    cancelRecording: () => recorderRef.current?.cancel(),\n    commitRecording: () => recorderRef.current?.commit(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,0BACd,SAC6B;CAC7B,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,gCAAoD,KAAK;AAE/D,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,yCAAuB,cAAc;AAGjE,aAAY,QAAQ,WAAW,cAAc;CAE7C,MAAM,kDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,4CAAiB,YAAY,QAAQ,QAAQ,UAAU,MAAM,MAAM;CACzE,MAAM,uDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,iBAClB;AAED,4BAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACpD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}

package/dist/useHotkeySequenceRecorder.d.cts

@@ -0,0 +1,25 @@
+import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
+
+//#region src/useHotkeySequenceRecorder.d.ts
+interface ReactHotkeySequenceRecorder {
+  /** Whether recording is currently active */
+  isRecording: boolean;
+  /** Chords captured in the current session */
+  steps: HotkeySequence;
+  /** Last committed sequence */
+  recordedSequence: HotkeySequence | null;
+  startRecording: () => void;
+  stopRecording: () => void;
+  cancelRecording: () => void;
+  /** Commit current steps (no-op if empty) */
+  commitRecording: () => void;
+}
+/**
+ * React hook for recording multi-chord sequences (Vim-style shortcuts).
+ *
+ * @param options - Configuration options for the hotkey sequence recorder
+ */
+declare function useHotkeySequenceRecorder(options: HotkeySequenceRecorderOptions): ReactHotkeySequenceRecorder;
+//#endregion
+export { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder };
+//# sourceMappingURL=useHotkeySequenceRecorder.d.cts.map

package/dist/useHotkeySequenceRecorder.d.ts

@@ -0,0 +1,25 @@
+import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
+
+//#region src/useHotkeySequenceRecorder.d.ts
+interface ReactHotkeySequenceRecorder {
+  /** Whether recording is currently active */
+  isRecording: boolean;
+  /** Chords captured in the current session */
+  steps: HotkeySequence;
+  /** Last committed sequence */
+  recordedSequence: HotkeySequence | null;
+  startRecording: () => void;
+  stopRecording: () => void;
+  cancelRecording: () => void;
+  /** Commit current steps (no-op if empty) */
+  commitRecording: () => void;
+}
+/**
+ * React hook for recording multi-chord sequences (Vim-style shortcuts).
+ *
+ * @param options - Configuration options for the hotkey sequence recorder
+ */
+declare function useHotkeySequenceRecorder(options: HotkeySequenceRecorderOptions): ReactHotkeySequenceRecorder;
+//#endregion
+export { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder };
+//# sourceMappingURL=useHotkeySequenceRecorder.d.ts.map