svelte-incant 0.1.0

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("flex flex-col gap-2", className)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/ui/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui/tooltip/index.js

@@ -0,0 +1,8 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+export { Root, Trigger, Content, Provider, Portal, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'z-50 w-fit origin-(--bits-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'z-50 size-2.5 rotate-45 rounded-[2px] bg-primary',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import TooltipPortal from './tooltip-portal.svelte';
+import type { ComponentProps } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../utils.js';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/dist/components/ui/tooltip/tooltip-portal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipPortal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+type TooltipPortal = ReturnType<typeof TooltipPortal>;
+export default TooltipPortal;

package/dist/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

package/dist/components/ui/tooltip/tooltip-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipProvider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/dist/components/ui/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/dist/components/ui/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const Tooltip: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/focus.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { shortcut } from './attachment.svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	let {
+		keys,
+		description,
+		element,
+		children,
+		after_focus,
+		class: className
+	}: {
+		keys: string | string[] | string[][];
+		description?: string;
+		element?: HTMLElement;
+		children: Snippet;
+		after_focus?: () => void;
+		class?: ClassValue;
+	} = $props();
+
+	let container: HTMLElement;
+
+	function focusChild() {
+		if (element) {
+			element.focus();
+		} else if (container) {
+			// Try to find the first focusable element
+			const focusable = container.querySelector<HTMLElement>(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			);
+
+			if (focusable) {
+				focusable.focus();
+			} else {
+				// If no focusable element found, focus the container itself
+				container.focus();
+			}
+		}
+
+		after_focus?.();
+	}
+</script>
+
+<div
+	bind:this={container}
+	tabindex="-1"
+	class={className}
+	{@attach shortcut({
+		keys,
+		description: description,
+		action: focusChild
+	})}
+>
+	{@render children()}
+</div>

package/dist/focus.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    keys: string | string[] | string[][];
+    description?: string;
+    element?: HTMLElement;
+    children: Snippet;
+    after_focus?: () => void;
+    class?: ClassValue;
+};
+declare const Focus: import("svelte").Component<$$ComponentProps, {}, "">;
+type Focus = ReturnType<typeof Focus>;
+export default Focus;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Palette } from './palette.svelte';
+export { default as Shortcut } from './shortcut.svelte';
+export { default as Focus } from './focus.svelte';
+export { shortcut } from './attachment.svelte.js';
+export { shortcuts } from './palette.svelte.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+// Simple index.ts to export available components
+export { default as Palette } from './palette.svelte';
+export { default as Shortcut } from './shortcut.svelte';
+export { default as Focus } from './focus.svelte';
+// Export functions
+export { shortcut } from './attachment.svelte.js';
+export { shortcuts } from './palette.svelte.js';

