@tanstack/alpine-hotkeys 0.1.0

package/README.md

@@ -0,0 +1,140 @@
+<div align="center">
+  <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 />
+
+<div align="center">
+	<a href="https://www.npmjs.com/package/@tanstack/hotkeys" target="\_parent">
+	  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/hotkeys.svg" alt="npm downloads" />
+	</a>
+	<a href="https://github.com/TanStack/hotkeys" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/hotkeys.svg?style=social&label=Star" alt="GitHub stars" />
+	</a>
+	<a href="https://bundlephobia.com/result?p=@tanstack/react-hotkeys@latest" target="\_parent">
+	  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-hotkeys@latest" alt="Bundle size" />
+	</a>
+</div>
+
+<div align="center">
+	<a href="#badge">
+	  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+	</a>
+	<a href="#badge">
+	  <img src="https://img.shields.io/github/v/release/tanstack/hotkeys" alt="Release"/>
+	</a>
+	<a href="https://twitter.com/tan_stack">
+	  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+	</a>
+</div>
+
+<div align="center">
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
+
+# TanStack Hotkeys
+
+> [!NOTE]
+> TanStack Hotkeys is alpha. We are actively developing the library and are open to feedback and contributions.
+
+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.
+
+- Type-safe bindings — template strings (`Mod+Shift+S`, `Escape`) or parsed objects for full control
+- Flexible options — `keydown`/`keyup`, `preventDefault`, `stopPropagation`, conditional enabled, `requireReset`
+- Cross-platform Mod — maps to Cmd on macOS and Ctrl on Windows/Linux
+- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, framework adapters, and devtools
+
+### <a href="https://tanstack.com/hotkeys">Read the docs →</a>
+
+<br />
+
+> [!NOTE]
+> You may know **TanStack Hotkeys** by our adapter names, too!
+>
+> - [**Alpine Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/alpine/quick-start)
+> - [**Ember Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/ember/quick-start)
+> - [**Octane Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/octane/quick-start)
+> - [**React Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/react/react-hotkeys)
+> - [**Preact Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/preact/preact-hotkeys)
+> - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
+> - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
+> - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
+> - [**Lit Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/lit/reference)
+> - [**Svelte Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/svelte/reference)
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/hotkeys/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<div align="center">
+
+<table align="center">
+  <tr>
+    <td>
+      <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" height="40" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" />
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" height="60" />
+          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+        </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="media/partner_logo.svg" alt="Keys & you?" height="65">
+<p>
+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.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Hotkeys Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/hotkeys"><b>TanStack Hotkeys</b></a> – Type‑safe keyboard shortcuts
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/start"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

package/dist/createHeldKeyCodes.js

@@ -0,0 +1,9 @@
+import { getKeyStateTracker } from "@tanstack/hotkeys";
+
+//#region src/createHeldKeyCodes.ts
+function createHeldKeyCodes(scope) {
+	return scope.select(getKeyStateTracker().store, (state) => state.heldCodes);
+}
+
+//#endregion
+export { createHeldKeyCodes };

package/dist/createHeldKeys.js

@@ -0,0 +1,9 @@
+import { getKeyStateTracker } from "@tanstack/hotkeys";
+
+//#region src/createHeldKeys.ts
+function createHeldKeys(scope) {
+	return scope.select(getKeyStateTracker().store, (state) => state.heldKeys);
+}
+
+//#endregion
+export { createHeldKeys };

package/dist/createHotkey.js

@@ -0,0 +1,13 @@
+import { read } from "./scope.js";
+import { createHotkeys } from "./createHotkeys.js";
+
+//#region src/createHotkey.ts
+function createHotkey(scope, hotkey, callback, options = {}) {
+	createHotkeys(scope, () => [{
+		hotkey: read(hotkey),
+		callback
+	}], options);
+}
+
+//#endregion
+export { createHotkey };

package/dist/createHotkeyHint.js

@@ -0,0 +1,10 @@
+import { read } from "./scope.js";
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+
+//#region src/createHotkeyHint.ts
+function createHotkeyHint(scope, hotkey, options = {}) {
+	return scope.select(getKeyStateTracker().store, (state) => matchesHeldModifiers(read(hotkey), state.heldKeys, read(options)));
+}
+
+//#endregion
+export { createHotkeyHint };

