@tanstack/vue-hotkeys 0.0.1

package/dist/useKeyHold.d.ts

@@ -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.ts.map

package/dist/useKeyHold.js

@@ -0,0 +1,60 @@
+import { getKeyStateTracker } from "@tanstack/hotkeys";
+import { unref } from "vue";
+import { useStore } 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
+* 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 useStore(getKeyStateTracker().store, (state) => {
+		const keyValue = unref(key);
+		const normalizedKey = (typeof keyValue === "string" ? keyValue : String(keyValue)).toLowerCase();
+		return state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);
+	});
+}
+
+//#endregion
+export { useKeyHold };
+//# sourceMappingURL=useKeyHold.js.map

package/dist/useKeyHold.js.map

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

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@tanstack/vue-hotkeys",
+  "version": "0.0.1",
+  "description": "Vue adapter for TanStack Hotkeys",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/hotkeys.git",
+    "directory": "packages/vue-hotkeys"
+  },
+  "homepage": "https://tanstack.com/hotkeys",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "tanstack",
+    "hotkeys",
+    "keyboard",
+    "shortcuts"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "build": "tsdown"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/hotkeys": "workspace:*",
+    "@tanstack/vue-store": "^0.9.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "vue": "^3.5.29"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  }
+}

package/src/HotkeysProvider.tsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import { provideHotkeysContext } from './HotkeysProviderContext'
+import type { HotkeysProviderOptions } from './HotkeysProviderContext'
+
+/**
+ * Vue component that provides default options for hotkeys context.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <HotkeysProvider :defaultOptions="{ hotkey: { enabled: true } }">
+ *     <App />
+ *   </HotkeysProvider>
+ * </template>
+ * ```
+ */
+export const HotkeysProvider = defineComponent({
+  name: 'HotkeysProvider',
+  props: {
+    defaultOptions: {
+      type: Object as () => HotkeysProviderOptions,
+      default: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    provideHotkeysContext(props.defaultOptions)
+    return () => slots.default?.()
+  },
+})

package/src/HotkeysProviderContext.ts

@@ -0,0 +1,37 @@
+import { inject, provide } from 'vue'
+import type { InjectionKey } from 'vue'
+import type { HotkeyRecorderOptions } from '@tanstack/hotkeys'
+import type { UseHotkeyOptions } from './useHotkey'
+import type { UseHotkeySequenceOptions } from './useHotkeySequence'
+
+export interface HotkeysProviderOptions {
+  hotkey?: Partial<UseHotkeyOptions>
+  hotkeyRecorder?: Partial<HotkeyRecorderOptions>
+  hotkeySequence?: Partial<UseHotkeySequenceOptions>
+}
+
+interface HotkeysContextValue {
+  defaultOptions: HotkeysProviderOptions
+}
+
+const HotkeysContext: InjectionKey<HotkeysContextValue> =
+  Symbol('HotkeysContext')
+
+const DEFAULT_OPTIONS: HotkeysProviderOptions = {}
+
+export function provideHotkeysContext(defaultOptions?: HotkeysProviderOptions) {
+  const contextValue: HotkeysContextValue = {
+    defaultOptions: defaultOptions ?? DEFAULT_OPTIONS,
+  }
+
+  provide(HotkeysContext, contextValue)
+}
+
+export function useHotkeysContext() {
+  return inject(HotkeysContext, null)
+}
+
+export function useDefaultHotkeysOptions() {
+  const context = inject(HotkeysContext, null)
+  return context?.defaultOptions ?? {}
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Re-export everything from the core package
+export * from '@tanstack/hotkeys'
+
+// Provider
+export * from './HotkeysProvider'
+export * from './HotkeysProviderContext'
+
+// Vue-specific composables
+export * from './useHotkey'
+export * from './useHeldKeys'
+export * from './useHeldKeyCodes'
+export * from './useKeyHold'
+export * from './useHotkeySequence'
+export * from './useHotkeyRecorder'

package/src/useHeldKeyCodes.ts

@@ -0,0 +1,34 @@
+import { useStore } from '@tanstack/vue-store'
+import { getKeyStateTracker } from '@tanstack/hotkeys'
+import type { Ref } from 'vue'
+
+/**
+ * Vue composable that returns a reactive ref mapping currently held key names to their physical `event.code` values.
+ *
+ * This is useful for debugging which physical key was pressed (e.g. distinguishing
+ * left vs right Shift via "ShiftLeft" / "ShiftRight").
+ *
+ * @returns Reactive ref containing record mapping normalized key names to their `event.code` values
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHeldKeys, useHeldKeyCodes } from '@tanstack/vue-hotkeys'
+ *
+ * const heldKeys = useHeldKeys()
+ * const heldCodes = useHeldKeyCodes()
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <kbd v-for="key in heldKeys" :key="key">
+ *       {{ key }} <small>{{ heldCodes[key] }}</small>
+ *     </kbd>
+ *   </div>
+ * </template>
+ * ```
+ */
+export function useHeldKeyCodes(): Ref<Record<string, string>> {
+  const tracker = getKeyStateTracker()
+  return useStore(tracker.store, (state) => state.heldCodes)
+}

package/src/useHeldKeys.ts

@@ -0,0 +1,32 @@
+import { useStore } 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
+ * to the global KeyStateTracker and updates whenever keys are pressed
+ * or released.
+ *
+ * @returns Reactive ref containing array of currently held key names
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHeldKeys } from '@tanstack/vue-hotkeys'
+ *
+ * const heldKeys = useHeldKeys()
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     Currently pressed: {{ heldKeys.join(' + ') || 'None' }}
+ *   </div>
+ * </template>
+ * ```
+ */
+export function useHeldKeys(): Ref<Array<string>> {
+  const tracker = getKeyStateTracker()
+  return useStore(tracker.store, (state) => state.heldKeys)
+}

package/src/useHotkey.ts

@@ -0,0 +1,197 @@
+import { onUnmounted, unref, watch } from 'vue'
+import {
+  detectPlatform,
+  formatHotkey,
+  getHotkeyManager,
+  rawHotkeyToParsedHotkey,
+} from '@tanstack/hotkeys'
+import { useDefaultHotkeysOptions } from './HotkeysProviderContext'
+import type {
+  Hotkey,
+  HotkeyCallback,
+  HotkeyOptions,
+  HotkeyRegistrationHandle,
+  RegisterableHotkey,
+} from '@tanstack/hotkeys'
+import type { MaybeRefOrGetter } from 'vue'
+
+export interface UseHotkeyOptions extends Omit<
+  HotkeyOptions,
+  'enabled' | 'target'
+> {
+  /**
+   * Whether the hotkey 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 hotkey.
+ *
+ * Uses the singleton HotkeyManager for efficient event handling.
+ * The callback receives both the keyboard event and a context object
+ * containing the hotkey string and parsed hotkey.
+ *
+ * This composable automatically tracks reactive dependencies and updates
+ * the registration when options or the callback change.
+ *
+ * @param hotkey - The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object (supports `mod` for cross-platform)
+ * @param callback - The function to call when the hotkey is pressed
+ * @param options - Options for the hotkey behavior
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHotkey } from '@tanstack/vue-hotkeys'
+ *
+ * const count = ref(0)
+ *
+ * // Callback always has access to latest count value
+ * useHotkey('Mod+S', (event, { hotkey }) => {
+ *   console.log(`Save triggered, count is ${count.value}`)
+ *   handleSave()
+ * })
+ * </script>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHotkey } from '@tanstack/vue-hotkeys'
+ *
+ * const isOpen = ref(false)
+ *
+ * // enabled option is reactive
+ * useHotkey('Escape', () => {
+ *   isOpen.value = false
+ * }, { enabled: isOpen })
+ * </script>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHotkey } from '@tanstack/vue-hotkeys'
+ *
+ * const editorRef = ref<HTMLDivElement | null>(null)
+ *
+ * // Scoped to a specific element
+ * useHotkey('Mod+S', () => {
+ *   save()
+ * }, { target: editorRef })
+ * </script>
+ *
+ * <template>
+ *   <div ref="editorRef">...</div>
+ * </template>
+ * ```
+ */
+export function useHotkey(
+  hotkey: MaybeRefOrGetter<RegisterableHotkey>,
+  callback: HotkeyCallback,
+  options: MaybeRefOrGetter<UseHotkeyOptions> = {},
+): void {
+  const defaultOptions = useDefaultHotkeysOptions()
+  const manager = getHotkeyManager()
+
+  let registration: HotkeyRegistrationHandle | null = null
+
+  // Watch for changes to reactive dependencies
+  const stopWatcher = watch(
+    () => {
+      const resolvedHotkey = resolveMaybeRefOrGetter(hotkey)
+      const resolvedOptions = resolveMaybeRefOrGetter(options)
+      const mergedOptions = {
+        ...defaultOptions.hotkey,
+        ...resolvedOptions,
+      } as UseHotkeyOptions
+      const resolvedEnabled =
+        mergedOptions.enabled === undefined
+          ? undefined
+          : resolveMaybeRefOrGetter(mergedOptions.enabled)
+      const resolvedTarget =
+        mergedOptions.target === undefined
+          ? undefined
+          : resolveMaybeRefOrGetter(mergedOptions.target)
+
+      return {
+        resolvedHotkey,
+        mergedOptions,
+        resolvedEnabled,
+        resolvedTarget,
+      }
+    },
+    ({ resolvedHotkey, mergedOptions, resolvedEnabled, resolvedTarget }) => {
+      // Normalize to hotkey string
+      const platform = mergedOptions.platform ?? detectPlatform()
+      const hotkeyString: Hotkey =
+        typeof resolvedHotkey === 'string'
+          ? resolvedHotkey
+          : (formatHotkey(
+              rawHotkeyToParsedHotkey(resolvedHotkey as any, platform),
+            ) as Hotkey)
+
+      // Resolve target
+      const finalTarget =
+        resolvedTarget ?? (typeof document !== 'undefined' ? document : null)
+
+      if (!finalTarget) {
+        return
+      }
+
+      // Unregister previous registration if it exists
+      if (registration?.isActive) {
+        registration.unregister()
+        registration = null
+      }
+
+      // Extract options without target (target is handled separately)
+      const {
+        target: _target,
+        enabled: _enabled,
+        ...restOptions
+      } = mergedOptions
+      const optionsWithoutTarget = {
+        ...restOptions,
+        ...(resolvedEnabled === undefined ? {} : { enabled: resolvedEnabled }),
+      }
+
+      // Register the hotkey
+      registration = manager.register(hotkeyString, callback, {
+        ...optionsWithoutTarget,
+        target: finalTarget,
+      })
+
+      // Update callback and options
+      if (registration.isActive) {
+        registration.callback = callback
+        registration.setOptions(optionsWithoutTarget)
+      }
+    },
+    { immediate: true },
+  )
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    stopWatcher()
+    if (registration?.isActive) {
+      registration.unregister()
+      registration = null
+    }
+  })
+}
+
+function resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {
+  return typeof value === 'function' ? (value as () => T)() : unref(value)
+}

