@tanstack/svelte-hotkeys 0.0.1

package/README.md

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

package/dist/HotkeysCtx.d.ts

@@ -0,0 +1,22 @@
+import type { HotkeyRecorderOptions } from '@tanstack/hotkeys';
+import type { CreateHotkeyOptions } from './createHotkey.svelte';
+import type { Snippet } from 'svelte';
+import type { CreateHotkeySequenceOptions } from './createHotkeySequence.svelte';
+export interface HotkeysProviderOptions {
+    hotkey?: Partial<CreateHotkeyOptions>;
+    hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
+    hotkeySequence?: Partial<CreateHotkeySequenceOptions>;
+}
+export interface HotkeysProviderProps {
+    children: Snippet;
+    defaultOptions?: HotkeysProviderOptions;
+}
+export declare const DEFAULT_OPTIONS: HotkeysProviderOptions;
+interface HotkeysContextValue {
+    defaultOptions: HotkeysProviderOptions;
+}
+export declare function setHotkeysContext(defaultOptions?: HotkeysProviderOptions): HotkeysContextValue;
+export declare function setHotkeysContextSource(defaultOptions: () => HotkeysProviderOptions): HotkeysContextValue;
+export declare function getHotkeysContext(): HotkeysContextValue | null;
+export declare function getDefaultHotkeysOptions(): HotkeysProviderOptions;
+export {};

package/dist/HotkeysCtx.js

@@ -0,0 +1,28 @@
+import { createContext } from 'svelte';
+export const DEFAULT_OPTIONS = {};
+const [useHotkeysContext, setHotkeysContextValue] = createContext();
+export function setHotkeysContext(defaultOptions = DEFAULT_OPTIONS) {
+    return setHotkeysContextValue({
+        get defaultOptions() {
+            return defaultOptions;
+        },
+    });
+}
+export function setHotkeysContextSource(defaultOptions) {
+    return setHotkeysContextValue({
+        get defaultOptions() {
+            return defaultOptions();
+        },
+    });
+}
+export function getHotkeysContext() {
+    try {
+        return useHotkeysContext();
+    }
+    catch {
+        return null;
+    }
+}
+export function getDefaultHotkeysOptions() {
+    return getHotkeysContext()?.defaultOptions ?? DEFAULT_OPTIONS;
+}

package/dist/HotkeysProvider.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { DEFAULT_OPTIONS, setHotkeysContextSource } from './HotkeysCtx'
+
+  import type { HotkeysProviderProps } from './HotkeysCtx'
+
+  let { children, defaultOptions = DEFAULT_OPTIONS }: HotkeysProviderProps =
+    $props()
+
+  setHotkeysContextSource(() => defaultOptions)
+</script>
+
+{@render children()}

package/dist/HotkeysProvider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HotkeysProviderProps } from './HotkeysCtx';
+declare const HotkeysProvider: import("svelte").Component<HotkeysProviderProps, {}, "">;
+type HotkeysProvider = ReturnType<typeof HotkeysProvider>;
+export default HotkeysProvider;

package/dist/createHotkey.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { HotkeyCallback, HotkeyOptions, RegisterableHotkey } from '@tanstack/hotkeys';
+import type { MaybeGetter } from './internal.svelte';
+import type { Attachment } from 'svelte/attachments';
+export interface CreateHotkeyOptions extends Omit<HotkeyOptions, 'target'> {
+    target?: Document | Window;
+}
+/**
+ * Register a global hotkey for the current component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkey } from '@tanstack/svelte-hotkeys'
+ *
+ *   createHotkey('Mod+S', () => {
+ *     console.log('Mod+S pressed')
+ *   })
+ * </script>
+ * ```
+ */
+export declare function createHotkey(hotkey: MaybeGetter<RegisterableHotkey>, callback: HotkeyCallback, options?: MaybeGetter<CreateHotkeyOptions>): void;
+/**
+ * Create an attachment for element-scoped hotkeys.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeyAttachment } from '@tanstack/svelte-hotkeys'
+ *
+ *   let count = $state(0)
+ *   const saveHotkey = createHotkeyAttachment('Mod+S', () => {
+ *     count++
+ *   })
+ *
+ * </script>
+ *
+ * <div tabindex="0" {@attach saveHotkey}>
+ *   Count: {count}
+ * </div>
+ * ```
+ */
+export declare function createHotkeyAttachment(hotkey: MaybeGetter<RegisterableHotkey>, callback: HotkeyCallback, options?: MaybeGetter<CreateHotkeyOptions>): Attachment<HTMLElement>;

package/dist/createHotkey.svelte.js

