@tanstack/vue-hotkeys 0.8.3 → 0.9.0

package/README.md

@@ -58,6 +58,7 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 > - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
 > - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
 > - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
+> - [**Lit Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/lit/reference)
 > - [**Svelte Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/svelte/reference)
 
 ## Get Involved

package/dist/HotkeysProvider.d.cts

@@ -1,5 +1,5 @@
 import { HotkeysProviderOptions } from "./HotkeysProviderContext.cjs";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/HotkeysProvider.d.ts
 /**
@@ -14,21 +14,21 @@ import * as vue from "vue";
  * </template>
  * ```
  */
-declare const HotkeysProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+declare const HotkeysProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   defaultOptions: {
     type: () => HotkeysProviderOptions;
     default: undefined;
   };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
   defaultOptions: {
     type: () => HotkeysProviderOptions;
     default: undefined;
   };
 }>> & Readonly<{}>, {
   defaultOptions: HotkeysProviderOptions;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { HotkeysProvider };
 //# sourceMappingURL=HotkeysProvider.d.cts.map

package/dist/HotkeysProvider.d.ts

@@ -1,5 +1,5 @@
 import { HotkeysProviderOptions } from "./HotkeysProviderContext.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/HotkeysProvider.d.ts
 /**
@@ -14,21 +14,21 @@ import * as vue from "vue";
  * </template>
  * ```
  */
-declare const HotkeysProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+declare const HotkeysProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   defaultOptions: {
     type: () => HotkeysProviderOptions;
     default: undefined;
   };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
   defaultOptions: {
     type: () => HotkeysProviderOptions;
     default: undefined;
   };
 }>> & Readonly<{}>, {
   defaultOptions: HotkeysProviderOptions;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { HotkeysProvider };
 //# sourceMappingURL=HotkeysProvider.d.ts.map

package/dist/index.cjs

@@ -9,6 +9,7 @@ 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_useHotkeyRegistrations = require('./useHotkeyRegistrations.cjs');
 const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
 
 exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
@@ -18,6 +19,7 @@ exports.useHeldKeyCodes = require_useHeldKeyCodes.useHeldKeyCodes;
 exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
 exports.useHotkey = require_useHotkey.useHotkey;
 exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
+exports.useHotkeyRegistrations = require_useHotkeyRegistrations.useHotkeyRegistrations;
 exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
 exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
 exports.useHotkeySequences = require_useHotkeySequences.useHotkeySequences;

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/useHotkeyRegistrations.cjs

@@ -0,0 +1,26 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let _tanstack_vue_store = require("@tanstack/vue-store");
+
+//#region src/useHotkeyRegistrations.ts
+/**
+* Vue composable that reactively reads all hotkey and sequence registrations
+* from the singleton managers.
+*
+* This is a standalone composable that does NOT require the HotkeysProvider.
+* It subscribes to both HotkeyManager and SequenceManager stores and
+* triggers reactivity when registrations change.
+*
+* @returns Object with `hotkeys` and `sequences` refs
+*/
+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()))
+	};
+}
+
+//#endregion
+exports.useHotkeyRegistrations = useHotkeyRegistrations;
+//# sourceMappingURL=useHotkeyRegistrations.cjs.map

package/dist/useHotkeyRegistrations.cjs.map

@@ -0,0 +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"}

package/dist/useHotkeyRegistrations.d.cts

@@ -0,0 +1,27 @@
+import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
+import { Ref } from "vue";
+
+//#region src/useHotkeyRegistrations.d.ts
+/**
+ * Return type for useHotkeyRegistrations.
+ */
+interface HotkeyRegistrationsResult {
+  /** All registered hotkeys (public view, no callbacks) */
+  hotkeys: Ref<Array<HotkeyRegistrationView>>;
+  /** All registered sequences */
+  sequences: Ref<Array<SequenceRegistrationView>>;
+}
+/**
+ * Vue composable that reactively reads all hotkey and sequence registrations
+ * from the singleton managers.
+ *
+ * This is a standalone composable that does NOT require the HotkeysProvider.
+ * It subscribes to both HotkeyManager and SequenceManager stores and
+ * triggers reactivity when registrations change.
+ *
+ * @returns Object with `hotkeys` and `sequences` refs
+ */
+declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
+//#endregion
+export { HotkeyRegistrationsResult, useHotkeyRegistrations };
+//# sourceMappingURL=useHotkeyRegistrations.d.cts.map

package/dist/useHotkeyRegistrations.d.ts

@@ -0,0 +1,27 @@
+import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
+import { Ref } from "vue";
+
+//#region src/useHotkeyRegistrations.d.ts
+/**
+ * Return type for useHotkeyRegistrations.
+ */
+interface HotkeyRegistrationsResult {
+  /** All registered hotkeys (public view, no callbacks) */
+  hotkeys: Ref<Array<HotkeyRegistrationView>>;
+  /** All registered sequences */
+  sequences: Ref<Array<SequenceRegistrationView>>;
+}
+/**
+ * Vue composable that reactively reads all hotkey and sequence registrations
+ * from the singleton managers.
+ *
+ * This is a standalone composable that does NOT require the HotkeysProvider.
+ * It subscribes to both HotkeyManager and SequenceManager stores and
+ * triggers reactivity when registrations change.
+ *
+ * @returns Object with `hotkeys` and `sequences` refs
+ */
+declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
+//#endregion
+export { HotkeyRegistrationsResult, useHotkeyRegistrations };
+//# sourceMappingURL=useHotkeyRegistrations.d.ts.map

