@tanstack/lit-hotkeys 0.11.0 → 0.12.0

package/README.md

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

package/dist/controllers/hotkey-hint.cjs

@@ -0,0 +1,47 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+
+//#region src/controllers/hotkey-hint.ts
+/** Modifier hint controller. Getter arguments can read reactive host properties. */
+var HotkeyHintController = class {
+	/** Attaches to the host; getter arguments can read changing reactive properties. */
+	constructor(host, hotkey, options = {}) {
+		this.host = host;
+		this.hotkey = hotkey;
+		this.options = options;
+		this.visible = false;
+		host.addController(this);
+	}
+	/** Current visibility; combine with the action’s enabled state when rendering. */
+	get value() {
+		return this.visible;
+	}
+	/** Subscribes on connection and requests renders only when hint visibility changes. */
+	hostConnected() {
+		this.update();
+		const subscription = (0, _tanstack_hotkeys.getKeyStateTracker)().store.subscribe(() => {
+			if (this.update()) this.host.requestUpdate();
+		});
+		this.unsubscribe = () => subscription.unsubscribe();
+	}
+	/** Re-evaluates getter arguments when host properties trigger an update. */
+	hostUpdate() {
+		this.update();
+	}
+	/** Releases the subscription and clears cached visibility while disconnected. */
+	hostDisconnected() {
+		this.unsubscribe?.();
+		this.unsubscribe = void 0;
+		this.visible = false;
+	}
+	/** Recomputes visibility and reports whether the host needs another render. */
+	update() {
+		const next = (0, _tanstack_hotkeys.matchesHeldModifiers)(typeof this.hotkey === "function" ? this.hotkey() : this.hotkey, (0, _tanstack_hotkeys.getKeyStateTracker)().store.state.heldKeys, typeof this.options === "function" ? this.options() : this.options);
+		const changed = next !== this.visible;
+		this.visible = next;
+		return changed;
+	}
+};
+
+//#endregion
+exports.HotkeyHintController = HotkeyHintController;
+//# sourceMappingURL=hotkey-hint.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey-hint.cjs","names":[],"sources":["../../src/controllers/hotkey-hint.ts"],"sourcesContent":["import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/** Modifier hint controller. Getter arguments can read reactive host properties. */\nexport class HotkeyHintController implements ReactiveController {\n  private unsubscribe?: () => void\n  private visible = false\n\n  /** Attaches to the host; getter arguments can read changing reactive properties. */\n  constructor(\n    private host: ReactiveControllerHost,\n    private hotkey: RegisterableHotkey | (() => RegisterableHotkey),\n    private options: HeldModifierOptions | (() => HeldModifierOptions) = {},\n  ) {\n    host.addController(this)\n  }\n\n  /** Current visibility; combine with the action’s enabled state when rendering. */\n  get value(): boolean {\n    return this.visible\n  }\n\n  /** Subscribes on connection and requests renders only when hint visibility changes. */\n  hostConnected(): void {\n    this.update()\n    const subscription = getKeyStateTracker().store.subscribe(() => {\n      if (this.update()) this.host.requestUpdate()\n    })\n    this.unsubscribe = () => subscription.unsubscribe()\n  }\n\n  /** Re-evaluates getter arguments when host properties trigger an update. */\n  hostUpdate(): void {\n    this.update()\n  }\n\n  /** Releases the subscription and clears cached visibility while disconnected. */\n  hostDisconnected(): void {\n    this.unsubscribe?.()\n    this.unsubscribe = undefined\n    this.visible = false\n  }\n\n  /** Recomputes visibility and reports whether the host needs another render. */\n  private update(): boolean {\n    const next = matchesHeldModifiers(\n      typeof this.hotkey === 'function' ? this.hotkey() : this.hotkey,\n      getKeyStateTracker().store.state.heldKeys,\n      typeof this.options === 'function' ? this.options() : this.options,\n    )\n    const changed = next !== this.visible\n    this.visible = next\n    return changed\n  }\n}\n"],"mappings":";;;;AAKA,IAAa,uBAAb,MAAgE;;CAK9D,YACE,AAAQ,MACR,AAAQ,QACR,AAAQ,UAA6D,EAAE,EACvE;EAHQ;EACA;EACA;iBANQ;AAQhB,OAAK,cAAc,KAAK;;;CAI1B,IAAI,QAAiB;AACnB,SAAO,KAAK;;;CAId,gBAAsB;AACpB,OAAK,QAAQ;EACb,MAAM,0DAAmC,CAAC,MAAM,gBAAgB;AAC9D,OAAI,KAAK,QAAQ,CAAE,MAAK,KAAK,eAAe;IAC5C;AACF,OAAK,oBAAoB,aAAa,aAAa;;;CAIrD,aAAmB;AACjB,OAAK,QAAQ;;;CAIf,mBAAyB;AACvB,OAAK,eAAe;AACpB,OAAK,cAAc;AACnB,OAAK,UAAU;;;CAIjB,AAAQ,SAAkB;EACxB,MAAM,mDACJ,OAAO,KAAK,WAAW,aAAa,KAAK,QAAQ,GAAG,KAAK,mDACrC,CAAC,MAAM,MAAM,UACjC,OAAO,KAAK,YAAY,aAAa,KAAK,SAAS,GAAG,KAAK,QAC5D;EACD,MAAM,UAAU,SAAS,KAAK;AAC9B,OAAK,UAAU;AACf,SAAO"}

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

