@tanstack/vue-hotkeys 0.0.1

package/dist/useHotkeyRecorder.d.cts

@@ -0,0 +1,61 @@
+import { Hotkey, HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/useHotkeyRecorder.d.ts
+interface VueHotkeyRecorder {
+  /** Whether recording is currently active */
+  isRecording: Ref<boolean>;
+  /** The currently recorded hotkey (for live preview) */
+  recordedHotkey: Ref<Hotkey | null>;
+  /** Start recording a new hotkey */
+  startRecording: () => void;
+  /** Stop recording (same as cancel) */
+  stopRecording: () => void;
+  /** Cancel recording without saving */
+  cancelRecording: () => void;
+}
+/**
+ * Vue composable for recording keyboard shortcuts.
+ *
+ * This composable provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+ * class, managing all the complexity of capturing keyboard events, converting them
+ * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+ * to clear.
+ *
+ * @param options - Configuration options for the recorder
+ * @returns An object with recording state and control functions
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'
+ *
+ * const shortcut = ref<Hotkey>('Mod+S')
+ *
+ * const recorder = useHotkeyRecorder({
+ *   onRecord: (hotkey) => {
+ *     shortcut.value = hotkey
+ *   },
+ *   onCancel: () => {
+ *     console.log('Recording cancelled')
+ *   },
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button @click="recorder.startRecording()">
+ *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}
+ *     </button>
+ *     <div v-if="recorder.recordedHotkey">
+ *       Recording: {{ recorder.recordedHotkey }}
+ *     </div>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useHotkeyRecorder(options: MaybeRefOrGetter<HotkeyRecorderOptions>): VueHotkeyRecorder;
+//#endregion
+export { VueHotkeyRecorder, useHotkeyRecorder };
+//# sourceMappingURL=useHotkeyRecorder.d.cts.map

package/dist/useHotkeyRecorder.d.ts

@@ -0,0 +1,61 @@
+import { Hotkey, HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/useHotkeyRecorder.d.ts
+interface VueHotkeyRecorder {
+  /** Whether recording is currently active */
+  isRecording: Ref<boolean>;
+  /** The currently recorded hotkey (for live preview) */
+  recordedHotkey: Ref<Hotkey | null>;
+  /** Start recording a new hotkey */
+  startRecording: () => void;
+  /** Stop recording (same as cancel) */
+  stopRecording: () => void;
+  /** Cancel recording without saving */
+  cancelRecording: () => void;
+}
+/**
+ * Vue composable for recording keyboard shortcuts.
+ *
+ * This composable provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+ * class, managing all the complexity of capturing keyboard events, converting them
+ * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+ * to clear.
+ *
+ * @param options - Configuration options for the recorder
+ * @returns An object with recording state and control functions
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'
+ *
+ * const shortcut = ref<Hotkey>('Mod+S')
+ *
+ * const recorder = useHotkeyRecorder({
+ *   onRecord: (hotkey) => {
+ *     shortcut.value = hotkey
+ *   },
+ *   onCancel: () => {
+ *     console.log('Recording cancelled')
+ *   },
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button @click="recorder.startRecording()">
+ *       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}
+ *     </button>
+ *     <div v-if="recorder.recordedHotkey">
+ *       Recording: {{ recorder.recordedHotkey }}
+ *     </div>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useHotkeyRecorder(options: MaybeRefOrGetter<HotkeyRecorderOptions>): VueHotkeyRecorder;
+//#endregion
+export { VueHotkeyRecorder, useHotkeyRecorder };
+//# sourceMappingURL=useHotkeyRecorder.d.ts.map

package/dist/useHotkeyRecorder.js

@@ -0,0 +1,80 @@
+import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
+import { HotkeyRecorder } from "@tanstack/hotkeys";
+import { onUnmounted, unref, watch } from "vue";
+import { useStore } from "@tanstack/vue-store";
+
+//#region src/useHotkeyRecorder.ts
+/**
+* Vue composable for recording keyboard shortcuts.
+*
+* This composable provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+* class, managing all the complexity of capturing keyboard events, converting them
+* to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+* to clear.
+*
+* @param options - Configuration options for the recorder
+* @returns An object with recording state and control functions
+*
+* @example
+* ```vue
+* <script setup>
+* import { ref } from 'vue'
+* import { useHotkeyRecorder } from '@tanstack/vue-hotkeys'
+*
+* const shortcut = ref<Hotkey>('Mod+S')
+*
+* const recorder = useHotkeyRecorder({
+*   onRecord: (hotkey) => {
+*     shortcut.value = hotkey
+*   },
+*   onCancel: () => {
+*     console.log('Recording cancelled')
+*   },
+* })
+* <\/script>
+*
+* <template>
+*   <div>
+*     <button @click="recorder.startRecording()">
+*       {{ recorder.isRecording ? 'Recording...' : 'Edit Shortcut' }}
+*     </button>
+*     <div v-if="recorder.recordedHotkey">
+*       Recording: {{ recorder.recordedHotkey }}
+*     </div>
+*   </div>
+* </template>
+* ```
+*/
+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 stopWatcher = watch(() => resolveRecorderOptions(options, defaultOptions), (resolvedOptions) => {
+		recorder.setOptions(resolvedOptions);
+	}, { immediate: true });
+	onUnmounted(() => {
+		stopWatcher();
+		recorder.destroy();
+	});
+	return {
+		isRecording,
+		recordedHotkey,
+		startRecording: () => recorder.start(),
+		stopRecording: () => recorder.stop(),
+		cancelRecording: () => recorder.cancel()
+	};
+}
+function resolveRecorderOptions(options, defaultOptions) {
+	return {
+		...defaultOptions.hotkeyRecorder,
+		...resolveMaybeRefOrGetter(options)
+	};
+}
+function resolveMaybeRefOrGetter(value) {
+	return typeof value === "function" ? value() : unref(value);
+}
+
+//#endregion
+export { useHotkeyRecorder };
+//# sourceMappingURL=useHotkeyRecorder.js.map

