svelte-incant 0.1.0

package/README.md

@@ -0,0 +1,75 @@
+# Svelte Incant
+
+A keyboard shortcut management library for Svelte 5.
+
+## Installation
+
+```sh
+bun install svelte-incant
+```
+
+## Usage
+
+Add `Palette` component to your root layout to enable the shortcut overlay:
+
+```svelte
+<script>
+	import { Palette } from 'svelte-incant';
+</script>
+
+<Palette />
+
+<!-- ... -->
+```
+
+Register keyboard shortcuts with the `Shortcut` component:
+
+```svelte
+<script>
+	import { Shortcut } from 'svelte-incant';
+</script>
+
+<Shortcut
+	keys={['control', 's']}
+	description="Save document"
+	action={() => console.log('Save document')}
+/>
+```
+
+For focusing elements (like inputs), use the `Focus` component:
+
+```svelte
+<script>
+	import { Focus } from 'svelte-incant';
+</script>
+
+<Focus keys={['control', 'e']} description="Focus search input">
+	<input type="text" placeholder="Search..." />
+</Focus>
+```
+
+Or attach shortcuts directly to an element using the `@attach` directive:
+
+```svelte
+<script>
+	import { shortcut } from 'svelte-incant';
+</script>
+
+<input
+	type="text"
+	placeholder="Type something..."
+	{@attach shortcut({
+		keys: ['meta', 'i'],
+		description: 'Focus text input'
+	})}
+/>
+```
+
+The `@attach` directive focuses the element it attaches to directly, as opposed to the `Focus` component, which wraps the children in a `div` and focuses that.
+
+## Features
+
+- **Shortcut Palette**: Press `?` to open the shortcut palette and see all registered shortcuts
+- **Route-specific Shortcuts**: Shortcuts only run when their component is mounted, allowing different shortcuts in different routes
+- **Focus Management**: Easily manage focus states with keyboard shortcuts
+- **Component-based**: Use components or directives to register shortcuts

package/dist/attachment.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Shortcut } from './palette.svelte.js';
+import type { Attachment } from 'svelte/attachments';
+type ShortcutInput = Omit<Shortcut, 'action' | 'keys'> & {
+    keys: string | string[] | string[][];
+    action?: () => void;
+};
+export declare function shortcut(shortcut: ShortcutInput): Attachment<HTMLElement>;
+export {};

package/dist/attachment.svelte.js

@@ -0,0 +1,93 @@
+import { mount, unmount } from 'svelte';
+import { add_shortcut, remove_shortcut } from './palette.svelte.js';
+import OverlayComponent from './overlay-component.svelte';
+import { PressedKeys, watch } from 'runed';
+const pressed_keys = new PressedKeys();
+const voidElements = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+]);
+function setupAnchor(element, targetNode, isVoidElement, keys) {
+    const anchor = document.createElement('div');
+    anchor.style.pointerEvents = 'none';
+    if (isVoidElement) {
+        anchor.style.position = 'absolute';
+        anchor.style.left = `${element.offsetLeft}px`;
+        anchor.style.top = `${element.offsetTop}px`;
+        anchor.style.width = `${element.offsetWidth}px`;
+        anchor.style.height = `${element.offsetHeight}px`;
+    }
+    else {
+        const style = window.getComputedStyle(element);
+        if (style.position === 'static') {
+            element.style.position = 'relative';
+        }
+        anchor.style.position = 'absolute';
+        anchor.style.top = '0';
+        anchor.style.left = '0';
+        anchor.style.width = '100%';
+        anchor.style.height = '100%';
+    }
+    const instance = mount(OverlayComponent, {
+        target: anchor,
+        props: { keys }
+    });
+    targetNode.appendChild(anchor);
+    return { anchor, instance };
+}
+function setupOutline(element) {
+    element.style.transition = 'outline 0s, outline-offset 0s';
+    watch(() => pressed_keys.has('alt'), (value) => {
+        if (value) {
+            element.style.outline = '2px dotted currentColor';
+            element.style.outlineOffset = '2px';
+        }
+        else {
+            element.style.outline = '';
+            element.style.outlineOffset = '';
+        }
+    });
+}
+export function shortcut(shortcut) {
+    return (element) => {
+        const action = () => {
+            element.focus();
+            element.click();
+            shortcut.action?.();
+        };
+        const shortcutData = {
+            ...shortcut,
+            action
+        };
+        add_shortcut(shortcutData);
+        let targetNode = element;
+        const tagName = element.tagName.toLowerCase();
+        const isVoidElement = voidElements.has(tagName);
+        if (isVoidElement) {
+            targetNode = element.parentElement;
+        }
+        if (!targetNode) {
+            remove_shortcut(shortcut.keys);
+            return () => { };
+        }
+        const { anchor, instance } = setupAnchor(element, targetNode, isVoidElement, shortcut.keys);
+        setupOutline(element);
+        return () => {
+            unmount(instance);
+            anchor.remove();
+            remove_shortcut(shortcut.keys);
+        };
+    };
+}