package/dist/overlay-component.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { PressedKeys } from 'runed';
+	import Kbds from './components/kbds.svelte';
+
+	export type OverlayComponentProps = {
+		keys: string | string[] | string[][];
+	};
+
+	let { keys }: OverlayComponentProps = $props();
+
+	const pressed_keys = new PressedKeys();
+	const visible = $derived(pressed_keys.has('alt'));
+</script>
+
+{#if visible}
+	<div class="pointer-events-none absolute bottom-0 left-1/2 z-50 -translate-x-1/2 translate-y-2/3">
+		<Kbds {keys} />
+	</div>
+{/if}

package/dist/overlay-component.svelte.d.ts

@@ -0,0 +1,6 @@
+export type OverlayComponentProps = {
+    keys: string | string[] | string[][];
+};
+declare const OverlayComponent: import("svelte").Component<OverlayComponentProps, {}, "">;
+type OverlayComponent = ReturnType<typeof OverlayComponent>;
+export default OverlayComponent;

package/dist/palette.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+	export type PalettePosition =
+		| 'top-left'
+		| 'top-center'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right'
+		| 'none';
+</script>
+
+<script lang="ts">
+	import { buttonVariants } from './components/ui/button';
+	import * as Dialog from './components/ui/dialog/index.js';
+	import * as Kbd from './components/ui/kbd/index.js';
+	import * as Table from './components/ui/table';
+	import * as Tooltip from './components/ui/tooltip';
+	import { Keyboard, ToggleLeft, ToggleRight } from '@lucide/svelte';
+	import { PressedKeys } from 'runed';
+	import { registry, slugify } from './palette.svelte.js';
+	import Shortcut from './shortcut.svelte';
+	import Kbds from './components/kbds.svelte';
+
+	let {
+		position = 'bottom-right'
+	}: {
+		position?: PalettePosition;
+	} = $props();
+
+	let open = $state(false);
+	let tooltip_open = $state(false);
+
+	const pressed_keys = new PressedKeys();
+	const all_keys = $derived(pressed_keys.all);
+
+	const filtered_shortcuts = $derived.by(() => {
+		const _all_keys = all_keys.filter((key) => ['?', '/', ' '].indexOf(key) === -1);
+		return registry.filteredShortcuts(_all_keys);
+	});
+
+	const positionClass = $derived.by(() => {
+		switch (position) {
+			case 'top-left':
+				return 'fixed left-4 top-4';
+			case 'top-center':
+				return 'fixed left-1/2 top-4 -translate-x-1/2';
+			case 'top-right':
+				return 'fixed right-4 top-4';
+			case 'bottom-left':
+				return 'fixed left-4 bottom-4';
+			case 'bottom-center':
+				return 'fixed left-1/2 bottom-4 -translate-x-1/2';
+			case 'bottom-right':
+				return 'fixed right-4 bottom-4';
+			case 'none':
+				return '';
+		}
+	});
+</script>
+
+<Shortcut keys={[['?'], ['/']]} description="Open shortcut palette" action={() => (open = !open)} />
+
+<Tooltip.Provider delayDuration={0}>
+	<Tooltip.Root bind:open={tooltip_open}>
+		<Tooltip.Trigger
+			class={[buttonVariants({ size: 'icon-lg' }), positionClass, 'cursor-pointer']}
+			onclick={() => {
+				open = !open;
+			}}
+		>
+			<Keyboard />
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			Press <Kbd.Root>?</Kbd.Root>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>
+
+<Dialog.Root bind:open>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Keyboard Shortcuts</Dialog.Title>
+			<Dialog.Description class="my-8">
+				<p class="mb-4 text-sm text-muted-foreground">
+					Press any key to filter shortcuts containing that key. Matching keys will be highlighted
+					in green.
+				</p>
+				<Table.Root>
+					<Table.Header>
+						<Table.Row>
+							<Table.Head>Keys</Table.Head>
+							<Table.Head>Description</Table.Head>
+							<Table.Head class="text-right">Enabled</Table.Head>
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						{#each filtered_shortcuts as shortcut (slugify(shortcut.keys))}
+							<Table.Row>
+								<Table.Cell class="font-medium">
+									<Kbds keys={shortcut.keys} />
+								</Table.Cell>
+								<Table.Cell>{shortcut.description}</Table.Cell>
+								<Table.Cell class="text-right">
+									<button
+										class="inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground"
+										onclick={() => registry.toggle(shortcut.keys)}
+										aria-label={shortcut.enabled ? 'Disable shortcut' : 'Enable shortcut'}
+									>
+										{#if shortcut.enabled !== false}
+											<ToggleRight class="h-5 w-5 text-green-500" />
+										{:else}
+											<ToggleLeft class="h-5 w-5 text-muted-foreground" />
+										{/if}
+									</button>
+								</Table.Cell>
+							</Table.Row>
+						{:else}
+							<Table.Row>
+								<Table.Cell colspan={3} class="text-center py-4 text-sm text-muted-foreground">
+									No shortcuts containing
+									<Kbds keys={all_keys} />
+
+									.
+								</Table.Cell>
+							</Table.Row>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+			</Dialog.Description>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/palette.svelte.d.ts

@@ -0,0 +1,7 @@
+export type PalettePosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'none';
+type $$ComponentProps = {
+    position?: PalettePosition;
+};
+declare const Palette: import("svelte").Component<$$ComponentProps, {}, "">;
+type Palette = ReturnType<typeof Palette>;
+export default Palette;

package/dist/palette.svelte.js

@@ -0,0 +1,177 @@
+import { PressedKeys, activeElement } from 'runed';
+class ShortcutRegistry {
+    shortcuts = $state({});
+    registeredCombos = $state(new Set());
+    pressedKeys = new PressedKeys();
+    cleanupCallbacks = new Map();
+    isListening = false;
+    constructor() { }
+    startListening() {
+        if (this.isListening)
+            return;
+        this.isListening = true;
+        $effect(() => {
+            this.syncKeyboardListeners();
+        });
+    }
+    normalizeKeys(keys) {
+        if (typeof keys === 'string') {
+            return [[keys]];
+        }
+        if (keys.length === 0) {
+            return [];
+        }
+        if (Array.isArray(keys[0])) {
+            return keys.map((combo) => this.sortCombo(combo));
+        }
+        return [this.sortCombo(keys)];
+    }
+    sortCombo(combo) {
+        return [...combo].sort((a, b) => a.localeCompare(b));
+    }
+    comboToString(combo) {
+        return combo.join('-');
+    }
+    slugify(keys) {
+        const normalized = this.normalizeKeys(keys);
+        return normalized
+            .map((combo) => this.comboToString(combo).toLowerCase().replace(/\s+/g, '-'))
+            .join('|');
+    }
+    checkCollision(keys, description) {
+        for (const combo of keys) {
+            const comboString = this.comboToString(combo);
+            if (this.registeredCombos.has(comboString)) {
+                console.warn(`Shortcut collision detected: "${comboString}" already registered${description ? ` (trying to register: "${description}")` : ''}`);
+                return true;
+            }
+        }
+        return false;
+    }
+    add(shortcut) {
+        this.startListening();
+        const normalizedKeys = this.normalizeKeys(shortcut.keys);
+        if (normalizedKeys.length === 0) {
+            console.warn('Cannot add shortcut with no keys');
+            return;
+        }
+        this.checkCollision(normalizedKeys, shortcut.description);
+        const slug = this.slugify(shortcut.keys);
+        for (const combo of normalizedKeys) {
+            const comboString = this.comboToString(combo);
+            this.registeredCombos.add(comboString);
+        }
+        this.shortcuts[slug] = {
+            ...shortcut,
+            keys: normalizedKeys,
+            enabled: shortcut.enabled ?? true
+        };
+    }
+    remove(keys) {
+        const slug = this.slugify(keys);
+        const shortcut = this.shortcuts[slug];
+        if (!shortcut) {
+            console.warn(`Shortcut not found for keys: ${JSON.stringify(keys)}`);
+            return;
+        }
+        for (const combo of shortcut.keys) {
+            const comboString = this.comboToString(combo);
+            this.registeredCombos.delete(comboString);
+        }
+        delete this.shortcuts[slug];
+    }
+    toggle(keys) {
+        const slug = this.slugify(keys);
+        if (this.shortcuts[slug]) {
+            this.shortcuts[slug].enabled = !this.shortcuts[slug].enabled;
+        }
+    }
+    getShortcuts() {
+        this.startListening();
+        return Object.values(this.shortcuts);
+    }
+    filteredShortcuts(pressedKeys) {
+        const allShortcuts = this.getShortcuts();
+        if (pressedKeys.length === 0) {
+            return allShortcuts;
+        }
+        const filteredPressedKeys = pressedKeys.filter((key) => ['?', '/', ' ', 'escape'].indexOf(key) === -1);
+        return allShortcuts.filter((shortcut) => {
+            return shortcut.keys.some((keyCombo) => keyCombo.some((key) => filteredPressedKeys.some((pressedKey) => key.toLowerCase() === pressedKey.toLowerCase())));
+        });
+    }
+    syncKeyboardListeners() {
+        for (const [slug, cleanup] of this.cleanupCallbacks) {
+            cleanup();
+            this.cleanupCallbacks.delete(slug);
+        }
+        for (const [slug, shortcut] of Object.entries(this.shortcuts)) {
+            const cleanup = this.setupKeyboardListener(shortcut);
+            this.cleanupCallbacks.set(slug, cleanup);
+        }
+    }
+    setupKeyboardListener(shortcut) {
+        for (const keyCombo of shortcut.keys) {
+            this.pressedKeys.onKeys(keyCombo, () => {
+                const target = activeElement.current;
+                const hasModifier = this.hasModifierKey(keyCombo);
+                if (shortcut.enabled && (hasModifier || !this.isTypingElement(target))) {
+                    shortcut.action();
+                }
+            });
+        }
+        return () => { };
+    }
+    hasModifierKey(keys) {
+        const modifierKeys = ['control', 'ctrl', 'alt', 'meta', 'command', 'cmd'];
+        return keys.some((key) => modifierKeys.includes(key.toLowerCase()));
+    }
+    isTypingElement(element) {
+        if (!element)
+            return false;
+        const tagName = element.tagName.toLowerCase();
+        if (element.isContentEditable)
+            return true;
+        if (tagName === 'textarea')
+            return true;
+        if (tagName === 'input') {
+            const inputType = element.type.toLowerCase();
+            const textTypes = [
+                'text',
+                'password',
+                'email',
+                'search',
+                'tel',
+                'url',
+                'number',
+                'date',
+                'datetime-local',
+                'month',
+                'time',
+                'week'
+            ];
+            return textTypes.includes(inputType);
+        }
+        return false;
+    }
+}
+export const registry = new ShortcutRegistry();
+export const shortcuts = registry.shortcuts;
+export function add_shortcut(shortcut) {
+    registry.add(shortcut);
+}
+export function remove_shortcut(keys) {
+    registry.remove(keys);
+}
+export function toggle_shortcut(keys) {
+    registry.toggle(keys);
+}
+export function slugify(keys) {
+    return registry.slugify(keys);
+}
+export function isArrayOfArrays(keys) {
+    return Array.isArray(keys) && keys.length > 0 && Array.isArray(keys[0]);
+}
+export function normalizeKeys(keys) {
+    return registry.normalizeKeys(keys);
+}

package/dist/shortcut.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { add_shortcut, remove_shortcut } from './palette.svelte.js';
+
+	let {
+		keys,
+		description,
+		action
+	}: {
+		keys: string | string[] | string[][];
+		description?: string;
+		action: () => void;
+	} = $props();
+
+	onMount(() => {
+		add_shortcut({
+			keys,
+			description,
+			action
+		});
+
+		return () => {
+			remove_shortcut(keys);
+		};
+	});
+</script>

package/dist/shortcut.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    keys: string | string[] | string[][];
+    description?: string;
+    action: () => void;
+};
+declare const Shortcut: import("svelte").Component<$$ComponentProps, {}, "">;
+type Shortcut = ReturnType<typeof Shortcut>;
+export default Shortcut;