package/dist/useHotkeyRecorder.js.map

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

package/dist/useHotkeySequence.cjs

@@ -0,0 +1,95 @@
+const require_HotkeysProviderContext = require('./HotkeysProviderContext.cjs');
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let vue = require("vue");
+
+//#region src/useHotkeySequence.ts
+/**
+* Vue composable for registering a keyboard shortcut sequence (Vim-style).
+*
+* This composable allows you to register multi-key sequences like 'g g' or 'd d'
+* that trigger when the full sequence is pressed within a timeout.
+*
+* @param sequence - Array of hotkey strings that form the sequence
+* @param callback - Function to call when the sequence is completed
+* @param options - Options for the sequence behavior
+*
+* @example
+* ```vue
+* <script setup>
+* import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+*
+* // 'g g' to go to top
+* useHotkeySequence(['G', 'G'], () => {
+*   scrollToTop()
+* })
+*
+* // 'd d' to delete line
+* useHotkeySequence(['D', 'D'], () => {
+*   deleteLine()
+* })
+*
+* // 'd i w' to delete inner word
+* useHotkeySequence(['D', 'I', 'W'], () => {
+*   deleteInnerWord()
+* }, { timeout: 500 })
+* <\/script>
+*
+* <template>
+*   <div>...</div>
+* </template>
+* ```
+*/
+function useHotkeySequence(sequence, callback, options = {}) {
+	const defaultOptions = require_HotkeysProviderContext.useDefaultHotkeysOptions();
+	const manager = (0, _tanstack_hotkeys.getSequenceManager)();
+	let registration = null;
+	const stopWatcher = (0, vue.watch)(() => {
+		const resolvedSequence = resolveMaybeRefOrGetter(sequence);
+		const resolvedOptions = resolveMaybeRefOrGetter(options);
+		const mergedOptions = {
+			...defaultOptions.hotkeySequence,
+			...resolvedOptions
+		};
+		return {
+			resolvedSequence,
+			mergedOptions,
+			resolvedEnabled: mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled),
+			resolvedTarget: mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target)
+		};
+	}, ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {
+		if (resolvedEnabled === false || resolvedSequence.length === 0) return;
+		const finalTarget = resolvedTarget ?? (typeof document !== "undefined" ? document : null);
+		if (!finalTarget) return;
+		if (registration?.isActive) {
+			registration.unregister();
+			registration = null;
+		}
+		const { target: _target, enabled: _enabled, ...restOptions } = mergedOptions;
+		const optionsWithoutTarget = {
+			...restOptions,
+			...resolvedEnabled === void 0 ? {} : { enabled: resolvedEnabled }
+		};
+		registration = manager.register(resolvedSequence, callback, {
+			...optionsWithoutTarget,
+			target: finalTarget
+		});
+		if (registration.isActive) {
+			registration.callback = callback;
+			registration.setOptions(optionsWithoutTarget);
+		}
+	}, { immediate: true });
+	(0, vue.onUnmounted)(() => {
+		stopWatcher();
+		if (registration?.isActive) {
+			registration.unregister();
+			registration = null;
+		}
+	});
+}
+function resolveMaybeRefOrGetter(value) {
+	return typeof value === "function" ? value() : (0, vue.unref)(value);
+}
+
+//#endregion
+exports.useHotkeySequence = useHotkeySequence;
+//# sourceMappingURL=useHotkeySequence.cjs.map