@@ -0,0 +1,27 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/controllers/hotkey-hint.d.ts
+/** Modifier hint controller. Getter arguments can read reactive host properties. */
+declare class HotkeyHintController implements ReactiveController {
+  private host;
+  private hotkey;
+  private options;
+  private unsubscribe?;
+  private visible;
+  /** Attaches to the host; getter arguments can read changing reactive properties. */
+  constructor(host: ReactiveControllerHost, hotkey: RegisterableHotkey | (() => RegisterableHotkey), options?: HeldModifierOptions | (() => HeldModifierOptions));
+  /** Current visibility; combine with the action’s enabled state when rendering. */
+  get value(): boolean;
+  /** Subscribes on connection and requests renders only when hint visibility changes. */
+  hostConnected(): void;
+  /** Re-evaluates getter arguments when host properties trigger an update. */
+  hostUpdate(): void;
+  /** Releases the subscription and clears cached visibility while disconnected. */
+  hostDisconnected(): void;
+  /** Recomputes visibility and reports whether the host needs another render. */
+  private update;
+}
+//#endregion
+export { HotkeyHintController };
+//# sourceMappingURL=hotkey-hint.d.cts.map

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

@@ -0,0 +1,27 @@
+import { HeldModifierOptions, RegisterableHotkey } from "@tanstack/hotkeys";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/controllers/hotkey-hint.d.ts
+/** Modifier hint controller. Getter arguments can read reactive host properties. */
+declare class HotkeyHintController implements ReactiveController {
+  private host;
+  private hotkey;
+  private options;
+  private unsubscribe?;
+  private visible;
+  /** Attaches to the host; getter arguments can read changing reactive properties. */
+  constructor(host: ReactiveControllerHost, hotkey: RegisterableHotkey | (() => RegisterableHotkey), options?: HeldModifierOptions | (() => HeldModifierOptions));
+  /** Current visibility; combine with the action’s enabled state when rendering. */
+  get value(): boolean;
+  /** Subscribes on connection and requests renders only when hint visibility changes. */
+  hostConnected(): void;
+  /** Re-evaluates getter arguments when host properties trigger an update. */
+  hostUpdate(): void;
+  /** Releases the subscription and clears cached visibility while disconnected. */
+  hostDisconnected(): void;
+  /** Recomputes visibility and reports whether the host needs another render. */
+  private update;
+}
+//#endregion
+export { HotkeyHintController };
+//# sourceMappingURL=hotkey-hint.d.ts.map

package/dist/controllers/hotkey-hint.js

