@tanstack/ember-hotkeys 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,140 @@
1
+ <div align="center">
2
+ <picture>
3
+ <source
4
+ media="(prefers-color-scheme: dark)"
5
+ srcset="https://tanstack.com/api/readme/hotkeys.png?theme=dark"
6
+ />
7
+ <source
8
+ media="(prefers-color-scheme: light)"
9
+ srcset="https://tanstack.com/api/readme/hotkeys.png"
10
+ />
11
+ <img
12
+ src="https://tanstack.com/api/readme/hotkeys.png"
13
+ alt="TanStack Hotkeys"
14
+ width="900"
15
+ />
16
+ </picture>
17
+ </div>
18
+
19
+ <br />
20
+
21
+ <div align="center">
22
+ <a href="https://www.npmjs.com/package/@tanstack/hotkeys" target="\_parent">
23
+ <img alt="" src="https://img.shields.io/npm/dm/@tanstack/hotkeys.svg" alt="npm downloads" />
24
+ </a>
25
+ <a href="https://github.com/TanStack/hotkeys" target="\_parent">
26
+ <img alt="" src="https://img.shields.io/github/stars/TanStack/hotkeys.svg?style=social&label=Star" alt="GitHub stars" />
27
+ </a>
28
+ <a href="https://bundlephobia.com/result?p=@tanstack/react-hotkeys@latest" target="\_parent">
29
+ <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-hotkeys@latest" alt="Bundle size" />
30
+ </a>
31
+ </div>
32
+
33
+ <div align="center">
34
+ <a href="#badge">
35
+ <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
36
+ </a>
37
+ <a href="#badge">
38
+ <img src="https://img.shields.io/github/v/release/tanstack/hotkeys" alt="Release"/>
39
+ </a>
40
+ <a href="https://twitter.com/tan_stack">
41
+ <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
42
+ </a>
43
+ </div>
44
+
45
+ <div align="center">
46
+
47
+ ### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
48
+
49
+ </div>
50
+
51
+ # TanStack Hotkeys
52
+
53
+ > [!NOTE]
54
+ > TanStack Hotkeys is alpha. We are actively developing the library and are open to feedback and contributions.
55
+
56
+ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objects, a cross-platform `Mod` key, a singleton Hotkey Manager, and utilities for cheatsheet UIs—built to stay SSR-friendly.
57
+
58
+ - Type-safe bindings — template strings (`Mod+Shift+S`, `Escape`) or parsed objects for full control
59
+ - Flexible options — `keydown`/`keyup`, `preventDefault`, `stopPropagation`, conditional enabled, `requireReset`
60
+ - Cross-platform Mod — maps to Cmd on macOS and Ctrl on Windows/Linux
61
+ - Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, framework adapters, and devtools
62
+
63
+ ### <a href="https://tanstack.com/hotkeys">Read the docs →</a>
64
+
65
+ <br />
66
+
67
+ > [!NOTE]
68
+ > You may know **TanStack Hotkeys** by our adapter names, too!
69
+ >
70
+ > - [**Alpine Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/alpine/quick-start)
71
+ > - [**Ember Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/ember/quick-start)
72
+ > - [**Octane Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/octane/quick-start)
73
+ > - [**React Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/react/react-hotkeys)
74
+ > - [**Preact Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/preact/preact-hotkeys)
75
+ > - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
76
+ > - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
77
+ > - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
78
+ > - [**Lit Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/lit/reference)
79
+ > - [**Svelte Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/svelte/reference)
80
+
81
+ ## Get Involved
82
+
83
+ - We welcome issues and pull requests!
84
+ - Participate in [GitHub discussions](https://github.com/TanStack/hotkeys/discussions)
85
+ - Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
86
+ - See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
87
+
88
+ ## Partners
89
+
90
+ <div align="center">
91
+
92
+ <table align="center">
93
+ <tr>
94
+ <td>
95
+ <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
96
+ <picture>
97
+ <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" height="40" />
98
+ <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" />
99
+ <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
100
+ </picture>
101
+ </a>
102
+ </td>
103
+ <td>
104
+ <a href="https://www.cloudflare.com?utm_source=tanstack">
105
+ <picture>
106
+ <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" />
107
+ <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" height="60" />
108
+ <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
109
+ </picture>
110
+ </a>
111
+ </td>
112
+ </tr>
113
+ </table>
114
+
115
+ <div align="center">
116
+ <img src="media/partner_logo.svg" alt="Keys & you?" height="65">
117
+ <p>
118
+ We're looking for TanStack Hotkeys Partners to join our mission! Partner with us to push the boundaries of TanStack Hotkeys and build amazing things together.
119
+ </p>
120
+ <a href="mailto:partners@tanstack.com?subject=TanStack Hotkeys Partnership"><b>LET'S CHAT</b></a>
121
+ </div>
122
+
123
+ </div>
124
+
125
+ ## Explore the TanStack Ecosystem
126
+
127
+ - <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
128
+ - <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
129
+ - <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
130
+ - <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
131
+ - <a href="https://github.com/tanstack/hotkeys"><b>TanStack Hotkeys</b></a> – Type‑safe keyboard shortcuts
132
+ - <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
133
+ - <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
134
+ - <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
135
+ - <a href="https://github.com/tanstack/start"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
136
+ - <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
137
+ - <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
138
+ - <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
139
+
140
+ … and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
package/addon-main.cjs ADDED
@@ -0,0 +1,4 @@
1
+ 'use strict'
2
+
3
+ const { addonV1Shim } = require('@embroider/addon-shim')
4
+ module.exports = addonV1Shim(__dirname)
@@ -0,0 +1,28 @@
1
+ import { UseHotkey } from "./useHotkey.js";
2
+ import { UseHotkeys } from "./useHotkeys.js";
3
+ import { UseHotkeySequence } from "./useHotkeySequence.js";
4
+ import { UseHotkeySequences } from "./useHotkeySequences.js";
5
+ import { MaybeGetter } from "./utils.js";
6
+ import { DefaultHotkeysOptions } from "./types.js";
7
+ import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
8
+ import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
9
+ import { OnHotkeys } from "./onHotkeys.js";
10
+ import { OnHotkey } from "./onHotkey.js";
11
+ //#region src/createHotkeysScope.d.ts
12
+ /** Helpers, modifiers, and recorder factories with shared defaults. Owners retain their own cleanup. */
13
+ export interface EmberHotkeysScope {
14
+ onHotkey: typeof OnHotkey;
15
+ onHotkeys: typeof OnHotkeys;
16
+ useHotkey: typeof UseHotkey;
17
+ useHotkeys: typeof UseHotkeys;
18
+ useHotkeySequence: typeof UseHotkeySequence;
19
+ useHotkeySequences: typeof UseHotkeySequences;
20
+ useHotkeyRecorder: typeof useHotkeyRecorder;
21
+ useHotkeySequenceRecorder: typeof useHotkeySequenceRecorder;
22
+ }
23
+ /**
24
+ * Creates contextual helpers, modifiers, and recorders with shared, optionally reactive defaults.
25
+ * Pass the scope to child components through arguments to share configuration.
26
+ */
27
+ export declare function createHotkeysScope(defaultOptions?: MaybeGetter<DefaultHotkeysOptions>): EmberHotkeysScope;
28
+ //#endregion
@@ -0,0 +1,78 @@
1
+ import { UseHotkey } from "./useHotkey.js";
2
+ import { UseHotkeys } from "./useHotkeys.js";
3
+ import { UseHotkeySequence } from "./useHotkeySequence.js";
4
+ import { UseHotkeySequences } from "./useHotkeySequences.js";
5
+ import { read } from "./utils.js";
6
+ import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
7
+ import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
8
+ import { OnHotkey } from "./onHotkey.js";
9
+ import { OnHotkeys } from "./onHotkeys.js";
10
+
11
+ //#region src/createHotkeysScope.ts
12
+ /**
13
+ * Creates contextual helpers, modifiers, and recorders with shared, optionally reactive defaults.
14
+ * Pass the scope to child components through arguments to share configuration.
15
+ */
16
+ function createHotkeysScope(defaultOptions = {}) {
17
+ return {
18
+ onHotkey: class extends OnHotkey {
19
+ modify(...[element, args, options]) {
20
+ super.modify(element, args, {
21
+ ...read(defaultOptions).hotkey,
22
+ ...options
23
+ });
24
+ }
25
+ },
26
+ onHotkeys: class extends OnHotkeys {
27
+ modify(...[element, args, options]) {
28
+ super.modify(element, args, {
29
+ ...read(defaultOptions).hotkey,
30
+ ...options
31
+ });
32
+ }
33
+ },
34
+ useHotkey: class extends UseHotkey {
35
+ compute(...[args, options]) {
36
+ super.compute(args, {
37
+ ...read(defaultOptions).hotkey,
38
+ ...options
39
+ });
40
+ }
41
+ },
42
+ useHotkeys: class extends UseHotkeys {
43
+ compute(...[args, options]) {
44
+ super.compute(args, {
45
+ ...read(defaultOptions).hotkey,
46
+ ...options
47
+ });
48
+ }
49
+ },
50
+ useHotkeySequence: class extends UseHotkeySequence {
51
+ compute(...[args, options]) {
52
+ super.compute(args, {
53
+ ...read(defaultOptions).hotkeySequence,
54
+ ...options
55
+ });
56
+ }
57
+ },
58
+ useHotkeySequences: class extends UseHotkeySequences {
59
+ compute(...[args, options]) {
60
+ super.compute(args, {
61
+ ...read(defaultOptions).hotkeySequence,
62
+ ...options
63
+ });
64
+ }
65
+ },
66
+ useHotkeyRecorder: (owner, options) => useHotkeyRecorder(owner, () => ({
67
+ ...read(defaultOptions).hotkeyRecorder,
68
+ ...read(options)
69
+ })),
70
+ useHotkeySequenceRecorder: (owner, options) => useHotkeySequenceRecorder(owner, () => ({
71
+ ...read(defaultOptions).hotkeySequenceRecorder,
72
+ ...read(options)
73
+ }))
74
+ };
75
+ }
76
+
77
+ //#endregion
78
+ export { createHotkeysScope };
@@ -0,0 +1,19 @@
1
+ import { UseHotkey } from "./useHotkey.js";
2
+ import { UseHotkeys } from "./useHotkeys.js";
3
+ import { UseHotkeySequence } from "./useHotkeySequence.js";
4
+ import { UseHotkeySequences } from "./useHotkeySequences.js";
5
+ import { MaybeGetter } from "./utils.js";
6
+ import { DefaultHotkeysOptions, EmberHotkeyRecorder, EmberHotkeySequenceRecorder, EmberHotkeyState, HotkeyRegistrationsResult } from "./types.js";
7
+ import { useHeldKeys } from "./useHeldKeys.js";
8
+ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
9
+ import { useKeyHold } from "./useKeyHold.js";
10
+ import { useHotkeyHint } from "./useHotkeyHint.js";
11
+ import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
12
+ import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
13
+ import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
14
+ import { ElementHotkeyOptions, OnHotkeys } from "./onHotkeys.js";
15
+ import { OnHotkey } from "./onHotkey.js";
16
+ import { EmberHotkeysScope, createHotkeysScope } from "./createHotkeysScope.js";
17
+ import { HotkeyDefinition, HotkeySequenceDefinition } from "@tanstack/hotkeys/adapter";
18
+ export * from "@tanstack/hotkeys";
19
+ export { DefaultHotkeysOptions, type ElementHotkeyOptions, EmberHotkeyRecorder, EmberHotkeySequenceRecorder, EmberHotkeyState, EmberHotkeysScope, type HotkeyDefinition, HotkeyRegistrationsResult, type HotkeySequenceDefinition, type MaybeGetter, createHotkeysScope, OnHotkey as onHotkey, OnHotkeys as onHotkeys, useHeldKeyCodes, useHeldKeys, UseHotkey as useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, UseHotkeySequence as useHotkeySequence, useHotkeySequenceRecorder, UseHotkeySequences as useHotkeySequences, UseHotkeys as useHotkeys, useKeyHold };
package/dist/index.js ADDED
@@ -0,0 +1,18 @@
1
+ import { UseHotkey } from "./useHotkey.js";
2
+ import { UseHotkeys } from "./useHotkeys.js";
3
+ import { UseHotkeySequence } from "./useHotkeySequence.js";
4
+ import { UseHotkeySequences } from "./useHotkeySequences.js";
5
+ import { useHeldKeys } from "./useHeldKeys.js";
6
+ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
7
+ import { useKeyHold } from "./useKeyHold.js";
8
+ import { useHotkeyHint } from "./useHotkeyHint.js";
9
+ import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
10
+ import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
11
+ import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
12
+ import { OnHotkey } from "./onHotkey.js";
13
+ import { OnHotkeys } from "./onHotkeys.js";
14
+ import { createHotkeysScope } from "./createHotkeysScope.js";
15
+
16
+ export * from "@tanstack/hotkeys"
17
+
18
+ export { createHotkeysScope, OnHotkey as onHotkey, OnHotkeys as onHotkeys, useHeldKeyCodes, useHeldKeys, UseHotkey as useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, UseHotkeySequence as useHotkeySequence, useHotkeySequenceRecorder, UseHotkeySequences as useHotkeySequences, UseHotkeys as useHotkeys, useKeyHold };
@@ -0,0 +1,19 @@
1
+ import { ElementHotkeyOptions } from "./onHotkeys.js";
2
+ import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
3
+ import Modifier from "ember-modifier";
4
+ //#region src/onHotkey.d.ts
5
+ /** Attaches a shortcut to the element that owns the modifier. */
6
+ export declare class OnHotkey extends Modifier<{
7
+ Element: HTMLElement;
8
+ Args: {
9
+ Positional: [RegisterableHotkey, HotkeyCallback];
10
+ Named: ElementHotkeyOptions;
11
+ };
12
+ }> {
13
+ private bindings;
14
+ private definition;
15
+ private cleanup;
16
+ modify(element: HTMLElement, [hotkey, callback]: [RegisterableHotkey, HotkeyCallback], options: ElementHotkeyOptions): void;
17
+ private update;
18
+ }
19
+ //#endregion
@@ -0,0 +1,30 @@
1
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
2
+ import { scheduleOnce } from "@ember/runloop";
3
+ import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
4
+ import Modifier from "ember-modifier";
5
+
6
+ //#region src/onHotkey.ts
7
+ /** Attaches a shortcut to the element that owns the modifier. */
8
+ var OnHotkey = class extends Modifier {
9
+ bindings = createHotkeyBindings();
10
+ definition;
11
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
12
+ modify(element, [hotkey, callback], options) {
13
+ this.cleanup;
14
+ this.definition = {
15
+ hotkey: typeof hotkey === "string" ? hotkey : { ...hotkey },
16
+ callback,
17
+ options: {
18
+ ...options,
19
+ target: element
20
+ }
21
+ };
22
+ scheduleOnce("afterRender", this, this.update);
23
+ }
24
+ update() {
25
+ if (this.definition && !isDestroying(this) && !isDestroyed(this)) this.bindings.update([this.definition]);
26
+ }
27
+ };
28
+
29
+ //#endregion
30
+ export { OnHotkey };
@@ -0,0 +1,22 @@
1
+ import { HotkeyOptions } from "@tanstack/hotkeys";
2
+ import { HotkeyDefinition } from "@tanstack/hotkeys/adapter";
3
+ import Modifier from "ember-modifier";
4
+ //#region src/onHotkeys.d.ts
5
+ /** Options for a modifier whose target is always its containing element. */
6
+ export type ElementHotkeyOptions = Omit<HotkeyOptions, 'target'>;
7
+ /** Attach a reactive list of shortcuts directly to an element. */
8
+ export declare class OnHotkeys extends Modifier<{
9
+ Element: HTMLElement;
10
+ Args: {
11
+ Positional: [Array<HotkeyDefinition>];
12
+ Named: ElementHotkeyOptions;
13
+ };
14
+ }> {
15
+ private bindings;
16
+ private definitions;
17
+ private options;
18
+ private cleanup;
19
+ modify(element: HTMLElement, [definitions]: [Array<HotkeyDefinition>], options: ElementHotkeyOptions): void;
20
+ private update;
21
+ }
22
+ //#endregion
@@ -0,0 +1,35 @@
1
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
2
+ import { scheduleOnce } from "@ember/runloop";
3
+ import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
4
+ import Modifier from "ember-modifier";
5
+
6
+ //#region src/onHotkeys.ts
7
+ /** Attach a reactive list of shortcuts directly to an element. */
8
+ var OnHotkeys = class extends Modifier {
9
+ bindings = createHotkeyBindings();
10
+ definitions = [];
11
+ options = {};
12
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
13
+ modify(element, [definitions], options) {
14
+ this.cleanup;
15
+ this.definitions = definitions.map((definition) => ({
16
+ ...definition,
17
+ hotkey: typeof definition.hotkey === "string" ? definition.hotkey : { ...definition.hotkey },
18
+ options: {
19
+ ...definition.options,
20
+ target: element
21
+ }
22
+ }));
23
+ this.options = {
24
+ ...options,
25
+ target: element
26
+ };
27
+ scheduleOnce("afterRender", this, this.update);
28
+ }
29
+ update() {
30
+ if (!isDestroying(this) && !isDestroyed(this)) this.bindings.update(this.definitions, this.options);
31
+ }
32
+ };
33
+
34
+ //#endregion
35
+ export { OnHotkeys };
@@ -0,0 +1,49 @@
1
+ import { Hotkey, HotkeyOptions, HotkeyRecorderOptions, HotkeyRegistrationView, HotkeySequence, HotkeySequenceRecorderOptions, SequenceOptions, SequenceRegistrationView } from "@tanstack/hotkeys";
2
+ //#region src/types.d.ts
3
+ /** A reactive value. Read `.value` where the framework tracks dependencies. */
4
+ export interface EmberHotkeyState<T> {
5
+ readonly value: T;
6
+ }
7
+ /** Recording state and controls owned by the containing component. */
8
+ export interface EmberHotkeyRecorder {
9
+ /** Whether the recorder is listening for a shortcut. */
10
+ readonly isRecording: boolean;
11
+ /** The last recorded binding, including brackets for physical codes. */
12
+ readonly recordedHotkey: Hotkey | null;
13
+ /** Start a new recording session. */
14
+ startRecording: () => void;
15
+ /** Stop and clear recorder state without calling onRecord or onCancel. */
16
+ stopRecording: () => void;
17
+ /** Stop, clear recorder state, and call onCancel. */
18
+ cancelRecording: () => void;
19
+ }
20
+ /** Sequence recording state and controls. */
21
+ export interface EmberHotkeySequenceRecorder {
22
+ /** Whether the recorder is listening for chords. */
23
+ readonly isRecording: boolean;
24
+ /** Chords captured in the current session. */
25
+ readonly steps: HotkeySequence;
26
+ /** The last committed sequence. */
27
+ readonly recordedSequence: HotkeySequence | null;
28
+ /** Start a new recording session. */
29
+ startRecording: () => void;
30
+ /** Stop without committing or calling onCancel. */
31
+ stopRecording: () => void;
32
+ /** Discard the current session and call onCancel. */
33
+ cancelRecording: () => void;
34
+ /** Commit the current steps. Does nothing when no steps are recorded. */
35
+ commitRecording: () => void;
36
+ }
37
+ /** Live registration views from the shared hotkey and sequence managers. */
38
+ export interface HotkeyRegistrationsResult {
39
+ readonly hotkeys: Array<HotkeyRegistrationView>;
40
+ readonly sequences: Array<SequenceRegistrationView>;
41
+ }
42
+ /** Shared defaults; call-specific options take precedence. */
43
+ export interface DefaultHotkeysOptions {
44
+ hotkey?: HotkeyOptions;
45
+ hotkeySequence?: SequenceOptions;
46
+ hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
47
+ hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
48
+ }
49
+ //#endregion
@@ -0,0 +1,5 @@
1
+ import { EmberHotkeyState } from "./types.js";
2
+ //#region src/useHeldKeyCodes.d.ts
3
+ /** Reads physical key codes through Ember autotracking. */
4
+ export declare function useHeldKeyCodes(owner: object): EmberHotkeyState<Record<string, string>>;
5
+ //#endregion
@@ -0,0 +1,11 @@
1
+ import { select } from "./utils.js";
2
+ import { getKeyStateTracker } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHeldKeyCodes.ts
5
+ /** Reads physical key codes through Ember autotracking. */
6
+ function useHeldKeyCodes(owner) {
7
+ return select(owner, getKeyStateTracker().store, (state) => state.heldCodes);
8
+ }
9
+
10
+ //#endregion
11
+ export { useHeldKeyCodes };
@@ -0,0 +1,5 @@
1
+ import { EmberHotkeyState } from "./types.js";
2
+ //#region src/useHeldKeys.d.ts
3
+ /** Pass the containing component as owner to release the subscription on destruction. */
4
+ export declare function useHeldKeys(owner: object): EmberHotkeyState<Array<string>>;
5
+ //#endregion
@@ -0,0 +1,11 @@
1
+ import { select } from "./utils.js";
2
+ import { getKeyStateTracker } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHeldKeys.ts
5
+ /** Pass the containing component as owner to release the subscription on destruction. */
6
+ function useHeldKeys(owner) {
7
+ return select(owner, getKeyStateTracker().store, (state) => state.heldKeys);
8
+ }
9
+
10
+ //#endregion
11
+ export { useHeldKeys };
@@ -0,0 +1,18 @@
1
+ import { HotkeyCallback, HotkeyOptions, RegisterableHotkey } from "@tanstack/hotkeys";
2
+ import Helper from "@ember/component/helper";
3
+ //#region src/useHotkey.d.ts
4
+ /** Use {{useHotkey "Mod+S" this.save enabled=this.enabled}} in a template. */
5
+ export declare class UseHotkey extends Helper<{
6
+ Args: {
7
+ Positional: [RegisterableHotkey, HotkeyCallback];
8
+ Named: HotkeyOptions;
9
+ };
10
+ Return: void;
11
+ }> {
12
+ private bindings;
13
+ private definition;
14
+ private cleanup;
15
+ compute([hotkey, callback]: [RegisterableHotkey, HotkeyCallback], options: HotkeyOptions): void;
16
+ private update;
17
+ }
18
+ //#endregion
@@ -0,0 +1,27 @@
1
+ import Helper from "@ember/component/helper";
2
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
3
+ import { scheduleOnce } from "@ember/runloop";
4
+ import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
5
+
6
+ //#region src/useHotkey.ts
7
+ /** Use {{useHotkey "Mod+S" this.save enabled=this.enabled}} in a template. */
8
+ var UseHotkey = class extends Helper {
9
+ bindings = createHotkeyBindings();
10
+ definition;
11
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
12
+ compute([hotkey, callback], options) {
13
+ this.cleanup;
14
+ this.definition = {
15
+ hotkey: typeof hotkey === "string" ? hotkey : { ...hotkey },
16
+ callback,
17
+ options: { ...options }
18
+ };
19
+ scheduleOnce("afterRender", this, this.update);
20
+ }
21
+ update() {
22
+ if (this.definition && !isDestroying(this) && !isDestroyed(this)) this.bindings.update([this.definition]);
23
+ }
24
+ };
25
+
26
+ //#endregion
27
+ export { UseHotkey };
@@ -0,0 +1,7 @@
1
+ import { MaybeGetter } from "./utils.js";
2
+ import { EmberHotkeyState } from "./types.js";
3
+ import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
4
+ //#region src/useHotkeyHint.d.ts
5
+ /** Recomputes for held modifiers and tracked changes to the binding or options. */
6
+ export declare function useHotkeyHint(owner: object, hotkey: MaybeGetter<RegisterableHotkey>, options?: MaybeGetter<HeldModifierOptions>): EmberHotkeyState<boolean>;
7
+ //#endregion
@@ -0,0 +1,11 @@
1
+ import { read, select } from "./utils.js";
2
+ import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHotkeyHint.ts
5
+ /** Recomputes for held modifiers and tracked changes to the binding or options. */
6
+ function useHotkeyHint(owner, hotkey, options = {}) {
7
+ return select(owner, getKeyStateTracker().store, (state) => matchesHeldModifiers(read(hotkey), state.heldKeys, read(options)));
8
+ }
9
+
10
+ //#endregion
11
+ export { useHotkeyHint };
@@ -0,0 +1,7 @@
1
+ import { MaybeGetter } from "./utils.js";
2
+ import { EmberHotkeyRecorder } from "./types.js";
3
+ import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
4
+ //#region src/useHotkeyRecorder.d.ts
5
+ /** Creates an owned recorder with autotracked state and current callback options. */
6
+ export declare function useHotkeyRecorder(owner: object, options: MaybeGetter<HotkeyRecorderOptions>): EmberHotkeyRecorder;
7
+ //#endregion
@@ -0,0 +1,28 @@
1
+ import { read, select } from "./utils.js";
2
+ import { HotkeyRecorder } from "@tanstack/hotkeys";
3
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
4
+
5
+ //#region src/useHotkeyRecorder.ts
6
+ /** Creates an owned recorder with autotracked state and current callback options. */
7
+ function useHotkeyRecorder(owner, options) {
8
+ const recorder = new HotkeyRecorder(() => read(options));
9
+ const state = select(owner, recorder.store, (value) => value);
10
+ registerDestructor(owner, () => recorder.destroy());
11
+ return {
12
+ get isRecording() {
13
+ return state.value.isRecording;
14
+ },
15
+ get recordedHotkey() {
16
+ return state.value.recordedHotkey;
17
+ },
18
+ startRecording() {
19
+ if (isDestroying(owner) || isDestroyed(owner)) return;
20
+ recorder.start();
21
+ },
22
+ stopRecording: () => recorder.stop(),
23
+ cancelRecording: () => recorder.cancel()
24
+ };
25
+ }
26
+
27
+ //#endregion
28
+ export { useHotkeyRecorder };
@@ -0,0 +1,5 @@
1
+ import { HotkeyRegistrationsResult } from "./types.js";
2
+ //#region src/useHotkeyRegistrations.d.ts
3
+ /** Reads public snapshots of hotkey and sequence registrations. */
4
+ export declare function useHotkeyRegistrations(owner: object): HotkeyRegistrationsResult;
5
+ //#endregion
@@ -0,0 +1,20 @@
1
+ import { select } from "./utils.js";
2
+ import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHotkeyRegistrations.ts
5
+ /** Reads public snapshots of hotkey and sequence registrations. */
6
+ function useHotkeyRegistrations(owner) {
7
+ const hotkeys = select(owner, getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView));
8
+ const sequences = select(owner, getSequenceManager().registrations, (state) => Array.from(state.values()));
9
+ return {
10
+ get hotkeys() {
11
+ return hotkeys.value;
12
+ },
13
+ get sequences() {
14
+ return sequences.value;
15
+ }
16
+ };
17
+ }
18
+
19
+ //#endregion
20
+ export { useHotkeyRegistrations };
@@ -0,0 +1,18 @@
1
+ import { HotkeyCallback, HotkeySequence, SequenceOptions } from "@tanstack/hotkeys";
2
+ import Helper from "@ember/component/helper";
3
+ //#region src/useHotkeySequence.d.ts
4
+ /** Use {{useHotkeySequence this.sequence this.run}} in a template. */
5
+ export declare class UseHotkeySequence extends Helper<{
6
+ Args: {
7
+ Positional: [HotkeySequence, HotkeyCallback];
8
+ Named: SequenceOptions;
9
+ };
10
+ Return: void;
11
+ }> {
12
+ private bindings;
13
+ private definition;
14
+ private cleanup;
15
+ compute([sequence, callback]: [HotkeySequence, HotkeyCallback], options: SequenceOptions): void;
16
+ private update;
17
+ }
18
+ //#endregion
@@ -0,0 +1,27 @@
1
+ import Helper from "@ember/component/helper";
2
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
3
+ import { scheduleOnce } from "@ember/runloop";
4
+ import { createHotkeySequenceBindings } from "@tanstack/hotkeys/adapter";
5
+
6
+ //#region src/useHotkeySequence.ts
7
+ /** Use {{useHotkeySequence this.sequence this.run}} in a template. */
8
+ var UseHotkeySequence = class extends Helper {
9
+ bindings = createHotkeySequenceBindings();
10
+ definition;
11
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
12
+ compute([sequence, callback], options) {
13
+ this.cleanup;
14
+ this.definition = {
15
+ sequence: [...sequence],
16
+ callback,
17
+ options: { ...options }
18
+ };
19
+ scheduleOnce("afterRender", this, this.update);
20
+ }
21
+ update() {
22
+ if (this.definition && !isDestroying(this) && !isDestroyed(this)) this.bindings.update([this.definition]);
23
+ }
24
+ };
25
+
26
+ //#endregion
27
+ export { UseHotkeySequence };
@@ -0,0 +1,7 @@
1
+ import { MaybeGetter } from "./utils.js";
2
+ import { EmberHotkeySequenceRecorder } from "./types.js";
3
+ import { HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
4
+ //#region src/useHotkeySequenceRecorder.d.ts
5
+ /** Creates an owned sequence recorder with explicit commit and cancel controls. */
6
+ export declare function useHotkeySequenceRecorder(owner: object, options: MaybeGetter<HotkeySequenceRecorderOptions>): EmberHotkeySequenceRecorder;
7
+ //#endregion
@@ -0,0 +1,32 @@
1
+ import { read, select } from "./utils.js";
2
+ import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
3
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
4
+
5
+ //#region src/useHotkeySequenceRecorder.ts
6
+ /** Creates an owned sequence recorder with explicit commit and cancel controls. */
7
+ function useHotkeySequenceRecorder(owner, options) {
8
+ const recorder = new HotkeySequenceRecorder(() => read(options));
9
+ const state = select(owner, recorder.store, (value) => value);
10
+ registerDestructor(owner, () => recorder.destroy());
11
+ return {
12
+ get isRecording() {
13
+ return state.value.isRecording;
14
+ },
15
+ get steps() {
16
+ return state.value.steps;
17
+ },
18
+ get recordedSequence() {
19
+ return state.value.recordedSequence;
20
+ },
21
+ startRecording() {
22
+ if (isDestroying(owner) || isDestroyed(owner)) return;
23
+ recorder.start();
24
+ },
25
+ stopRecording: () => recorder.stop(),
26
+ cancelRecording: () => recorder.cancel(),
27
+ commitRecording: () => recorder.commit()
28
+ };
29
+ }
30
+
31
+ //#endregion
32
+ export { useHotkeySequenceRecorder };
@@ -0,0 +1,20 @@
1
+ import { SequenceOptions } from "@tanstack/hotkeys";
2
+ import Helper from "@ember/component/helper";
3
+ import { HotkeySequenceDefinition } from "@tanstack/hotkeys/adapter";
4
+ //#region src/useHotkeySequences.d.ts
5
+ /** Registers a reactive list of sequences with the helper's template lifecycle. */
6
+ export declare class UseHotkeySequences extends Helper<{
7
+ Args: {
8
+ Positional: [Array<HotkeySequenceDefinition>];
9
+ Named: SequenceOptions;
10
+ };
11
+ Return: void;
12
+ }> {
13
+ private bindings;
14
+ private definitions;
15
+ private options;
16
+ private cleanup;
17
+ compute([definitions]: [Array<HotkeySequenceDefinition>], options: SequenceOptions): void;
18
+ private update;
19
+ }
20
+ //#endregion
@@ -0,0 +1,29 @@
1
+ import Helper from "@ember/component/helper";
2
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
3
+ import { scheduleOnce } from "@ember/runloop";
4
+ import { createHotkeySequenceBindings } from "@tanstack/hotkeys/adapter";
5
+
6
+ //#region src/useHotkeySequences.ts
7
+ /** Registers a reactive list of sequences with the helper's template lifecycle. */
8
+ var UseHotkeySequences = class extends Helper {
9
+ bindings = createHotkeySequenceBindings();
10
+ definitions = [];
11
+ options = {};
12
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
13
+ compute([definitions], options) {
14
+ this.cleanup;
15
+ this.definitions = definitions.map((definition) => ({
16
+ ...definition,
17
+ sequence: [...definition.sequence],
18
+ options: { ...definition.options }
19
+ }));
20
+ this.options = { ...options };
21
+ scheduleOnce("afterRender", this, this.update);
22
+ }
23
+ update() {
24
+ if (!isDestroying(this) && !isDestroyed(this)) this.bindings.update(this.definitions, this.options);
25
+ }
26
+ };
27
+
28
+ //#endregion
29
+ export { UseHotkeySequences };
@@ -0,0 +1,20 @@
1
+ import { HotkeyOptions } from "@tanstack/hotkeys";
2
+ import Helper from "@ember/component/helper";
3
+ import { HotkeyDefinition } from "@tanstack/hotkeys/adapter";
4
+ //#region src/useHotkeys.d.ts
5
+ /** Registers a reactive list of shortcuts with the helper's template lifecycle. */
6
+ export declare class UseHotkeys extends Helper<{
7
+ Args: {
8
+ Positional: [Array<HotkeyDefinition>];
9
+ Named: HotkeyOptions;
10
+ };
11
+ Return: void;
12
+ }> {
13
+ private bindings;
14
+ private definitions;
15
+ private options;
16
+ private cleanup;
17
+ compute([definitions]: [Array<HotkeyDefinition>], options: HotkeyOptions): void;
18
+ private update;
19
+ }
20
+ //#endregion
@@ -0,0 +1,29 @@
1
+ import Helper from "@ember/component/helper";
2
+ import { isDestroyed, isDestroying, registerDestructor } from "@ember/destroyable";
3
+ import { scheduleOnce } from "@ember/runloop";
4
+ import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
5
+
6
+ //#region src/useHotkeys.ts
7
+ /** Registers a reactive list of shortcuts with the helper's template lifecycle. */
8
+ var UseHotkeys = class extends Helper {
9
+ bindings = createHotkeyBindings();
10
+ definitions = [];
11
+ options = {};
12
+ cleanup = registerDestructor(this, () => this.bindings.destroy());
13
+ compute([definitions], options) {
14
+ this.cleanup;
15
+ this.definitions = definitions.map((definition) => ({
16
+ ...definition,
17
+ hotkey: typeof definition.hotkey === "string" ? definition.hotkey : { ...definition.hotkey },
18
+ options: { ...definition.options }
19
+ }));
20
+ this.options = { ...options };
21
+ scheduleOnce("afterRender", this, this.update);
22
+ }
23
+ update() {
24
+ if (!isDestroying(this) && !isDestroyed(this)) this.bindings.update(this.definitions, this.options);
25
+ }
26
+ };
27
+
28
+ //#endregion
29
+ export { UseHotkeys };
@@ -0,0 +1,7 @@
1
+ import { MaybeGetter } from "./utils.js";
2
+ import { EmberHotkeyState } from "./types.js";
3
+ import { IndividualKey } from "@tanstack/hotkeys";
4
+ //#region src/useKeyHold.d.ts
5
+ /** Getter arguments can read changing tracked component properties. */
6
+ export declare function useKeyHold(owner: object, key: MaybeGetter<IndividualKey>): EmberHotkeyState<boolean>;
7
+ //#endregion
@@ -0,0 +1,11 @@
1
+ import { read, select } from "./utils.js";
2
+ import { getKeyStateTracker } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useKeyHold.ts
5
+ /** Getter arguments can read changing tracked component properties. */
6
+ function useKeyHold(owner, key) {
7
+ return select(owner, getKeyStateTracker().store, (state) => state.heldKeys.includes(read(key)));
8
+ }
9
+
10
+ //#endregion
11
+ export { useKeyHold };
@@ -0,0 +1,4 @@
1
+ import "@tanstack/store";
2
+ //#region src/utils.d.ts
3
+ export type MaybeGetter<T> = T | (() => T);
4
+ //#endregion
package/dist/utils.js ADDED
@@ -0,0 +1,20 @@
1
+ import { registerDestructor } from "@ember/destroyable";
2
+ import { trackedObject } from "@ember/reactive/collections";
3
+
4
+ //#region src/utils.ts
5
+ function read(value) {
6
+ return typeof value === "function" ? value() : value;
7
+ }
8
+ function select(owner, store, selector) {
9
+ const state = trackedObject({ snapshot: store.state });
10
+ const subscription = store.subscribe(() => {
11
+ state.snapshot = store.state;
12
+ });
13
+ registerDestructor(owner, () => subscription.unsubscribe());
14
+ return { get value() {
15
+ return selector(state.snapshot);
16
+ } };
17
+ }
18
+
19
+ //#endregion
20
+ export { read, select };
package/package.json ADDED
@@ -0,0 +1,98 @@
1
+ {
2
+ "name": "@tanstack/ember-hotkeys",
3
+ "version": "0.1.0",
4
+ "description": "Ember adapter for TanStack Hotkeys",
5
+ "author": "Tanner Linsley",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/TanStack/hotkeys.git",
10
+ "directory": "packages/ember-hotkeys"
11
+ },
12
+ "homepage": "https://tanstack.com/hotkeys",
13
+ "funding": {
14
+ "type": "github",
15
+ "url": "https://github.com/sponsors/tannerlinsley"
16
+ },
17
+ "keywords": [
18
+ "ember",
19
+ "tanstack",
20
+ "hotkeys"
21
+ ],
22
+ "scripts": {
23
+ "clean": "premove ./build ./dist ./dist-tests",
24
+ "lint": "eslint ./src",
25
+ "lint:fix": "eslint ./src --fix",
26
+ "test:eslint": "eslint ./src",
27
+ "test:lib": "vite build --mode=development --out-dir dist-tests && testem --file testem.cjs ci --port 0",
28
+ "test:lib:dev": "pnpm test:lib --watch",
29
+ "test:types": "ember-tsc --noEmit",
30
+ "build": "tsdown",
31
+ "test:build": "publint --strict && node ../../scripts/verify-package.ts"
32
+ },
33
+ "type": "module",
34
+ "types": "./dist/index.d.ts",
35
+ "exports": {
36
+ ".": "./dist/index.js",
37
+ "./package.json": "./package.json",
38
+ "./addon-main.js": "./addon-main.cjs"
39
+ },
40
+ "sideEffects": [
41
+ "./tests/**"
42
+ ],
43
+ "engines": {
44
+ "node": ">=20"
45
+ },
46
+ "files": [
47
+ "dist",
48
+ "addon-main.cjs"
49
+ ],
50
+ "dependencies": {
51
+ "@embroider/addon-shim": "^1.10.3",
52
+ "@tanstack/hotkeys": "workspace:*",
53
+ "@tanstack/store": "^0.11.2",
54
+ "ember-modifier": "4.2.2"
55
+ },
56
+ "devDependencies": {
57
+ "@babel/core": "7.29.7",
58
+ "@babel/plugin-transform-typescript": "7.29.9",
59
+ "@ember/app-tsconfig": "2.1.0",
60
+ "@ember/test-helpers": "^5.7.0",
61
+ "@embroider/core": "4.6.7",
62
+ "@embroider/macros": "1.21.1",
63
+ "@embroider/vite": "^1.7.13",
64
+ "@glimmer/component": "2.1.1",
65
+ "@glint/ember-tsc": "1.11.6",
66
+ "@glint/template": "1.9.0",
67
+ "@glint/tsserver-plugin": "2.7.9",
68
+ "@rollup/plugin-babel": "7.1.0",
69
+ "@types/qunit": "^2.19.14",
70
+ "babel-plugin-ember-template-compilation": "4.0.0",
71
+ "decorator-transforms": "2.4.0",
72
+ "ember-qunit": "^9.2.0",
73
+ "ember-source": "7.3.0",
74
+ "ember-strict-application-resolver": "0.1.1",
75
+ "qunit": "^3.0.0",
76
+ "qunit-dom": "^3.6.0",
77
+ "testem": "^3.21.3",
78
+ "vite": "^8.3.2"
79
+ },
80
+ "peerDependencies": {
81
+ "ember-source": ">=6.8.0"
82
+ },
83
+ "ember-addon": {
84
+ "version": 2,
85
+ "type": "addon",
86
+ "main": "addon-main.cjs"
87
+ },
88
+ "nx": {
89
+ "targets": {
90
+ "test:lib": {
91
+ "dependsOn": [
92
+ "build",
93
+ "^build"
94
+ ]
95
+ }
96
+ }
97
+ }
98
+ }