package/dist/useHotkeyRegistrations.js

@@ -0,0 +1,26 @@
+import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
+import { useStore } from "@tanstack/vue-store";
+
+//#region src/useHotkeyRegistrations.ts
+/**
+* Vue composable that reactively reads all hotkey and sequence registrations
+* from the singleton managers.
+*
+* This is a standalone composable that does NOT require the HotkeysProvider.
+* It subscribes to both HotkeyManager and SequenceManager stores and
+* triggers reactivity when registrations change.
+*
+* @returns Object with `hotkeys` and `sequences` refs
+*/
+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()))
+	};
+}
+
+//#endregion
+export { useHotkeyRegistrations };
+//# sourceMappingURL=useHotkeyRegistrations.js.map

package/dist/useHotkeyRegistrations.js.map

@@ -0,0 +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"}

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 { HeldKey } 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<HeldKey>): 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,KAA8C;AAavE,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 { 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"}

package/dist/useKeyHold.d.cts

@@ -1,4 +1,4 @@
-import { HeldKey } from "@tanstack/hotkeys";
+import { IndividualKey } from "@tanstack/hotkeys";
 import { MaybeRefOrGetter, Ref } from "vue";
 
 //#region src/useKeyHold.d.ts
@@ -46,7 +46,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
  * </template>
  * ```
  */
-declare function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean>;
+declare function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean>;
 //#endregion
 export { useKeyHold };
 //# sourceMappingURL=useKeyHold.d.cts.map

package/dist/useKeyHold.d.ts

@@ -1,4 +1,4 @@
-import { HeldKey } from "@tanstack/hotkeys";
+import { IndividualKey } from "@tanstack/hotkeys";
 import { MaybeRefOrGetter, Ref } from "vue";
 
 //#region src/useKeyHold.d.ts
@@ -46,7 +46,7 @@ import { MaybeRefOrGetter, Ref } from "vue";
  * </template>
  * ```
  */
-declare function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean>;
+declare function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean>;
 //#endregion
 export { useKeyHold };
 //# sourceMappingURL=useKeyHold.d.ts.map

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 { HeldKey } 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<HeldKey>): 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,KAA8C;AAavE,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 { 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Vue adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,12 +43,12 @@
   ],
   "dependencies": {
     "@tanstack/vue-store": "^0.9.3",
-    "@tanstack/hotkeys": "0.6.3"
+    "@tanstack/hotkeys": "0.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
-    "vue": "^3.5.30"
+    "vue": "^3.5.31"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"

package/src/index.ts

@@ -14,4 +14,5 @@ export * from './useKeyHold'
 export * from './useHotkeySequence'
 export * from './useHotkeySequences'
 export * from './useHotkeyRecorder'
+export * from './useHotkeyRegistrations'
 export * from './useHotkeySequenceRecorder'

package/src/useHotkeyRegistrations.ts

@@ -0,0 +1,46 @@
+import { useStore } from '@tanstack/vue-store'
+import {
+  getHotkeyManager,
+  getSequenceManager,
+  toHotkeyRegistrationView,
+} from '@tanstack/hotkeys'
+import type {
+  HotkeyRegistrationView,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
+import type { Ref } from 'vue'
+
+/**
+ * Return type for useHotkeyRegistrations.
+ */
+export interface HotkeyRegistrationsResult {
+  /** All registered hotkeys (public view, no callbacks) */
+  hotkeys: Ref<Array<HotkeyRegistrationView>>
+  /** All registered sequences */
+  sequences: Ref<Array<SequenceRegistrationView>>
+}
+
+/**
+ * Vue composable that reactively reads all hotkey and sequence registrations
+ * from the singleton managers.
+ *
+ * This is a standalone composable that does NOT require the HotkeysProvider.
+ * It subscribes to both HotkeyManager and SequenceManager stores and
+ * triggers reactivity when registrations change.
+ *
+ * @returns Object with `hotkeys` and `sequences` refs
+ */
+export function useHotkeyRegistrations(): HotkeyRegistrationsResult {
+  const hotkeyManager = getHotkeyManager()
+  const sequenceManager = getSequenceManager()
+
+  const hotkeys = useStore(hotkeyManager.registrations, (state) =>
+    Array.from(state.values()).map(toHotkeyRegistrationView),
+  )
+
+  const sequences = useStore(sequenceManager.registrations, (state) =>
+    Array.from(state.values()),
+  )
+
+  return { hotkeys, sequences }
+}

package/src/useKeyHold.ts

@@ -2,7 +2,7 @@ import { useStore } from '@tanstack/vue-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import { unref } from 'vue'
 import type { MaybeRefOrGetter, Ref } from 'vue'
-import type { HeldKey } from '@tanstack/hotkeys'
+import type { IndividualKey } from '@tanstack/hotkeys'
 
 /**
  * Vue composable that returns a reactive ref indicating whether a specific key is currently being held.
@@ -48,7 +48,7 @@ import type { HeldKey } from '@tanstack/hotkeys'
  * </template>
  * ```
  */
-export function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean> {
+export function useKeyHold(key: MaybeRefOrGetter<IndividualKey>): Ref<boolean> {
   const tracker = getKeyStateTracker()
 
   const isHeld = useStore(tracker.store, (state) => {