@tanstack/lit-hotkeys 0.0.1 → 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/controllers/hotkey-registrations.cjs

@@ -0,0 +1,70 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+
+//#region src/controllers/hotkey-registrations.ts
+/**
+* A Lit ReactiveController that tracks all hotkey and sequence registrations.
+*
+* Subscribes to the singleton HotkeyManager and SequenceManager stores and
+* triggers host updates whenever registrations change.
+*
+* @example
+* ```ts
+* class ShortcutPalette extends LitElement {
+*   private registrations = new HotkeyRegistrationsController(this)
+*
+*   render() {
+*     return html`
+*       <ul>
+*         ${this.registrations.hotkeys.map(
+*           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+*         )}
+*       </ul>
+*     `
+*   }
+* }
+* ```
+*/
+var HotkeyRegistrationsController = class {
+	/** All registered hotkeys (public view, no callbacks). */
+	get hotkeys() {
+		return this._hotkeys;
+	}
+	/** All registered sequences. */
+	get sequences() {
+		return this._sequences;
+	}
+	constructor(_host) {
+		this._host = _host;
+		this._hotkeys = [];
+		this._sequences = [];
+		this._host.addController(this);
+	}
+	hostConnected() {
+		const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
+		const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
+		const hotkeysSub = hotkeyManager.registrations.subscribe(() => {
+			this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView);
+			this._host.requestUpdate();
+		});
+		const sequencesSub = sequenceManager.registrations.subscribe(() => {
+			this._sequences = Array.from(sequenceManager.registrations.state.values());
+			this._host.requestUpdate();
+		});
+		this._unsubscribeHotkeys = () => hotkeysSub.unsubscribe();
+		this._unsubscribeSequences = () => sequencesSub.unsubscribe();
+		this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView);
+		this._sequences = Array.from(sequenceManager.registrations.state.values());
+	}
+	hostDisconnected() {
+		this._unsubscribeHotkeys?.();
+		this._unsubscribeSequences?.();
+		this._unsubscribeHotkeys = void 0;
+		this._unsubscribeSequences = void 0;
+		this._hotkeys = [];
+		this._sequences = [];
+	}
+};
+
+//#endregion
+exports.HotkeyRegistrationsController = HotkeyRegistrationsController;
+//# sourceMappingURL=hotkey-registrations.cjs.map

