@tanstack/solid-hotkeys 0.0.1

package/README.md

@@ -0,0 +1,305 @@
+# @tanstack/solid-hotkeys
+
+> SolidJS adapter for [TanStack Hotkeys](https://tanstack.com/hotkeys) - keyboard shortcuts made easy
+
+[![npm version](https://img.shields.io/npm/v/@tanstack/solid-hotkeys.svg)](https://www.npmjs.com/package/@tanstack/solid-hotkeys)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+✅ **Type-safe hotkey bindings** - Template strings (`Mod+Shift+S`, `Escape`) or parsed objects
+✅ **Cross-platform** - `Mod` key automatically maps to Cmd on macOS, Ctrl on Windows/Linux
+✅ **Sequence support** - Vim-style multi-key sequences (`g g`, `d d`)
+✅ **Key state tracking** - Track which keys are currently held down
+✅ **Hotkey recording** - Built-in UI helpers for letting users define their own shortcuts
+✅ **SolidJS primitives** - Reactive primitives that work seamlessly with SolidJS
+
+## Installation
+
+```bash
+npm install @tanstack/solid-hotkeys @tanstack/hotkeys
+# or
+bun add @tanstack/solid-hotkeys @tanstack/hotkeys
+# or
+pnpm add @tanstack/solid-hotkeys @tanstack/hotkeys
+```
+
+## Quick Start
+
+```tsx
+import { createHotkey } from '@tanstack/solid-hotkeys'
+
+function App() {
+  createHotkey('Mod+S', (event) => {
+    event.preventDefault()
+    console.log('Save!')
+  })
+
+  return <div>Press Cmd/Ctrl+S to save</div>
+}
+```
+
+## Usage
+
+### Basic Hotkey
+
+```tsx
+import { createHotkey } from '@tanstack/solid-hotkeys'
+
+function SaveButton() {
+  createHotkey('Mod+S', (event, { hotkey }) => {
+    event.preventDefault()
+    handleSave()
+  })
+
+  return <button>Save (Cmd/Ctrl+S)</button>
+}
+```
+
+### Conditional Hotkeys
+
+```tsx
+import { createHotkey } from '@tanstack/solid-hotkeys'
+import { Show, createSignal } from 'solid-js'
+
+function Modal(props) {
+  // Hotkey only active when modal is open
+  createHotkey(
+    'Escape',
+    () => props.onClose(),
+    () => ({
+      enabled: props.isOpen,
+    }),
+  )
+
+  return (
+    <Show when={props.isOpen}>
+      <div class="modal">Press Escape to close</div>
+    </Show>
+  )
+}
+```
+
+### Scoped Hotkeys
+
+```tsx
+import { createHotkey } from '@tanstack/solid-hotkeys'
+
+function Editor() {
+  let editorRef: HTMLDivElement | undefined
+
+  // Hotkey only works when editor is focused
+  createHotkey(
+    'Mod+B',
+    () => {
+      toggleBold()
+    },
+    { target: editorRef },
+  )
+
+  return <div ref={editorRef} contentEditable />
+}
+```
+
+### Hotkey Sequences (Vim-style)
+
+```tsx
+import { createHotkeySequence } from '@tanstack/solid-hotkeys'
+
+function VimEditor() {
+  // 'g g' to go to top
+  createHotkeySequence(['G', 'G'], () => {
+    scrollToTop()
+  })
+
+  // 'd d' to delete line
+  createHotkeySequence(['D', 'D'], () => {
+    deleteLine()
+  })
+
+  // 'd i w' to delete inner word
+  createHotkeySequence(
+    ['D', 'I', 'W'],
+    () => {
+      deleteInnerWord()
+    },
+    { timeout: 500 },
+  )
+
+  return <div>Try Vim shortcuts!</div>
+}
+```
+
+### Track Held Keys
+
+```tsx
+import { createHeldKeys, createKeyHold } from '@tanstack/solid-hotkeys'
+import { For } from 'solid-js'
+
+function KeyTracker() {
+  const heldKeys = createHeldKeys()
+  const shiftHeld = createKeyHold('Shift')
+
+  return (
+    <div>
+      <div>Shift: {shiftHeld() ? 'Pressed' : 'Not pressed'}</div>
+      <div>
+        All held keys:
+        <For each={heldKeys()}>{(key) => <kbd>{key}</kbd>}</For>
+      </div>
+    </div>
+  )
+}
+```
+
+### Hotkey Recorder
+
+```tsx
+import { createHotkeyRecorder } from '@tanstack/solid-hotkeys'
+import { createSignal, Show } from 'solid-js'
+
+function ShortcutSettings() {
+  const [shortcut, setShortcut] = createSignal('Mod+S')
+
+  const recorder = createHotkeyRecorder({
+    onRecord: (hotkey) => {
+      setShortcut(hotkey)
+    },
+    onCancel: () => {
+      console.log('Recording cancelled')
+    },
+  })
+
+  return (
+    <div>
+      <div>Current shortcut: {shortcut()}</div>
+      <button onClick={recorder.startRecording}>
+        {recorder.isRecording() ? 'Recording...' : 'Edit Shortcut'}
+      </button>
+      <Show when={recorder.recordedHotkey()}>
+        <div>Preview: {recorder.recordedHotkey()}</div>
+      </Show>
+    </div>
+  )
+}
+```
+
+### Global Configuration
+
+```tsx
+import { HotkeysProvider } from '@tanstack/solid-hotkeys'
+
+function App() {
+  return (
+    <HotkeysProvider
+      defaultOptions={{
+        hotkey: {
+          preventDefault: true,
+          enabled: true,
+        },
+        hotkeySequence: {
+          timeout: 1000,
+        },
+      }}
+    >
+      <YourApp />
+    </HotkeysProvider>
+  )
+}
+```
+
+## API
+
+### `createHotkey(hotkey, callback, options?)`
+
+Register a keyboard hotkey.
+
+- `hotkey`: String like `"Mod+S"` or `"Escape"`, or accessor function
+- `callback`: Function called when hotkey is pressed
+- `options`: Optional configuration (or accessor function for reactive options)
+
+**Options:**
+
+- `enabled`: Whether the hotkey is active (default: `true`)
+- `preventDefault`: Prevent default browser behavior (default: `false`)
+- `stopPropagation`: Stop event propagation (default: `false`)
+- `target`: DOM element to attach listener to (default: `document`)
+- `platform`: Override platform detection
+
+### `createHotkeySequence(sequence, callback, options?)`
+
+Register a multi-key sequence (Vim-style).
+
+- `sequence`: Array of hotkey strings like `["G", "G"]`, or accessor function
+- `callback`: Function called when sequence completes
+- `options`: Optional configuration (or accessor function)
+
+**Options:**
+
+- `enabled`: Whether sequence detection is active (default: `true`)
+- `timeout`: Max time between keys in ms (default: `1000`)
+- `platform`: Override platform detection
+
+### `createHeldKeys()`
+
+Returns a signal accessor for array of currently held keys.
+
+```tsx
+const heldKeys = createHeldKeys()
+// heldKeys() => ["Shift", "A"]
+```
+
+### `createHeldKeyCodes()`
+
+Returns a signal accessor for map of held keys to their physical key codes.
+
+```tsx
+const heldCodes = createHeldKeyCodes()
+// heldCodes() => { "Shift": "ShiftLeft", "A": "KeyA" }
+```
+
+### `createKeyHold(key)`
+
+Returns a signal accessor that's true when specific key is held.
+
+```tsx
+const isShiftHeld = createKeyHold('Shift')
+// isShiftHeld() => true/false
+```
+
+### `createHotkeyRecorder(options)`
+
+Hotkey recording interface.
+
+**Options:**
+
+- `onRecord`: Callback when hotkey is recorded
+- `onCancel`: Callback when recording is cancelled
+
+**Returns:**
+
+- `isRecording`: Signal accessor for recording state
+- `recordedHotkey`: Signal accessor for current hotkey preview
+- `startRecording`: Function to start recording
+- `stopRecording`: Function to stop recording
+- `cancelRecording`: Function to cancel recording
+
+### `HotkeysProvider`
+
+Optional provider for global configuration.
+
+## Cross-Platform Keys
+
+Use `Mod` for cross-platform modifier:
+
+- `Mod+S` → `Cmd+S` on macOS, `Ctrl+S` on Windows/Linux
+- `Mod+Shift+P` → `Cmd+Shift+P` on macOS, `Ctrl+Shift+P` elsewhere
+
+## Related
+
+- [TanStack Hotkeys](https://tanstack.com/hotkeys) - The core library
+- [@tanstack/react-hotkeys](https://tanstack.com/hotkeys) - React adapter
+
+## License
+
+MIT

package/dist/HotkeysProvider.cjs

@@ -0,0 +1,27 @@
+let solid_js_web = require("solid-js/web");
+let solid_js = require("solid-js");
+
+//#region src/HotkeysProvider.tsx
+const HotkeysContext = (0, solid_js.createContext)(null);
+const DEFAULT_OPTIONS = {};
+const HotkeysProvider = (props) => {
+	const contextValue = { defaultOptions: props.defaultOptions ?? DEFAULT_OPTIONS };
+	return (0, solid_js_web.createComponent)(HotkeysContext.Provider, {
+		value: contextValue,
+		get children() {
+			return props.children;
+		}
+	});
+};
+function useHotkeysContext() {
+	return (0, solid_js.useContext)(HotkeysContext);
+}
+function useDefaultHotkeysOptions() {
+	return (0, solid_js.useContext)(HotkeysContext)?.defaultOptions ?? {};
+}
+
+//#endregion
+exports.HotkeysProvider = HotkeysProvider;
+exports.useDefaultHotkeysOptions = useDefaultHotkeysOptions;
+exports.useHotkeysContext = useHotkeysContext;
+//# sourceMappingURL=HotkeysProvider.cjs.map

package/dist/HotkeysProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeysProvider.cjs","names":["createContext","useContext","JSX","ParentComponent","HotkeyRecorderOptions","CreateHotkeyOptions","CreateHotkeySequenceOptions","HotkeysProviderOptions","hotkey","Partial","hotkeyRecorder","hotkeySequence","HotkeysContextValue","defaultOptions","HotkeysContext","HotkeysProviderProps","children","Element","DEFAULT_OPTIONS","HotkeysProvider","props","contextValue","_$createComponent","Provider","value","useHotkeysContext","useDefaultHotkeysOptions","context"],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { JSX, ParentComponent } from 'solid-js'\nimport type { HotkeyRecorderOptions } from '@tanstack/hotkeys'\nimport type { CreateHotkeyOptions } from './createHotkey'\nimport type { CreateHotkeySequenceOptions } from './createHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<CreateHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequence?: Partial<CreateHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: JSX.Element\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport const HotkeysProvider: ParentComponent<HotkeysProviderProps> = (\n  props,\n) => {\n  const contextValue: HotkeysContextValue = {\n    defaultOptions: props.defaultOptions ?? DEFAULT_OPTIONS,\n  }\n\n  return (\n    <HotkeysContext.Provider value={contextValue}>\n      {props.children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;AAgBA,MAAMc,6CAA2D,KAAK;AAOtE,MAAMI,kBAA0C,EAAE;AAElD,MAAaC,mBACXC,UACG;CACH,MAAMC,eAAoC,EACxCR,gBAAgBO,MAAMP,kBAAkBK,iBACzC;AAED,0CACGJ,eAAeS,UAAQ;EAACC,OAAOH;EAAY,IAAAL,WAAA;AAAA,UACzCI,MAAMJ;;EAAQ,CAAA;;AAKrB,SAAgBS,oBAAoB;AAClC,iCAAkBX,eAAe;;AAGnC,SAAgBY,2BAA2B;AAEzC,iCAD2BZ,eAAe,EAC1BD,kBAAkB,EAAE"}

package/dist/HotkeysProvider.d.cts

@@ -0,0 +1,24 @@
+import { CreateHotkeyOptions } from "./createHotkey.cjs";
+import { CreateHotkeySequenceOptions } from "./createHotkeySequence.cjs";
+import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { JSX, ParentComponent } from "solid-js";
+
+//#region src/HotkeysProvider.d.ts
+interface HotkeysProviderOptions {
+  hotkey?: Partial<CreateHotkeyOptions>;
+  hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+  hotkeySequence?: Partial<CreateHotkeySequenceOptions>;
+}
+interface HotkeysContextValue {
+  defaultOptions: HotkeysProviderOptions;
+}
+interface HotkeysProviderProps {
+  children: JSX.Element;
+  defaultOptions?: HotkeysProviderOptions;
+}
+declare const HotkeysProvider: ParentComponent<HotkeysProviderProps>;
+declare function useHotkeysContext(): HotkeysContextValue | null;
+declare function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+//#endregion
+export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, useDefaultHotkeysOptions, useHotkeysContext };
+//# sourceMappingURL=HotkeysProvider.d.cts.map

package/dist/HotkeysProvider.d.ts

@@ -0,0 +1,24 @@
+import { CreateHotkeyOptions } from "./createHotkey.js";
+import { CreateHotkeySequenceOptions } from "./createHotkeySequence.js";
+import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
+import { JSX, ParentComponent } from "solid-js";
+
+//#region src/HotkeysProvider.d.ts
+interface HotkeysProviderOptions {
+  hotkey?: Partial<CreateHotkeyOptions>;
+  hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+  hotkeySequence?: Partial<CreateHotkeySequenceOptions>;
+}
+interface HotkeysContextValue {
+  defaultOptions: HotkeysProviderOptions;
+}
+interface HotkeysProviderProps {
+  children: JSX.Element;
+  defaultOptions?: HotkeysProviderOptions;
+}
+declare const HotkeysProvider: ParentComponent<HotkeysProviderProps>;
+declare function useHotkeysContext(): HotkeysContextValue | null;
+declare function useDefaultHotkeysOptions(): HotkeysProviderOptions;
+//#endregion
+export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, useDefaultHotkeysOptions, useHotkeysContext };
+//# sourceMappingURL=HotkeysProvider.d.ts.map

package/dist/HotkeysProvider.js

@@ -0,0 +1,25 @@
+import { createComponent } from "solid-js/web";
+import { createContext, useContext } from "solid-js";
+
+//#region src/HotkeysProvider.tsx
+const HotkeysContext = createContext(null);
+const DEFAULT_OPTIONS = {};
+const HotkeysProvider = (props) => {
+	const contextValue = { defaultOptions: props.defaultOptions ?? DEFAULT_OPTIONS };
+	return createComponent(HotkeysContext.Provider, {
+		value: contextValue,
+		get children() {
+			return props.children;
+		}
+	});
+};
+function useHotkeysContext() {
+	return useContext(HotkeysContext);
+}
+function useDefaultHotkeysOptions() {
+	return useContext(HotkeysContext)?.defaultOptions ?? {};
+}
+
+//#endregion
+export { HotkeysProvider, useDefaultHotkeysOptions, useHotkeysContext };
+//# sourceMappingURL=HotkeysProvider.js.map

package/dist/HotkeysProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeysProvider.js","names":["createContext","useContext","JSX","ParentComponent","HotkeyRecorderOptions","CreateHotkeyOptions","CreateHotkeySequenceOptions","HotkeysProviderOptions","hotkey","Partial","hotkeyRecorder","hotkeySequence","HotkeysContextValue","defaultOptions","HotkeysContext","HotkeysProviderProps","children","Element","DEFAULT_OPTIONS","HotkeysProvider","props","contextValue","_$createComponent","Provider","value","useHotkeysContext","useDefaultHotkeysOptions","context"],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { JSX, ParentComponent } from 'solid-js'\nimport type { HotkeyRecorderOptions } from '@tanstack/hotkeys'\nimport type { CreateHotkeyOptions } from './createHotkey'\nimport type { CreateHotkeySequenceOptions } from './createHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n  hotkey?: Partial<CreateHotkeyOptions>\n  hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n  hotkeySequence?: Partial<CreateHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n  defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n  children: JSX.Element\n  defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport const HotkeysProvider: ParentComponent<HotkeysProviderProps> = (\n  props,\n) => {\n  const contextValue: HotkeysContextValue = {\n    defaultOptions: props.defaultOptions ?? DEFAULT_OPTIONS,\n  }\n\n  return (\n    <HotkeysContext.Provider value={contextValue}>\n      {props.children}\n    </HotkeysContext.Provider>\n  )\n}\n\nexport function useHotkeysContext() {\n  return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n  const context = useContext(HotkeysContext)\n  return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;AAgBA,MAAMc,iBAAiBd,cAA0C,KAAK;AAOtE,MAAMkB,kBAA0C,EAAE;AAElD,MAAaC,mBACXC,UACG;CACH,MAAMC,eAAoC,EACxCR,gBAAgBO,MAAMP,kBAAkBK,iBACzC;AAED,QAAAI,gBACGR,eAAeS,UAAQ;EAACC,OAAOH;EAAY,IAAAL,WAAA;AAAA,UACzCI,MAAMJ;;EAAQ,CAAA;;AAKrB,SAAgBS,oBAAoB;AAClC,QAAOxB,WAAWa,eAAe;;AAGnC,SAAgBY,2BAA2B;AAEzC,QADgBzB,WAAWa,eAAe,EAC1BD,kBAAkB,EAAE"}

package/dist/createHeldKeyCodes.cjs

@@ -0,0 +1,42 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let _tanstack_solid_store = require("@tanstack/solid-store");
+
+//#region src/createHeldKeyCodes.ts
+/**
+* SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.
+*
+* This is useful for debugging which physical key was pressed (e.g. distinguishing
+* left vs right Shift via "ShiftLeft" / "ShiftRight").
+*
+* This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+* to the global KeyStateTracker.
+*
+* @returns Signal accessor for record mapping normalized key names to their `event.code` values
+*
+* @example
+* ```tsx
+* function KeyDebugDisplay() {
+*   const heldKeys = createHeldKeys()
+*   const heldCodes = createHeldKeyCodes()
+*
+*   return (
+*     <div>
+*       <For each={heldKeys()}>
+*         {(key) => (
+*           <kbd>
+*             {key} <small>{heldCodes()[key]}</small>
+*           </kbd>
+*         )}
+*       </For>
+*     </div>
+*   )
+* }
+* ```
+*/
+function createHeldKeyCodes() {
+	return (0, _tanstack_solid_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
+}
+
+//#endregion
+exports.createHeldKeyCodes = createHeldKeyCodes;
+//# sourceMappingURL=createHeldKeyCodes.cjs.map

package/dist/createHeldKeyCodes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHeldKeyCodes.cjs","names":[],"sources":["../src/createHeldKeyCodes.ts"],"sourcesContent":["import { useStore } from '@tanstack/solid-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe\n * to the global KeyStateTracker.\n *\n * @returns Signal accessor for record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = createHeldKeys()\n *   const heldCodes = createHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       <For each={heldKeys()}>\n *         {(key) => (\n *           <kbd>\n *             {key} <small>{heldCodes()[key]}</small>\n *           </kbd>\n *         )}\n *       </For>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function createHeldKeyCodes(): () => Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,qBAAmD;AAEjE,uFADoC,CACZ,QAAQ,UAAU,MAAM,UAAU"}

package/dist/createHeldKeyCodes.d.cts

@@ -0,0 +1,36 @@
+//#region src/createHeldKeyCodes.d.ts
+/**
+ * SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.
+ *
+ * This is useful for debugging which physical key was pressed (e.g. distinguishing
+ * left vs right Shift via "ShiftLeft" / "ShiftRight").
+ *
+ * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+ * to the global KeyStateTracker.
+ *
+ * @returns Signal accessor for record mapping normalized key names to their `event.code` values
+ *
+ * @example
+ * ```tsx
+ * function KeyDebugDisplay() {
+ *   const heldKeys = createHeldKeys()
+ *   const heldCodes = createHeldKeyCodes()
+ *
+ *   return (
+ *     <div>
+ *       <For each={heldKeys()}>
+ *         {(key) => (
+ *           <kbd>
+ *             {key} <small>{heldCodes()[key]}</small>
+ *           </kbd>
+ *         )}
+ *       </For>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function createHeldKeyCodes(): () => Record<string, string>;
+//#endregion
+export { createHeldKeyCodes };
+//# sourceMappingURL=createHeldKeyCodes.d.cts.map

package/dist/createHeldKeyCodes.d.ts

@@ -0,0 +1,36 @@
+//#region src/createHeldKeyCodes.d.ts
+/**
+ * SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.
+ *
+ * This is useful for debugging which physical key was pressed (e.g. distinguishing
+ * left vs right Shift via "ShiftLeft" / "ShiftRight").
+ *
+ * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+ * to the global KeyStateTracker.
+ *
+ * @returns Signal accessor for record mapping normalized key names to their `event.code` values
+ *
+ * @example
+ * ```tsx
+ * function KeyDebugDisplay() {
+ *   const heldKeys = createHeldKeys()
+ *   const heldCodes = createHeldKeyCodes()
+ *
+ *   return (
+ *     <div>
+ *       <For each={heldKeys()}>
+ *         {(key) => (
+ *           <kbd>
+ *             {key} <small>{heldCodes()[key]}</small>
+ *           </kbd>
+ *         )}
+ *       </For>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function createHeldKeyCodes(): () => Record<string, string>;
+//#endregion
+export { createHeldKeyCodes };
+//# sourceMappingURL=createHeldKeyCodes.d.ts.map

package/dist/createHeldKeyCodes.js

@@ -0,0 +1,42 @@
+import { getKeyStateTracker } from "@tanstack/hotkeys";
+import { useStore } from "@tanstack/solid-store";
+
+//#region src/createHeldKeyCodes.ts
+/**
+* SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.
+*
+* This is useful for debugging which physical key was pressed (e.g. distinguishing
+* left vs right Shift via "ShiftLeft" / "ShiftRight").
+*
+* This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+* to the global KeyStateTracker.
+*
+* @returns Signal accessor for record mapping normalized key names to their `event.code` values
+*
+* @example
+* ```tsx
+* function KeyDebugDisplay() {
+*   const heldKeys = createHeldKeys()
+*   const heldCodes = createHeldKeyCodes()
+*
+*   return (
+*     <div>
+*       <For each={heldKeys()}>
+*         {(key) => (
+*           <kbd>
+*             {key} <small>{heldCodes()[key]}</small>
+*           </kbd>
+*         )}
+*       </For>
+*     </div>
+*   )
+* }
+* ```
+*/
+function createHeldKeyCodes() {
+	return useStore(getKeyStateTracker().store, (state) => state.heldCodes);
+}
+
+//#endregion
+export { createHeldKeyCodes };
+//# sourceMappingURL=createHeldKeyCodes.js.map

package/dist/createHeldKeyCodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHeldKeyCodes.js","names":[],"sources":["../src/createHeldKeyCodes.ts"],"sourcesContent":["import { useStore } from '@tanstack/solid-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * SolidJS primitive that returns a signal of a map from currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe\n * to the global KeyStateTracker.\n *\n * @returns Signal accessor for record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n *   const heldKeys = createHeldKeys()\n *   const heldCodes = createHeldKeyCodes()\n *\n *   return (\n *     <div>\n *       <For each={heldKeys()}>\n *         {(key) => (\n *           <kbd>\n *             {key} <small>{heldCodes()[key]}</small>\n *           </kbd>\n *         )}\n *       </For>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function createHeldKeyCodes(): () => Record<string, string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,qBAAmD;AAEjE,QAAO,SADS,oBAAoB,CACZ,QAAQ,UAAU,MAAM,UAAU"}

package/dist/createHeldKeys.cjs

@@ -0,0 +1,33 @@
+let _tanstack_hotkeys = require("@tanstack/hotkeys");
+let _tanstack_solid_store = require("@tanstack/solid-store");
+
+//#region src/createHeldKeys.ts
+/**
+* SolidJS primitive that returns a signal of currently held keyboard keys.
+*
+* This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+* to the global KeyStateTracker and updates whenever keys are pressed
+* or released.
+*
+* @returns Signal accessor for array of currently held key names
+*
+* @example
+* ```tsx
+* function KeyDisplay() {
+*   const heldKeys = createHeldKeys()
+*
+*   return (
+*     <div>
+*       Currently pressed: {heldKeys().join(' + ') || 'None'}
+*     </div>
+*   )
+* }
+* ```
+*/
+function createHeldKeys() {
+	return (0, _tanstack_solid_store.useStore)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
+}
+
+//#endregion
+exports.createHeldKeys = createHeldKeys;
+//# sourceMappingURL=createHeldKeys.cjs.map

package/dist/createHeldKeys.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHeldKeys.cjs","names":[],"sources":["../src/createHeldKeys.ts"],"sourcesContent":["import { useStore } from '@tanstack/solid-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * SolidJS primitive that returns a signal of currently held keyboard keys.\n *\n * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Signal accessor for array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n *   const heldKeys = createHeldKeys()\n *\n *   return (\n *     <div>\n *       Currently pressed: {heldKeys().join(' + ') || 'None'}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function createHeldKeys(): () => Array<string> {\n  const tracker = getKeyStateTracker()\n  return useStore(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,iBAAsC;AAEpD,uFADoC,CACZ,QAAQ,UAAU,MAAM,SAAS"}

package/dist/createHeldKeys.d.cts

@@ -0,0 +1,27 @@
+//#region src/createHeldKeys.d.ts
+/**
+ * SolidJS primitive that returns a signal of currently held keyboard keys.
+ *
+ * This primitive uses `useStore` from `@tanstack/solid-store` to subscribe
+ * to the global KeyStateTracker and updates whenever keys are pressed
+ * or released.
+ *
+ * @returns Signal accessor for array of currently held key names
+ *
+ * @example
+ * ```tsx
+ * function KeyDisplay() {
+ *   const heldKeys = createHeldKeys()
+ *
+ *   return (
+ *     <div>
+ *       Currently pressed: {heldKeys().join(' + ') || 'None'}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function createHeldKeys(): () => Array<string>;
+//#endregion
+export { createHeldKeys };
+//# sourceMappingURL=createHeldKeys.d.cts.map