@@ -0,0 +1,47 @@
+import { getKeyStateTracker, matchesHeldModifiers } from "@tanstack/hotkeys";
+
+//#region src/controllers/hotkey-hint.ts
+/** Modifier hint controller. Getter arguments can read reactive host properties. */
+var HotkeyHintController = class {
+	/** Attaches to the host; getter arguments can read changing reactive properties. */
+	constructor(host, hotkey, options = {}) {
+		this.host = host;
+		this.hotkey = hotkey;
+		this.options = options;
+		this.visible = false;
+		host.addController(this);
+	}
+	/** Current visibility; combine with the action’s enabled state when rendering. */
+	get value() {
+		return this.visible;
+	}
+	/** Subscribes on connection and requests renders only when hint visibility changes. */
+	hostConnected() {
+		this.update();
+		const subscription = getKeyStateTracker().store.subscribe(() => {
+			if (this.update()) this.host.requestUpdate();
+		});
+		this.unsubscribe = () => subscription.unsubscribe();
+	}
+	/** Re-evaluates getter arguments when host properties trigger an update. */
+	hostUpdate() {
+		this.update();
+	}
+	/** Releases the subscription and clears cached visibility while disconnected. */
+	hostDisconnected() {
+		this.unsubscribe?.();
+		this.unsubscribe = void 0;
+		this.visible = false;
+	}
+	/** Recomputes visibility and reports whether the host needs another render. */
+	update() {
+		const next = matchesHeldModifiers(typeof this.hotkey === "function" ? this.hotkey() : this.hotkey, getKeyStateTracker().store.state.heldKeys, typeof this.options === "function" ? this.options() : this.options);
+		const changed = next !== this.visible;
+		this.visible = next;
+		return changed;
+	}
+};
+
+//#endregion
+export { HotkeyHintController };
+//# sourceMappingURL=hotkey-hint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey-hint.js","names":[],"sources":["../../src/controllers/hotkey-hint.ts"],"sourcesContent":["import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'\n\n/** Modifier hint controller. Getter arguments can read reactive host properties. */\nexport class HotkeyHintController implements ReactiveController {\n  private unsubscribe?: () => void\n  private visible = false\n\n  /** Attaches to the host; getter arguments can read changing reactive properties. */\n  constructor(\n    private host: ReactiveControllerHost,\n    private hotkey: RegisterableHotkey | (() => RegisterableHotkey),\n    private options: HeldModifierOptions | (() => HeldModifierOptions) = {},\n  ) {\n    host.addController(this)\n  }\n\n  /** Current visibility; combine with the action’s enabled state when rendering. */\n  get value(): boolean {\n    return this.visible\n  }\n\n  /** Subscribes on connection and requests renders only when hint visibility changes. */\n  hostConnected(): void {\n    this.update()\n    const subscription = getKeyStateTracker().store.subscribe(() => {\n      if (this.update()) this.host.requestUpdate()\n    })\n    this.unsubscribe = () => subscription.unsubscribe()\n  }\n\n  /** Re-evaluates getter arguments when host properties trigger an update. */\n  hostUpdate(): void {\n    this.update()\n  }\n\n  /** Releases the subscription and clears cached visibility while disconnected. */\n  hostDisconnected(): void {\n    this.unsubscribe?.()\n    this.unsubscribe = undefined\n    this.visible = false\n  }\n\n  /** Recomputes visibility and reports whether the host needs another render. */\n  private update(): boolean {\n    const next = matchesHeldModifiers(\n      typeof this.hotkey === 'function' ? this.hotkey() : this.hotkey,\n      getKeyStateTracker().store.state.heldKeys,\n      typeof this.options === 'function' ? this.options() : this.options,\n    )\n    const changed = next !== this.visible\n    this.visible = next\n    return changed\n  }\n}\n"],"mappings":";;;;AAKA,IAAa,uBAAb,MAAgE;;CAK9D,YACE,AAAQ,MACR,AAAQ,QACR,AAAQ,UAA6D,EAAE,EACvE;EAHQ;EACA;EACA;iBANQ;AAQhB,OAAK,cAAc,KAAK;;;CAI1B,IAAI,QAAiB;AACnB,SAAO,KAAK;;;CAId,gBAAsB;AACpB,OAAK,QAAQ;EACb,MAAM,eAAe,oBAAoB,CAAC,MAAM,gBAAgB;AAC9D,OAAI,KAAK,QAAQ,CAAE,MAAK,KAAK,eAAe;IAC5C;AACF,OAAK,oBAAoB,aAAa,aAAa;;;CAIrD,aAAmB;AACjB,OAAK,QAAQ;;;CAIf,mBAAyB;AACvB,OAAK,eAAe;AACpB,OAAK,cAAc;AACnB,OAAK,UAAU;;;CAIjB,AAAQ,SAAkB;EACxB,MAAM,OAAO,qBACX,OAAO,KAAK,WAAW,aAAa,KAAK,QAAQ,GAAG,KAAK,QACzD,oBAAoB,CAAC,MAAM,MAAM,UACjC,OAAO,KAAK,YAAY,aAAa,KAAK,SAAS,GAAG,KAAK,QAC5D;EACD,MAAM,UAAU,SAAS,KAAK;AAC9B,OAAK,UAAU;AACf,SAAO"}

package/dist/controllers/index.d.cts

@@ -5,4 +5,5 @@ 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";
+import { KeyHoldController } from "./key-hold.cjs";
+import { HotkeyHintController } from "./hotkey-hint.cjs";

package/dist/controllers/index.d.ts

@@ -5,4 +5,5 @@ 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";
+import { KeyHoldController } from "./key-hold.js";
+import { HotkeyHintController } from "./hotkey-hint.js";

package/dist/index.cjs

@@ -9,10 +9,12 @@ 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');
+const require_hotkey_hint = require('./controllers/hotkey-hint.cjs');
 
 exports.HeldKeyCodesController = require_held_key_codes.HeldKeyCodesController;
 exports.HeldKeysController = require_held_keys.HeldKeysController;
 exports.HotkeyController = require_hotkey.HotkeyController;
