@tanstack/angular-hotkeys 0.11.0 → 0.12.0

package/dist/injectHotkeys.d.cts

@@ -1,66 +0,0 @@
-import { InjectHotkeyOptions } from "./injectHotkey.cjs";
-import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
-
-//#region src/injectHotkeys.d.ts
-/**
- * A single hotkey definition for use with `injectHotkeys`.
- */
-interface InjectHotkeyDefinition {
-  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
-  hotkey: RegisterableHotkey | (() => RegisterableHotkey);
-  /** The function to call when the hotkey is pressed */
-  callback: HotkeyCallback;
-  /** Per-hotkey options (merged on top of commonOptions) */
-  options?: InjectHotkeyOptions | (() => InjectHotkeyOptions);
-}
-/**
- * Angular inject-based API for registering multiple keyboard hotkeys at once.
- *
- * Uses the singleton HotkeyManager for efficient event handling.
- * Accepts a dynamic array of hotkey definitions.
- *
- * Call in an injection context (e.g. constructor or field initializer).
- * Uses effect() to track reactive dependencies and update registrations
- * when options or the callback change.
- *
- * Options are merged in this order:
- * provideHotkeys defaults < commonOptions < per-definition options
- *
- * @param hotkeys - Array of hotkey definitions, or getter returning them
- * @param commonOptions - Shared options for all hotkeys, or getter
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class EditorComponent {
- *   constructor() {
- *     injectHotkeys([
- *       { hotkey: 'Mod+S', callback: () => this.save() },
- *       { hotkey: 'Mod+Z', callback: () => this.undo() },
- *       { hotkey: 'Escape', callback: () => this.close() },
- *     ])
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class DynamicShortcuts {
- *   shortcuts = signal([...])
- *
- *   constructor() {
- *     injectHotkeys(
- *       () => this.shortcuts().map((s) => ({
- *         hotkey: s.key,
- *         callback: s.action,
- *       })),
- *     )
- *   }
- * }
- * ```
- */
-declare function injectHotkeys(hotkeys: Array<InjectHotkeyDefinition> | (() => Array<InjectHotkeyDefinition>), commonOptions?: InjectHotkeyOptions | (() => InjectHotkeyOptions)): void;
-//#endregion
-export { InjectHotkeyDefinition, injectHotkeys };
-//# sourceMappingURL=injectHotkeys.d.cts.map