@@ -0,0 +1,74 @@
+import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey, } from '@tanstack/hotkeys';
+import { getDefaultHotkeysOptions } from './HotkeysCtx';
+import { resolveMaybeGetter } from './internal.svelte';
+function normalizeHotkey(hotkey, options) {
+    const platform = options.platform ?? detectPlatform();
+    return typeof hotkey === 'string'
+        ? hotkey
+        : formatHotkey(rawHotkeyToParsedHotkey(hotkey, platform));
+}
+function registerHotkey(target, hotkey, callback, options) {
+    const resolvedHotkey = resolveMaybeGetter(hotkey);
+    const resolvedOptions = resolveMaybeGetter(options);
+    const mergedOptions = {
+        ...getDefaultHotkeysOptions().hotkey,
+        ...resolvedOptions,
+    };
+    return getHotkeyManager().register(normalizeHotkey(resolvedHotkey, mergedOptions), callback, {
+        ...mergedOptions,
+        target,
+    });
+}
+/**
+ * Register a global hotkey for the current component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkey } from '@tanstack/svelte-hotkeys'
+ *
+ *   createHotkey('Mod+S', () => {
+ *     console.log('Mod+S pressed')
+ *   })
+ * </script>
+ * ```
+ */
+export function createHotkey(hotkey, callback, options = {}) {
+    $effect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const registration = registerHotkey(document, hotkey, callback, options);
+        return () => {
+            registration.unregister();
+        };
+    });
+}
+/**
+ * Create an attachment for element-scoped hotkeys.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeyAttachment } from '@tanstack/svelte-hotkeys'
+ *
+ *   let count = $state(0)
+ *   const saveHotkey = createHotkeyAttachment('Mod+S', () => {
+ *     count++
+ *   })
+ *
+ * </script>
+ *
+ * <div tabindex="0" {@attach saveHotkey}>
+ *   Count: {count}
+ * </div>
+ * ```
+ */
+export function createHotkeyAttachment(hotkey, callback, options = {}) {
+    return (element) => {
+        const registration = registerHotkey(element, hotkey, callback, options);
+        return () => {
+            registration.unregister();
+        };
+    };
+}

package/dist/createHotkeyRecorder.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys';
+import type { MaybeGetter } from './internal.svelte';
+export interface SvelteHotkeyRecorder {
+    /** Whether recording is currently active */
+    readonly isRecording: boolean;
+    /** The currently recorded hotkey (for live preview) */
+    readonly recordedHotkey: Hotkey | null;
+    /** Start recording a new hotkey */
+    startRecording: () => void;
+    /** Stop recording (same as cancel) */
+    stopRecording: () => void;
+    /** Cancel recording without saving */
+    cancelRecording: () => void;
+}
+export declare function createHotkeyRecorder(options: MaybeGetter<HotkeyRecorderOptions>): SvelteHotkeyRecorder;

package/dist/createHotkeyRecorder.svelte.js

@@ -0,0 +1,100 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SvelteHotkeyRecorderState_recorder, _SvelteHotkeyRecorderState_subscribe;
+import { HotkeyRecorder } from '@tanstack/hotkeys';
+import { onDestroy } from 'svelte';
+import { getDefaultHotkeysOptions } from './HotkeysCtx';
+import { createStoreSubscriber, resolveMaybeGetter } from './internal.svelte';
+/**
+ * Svelte function for recording keyboard shortcuts.
+ *
+ * This function provides a thin wrapper around the framework-agnostic `HotkeyRecorder`
+ * class, managing all the complexity of capturing keyboard events, converting them
+ * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete
+ * to clear.
+ *
+ * @param options - Configuration options for the recorder
+ * @returns An object with recording state and control functions
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createHotkeyRecorder } from '@tanstack/svelte-hotkeys'
+ *
+ *   const recorder = createHotkeyRecorder({
+ *     onRecord: (hotkey) => {
+ *       console.log('Recorded:', hotkey) // e.g., "Mod+Shift S"
+ *     },
+ *     onCancel: () => {
+ *       console.log('Recording cancelled')
+ *     },
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={recorder.startRecording}>
+ *     {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}
+ *   </button>
+ *   {#if recorder.recordedHotkey}
+ *     <div>Recording: {recorder.recordedHotkey}</div>
+ *   {/if}
+ * </div>
+ * ```
+ */
+class SvelteHotkeyRecorderState {
+    constructor(options) {
+        _SvelteHotkeyRecorderState_recorder.set(this, void 0);
+        _SvelteHotkeyRecorderState_subscribe.set(this, void 0);
+        __classPrivateFieldSet(this, _SvelteHotkeyRecorderState_recorder, new HotkeyRecorder(options), "f");
+        __classPrivateFieldSet(this, _SvelteHotkeyRecorderState_subscribe, createStoreSubscriber(__classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").store), "f");
+    }
+    get isRecording() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_subscribe, "f").call(this);
+        return __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").store.state.isRecording;
+    }
+    get recordedHotkey() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_subscribe, "f").call(this);
+        return __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").store.state.recordedHotkey;
+    }
+    setOptions(options) {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").setOptions(options);
+    }
+    startRecording() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").start();
+    }
+    stopRecording() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").stop();
+    }
+    cancelRecording() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").cancel();
+    }
+    destroy() {
+        __classPrivateFieldGet(this, _SvelteHotkeyRecorderState_recorder, "f").destroy();
+    }
+}
+_SvelteHotkeyRecorderState_recorder = new WeakMap(), _SvelteHotkeyRecorderState_subscribe = new WeakMap();
+export function createHotkeyRecorder(options) {
+    const recorder = new SvelteHotkeyRecorderState({
+        ...getDefaultHotkeysOptions().hotkeyRecorder,
+        ...resolveMaybeGetter(options),
+    });
+    $effect(() => {
+        recorder.setOptions({
+            ...getDefaultHotkeysOptions().hotkeyRecorder,
+            ...resolveMaybeGetter(options),
+        });
+    });
+    onDestroy(() => {
+        recorder.destroy();
+    });
+    return recorder;
+}