package/dist/createHotkeyRecorder.js

@@ -0,0 +1,29 @@
+import { read } from "./scope.js";
+import { HotkeyRecorder } from "@tanstack/hotkeys";
+
+//#region src/createHotkeyRecorder.ts
+function createHotkeyRecorder(scope, options) {
+	scope.assertActive();
+	const instance = new HotkeyRecorder(() => ({
+		...scope.defaultOptions().hotkeyRecorder,
+		...read(options)
+	}));
+	const state = scope.select(instance.store, (value) => value);
+	scope.addCleanup(() => instance.destroy());
+	return {
+		get isRecording() {
+			return state.value.isRecording;
+		},
+		get recordedHotkey() {
+			return state.value.recordedHotkey;
+		},
+		startRecording: () => {
+			if (!scope.destroyed) instance.start();
+		},
+		stopRecording: () => instance.stop(),
+		cancelRecording: () => instance.cancel()
+	};
+}
+
+//#endregion
+export { createHotkeyRecorder };

package/dist/createHotkeyRegistrations.js

@@ -0,0 +1,18 @@
+import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
+
+//#region src/createHotkeyRegistrations.ts
+function createHotkeyRegistrations(scope) {
+	const hotkeyState = scope.select(getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView));
+	const sequenceState = scope.select(getSequenceManager().registrations, (state) => Array.from(state.values()));
+	return {
+		get hotkeys() {
+			return hotkeyState.value;
+		},
+		get sequences() {
+			return sequenceState.value;
+		}
+	};
+}
+
+//#endregion
+export { createHotkeyRegistrations };

package/dist/createHotkeySequence.js

@@ -0,0 +1,13 @@
+import { read } from "./scope.js";
+import { createHotkeySequences } from "./createHotkeySequences.js";
+
+//#region src/createHotkeySequence.ts
+function createHotkeySequence(scope, sequence, callback, options = {}) {
+	createHotkeySequences(scope, () => [{
+		sequence: read(sequence),
+		callback
+	}], options);
+}
+
+//#endregion
+export { createHotkeySequence };

package/dist/createHotkeySequenceRecorder.js

@@ -0,0 +1,33 @@
+import { read } from "./scope.js";
+import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
+
+//#region src/createHotkeySequenceRecorder.ts
+function createHotkeySequenceRecorder(scope, options) {
+	scope.assertActive();
+	const instance = new HotkeySequenceRecorder(() => ({
+		...scope.defaultOptions().hotkeySequenceRecorder,
+		...read(options)
+	}));
+	const state = scope.select(instance.store, (value) => value);
+	scope.addCleanup(() => instance.destroy());
+	return {
+		get isRecording() {
+			return state.value.isRecording;
+		},
+		get steps() {
+			return state.value.steps;
+		},
+		get recordedSequence() {
+			return state.value.recordedSequence;
+		},
+		startRecording: () => {
+			if (!scope.destroyed) instance.start();
+		},
+		stopRecording: () => instance.stop(),
+		cancelRecording: () => instance.cancel(),
+		commitRecording: () => instance.commit()
+	};
+}
+
+//#endregion
+export { createHotkeySequenceRecorder };

package/dist/createHotkeySequences.js

@@ -0,0 +1,16 @@
+import { read } from "./scope.js";
+import { createHotkeySequenceBindings } from "@tanstack/hotkeys/adapter";
+
+//#region src/createHotkeySequences.ts
+function createHotkeySequences(scope, definitions, options = {}) {
+	scope.assertActive();
+	const bindings = createHotkeySequenceBindings();
+	scope.addCleanup(bindings.destroy);
+	scope.effect(() => bindings.update(read(definitions), {
+		...scope.defaultOptions().hotkeySequence,
+		...read(options)
+	}));
+}
+
+//#endregion
+export { createHotkeySequences };

package/dist/createHotkeys.js

@@ -0,0 +1,16 @@
+import { read } from "./scope.js";
+import { createHotkeyBindings } from "@tanstack/hotkeys/adapter";
+
+//#region src/createHotkeys.ts
+function createHotkeys(scope, definitions, options = {}) {
+	scope.assertActive();
+	const bindings = createHotkeyBindings();
+	scope.addCleanup(bindings.destroy);
+	scope.effect(() => bindings.update(read(definitions), {
+		...scope.defaultOptions().hotkey,
+		...read(options)
+	}));
+}
+
+//#endregion
+export { createHotkeys };