+exports.HotkeyHintController = require_hotkey_hint.HotkeyHintController;
 exports.HotkeyRecorderController = require_hotkey_recorder.HotkeyRecorderController;
 exports.HotkeyRegistrationsController = require_hotkey_registrations.HotkeyRegistrationsController;
 exports.HotkeySequenceController = require_hotkey_sequence.HotkeySequenceController;

package/dist/index.d.cts

@@ -8,5 +8,6 @@ import { HotkeyRegistrationsController } from "./controllers/hotkey-registration
 import { HotkeySequenceController } from "./controllers/hotkey-sequence.cjs";
 import { HotkeySequenceRecorderController } from "./controllers/hotkey-sequence-recorder.cjs";
 import { KeyHoldController } from "./controllers/key-hold.cjs";
+import { HotkeyHintController } from "./controllers/hotkey-hint.cjs";
 export * from "@tanstack/hotkeys";
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyHintController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/dist/index.d.ts

@@ -8,5 +8,6 @@ import { HotkeyRegistrationsController } from "./controllers/hotkey-registration
 import { HotkeySequenceController } from "./controllers/hotkey-sequence.js";
 import { HotkeySequenceRecorderController } from "./controllers/hotkey-sequence-recorder.js";
 import { KeyHoldController } from "./controllers/key-hold.js";
+import { HotkeyHintController } from "./controllers/hotkey-hint.js";
 export * from "@tanstack/hotkeys";
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyHintController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/dist/index.js

@@ -8,7 +8,8 @@ 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";
+import { HotkeyHintController } from "./controllers/hotkey-hint.js";
 
 export * from "@tanstack/hotkeys"
 
-export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };
+export { HeldKeyCodesController, HeldKeysController, HotkeyController, HotkeyHintController, HotkeyRecorderController, HotkeyRegistrationsController, HotkeySequenceController, HotkeySequenceRecorderController, KeyHoldController, hotkey, hotkeySequence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/lit-hotkeys",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Lit adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.8.0"
+    "@tanstack/hotkeys": "0.9.0"
   },
   "devDependencies": {
     "lit": "^3.3.2"

package/src/controllers/hotkey-hint.ts

@@ -0,0 +1,56 @@
+import { getKeyStateTracker, matchesHeldModifiers } from '@tanstack/hotkeys'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+import type { HeldModifierOptions, RegisterableHotkey } from '@tanstack/hotkeys'
+
+/** Modifier hint controller. Getter arguments can read reactive host properties. */
+export class HotkeyHintController implements ReactiveController {
+  private unsubscribe?: () => void
+  private visible = false
+
+  /** Attaches to the host; getter arguments can read changing reactive properties. */
+  constructor(
+    private host: ReactiveControllerHost,
+    private hotkey: RegisterableHotkey | (() => RegisterableHotkey),
+    private options: HeldModifierOptions | (() => HeldModifierOptions) = {},
+  ) {
+    host.addController(this)
+  }
+
+  /** Current visibility; combine with the action’s enabled state when rendering. */
+  get value(): boolean {
+    return this.visible
+  }
+
+  /** Subscribes on connection and requests renders only when hint visibility changes. */
+  hostConnected(): void {
+    this.update()
+    const subscription = getKeyStateTracker().store.subscribe(() => {
+      if (this.update()) this.host.requestUpdate()
+    })
+    this.unsubscribe = () => subscription.unsubscribe()
+  }
+
+  /** Re-evaluates getter arguments when host properties trigger an update. */
+  hostUpdate(): void {
+    this.update()
+  }
+
+  /** Releases the subscription and clears cached visibility while disconnected. */
+  hostDisconnected(): void {
+    this.unsubscribe?.()
+    this.unsubscribe = undefined
+    this.visible = false
+  }
+
+  /** Recomputes visibility and reports whether the host needs another render. */
+  private update(): boolean {
+    const next = matchesHeldModifiers(
+      typeof this.hotkey === 'function' ? this.hotkey() : this.hotkey,
+      getKeyStateTracker().store.state.heldKeys,
+      typeof this.options === 'function' ? this.options() : this.options,
+    )
+    const changed = next !== this.visible
+    this.visible = next
+    return changed
+  }
+}

package/src/controllers/index.ts

@@ -6,3 +6,4 @@ export * from './hotkey-registrations'
 export * from './hotkey-sequence'
 export * from './hotkey-sequence-recorder'
 export * from './key-hold'
+export * from './hotkey-hint'