package/dist/injectHotkeys.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"injectHotkeys.js","names":[],"sources":["../src/injectHotkeys.ts"],"sourcesContent":["import { DestroyRef, effect, inject } from '@angular/core'\nimport {\n  detectPlatform,\n  getHotkeyManager,\n  normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { injectDefaultHotkeysOptions } from './hotkeys-provider'\nimport type { InjectHotkeyOptions } from './injectHotkey'\nimport type {\n  Hotkey,\n  HotkeyCallback,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `injectHotkeys`.\n */\nexport interface InjectHotkeyDefinition {\n  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n  hotkey: RegisterableHotkey | (() => RegisterableHotkey)\n  /** The function to call when the hotkey is pressed */\n  callback: HotkeyCallback\n  /** Per-hotkey options (merged on top of commonOptions) */\n  options?: InjectHotkeyOptions | (() => InjectHotkeyOptions)\n}\n\n/**\n * Angular inject-based API for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions.\n *\n * Call in an injection context (e.g. constructor or field initializer).\n * Uses effect() to track reactive dependencies and update registrations\n * when options or the callback change.\n *\n * Options are merged in this order:\n * provideHotkeys defaults < commonOptions < per-definition options\n *\n * @param hotkeys - Array of hotkey definitions, or getter returning them\n * @param commonOptions - Shared options for all hotkeys, or getter\n *\n * @example\n * ```ts\n * @Component({ ... })\n * export class EditorComponent {\n *   constructor() {\n *     injectHotkeys([\n *       { hotkey: 'Mod+S', callback: () => this.save() },\n *       { hotkey: 'Mod+Z', callback: () => this.undo() },\n *       { hotkey: 'Escape', callback: () => this.close() },\n *     ])\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * @Component({ ... })\n * export class DynamicShortcuts {\n *   shortcuts = signal([...])\n *\n *   constructor() {\n *     injectHotkeys(\n *       () => this.shortcuts().map((s) => ({\n *         hotkey: s.key,\n *         callback: s.action,\n *       })),\n *     )\n *   }\n * }\n * ```\n */\nexport function injectHotkeys(\n  hotkeys:\n    | Array<InjectHotkeyDefinition>\n    | (() => Array<InjectHotkeyDefinition>),\n  commonOptions: InjectHotkeyOptions | (() => InjectHotkeyOptions) = {},\n): void {\n  type RegistrationRecord = {\n    handle: HotkeyRegistrationHandle\n    target: Document | HTMLElement | Window\n  }\n\n  const defaultOptions = injectDefaultHotkeysOptions()\n  const manager = getHotkeyManager()\n  const destroyRef = inject(DestroyRef)\n\n  const registrations = new Map<string, RegistrationRecord>()\n\n  destroyRef.onDestroy(() => {\n    for (const { handle } of registrations.values()) {\n      if (handle.isActive) {\n        handle.unregister()\n      }\n    }\n    registrations.clear()\n  })\n\n  effect(() => {\n    const resolvedHotkeys = typeof hotkeys === 'function' ? hotkeys() : hotkeys\n    const resolvedCommonOptions =\n      typeof commonOptions === 'function' ? commonOptions() : commonOptions\n\n    const nextKeys = new Set<string>()\n    const prepared: Array<{\n      registrationKey: string\n      def: InjectHotkeyDefinition\n      mergedOptions: InjectHotkeyOptions\n      hotkeyString: Hotkey\n      resolvedTarget: Document | HTMLElement | Window\n    }> = []\n\n    for (let i = 0; i < resolvedHotkeys.length; i++) {\n      const def = resolvedHotkeys[i]!\n      const resolvedHotkey =\n        typeof def.hotkey === 'function' ? def.hotkey() : def.hotkey\n      const resolvedDefOptions =\n        typeof def.options === 'function' ? def.options() : (def.options ?? {})\n\n      const mergedOptions = {\n        ...defaultOptions.hotkey,\n        ...resolvedCommonOptions,\n        ...resolvedDefOptions,\n      } as InjectHotkeyOptions\n\n      const platform = mergedOptions.platform ?? detectPlatform()\n      const hotkeyString = normalizeRegisterableHotkey(resolvedHotkey, platform)\n\n      const resolvedTarget =\n        'target' in mergedOptions\n          ? (mergedOptions.target ?? null)\n          : typeof document !== 'undefined'\n            ? document\n            : null\n\n      if (!resolvedTarget) {\n        continue\n      }\n\n      const registrationKey = `${i}:${hotkeyString}`\n      nextKeys.add(registrationKey)\n      prepared.push({\n        registrationKey,\n        def,\n        mergedOptions,\n        hotkeyString,\n        resolvedTarget,\n      })\n    }\n\n    for (const [key, record] of [...registrations.entries()]) {\n      if (!nextKeys.has(key)) {\n        if (record.handle.isActive) {\n          record.handle.unregister()\n        }\n        registrations.delete(key)\n      }\n    }\n\n    for (const p of prepared) {\n      const existing = registrations.get(p.registrationKey)\n      if (existing?.handle.isActive && existing.target === p.resolvedTarget) {\n        existing.handle.callback = p.def.callback\n        const { target: _target, ...optionsWithoutTarget } = p.mergedOptions\n        existing.handle.setOptions(optionsWithoutTarget)\n        continue\n      }\n\n      if (existing) {\n        if (existing.handle.isActive) {\n          existing.handle.unregister()\n        }\n        registrations.delete(p.registrationKey)\n      }\n\n      const { target: _target, ...optionsWithoutTarget } = p.mergedOptions\n      const handle = manager.register(p.hotkeyString, p.def.callback, {\n        ...optionsWithoutTarget,\n        target: p.resolvedTarget,\n      })\n      registrations.set(p.registrationKey, {\n        handle,\n        target: p.resolvedTarget,\n      })\n    }\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAgB,cACd,SAGA,gBAAmE,EAAE,EAC/D;CAMN,MAAM,iBAAiB,6BAA6B;CACpD,MAAM,UAAU,kBAAkB;CAClC,MAAM,aAAa,OAAO,WAAW;CAErC,MAAM,gCAAgB,IAAI,KAAiC;AAE3D,YAAW,gBAAgB;AACzB,OAAK,MAAM,EAAE,YAAY,cAAc,QAAQ,CAC7C,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,gBAAc,OAAO;GACrB;AAEF,cAAa;EACX,MAAM,kBAAkB,OAAO,YAAY,aAAa,SAAS,GAAG;EACpE,MAAM,wBACJ,OAAO,kBAAkB,aAAa,eAAe,GAAG;EAE1D,MAAM,2BAAW,IAAI,KAAa;EAClC,MAAM,WAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;GAC/C,MAAM,MAAM,gBAAgB;GAC5B,MAAM,iBACJ,OAAO,IAAI,WAAW,aAAa,IAAI,QAAQ,GAAG,IAAI;GACxD,MAAM,qBACJ,OAAO,IAAI,YAAY,aAAa,IAAI,SAAS,GAAI,IAAI,WAAW,EAAE;GAExE,MAAM,gBAAgB;IACpB,GAAG,eAAe;IAClB,GAAG;IACH,GAAG;IACJ;GAGD,MAAM,eAAe,4BAA4B,gBADhC,cAAc,YAAY,gBAAgB,CACe;GAE1E,MAAM,iBACJ,YAAY,gBACP,cAAc,UAAU,OACzB,OAAO,aAAa,cAClB,WACA;AAER,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,YAAS,IAAI,gBAAgB;AAC7B,YAAS,KAAK;IACZ;IACA;IACA;IACA;IACA;IACD,CAAC;;AAGJ,OAAK,MAAM,CAAC,KAAK,WAAW,CAAC,GAAG,cAAc,SAAS,CAAC,CACtD,KAAI,CAAC,SAAS,IAAI,IAAI,EAAE;AACtB,OAAI,OAAO,OAAO,SAChB,QAAO,OAAO,YAAY;AAE5B,iBAAc,OAAO,IAAI;;AAI7B,OAAK,MAAM,KAAK,UAAU;GACxB,MAAM,WAAW,cAAc,IAAI,EAAE,gBAAgB;AACrD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,EAAE,gBAAgB;AACrE,aAAS,OAAO,WAAW,EAAE,IAAI;IACjC,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB,EAAE;AACvD,aAAS,OAAO,WAAW,qBAAqB;AAChD;;AAGF,OAAI,UAAU;AACZ,QAAI,SAAS,OAAO,SAClB,UAAS,OAAO,YAAY;AAE9B,kBAAc,OAAO,EAAE,gBAAgB;;GAGzC,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB,EAAE;GACvD,MAAM,SAAS,QAAQ,SAAS,EAAE,cAAc,EAAE,IAAI,UAAU;IAC9D,GAAG;IACH,QAAQ,EAAE;IACX,CAAC;AACF,iBAAc,IAAI,EAAE,iBAAiB;IACnC;IACA,QAAQ,EAAE;IACX,CAAC;;GAEJ"}