package/dist/createHotkeysScope.d.ts

@@ -0,0 +1,6 @@
+import { AlpineHotkeys, DefaultHotkeysOptions, MaybeGetter } from "./types.js";
+//#region src/createHotkeysScope.d.ts
+/** Owns Alpine effects and Store subscriptions, with optional shared defaults. Call destroy from x-data's destroy hook. */
+export declare function createHotkeysScope(defaultOptions?: MaybeGetter<DefaultHotkeysOptions>): AlpineHotkeys;
+//#endregion
+export type { AlpineHotkeys, DefaultHotkeysOptions, MaybeGetter };

package/dist/createHotkeysScope.js

@@ -0,0 +1,35 @@
+import { createScope } from "./scope.js";
+import { createHotkeys } from "./createHotkeys.js";
+import { createHotkey } from "./createHotkey.js";
+import { createHotkeySequences } from "./createHotkeySequences.js";
+import { createHotkeySequence } from "./createHotkeySequence.js";
+import { createHeldKeys } from "./createHeldKeys.js";
+import { createHeldKeyCodes } from "./createHeldKeyCodes.js";
+import { createKeyHold } from "./createKeyHold.js";
+import { createHotkeyHint } from "./createHotkeyHint.js";
+import { createHotkeyRegistrations } from "./createHotkeyRegistrations.js";
+import { createHotkeyRecorder } from "./createHotkeyRecorder.js";
+import { createHotkeySequenceRecorder } from "./createHotkeySequenceRecorder.js";
+
+//#region src/createHotkeysScope.ts
+/** Owns Alpine effects and Store subscriptions, with optional shared defaults. Call destroy from x-data's destroy hook. */
+function createHotkeysScope(defaultOptions = {}) {
+	const scope = createScope(defaultOptions);
+	return {
+		createHotkey: (...args) => createHotkey(scope, ...args),
+		createHotkeys: (...args) => createHotkeys(scope, ...args),
+		createHotkeySequence: (...args) => createHotkeySequence(scope, ...args),
+		createHotkeySequences: (...args) => createHotkeySequences(scope, ...args),
+		createHeldKeys: (...args) => createHeldKeys(scope, ...args),
+		createHeldKeyCodes: (...args) => createHeldKeyCodes(scope, ...args),
+		createKeyHold: (...args) => createKeyHold(scope, ...args),
+		createHotkeyHint: (...args) => createHotkeyHint(scope, ...args),
+		createHotkeyRegistrations: (...args) => createHotkeyRegistrations(scope, ...args),
+		createHotkeyRecorder: (...args) => createHotkeyRecorder(scope, ...args),
+		createHotkeySequenceRecorder: (...args) => createHotkeySequenceRecorder(scope, ...args),
+		destroy: scope.destroy
+	};
+}
+
+//#endregion
+export { createHotkeysScope };

package/dist/createKeyHold.js

@@ -0,0 +1,10 @@
+import { read } from "./scope.js";
+import { getKeyStateTracker } from "@tanstack/hotkeys";
+
+//#region src/createKeyHold.ts
+function createKeyHold(scope, key) {
+	return scope.select(getKeyStateTracker().store, (state) => state.heldKeys.includes(read(key)));
+}
+
+//#endregion
+export { createKeyHold };

package/dist/hotkeysPlugin.d.ts

@@ -0,0 +1,5 @@
+import Alpine from "alpinejs";
+//#region src/hotkeysPlugin.d.ts
+/** Installs $hotkeys, whose registrations and subscriptions belong to its element. */
+export declare function hotkeysPlugin(alpine: typeof Alpine): void;
+//#endregion

package/dist/hotkeysPlugin.js

