svelte-incant 0.6.0 → 0.7.0

package/dist/package/chord.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from 'runed';
 	import { onMount } from 'svelte';
 	import { add_chord, remove_chord } from './chord.svelte.js';
 
@@ -12,7 +13,7 @@
 		action: () => void;
 	} = $props();
 
-	onMount(() => {
+	watch([() => steps, () => description, () => action], () => {
 		add_chord({
 			steps,
 			description,

package/dist/package/components/kbds.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import * as Kbd from './ui/kbd/index.js';
-	import { keyToSymbol } from '../utils.js';
+	import { getKeyLabel, getIsMac } from '../utils.js';
 
 	let {
 		keys,
-		isChord = false
+		isChord = false,
+		formatShortcut
 	}: {
 		keys: string | string[] | string[][];
 		isChord?: boolean;
+		formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
 	} = $props();
 
+	const isMac = getIsMac();
+
 	type KeyCombination = string[];
 
 	const MODIFIER_KEYS = new Set([
@@ -63,22 +67,32 @@
 	);
 
 	const formattedParts = $derived.by(() => {
-		const combos = keyGroups.map((group) => group.map(keyToSymbol).join(' '));
+		const combos = keyGroups.map((group) => group.map((key) => getKeyLabel(key, isMac)).join(' '));
 		return formatter.formatToParts(combos);
 	});
+
+	const customFormatted = $derived(
+		formatShortcut ? formatShortcut(keyGroups, isChordMode, isMac) : null
+	);
 </script>
 
-<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>
-		{/if}
-	{/each}
-</Kbd.Group>
+{#if customFormatted !== null}
+	<Kbd.Group class="incant-kbds-container">
+		<Kbd.Root>{customFormatted}</Kbd.Root>
+	</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>
+			{/if}
+		{/each}
+	</Kbd.Group>
+{/if}
 
 <style>
 	.incant-kbds-separator {

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

@@ -1,6 +1,7 @@
 type $$ComponentProps = {
     keys: string | string[] | string[][];
     isChord?: boolean;
+    formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
 };
 declare const Kbds: import("svelte").Component<$$ComponentProps, {}, "">;
 type Kbds = ReturnType<typeof Kbds>;

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

@@ -47,7 +47,7 @@
 		z-index: var(--incant-z-index-dialog, 50);
 		transform: translate(-50%, -50%);
 		width: calc(100% - 2rem);
-		max-width: 32rem;
+		max-width: fit-content;
 		display: grid;
 		gap: var(--incant-spacing-4, 1rem);
 		padding: var(--incant-spacing-6, 1.5rem);
@@ -98,7 +98,7 @@
 
 	@media (min-width: 640px) {
 		:global([data-slot='dialog-content']) {
-			max-width: 32rem;
+			max-width: fit-content;
 		}
 	}
 

package/dist/package/index.d.ts

@@ -6,4 +6,4 @@ export { default as Shortcut } from './shortcut.svelte';
 export { shortcut } from './attachment.svelte.js';
 export { chordRegistry, chords, get_current_progress } from './chord.svelte.js';
 export { closePalette, openPalette, paletteState, shortcuts, togglePalette } from './palette.svelte.js';
-export { getIsMac, keyToSymbol } from './utils';
+export { getIsMac, getKeyLabel, keyToSymbol } from './utils';

package/dist/package/index.js

@@ -5,4 +5,4 @@ export { default as Shortcut } from './shortcut.svelte';
 export { shortcut } from './attachment.svelte.js';
 export { chordRegistry, chords, get_current_progress } from './chord.svelte.js';
 export { closePalette, openPalette, paletteState, shortcuts, togglePalette } from './palette.svelte.js';
-export { getIsMac, keyToSymbol } from './utils';
+export { getIsMac, getKeyLabel, keyToSymbol } from './utils';

package/dist/package/palette.svelte

@@ -54,6 +54,7 @@
 	let {
 		position = 'bottom-right',
 		showToggles = false,
+		formatShortcut,
 		texts = {
 			shortcutDescription: 'Open shortcut palette',
 			tooltipContent: 'Press ?',
@@ -74,6 +75,7 @@
 	}: {
 		position?: PalettePosition;
 		showToggles?: boolean;
+		formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
 		texts?: {
 			shortcutDescription?: string;
 			tooltipContent?: string;
@@ -185,7 +187,7 @@
 						{#each filtered_shortcuts as item (item.type === 'shortcut' ? slugify(item.keys) : slugifyChord(item.keys))}
 							<Table.Row>
 								<Table.Cell class="incant-palette-cell-keys">
-									<Kbds keys={item.keys} isChord={item.type === 'chord'} />
+									<Kbds keys={item.keys} isChord={item.type === 'chord'} {formatShortcut} />
 								</Table.Cell>
 								<Table.Cell>{item.description}</Table.Cell>
 								{#if showToggles}
@@ -212,7 +214,7 @@
 							<Table.Row>
 								<Table.Cell colspan={showToggles ? 3 : 2} class="incant-palette-empty-state">
 									{texts.emptyState}
-									<Kbds keys={all_keys} />
+									<Kbds keys={all_keys} {formatShortcut} />
 
 									.
 								</Table.Cell>
@@ -227,7 +229,7 @@
 
 {#if chordDisplay}
 	<div class="incant-chord-display">
-		<Kbds keys={chordDisplay.completedSteps} />
+		<Kbds keys={chordDisplay.completedSteps} isChord={true} {formatShortcut} />
 		{#if chordDisplay.hasMore}
 			<span class="incant-chord-display-arrow">→</span>
 			<div class="incant-chord-display-next">

package/dist/package/palette.svelte.d.ts

@@ -2,6 +2,7 @@ export type PalettePosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-
 type $$ComponentProps = {
     position?: PalettePosition;
     showToggles?: boolean;
+    formatShortcut?: (keys: string[][], isChord: boolean, isMac: boolean) => string;
     texts?: {
         shortcutDescription?: string;
         tooltipContent?: string;

package/dist/package/shortcut.svelte

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

package/dist/package/shortcut.svelte.d.ts

@@ -2,6 +2,7 @@ type $$ComponentProps = {
     keys: string | string[] | string[][];
     description?: string;
     action: () => void;
+    preventDefault?: boolean;
 };
 declare const Shortcut: import("svelte").Component<$$ComponentProps, {}, "">;
 type Shortcut = ReturnType<typeof Shortcut>;

package/dist/package/utils.d.ts

@@ -9,4 +9,5 @@ export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
     ref?: U | null;
 };
 export declare function keyToSymbol(key: string): string;
+export declare function getKeyLabel(key: string, isMac: boolean): string;
 export declare function getIsMac(): boolean;

package/dist/package/utils.js

@@ -28,9 +28,49 @@ export function keyToSymbol(key) {
     const lower = key.toLowerCase();
     return symbols[lower] ?? key.toUpperCase();
 }
-// export const isMac = $derived(
-// 	typeof navigator !== 'undefined' ? navigator.platform.toUpperCase().includes('MAC') : false
-// );
+export function getKeyLabel(key, isMac) {
+    const macSymbols = {
+        control: '⌃',
+        ctrl: '⌃',
+        alt: '⌥',
+        option: '⌥',
+        shift: '⇧',
+        meta: '⌘',
+        command: '⌘',
+        cmd: '⌘'
+    };
+    const textLabels = {
+        control: 'Ctrl',
+        ctrl: 'Ctrl',
+        alt: 'Alt',
+        option: 'Alt',
+        shift: 'Shift',
+        meta: 'Win',
+        command: 'Win',
+        cmd: 'Win',
+        enter: 'Enter',
+        return: 'Enter',
+        backspace: 'Backspace',
+        delete: 'Delete',
+        escape: 'Esc',
+        esc: 'Esc',
+        tab: 'Tab',
+        space: 'Space',
+        up: '↑',
+        down: '↓',
+        left: '←',
+        right: '→',
+        arrowup: '↑',
+        arrowdown: '↓',
+        arrowleft: '←',
+        arrowright: '→'
+    };
+    const lower = key.toLowerCase();
+    if (isMac && macSymbols[lower]) {
+        return macSymbols[lower];
+    }
+    return textLabels[lower] ?? key.toUpperCase();
+}
 export function getIsMac() {
     return typeof navigator !== 'undefined'
         ? navigator.platform.toUpperCase().includes('MAC')

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-incant",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"license": "MIT",
 	"repository": {
 		"url": "https://github.com/mastermakrela/svelte-incant"