package/src/useHotkeyRecorder.ts

@@ -0,0 +1,112 @@
+import { onUnmounted, unref, watch } from 'vue'
+import { useStore } from '@tanstack/vue-store'
+import { HotkeyRecorder } from '@tanstack/hotkeys'
+import { useDefaultHotkeysOptions } from './HotkeysProviderContext'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'
+
+export 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>
+ * ```
+ */
+export function useHotkeyRecorder(
+  options: MaybeRefOrGetter<HotkeyRecorderOptions>,
+): VueHotkeyRecorder {
+  const defaultOptions = useDefaultHotkeysOptions()
+  const recorder = new HotkeyRecorder(
+    resolveRecorderOptions(options, defaultOptions),
+  )
+
+  // Subscribe to recorder state using useStore
+  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 },
+  )
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    stopWatcher()
+    recorder.destroy()
+  })
+
+  return {
+    isRecording: isRecording as Ref<boolean>,
+    recordedHotkey: recordedHotkey as Ref<Hotkey | null>,
+    startRecording: () => recorder.start(),
+    stopRecording: () => recorder.stop(),
+    cancelRecording: () => recorder.cancel(),
+  }
+}
+
+function resolveRecorderOptions(
+  options: MaybeRefOrGetter<HotkeyRecorderOptions>,
+  defaultOptions: ReturnType<typeof useDefaultHotkeysOptions>,
+): HotkeyRecorderOptions {
+  return {
+    ...defaultOptions.hotkeyRecorder,
+    ...resolveMaybeRefOrGetter(options),
+  } as HotkeyRecorderOptions
+}
+
+function resolveMaybeRefOrGetter<T>(value: MaybeRefOrGetter<T>): T {
+  return typeof value === 'function' ? (value as () => T)() : unref(value)
+}