@@ -0,0 +1,23 @@
+import { createHotkeysScope } from "./createHotkeysScope.js";
+
+//#region src/hotkeysPlugin.ts
+/** Installs $hotkeys, whose registrations and subscriptions belong to its element. */
+function hotkeysPlugin(alpine) {
+	const scopes = /* @__PURE__ */ new WeakMap();
+	alpine.magic("hotkeys", (element, { cleanup }) => {
+		let scope = scopes.get(element);
+		if (!scope) {
+			scope = createHotkeysScope();
+			scopes.set(element, scope);
+			const ownedScope = scope;
+			cleanup(() => {
+				ownedScope.destroy();
+				scopes.delete(element);
+			});
+		}
+		return scope;
+	});
+}
+
+//#endregion
+export { hotkeysPlugin };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { AlpineHotkeyRecorder, AlpineHotkeySequenceRecorder, AlpineHotkeyState, AlpineHotkeys, DefaultHotkeysOptions, HotkeyRegistrationsResult, MaybeGetter } from "./types.js";
+import { createHotkeysScope } from "./createHotkeysScope.js";
+import { hotkeysPlugin } from "./hotkeysPlugin.js";
+import { HotkeyDefinition, HotkeySequenceDefinition } from "@tanstack/hotkeys/adapter";
+export * from "@tanstack/hotkeys";
+export { AlpineHotkeyRecorder, AlpineHotkeySequenceRecorder, AlpineHotkeyState, AlpineHotkeys, DefaultHotkeysOptions, type HotkeyDefinition, HotkeyRegistrationsResult, type HotkeySequenceDefinition, MaybeGetter, createHotkeysScope, hotkeysPlugin };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { createHotkeysScope } from "./createHotkeysScope.js";
+import { hotkeysPlugin } from "./hotkeysPlugin.js";
+
+export * from "@tanstack/hotkeys"
+
+export { createHotkeysScope, hotkeysPlugin };

package/dist/scope.js

