@tanstack/lit-hotkeys 0.18.0 → 0.18.1

package/dist/controllers/_server.js

@@ -0,0 +1,12 @@
+//#region src/controllers/_server.ts
+/**
+* Whether the code runs on a server. With `@lit-labs/ssr`'s
+* `connectedCallback: true` option, the server calls `hostConnected` and never
+* calls `hostDisconnected`, so controllers must not subscribe there.
+*/
+function isServer() {
+	return typeof document === "undefined";
+}
+
+//#endregion
+export { isServer };

package/dist/controllers/app-hotkeys.js

@@ -1,4 +1,5 @@
 import { getAppHotkeysStore, subscribeAppHotkeys } from "./_app-hotkeys.js";
+import { isServer } from "./_server.js";
 import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
 
 //#region src/controllers/app-hotkeys.ts
@@ -66,6 +67,7 @@ var AppHotkeysController = class {
 		return requireStore().findConflicts(id, hotkey);
 	}
 	hostConnected() {
+		if (isServer()) return;
 		const update = () => this._host.requestUpdate();
 		const unsubscribeAppHotkeys = subscribeAppHotkeys(update);
 		const registrations = getHotkeyManager().registrations.subscribe(update);

package/dist/controllers/held-key-codes.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/controllers/held-key-codes.ts
@@ -45,6 +46,7 @@ var HeldKeyCodesController = class {
 		const tracker = getKeyStateTracker();
 		this._value = tracker.store.state.heldCodes;
 		this._host.requestUpdate();
+		if (isServer()) return;
 		const subscription = tracker.store.subscribe(() => {
 			const { heldCodes } = tracker.store.state;
 			this._value = heldCodes;

package/dist/controllers/held-keys.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/controllers/held-keys.ts
@@ -41,6 +42,7 @@ var HeldKeysController = class {
 	}
 	/** Subscribes to the tracker store and updates the internal state when changes occur. */
 	hostConnected() {
+		if (isServer()) return;
 		const tracker = getKeyStateTracker();
 		const subscription = tracker.store.subscribe(() => {
 			const { heldKeys } = tracker.store.state;

package/dist/controllers/hotkey-hint.js

@@ -1,4 +1,5 @@
 import { getAppHotkeysStore, subscribeAppHotkeys } from "./_app-hotkeys.js";
+import { isServer } from "./_server.js";
 import { getHotkeyManager, getKeyStateTracker, isAppHotkey, matchesHeldModifiers, resolveAppHotkey } from "@tanstack/hotkeys";
 
 //#region src/controllers/hotkey-hint.ts
@@ -31,6 +32,7 @@ var HotkeyHintController = class {
 	hostConnected() {
 		this.update();
 		this.host.requestUpdate();
+		if (isServer()) return;
 		const refresh = () => {
 			if (this.update()) this.host.requestUpdate();
 		};

package/dist/controllers/hotkey-recorder.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 
 //#region src/controllers/hotkey-recorder.ts
@@ -75,6 +76,7 @@ var HotkeyRecorderController = class {
 	}
 	/** Subscribes to the recorder store and updates the internal state when changes occur. */
 	hostConnected() {
+		if (isServer()) return;
 		const subscription = this._recorder.store.subscribe(() => {
 			const { isRecording, recordedHotkey, steps } = this._recorder.store.state;
 			if (isRecording !== this._isRecording || recordedHotkey !== this._recordedHotkey || steps !== this._steps) {

package/dist/controllers/hotkey-registrations.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
 
 //#region src/controllers/hotkey-registrations.ts
@@ -36,12 +37,13 @@ var HotkeyRegistrationsController = class {
 	hostConnected() {
 		const manager = getHotkeyManager();
 		const read = () => Array.from(manager.registrations.state.values()).map(toHotkeyRegistrationView);
+		this._hotkeys = read();
+		if (isServer()) return;
 		const subscription = manager.registrations.subscribe(() => {
 			this._hotkeys = read();
 			this._host.requestUpdate();
 		});
 		this._unsubscribe = () => subscription.unsubscribe();
-		this._hotkeys = read();
 	}
 	hostDisconnected() {
 		this._unsubscribe?.();

package/dist/controllers/hotkey-scopes-state.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { getHotkeyManager } from "@tanstack/hotkeys";
 
 //#region src/controllers/hotkey-scopes-state.ts
@@ -40,6 +41,7 @@ var HotkeyScopesStateController = class {
 	*/
 	hostConnected() {
 		this._host.requestUpdate();
+		if (isServer()) return;
 		const subscription = getHotkeyManager().scopes.subscribe(() => this._host.requestUpdate());
 		this._unsubscribe = () => subscription.unsubscribe();
 	}

package/dist/controllers/hotkey.js

@@ -1,4 +1,5 @@
 import { getAppHotkeysStore, subscribeAppHotkeys } from "./_app-hotkeys.js";
+import { isServer } from "./_server.js";
 import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkeys/adapter";
 
 //#region src/controllers/hotkey.ts
@@ -42,6 +43,7 @@ var HotkeyController = class {
 	}
 	/** Registers when connected and a target is available. */
 	hostConnected() {
+		if (isServer()) return;
 		this._connected = true;
 		this._unsubscribe = subscribeAppHotkeys(() => this._sync());
 		this._sync();

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

@@ -5,7 +5,9 @@ import { ReactiveController, ReactiveControllerHost } from "lit";
  * A Lit ReactiveController that tracks whether a specific key is currently held.
  *
  * Subscribes to the global KeyStateTracker and triggers host updates
- * when the held state of the specified key changes.
+ * when the held state of the specified key changes. Pass a getter to track a
+ * key that changes, such as a reactive property; it is read again on each
+ * host update.
  *
  * @example
  * ```ts
@@ -50,10 +52,14 @@ export declare class KeyHoldController implements ReactiveController {
   get value(): boolean;
   /**
    * @param _host - The Lit component that owns this controller.
-   * @param _key - The key to track (e.g. 'Shift', 'Control', 'A').
+   * @param _key - The key to track (e.g. 'Shift', 'Control', 'A'), or a getter.
    */
-  constructor(_host: ReactiveControllerHost, _key: IndividualKey);
+  constructor(_host: ReactiveControllerHost, _key: IndividualKey | (() => IndividualKey));
   hostConnected(): void;
+  /** Re-reads a getter key when host properties trigger an update. */
+  hostUpdate(): void;
   hostDisconnected(): void;
+  /** Recomputes the held state and reports whether it changed. */
+  private _refresh;
 }
 //#endregion

package/dist/controllers/key-hold.js

@@ -1,3 +1,4 @@
+import { isServer } from "./_server.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/controllers/key-hold.ts
@@ -5,7 +6,9 @@ import { getKeyStateTracker } from "@tanstack/hotkeys";
 * A Lit ReactiveController that tracks whether a specific key is currently held.
 *
 * Subscribes to the global KeyStateTracker and triggers host updates
-* when the held state of the specified key changes.
+* when the held state of the specified key changes. Pass a getter to track a
+* key that changes, such as a reactive property; it is read again on each
+* host update.
 *
 * @example
 * ```ts
@@ -52,7 +55,7 @@ var KeyHoldController = class {
 	}
 	/**
 	* @param _host - The Lit component that owns this controller.
-	* @param _key - The key to track (e.g. 'Shift', 'Control', 'A').
+	* @param _key - The key to track (e.g. 'Shift', 'Control', 'A'), or a getter.
 	*/
 	constructor(_host, _key) {
 		this._host = _host;
@@ -60,22 +63,30 @@ var KeyHoldController = class {
 		this._host.addController(this);
 	}
 	hostConnected() {
-		const tracker = getKeyStateTracker();
-		const normalizedKey = this._key.toLowerCase();
-		const subscription = tracker.store.subscribe(() => {
-			const isHeld = tracker.store.state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey);
-			if (isHeld !== this._value) {
-				this._value = isHeld;
-				this._host.requestUpdate();
-			}
+		if (this._refresh()) this._host.requestUpdate();
+		if (isServer()) return;
+		const subscription = getKeyStateTracker().store.subscribe(() => {
+			if (this._refresh()) this._host.requestUpdate();
 		});
 		this._unsubscribe = () => subscription.unsubscribe();
 	}
+	/** Re-reads a getter key when host properties trigger an update. */
+	hostUpdate() {
+		this._refresh();
+	}
 	hostDisconnected() {
 		this._unsubscribe?.();
 		this._unsubscribe = void 0;
 		this._value = false;
 	}
+	/** Recomputes the held state and reports whether it changed. */
+	_refresh() {
+		const key = (typeof this._key === "function" ? this._key() : this._key).toLowerCase();
+		const next = getKeyStateTracker().store.state.heldKeys.some((heldKey) => heldKey.toLowerCase() === key);
+		const changed = next !== this._value;
+		this._value = next;
+		return changed;
+	}
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/lit-hotkeys",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Lit adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.18.0"
+    "@tanstack/hotkeys": "0.19.0"
   },
   "devDependencies": {
     "lit": "^3.3.3"

package/skills/lit-hotkeys/SKILL.md

@@ -74,7 +74,7 @@ export class MyEditor extends LitElement {
 | `new HotkeyRegistrationsController(host)`                | Read `.hotkeys`, every registered hotkey with its options, `meta`, and `status` (whether it's enabled and in an active scope).                                                                    |
 | `new HotkeyScopesStateController(host)`                  | Read `.value`, the active scopes and the exclusive scope that owns the keyboard.                                                                                                                  |
 | `new HotkeyHintController(host, hotkey, options?)`       | Read `.value`, whether held modifiers should reveal a shortcut's hint. False unless a registration of the hotkey can fire: enabled, in an active scope, and with focus inside its element target. |
-| `new KeyHoldController(host, key)`                       | Read `.value`, whether one key is held.                                                                                                                                                           |
+| `new KeyHoldController(host, key)`                       | Read `.value`, whether one key is held. Pass a getter, such as `() => this.key`, for a key that changes.                                                                                          |
 | `new HeldKeysController(host)`                           | Read `.value`, every key that's held right now.                                                                                                                                                   |
 | `new HeldKeyCodesController(host)`                       | Read `.value`, which maps each held key to its physical `event.code`.                                                                                                                             |