package/dist/createHotkeySequence.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { HotkeyCallback, HotkeySequence, SequenceOptions } from '@tanstack/hotkeys';
+import type { MaybeGetter } from './internal.svelte';
+import type { Attachment } from 'svelte/attachments';
+export interface CreateHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
+    target?: Document | Window;
+}
+/**
+ * Register a global keyboard shortcut sequence for the current component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeySequence } from '@tanstack/svelte-hotkeys'
+ *
+ *   // Scroll to top when 'G G' is pressed
+ *   createHotkeySequence(['G', 'G'], () => {
+ *     scrollToTop()
+ *   })
+ *
+ *   // Delete line when 'D D' is pressed
+ *   createHotkeySequence(['D', 'D'], () => {
+ *     deleteLine()
+ *   })
+ *
+ *   // Delete inner word when 'D I W' is pressed
+ *   createHotkeySequence(['D', 'I', 'W'], () => {
+ *     deleteInnerWord()
+ *   }, { timeout: 500 })
+ * </script>
+ *
+ * <div>
+ *   ....
+ * </div>
+ * ```
+ */
+export declare function createHotkeySequence(sequence: MaybeGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeGetter<CreateHotkeySequenceOptions>): void;
+/**
+ * Create an attachment for element-scoped keyboard sequences.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeySequenceAttachment } from '@tanstack/svelte-hotkeys'
+ *
+ *   const vimKeys = createHotkeySequenceAttachment(['G', 'G'], () => {
+ *     scrollToTop()
+ *   })
+ * </script>
+ *
+ * <div tabindex="0" {@attach vimKeys}>
+ *   Focus here and press g then g
+ * </div>
+ * ```
+ */
+export declare function createHotkeySequenceAttachment(sequence: MaybeGetter<HotkeySequence>, callback: HotkeyCallback, options?: MaybeGetter<CreateHotkeySequenceOptions>): Attachment<HTMLElement>;

package/dist/createHotkeySequence.svelte.js

@@ -0,0 +1,89 @@
+import { getSequenceManager } from '@tanstack/hotkeys';
+import { getDefaultHotkeysOptions } from './HotkeysCtx';
+import { resolveMaybeGetter } from './internal.svelte';
+function registerHotkeySequence(target, sequence, callback, options) {
+    const resolvedSequence = resolveMaybeGetter(sequence);
+    const resolvedOptions = resolveMaybeGetter(options);
+    const mergedOptions = {
+        ...getDefaultHotkeysOptions().hotkeySequence,
+        ...resolvedOptions,
+    };
+    return getSequenceManager().register(resolvedSequence, callback, {
+        ...mergedOptions,
+        target,
+    });
+}
+/**
+ * Register a global keyboard shortcut sequence for the current component.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeySequence } from '@tanstack/svelte-hotkeys'
+ *
+ *   // Scroll to top when 'G G' is pressed
+ *   createHotkeySequence(['G', 'G'], () => {
+ *     scrollToTop()
+ *   })
+ *
+ *   // Delete line when 'D D' is pressed
+ *   createHotkeySequence(['D', 'D'], () => {
+ *     deleteLine()
+ *   })
+ *
+ *   // Delete inner word when 'D I W' is pressed
+ *   createHotkeySequence(['D', 'I', 'W'], () => {
+ *     deleteInnerWord()
+ *   }, { timeout: 500 })
+ * </script>
+ *
+ * <div>
+ *   ....
+ * </div>
+ * ```
+ */
+export function createHotkeySequence(sequence, callback, options = {}) {
+    $effect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const resolvedSequence = resolveMaybeGetter(sequence);
+        if (resolvedSequence.length === 0) {
+            return;
+        }
+        const registration = registerHotkeySequence(document, resolvedSequence, callback, options);
+        return () => {
+            registration.unregister();
+        };
+    });
+}
+/**
+ * Create an attachment for element-scoped keyboard sequences.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { createHotkeySequenceAttachment } from '@tanstack/svelte-hotkeys'
+ *
+ *   const vimKeys = createHotkeySequenceAttachment(['G', 'G'], () => {
+ *     scrollToTop()
+ *   })
+ * </script>
+ *
+ * <div tabindex="0" {@attach vimKeys}>
+ *   Focus here and press g then g
+ * </div>
+ * ```
+ */
+export function createHotkeySequenceAttachment(sequence, callback, options = {}) {
+    return (element) => {
+        const resolvedSequence = resolveMaybeGetter(sequence);
+        if (resolvedSequence.length === 0) {
+            return;
+        }
+        const registration = registerHotkeySequence(element, resolvedSequence, callback, options);
+        return () => {
+            registration.unregister();
+        };
+    };
+}

