@tanstack/angular-hotkeys 0.9.1 → 0.11.0

package/README.md

@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_hotkeys.png" alt="TanStack Hotkeys" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/hotkeys.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/hotkeys.png"
+      alt="TanStack Hotkeys"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />

package/dist/index.cjs

@@ -10,12 +10,14 @@ const require_injectKeyHold = require('./injectKeyHold.cjs');
 const require_injectHotkeyRecorder = require('./injectHotkeyRecorder.cjs');
 const require_injectHotkeyRegistrations = require('./injectHotkeyRegistrations.cjs');
 const require_injectHotkeySequenceRecorder = require('./injectHotkeySequenceRecorder.cjs');
+const require_injectHotkeyHint = require('./injectHotkeyHint.cjs');
 
 exports.HOTKEYS_INJECTION_TOKEN = require_hotkeys_provider.HOTKEYS_INJECTION_TOKEN;
 exports.injectDefaultHotkeysOptions = require_hotkeys_provider.injectDefaultHotkeysOptions;
 exports.injectHeldKeyCodes = require_injectHeldKeyCodes.injectHeldKeyCodes;
 exports.injectHeldKeys = require_injectHeldKeys.injectHeldKeys;
 exports.injectHotkey = require_injectHotkey.injectHotkey;
+exports.injectHotkeyHint = require_injectHotkeyHint.injectHotkeyHint;
 exports.injectHotkeyRecorder = require_injectHotkeyRecorder.injectHotkeyRecorder;
 exports.injectHotkeyRegistrations = require_injectHotkeyRegistrations.injectHotkeyRegistrations;
 exports.injectHotkeySequence = require_injectHotkeySequence.injectHotkeySequence;

package/dist/index.d.cts

@@ -9,5 +9,6 @@ import { injectKeyHold } from "./injectKeyHold.cjs";
 import { AngularHotkeyRecorder, injectHotkeyRecorder } from "./injectHotkeyRecorder.cjs";
 import { HotkeyRegistrationsResult, injectHotkeyRegistrations } from "./injectHotkeyRegistrations.cjs";
 import { AngularHotkeySequenceRecorder, injectHotkeySequenceRecorder } from "./injectHotkeySequenceRecorder.cjs";
+import { injectHotkeyHint } from "./injectHotkeyHint.cjs";
 export * from "@tanstack/hotkeys";
-export { AngularHotkeyRecorder, AngularHotkeySequenceRecorder, HOTKEYS_INJECTION_TOKEN, HotkeyRegistrationsResult, HotkeysContextValue, HotkeysProviderOptions, InjectHotkeyDefinition, InjectHotkeyOptions, InjectHotkeySequenceDefinition, InjectHotkeySequenceOptions, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };
+export { AngularHotkeyRecorder, AngularHotkeySequenceRecorder, HOTKEYS_INJECTION_TOKEN, HotkeyRegistrationsResult, HotkeysContextValue, HotkeysProviderOptions, InjectHotkeyDefinition, InjectHotkeyOptions, InjectHotkeySequenceDefinition, InjectHotkeySequenceOptions, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyHint, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };

package/dist/index.d.ts

@@ -9,5 +9,6 @@ import { injectKeyHold } from "./injectKeyHold.js";
 import { AngularHotkeyRecorder, injectHotkeyRecorder } from "./injectHotkeyRecorder.js";
 import { HotkeyRegistrationsResult, injectHotkeyRegistrations } from "./injectHotkeyRegistrations.js";
 import { AngularHotkeySequenceRecorder, injectHotkeySequenceRecorder } from "./injectHotkeySequenceRecorder.js";
+import { injectHotkeyHint } from "./injectHotkeyHint.js";
 export * from "@tanstack/hotkeys";
-export { AngularHotkeyRecorder, AngularHotkeySequenceRecorder, HOTKEYS_INJECTION_TOKEN, HotkeyRegistrationsResult, HotkeysContextValue, HotkeysProviderOptions, InjectHotkeyDefinition, InjectHotkeyOptions, InjectHotkeySequenceDefinition, InjectHotkeySequenceOptions, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };
+export { AngularHotkeyRecorder, AngularHotkeySequenceRecorder, HOTKEYS_INJECTION_TOKEN, HotkeyRegistrationsResult, HotkeysContextValue, HotkeysProviderOptions, InjectHotkeyDefinition, InjectHotkeyOptions, InjectHotkeySequenceDefinition, InjectHotkeySequenceOptions, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyHint, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };

