@tanstack/vue-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

@@ -11,6 +11,7 @@ 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.provideHotkeysContext = require_HotkeysProviderContext.provideHotkeysContext;
@@ -18,6 +19,7 @@ exports.useDefaultHotkeysOptions = require_HotkeysProviderContext.useDefaultHotk
 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

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -10,7 +10,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, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
+export { HotkeysProvider, provideHotkeysContext, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };

package/dist/useHeldKeyCodes.cjs

@@ -29,7 +29,7 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 * ```
 */
 function useHeldKeyCodes() {
-	return (0, _tanstack_vue_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
+	return (0, _tanstack_vue_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/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref mapping 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 Reactive ref containing record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n * </script>\n *\n * <template>\n *   <div>\n *     <kbd v-for=\"key in heldKeys\" :key=\"key\">\n *       {{ key }} <small>{{ heldCodes[key] }}</small>\n *     </kbd>\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeyCodes(): Ref<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,kBAA+C;AAE7D,qFADoC,CACZ,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"useHeldKeyCodes.cjs","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref mapping 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 Reactive ref containing record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n * </script>\n *\n * <template>\n *   <div>\n *     <kbd v-for=\"key in heldKeys\" :key=\"key\">\n *       {{ key }} <small>{{ heldCodes[key] }}</small>\n *     </kbd>\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeyCodes(): Ref<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,kBAA+C;AAE7D,wFADoC,CACT,QAAQ,UAAU,MAAM,UAAU"}

package/dist/useHeldKeyCodes.js

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useStore } from "@tanstack/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHeldKeyCodes.ts
 /**
@@ -29,7 +29,7 @@ import { useStore } from "@tanstack/vue-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/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref mapping 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 Reactive ref containing record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n * </script>\n *\n * <template>\n *   <div>\n *     <kbd v-for=\"key in heldKeys\" :key=\"key\">\n *       {{ key }} <small>{{ heldCodes[key] }}</small>\n *     </kbd>\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeyCodes(): Ref<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,kBAA+C;AAE7D,QAAO,SADS,oBAAoB,CACZ,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"useHeldKeyCodes.js","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref mapping 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 Reactive ref containing record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n * </script>\n *\n * <template>\n *   <div>\n *     <kbd v-for=\"key in heldKeys\" :key=\"key\">\n *       {{ key }} <small>{{ heldCodes[key] }}</small>\n *     </kbd>\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeyCodes(): Ref<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,kBAA+C;AAE7D,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,UAAU"}

package/dist/useHeldKeys.cjs

@@ -5,7 +5,7 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 /**
 * Vue composable that returns a reactive ref of currently held keyboard keys.
 *
-* This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
 * to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
@@ -27,7 +27,7 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 * ```
 */
 function useHeldKeys() {
-	return (0, _tanstack_vue_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, _tanstack_vue_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/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref of currently held keyboard keys.\n *\n * This composable uses `useStore` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Reactive ref containing array of currently held key names\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * </script>\n *\n * <template>\n *   <div>\n *     Currently pressed: {{ heldKeys.join(' + ') || 'None' }}\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeys(): Ref<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,cAAkC;AAEhD,qFADoC,CACZ,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"useHeldKeys.cjs","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref of currently held keyboard keys.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Reactive ref containing array of currently held key names\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * </script>\n *\n * <template>\n *   <div>\n *     Currently pressed: {{ heldKeys.join(' + ') || 'None' }}\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeys(): Ref<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,cAAkC;AAEhD,wFADoC,CACT,QAAQ,UAAU,MAAM,SAAS"}

package/dist/useHeldKeys.d.cts

@@ -4,7 +4,7 @@ import { Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref of currently held keyboard keys.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
  * to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *

package/dist/useHeldKeys.d.ts

@@ -4,7 +4,7 @@ import { Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref of currently held keyboard keys.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-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/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHeldKeys.ts
 /**
 * Vue composable that returns a reactive ref of currently held keyboard keys.
 *
-* This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
 * to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
@@ -27,7 +27,7 @@ import { useStore } from "@tanstack/vue-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/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref of currently held keyboard keys.\n *\n * This composable uses `useStore` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Reactive ref containing array of currently held key names\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * </script>\n *\n * <template>\n *   <div>\n *     Currently pressed: {{ heldKeys.join(' + ') || 'None' }}\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeys(): Ref<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,cAAkC;AAEhD,QAAO,SADS,oBAAoB,CACZ,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"useHeldKeys.js","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Vue composable that returns a reactive ref of currently held keyboard keys.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Reactive ref containing array of currently held key names\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHeldKeys } from '@tanstack/vue-hotkeys'\n *\n * const heldKeys = useHeldKeys()\n * </script>\n *\n * <template>\n *   <div>\n *     Currently pressed: {{ heldKeys.join(' + ') || 'None' }}\n *   </div>\n * </template>\n * ```\n */\nexport function useHeldKeys(): Ref<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,cAAkC;AAEhD,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,SAAS"}

package/dist/useHotkeyHint.cjs

@@ -0,0 +1,20 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let vue = require("vue");
+let _tanstack_vue_store = require("@tanstack/vue-store");
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a computed ref indicating whether held modifiers reveal this shortcut.
+* Pass refs or getters to track changing bindings and options.
+* 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 = {}) {
+	const held = (0, _tanstack_vue_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, vue.computed)(() => (0, _tanstack_hotkeys.matchesHeldModifiers)((0, vue.toValue)(hotkey), held.value, (0, vue.toValue)(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 { computed, toValue } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed ref indicating whether held modifiers reveal this shortcut.\n * Pass refs or getters to track changing bindings and options.\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: MaybeRefOrGetter<RegisterableHotkey>,\n  options: MaybeRefOrGetter<HeldModifierOptions> = {},\n): ComputedRef<boolean> {\n  const held = useSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,cACd,QACA,UAAiD,EAAE,EAC7B;CACtB,MAAM,uFACgB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,6FAC+B,OAAO,EAAE,KAAK,wBAAe,QAAQ,CAAC,CACpE"}

package/dist/useHotkeyHint.d.cts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * 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: MaybeRefOrGetter<RegisterableHotkey>, options?: MaybeRefOrGetter<HeldModifierOptions>): ComputedRef<boolean>;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.cts.map

package/dist/useHotkeyHint.d.ts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeyHint.d.ts
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * 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: MaybeRefOrGetter<RegisterableHotkey>, options?: MaybeRefOrGetter<HeldModifierOptions>): ComputedRef<boolean>;
+//#endregion
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.d.ts.map

package/dist/useHotkeyHint.js

@@ -0,0 +1,20 @@
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+import { computed, toValue } from "vue";
+import { useSelector } from "@tanstack/vue-store";
+
+//#region src/useHotkeyHint.ts
+/**
+* Returns a computed ref indicating whether held modifiers reveal this shortcut.
+* Pass refs or getters to track changing bindings and options.
+* 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 = {}) {
+	const held = useSelector(getKeyStateTracker().store, (state) => state.heldKeys);
+	return computed(() => matchesHeldModifiers(toValue(hotkey), held.value, toValue(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 { computed, toValue } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ComputedRef, MaybeRefOrGetter } from 'vue'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed ref indicating whether held modifiers reveal this shortcut.\n * Pass refs or getters to track changing bindings and options.\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: MaybeRefOrGetter<RegisterableHotkey>,\n  options: MaybeRefOrGetter<HeldModifierOptions> = {},\n): ComputedRef<boolean> {\n  const held = useSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,cACd,QACA,UAAiD,EAAE,EAC7B;CACtB,MAAM,OAAO,YACX,oBAAoB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,QAAO,eACL,qBAAqB,QAAQ,OAAO,EAAE,KAAK,OAAO,QAAQ,QAAQ,CAAC,CACpE"}

package/dist/useHotkeyRecorder.cjs

@@ -48,8 +48,8 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 function useHotkeyRecorder(options) {
 	const defaultOptions = require_HotkeysProviderContext.useDefaultHotkeysOptions();
 	const recorder = new _tanstack_hotkeys.HotkeyRecorder(resolveRecorderOptions(options, defaultOptions));
-	const isRecording = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.isRecording);
-	const recordedHotkey = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.recordedHotkey);
+	const isRecording = (0, _tanstack_vue_store.useSelector)(recorder.store, (state) => state.isRecording);
+	const recordedHotkey = (0, _tanstack_vue_store.useSelector)(recorder.store, (state) => state.recordedHotkey);
 	const stopWatcher = (0, vue.watch)(() => resolveRecorderOptions(options, defaultOptions), (resolvedOptions) => {
 		recorder.setOptions(resolvedOptions);
 	}, { immediate: true });

package/dist/useHotkeyRecorder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface VueHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: Ref<boolean>\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Ref<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 * Vue composable for recording keyboard shortcuts.\n *\n * This composable 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 * ```vue\n * <script setup>\n * import { ref } from 'vue'\n * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'\n *\n * const shortcut = ref<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n *   onRecord: (hotkey) => {\n *     shortcut.value = hotkey\n *   },\n *   onCancel: () => {\n *     console.log('Recording cancelled')\n *   },\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <button @click=\"recorder.startRecording()\">\n *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}\n *     </button>\n *     <div v-if=\"recorder.recordedHotkey\">\n *       Recording: {{ recorder.recordedHotkey }}\n *     </div>\n *   </div>\n * </template>\n * ```\n */\nexport function useHotkeyRecorder(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n): VueHotkeyRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeyRecorder(\n    resolveRecorderOptions(options, defaultOptions),\n  )\n\n  // Subscribe to recorder state using useStore\n  const isRecording = useStore(recorder.store, (state) => state.isRecording)\n  const recordedHotkey = useStore(\n    recorder.store,\n    (state) => state.recordedHotkey,\n  )\n\n  const stopWatcher = watch(\n    () => resolveRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    recordedHotkey: recordedHotkey as Ref<Hotkey | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n  }\n}\n\nfunction resolveRecorderOptions(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeyRecorderOptions {\n  return {\n    ...defaultOptions.hotkeyRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeyRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,kBACd,SACmB;CACnB,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,WAAW,IAAIC,iCACnB,uBAAuB,SAAS,eAAe,CAChD;CAGD,MAAM,gDAAuB,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,mDACJ,SAAS,QACR,UAAU,MAAM,eAClB;CAED,MAAM,mCACE,uBAAuB,SAAS,eAAe,GACpD,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAGD,4BAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACG;EAChB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,uBACP,SACA,gBACuB;AACvB,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}
+{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface VueHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: Ref<boolean>\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Ref<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 * Vue composable for recording keyboard shortcuts.\n *\n * This composable 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 * ```vue\n * <script setup>\n * import { ref } from 'vue'\n * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'\n *\n * const shortcut = ref<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n *   onRecord: (hotkey) => {\n *     shortcut.value = hotkey\n *   },\n *   onCancel: () => {\n *     console.log('Recording cancelled')\n *   },\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <button @click=\"recorder.startRecording()\">\n *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}\n *     </button>\n *     <div v-if=\"recorder.recordedHotkey\">\n *       Recording: {{ recorder.recordedHotkey }}\n *     </div>\n *   </div>\n * </template>\n * ```\n */\nexport function useHotkeyRecorder(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n): VueHotkeyRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeyRecorder(\n    resolveRecorderOptions(options, defaultOptions),\n  )\n\n  // Subscribe to recorder state using useSelector\n  const isRecording = useSelector(recorder.store, (state) => state.isRecording)\n  const recordedHotkey = useSelector(\n    recorder.store,\n    (state) => state.recordedHotkey,\n  )\n\n  const stopWatcher = watch(\n    () => resolveRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    recordedHotkey: recordedHotkey as Ref<Hotkey | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n  }\n}\n\nfunction resolveRecorderOptions(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeyRecorderOptions {\n  return {\n    ...defaultOptions.hotkeyRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeyRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,kBACd,SACmB;CACnB,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,WAAW,IAAIC,iCACnB,uBAAuB,SAAS,eAAe,CAChD;CAGD,MAAM,mDAA0B,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC7E,MAAM,sDACJ,SAAS,QACR,UAAU,MAAM,eAClB;CAED,MAAM,mCACE,uBAAuB,SAAS,eAAe,GACpD,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAGD,4BAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACG;EAChB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,uBACP,SACA,gBACuB;AACvB,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,7 @@
 import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { onUnmounted, unref, watch } from "vue";
-import { useStore } from "@tanstack/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyRecorder.ts
 /**
@@ -48,8 +48,8 @@ import { useStore } from "@tanstack/vue-store";
 function useHotkeyRecorder(options) {
 	const defaultOptions = useDefaultHotkeysOptions();
 	const recorder = new HotkeyRecorder(resolveRecorderOptions(options, defaultOptions));
-	const isRecording = useStore(recorder.store, (state) => state.isRecording);
-	const recordedHotkey = useStore(recorder.store, (state) => state.recordedHotkey);
+	const isRecording = useSelector(recorder.store, (state) => state.isRecording);
+	const recordedHotkey = useSelector(recorder.store, (state) => state.recordedHotkey);
 	const stopWatcher = watch(() => resolveRecorderOptions(options, defaultOptions), (resolvedOptions) => {
 		recorder.setOptions(resolvedOptions);
 	}, { immediate: true });

package/dist/useHotkeyRecorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface VueHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: Ref<boolean>\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Ref<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 * Vue composable for recording keyboard shortcuts.\n *\n * This composable 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 * ```vue\n * <script setup>\n * import { ref } from 'vue'\n * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'\n *\n * const shortcut = ref<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n *   onRecord: (hotkey) => {\n *     shortcut.value = hotkey\n *   },\n *   onCancel: () => {\n *     console.log('Recording cancelled')\n *   },\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <button @click=\"recorder.startRecording()\">\n *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}\n *     </button>\n *     <div v-if=\"recorder.recordedHotkey\">\n *       Recording: {{ recorder.recordedHotkey }}\n *     </div>\n *   </div>\n * </template>\n * ```\n */\nexport function useHotkeyRecorder(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n): VueHotkeyRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeyRecorder(\n    resolveRecorderOptions(options, defaultOptions),\n  )\n\n  // Subscribe to recorder state using useStore\n  const isRecording = useStore(recorder.store, (state) => state.isRecording)\n  const recordedHotkey = useStore(\n    recorder.store,\n    (state) => state.recordedHotkey,\n  )\n\n  const stopWatcher = watch(\n    () => resolveRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    recordedHotkey: recordedHotkey as Ref<Hotkey | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n  }\n}\n\nfunction resolveRecorderOptions(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeyRecorderOptions {\n  return {\n    ...defaultOptions.hotkeyRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeyRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,kBACd,SACmB;CACnB,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,WAAW,IAAI,eACnB,uBAAuB,SAAS,eAAe,CAChD;CAGD,MAAM,cAAc,SAAS,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,iBAAiB,SACrB,SAAS,QACR,UAAU,MAAM,eAClB;CAED,MAAM,cAAc,YACZ,uBAAuB,SAAS,eAAe,GACpD,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAGD,mBAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACG;EAChB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,uBACP,SACA,gBACuB;AACvB,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}
+{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface VueHotkeyRecorder {\n  /** Whether recording is currently active */\n  isRecording: Ref<boolean>\n  /** The currently recorded hotkey (for live preview) */\n  recordedHotkey: Ref<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 * Vue composable for recording keyboard shortcuts.\n *\n * This composable 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 * ```vue\n * <script setup>\n * import { ref } from 'vue'\n * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'\n *\n * const shortcut = ref<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n *   onRecord: (hotkey) => {\n *     shortcut.value = hotkey\n *   },\n *   onCancel: () => {\n *     console.log('Recording cancelled')\n *   },\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <button @click=\"recorder.startRecording()\">\n *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}\n *     </button>\n *     <div v-if=\"recorder.recordedHotkey\">\n *       Recording: {{ recorder.recordedHotkey }}\n *     </div>\n *   </div>\n * </template>\n * ```\n */\nexport function useHotkeyRecorder(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n): VueHotkeyRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeyRecorder(\n    resolveRecorderOptions(options, defaultOptions),\n  )\n\n  // Subscribe to recorder state using useSelector\n  const isRecording = useSelector(recorder.store, (state) => state.isRecording)\n  const recordedHotkey = useSelector(\n    recorder.store,\n    (state) => state.recordedHotkey,\n  )\n\n  const stopWatcher = watch(\n    () => resolveRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    recordedHotkey: recordedHotkey as Ref<Hotkey | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n  }\n}\n\nfunction resolveRecorderOptions(\n  options: MaybeRefOrGetter<HotkeyRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeyRecorderOptions {\n  return {\n    ...defaultOptions.hotkeyRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeyRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,kBACd,SACmB;CACnB,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,WAAW,IAAI,eACnB,uBAAuB,SAAS,eAAe,CAChD;CAGD,MAAM,cAAc,YAAY,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC7E,MAAM,iBAAiB,YACrB,SAAS,QACR,UAAU,MAAM,eAClB;CAED,MAAM,cAAc,YACZ,uBAAuB,SAAS,eAAe,GACpD,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAGD,mBAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACG;EAChB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,uBACP,SACA,gBACuB;AACvB,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}

package/dist/useHotkeyRegistrations.cjs

@@ -16,8 +16,8 @@ function useHotkeyRegistrations() {
 	const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
 	const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
 	return {
-		hotkeys: (0, _tanstack_vue_store.useStore)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
-		sequences: (0, _tanstack_vue_store.useStore)(sequenceManager.registrations, (state) => Array.from(state.values()))
+		hotkeys: (0, _tanstack_vue_store.useSelector)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
+		sequences: (0, _tanstack_vue_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/vue-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Ref<Array<HotkeyRegistrationView>>\n  /** All registered sequences */\n  sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\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":";;;;;;;;;;;;;;AAgCA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,2CARgB,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,6CAJS,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/vue-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Ref<Array<HotkeyRegistrationView>>\n  /** All registered sequences */\n  sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\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":";;;;;;;;;;;;;;AAgCA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,8CARmB,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,gDAJY,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/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeyRegistrations.ts
 /**
@@ -16,8 +16,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/vue-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Ref<Array<HotkeyRegistrationView>>\n  /** All registered sequences */\n  sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\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":";;;;;;;;;;;;;;AAgCA,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/vue-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Ref } from 'vue'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** All registered hotkeys (public view, no callbacks) */\n  hotkeys: Ref<Array<HotkeyRegistrationView>>\n  /** All registered sequences */\n  sequences: Ref<Array<SequenceRegistrationView>>\n}\n\n/**\n * Vue composable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone composable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers reactivity when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` refs\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":";;;;;;;;;;;;;;AAgCA,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/useHotkeySequenceRecorder.cjs

@@ -10,9 +10,9 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 function useHotkeySequenceRecorder(options) {
 	const defaultOptions = require_HotkeysProviderContext.useDefaultHotkeysOptions();
 	const recorder = new _tanstack_hotkeys.HotkeySequenceRecorder(resolveHotkeySequenceRecorderOptions(options, defaultOptions));
-	const isRecording = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.isRecording);
-	const steps = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.steps);
-	const recordedSequence = (0, _tanstack_vue_store.useStore)(recorder.store, (state) => state.recordedSequence);
+	const isRecording = (0, _tanstack_vue_store.useSelector)(recorder.store, (state) => state.isRecording);
+	const steps = (0, _tanstack_vue_store.useSelector)(recorder.store, (state) => state.steps);
+	const recordedSequence = (0, _tanstack_vue_store.useSelector)(recorder.store, (state) => state.recordedSequence);
 	const stopWatcher = (0, vue.watch)(() => resolveHotkeySequenceRecorderOptions(options, defaultOptions), (resolvedOptions) => {
 		recorder.setOptions(resolvedOptions);
 	}, { immediate: true });

package/dist/useHotkeySequenceRecorder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n  HotkeySequence,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n  isRecording: Ref<boolean>\n  steps: Ref<HotkeySequence>\n  recordedSequence: Ref<HotkeySequence | null>\n  startRecording: () => void\n  stopRecording: () => void\n  cancelRecording: () => void\n  commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeySequenceRecorder(\n    resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n  )\n\n  const isRecording = useStore(recorder.store, (state) => state.isRecording)\n  const steps = useStore(recorder.store, (state) => state.steps)\n  const recordedSequence = useStore(\n    recorder.store,\n    (state) => state.recordedSequence,\n  )\n\n  const stopWatcher = watch(\n    () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    steps: steps as Ref<HotkeySequence>,\n    recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n    commitRecording: () => recorder.commit(),\n  }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n  return {\n    ...defaultOptions.hotkeySequenceRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,WAAW,IAAIC,yCACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,gDAAuB,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,0CAAiB,SAAS,QAAQ,UAAU,MAAM,MAAM;CAC9D,MAAM,qDACJ,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,mCACE,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,4BAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}
+{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n  HotkeySequence,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n  isRecording: Ref<boolean>\n  steps: Ref<HotkeySequence>\n  recordedSequence: Ref<HotkeySequence | null>\n  startRecording: () => void\n  stopRecording: () => void\n  cancelRecording: () => void\n  commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeySequenceRecorder(\n    resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n  )\n\n  const isRecording = useSelector(recorder.store, (state) => state.isRecording)\n  const steps = useSelector(recorder.store, (state) => state.steps)\n  const recordedSequence = useSelector(\n    recorder.store,\n    (state) => state.recordedSequence,\n  )\n\n  const stopWatcher = watch(\n    () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    steps: steps as Ref<HotkeySequence>,\n    recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n    commitRecording: () => recorder.commit(),\n  }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n  return {\n    ...defaultOptions.hotkeySequenceRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,WAAW,IAAIC,yCACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,mDAA0B,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC7E,MAAM,6CAAoB,SAAS,QAAQ,UAAU,MAAM,MAAM;CACjE,MAAM,wDACJ,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,mCACE,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,4BAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}

package/dist/useHotkeySequenceRecorder.js

@@ -1,7 +1,7 @@
 import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
 import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
 import { onUnmounted, unref, watch } from "vue";
-import { useStore } from "@tanstack/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useHotkeySequenceRecorder.ts
 /**
@@ -10,9 +10,9 @@ import { useStore } from "@tanstack/vue-store";
 function useHotkeySequenceRecorder(options) {
 	const defaultOptions = useDefaultHotkeysOptions();
 	const recorder = new HotkeySequenceRecorder(resolveHotkeySequenceRecorderOptions(options, defaultOptions));
-	const isRecording = useStore(recorder.store, (state) => state.isRecording);
-	const steps = useStore(recorder.store, (state) => state.steps);
-	const recordedSequence = useStore(recorder.store, (state) => state.recordedSequence);
+	const isRecording = useSelector(recorder.store, (state) => state.isRecording);
+	const steps = useSelector(recorder.store, (state) => state.steps);
+	const recordedSequence = useSelector(recorder.store, (state) => state.recordedSequence);
 	const stopWatcher = watch(() => resolveHotkeySequenceRecorderOptions(options, defaultOptions), (resolvedOptions) => {
 		recorder.setOptions(resolvedOptions);
 	}, { immediate: true });

package/dist/useHotkeySequenceRecorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useStore } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n  HotkeySequence,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n  isRecording: Ref<boolean>\n  steps: Ref<HotkeySequence>\n  recordedSequence: Ref<HotkeySequence | null>\n  startRecording: () => void\n  stopRecording: () => void\n  cancelRecording: () => void\n  commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeySequenceRecorder(\n    resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n  )\n\n  const isRecording = useStore(recorder.store, (state) => state.isRecording)\n  const steps = useStore(recorder.store, (state) => state.steps)\n  const recordedSequence = useStore(\n    recorder.store,\n    (state) => state.recordedSequence,\n  )\n\n  const stopWatcher = watch(\n    () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    steps: steps as Ref<HotkeySequence>,\n    recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n    commitRecording: () => recorder.commit(),\n  }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n  return {\n    ...defaultOptions.hotkeySequenceRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,WAAW,IAAI,uBACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,cAAc,SAAS,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC1E,MAAM,QAAQ,SAAS,SAAS,QAAQ,UAAU,MAAM,MAAM;CAC9D,MAAM,mBAAmB,SACvB,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,cAAc,YACZ,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,mBAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}
+{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { useSelector } from '@tanstack/vue-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type {\n  HotkeySequence,\n  HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface VueHotkeySequenceRecorder {\n  isRecording: Ref<boolean>\n  steps: Ref<HotkeySequence>\n  recordedSequence: Ref<HotkeySequence | null>\n  startRecording: () => void\n  stopRecording: () => void\n  cancelRecording: () => void\n  commitRecording: () => void\n}\n\n/**\n * Vue composable for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n): VueHotkeySequenceRecorder {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const recorder = new HotkeySequenceRecorder(\n    resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n  )\n\n  const isRecording = useSelector(recorder.store, (state) => state.isRecording)\n  const steps = useSelector(recorder.store, (state) => state.steps)\n  const recordedSequence = useSelector(\n    recorder.store,\n    (state) => state.recordedSequence,\n  )\n\n  const stopWatcher = watch(\n    () => resolveHotkeySequenceRecorderOptions(options, defaultOptions),\n    (resolvedOptions) => {\n      recorder.setOptions(resolvedOptions)\n    },\n    { immediate: true },\n  )\n\n  onUnmounted(() => {\n    stopWatcher()\n    recorder.destroy()\n  })\n\n  return {\n    isRecording: isRecording as Ref<boolean>,\n    steps: steps as Ref<HotkeySequence>,\n    recordedSequence: recordedSequence as Ref<HotkeySequence | null>,\n    startRecording: () => recorder.start(),\n    stopRecording: () => recorder.stop(),\n    cancelRecording: () => recorder.cancel(),\n    commitRecording: () => recorder.commit(),\n  }\n}\n\nfunction resolveHotkeySequenceRecorderOptions(\n  options: MaybeRefOrGetter<HotkeySequenceRecorderOptions>,\n  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,\n): HotkeySequenceRecorderOptions {\n  return {\n    ...defaultOptions.hotkeySequenceRecorder,\n    ...resolveMaybeRefOrGetter(options),\n  } as HotkeySequenceRecorderOptions\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,0BACd,SAC2B;CAC3B,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,WAAW,IAAI,uBACnB,qCAAqC,SAAS,eAAe,CAC9D;CAED,MAAM,cAAc,YAAY,SAAS,QAAQ,UAAU,MAAM,YAAY;CAC7E,MAAM,QAAQ,YAAY,SAAS,QAAQ,UAAU,MAAM,MAAM;CACjE,MAAM,mBAAmB,YACvB,SAAS,QACR,UAAU,MAAM,iBAClB;CAED,MAAM,cAAc,YACZ,qCAAqC,SAAS,eAAe,GAClE,oBAAoB;AACnB,WAAS,WAAW,gBAAgB;IAEtC,EAAE,WAAW,MAAM,CACpB;AAED,mBAAkB;AAChB,eAAa;AACb,WAAS,SAAS;GAClB;AAEF,QAAO;EACQ;EACN;EACW;EAClB,sBAAsB,SAAS,OAAO;EACtC,qBAAqB,SAAS,MAAM;EACpC,uBAAuB,SAAS,QAAQ;EACxC,uBAAuB,SAAS,QAAQ;EACzC;;AAGH,SAAS,qCACP,SACA,gBAC+B;AAC/B,QAAO;EACL,GAAG,eAAe;EAClB,GAAG,wBAAwB,QAAQ;EACpC;;AAGH,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}

package/dist/useKeyHold.cjs

@@ -6,7 +6,7 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 /**
 * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
 *
-* This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
 * to the global KeyStateTracker and uses a selector to determine if
 * the specified key is held.
 *
@@ -48,7 +48,7 @@ let _tanstack_vue_store = require("@tanstack/vue-store");
 * ```
 */
 function useKeyHold(key) {
-	return (0, _tanstack_vue_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => {
+	return (0, _tanstack_vue_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => {
 		const keyValue = (0, vue.unref)(key);
 		const normalizedKey = (typeof keyValue === "string" ? keyValue : String(keyValue)).toLowerCase();
 		return state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);

package/dist/useKeyHold.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useStore` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n *   <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n *     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n *   </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n *   <div>\n *     <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n *     <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n *     <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n  const tracker = getKeyStateTracker()\n\n  const isHeld = useStore(tracker.store, (state) => {\n    const keyValue = unref(key)\n    const normalizedKey = (\n      typeof keyValue === 'string' ? keyValue : String(keyValue)\n    ).toLowerCase()\n    return state.heldKeys.some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n\n  return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,qFAZoC,CAEJ,QAAQ,UAAU;EAChD,MAAM,0BAAiB,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
+{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n *   <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n *     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n *   </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n *   <div>\n *     <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n *     <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n *     <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n  const tracker = getKeyStateTracker()\n\n  const isHeld = useSelector(tracker.store, (state) => {\n    const keyValue = unref(key)\n    const normalizedKey = (\n      typeof keyValue === 'string' ? keyValue : String(keyValue)\n    ).toLowerCase()\n    return state.heldKeys.some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n\n  return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,wFAZoC,CAED,QAAQ,UAAU;EACnD,MAAM,0BAAiB,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}

package/dist/useKeyHold.d.cts

@@ -5,7 +5,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
  * to the global KeyStateTracker and uses a selector to determine if
  * the specified key is held.
  *

package/dist/useKeyHold.d.ts

@@ -5,7 +5,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
 /**
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
  * to the global KeyStateTracker and uses a selector to determine if
  * the specified key is held.
  *

package/dist/useKeyHold.js

@@ -1,12 +1,12 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 import { unref } from "vue";
-import { useStore } from "@tanstack/vue-store";
+import { useSelector } from "@tanstack/vue-store";
 
 //#region src/useKeyHold.ts
 /**
 * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
 *
-* This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+* This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
 * to the global KeyStateTracker and uses a selector to determine if
 * the specified key is held.
 *
@@ -48,7 +48,7 @@ import { useStore } from "@tanstack/vue-store";
 * ```
 */
 function useKeyHold(key) {
-	return useStore(getKeyStateTracker().store, (state) => {
+	return useSelector(getKeyStateTracker().store, (state) => {
 		const keyValue = unref(key);
 		const normalizedKey = (typeof keyValue === "string" ? keyValue : String(keyValue)).toLowerCase();
 		return state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);

package/dist/useKeyHold.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useStore` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n *   <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n *     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n *   </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n *   <div>\n *     <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n *     <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n *     <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n  const tracker = getKeyStateTracker()\n\n  const isHeld = useStore(tracker.store, (state) => {\n    const keyValue = unref(key)\n    const normalizedKey = (\n      typeof keyValue === 'string' ? keyValue : String(keyValue)\n    ).toLowerCase()\n    return state.heldKeys.some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n\n  return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,QAVe,SAFC,oBAAoB,CAEJ,QAAQ,UAAU;EAChD,MAAM,WAAW,MAAM,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
+{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/vue-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { unref } from 'vue'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.\n *\n * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns Reactive ref that is true if the key is currently held down\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const isShiftHeld = useKeyHold('Shift')\n * </script>\n *\n * <template>\n *   <div :style=\"{ opacity: isShiftHeld ? 1 : 0.5 }\">\n *     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}\n *   </div>\n * </template>\n * ```\n *\n * @example\n * ```vue\n * <script setup>\n * import { useKeyHold } from '@tanstack/vue-hotkeys'\n *\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n * </script>\n *\n * <template>\n *   <div>\n *     <span :style=\"{ opacity: ctrl ? 1 : 0.3 }\">Ctrl</span>\n *     <span :style=\"{ opacity: shift ? 1 : 0.3 }\">Shift</span>\n *     <span :style=\"{ opacity: alt ? 1 : 0.3 }\">Alt</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {\n  const tracker = getKeyStateTracker()\n\n  const isHeld = useSelector(tracker.store, (state) => {\n    const keyValue = unref(key)\n    const normalizedKey = (\n      typeof keyValue === 'string' ? keyValue : String(keyValue)\n    ).toLowerCase()\n    return state.heldKeys.some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n\n  return isHeld as Ref<boolean>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,WAAW,KAAoD;AAa7E,QAVe,YAFC,oBAAoB,CAED,QAAQ,UAAU;EACnD,MAAM,WAAW,MAAM,IAAI;EAC3B,MAAM,iBACJ,OAAO,aAAa,WAAW,WAAW,OAAO,SAAS,EAC1D,aAAa;AACf,SAAO,MAAM,SAAS,MACnB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Vue adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -42,13 +42,13 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.9.3",
-    "@tanstack/hotkeys": "0.7.1"
+    "@tanstack/vue-store": "^0.11.0",
+    "@tanstack/hotkeys": "0.9.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/test-utils": "^2.4.6",
-    "vue": "^3.5.31"
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.8",
+    "vue": "^3.5.33"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"

package/src/index.ts

@@ -16,3 +16,4 @@ export * from './useHotkeySequences'
 export * from './useHotkeyRecorder'
 export * from './useHotkeyRegistrations'
 export * from './useHotkeySequenceRecorder'
+export * from './useHotkeyHint'

package/src/useHeldKeyCodes.ts

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import type { Ref } from 'vue'
 
@@ -30,5 +30,5 @@ import type { Ref } from 'vue'
  */
 export function useHeldKeyCodes(): Ref<Record<string, string>> {
   const tracker = getKeyStateTracker()
-  return useStore(tracker.store, (state) => state.heldCodes)
+  return useSelector(tracker.store, (state) => state.heldCodes)
 }

package/src/useHeldKeys.ts

@@ -1,11 +1,11 @@
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import type { Ref } from 'vue'
 
 /**
  * Vue composable that returns a reactive ref of currently held keyboard keys.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
  * to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *
@@ -28,5 +28,5 @@ import type { Ref } from 'vue'
  */
 export function useHeldKeys(): Ref<Array<string>> {
   const tracker = getKeyStateTracker()
-  return useStore(tracker.store, (state) => state.heldKeys)
+  return useSelector(tracker.store, (state) => state.heldKeys)
 }

package/src/useHotkeyHint.ts

@@ -0,0 +1,25 @@
+import { computed, toValue } from 'vue'
+import { useSelector } from '@tanstack/vue-store'
+import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'
+
+/**
+ * Returns a computed ref indicating whether held modifiers reveal this shortcut.
+ * Pass refs or getters to track changing bindings and options.
+ * 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.
+ */
+export function useHotkeyHint(
+  hotkey: MaybeRefOrGetter<RegisterableHotkey>,
+  options: MaybeRefOrGetter<HeldModifierOptions> = {},
+): ComputedRef<boolean> {
+  const held = useSelector(
+    getKeyStateTracker().store,
+    (state) => state.heldKeys,
+  )
+  return computed(() =>
+    matchesHeldModifiers(toValue(hotkey), held.value, toValue(options)),
+  )
+}

package/src/useHotkeyRecorder.ts

@@ -1,5 +1,5 @@
 import { onUnmounted, unref, watch } from 'vue'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { HotkeyRecorder } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProviderContext'
 import type { MaybeRefOrGetter, Ref } from 'vue'
@@ -67,9 +67,9 @@ export function useHotkeyRecorder(
     resolveRecorderOptions(options, defaultOptions),
   )
 
-  // Subscribe to recorder state using useStore
-  const isRecording = useStore(recorder.store, (state) => state.isRecording)
-  const recordedHotkey = useStore(
+  // Subscribe to recorder state using useSelector
+  const isRecording = useSelector(recorder.store, (state) => state.isRecording)
+  const recordedHotkey = useSelector(
     recorder.store,
     (state) => state.recordedHotkey,
   )

package/src/useHotkeyRegistrations.ts

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import {
   getHotkeyManager,
   getSequenceManager,
@@ -34,11 +34,11 @@ export function useHotkeyRegistrations(): HotkeyRegistrationsResult {
   const hotkeyManager = getHotkeyManager()
   const sequenceManager = getSequenceManager()
 
-  const hotkeys = useStore(hotkeyManager.registrations, (state) =>
+  const hotkeys = useSelector(hotkeyManager.registrations, (state) =>
     Array.from(state.values()).map(toHotkeyRegistrationView),
   )
 
-  const sequences = useStore(sequenceManager.registrations, (state) =>
+  const sequences = useSelector(sequenceManager.registrations, (state) =>
     Array.from(state.values()),
   )
 

package/src/useHotkeySequenceRecorder.ts

@@ -1,5 +1,5 @@
 import { onUnmounted, unref, watch } from 'vue'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { HotkeySequenceRecorder } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProviderContext'
 import type { MaybeRefOrGetter, Ref } from 'vue'
@@ -29,9 +29,9 @@ export function useHotkeySequenceRecorder(
     resolveHotkeySequenceRecorderOptions(options, defaultOptions),
   )
 
-  const isRecording = useStore(recorder.store, (state) => state.isRecording)
-  const steps = useStore(recorder.store, (state) => state.steps)
-  const recordedSequence = useStore(
+  const isRecording = useSelector(recorder.store, (state) => state.isRecording)
+  const steps = useSelector(recorder.store, (state) => state.steps)
+  const recordedSequence = useSelector(
     recorder.store,
     (state) => state.recordedSequence,
   )

package/src/useKeyHold.ts

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from '@tanstack/vue-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import { unref } from 'vue'
 import type { MaybeRefOrGetter, Ref } from 'vue'
@@ -7,7 +7,7 @@ import type { IndividualKey } from '@tanstack/hotkeys'
 /**
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
  *
- * This composable uses `useStore` from `@tanstack/vue-store` to subscribe
+ * This composable uses `useSelector` from `@tanstack/vue-store` to subscribe
  * to the global KeyStateTracker and uses a selector to determine if
  * the specified key is held.
  *
@@ -51,7 +51,7 @@ import type { IndividualKey } from '@tanstack/hotkeys'
 export function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {
   const tracker = getKeyStateTracker()
 
-  const isHeld = useStore(tracker.store, (state) => {
+  const isHeld = useSelector(tracker.store, (state) => {
     const keyValue = unref(key)
     const normalizedKey = (
       typeof keyValue === 'string' ? keyValue : String(keyValue)