package/dist/combobox-example.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import * as Card from './components/ui/card';
+	import { shortcut } from './attachment.svelte.js';
+	import { Button } from './components/ui/button/index.js';
+	import * as Command from './components/ui/command/index.js';
+	import * as Popover from './components/ui/popover/index.js';
+	import * as Tabs from './components/ui/tabs/index.js';
+	import CodeBlock from './components/CodeBlock.svelte';
+
+	import { cn } from './utils.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import { tick } from 'svelte';
+
+	const frameworks = [
+		{
+			value: 'sveltekit',
+			label: 'SvelteKit'
+		},
+		{
+			value: 'next.js',
+			label: 'Next.js'
+		},
+		{
+			value: 'nuxt.js',
+			label: 'Nuxt.js'
+		},
+		{
+			value: 'remix',
+			label: 'Remix'
+		},
+		{
+			value: 'astro',
+			label: 'Astro'
+		}
+	];
+
+	let open = $state(false);
+	let value = $state('');
+	let triggerRef = $state<HTMLButtonElement>(null!);
+
+	const selectedValue = $derived(frameworks.find((f) => f.value === value)?.label);
+
+	const comboboxDemoCode =
+		`<script>
+  import { shortcut } from 'svelte-incant';
+  import { Button } from './components/ui/button';
+  import * as Popover from './components/ui/popover';
+  <` +
+		`/script>
+
+  <Popover.Root bind:open>
+    <Popover.Trigger bind:ref={triggerRef}>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          variant="outline"
+          class="w-[200px] justify-between"
+          role="combobox"
+          aria-expanded={open}
+          {@attach shortcut({
+            keys: ['meta', 'k'],
+            description: 'Focus framework combobox'
+          })}
+        >
+          {selectedValue || 'Select a framework...'}
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+    <!-- Popover content -->
+  </Popover.Root>`;
+
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+</script>
+
+<p class="text-sm text-muted-foreground">
+	Press <kbd class="rounded border bg-muted px-1 py-0.5 text-xs">⌥</kbd> (alt) to see the focus
+	shortcut hint. Press <kbd class="rounded border bg-muted px-1 py-0.5 text-xs">⌘ K</kbd> to focus the
+	combobox.
+</p>
+
+<Tabs.Root value="example" class="w-full">
+	<Card.Root>
+		<Tabs.Content value="example">
+			<Card.Content class="grid h-80 place-items-center">
+				<Popover.Root bind:open>
+					<Popover.Trigger bind:ref={triggerRef}>
+						{#snippet child({ props })}
+							<Button
+								{...props}
+								variant="outline"
+								class="w-[200px] justify-between"
+								role="combobox"
+								aria-expanded={open}
+								{@attach shortcut({
+									keys: ['meta', 'k'],
+									description: 'Focus framework combobox'
+								})}
+							>
+								{selectedValue || 'Select a framework...'}
+								<ChevronsUpDownIcon class="opacity-50" />
+							</Button>
+						{/snippet}
+					</Popover.Trigger>
+					<Popover.Content class="w-[200px] p-0">
+						<Command.Root>
+							<Command.Input placeholder="Search framework..." />
+							<Command.List>
+								<Command.Empty>No framework found.</Command.Empty>
+								<Command.Group value="frameworks">
+									{#each frameworks as framework (framework.value)}
+										<Command.Item
+											value={framework.value}
+											onSelect={() => {
+												value = framework.value;
+												closeAndFocusTrigger();
+											}}
+										>
+											<CheckIcon class={cn(value !== framework.value && 'text-transparent')} />
+											{framework.label}
+										</Command.Item>
+									{/each}
+								</Command.Group>
+							</Command.List>
+						</Command.Root>
+					</Popover.Content>
+				</Popover.Root>
+			</Card.Content>
+		</Tabs.Content>
+		<Tabs.Content value="code">
+			<Card.Content>
+				<CodeBlock language="xml" code={comboboxDemoCode} />
+
+				<p class="mt-4 text-sm text-muted-foreground">
+					Full combobox code from <a
+						href="https://shadcn-svelte.com/docs/components/combobox"
+						target="_blank"
+						class="font-mono underline"
+					>
+						https://shadcn-svelte.com/docs/components/combobox
+					</a>
+				</p>
+			</Card.Content>
+		</Tabs.Content>
+	</Card.Root>
+	<Tabs.List>
+		<Tabs.Trigger value="example">Example</Tabs.Trigger>
+		<Tabs.Trigger value="code">Code</Tabs.Trigger>
+	</Tabs.List>
+</Tabs.Root>

package/dist/combobox-example.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ComboboxExample: import("svelte").Component<Record<string, never>, {}, "">;
+type ComboboxExample = ReturnType<typeof ComboboxExample>;
+export default ComboboxExample;

package/dist/components/CodeBlock.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import hljs from 'highlight.js/lib/core';
+	import javascript from 'highlight.js/lib/languages/javascript';
+	import xml from 'highlight.js/lib/languages/xml';
+	import 'highlight.js/styles/github.css';
+	import copy from 'copy-to-clipboard';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	hljs.registerLanguage('javascript', javascript);
+	hljs.registerLanguage('xml', xml);
+
+	let codeElement: HTMLElement;
+
+	function escapeHtml(value: string): string {
+		return value
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#x27;');
+	}
+
+	type Props = {
+		autodetect?: boolean;
+		language?: string;
+		ignoreIllegals?: boolean;
+		code?: string;
+		setLanguage?: (language: string) => void;
+	} & HTMLAttributes<HTMLDivElement>;
+
+	let {
+		autodetect = true,
+		language = '',
+		setLanguage = () => {},
+		ignoreIllegals = true,
+		code,
+		...restProps
+	}: Props = $props();
+
+	let copying = $state(0);
+	let highlightedCode: string = $state('');
+
+	const cannotDetectLanguage = $derived(!autodetect && !hljs.getLanguage(language));
+
+	const className = $derived(
+		cannotDetectLanguage ? '' : `hljs ${language} ${restProps.class ?? ''}`
+	);
+
+	$effect(() => {
+		if (!code) return;
+		if (cannotDetectLanguage) {
+			highlightedCode = escapeHtml(code);
+		}
+
+		if (autodetect) {
+			const result = hljs.highlightAuto(code);
+			setLanguage(result.language ?? '');
+			highlightedCode = result.value;
+		} else {
+			const result = hljs.highlight(code, {
+				language,
+				ignoreIllegals
+			});
+			highlightedCode = result.value;
+		}
+	});
+
+	$effect(() => {
+		if (codeElement) {
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			codeElement.innerHTML = highlightedCode;
+		}
+	});
+
+	function onCopy() {
+		if (!code) return;
+		copy(code);
+		copying++;
+		setTimeout(() => {
+			copying--;
+		}, 2000);
+	}
+</script>
+
+<div class="outerWrapper">
+	<button class="copyButton" onclick={onCopy} aria-label="Copy code">
+		{#if copying}
+			<div>
+				<svg
+					viewBox="0 0 24 24"
+					width="14"
+					height="14"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					fill="none"
+					shape-rendering="geometricPrecision"
+				>
+					<path d="M20 6L9 17l-5-5" />
+				</svg>
+			</div>
+		{:else}
+			<div>
+				<svg
+					viewBox="0 0 24 24"
+					width="14"
+					height="14"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					fill="none"
+					shape-rendering="geometricPrecision"
+				>
+					<path
+						d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"
+					/>
+				</svg>
+			</div>
+		{/if}
+	</button>
+
+	<div class="wrapper">
+		<div class={`${className} root`}>
+			<code bind:this={codeElement}></code>
+		</div>
+	</div>
+</div>
+
+<style>
+	:root {
+		--gray0: #fff;
+		--gray1: hsl(0, 0%, 99%);
+		--gray2: hsl(0, 0%, 97.3%);
+		--gray3: hsl(0, 0%, 95.1%);
+		--gray4: hsl(0, 0%, 93%);
+		--gray5: hsl(0, 0%, 90.9%);
+		--gray6: hsl(0, 0%, 88.7%);
+		--gray7: hsl(0, 0%, 85.8%);
+		--gray8: hsl(0, 0%, 78%);
+		--gray9: hsl(0, 0%, 56.1%);
+		--gray10: hsl(0, 0%, 52.3%);
+		--gray11: hsl(0, 0%, 43.5%);
+		--gray12: hsl(0, 0%, 9%);
+	}
+
+	.root {
+		padding: 16px;
+		margin: 0;
+		background: var(--gray1);
+		border-radius: 0;
+		position: relative;
+		line-height: 17px;
+		white-space: pre-wrap;
+		background: linear-gradient(to top, var(--gray2), var(--gray1) 16px);
+	}
+
+	.wrapper {
+		overflow: hidden;
+		margin: 0;
+		position: relative;
+		border-radius: 6px;
+		margin-top: 16px;
+		border: 1px solid var(--gray3);
+	}
+
+	.copyButton {
+		position: absolute;
+		top: 12px;
+		right: 12px;
+		z-index: 1;
+		width: 26px;
+		height: 26px;
+		border: 1px solid var(--gray4);
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--gray0);
+		cursor: pointer;
+		opacity: 0;
+		color: var(--gray12);
+		transition:
+			background 200ms,
+			box-shadow 200ms,
+			opacity 200ms;
+	}
+
+	.copyButton:hover {
+		background: var(--gray1);
+	}
+
+	.copyButton:focus-visible {
+		box-shadow: 0 0 0 1px var(--gray4);
+	}
+
+	.copyButton > div {
+		display: flex;
+	}
+
+	.outerWrapper {
+		position: relative;
+	}
+
+	.outerWrapper:hover .copyButton {
+		opacity: 1;
+	}
+
+	code {
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import 'highlight.js/styles/github.css';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    autodetect?: boolean;
+    language?: string;
+    ignoreIllegals?: boolean;
+    code?: string;
+    setLanguage?: (language: string) => void;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;