@@ -0,0 +1,50 @@
+import Alpine from "alpinejs";
+
+//#region src/scope.ts
+function read(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createScope(defaultOptions) {
+	const cleanups = /* @__PURE__ */ new Set();
+	let destroyed = false;
+	function assertActive() {
+		if (destroyed) throw new Error("Cannot use a destroyed hotkeys scope");
+	}
+	function effect(callback) {
+		assertActive();
+		const runner = Alpine.effect(() => {
+			if (!destroyed) callback();
+		});
+		cleanups.add(() => Alpine.release(runner));
+	}
+	function select(store, selector) {
+		assertActive();
+		const state = Alpine.reactive({ snapshot: store.state });
+		const subscription = store.subscribe(() => {
+			state.snapshot = store.state;
+		});
+		cleanups.add(() => subscription.unsubscribe());
+		return { get value() {
+			return selector(state.snapshot);
+		} };
+	}
+	return {
+		assertActive,
+		effect,
+		select,
+		defaultOptions: () => read(defaultOptions),
+		addCleanup: (cleanup) => cleanups.add(cleanup),
+		get destroyed() {
+			return destroyed;
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			for (const cleanup of [...cleanups].reverse()) cleanup();
+			cleanups.clear();
+		}
+	};
+}
+
+//#endregion
+export { createScope, read };

package/dist/types.d.ts

@@ -0,0 +1,79 @@
+import { HeldModifierOptions, Hotkey, HotkeyCallback, HotkeyOptions, HotkeyRecorderOptions, HotkeyRegistrationView, HotkeySequence, HotkeySequenceRecorderOptions, IndividualKey, RegisterableHotkey, SequenceOptions, SequenceRegistrationView } from "@tanstack/hotkeys";
+import { HotkeyDefinition, HotkeySequenceDefinition } from "@tanstack/hotkeys/adapter";
+//#region src/types.d.ts
+/** A reactive value. Read `.value` where the framework tracks dependencies. */
+export interface AlpineHotkeyState<T> {
+  readonly value: T;
+}
+/** Recording state and controls owned by the containing scope. */
+export interface AlpineHotkeyRecorder {
+  /** Whether the recorder is listening for a shortcut. */
+  readonly isRecording: boolean;
+  /** The last recorded binding, including brackets for physical codes. */
+  readonly recordedHotkey: Hotkey | null;
+  /** Start a new recording session. */
+  startRecording: () => void;
+  /** Stop and clear recorder state without calling onRecord or onCancel. */
+  stopRecording: () => void;
+  /** Stop, clear recorder state, and call onCancel. */
+  cancelRecording: () => void;
+}
+/** Sequence recording state and controls. */
+export interface AlpineHotkeySequenceRecorder {
+  /** Whether the recorder is listening for chords. */
+  readonly isRecording: boolean;
+  /** Chords captured in the current session. */
+  readonly steps: HotkeySequence;
+  /** The last committed sequence. */
+  readonly recordedSequence: HotkeySequence | null;
+  /** Start a new recording session. */
+  startRecording: () => void;
+  /** Stop without committing or calling onCancel. */
+  stopRecording: () => void;
+  /** Discard the current session and call onCancel. */
+  cancelRecording: () => void;
+  /** Commit the current steps. Does nothing when no steps are recorded. */
+  commitRecording: () => void;
+}
+/** Live registration views from the shared hotkey and sequence managers. */
+export interface HotkeyRegistrationsResult {
+  readonly hotkeys: Array<HotkeyRegistrationView>;
+  readonly sequences: Array<SequenceRegistrationView>;
+}
+/** A value or a getter evaluated within an Alpine effect or reactive read. */
+export type MaybeGetter<T> = T | (() => T);
+/** Registrations, recorders, and reactive state owned by one Alpine component. */
+export interface AlpineHotkeys {
+  /** Register one shortcut. Getters track changing bindings and options. */
+  createHotkey: (hotkey: MaybeGetter<RegisterableHotkey>, callback: HotkeyCallback, options?: MaybeGetter<HotkeyOptions>) => void;
+  /** Reconcile a list of shortcuts. Definition options override common options. */
+  createHotkeys: (definitions: MaybeGetter<Array<HotkeyDefinition>>, options?: MaybeGetter<HotkeyOptions>) => void;
+  /** Register consecutive chords with an optional timeout and element target. */
+  createHotkeySequence: (sequence: MaybeGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeGetter<SequenceOptions>) => void;
+  /** Reconcile a changing list of sequences. */
+  createHotkeySequences: (definitions: MaybeGetter<Array<HotkeySequenceDefinition>>, options?: MaybeGetter<SequenceOptions>) => void;
+  /** Read held logical key names through `.value`. */
+  createHeldKeys: () => AlpineHotkeyState<Array<string>>;
+  /** Read the mapping of held logical names to physical codes through `.value`. */
+  createHeldKeyCodes: () => AlpineHotkeyState<Record<string, string>>;
+  /** Read whether a key is held through `.value`. */
+  createKeyHold: (key: MaybeGetter<IndividualKey>) => AlpineHotkeyState<boolean>;
+  /** Read whether held modifiers reveal a binding through `.value`. */
+  createHotkeyHint: (hotkey: MaybeGetter<RegisterableHotkey>, options?: MaybeGetter<HeldModifierOptions>) => AlpineHotkeyState<boolean>;
+  /** Read live hotkey and sequence registrations, including disabled entries. */
+  createHotkeyRegistrations: () => HotkeyRegistrationsResult;
+  /** Create a recorder whose options can follow Alpine state. */
+  createHotkeyRecorder: (options: MaybeGetter<HotkeyRecorderOptions>) => AlpineHotkeyRecorder;
+  /** Create a sequence recorder with live steps and explicit commit controls. */
+  createHotkeySequenceRecorder: (options: MaybeGetter<HotkeySequenceRecorderOptions>) => AlpineHotkeySequenceRecorder;
+  /** Release every registration, subscription, effect, and recorder. Idempotent. */
+  destroy: () => void;
+}
+/** Shared defaults; call-specific options take precedence. */
+export interface DefaultHotkeysOptions {
+  hotkey?: HotkeyOptions;
+  hotkeySequence?: SequenceOptions;
+  hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+  hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
+}
+//#endregion

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/alpine-hotkeys",
+  "version": "0.1.0",
+  "description": "Alpine adapter for TanStack Hotkeys",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/hotkeys.git",
+    "directory": "packages/alpine-hotkeys"
+  },
+  "homepage": "https://tanstack.com/hotkeys",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "alpine",
+    "tanstack",
+    "hotkeys"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "build": "tsdown",
+    "test:build": "publint --strict && node ../../scripts/verify-package.ts"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tanstack/hotkeys": "workspace:*",
+    "@tanstack/store": "^0.11.2"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.17.0",
+    "alpinejs": "^3.17.4"
+  },
+  "peerDependencies": {
+    "alpinejs": "^3.15.12"
+  }
+}