svelte-incant 0.7.0 → 0.8.0

package/dist/combobox-example.svelte

@@ -59,7 +59,7 @@
           role="combobox"
           aria-expanded={open}
           {@attach shortcut({
-            keys: ['meta', 'k'],
+            hotkey: 'Mod+K',
             description: 'Focus framework combobox'
           })}
         >
@@ -98,7 +98,7 @@
 								role="combobox"
 								aria-expanded={open}
 								{@attach shortcut({
-									keys: ['meta', 'j'],
+									hotkey: 'Mod+J',
 									description: 'Focus framework combobox'
 								})}
 							>

package/dist/components/header.svelte

@@ -146,7 +146,7 @@
 				href="https://github.com/mastermakrela/svelte-incant"
 				target="_blank"
 				{@attach shortcut({
-					keys: 'G',
+					hotkey: 'G',
 					description: 'Open GitHub'
 				})}
 			>

package/dist/package/attachment.svelte.d.ts

@@ -1,10 +1,12 @@
+import { type RegisterableHotkey } from '@tanstack/svelte-hotkeys';
 import type { Attachment } from 'svelte/attachments';
-import { type Shortcut } from './palette.svelte.js';
-type ShortcutInput = Omit<Shortcut, 'action' | 'keys'> & {
-    keys: string | string[] | string[][];
+type ShortcutInput = {
+    hotkey: RegisterableHotkey;
+    description?: string;
     action?: () => void;
     click?: boolean;
     preventDefault?: boolean;
+    enabled?: boolean;
 };
-export declare function shortcut(shortcut: ShortcutInput): Attachment<HTMLElement>;
+export declare function shortcut(input: ShortcutInput): Attachment<HTMLElement>;
 export {};

package/dist/package/attachment.svelte.js

@@ -1,8 +1,8 @@
-import { PressedKeys, watch } from 'runed';
+import { getIsKeyHeld } from '@tanstack/svelte-hotkeys';
+import { watch } from 'runed';
 import { mount, unmount } from 'svelte';
 import OverlayComponent from './overlay-component.svelte';
-import { add_shortcut, remove_shortcut, shortcuts, slugify } from './palette.svelte.js';
-const pressed_keys = new PressedKeys();
+import { add_shortcut, isShortcutEnabled, remove_shortcut } from './palette.svelte.js';
 const voidElements = new Set([
     'area',
     'base',
@@ -19,7 +19,7 @@ const voidElements = new Set([
     'track',
     'wbr'
 ]);
-function setupAnchor(element, targetNode, isVoidElement, keys) {
+function setupAnchor(element, targetNode, isVoidElement, hotkey) {
     const anchor = document.createElement('div');
     anchor.style.pointerEvents = 'none';
     if (isVoidElement) {
@@ -42,20 +42,15 @@ function setupAnchor(element, targetNode, isVoidElement, keys) {
     }
     const instance = mount(OverlayComponent, {
         target: anchor,
-        props: { keys }
+        props: { hotkey }
     });
     targetNode.appendChild(anchor);
     return { anchor, instance };
 }
-function setupOutline(element, keys) {
+function setupOutline(element, hotkey) {
     element.style.transition = 'outline 0s, outline-offset 0s';
-    const slug = slugify(keys);
-    watch(() => {
-        const altPressed = pressed_keys.has('alt');
-        const shortcut = shortcuts[slug];
-        const isEnabled = shortcut?.enabled ?? true;
-        return altPressed && isEnabled;
-    }, (should_show_outline) => {
+    const altHeld = getIsKeyHeld('Alt');
+    watch(() => altHeld.held && isShortcutEnabled(hotkey), (should_show_outline) => {
         if (should_show_outline) {
             element.style.outline = '2px dotted #878787';
             element.style.outlineOffset = '2px';
@@ -66,20 +61,21 @@ function setupOutline(element, keys) {
         }
     });
 }
-export function shortcut(shortcut) {
+export function shortcut(input) {
     return (element) => {
-        const action = () => {
-            element.focus();
-            if (shortcut.click !== false) {
-                element.click();
+        add_shortcut({
+            hotkey: input.hotkey,
+            description: input.description,
+            preventDefault: input.preventDefault,
+            enabled: input.enabled,
+            action: () => {
+                element.focus();
+                if (input.click !== false) {
+                    element.click();
+                }
+                input.action?.();
             }
-            shortcut.action?.();
-        };
-        const shortcutData = {
-            ...shortcut,
-            action
-        };
-        add_shortcut(shortcutData);
+        });
         let targetNode = element;
         const tagName = element.tagName.toLowerCase();
         const isVoidElement = voidElements.has(tagName);
@@ -87,15 +83,15 @@ export function shortcut(shortcut) {
             targetNode = element.parentElement;
         }
         if (!targetNode) {
-            remove_shortcut(shortcut.keys);
+            remove_shortcut(input.hotkey);
             return () => { };
         }
-        const { anchor, instance } = setupAnchor(element, targetNode, isVoidElement, shortcut.keys);
-        setupOutline(element, shortcut.keys);
+        const { anchor, instance } = setupAnchor(element, targetNode, isVoidElement, input.hotkey);
+        setupOutline(element, input.hotkey);
         return () => {
             unmount(instance);
             anchor.remove();
-            remove_shortcut(shortcut.keys);
+            remove_shortcut(input.hotkey);
         };
     };
 }

package/dist/package/chord.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
+	import type { HotkeySequence } from '@tanstack/svelte-hotkeys';
 	import { watch } from 'runed';
-	import { onMount } from 'svelte';
 	import { add_chord, remove_chord } from './chord.svelte.js';
 
 	let {
-		steps,
+		sequence,
 		description,
 		action
 	}: {
-		steps: string[][];
+		sequence: HotkeySequence;
 		description?: string;
 		action: () => void;
 	} = $props();
 
-	watch([() => steps, () => description, () => action], () => {
+	watch([() => sequence, () => description, () => action], () => {
 		add_chord({
-			steps,
+			sequence,
 			description,
 			action
 		});
 
 		return () => {
-			remove_chord(steps);
+			remove_chord(sequence);
 		};
 	});
 </script>

package/dist/package/chord.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { HotkeySequence } from '@tanstack/svelte-hotkeys';
 type $$ComponentProps = {
-    steps: string[][];
+    sequence: HotkeySequence;
     description?: string;
     action: () => void;
 };

package/dist/package/chord.svelte.js

@@ -1,257 +1,48 @@
-import { PressedKeys } from 'runed';
-import { on } from 'svelte/events';
-import { SvelteSet } from 'svelte/reactivity';
+import { formatHotkeySequence, getSequenceManager } from '@tanstack/svelte-hotkeys';
+import { SvelteMap } from 'svelte/reactivity';
 export const CHORD_TIMEOUT_MS = 1500;
-export function isChordInput(keys) {
-    return (typeof keys === 'object' &&
-        keys !== null &&
-        'isChord' in keys &&
-        keys.isChord === true);
-}
-function sortCombo(combo) {
-    return [...combo].sort((a, b) => a.localeCompare(b));
-}
-function comboToString(combo) {
-    return combo.join('-');
-}
-export function normalizeChordSteps(steps) {
-    return steps.map((step) => sortCombo(step));
-}
-export function slugifyChord(steps) {
-    const normalized = normalizeChordSteps(steps);
-    return normalized.map((step) => comboToString(step).toLowerCase().replace(/\s+/g, '-')).join('>');
-}
-export class ChordRegistry {
-    chords = $state({});
-    chordOrder = [];
-    chordPrefixes = $state(new SvelteSet());
-    currentProgress = $state(null);
-    pressedKeys = new PressedKeys();
-    chordTimeout = null;
-    isListening = false;
-    cleanupCallbacks = [];
-    constructor() { }
-    startListening() {
-        if (this.isListening)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        this.isListening = true;
-        // Set up escape key handler using svelte/events
-        const escapeCleanup = on(window, 'keydown', (event) => {
-            if (event.key === 'Escape') {
-                this.resetChord();
-            }
-        });
-        this.cleanupCallbacks.push(escapeCleanup);
-        // Use $effect to sync chord listeners when chords change
-        $effect(() => {
-            this.syncChordListeners();
-        });
-    }
-    syncChordListeners() {
-        // Clear existing chord-specific listeners (keep escape handler)
-        // Note: We can't easily remove onKeys callbacks, so we rely on the enabled check
-        // For each registered chord, set up listeners
-        for (const chord of Object.values(this.chords)) {
-            this.setupChordListener(chord);
-        }
-    }
-    setupChordListener(chord) {
-        if (!chord.enabled)
-            return;
-        const firstStep = chord.steps[0];
-        if (!firstStep)
-            return;
-        // Listen for first step - triggers immediately on keydown (VS Code style)
-        this.pressedKeys.onKeys(firstStep, () => {
-            if (!chord.enabled)
-                return;
-            // If we're already in a chord progress for a different chord, ignore
-            if (this.currentProgress) {
-                const currentSlug = this.slugifyChord(this.currentProgress.steps);
-                const thisSlug = this.slugifyChord(chord.steps);
-                if (currentSlug !== thisSlug) {
-                    return;
-                }
-            }
-            // Start the chord (shows progress UI immediately)
-            this.startChord(chord);
-        });
-        // Listen for second step
-        if (chord.steps.length > 1) {
-            const secondStep = chord.steps[1];
-            if (!secondStep)
-                return;
-            this.pressedKeys.onKeys(secondStep, () => {
-                if (!chord.enabled)
-                    return;
-                // Only complete if we're in progress for THIS chord
-                if (this.currentProgress &&
-                    this.slugifyChord(this.currentProgress.steps) === this.slugifyChord(chord.steps) &&
-                    this.currentProgress.currentIndex === 0) {
-                    this.completeChord();
-                }
-            });
-        }
-    }
-    normalizeChordSteps(steps) {
-        return normalizeChordSteps(steps);
-    }
-    slugifyChord(steps) {
-        return slugifyChord(steps);
-    }
-    comboToString(combo) {
-        return comboToString(combo);
-    }
-    checkCollision(steps, description) {
-        const slug = this.slugifyChord(steps);
-        if (this.chords[slug]) {
-            console.warn(`Chord collision detected: "${slug}" already registered${description ? ` (trying to register: "${description}")` : ''}`);
-            return true;
-        }
-        return false;
-    }
-    add(chord) {
-        this.startListening();
-        const normalizedSteps = this.normalizeChordSteps(chord.steps);
-        if (normalizedSteps.length === 0) {
-            console.warn('Cannot add chord with no steps');
-            return;
-        }
-        if (normalizedSteps.length < 2) {
-            console.warn('Chords require at least 2 steps');
-            return;
-        }
-        this.checkCollision(normalizedSteps, chord.description);
-        const slug = this.slugifyChord(normalizedSteps);
-        const firstStepString = this.comboToString(normalizedSteps[0]);
-        this.chordPrefixes.add(firstStepString);
-        this.chords[slug] = {
-            ...chord,
-            steps: normalizedSteps,
-            enabled: chord.enabled ?? true
-        };
-        if (!this.chordOrder.includes(slug)) {
-            this.chordOrder.push(slug);
-        }
-        // Set up listener for this chord
-        this.setupChordListener(this.chords[slug]);
-    }
-    remove(steps) {
-        const slug = this.slugifyChord(steps);
-        const chord = this.chords[slug];
-        if (!chord) {
-            console.warn(`Chord not found for steps: ${JSON.stringify(steps)}`);
-            return;
-        }
-        const firstStepString = this.comboToString(chord.steps[0]);
-        const hasOtherChordsWithSamePrefix = Object.values(this.chords).some((c) => c !== chord && c.steps[0] && this.comboToString(c.steps[0]) === firstStepString);
-        if (!hasOtherChordsWithSamePrefix) {
-            this.chordPrefixes.delete(firstStepString);
-        }
-        delete this.chords[slug];
-        const index = this.chordOrder.indexOf(slug);
-        if (index > -1) {
-            this.chordOrder.splice(index, 1);
-        }
-        if (this.currentProgress && this.slugifyChord(this.currentProgress.steps) === slug) {
-            this.resetChord();
-        }
-    }
-    toggle(steps) {
-        const slug = this.slugifyChord(steps);
-        if (this.chords[slug]) {
-            this.chords[slug].enabled = !this.chords[slug].enabled;
-        }
-    }
-    getChords() {
-        this.startListening();
-        return this.chordOrder
-            .map((slug) => this.chords[slug])
-            .filter((chord) => chord !== undefined);
-    }
-    isChordPrefix(combo) {
-        const comboString = this.comboToString(sortCombo(combo));
-        return this.chordPrefixes.has(comboString);
-    }
-    findChordForPrefix(combo) {
-        const comboString = this.comboToString(sortCombo(combo));
-        return (this.getChords().find((chord) => this.comboToString(chord.steps[0]) === comboString && chord.enabled) || null);
-    }
-    startChord(chord) {
-        if (this.chordTimeout) {
-            clearTimeout(this.chordTimeout);
-        }
-        this.currentProgress = {
-            steps: chord.steps,
-            currentIndex: 0,
-            expiresAt: Date.now() + CHORD_TIMEOUT_MS
-        };
-        this.chordTimeout = setTimeout(() => {
-            this.resetChord();
-        }, CHORD_TIMEOUT_MS);
-    }
-    completeChord() {
-        if (this.currentProgress) {
-            const chord = this.chords[this.slugifyChord(this.currentProgress.steps)];
-            if (chord && chord.enabled) {
-                chord.action();
-            }
-        }
-        this.resetChord();
-    }
-    resetChord() {
-        if (this.chordTimeout) {
-            clearTimeout(this.chordTimeout);
-            this.chordTimeout = null;
-        }
-        this.currentProgress = null;
-    }
-    destroy() {
-        for (const cleanup of this.cleanupCallbacks) {
-            cleanup();
-        }
-        this.cleanupCallbacks = [];
-        this.resetChord();
-        this.isListening = false;
-    }
-}
-let _registry = null;
-function getRegistry() {
-    if (!_registry) {
-        _registry = new ChordRegistry();
-    }
-    return _registry;
-}
-// Export direct access to the registry for reactivity
-export function getChordRegistry() {
-    return getRegistry();
-}
-export const chordRegistry = new Proxy({}, {
-    get(_, prop) {
-        return getRegistry()[prop];
-    }
-});
-export const chords = new Proxy({}, {
-    get(_, prop) {
-        const registry = getRegistry();
-        return registry.chords[prop];
-    },
-    has(_, prop) {
-        const registry = getRegistry();
-        return prop in registry.chords;
-    }
-});
-export function add_chord(chord) {
-    getRegistry().add(chord);
-}
-export function remove_chord(steps) {
-    getRegistry().remove(steps);
-}
-export function toggle_chord(steps) {
-    getRegistry().toggle(steps);
-}
-export function get_current_progress() {
-    return getRegistry().currentProgress;
+function canonicalize(sequence) {
+    return formatHotkeySequence(sequence);
+}
+// eslint-disable-next-line svelte/prefer-svelte-reactivity -- internal lookup, not consumed reactively
+const handles = new Map();
+const enabledState = new SvelteMap();
+export function add_chord(input) {
+    if (input.sequence.length < 2) {
+        console.warn('Chords require at least 2 steps');
+        return '';
+    }
+    const key = canonicalize(input.sequence);
+    handles.get(key)?.unregister();
+    const enabled = input.enabled ?? true;
+    enabledState.set(key, enabled);
+    const meta = {};
+    if (input.description)
+        meta.description = input.description;
+    const options = {
+        enabled,
+        timeout: input.timeout ?? CHORD_TIMEOUT_MS,
+        meta
+    };
+    const handle = getSequenceManager().register(input.sequence, input.action, options);
+    handles.set(key, handle);
+    return key;
+}
+export function remove_chord(sequence) {
+    const key = canonicalize(sequence);
+    handles.get(key)?.unregister();
+    handles.delete(key);
+    enabledState.delete(key);
+}
+export function toggle_chord(sequence) {
+    const key = canonicalize(sequence);
+    const handle = handles.get(key);
+    if (!handle?.isActive)
+        return;
+    const next = !(enabledState.get(key) ?? true);
+    enabledState.set(key, next);
+    handle.setOptions({ enabled: next });
+}
+export function isChordEnabled(sequence) {
+    return enabledState.get(canonicalize(sequence)) ?? true;
 }

package/dist/package/components/circular-progress.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { CHORD_TIMEOUT_MS } from '../chord.svelte.js';
-
-	let { expiresAt }: { expiresAt: number } = $props();
+	let { expiresAt, duration }: { expiresAt: number; duration: number } = $props();
 
 	let progress = $state(1);
 	let frame: number;
@@ -9,7 +7,7 @@
 	function update() {
 		const now = Date.now();
 		const remaining = Math.max(0, expiresAt - now);
-		progress = remaining / CHORD_TIMEOUT_MS;
+		progress = duration > 0 ? remaining / duration : 0;
 
 		if (remaining > 0) {
 			frame = requestAnimationFrame(update);

package/dist/package/components/circular-progress.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     expiresAt: number;
+    duration: number;
 };
 declare const CircularProgress: import("svelte").Component<$$ComponentProps, {}, "">;
 type CircularProgress = ReturnType<typeof CircularProgress>;

package/dist/package/components/kbds.svelte

@@ -1,79 +1,37 @@
 <script lang="ts">
+	import { formatForDisplay, type RegisterableHotkey } from '@tanstack/svelte-hotkeys';
+	import { getIsMac } from '../utils.js';
 	import * as Kbd from './ui/kbd/index.js';
-	import { getKeyLabel, getIsMac } from '../utils.js';
 
 	let {
-		keys,
-		isChord = false,
+		hotkey,
+		sequence,
 		formatShortcut
 	}: {
-		keys: string | string[] | string[][];
-		isChord?: boolean;
-		formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
+		hotkey?: RegisterableHotkey;
+		sequence?: RegisterableHotkey[];
+		formatShortcut?: (
+			hotkey: RegisterableHotkey | undefined,
+			sequence: RegisterableHotkey[] | undefined,
+			isMac: boolean
+		) => string;
 	} = $props();
 
 	const isMac = getIsMac();
+	const platform: 'mac' | 'windows' = $derived(isMac ? 'mac' : 'windows');
+	const isChordMode = $derived(sequence !== undefined);
 
-	type KeyCombination = string[];
-
-	const MODIFIER_KEYS = new Set([
-		'control',
-		'ctrl',
-		'alt',
-		'option',
-		'shift',
-		'meta',
-		'command',
-		'cmd'
-	]);
-
-	function isModifier(key: string): boolean {
-		return MODIFIER_KEYS.has(key.toLowerCase());
-	}
-
-	function sortKeys(keys: string[]): string[] {
-		return [...keys].sort((a, b) => {
-			const aIsModifier = isModifier(a);
-			const bIsModifier = isModifier(b);
-			if (aIsModifier && !bIsModifier) return -1;
-			if (!aIsModifier && bIsModifier) return 1;
-			return 0;
-		});
-	}
-
-	let keyGroups: KeyCombination[] = $derived(
-		typeof keys === 'string'
-			? [[keys]]
-			: Array.isArray(keys) && keys.length > 0 && typeof keys[0] === 'string'
-				? [sortKeys(keys as string[])]
-				: (keys as KeyCombination[]).map(sortKeys)
-	);
-
-	let isChordMode: boolean = $derived(isChord === true);
-
-	const formatter: Intl.ListFormat = $derived(
-		new Intl.ListFormat(
-			undefined,
-			isChordMode
-				? {
-						style: 'narrow',
-						type: 'unit'
-					}
-				: {
-						style: 'long',
-						type: 'disjunction'
-					}
-		)
-	);
-
-	const formattedParts = $derived.by(() => {
-		const combos = keyGroups.map((group) => group.map((key) => getKeyLabel(key, isMac)).join(' '));
-		return formatter.formatToParts(combos);
+	const tokens: string[] = $derived.by(() => {
+		if (hotkey !== undefined) {
+			return [formatForDisplay(hotkey, { platform, useSymbols: isMac })];
+		}
+		if (sequence) {
+			return sequence.map((step) => formatForDisplay(step, { platform, useSymbols: isMac }));
+		}
+		return [];
 	});
 
-	const customFormatted = $derived(
-		formatShortcut ? formatShortcut(keyGroups, isChordMode, isMac) : null
-	);
+	const customFormatted = $derived(formatShortcut ? formatShortcut(hotkey, sequence, isMac) : null);
 </script>
 
 {#if customFormatted !== null}
@@ -82,14 +40,15 @@
 	</Kbd.Group>
 {:else}
 	<Kbd.Group class="incant-kbds-container">
-		{#each formattedParts as part (part)}
-			{#if part.type === 'element'}
-				<Kbd.Root>{part.value}</Kbd.Root>
-			{:else if isChordMode}
-				<span class="incant-kbds-chord-separator">→</span>
-			{:else}
-				<span class="incant-kbds-separator">{part.value}</span>
+		{#each tokens as token, i (i)}
+			{#if i > 0}
+				{#if isChordMode}
+					<span class="incant-kbds-chord-separator">→</span>
+				{:else}
+					<span class="incant-kbds-separator">+</span>
+				{/if}
 			{/if}
+			<Kbd.Root>{token}</Kbd.Root>
 		{/each}
 	</Kbd.Group>
 {/if}

package/dist/package/components/kbds.svelte.d.ts

@@ -1,7 +1,8 @@
+import { type RegisterableHotkey } from '@tanstack/svelte-hotkeys';
 type $$ComponentProps = {
-    keys: string | string[] | string[][];
-    isChord?: boolean;
-    formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
+    hotkey?: RegisterableHotkey;
+    sequence?: RegisterableHotkey[];
+    formatShortcut?: (hotkey: RegisterableHotkey | undefined, sequence: RegisterableHotkey[] | undefined, isMac: boolean) => string;
 };
 declare const Kbds: import("svelte").Component<$$ComponentProps, {}, "">;
 type Kbds = ReturnType<typeof Kbds>;