package/dist/useHotkeySequence.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n  HotkeyCallback,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'enabled' | 'target'\n> {\n  /**\n   * Whether the sequence is active.\n   * Can be a Ref, a getter function, or a boolean value.\n   * Defaults to true.\n   */\n  enabled?: MaybeRefOrGetter<boolean>\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a Ref, a getter function, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n *   scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n *   deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n *   deleteInnerWord()\n * }, { timeout: 500 })\n * </script>\n *\n * <template>\n *   <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n  sequence: MaybeRefOrGetter<HotkeySequence>,\n  callback: HotkeyCallback,\n  options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const manager = getSequenceManager()\n\n  let registration: SequenceRegistrationHandle | null = null\n\n  // Watch for changes to reactive dependencies\n  const stopWatcher = watch(\n    () => {\n      const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n      const resolvedOptions = resolveMaybeRefOrGetter(options)\n      const mergedOptions = {\n        ...defaultOptions.hotkeySequence,\n        ...resolvedOptions,\n      } as UseHotkeySequenceOptions\n      const resolvedEnabled =\n        mergedOptions.enabled === undefined\n          ? undefined\n          : resolveMaybeRefOrGetter(mergedOptions.enabled)\n      const resolvedTarget =\n        mergedOptions.target === undefined\n          ? undefined\n          : resolveMaybeRefOrGetter(mergedOptions.target)\n\n      return {\n        resolvedSequence,\n        mergedOptions,\n        resolvedEnabled,\n        resolvedTarget,\n      }\n    },\n    ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n      if (resolvedEnabled === false || resolvedSequence.length === 0) {\n        return\n      }\n\n      // Resolve target\n      const finalTarget =\n        resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n      if (!finalTarget) {\n        return\n      }\n\n      // Unregister previous registration if it exists\n      if (registration?.isActive) {\n        registration.unregister()\n        registration = null\n      }\n\n      // Extract options without target (target is handled separately)\n      const {\n        target: _target,\n        enabled: _enabled,\n        ...restOptions\n      } = mergedOptions\n      const optionsWithoutTarget = {\n        ...restOptions,\n        ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n      }\n\n      // Register the sequence\n      registration = manager.register(resolvedSequence, callback, {\n        ...optionsWithoutTarget,\n        target: finalTarget,\n      })\n\n      // Update callback and options\n      if (registration.isActive) {\n        registration.callback = callback\n        registration.setOptions(optionsWithoutTarget)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    if (registration?.isActive) {\n      registration.unregister()\n      registration = null\n    }\n  })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,kBACd,UACA,UACA,UAAsD,EAAE,EAClD;CACN,MAAM,iBAAiBA,yDAA0B;CACjD,MAAM,qDAA8B;CAEpC,IAAI,eAAkD;CAGtD,MAAM,mCACE;EACJ,MAAM,mBAAmB,wBAAwB,SAAS;EAC1D,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,gBAAgB;GACpB,GAAG,eAAe;GAClB,GAAG;GACJ;AAUD,SAAO;GACL;GACA;GACA,iBAXA,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GAUlD,gBARA,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAO;GAOlD;KAEF,EAAE,kBAAkB,eAAe,iBAAiB,qBAAqB;AACxE,MAAI,oBAAoB,SAAS,iBAAiB,WAAW,EAC3D;EAIF,MAAM,cACJ,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAElE,MAAI,CAAC,YACH;AAIF,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;EAIjB,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD;EACJ,MAAM,uBAAuB;GAC3B,GAAG;GACH,GAAI,oBAAoB,SAAY,EAAE,GAAG,EAAE,SAAS,iBAAiB;GACtE;AAGD,iBAAe,QAAQ,SAAS,kBAAkB,UAAU;GAC1D,GAAG;GACH,QAAQ;GACT,CAAC;AAGF,MAAI,aAAa,UAAU;AACzB,gBAAa,WAAW;AACxB,gBAAa,WAAW,qBAAqB;;IAGjD,EAAE,WAAW,MAAM,CACpB;AAGD,4BAAkB;AAChB,eAAa;AACb,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;GAEjB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,kBAAS,MAAM"}