package/dist/controllers/hotkey-registrations.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey-registrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../../src/controllers/hotkey-registrations.ts"],"sourcesContent":["import {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/**\n * A Lit ReactiveController that tracks all hotkey and sequence registrations.\n *\n * Subscribes to the singleton HotkeyManager and SequenceManager stores and\n * triggers host updates whenever registrations change.\n *\n * @example\n * ```ts\n * class ShortcutPalette extends LitElement {\n *   private registrations = new HotkeyRegistrationsController(this)\n *\n *   render() {\n *     return html`\n *       <ul>\n *         ${this.registrations.hotkeys.map(\n *           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,\n *         )}\n *       </ul>\n *     `\n *   }\n * }\n * ```\n */\nexport class HotkeyRegistrationsController implements ReactiveController {\n  private _unsubscribeHotkeys: (() => void) | undefined\n  private _unsubscribeSequences: (() => void) | undefined\n  private _hotkeys: Array<HotkeyRegistrationView> = []\n  private _sequences: Array<SequenceRegistrationView> = []\n\n  /** All registered hotkeys (public view, no callbacks). */\n  public get hotkeys(): Array<HotkeyRegistrationView> {\n    return this._hotkeys\n  }\n\n  /** All registered sequences. */\n  public get sequences(): Array<SequenceRegistrationView> {\n    return this._sequences\n  }\n\n  constructor(private _host: ReactiveControllerHost) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const hotkeyManager = getHotkeyManager()\n    const sequenceManager = getSequenceManager()\n\n    const hotkeysSub = hotkeyManager.registrations.subscribe(() => {\n      this._hotkeys = Array.from(\n        hotkeyManager.registrations.state.values(),\n      ).map(toHotkeyRegistrationView)\n      this._host.requestUpdate()\n    })\n\n    const sequencesSub = sequenceManager.registrations.subscribe(() => {\n      this._sequences = Array.from(sequenceManager.registrations.state.values())\n      this._host.requestUpdate()\n    })\n\n    this._unsubscribeHotkeys = () => hotkeysSub.unsubscribe()\n    this._unsubscribeSequences = () => sequencesSub.unsubscribe()\n\n    // Sync initial state\n    this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(\n      toHotkeyRegistrationView,\n    )\n    this._sequences = Array.from(sequenceManager.registrations.state.values())\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribeHotkeys?.()\n    this._unsubscribeSequences?.()\n    this._unsubscribeHotkeys = undefined\n    this._unsubscribeSequences = undefined\n    this._hotkeys = []\n    this._sequences = []\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gCAAb,MAAyE;;CAOvE,IAAW,UAAyC;AAClD,SAAO,KAAK;;;CAId,IAAW,YAA6C;AACtD,SAAO,KAAK;;CAGd,YAAY,AAAQ,OAA+B;EAA/B;kBAb8B,EAAE;oBACE,EAAE;AAatD,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,yDAAkC;EACxC,MAAM,6DAAsC;EAE5C,MAAM,aAAa,cAAc,cAAc,gBAAgB;AAC7D,QAAK,WAAW,MAAM,KACpB,cAAc,cAAc,MAAM,QAAQ,CAC3C,CAAC,IAAIA,2CAAyB;AAC/B,QAAK,MAAM,eAAe;IAC1B;EAEF,MAAM,eAAe,gBAAgB,cAAc,gBAAgB;AACjE,QAAK,aAAa,MAAM,KAAK,gBAAgB,cAAc,MAAM,QAAQ,CAAC;AAC1E,QAAK,MAAM,eAAe;IAC1B;AAEF,OAAK,4BAA4B,WAAW,aAAa;AACzD,OAAK,8BAA8B,aAAa,aAAa;AAG7D,OAAK,WAAW,MAAM,KAAK,cAAc,cAAc,MAAM,QAAQ,CAAC,CAAC,IACrEA,2CACD;AACD,OAAK,aAAa,MAAM,KAAK,gBAAgB,cAAc,MAAM,QAAQ,CAAC;;CAG5E,AAAO,mBAAyB;AAC9B,OAAK,uBAAuB;AAC5B,OAAK,yBAAyB;AAC9B,OAAK,sBAAsB;AAC3B,OAAK,wBAAwB;AAC7B,OAAK,WAAW,EAAE;AAClB,OAAK,aAAa,EAAE"}

package/dist/controllers/hotkey-registrations.d.cts

@@ -0,0 +1,44 @@
+import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/controllers/hotkey-registrations.d.ts
+/**
+ * A Lit ReactiveController that tracks all hotkey and sequence registrations.
+ *
+ * Subscribes to the singleton HotkeyManager and SequenceManager stores and
+ * triggers host updates whenever registrations change.
+ *
+ * @example
+ * ```ts
+ * class ShortcutPalette extends LitElement {
+ *   private registrations = new HotkeyRegistrationsController(this)
+ *
+ *   render() {
+ *     return html`
+ *       <ul>
+ *         ${this.registrations.hotkeys.map(
+ *           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+ *         )}
+ *       </ul>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+declare class HotkeyRegistrationsController implements ReactiveController {
+  private _host;
+  private _unsubscribeHotkeys;
+  private _unsubscribeSequences;
+  private _hotkeys;
+  private _sequences;
+  /** All registered hotkeys (public view, no callbacks). */
+  get hotkeys(): Array<HotkeyRegistrationView>;
+  /** All registered sequences. */
+  get sequences(): Array<SequenceRegistrationView>;
+  constructor(_host: ReactiveControllerHost);
+  hostConnected(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { HotkeyRegistrationsController };
+//# sourceMappingURL=hotkey-registrations.d.cts.map

package/dist/controllers/hotkey-registrations.d.ts

@@ -0,0 +1,44 @@
+import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/controllers/hotkey-registrations.d.ts
+/**
+ * A Lit ReactiveController that tracks all hotkey and sequence registrations.
+ *
+ * Subscribes to the singleton HotkeyManager and SequenceManager stores and
+ * triggers host updates whenever registrations change.
+ *
+ * @example
+ * ```ts
+ * class ShortcutPalette extends LitElement {
+ *   private registrations = new HotkeyRegistrationsController(this)
+ *
+ *   render() {
+ *     return html`
+ *       <ul>
+ *         ${this.registrations.hotkeys.map(
+ *           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+ *         )}
+ *       </ul>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+declare class HotkeyRegistrationsController implements ReactiveController {
+  private _host;
+  private _unsubscribeHotkeys;
+  private _unsubscribeSequences;
+  private _hotkeys;
+  private _sequences;
+  /** All registered hotkeys (public view, no callbacks). */
+  get hotkeys(): Array<HotkeyRegistrationView>;
+  /** All registered sequences. */
+  get sequences(): Array<SequenceRegistrationView>;
+  constructor(_host: ReactiveControllerHost);
+  hostConnected(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { HotkeyRegistrationsController };
+//# sourceMappingURL=hotkey-registrations.d.ts.map

package/dist/controllers/hotkey-registrations.js

@@ -0,0 +1,70 @@
+import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
+
+//#region src/controllers/hotkey-registrations.ts
+/**
+* A Lit ReactiveController that tracks all hotkey and sequence registrations.
+*
+* Subscribes to the singleton HotkeyManager and SequenceManager stores and
+* triggers host updates whenever registrations change.
+*
+* @example
+* ```ts
+* class ShortcutPalette extends LitElement {
+*   private registrations = new HotkeyRegistrationsController(this)
+*
+*   render() {
+*     return html`
+*       <ul>
+*         ${this.registrations.hotkeys.map(
+*           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+*         )}
+*       </ul>
+*     `
+*   }
+* }
+* ```
+*/
+var HotkeyRegistrationsController = class {
+	/** All registered hotkeys (public view, no callbacks). */
+	get hotkeys() {
+		return this._hotkeys;
+	}
+	/** All registered sequences. */
+	get sequences() {
+		return this._sequences;
+	}
+	constructor(_host) {
+		this._host = _host;
+		this._hotkeys = [];
+		this._sequences = [];
+		this._host.addController(this);
+	}
+	hostConnected() {
+		const hotkeyManager = getHotkeyManager();
+		const sequenceManager = getSequenceManager();
+		const hotkeysSub = hotkeyManager.registrations.subscribe(() => {
+			this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(toHotkeyRegistrationView);
+			this._host.requestUpdate();
+		});
+		const sequencesSub = sequenceManager.registrations.subscribe(() => {
+			this._sequences = Array.from(sequenceManager.registrations.state.values());
+			this._host.requestUpdate();
+		});
+		this._unsubscribeHotkeys = () => hotkeysSub.unsubscribe();
+		this._unsubscribeSequences = () => sequencesSub.unsubscribe();
+		this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(toHotkeyRegistrationView);
+		this._sequences = Array.from(sequenceManager.registrations.state.values());
+	}
+	hostDisconnected() {
+		this._unsubscribeHotkeys?.();
+		this._unsubscribeSequences?.();
+		this._unsubscribeHotkeys = void 0;
+		this._unsubscribeSequences = void 0;
+		this._hotkeys = [];
+		this._sequences = [];
+	}
+};
+
+//#endregion
+export { HotkeyRegistrationsController };
+//# sourceMappingURL=hotkey-registrations.js.map

package/dist/controllers/hotkey-registrations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey-registrations.js","names":[],"sources":["../../src/controllers/hotkey-registrations.ts"],"sourcesContent":["import {\n  getHotkeyManager,\n  getSequenceManager,\n  toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n  HotkeyRegistrationView,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/**\n * A Lit ReactiveController that tracks all hotkey and sequence registrations.\n *\n * Subscribes to the singleton HotkeyManager and SequenceManager stores and\n * triggers host updates whenever registrations change.\n *\n * @example\n * ```ts\n * class ShortcutPalette extends LitElement {\n *   private registrations = new HotkeyRegistrationsController(this)\n *\n *   render() {\n *     return html`\n *       <ul>\n *         ${this.registrations.hotkeys.map(\n *           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,\n *         )}\n *       </ul>\n *     `\n *   }\n * }\n * ```\n */\nexport class HotkeyRegistrationsController implements ReactiveController {\n  private _unsubscribeHotkeys: (() => void) | undefined\n  private _unsubscribeSequences: (() => void) | undefined\n  private _hotkeys: Array<HotkeyRegistrationView> = []\n  private _sequences: Array<SequenceRegistrationView> = []\n\n  /** All registered hotkeys (public view, no callbacks). */\n  public get hotkeys(): Array<HotkeyRegistrationView> {\n    return this._hotkeys\n  }\n\n  /** All registered sequences. */\n  public get sequences(): Array<SequenceRegistrationView> {\n    return this._sequences\n  }\n\n  constructor(private _host: ReactiveControllerHost) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const hotkeyManager = getHotkeyManager()\n    const sequenceManager = getSequenceManager()\n\n    const hotkeysSub = hotkeyManager.registrations.subscribe(() => {\n      this._hotkeys = Array.from(\n        hotkeyManager.registrations.state.values(),\n      ).map(toHotkeyRegistrationView)\n      this._host.requestUpdate()\n    })\n\n    const sequencesSub = sequenceManager.registrations.subscribe(() => {\n      this._sequences = Array.from(sequenceManager.registrations.state.values())\n      this._host.requestUpdate()\n    })\n\n    this._unsubscribeHotkeys = () => hotkeysSub.unsubscribe()\n    this._unsubscribeSequences = () => sequencesSub.unsubscribe()\n\n    // Sync initial state\n    this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(\n      toHotkeyRegistrationView,\n    )\n    this._sequences = Array.from(sequenceManager.registrations.state.values())\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribeHotkeys?.()\n    this._unsubscribeSequences?.()\n    this._unsubscribeHotkeys = undefined\n    this._unsubscribeSequences = undefined\n    this._hotkeys = []\n    this._sequences = []\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gCAAb,MAAyE;;CAOvE,IAAW,UAAyC;AAClD,SAAO,KAAK;;;CAId,IAAW,YAA6C;AACtD,SAAO,KAAK;;CAGd,YAAY,AAAQ,OAA+B;EAA/B;kBAb8B,EAAE;oBACE,EAAE;AAatD,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,gBAAgB,kBAAkB;EACxC,MAAM,kBAAkB,oBAAoB;EAE5C,MAAM,aAAa,cAAc,cAAc,gBAAgB;AAC7D,QAAK,WAAW,MAAM,KACpB,cAAc,cAAc,MAAM,QAAQ,CAC3C,CAAC,IAAI,yBAAyB;AAC/B,QAAK,MAAM,eAAe;IAC1B;EAEF,MAAM,eAAe,gBAAgB,cAAc,gBAAgB;AACjE,QAAK,aAAa,MAAM,KAAK,gBAAgB,cAAc,MAAM,QAAQ,CAAC;AAC1E,QAAK,MAAM,eAAe;IAC1B;AAEF,OAAK,4BAA4B,WAAW,aAAa;AACzD,OAAK,8BAA8B,aAAa,aAAa;AAG7D,OAAK,WAAW,MAAM,KAAK,cAAc,cAAc,MAAM,QAAQ,CAAC,CAAC,IACrE,yBACD;AACD,OAAK,aAAa,MAAM,KAAK,gBAAgB,cAAc,MAAM,QAAQ,CAAC;;CAG5E,AAAO,mBAAyB;AAC9B,OAAK,uBAAuB;AAC5B,OAAK,yBAAyB;AAC9B,OAAK,sBAAsB;AAC3B,OAAK,wBAAwB;AAC7B,OAAK,WAAW,EAAE;AAClB,OAAK,aAAa,EAAE"}

package/dist/controllers/index.d.cts

@@ -2,6 +2,7 @@ import { HeldKeyCodesController } from "./held-key-codes.cjs";
 import { HeldKeysController } from "./held-keys.cjs";
 import { HotkeyController } from "./hotkey.cjs";
 import { HotkeyRecorderController } from "./hotkey-recorder.cjs";
+import { HotkeyRegistrationsController } from "./hotkey-registrations.cjs";
 import { HotkeySequenceController } from "./hotkey-sequence.cjs";
 import { HotkeySequenceRecorderController } from "./hotkey-sequence-recorder.cjs";
 import { KeyHoldController } from "./key-hold.cjs";

package/dist/controllers/index.d.ts

@@ -2,6 +2,7 @@ import { HeldKeyCodesController } from "./held-key-codes.js";
 import { HeldKeysController } from "./held-keys.js";
 import { HotkeyController } from "./hotkey.js";
 import { HotkeyRecorderController } from "./hotkey-recorder.js";
+import { HotkeyRegistrationsController } from "./hotkey-registrations.js";
 import { HotkeySequenceController } from "./hotkey-sequence.js";
 import { HotkeySequenceRecorderController } from "./hotkey-sequence-recorder.js";
 import { KeyHoldController } from "./key-hold.js";

package/dist/controllers/key-hold.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"key-hold.cjs","names":[],"sources":["../../src/controllers/key-hold.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { HeldKey, KeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * A Lit ReactiveController that tracks whether a specific key is currently held.\n *\n * Subscribes to the global KeyStateTracker and triggers host updates\n * when the held state of the specified key changes.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   private shiftHold = new KeyHoldController(this, 'Shift')\n *\n *   render() {\n *     return html`\n *       <div style=\"opacity: ${this.shiftHold.value ? 1 : 0.5}\">\n *         ${this.shiftHold.value ? 'Shift is pressed!' : 'Press Shift'}\n *       </div>\n *     `\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class ModifierIndicators extends LitElement {\n *   private ctrl = new KeyHoldController(this, 'Control')\n *   private shift = new KeyHoldController(this, 'Shift')\n *   private alt = new KeyHoldController(this, 'Alt')\n *\n *   render() {\n *     return html`\n *       <span style=\"opacity: ${this.ctrl.value ? 1 : 0.3}\">Ctrl</span>\n *       <span style=\"opacity: ${this.shift.value ? 1 : 0.3}\">Shift</span>\n *       <span style=\"opacity: ${this.alt.value ? 1 : 0.3}\">Alt</span>\n *     `\n *   }\n * }\n * ```\n */\nexport class KeyHoldController implements ReactiveController {\n  /** The unsubscribe function to unsubscribe from the tracker store. */\n  private _unsubscribe: (() => void) | undefined\n  /** Whether the tracked key is currently held down. */\n  private _value = false\n\n  /** Whether the tracked key is currently held down. */\n  public get value(): boolean {\n    return this._value\n  }\n\n  /**\n   * @param host - The Lit component that owns this controller.\n   * @param key - The key to track (e.g. 'Shift', 'Control', 'A').\n   */\n  constructor(\n    private _host: ReactiveControllerHost,\n    private _key: HeldKey,\n  ) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const tracker: KeyStateTracker = getKeyStateTracker()\n    const normalizedKey: string = this._key.toLowerCase()\n\n    const subscription = tracker.store.subscribe(() => {\n      const isHeld: boolean = tracker.store.state.heldKeys.some(\n        (heldKey: string) => heldKey.toLowerCase() === normalizedKey,\n      )\n\n      if (isHeld !== this._value) {\n        this._value = isHeld\n        this._host.requestUpdate()\n      }\n    })\n\n    this._unsubscribe = () => subscription.unsubscribe()\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribe?.()\n    this._unsubscribe = undefined\n    this._value = false\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,oBAAb,MAA6D;;CAO3D,IAAW,QAAiB;AAC1B,SAAO,KAAK;;;;;;CAOd,YACE,AAAQ,OACR,AAAQ,MACR;EAFQ;EACA;gBAbO;AAef,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,qDAA+C;EACrD,MAAM,gBAAwB,KAAK,KAAK,aAAa;EAErD,MAAM,eAAe,QAAQ,MAAM,gBAAgB;GACjD,MAAM,SAAkB,QAAQ,MAAM,MAAM,SAAS,MAClD,YAAoB,QAAQ,aAAa,KAAK,cAChD;AAED,OAAI,WAAW,KAAK,QAAQ;AAC1B,SAAK,SAAS;AACd,SAAK,MAAM,eAAe;;IAE5B;AAEF,OAAK,qBAAqB,aAAa,aAAa;;CAGtD,AAAO,mBAAyB;AAC9B,OAAK,gBAAgB;AACrB,OAAK,eAAe;AACpB,OAAK,SAAS"}
+{"version":3,"file":"key-hold.cjs","names":[],"sources":["../../src/controllers/key-hold.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { IndividualKey, KeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * A Lit ReactiveController that tracks whether a specific key is currently held.\n *\n * Subscribes to the global KeyStateTracker and triggers host updates\n * when the held state of the specified key changes.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   private shiftHold = new KeyHoldController(this, 'Shift')\n *\n *   render() {\n *     return html`\n *       <div style=\"opacity: ${this.shiftHold.value ? 1 : 0.5}\">\n *         ${this.shiftHold.value ? 'Shift is pressed!' : 'Press Shift'}\n *       </div>\n *     `\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class ModifierIndicators extends LitElement {\n *   private ctrl = new KeyHoldController(this, 'Control')\n *   private shift = new KeyHoldController(this, 'Shift')\n *   private alt = new KeyHoldController(this, 'Alt')\n *\n *   render() {\n *     return html`\n *       <span style=\"opacity: ${this.ctrl.value ? 1 : 0.3}\">Ctrl</span>\n *       <span style=\"opacity: ${this.shift.value ? 1 : 0.3}\">Shift</span>\n *       <span style=\"opacity: ${this.alt.value ? 1 : 0.3}\">Alt</span>\n *     `\n *   }\n * }\n * ```\n */\nexport class KeyHoldController implements ReactiveController {\n  /** The unsubscribe function to unsubscribe from the tracker store. */\n  private _unsubscribe: (() => void) | undefined\n  /** Whether the tracked key is currently held down. */\n  private _value = false\n\n  /** Whether the tracked key is currently held down. */\n  public get value(): boolean {\n    return this._value\n  }\n\n  /**\n   * @param host - The Lit component that owns this controller.\n   * @param key - The key to track (e.g. 'Shift', 'Control', 'A').\n   */\n  constructor(\n    private _host: ReactiveControllerHost,\n    private _key: IndividualKey,\n  ) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const tracker: KeyStateTracker = getKeyStateTracker()\n    const normalizedKey: string = this._key.toLowerCase()\n\n    const subscription = tracker.store.subscribe(() => {\n      const isHeld: boolean = tracker.store.state.heldKeys.some(\n        (heldKey: string) => heldKey.toLowerCase() === normalizedKey,\n      )\n\n      if (isHeld !== this._value) {\n        this._value = isHeld\n        this._host.requestUpdate()\n      }\n    })\n\n    this._unsubscribe = () => subscription.unsubscribe()\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribe?.()\n    this._unsubscribe = undefined\n    this._value = false\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,oBAAb,MAA6D;;CAO3D,IAAW,QAAiB;AAC1B,SAAO,KAAK;;;;;;CAOd,YACE,AAAQ,OACR,AAAQ,MACR;EAFQ;EACA;gBAbO;AAef,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,qDAA+C;EACrD,MAAM,gBAAwB,KAAK,KAAK,aAAa;EAErD,MAAM,eAAe,QAAQ,MAAM,gBAAgB;GACjD,MAAM,SAAkB,QAAQ,MAAM,MAAM,SAAS,MAClD,YAAoB,QAAQ,aAAa,KAAK,cAChD;AAED,OAAI,WAAW,KAAK,QAAQ;AAC1B,SAAK,SAAS;AACd,SAAK,MAAM,eAAe;;IAE5B;AAEF,OAAK,qBAAqB,aAAa,aAAa;;CAGtD,AAAO,mBAAyB;AAC9B,OAAK,gBAAgB;AACrB,OAAK,eAAe;AACpB,OAAK,SAAS"}

package/dist/controllers/key-hold.d.cts

@@ -1,4 +1,4 @@
-import { HeldKey } from "@tanstack/hotkeys";
+import { IndividualKey } from "@tanstack/hotkeys";
 import { ReactiveController, ReactiveControllerHost } from "lit";
 
 //#region src/controllers/key-hold.d.ts
@@ -53,7 +53,7 @@ declare class KeyHoldController implements ReactiveController {
    * @param host - The Lit component that owns this controller.
    * @param key - The key to track (e.g. 'Shift', 'Control', 'A').
    */
-  constructor(_host: ReactiveControllerHost, _key: HeldKey);
+  constructor(_host: ReactiveControllerHost, _key: IndividualKey);
   hostConnected(): void;
   hostDisconnected(): void;
 }

package/dist/controllers/key-hold.d.ts

@@ -1,4 +1,4 @@
-import { HeldKey } from "@tanstack/hotkeys";
+import { IndividualKey } from "@tanstack/hotkeys";
 import { ReactiveController, ReactiveControllerHost } from "lit";
 
 //#region src/controllers/key-hold.d.ts
@@ -53,7 +53,7 @@ declare class KeyHoldController implements ReactiveController {
    * @param host - The Lit component that owns this controller.
    * @param key - The key to track (e.g. 'Shift', 'Control', 'A').
    */
-  constructor(_host: ReactiveControllerHost, _key: HeldKey);
+  constructor(_host: ReactiveControllerHost, _key: IndividualKey);
   hostConnected(): void;
   hostDisconnected(): void;
 }

package/dist/controllers/key-hold.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-hold.js","names":[],"sources":["../../src/controllers/key-hold.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { HeldKey, KeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * A Lit ReactiveController that tracks whether a specific key is currently held.\n *\n * Subscribes to the global KeyStateTracker and triggers host updates\n * when the held state of the specified key changes.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   private shiftHold = new KeyHoldController(this, 'Shift')\n *\n *   render() {\n *     return html`\n *       <div style=\"opacity: ${this.shiftHold.value ? 1 : 0.5}\">\n *         ${this.shiftHold.value ? 'Shift is pressed!' : 'Press Shift'}\n *       </div>\n *     `\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class ModifierIndicators extends LitElement {\n *   private ctrl = new KeyHoldController(this, 'Control')\n *   private shift = new KeyHoldController(this, 'Shift')\n *   private alt = new KeyHoldController(this, 'Alt')\n *\n *   render() {\n *     return html`\n *       <span style=\"opacity: ${this.ctrl.value ? 1 : 0.3}\">Ctrl</span>\n *       <span style=\"opacity: ${this.shift.value ? 1 : 0.3}\">Shift</span>\n *       <span style=\"opacity: ${this.alt.value ? 1 : 0.3}\">Alt</span>\n *     `\n *   }\n * }\n * ```\n */\nexport class KeyHoldController implements ReactiveController {\n  /** The unsubscribe function to unsubscribe from the tracker store. */\n  private _unsubscribe: (() => void) | undefined\n  /** Whether the tracked key is currently held down. */\n  private _value = false\n\n  /** Whether the tracked key is currently held down. */\n  public get value(): boolean {\n    return this._value\n  }\n\n  /**\n   * @param host - The Lit component that owns this controller.\n   * @param key - The key to track (e.g. 'Shift', 'Control', 'A').\n   */\n  constructor(\n    private _host: ReactiveControllerHost,\n    private _key: HeldKey,\n  ) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const tracker: KeyStateTracker = getKeyStateTracker()\n    const normalizedKey: string = this._key.toLowerCase()\n\n    const subscription = tracker.store.subscribe(() => {\n      const isHeld: boolean = tracker.store.state.heldKeys.some(\n        (heldKey: string) => heldKey.toLowerCase() === normalizedKey,\n      )\n\n      if (isHeld !== this._value) {\n        this._value = isHeld\n        this._host.requestUpdate()\n      }\n    })\n\n    this._unsubscribe = () => subscription.unsubscribe()\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribe?.()\n    this._unsubscribe = undefined\n    this._value = false\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,oBAAb,MAA6D;;CAO3D,IAAW,QAAiB;AAC1B,SAAO,KAAK;;;;;;CAOd,YACE,AAAQ,OACR,AAAQ,MACR;EAFQ;EACA;gBAbO;AAef,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,UAA2B,oBAAoB;EACrD,MAAM,gBAAwB,KAAK,KAAK,aAAa;EAErD,MAAM,eAAe,QAAQ,MAAM,gBAAgB;GACjD,MAAM,SAAkB,QAAQ,MAAM,MAAM,SAAS,MAClD,YAAoB,QAAQ,aAAa,KAAK,cAChD;AAED,OAAI,WAAW,KAAK,QAAQ;AAC1B,SAAK,SAAS;AACd,SAAK,MAAM,eAAe;;IAE5B;AAEF,OAAK,qBAAqB,aAAa,aAAa;;CAGtD,AAAO,mBAAyB;AAC9B,OAAK,gBAAgB;AACrB,OAAK,eAAe;AACpB,OAAK,SAAS"}
+{"version":3,"file":"key-hold.js","names":[],"sources":["../../src/controllers/key-hold.ts"],"sourcesContent":["import { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { IndividualKey, KeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * A Lit ReactiveController that tracks whether a specific key is currently held.\n *\n * Subscribes to the global KeyStateTracker and triggers host updates\n * when the held state of the specified key changes.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   private shiftHold = new KeyHoldController(this, 'Shift')\n *\n *   render() {\n *     return html`\n *       <div style=\"opacity: ${this.shiftHold.value ? 1 : 0.5}\">\n *         ${this.shiftHold.value ? 'Shift is pressed!' : 'Press Shift'}\n *       </div>\n *     `\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class ModifierIndicators extends LitElement {\n *   private ctrl = new KeyHoldController(this, 'Control')\n *   private shift = new KeyHoldController(this, 'Shift')\n *   private alt = new KeyHoldController(this, 'Alt')\n *\n *   render() {\n *     return html`\n *       <span style=\"opacity: ${this.ctrl.value ? 1 : 0.3}\">Ctrl</span>\n *       <span style=\"opacity: ${this.shift.value ? 1 : 0.3}\">Shift</span>\n *       <span style=\"opacity: ${this.alt.value ? 1 : 0.3}\">Alt</span>\n *     `\n *   }\n * }\n * ```\n */\nexport class KeyHoldController implements ReactiveController {\n  /** The unsubscribe function to unsubscribe from the tracker store. */\n  private _unsubscribe: (() => void) | undefined\n  /** Whether the tracked key is currently held down. */\n  private _value = false\n\n  /** Whether the tracked key is currently held down. */\n  public get value(): boolean {\n    return this._value\n  }\n\n  /**\n   * @param host - The Lit component that owns this controller.\n   * @param key - The key to track (e.g. 'Shift', 'Control', 'A').\n   */\n  constructor(\n    private _host: ReactiveControllerHost,\n    private _key: IndividualKey,\n  ) {\n    this._host.addController(this)\n  }\n\n  public hostConnected(): void {\n    const tracker: KeyStateTracker = getKeyStateTracker()\n    const normalizedKey: string = this._key.toLowerCase()\n\n    const subscription = tracker.store.subscribe(() => {\n      const isHeld: boolean = tracker.store.state.heldKeys.some(\n        (heldKey: string) => heldKey.toLowerCase() === normalizedKey,\n      )\n\n      if (isHeld !== this._value) {\n        this._value = isHeld\n        this._host.requestUpdate()\n      }\n    })\n\n    this._unsubscribe = () => subscription.unsubscribe()\n  }\n\n  public hostDisconnected(): void {\n    this._unsubscribe?.()\n    this._unsubscribe = undefined\n    this._value = false\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,oBAAb,MAA6D;;CAO3D,IAAW,QAAiB;AAC1B,SAAO,KAAK;;;;;;CAOd,YACE,AAAQ,OACR,AAAQ,MACR;EAFQ;EACA;gBAbO;AAef,OAAK,MAAM,cAAc,KAAK;;CAGhC,AAAO,gBAAsB;EAC3B,MAAM,UAA2B,oBAAoB;EACrD,MAAM,gBAAwB,KAAK,KAAK,aAAa;EAErD,MAAM,eAAe,QAAQ,MAAM,gBAAgB;GACjD,MAAM,SAAkB,QAAQ,MAAM,MAAM,SAAS,MAClD,YAAoB,QAAQ,aAAa,KAAK,cAChD;AAED,OAAI,WAAW,KAAK,QAAQ;AAC1B,SAAK,SAAS;AACd,SAAK,MAAM,eAAe;;IAE5B;AAEF,OAAK,qBAAqB,aAAa,aAAa;;CAGtD,AAAO,mBAAyB;AAC9B,OAAK,gBAAgB;AACrB,OAAK,eAAe;AACpB,OAAK,SAAS"}

package/dist/index.cjs

@@ -6,6 +6,7 @@ const require_hotkey$1 = require('./decorators/hotkey.cjs');
 const require_held_key_codes = require('./controllers/held-key-codes.cjs');
 const require_held_keys = require('./controllers/held-keys.cjs');
 const require_hotkey_recorder = require('./controllers/hotkey-recorder.cjs');
+const require_hotkey_registrations = require('./controllers/hotkey-registrations.cjs');
 const require_hotkey_sequence_recorder = require('./controllers/hotkey-sequence-recorder.cjs');
 const require_key_hold = require('./controllers/key-hold.cjs');
 
@@ -13,6 +14,7 @@ exports.HeldKeyCodesController = require_held_key_codes.HeldKeyCodesController;
 exports.HeldKeysController = require_held_keys.HeldKeysController;
 exports.HotkeyController = require_hotkey.HotkeyController;
 exports.HotkeyRecorderController = require_hotkey_recorder.HotkeyRecorderController;
+exports.HotkeyRegistrationsController = require_hotkey_registrations.HotkeyRegistrationsController;
 exports.HotkeySequenceController = require_hotkey_sequence.HotkeySequenceController;
 exports.HotkeySequenceRecorderController = require_hotkey_sequence_recorder.HotkeySequenceRecorderController;
 exports.KeyHoldController = require_key_hold.KeyHoldController;

package/dist/index.d.cts

@@ -4,8 +4,9 @@ import { HeldKeyCodesController } from "./controllers/held-key-codes.cjs";
 import { HeldKeysController } from "./controllers/held-keys.cjs";
 import { HotkeyController } from "./controllers/hotkey.cjs";
 import { HotkeyRecorderController } from "./controllers/hotkey-recorder.cjs";
+import { HotkeyRegistrationsController } from "./controllers/hotkey-registrations.cjs";
 import { HotkeySequenceController } from "./controllers/hotkey-sequence.cjs";
 import { HotkeySequenceRecorderController } from "./controllers/hotkey-sequence-recorder.cjs";
 import { KeyHoldController } from "./controllers/key-hold.cjs";
 export * from "@tanstack/hotkeys";
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/dist/index.d.ts

@@ -4,8 +4,9 @@ import { HeldKeyCodesController } from "./controllers/held-key-codes.js";
 import { HeldKeysController } from "./controllers/held-keys.js";
 import { HotkeyController } from "./controllers/hotkey.js";
 import { HotkeyRecorderController } from "./controllers/hotkey-recorder.js";
+import { HotkeyRegistrationsController } from "./controllers/hotkey-registrations.js";
 import { HotkeySequenceController } from "./controllers/hotkey-sequence.js";
 import { HotkeySequenceRecorderController } from "./controllers/hotkey-sequence-recorder.js";
 import { KeyHoldController } from "./controllers/key-hold.js";
 export * from "@tanstack/hotkeys";
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/dist/index.js

@@ -5,9 +5,10 @@ import { hotkey } from "./decorators/hotkey.js";
 import { HeldKeyCodesController } from "./controllers/held-key-codes.js";
 import { HeldKeysController } from "./controllers/held-keys.js";
 import { HotkeyRecorderController } from "./controllers/hotkey-recorder.js";
+import { HotkeyRegistrationsController } from "./controllers/hotkey-registrations.js";
 import { HotkeySequenceRecorderController } from "./controllers/hotkey-sequence-recorder.js";
 import { KeyHoldController } from "./controllers/key-hold.js";
 
 export * from "@tanstack/hotkeys"
 
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/lit-hotkeys",
-  "version": "0.0.1",
+  "version": "0.10.0",
   "description": "Lit adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -19,16 +19,6 @@
     "tanstack",
     "keys"
   ],
-  "scripts": {
-    "clean": "premove ./build ./dist",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix",
-    "test:eslint": "eslint ./src",
-    "test:lib": "vitest --passWithNoTests",
-    "test:lib:dev": "pnpm test:lib --watch",
-    "test:types": "tsc",
-    "build": "tsdown"
-  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -49,12 +39,22 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "workspace:*"
+    "@tanstack/hotkeys": "0.7.0"
   },
   "devDependencies": {
     "lit": "^3.3.2"
   },
   "peerDependencies": {
     "lit": ">=3.0.0"
+  },
+  "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"
   }
-}
+}

package/src/controllers/hotkey-registrations.ts

@@ -0,0 +1,89 @@
+import {
+  getHotkeyManager,
+  getSequenceManager,
+  toHotkeyRegistrationView,
+} from '@tanstack/hotkeys'
+import type {
+  HotkeyRegistrationView,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+/**
+ * A Lit ReactiveController that tracks all hotkey and sequence registrations.
+ *
+ * Subscribes to the singleton HotkeyManager and SequenceManager stores and
+ * triggers host updates whenever registrations change.
+ *
+ * @example
+ * ```ts
+ * class ShortcutPalette extends LitElement {
+ *   private registrations = new HotkeyRegistrationsController(this)
+ *
+ *   render() {
+ *     return html`
+ *       <ul>
+ *         ${this.registrations.hotkeys.map(
+ *           (reg) => html`<li>${reg.options.meta?.name ?? reg.hotkey}</li>`,
+ *         )}
+ *       </ul>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+export class HotkeyRegistrationsController implements ReactiveController {
+  private _unsubscribeHotkeys: (() => void) | undefined
+  private _unsubscribeSequences: (() => void) | undefined
+  private _hotkeys: Array<HotkeyRegistrationView> = []
+  private _sequences: Array<SequenceRegistrationView> = []
+
+  /** All registered hotkeys (public view, no callbacks). */
+  public get hotkeys(): Array<HotkeyRegistrationView> {
+    return this._hotkeys
+  }
+
+  /** All registered sequences. */
+  public get sequences(): Array<SequenceRegistrationView> {
+    return this._sequences
+  }
+
+  constructor(private _host: ReactiveControllerHost) {
+    this._host.addController(this)
+  }
+
+  public hostConnected(): void {
+    const hotkeyManager = getHotkeyManager()
+    const sequenceManager = getSequenceManager()
+
+    const hotkeysSub = hotkeyManager.registrations.subscribe(() => {
+      this._hotkeys = Array.from(
+        hotkeyManager.registrations.state.values(),
+      ).map(toHotkeyRegistrationView)
+      this._host.requestUpdate()
+    })
+
+    const sequencesSub = sequenceManager.registrations.subscribe(() => {
+      this._sequences = Array.from(sequenceManager.registrations.state.values())
+      this._host.requestUpdate()
+    })
+
+    this._unsubscribeHotkeys = () => hotkeysSub.unsubscribe()
+    this._unsubscribeSequences = () => sequencesSub.unsubscribe()
+
+    // Sync initial state
+    this._hotkeys = Array.from(hotkeyManager.registrations.state.values()).map(
+      toHotkeyRegistrationView,
+    )
+    this._sequences = Array.from(sequenceManager.registrations.state.values())
+  }
+
+  public hostDisconnected(): void {
+    this._unsubscribeHotkeys?.()
+    this._unsubscribeSequences?.()
+    this._unsubscribeHotkeys = undefined
+    this._unsubscribeSequences = undefined
+    this._hotkeys = []
+    this._sequences = []
+  }
+}

package/src/controllers/index.ts

@@ -2,6 +2,7 @@ export * from './held-key-codes'
 export * from './held-keys'
 export * from './hotkey'
 export * from './hotkey-recorder'
+export * from './hotkey-registrations'
 export * from './hotkey-sequence'
 export * from './hotkey-sequence-recorder'
 export * from './key-hold'

package/src/controllers/key-hold.ts

@@ -1,6 +1,6 @@
 import { getKeyStateTracker } from '@tanstack/hotkeys'
 import type { ReactiveController, ReactiveControllerHost } from 'lit'
-import type { HeldKey, KeyStateTracker } from '@tanstack/hotkeys'
+import type { IndividualKey, KeyStateTracker } from '@tanstack/hotkeys'
 
 /**
  * A Lit ReactiveController that tracks whether a specific key is currently held.
@@ -57,7 +57,7 @@ export class KeyHoldController implements ReactiveController {
    */
   constructor(
     private _host: ReactiveControllerHost,
-    private _key: HeldKey,
+    private _key: IndividualKey,
   ) {
     this._host.addController(this)
   }