package/dist/index.js

@@ -9,7 +9,8 @@ import { injectKeyHold } from "./injectKeyHold.js";
 import { injectHotkeyRecorder } from "./injectHotkeyRecorder.js";
 import { injectHotkeyRegistrations } from "./injectHotkeyRegistrations.js";
 import { injectHotkeySequenceRecorder } from "./injectHotkeySequenceRecorder.js";
+import { injectHotkeyHint } from "./injectHotkeyHint.js";
 
 export * from "@tanstack/hotkeys"
 
-export { HOTKEYS_INJECTION_TOKEN, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };
+export { HOTKEYS_INJECTION_TOKEN, injectDefaultHotkeysOptions, injectHeldKeyCodes, injectHeldKeys, injectHotkey, injectHotkeyHint, injectHotkeyRecorder, injectHotkeyRegistrations, injectHotkeySequence, injectHotkeySequenceRecorder, injectHotkeySequences, injectHotkeys, injectHotkeysContext, injectKeyHold, provideHotkeys };

package/dist/injectHeldKeyCodes.cjs

@@ -26,7 +26,7 @@ let _tanstack_angular_store = require("@tanstack/angular-store");
 * ```
 */
 function injectHeldKeyCodes() {
-	return (0, _tanstack_angular_store.injectStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
+	return (0, _tanstack_angular_store.injectSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
 }
 
 //#endregion

package/dist/injectHeldKeyCodes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectHeldKeyCodes.cjs","names":[],"sources":["../src/injectHeldKeyCodes.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectStore } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.\n *\n * Useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Signal of record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     @for (key of heldKeys(); track key) {\n *       <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>\n *     }\n *   `,\n * })\n * export class KeyDebugComponent {\n *   heldKeys = injectHeldKeys()\n *   heldCodes = injectHeldKeyCodes()\n * }\n * ```\n */\nexport function injectHeldKeyCodes(): Signal<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return injectStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,qBAAqD;AAEnE,4FADoC,CACT,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"injectHeldKeyCodes.cjs","names":[],"sources":["../src/injectHeldKeyCodes.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectSelector } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.\n *\n * Useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Signal of record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     @for (key of heldKeys(); track key) {\n *       <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>\n *     }\n *   `,\n * })\n * export class KeyDebugComponent {\n *   heldKeys = injectHeldKeys()\n *   heldCodes = injectHeldKeyCodes()\n * }\n * ```\n */\nexport function injectHeldKeyCodes(): Signal<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return injectSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,qBAAqD;AAEnE,+FADoC,CACN,QAAQ,UAAU,MAAM,UAAU"}

package/dist/injectHeldKeyCodes.js

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { injectStore } from "@tanstack/angular-store";
+import { injectSelector } from "@tanstack/angular-store";
 
 //#region src/injectHeldKeyCodes.ts
 /**
@@ -26,7 +26,7 @@ import { injectStore } from "@tanstack/angular-store";
 * ```
 */
 function injectHeldKeyCodes() {
-	return injectStore(getKeyStateTracker().store, (state) => state.heldCodes);
+	return injectSelector(getKeyStateTracker().store, (state) => state.heldCodes);
 }
 
 //#endregion