package/dist/useHotkeySequence.d.cts

@@ -0,0 +1,58 @@
+import { HotkeyCallback, HotkeySequence, SequenceOptions } from "@tanstack/hotkeys";
+import { MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeySequence.d.ts
+interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'target'> {
+  /**
+   * Whether the sequence is active.
+   * Can be a Ref, a getter function, or a boolean value.
+   * Defaults to true.
+   */
+  enabled?: MaybeRefOrGetter<boolean>;
+  /**
+   * The DOM element to attach the event listener to.
+   * Can be a Ref, a getter function, direct DOM element, or null.
+   * Defaults to document.
+   */
+  target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>;
+}
+/**
+ * Vue composable for registering a keyboard shortcut sequence (Vim-style).
+ *
+ * This composable allows you to register multi-key sequences like 'g g' or 'd d'
+ * that trigger when the full sequence is pressed within a timeout.
+ *
+ * @param sequence - Array of hotkey strings that form the sequence
+ * @param callback - Function to call when the sequence is completed
+ * @param options - Options for the sequence behavior
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+ *
+ * // 'g g' to go to top
+ * useHotkeySequence(['G', 'G'], () => {
+ *   scrollToTop()
+ * })
+ *
+ * // 'd d' to delete line
+ * useHotkeySequence(['D', 'D'], () => {
+ *   deleteLine()
+ * })
+ *
+ * // 'd i w' to delete inner word
+ * useHotkeySequence(['D', 'I', 'W'], () => {
+ *   deleteInnerWord()
+ * }, { timeout: 500 })
+ * </script>
+ *
+ * <template>
+ *   <div>...</div>
+ * </template>
+ * ```
+ */
+declare function useHotkeySequence(sequence: MaybeRefOrGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeRefOrGetter<UseHotkeySequenceOptions>): void;
+//#endregion
+export { UseHotkeySequenceOptions, useHotkeySequence };
+//# sourceMappingURL=useHotkeySequence.d.cts.map

package/dist/useHotkeySequence.d.ts

@@ -0,0 +1,58 @@
+import { HotkeyCallback, HotkeySequence, SequenceOptions } from "@tanstack/hotkeys";
+import { MaybeRefOrGetter } from "vue";
+
+//#region src/useHotkeySequence.d.ts
+interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'enabled' | 'target'> {
+  /**
+   * Whether the sequence is active.
+   * Can be a Ref, a getter function, or a boolean value.
+   * Defaults to true.
+   */
+  enabled?: MaybeRefOrGetter<boolean>;
+  /**
+   * The DOM element to attach the event listener to.
+   * Can be a Ref, a getter function, direct DOM element, or null.
+   * Defaults to document.
+   */
+  target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>;
+}
+/**
+ * Vue composable for registering a keyboard shortcut sequence (Vim-style).
+ *
+ * This composable allows you to register multi-key sequences like 'g g' or 'd d'
+ * that trigger when the full sequence is pressed within a timeout.
+ *
+ * @param sequence - Array of hotkey strings that form the sequence
+ * @param callback - Function to call when the sequence is completed
+ * @param options - Options for the sequence behavior
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+ *
+ * // 'g g' to go to top
+ * useHotkeySequence(['G', 'G'], () => {
+ *   scrollToTop()
+ * })
+ *
+ * // 'd d' to delete line
+ * useHotkeySequence(['D', 'D'], () => {
+ *   deleteLine()
+ * })
+ *
+ * // 'd i w' to delete inner word
+ * useHotkeySequence(['D', 'I', 'W'], () => {
+ *   deleteInnerWord()
+ * }, { timeout: 500 })
+ * </script>
+ *
+ * <template>
+ *   <div>...</div>
+ * </template>
+ * ```
+ */
+declare function useHotkeySequence(sequence: MaybeRefOrGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeRefOrGetter<UseHotkeySequenceOptions>): void;
+//#endregion
+export { UseHotkeySequenceOptions, useHotkeySequence };
+//# sourceMappingURL=useHotkeySequence.d.ts.map

package/dist/useHotkeySequence.js

@@ -0,0 +1,95 @@
+import { useDefaultHotkeysOptions } from "./HotkeysProviderContext.js";
+import { getSequenceManager } from "@tanstack/hotkeys";
+import { onUnmounted, unref, watch } from "vue";
+
+//#region src/useHotkeySequence.ts
+/**
+* Vue composable for registering a keyboard shortcut sequence (Vim-style).
+*
+* This composable allows you to register multi-key sequences like 'g g' or 'd d'
+* that trigger when the full sequence is pressed within a timeout.
+*
+* @param sequence - Array of hotkey strings that form the sequence
+* @param callback - Function to call when the sequence is completed
+* @param options - Options for the sequence behavior
+*
+* @example
+* ```vue
+* <script setup>
+* import { useHotkeySequence } from '@tanstack/vue-hotkeys'
+*
+* // 'g g' to go to top
+* useHotkeySequence(['G', 'G'], () => {
+*   scrollToTop()
+* })
+*
+* // 'd d' to delete line
+* useHotkeySequence(['D', 'D'], () => {
+*   deleteLine()
+* })
+*
+* // 'd i w' to delete inner word
+* useHotkeySequence(['D', 'I', 'W'], () => {
+*   deleteInnerWord()
+* }, { timeout: 500 })
+* <\/script>
+*
+* <template>
+*   <div>...</div>
+* </template>
+* ```
+*/
+function useHotkeySequence(sequence, callback, options = {}) {
+	const defaultOptions = useDefaultHotkeysOptions();
+	const manager = getSequenceManager();
+	let registration = null;
+	const stopWatcher = watch(() => {
+		const resolvedSequence = resolveMaybeRefOrGetter(sequence);
+		const resolvedOptions = resolveMaybeRefOrGetter(options);
+		const mergedOptions = {
+			...defaultOptions.hotkeySequence,
+			...resolvedOptions
+		};
+		return {
+			resolvedSequence,
+			mergedOptions,
+			resolvedEnabled: mergedOptions.enabled === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.enabled),
+			resolvedTarget: mergedOptions.target === void 0 ? void 0 : resolveMaybeRefOrGetter(mergedOptions.target)
+		};
+	}, ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {
+		if (resolvedEnabled === false || resolvedSequence.length === 0) return;
+		const finalTarget = resolvedTarget ?? (typeof document !== "undefined" ? document : null);
+		if (!finalTarget) return;
+		if (registration?.isActive) {
+			registration.unregister();
+			registration = null;
+		}
+		const { target: _target, enabled: _enabled, ...restOptions } = mergedOptions;
+		const optionsWithoutTarget = {
+			...restOptions,
+			...resolvedEnabled === void 0 ? {} : { enabled: resolvedEnabled }
+		};
+		registration = manager.register(resolvedSequence, callback, {
+			...optionsWithoutTarget,
+			target: finalTarget
+		});
+		if (registration.isActive) {
+			registration.callback = callback;
+			registration.setOptions(optionsWithoutTarget);
+		}
+	}, { immediate: true });
+	onUnmounted(() => {
+		stopWatcher();
+		if (registration?.isActive) {
+			registration.unregister();
+			registration = null;
+		}
+	});
+}
+function resolveMaybeRefOrGetter(value) {
+	return typeof value === "function" ? value() : unref(value);
+}
+
+//#endregion
+export { useHotkeySequence };
+//# sourceMappingURL=useHotkeySequence.js.map