package/dist/getHeldKeyCodesMap.svelte.d.ts

@@ -0,0 +1,28 @@
+export interface SvelteHeldKeyCodesMap {
+    readonly codes: Record<string, string>;
+}
+/**
+ * Svelte function that returns reactive access to the map of 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").
+ *
+ * @returns Object with a reactive `codes` property
+ *
+ * ```svelte
+ * <script>
+ *   import { getHeldKeyCodesMap } from '@tanstack/svelte-hotkeys'
+ *   const heldKeyCodesMap = getHeldKeyCodesMap()
+ * </script>
+ *
+ * <div>
+ *   {#each Object.entries(heldKeyCodesMap.codes) as [key, code]}
+ *     <kbd>
+ *       {key} <small>{code}</small>
+ *     </kbd>
+ *   {/each}
+ *  </div>
+ * ```
+ */
+export declare function getHeldKeyCodesMap(): SvelteHeldKeyCodesMap;

package/dist/getHeldKeyCodesMap.svelte.js

@@ -0,0 +1,46 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _HeldKeyCodesMapState_tracker, _HeldKeyCodesMapState_subscribe;
+import { getKeyStateTracker } from '@tanstack/hotkeys';
+import { createStoreSubscriber } from './internal.svelte';
+class HeldKeyCodesMapState {
+    constructor() {
+        _HeldKeyCodesMapState_tracker.set(this, getKeyStateTracker());
+        _HeldKeyCodesMapState_subscribe.set(this, createStoreSubscriber(__classPrivateFieldGet(this, _HeldKeyCodesMapState_tracker, "f").store));
+    }
+    get codes() {
+        __classPrivateFieldGet(this, _HeldKeyCodesMapState_subscribe, "f").call(this);
+        return __classPrivateFieldGet(this, _HeldKeyCodesMapState_tracker, "f").store.state.heldCodes;
+    }
+}
+_HeldKeyCodesMapState_tracker = new WeakMap(), _HeldKeyCodesMapState_subscribe = new WeakMap();
+/**
+ * Svelte function that returns reactive access to the map of 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").
+ *
+ * @returns Object with a reactive `codes` property
+ *
+ * ```svelte
+ * <script>
+ *   import { getHeldKeyCodesMap } from '@tanstack/svelte-hotkeys'
+ *   const heldKeyCodesMap = getHeldKeyCodesMap()
+ * </script>
+ *
+ * <div>
+ *   {#each Object.entries(heldKeyCodesMap.codes) as [key, code]}
+ *     <kbd>
+ *       {key} <small>{code}</small>
+ *     </kbd>
+ *   {/each}
+ *  </div>
+ * ```
+ */
+export function getHeldKeyCodesMap() {
+    return new HeldKeyCodesMapState();
+}

package/dist/getHeldKeys.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface SvelteHeldKeys {
+    readonly keys: Array<string>;
+}
+/**
+ * Svelte function that returns reactive access to currently held keyboard keys.
+ *
+ * This function uses the global KeyStateTracker and updates whenever keys are pressed
+ * or released.
+ *
+ * @returns Object with a reactive `keys` property
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { getHeldKeys } from '@tanstack/svelte-hotkeys'
+ *
+ *   const heldKeys = getHeldKeys()
+ * </script>
+ * <div>
+ *   Currently pressed: {heldKeys.keys.join(' + ') || 'None'}
+ * </div>
+ * ```
+ */
+export declare function getHeldKeys(): SvelteHeldKeys;