package/dist/injectKeyHold.cjs

@@ -1,49 +0,0 @@
-let _tanstack_hotkeys = require("@tanstack/hotkeys");
-let _angular_core = require("@angular/core");
-let _tanstack_angular_store = require("@tanstack/angular-store");
-
-//#region src/injectKeyHold.ts
-/**
-* Angular inject-based API that returns a signal that is true when the given key is held.
-*
-* Subscribes to the global KeyStateTracker and uses a computed to determine
-* if the specified key is held.
-*
-* @param key - The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function
-* @returns Signal that returns true if the key is currently held down
-*
-* @example
-* ```ts
-* @Component({
-*   template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,
-* })
-* export class ShiftIndicatorComponent {
-*   isShiftHeld = injectKeyHold('Shift')
-* }
-* ```
-*
-* @example
-* ```ts
-* @Component({
-*   template: `
-*     <span [style.opacity]="ctrl() ? 1 : 0.3">Ctrl</span>
-*     <span [style.opacity]="shift() ? 1 : 0.3">Shift</span>
-*   `,
-* })
-* export class ModifierIndicatorsComponent {
-*   ctrl = injectKeyHold('Control')
-*   shift = injectKeyHold('Shift')
-* }
-* ```
-*/
-function injectKeyHold(key) {
-	const heldKeysSelector = (0, _tanstack_angular_store.injectSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
-	return (0, _angular_core.computed)(() => {
-		const normalizedKey = (typeof key === "function" ? key() : key).toLowerCase();
-		return heldKeysSelector().some((heldKey) => heldKey.toLowerCase() === normalizedKey);
-	});
-}
-
-//#endregion
-exports.injectKeyHold = injectKeyHold;
-//# sourceMappingURL=injectKeyHold.cjs.map

package/dist/injectKeyHold.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"injectKeyHold.cjs","names":[],"sources":["../src/injectKeyHold.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectSelector } from '@tanstack/angular-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal that is true when the given key is held.\n *\n * Subscribes to the global KeyStateTracker and uses a computed to determine\n * if the specified key is held.\n *\n * @param key - The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function\n * @returns Signal that returns true if the key is currently held down\n *\n * @example\n * ```ts\n * @Component({\n *   template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,\n * })\n * export class ShiftIndicatorComponent {\n *   isShiftHeld = injectKeyHold('Shift')\n * }\n * ```\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     <span [style.opacity]=\"ctrl() ? 1 : 0.3\">Ctrl</span>\n *     <span [style.opacity]=\"shift() ? 1 : 0.3\">Shift</span>\n *   `,\n * })\n * export class ModifierIndicatorsComponent {\n *   ctrl = injectKeyHold('Control')\n *   shift = injectKeyHold('Shift')\n * }\n * ```\n */\nexport function injectKeyHold(\n  key: IndividualKey | (() => IndividualKey),\n): Signal<boolean> {\n  const tracker = getKeyStateTracker()\n  const heldKeysSelector = injectSelector(\n    tracker.store,\n    (state) => state.heldKeys,\n  )\n\n  return computed(() => {\n    const resolvedKey = typeof key === 'function' ? key() : key\n    const normalizedKey = resolvedKey.toLowerCase()\n\n    return heldKeysSelector().some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,cACd,KACiB;CAEjB,MAAM,0GAD8B,CAE1B,QACP,UAAU,MAAM,SAClB;AAED,0CAAsB;EAEpB,MAAM,iBADc,OAAO,QAAQ,aAAa,KAAK,GAAG,KACtB,aAAa;AAE/C,SAAO,kBAAkB,CAAC,MACvB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}

package/dist/injectKeyHold.d.cts

@@ -1,41 +0,0 @@
-import { IndividualKey } from "@tanstack/hotkeys";
-import { Signal } from "@angular/core";
-
-//#region src/injectKeyHold.d.ts
-/**
- * Angular inject-based API that returns a signal that is true when the given key is held.
- *
- * Subscribes to the global KeyStateTracker and uses a computed to determine
- * if the specified key is held.
- *
- * @param key - The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function
- * @returns Signal that returns true if the key is currently held down
- *
- * @example
- * ```ts
- * @Component({
- *   template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,
- * })
- * export class ShiftIndicatorComponent {
- *   isShiftHeld = injectKeyHold('Shift')
- * }
- * ```
- *
- * @example
- * ```ts
- * @Component({
- *   template: `
- *     <span [style.opacity]="ctrl() ? 1 : 0.3">Ctrl</span>
- *     <span [style.opacity]="shift() ? 1 : 0.3">Shift</span>
- *   `,
- * })
- * export class ModifierIndicatorsComponent {
- *   ctrl = injectKeyHold('Control')
- *   shift = injectKeyHold('Shift')
- * }
- * ```
- */
-declare function injectKeyHold(key: IndividualKey | (() => IndividualKey)): Signal<boolean>;
-//#endregion
-export { injectKeyHold };
-//# sourceMappingURL=injectKeyHold.d.cts.map

package/dist/injectKeyHold.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"injectKeyHold.js","names":[],"sources":["../src/injectKeyHold.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectSelector } from '@tanstack/angular-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal that is true when the given key is held.\n *\n * Subscribes to the global KeyStateTracker and uses a computed to determine\n * if the specified key is held.\n *\n * @param key - The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function\n * @returns Signal that returns true if the key is currently held down\n *\n * @example\n * ```ts\n * @Component({\n *   template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,\n * })\n * export class ShiftIndicatorComponent {\n *   isShiftHeld = injectKeyHold('Shift')\n * }\n * ```\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     <span [style.opacity]=\"ctrl() ? 1 : 0.3\">Ctrl</span>\n *     <span [style.opacity]=\"shift() ? 1 : 0.3\">Shift</span>\n *   `,\n * })\n * export class ModifierIndicatorsComponent {\n *   ctrl = injectKeyHold('Control')\n *   shift = injectKeyHold('Shift')\n * }\n * ```\n */\nexport function injectKeyHold(\n  key: IndividualKey | (() => IndividualKey),\n): Signal<boolean> {\n  const tracker = getKeyStateTracker()\n  const heldKeysSelector = injectSelector(\n    tracker.store,\n    (state) => state.heldKeys,\n  )\n\n  return computed(() => {\n    const resolvedKey = typeof key === 'function' ? key() : key\n    const normalizedKey = resolvedKey.toLowerCase()\n\n    return heldKeysSelector().some(\n      (heldKey) => heldKey.toLowerCase() === normalizedKey,\n    )\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,cACd,KACiB;CAEjB,MAAM,mBAAmB,eADT,oBAAoB,CAE1B,QACP,UAAU,MAAM,SAClB;AAED,QAAO,eAAe;EAEpB,MAAM,iBADc,OAAO,QAAQ,aAAa,KAAK,GAAG,KACtB,aAAa;AAE/C,SAAO,kBAAkB,CAAC,MACvB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}

package/src/hotkeys-provider.ts

@@ -1,44 +0,0 @@
-import { InjectionToken, inject } from '@angular/core'
-import type {
-  HotkeyRecorderOptions,
-  HotkeySequenceRecorderOptions,
-} from '@tanstack/hotkeys'
-import type { InjectHotkeyOptions } from './injectHotkey'
-import type { InjectHotkeySequenceOptions } from './injectHotkeySequence'
-import type { StaticProvider } from '@angular/core'
-
-export interface HotkeysProviderOptions {
-  hotkey?: Partial<InjectHotkeyOptions>
-  hotkeyRecorder?: Partial<HotkeyRecorderOptions>
-  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
-  hotkeySequence?: Partial<InjectHotkeySequenceOptions>
-}
-
-export interface HotkeysContextValue {
-  readonly defaultOptions: HotkeysProviderOptions
-}
-
-export const HOTKEYS_INJECTION_TOKEN = new InjectionToken<HotkeysContextValue>(
-  'HOTKEYS_INJECTION_TOKEN',
-  {
-    providedIn: 'root',
-    factory: () => ({ defaultOptions: {} }),
-  },
-)
-
-export function provideHotkeys(
-  defaultOptions: HotkeysProviderOptions,
-): StaticProvider {
-  return {
-    provide: HOTKEYS_INJECTION_TOKEN,
-    useValue: { defaultOptions },
-  }
-}
-
-export function injectHotkeysContext(): HotkeysContextValue {
-  return inject(HOTKEYS_INJECTION_TOKEN)
-}
-
-export function injectDefaultHotkeysOptions(): HotkeysProviderOptions {
-  return injectHotkeysContext().defaultOptions
-}

package/src/index.ts

@@ -1,18 +0,0 @@
-// Re-export everything from the core package
-export * from '@tanstack/hotkeys'
-
-// Provider
-export * from './hotkeys-provider'
-
-// Angular-specific primitives
-export * from './injectHotkey'
-export * from './injectHotkeys'
-export * from './injectHotkeySequence'
-export * from './injectHotkeySequences'
-export * from './injectHeldKeys'
-export * from './injectHeldKeyCodes'
-export * from './injectKeyHold'
-export * from './injectHotkeyRecorder'
-export * from './injectHotkeyRegistrations'
-export * from './injectHotkeySequenceRecorder'
-export * from './injectHotkeyHint'

package/src/injectHeldKeyCodes.ts

@@ -1,31 +0,0 @@
-import { getKeyStateTracker } from '@tanstack/hotkeys'
-import { injectSelector } from '@tanstack/angular-store'
-import type { Signal } from '@angular/core'
-
-/**
- * Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.
- *
- * Useful for debugging which physical key was pressed (e.g. distinguishing
- * left vs right Shift via "ShiftLeft" / "ShiftRight").
- *
- * @returns Signal of record mapping normalized key names to their `event.code` values
- *
- * @example
- * ```ts
- * @Component({
- *   template: `
- *     @for (key of heldKeys(); track key) {
- *       <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>
- *     }
- *   `,
- * })
- * export class KeyDebugComponent {
- *   heldKeys = injectHeldKeys()
- *   heldCodes = injectHeldKeyCodes()
- * }
- * ```
- */
-export function injectHeldKeyCodes(): Signal<Record<string, string>> {
-  const tracker = getKeyStateTracker()
-  return injectSelector(tracker.store, (state) => state.heldCodes)
-}

package/src/injectHeldKeys.ts

@@ -1,26 +0,0 @@
-import { getKeyStateTracker } from '@tanstack/hotkeys'
-import { injectSelector } from '@tanstack/angular-store'
-import type { Signal } from '@angular/core'
-
-/**
- * Angular inject-based API that returns a signal of currently held keyboard keys.
- *
- * Subscribes to the global KeyStateTracker and updates whenever keys are
- * pressed or released.
- *
- * @returns Signal of array of currently held key names
- *
- * @example
- * ```ts
- * @Component({
- *   template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,
- * })
- * export class KeyDisplayComponent {
- *   heldKeys = injectHeldKeys()
- * }
- * ```
- */
-export function injectHeldKeys(): Signal<Array<string>> {
-  const tracker = getKeyStateTracker()
-  return injectSelector(tracker.store, (state) => state.heldKeys)
-}

package/src/injectHotkey.ts

@@ -1,171 +0,0 @@
-import { DestroyRef, effect, inject } from '@angular/core'
-import {
-  detectPlatform,
-  getHotkeyManager,
-  normalizeRegisterableHotkey,
-} from '@tanstack/hotkeys'
-import { injectDefaultHotkeysOptions } from './hotkeys-provider'
-import type {
-  Hotkey,
-  HotkeyCallback,
-  HotkeyOptions,
-  HotkeyRegistrationHandle,
-  RegisterableHotkey,
-} from '@tanstack/hotkeys'
-
-export interface InjectHotkeyOptions extends Omit<HotkeyOptions, 'target'> {
-  /**
-   * The DOM element to attach the event listener to.
-   * Can be a direct DOM element, an accessor (for reactive targets that become
-   * available after mount), or null. Defaults to document.
-   * When using scoped targets, pass an accessor: () => ({ target: elementSignal() })
-   * so the hotkey waits for the element to be attached before registering.
-   */
-  target?: HTMLElement | Document | Window | null
-}
-
-/**
- * Angular inject-based API 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.
- *
- * Call in an injection context (e.g. constructor or field initializer).
- * Uses effect() to track reactive dependencies and update registration
- * when options or the callback change.
- * `enabled: false` keeps the registration (visible in devtools) and only suppresses firing; the same
- * handle is updated instead of unregistering and re-registering when identity is unchanged.
- *
- * @param hotkey - The hotkey string (e.g. 'Mod+S', 'Escape') or getter function
- * @param callback - The function to call when the hotkey is pressed
- * @param options - Options for the hotkey behavior, or getter for reactive options
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class SaveButtonComponent {
- *   private readonly saveCount = signal(0)
- *
- *   constructor() {
- *     injectHotkey('Mod+S', (event, { hotkey }) => {
- *       event.preventDefault()
- *       this.saveCount.update(c => c + 1)
- *     })
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class ModalComponent {
- *   isOpen = signal(true)
- *
- *   constructor() {
- *     injectHotkey('Escape', () => this.close(), () => ({ enabled: this.isOpen() }))
- *   }
- * }
- * ```
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class EditorComponent {
- *   private readonly editorRef = viewChild<ElementRef<HTMLDivElement>>('editorRef')
- *
- *   constructor() {
- *     injectHotkey('Mod+B', () => this.toggleBold(), () => ({
- *       target: this.editorRef()?.nativeElement ?? null,
- *     }))
- *   }
- * }
- * ```
- */
-export function injectHotkey(
-  hotkey: RegisterableHotkey | (() => RegisterableHotkey),
-  callback: HotkeyCallback,
-  options: InjectHotkeyOptions | (() => InjectHotkeyOptions) = {},
-): void {
-  const defaultOptions = injectDefaultHotkeysOptions()
-  const manager = getHotkeyManager()
-  const destroyRef = inject(DestroyRef)
-
-  let registration: HotkeyRegistrationHandle | null = null
-  let lastHotkeyString: Hotkey | null = null
-  let lastTarget: HTMLElement | Document | Window | null = null
-
-  destroyRef.onDestroy(() => {
-    if (registration?.isActive) {
-      registration.unregister()
-      registration = null
-    }
-    lastHotkeyString = null
-    lastTarget = null
-  })
-
-  effect(() => {
-    // Resolve reactive values
-    const resolvedHotkey = typeof hotkey === 'function' ? hotkey() : hotkey
-    const resolvedOptions = typeof options === 'function' ? options() : options
-
-    const mergedOptions = {
-      ...defaultOptions.hotkey,
-      ...resolvedOptions,
-    } as InjectHotkeyOptions
-
-    // Normalize to hotkey string
-    const platform = mergedOptions.platform ?? detectPlatform()
-    const hotkeyString = normalizeRegisterableHotkey(resolvedHotkey, platform)
-
-    // Resolve target: when explicitly provided (even as null), use it and skip if null.
-    // When not provided, default to document. Matches React's ref handling.
-    const resolvedTarget =
-      'target' in mergedOptions
-        ? (mergedOptions.target ?? null)
-        : typeof document !== 'undefined'
-          ? document
-          : null
-
-    if (!resolvedTarget) {
-      if (registration?.isActive) {
-        registration.unregister()
-        registration = null
-      }
-      lastHotkeyString = null
-      lastTarget = null
-      return
-    }
-
-    // Extract options without target (target is handled separately)
-    const { target: _target, ...optionsWithoutTarget } = mergedOptions
-
-    if (
-      registration?.isActive &&
-      lastHotkeyString === hotkeyString &&
-      lastTarget === resolvedTarget
-    ) {
-      registration.callback = callback
-      registration.setOptions(optionsWithoutTarget)
-      return
-    }
-
-    if (registration?.isActive) {
-      registration.unregister()
-      registration = null
-    }
-
-    registration = manager.register(hotkeyString, callback, {
-      ...optionsWithoutTarget,
-      target: resolvedTarget,
-    })
-
-    if (registration.isActive) {
-      registration.callback = callback
-      registration.setOptions(optionsWithoutTarget)
-    }
-
-    lastHotkeyString = hotkeyString
-    lastTarget = resolvedTarget
-  })
-}

package/src/injectHotkeyHint.ts

@@ -1,29 +0,0 @@
-import { computed } from '@angular/core'
-import { injectSelector } from '@tanstack/angular-store'
-import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'
-import type { Signal } from '@angular/core'
-import type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'
-
-/**
- * Returns a computed signal indicating whether held modifiers reveal this shortcut.
- * Call in an injection context; pass signal getters for changing inputs.
- * 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 injectHotkeyHint(
-  hotkey: RegisterableHotkey | (() => RegisterableHotkey),
-  options: HeldModifierOptions | (() => HeldModifierOptions) = {},
-): Signal<boolean> {
-  const held = injectSelector(
-    getKeyStateTracker().store,
-    (state) => state.heldKeys,
-  )
-  return computed(() =>
-    matchesHeldModifiers(
-      typeof hotkey === 'function' ? hotkey() : hotkey,
-      held(),
-      typeof options === 'function' ? options() : options,
-    ),
-  )
-}

package/src/injectHotkeyRecorder.ts

@@ -1,128 +0,0 @@
-import {
-  DestroyRef,
-  computed,
-  effect,
-  inject,
-  linkedSignal,
-  untracked,
-} from '@angular/core'
-import { HotkeyRecorder } from '@tanstack/hotkeys'
-import { injectDefaultHotkeysOptions } from './hotkeys-provider'
-import type { Atom, ReadonlyAtom } from '@tanstack/angular-store'
-import type { Signal } from '@angular/core'
-import type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'
-
-export interface AngularHotkeyRecorder {
-  /** Whether recording is currently active */
-  readonly isRecording: () => boolean
-  /** The currently recorded hotkey (for live preview) */
-  readonly recordedHotkey: () => Hotkey | null
-  /** Start recording a new hotkey */
-  readonly startRecording: () => void
-  /** Stop recording (same as cancel) */
-  readonly stopRecording: () => void
-  /** Cancel recording without saving */
-  readonly cancelRecording: () => void
-}
-
-/**
- * Angular inject-based API for recording keyboard shortcuts.
- *
- * Thin wrapper around the framework-agnostic HotkeyRecorder class: captures
- * keyboard events, converts them to hotkey strings, and handles Escape to
- * cancel or Backspace/Delete to clear.
- *
- * @param options - Configuration options for the recorder (or getter)
- * @returns Object with recording state signals and control functions
- *
- * @example
- * ```ts
- * @Component({ ... })
- * export class ShortcutSettingsComponent {
- *   shortcut = signal<Hotkey>('Mod+S')
- *   recorder = injectHotkeyRecorder({
- *     onRecord: (hotkey) => this.shortcut.set(hotkey),
- *     onCancel: () => console.log('Recording cancelled'),
- *   })
- *
- *   constructor() {
- *     injectHotkey(
- *       () => this.shortcut(),
- *       () => this.handleSave(),
- *       () => ({ enabled: !this.recorder.isRecording() }),
- *     )
- *   }
- * }
- * ```
- */
-export function injectHotkeyRecorder(
-  options: HotkeyRecorderOptions | (() => HotkeyRecorderOptions),
-): AngularHotkeyRecorder {
-  const defaultOptions = injectDefaultHotkeysOptions()
-  const destroyRef = inject(DestroyRef)
-
-  // Stable signal to lazy initialize the recorder
-  const recorderSignal = computed(() =>
-    untracked(() => {
-      const resolvedOptions =
-        typeof options === 'function' ? options() : options
-
-      const mergedOptions = {
-        ...defaultOptions.hotkeyRecorder,
-        ...resolvedOptions,
-      } as HotkeyRecorderOptions
-
-      return new HotkeyRecorder(mergedOptions)
-    }),
-  )
-
-  // Subscribe to recorder state
-  const recorderStore = computed(() => untracked(() => recorderSignal().store))
-  const isRecording = injectLazyStore(
-    recorderStore,
-    (state) => state.isRecording,
-  )
-  const recordedHotkey = injectLazyStore(
-    recorderStore,
-    (state) => state.recordedHotkey,
-  )
-
-  // Sync options on every effect run (matches React's sync on render)
-  effect(() => {
-    const resolved = typeof options === 'function' ? options() : options
-    recorderSignal().setOptions({
-      ...defaultOptions.hotkeyRecorder,
-      ...resolved,
-    } as HotkeyRecorderOptions)
-  })
-
-  destroyRef.onDestroy(() => {
-    recorderSignal().destroy()
-  })
-
-  return {
-    isRecording,
-    recordedHotkey,
-    startRecording: () => recorderSignal().start(),
-    stopRecording: () => recorderSignal().stop(),
-    cancelRecording: () => recorderSignal().cancel(),
-  }
-}
-
-function injectLazyStore<TState, TSelected = NoInfer<TState>>(
-  storeSignal: Signal<Atom<TState> | ReadonlyAtom<TState>>,
-  selector: (state: NoInfer<TState>) => TSelected,
-): Signal<TSelected> {
-  const slice = linkedSignal(() => selector(storeSignal().get()))
-
-  effect((onCleanup) => {
-    const currentStore = storeSignal()
-    slice.set(selector(currentStore.get()))
-    const { unsubscribe } = currentStore.subscribe((s) => {
-      slice.set(selector(s))
-    })
-    onCleanup(() => unsubscribe())
-  })
-
-  return slice.asReadonly()
-}