package/dist/injectHeldKeyCodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectHeldKeyCodes.js","names":[],"sources":["../src/injectHeldKeyCodes.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectStore } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.\n *\n * Useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Signal of record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     @for (key of heldKeys(); track key) {\n *       <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>\n *     }\n *   `,\n * })\n * export class KeyDebugComponent {\n *   heldKeys = injectHeldKeys()\n *   heldCodes = injectHeldKeyCodes()\n * }\n * ```\n */\nexport function injectHeldKeyCodes(): Signal<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return injectStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,qBAAqD;AAEnE,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,UAAU"}
+{"version":3,"file":"injectHeldKeyCodes.js","names":[],"sources":["../src/injectHeldKeyCodes.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectSelector } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of a map from held key names to their physical `event.code` values.\n *\n * Useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Signal of record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```ts\n * @Component({\n *   template: `\n *     @for (key of heldKeys(); track key) {\n *       <kbd>{{ key }} <small>{{ heldCodes()[key] }}</small></kbd>\n *     }\n *   `,\n * })\n * export class KeyDebugComponent {\n *   heldKeys = injectHeldKeys()\n *   heldCodes = injectHeldKeyCodes()\n * }\n * ```\n */\nexport function injectHeldKeyCodes(): Signal<Record<string, string>> {\n  const tracker = getKeyStateTracker()\n  return injectSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,qBAAqD;AAEnE,QAAO,eADS,oBAAoB,CACN,QAAQ,UAAU,MAAM,UAAU"}

package/dist/injectHeldKeys.cjs

@@ -21,7 +21,7 @@ let _tanstack_angular_store = require("@tanstack/angular-store");
 * ```
 */
 function injectHeldKeys() {
-	return (0, _tanstack_angular_store.injectStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, _tanstack_angular_store.injectSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
 }
 
 //#endregion

package/dist/injectHeldKeys.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectHeldKeys.cjs","names":[],"sources":["../src/injectHeldKeys.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectStore } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of currently held keyboard keys.\n *\n * Subscribes to the global KeyStateTracker and updates whenever keys are\n * pressed or released.\n *\n * @returns Signal of array of currently held key names\n *\n * @example\n * ```ts\n * @Component({\n *   template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,\n * })\n * export class KeyDisplayComponent {\n *   heldKeys = injectHeldKeys()\n * }\n * ```\n */\nexport function injectHeldKeys(): Signal<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return injectStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,iBAAwC;AAEtD,4FADoC,CACT,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"injectHeldKeys.cjs","names":[],"sources":["../src/injectHeldKeys.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectSelector } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of currently held keyboard keys.\n *\n * Subscribes to the global KeyStateTracker and updates whenever keys are\n * pressed or released.\n *\n * @returns Signal of array of currently held key names\n *\n * @example\n * ```ts\n * @Component({\n *   template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,\n * })\n * export class KeyDisplayComponent {\n *   heldKeys = injectHeldKeys()\n * }\n * ```\n */\nexport function injectHeldKeys(): Signal<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return injectSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,iBAAwC;AAEtD,+FADoC,CACN,QAAQ,UAAU,MAAM,SAAS"}

package/dist/injectHeldKeys.js

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { injectStore } from "@tanstack/angular-store";
+import { injectSelector } from "@tanstack/angular-store";
 
 //#region src/injectHeldKeys.ts
 /**
@@ -21,7 +21,7 @@ import { injectStore } from "@tanstack/angular-store";
 * ```
 */
 function injectHeldKeys() {
-	return injectStore(getKeyStateTracker().store, (state) => state.heldKeys);
+	return injectSelector(getKeyStateTracker().store, (state) => state.heldKeys);
 }
 
 //#endregion

package/dist/injectHeldKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectHeldKeys.js","names":[],"sources":["../src/injectHeldKeys.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectStore } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of currently held keyboard keys.\n *\n * Subscribes to the global KeyStateTracker and updates whenever keys are\n * pressed or released.\n *\n * @returns Signal of array of currently held key names\n *\n * @example\n * ```ts\n * @Component({\n *   template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,\n * })\n * export class KeyDisplayComponent {\n *   heldKeys = injectHeldKeys()\n * }\n * ```\n */\nexport function injectHeldKeys(): Signal<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return injectStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,iBAAwC;AAEtD,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,SAAS"}
+{"version":3,"file":"injectHeldKeys.js","names":[],"sources":["../src/injectHeldKeys.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport { injectSelector } from '@tanstack/angular-store'\nimport type { Signal } from '@angular/core'\n\n/**\n * Angular inject-based API that returns a signal of currently held keyboard keys.\n *\n * Subscribes to the global KeyStateTracker and updates whenever keys are\n * pressed or released.\n *\n * @returns Signal of array of currently held key names\n *\n * @example\n * ```ts\n * @Component({\n *   template: `<div>Currently pressed: {{ heldKeys().join(' + ') || 'None' }}</div>`,\n * })\n * export class KeyDisplayComponent {\n *   heldKeys = injectHeldKeys()\n * }\n * ```\n */\nexport function injectHeldKeys(): Signal<Array<string>> {\n  const tracker = getKeyStateTracker()\n  return injectSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,iBAAwC;AAEtD,QAAO,eADS,oBAAoB,CACN,QAAQ,UAAU,MAAM,SAAS"}

package/dist/injectHotkeyHint.cjs

@@ -0,0 +1,20 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let _angular_core = require("@angular/core");
+let _tanstack_angular_store = require("@tanstack/angular-store");
+
+//#region src/injectHotkeyHint.ts
+/**
+* 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.
+*/
+function injectHotkeyHint(hotkey, options = {}) {
+	const held = (0, _tanstack_angular_store.injectSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	return (0, _angular_core.computed)(() => (0, _tanstack_hotkeys.matchesHeldModifiers)(typeof hotkey === "function" ? hotkey() : hotkey, held(), typeof options === "function" ? options() : options));
+}
+
+//#endregion
+exports.injectHotkeyHint = injectHotkeyHint;
+//# sourceMappingURL=injectHotkeyHint.cjs.map

package/dist/injectHotkeyHint.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectHotkeyHint.cjs","names":[],"sources":["../src/injectHotkeyHint.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectSelector } from '@tanstack/angular-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed signal indicating whether held modifiers reveal this shortcut.\n * Call in an injection context; pass signal getters for changing inputs.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function injectHotkeyHint(\n  hotkey: RegisterableHotkey | (() => RegisterableHotkey),\n  options: HeldModifierOptions | (() => HeldModifierOptions) = {},\n): Signal<boolean> {\n  const held = injectSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(\n      typeof hotkey === 'function' ? hotkey() : hotkey,\n      held(),\n      typeof options === 'function' ? options() : options,\n    ),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,iBACd,QACA,UAA6D,EAAE,EAC9C;CACjB,MAAM,8FACgB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,sFAEI,OAAO,WAAW,aAAa,QAAQ,GAAG,QAC1C,MAAM,EACN,OAAO,YAAY,aAAa,SAAS,GAAG,QAC7C,CACF"}

package/dist/injectHotkeyHint.d.cts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { Signal } from "@angular/core";
+
+//#region src/injectHotkeyHint.d.ts
+/**
+ * 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.
+ */
+declare function injectHotkeyHint(hotkey: RegisterableHotkey | (() => RegisterableHotkey), options?: HeldModifierOptions | (() => HeldModifierOptions)): Signal<boolean>;
+//#endregion
+export { injectHotkeyHint };
+//# sourceMappingURL=injectHotkeyHint.d.cts.map

package/dist/injectHotkeyHint.d.ts

@@ -0,0 +1,15 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { Signal } from "@angular/core";
+
+//#region src/injectHotkeyHint.d.ts
+/**
+ * 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.
+ */
+declare function injectHotkeyHint(hotkey: RegisterableHotkey | (() => RegisterableHotkey), options?: HeldModifierOptions | (() => HeldModifierOptions)): Signal<boolean>;
+//#endregion
+export { injectHotkeyHint };
+//# sourceMappingURL=injectHotkeyHint.d.ts.map

package/dist/injectHotkeyHint.js

@@ -0,0 +1,20 @@
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+import { computed } from "@angular/core";
+import { injectSelector } from "@tanstack/angular-store";
+
+//#region src/injectHotkeyHint.ts
+/**
+* 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.
+*/
+function injectHotkeyHint(hotkey, options = {}) {
+	const held = injectSelector(getKeyStateTracker().store, (state) => state.heldKeys);
+	return computed(() => matchesHeldModifiers(typeof hotkey === "function" ? hotkey() : hotkey, held(), typeof options === "function" ? options() : options));
+}
+
+//#endregion
+export { injectHotkeyHint };
+//# sourceMappingURL=injectHotkeyHint.js.map

package/dist/injectHotkeyHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectHotkeyHint.js","names":[],"sources":["../src/injectHotkeyHint.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectSelector } from '@tanstack/angular-store'\nimport { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/**\n * Returns a computed signal indicating whether held modifiers reveal this shortcut.\n * Call in an injection context; pass signal getters for changing inputs.\n * Uses the nonempty-subset/AltGr rules of `matchesHeldModifiers`; `exact` requires\n * every modifier. Combine with the action's enabled state before showing a badge.\n * This helper does not register a shortcut or check whether its target is focused.\n */\nexport function injectHotkeyHint(\n  hotkey: RegisterableHotkey | (() => RegisterableHotkey),\n  options: HeldModifierOptions | (() => HeldModifierOptions) = {},\n): Signal<boolean> {\n  const held = injectSelector(\n    getKeyStateTracker().store,\n    (state) => state.heldKeys,\n  )\n  return computed(() =>\n    matchesHeldModifiers(\n      typeof hotkey === 'function' ? hotkey() : hotkey,\n      held(),\n      typeof options === 'function' ? options() : options,\n    ),\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,iBACd,QACA,UAA6D,EAAE,EAC9C;CACjB,MAAM,OAAO,eACX,oBAAoB,CAAC,QACpB,UAAU,MAAM,SAClB;AACD,QAAO,eACL,qBACE,OAAO,WAAW,aAAa,QAAQ,GAAG,QAC1C,MAAM,EACN,OAAO,YAAY,aAAa,SAAS,GAAG,QAC7C,CACF"}

package/dist/injectHotkeyRegistrations.cjs

@@ -18,8 +18,8 @@ function injectHotkeyRegistrations() {
 	const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
 	const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
 	return {
-		hotkeys: (0, _tanstack_angular_store.injectStore)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
-		sequences: (0, _tanstack_angular_store.injectStore)(sequenceManager.registrations, (state) => Array.from(state.values()))
+		hotkeys: (0, _tanstack_angular_store.injectSelector)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
+		sequences: (0, _tanstack_angular_store.injectSelector)(sequenceManager.registrations, (state) => Array.from(state.values()))
 	};
 }
 

package/dist/injectHotkeyRegistrations.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/injectHotkeyRegistrations.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Return type for injectHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** Signal for all registered hotkeys (public view, no callbacks) */\n  hotkeys: Signal<Array<HotkeyRegistrationView>>\n  /** Signal for all registered sequences */\n  sequences: Signal<Array<SequenceRegistrationView>>\n}\n\n/**\n * Angular injectable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone injectable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers change detection when registrations change.\n *\n * Must be called in an injection context (constructor, factory, or `inject()`).\n *\n * @returns Object with `hotkeys` and `sequences` signals\n */\nexport function injectHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = injectStore(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = injectStore(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,SAAgB,4BAAuD;CACrE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,kDARmB,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,oDAJY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
+{"version":3,"file":"injectHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/injectHotkeyRegistrations.ts"],"sourcesContent":["import { injectSelector } from '@tanstack/angular-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Return type for injectHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** Signal for all registered hotkeys (public view, no callbacks) */\n  hotkeys: Signal<Array<HotkeyRegistrationView>>\n  /** Signal for all registered sequences */\n  sequences: Signal<Array<SequenceRegistrationView>>\n}\n\n/**\n * Angular injectable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone injectable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers change detection when registrations change.\n *\n * Must be called in an injection context (constructor, factory, or `inject()`).\n *\n * @returns Object with `hotkeys` and `sequences` signals\n */\nexport function injectHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = injectSelector(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = injectSelector(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,SAAgB,4BAAuD;CACrE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,qDARsB,cAAc,gBAAgB,UAC3D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,uDAJe,gBAAgB,gBAAgB,UAC/D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}

package/dist/injectHotkeyRegistrations.js

@@ -1,5 +1,5 @@
 import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
-import { injectStore } from "@tanstack/angular-store";
+import { injectSelector } from "@tanstack/angular-store";
 
 //#region src/injectHotkeyRegistrations.ts
 /**
@@ -18,8 +18,8 @@ function injectHotkeyRegistrations() {
 	const hotkeyManager = getHotkeyManager();
 	const sequenceManager = getSequenceManager();
 	return {
-		hotkeys: injectStore(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
-		sequences: injectStore(sequenceManager.registrations, (state) => Array.from(state.values()))
+		hotkeys: injectSelector(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
+		sequences: injectSelector(sequenceManager.registrations, (state) => Array.from(state.values()))
 	};
 }
 

package/dist/injectHotkeyRegistrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectHotkeyRegistrations.js","names":[],"sources":["../src/injectHotkeyRegistrations.ts"],"sourcesContent":["import { injectStore } from '@tanstack/angular-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Return type for injectHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** Signal for all registered hotkeys (public view, no callbacks) */\n  hotkeys: Signal<Array<HotkeyRegistrationView>>\n  /** Signal for all registered sequences */\n  sequences: Signal<Array<SequenceRegistrationView>>\n}\n\n/**\n * Angular injectable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone injectable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers change detection when registrations change.\n *\n * Must be called in an injection context (constructor, factory, or `inject()`).\n *\n * @returns Object with `hotkeys` and `sequences` signals\n */\nexport function injectHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = injectStore(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = injectStore(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,SAAgB,4BAAuD;CACrE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,YAAY,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,YAAY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
+{"version":3,"file":"injectHotkeyRegistrations.js","names":[],"sources":["../src/injectHotkeyRegistrations.ts"],"sourcesContent":["import { injectSelector } from '@tanstack/angular-store'\nimport {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { Signal } from '@angular/core'\n\n/**\n * Return type for injectHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n  /** Signal for all registered hotkeys (public view, no callbacks) */\n  hotkeys: Signal<Array<HotkeyRegistrationView>>\n  /** Signal for all registered sequences */\n  sequences: Signal<Array<SequenceRegistrationView>>\n}\n\n/**\n * Angular injectable that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone injectable that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * triggers change detection when registrations change.\n *\n * Must be called in an injection context (constructor, factory, or `inject()`).\n *\n * @returns Object with `hotkeys` and `sequences` signals\n */\nexport function injectHotkeyRegistrations(): HotkeyRegistrationsResult {\n  const hotkeyManager = getHotkeyManager()\n  const sequenceManager = getSequenceManager()\n\n  const hotkeys = injectSelector(hotkeyManager.registrations, (state) =>\n    Array.from(state.values()).map(toHotkeyRegistrationView),\n  )\n\n  const sequences = injectSelector(sequenceManager.registrations, (state) =>\n    Array.from(state.values()),\n  )\n\n  return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,SAAgB,4BAAuD;CACrE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,eAAe,cAAc,gBAAgB,UAC3D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,eAAe,gBAAgB,gBAAgB,UAC/D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}

package/dist/injectKeyHold.cjs

@@ -37,7 +37,7 @@ let _tanstack_angular_store = require("@tanstack/angular-store");
 * ```
 */
 function injectKeyHold(key) {
-	const heldKeysSelector = (0, _tanstack_angular_store.injectStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+	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);

package/dist/injectKeyHold.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectKeyHold.cjs","names":[],"sources":["../src/injectKeyHold.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectStore } 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 = injectStore(tracker.store, (state) => state.heldKeys)\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,uGAD8B,CACS,QAAQ,UAAU,MAAM,SAAS;AAE9E,0CAAsB;EAEpB,MAAM,iBADc,OAAO,QAAQ,aAAa,KAAK,GAAG,KACtB,aAAa;AAE/C,SAAO,kBAAkB,CAAC,MACvB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
+{"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.js

@@ -1,6 +1,6 @@
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 import { computed } from "@angular/core";
-import { injectStore } from "@tanstack/angular-store";
+import { injectSelector } from "@tanstack/angular-store";
 
 //#region src/injectKeyHold.ts
 /**
@@ -37,7 +37,7 @@ import { injectStore } from "@tanstack/angular-store";
 * ```
 */
 function injectKeyHold(key) {
-	const heldKeysSelector = injectStore(getKeyStateTracker().store, (state) => state.heldKeys);
+	const heldKeysSelector = injectSelector(getKeyStateTracker().store, (state) => state.heldKeys);
 	return computed(() => {
 		const normalizedKey = (typeof key === "function" ? key() : key).toLowerCase();
 		return heldKeysSelector().some((heldKey) => heldKey.toLowerCase() === normalizedKey);

package/dist/injectKeyHold.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectKeyHold.js","names":[],"sources":["../src/injectKeyHold.ts"],"sourcesContent":["import { computed } from '@angular/core'\nimport { injectStore } 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 = injectStore(tracker.store, (state) => state.heldKeys)\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,YADT,oBAAoB,CACS,QAAQ,UAAU,MAAM,SAAS;AAE9E,QAAO,eAAe;EAEpB,MAAM,iBADc,OAAO,QAAQ,aAAa,KAAK,GAAG,KACtB,aAAa;AAE/C,SAAO,kBAAkB,CAAC,MACvB,YAAY,QAAQ,aAAa,KAAK,cACxC;GACD"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-hotkeys",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Angular adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -41,18 +41,18 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/angular-store": "^0.9.3",
-    "@tanstack/hotkeys": "0.7.1"
+    "@tanstack/angular-store": "^0.11.0",
+    "@tanstack/hotkeys": "0.9.0"
   },
   "peerDependencies": {
     "@angular/common": ">=19.0.0",
     "@angular/core": ">=19.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^21.2.6",
-    "@angular/core": "^21.2.6",
-    "@angular/platform-browser-dynamic": "^21.2.6",
-    "typescript": "6.0.2"
+    "@angular/common": "^21.2.10",
+    "@angular/core": "^21.2.10",
+    "@angular/platform-browser-dynamic": "^21.2.10",
+    "typescript": "6.0.3"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -15,3 +15,4 @@ export * from './injectKeyHold'
 export * from './injectHotkeyRecorder'
 export * from './injectHotkeyRegistrations'
 export * from './injectHotkeySequenceRecorder'
+export * from './injectHotkeyHint'

package/src/injectHeldKeyCodes.ts

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from '@tanstack/hotkeys'
-import { injectStore } from '@tanstack/angular-store'
+import { injectSelector } from '@tanstack/angular-store'
 import type { Signal } from '@angular/core'
 
 /**
@@ -27,5 +27,5 @@ import type { Signal } from '@angular/core'
  */
 export function injectHeldKeyCodes(): Signal<Record<string, string>> {
   const tracker = getKeyStateTracker()
-  return injectStore(tracker.store, (state) => state.heldCodes)
+  return injectSelector(tracker.store, (state) => state.heldCodes)
 }

package/src/injectHeldKeys.ts

@@ -1,5 +1,5 @@
 import { getKeyStateTracker } from '@tanstack/hotkeys'
-import { injectStore } from '@tanstack/angular-store'
+import { injectSelector } from '@tanstack/angular-store'
 import type { Signal } from '@angular/core'
 
 /**
@@ -22,5 +22,5 @@ import type { Signal } from '@angular/core'
  */
 export function injectHeldKeys(): Signal<Array<string>> {
   const tracker = getKeyStateTracker()
-  return injectStore(tracker.store, (state) => state.heldKeys)
+  return injectSelector(tracker.store, (state) => state.heldKeys)
 }

package/src/injectHotkeyHint.ts

@@ -0,0 +1,29 @@
+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/injectHotkeyRegistrations.ts

@@ -1,4 +1,4 @@
-import { injectStore } from '@tanstack/angular-store'
+import { injectSelector } from '@tanstack/angular-store'
 import {
   getHotkeyManager,
   getSequenceManager,
@@ -36,11 +36,11 @@ export function injectHotkeyRegistrations(): HotkeyRegistrationsResult {
   const hotkeyManager = getHotkeyManager()
   const sequenceManager = getSequenceManager()
 
-  const hotkeys = injectStore(hotkeyManager.registrations, (state) =>
+  const hotkeys = injectSelector(hotkeyManager.registrations, (state) =>
     Array.from(state.values()).map(toHotkeyRegistrationView),
   )
 
-  const sequences = injectStore(sequenceManager.registrations, (state) =>
+  const sequences = injectSelector(sequenceManager.registrations, (state) =>
     Array.from(state.values()),
   )
 

package/src/injectKeyHold.ts

@@ -1,5 +1,5 @@
 import { computed } from '@angular/core'
-import { injectStore } from '@tanstack/angular-store'
+import { injectSelector } from '@tanstack/angular-store'
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import type { IndividualKey } from '@tanstack/hotkeys'
 import type { Signal } from '@angular/core'
@@ -41,7 +41,10 @@ export function injectKeyHold(
   key: IndividualKey | (() => IndividualKey),
 ): Signal<boolean> {
   const tracker = getKeyStateTracker()
-  const heldKeysSelector = injectStore(tracker.store, (state) => state.heldKeys)
+  const heldKeysSelector = injectSelector(
+    tracker.store,
+    (state) => state.heldKeys,
+  )
 
   return computed(() => {
     const resolvedKey = typeof key === 'function' ? key() : key