package/dist/useHotkeySequence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { onUnmounted, unref, watch } from 'vue'\nimport { getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProviderContext'\nimport type { MaybeRefOrGetter } from 'vue'\nimport type {\n  HotkeyCallback,\n  HotkeySequence,\n  SequenceOptions,\n  SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n  SequenceOptions,\n  'enabled' | 'target'\n> {\n  /**\n   * Whether the sequence is active.\n   * Can be a Ref, a getter function, or a boolean value.\n   * Defaults to true.\n   */\n  enabled?: MaybeRefOrGetter<boolean>\n  /**\n   * The DOM element to attach the event listener to.\n   * Can be a Ref, a getter function, direct DOM element, or null.\n   * Defaults to document.\n   */\n  target?: MaybeRefOrGetter<HTMLElement | Document | Window | null>\n}\n\n/**\n * Vue composable for registering a keyboard shortcut sequence (Vim-style).\n *\n * This composable allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```vue\n * <script setup>\n * import { useHotkeySequence } from '@tanstack/vue-hotkeys'\n *\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n *   scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n *   deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n *   deleteInnerWord()\n * }, { timeout: 500 })\n * </script>\n *\n * <template>\n *   <div>...</div>\n * </template>\n * ```\n */\nexport function useHotkeySequence(\n  sequence: MaybeRefOrGetter<HotkeySequence>,\n  callback: HotkeyCallback,\n  options: MaybeRefOrGetter<UseHotkeySequenceOptions> = {},\n): void {\n  const defaultOptions = useDefaultHotkeysOptions()\n  const manager = getSequenceManager()\n\n  let registration: SequenceRegistrationHandle | null = null\n\n  // Watch for changes to reactive dependencies\n  const stopWatcher = watch(\n    () => {\n      const resolvedSequence = resolveMaybeRefOrGetter(sequence)\n      const resolvedOptions = resolveMaybeRefOrGetter(options)\n      const mergedOptions = {\n        ...defaultOptions.hotkeySequence,\n        ...resolvedOptions,\n      } as UseHotkeySequenceOptions\n      const resolvedEnabled =\n        mergedOptions.enabled === undefined\n          ? undefined\n          : resolveMaybeRefOrGetter(mergedOptions.enabled)\n      const resolvedTarget =\n        mergedOptions.target === undefined\n          ? undefined\n          : resolveMaybeRefOrGetter(mergedOptions.target)\n\n      return {\n        resolvedSequence,\n        mergedOptions,\n        resolvedEnabled,\n        resolvedTarget,\n      }\n    },\n    ({ resolvedSequence, mergedOptions, resolvedEnabled, resolvedTarget }) => {\n      if (resolvedEnabled === false || resolvedSequence.length === 0) {\n        return\n      }\n\n      // Resolve target\n      const finalTarget =\n        resolvedTarget ?? (typeof document !== 'undefined' ? document : null)\n\n      if (!finalTarget) {\n        return\n      }\n\n      // Unregister previous registration if it exists\n      if (registration?.isActive) {\n        registration.unregister()\n        registration = null\n      }\n\n      // Extract options without target (target is handled separately)\n      const {\n        target: _target,\n        enabled: _enabled,\n        ...restOptions\n      } = mergedOptions\n      const optionsWithoutTarget = {\n        ...restOptions,\n        ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),\n      }\n\n      // Register the sequence\n      registration = manager.register(resolvedSequence, callback, {\n        ...optionsWithoutTarget,\n        target: finalTarget,\n      })\n\n      // Update callback and options\n      if (registration.isActive) {\n        registration.callback = callback\n        registration.setOptions(optionsWithoutTarget)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup on unmount\n  onUnmounted(() => {\n    stopWatcher()\n    if (registration?.isActive) {\n      registration.unregister()\n      registration = null\n    }\n  })\n}\n\nfunction resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {\n  return typeof value === 'function' ? (value as () => T)() : unref(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,kBACd,UACA,UACA,UAAsD,EAAE,EAClD;CACN,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,UAAU,oBAAoB;CAEpC,IAAI,eAAkD;CAGtD,MAAM,cAAc,YACZ;EACJ,MAAM,mBAAmB,wBAAwB,SAAS;EAC1D,MAAM,kBAAkB,wBAAwB,QAAQ;EACxD,MAAM,gBAAgB;GACpB,GAAG,eAAe;GAClB,GAAG;GACJ;AAUD,SAAO;GACL;GACA;GACA,iBAXA,cAAc,YAAY,SACtB,SACA,wBAAwB,cAAc,QAAQ;GAUlD,gBARA,cAAc,WAAW,SACrB,SACA,wBAAwB,cAAc,OAAO;GAOlD;KAEF,EAAE,kBAAkB,eAAe,iBAAiB,qBAAqB;AACxE,MAAI,oBAAoB,SAAS,iBAAiB,WAAW,EAC3D;EAIF,MAAM,cACJ,mBAAmB,OAAO,aAAa,cAAc,WAAW;AAElE,MAAI,CAAC,YACH;AAIF,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;EAIjB,MAAM,EACJ,QAAQ,SACR,SAAS,UACT,GAAG,gBACD;EACJ,MAAM,uBAAuB;GAC3B,GAAG;GACH,GAAI,oBAAoB,SAAY,EAAE,GAAG,EAAE,SAAS,iBAAiB;GACtE;AAGD,iBAAe,QAAQ,SAAS,kBAAkB,UAAU;GAC1D,GAAG;GACH,QAAQ;GACT,CAAC;AAGF,MAAI,aAAa,UAAU;AACzB,gBAAa,WAAW;AACxB,gBAAa,WAAW,qBAAqB;;IAGjD,EAAE,WAAW,MAAM,CACpB;AAGD,mBAAkB;AAChB,eAAa;AACb,MAAI,cAAc,UAAU;AAC1B,gBAAa,YAAY;AACzB,kBAAe;;GAEjB;;AAGJ,SAAS,wBAA2B,OAA+B;AACjE,QAAO,OAAO,UAAU,aAAc,OAAmB,GAAG,MAAM,MAAM"}

package/dist/useKeyHold.cjs

@@ -0,0 +1,60 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let vue = require("vue");
+let _tanstack_vue_store = require("@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
+* to the global KeyStateTracker and uses a selector to determine if
+* the specified key is held.
+*
+* @param key - The key to check (e.g., 'Shift', 'Control', 'A')
+* @returns Reactive ref that is true if the key is currently held down
+*
+* @example
+* ```vue
+* <script setup>
+* import { useKeyHold } from '@tanstack/vue-hotkeys'
+*
+* const isShiftHeld = useKeyHold('Shift')
+* <\/script>
+*
+* <template>
+*   <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
+*     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
+*   </div>
+* </template>
+* ```
+*
+* @example
+* ```vue
+* <script setup>
+* import { useKeyHold } from '@tanstack/vue-hotkeys'
+*
+* const ctrl = useKeyHold('Control')
+* const shift = useKeyHold('Shift')
+* const alt = useKeyHold('Alt')
+* <\/script>
+*
+* <template>
+*   <div>
+*     <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
+*     <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
+*     <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
+*   </div>
+* </template>
+* ```
+*/
+function useKeyHold(key) {
+	return (0, _tanstack_vue_store.useStore)((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);
+	});
+}
+
+//#endregion
+exports.useKeyHold = useKeyHold;
+//# sourceMappingURL=useKeyHold.cjs.map

package/dist/useKeyHold.cjs.map

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

package/dist/useKeyHold.d.cts

@@ -0,0 +1,52 @@
+import { HeldKey } from "@tanstack/hotkeys";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/useKeyHold.d.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
+ * to the global KeyStateTracker and uses a selector to determine if
+ * the specified key is held.
+ *
+ * @param key - The key to check (e.g., 'Shift', 'Control', 'A')
+ * @returns Reactive ref that is true if the key is currently held down
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useKeyHold } from '@tanstack/vue-hotkeys'
+ *
+ * const isShiftHeld = useKeyHold('Shift')
+ * </script>
+ *
+ * <template>
+ *   <div :style="{ opacity: isShiftHeld ? 1 : 0.5 }">
+ *     {{ isShiftHeld ? 'Shift is pressed!' : 'Press Shift' }}
+ *   </div>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useKeyHold } from '@tanstack/vue-hotkeys'
+ *
+ * const ctrl = useKeyHold('Control')
+ * const shift = useKeyHold('Shift')
+ * const alt = useKeyHold('Alt')
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <span :style="{ opacity: ctrl ? 1 : 0.3 }">Ctrl</span>
+ *     <span :style="{ opacity: shift ? 1 : 0.3 }">Shift</span>
+ *     <span :style="{ opacity: alt ? 1 : 0.3 }">Alt</span>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useKeyHold(key: MaybeRefOrGetter<HeldKey>): Ref<boolean>;
+//#endregion
+export { useKeyHold };
+//# sourceMappingURL=useKeyHold.d.cts.map