@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/CommandPalette.svelte

@@ -0,0 +1,475 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import { commandPalette, type CommandItem } from '../stores/commandPalette.svelte.js';
+
+	// Respect prefers-reduced-motion
+	const reducedMotion =
+		typeof window !== 'undefined' &&
+		window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+	let searchQuery = $state('');
+	let highlightedIndex = $state(0);
+	let searchInput: HTMLInputElement | undefined;
+	let listRef: HTMLUListElement | undefined;
+
+	// Fuzzy score: return a score > 0 if query matches, else 0.
+	// Simple: all query chars must appear in label+keywords in order (subsequence).
+	function fuzzyScore(item: CommandItem, q: string): number {
+		if (!q) return 1;
+		const haystack = [item.label, ...(item.keywords ?? [])].join(' ').toLowerCase();
+		let pos = 0;
+		let score = 0;
+		let lastMatchPos = -1;
+		for (const ch of q) {
+			const idx = haystack.indexOf(ch, pos);
+			if (idx === -1) return 0;
+			// Bonus for consecutive chars
+			if (lastMatchPos >= 0 && idx === lastMatchPos + 1) score += 2;
+			score += 1;
+			lastMatchPos = idx;
+			pos = idx + 1;
+		}
+		// Bonus for label prefix match
+		if (item.label.toLowerCase().startsWith(q)) score += 10;
+		return score;
+	}
+
+	type ScoredGroup = { label: string; items: CommandItem[] };
+
+	const filteredGroups = $derived.by((): ScoredGroup[] => {
+		const q = searchQuery.trim().toLowerCase();
+
+		// Show recents when query is empty
+		if (!q) {
+			const recent = commandPalette.getRecentItems();
+			const base: ScoredGroup[] = [];
+			if (recent.length > 0) {
+				base.push({ label: 'Recent', items: recent });
+			}
+			for (const g of commandPalette.groups) {
+				base.push({ label: g.label, items: g.items });
+			}
+			return base;
+		}
+
+		const result: ScoredGroup[] = [];
+		for (const g of commandPalette.groups) {
+			const scored = g.items
+				.map((item) => ({ item, score: fuzzyScore(item, q) }))
+				.filter((x) => x.score > 0)
+				.sort((a, b) => b.score - a.score)
+				.map((x) => x.item);
+			if (scored.length > 0) result.push({ label: g.label, items: scored });
+		}
+		return result;
+	});
+
+	const flatItems = $derived(filteredGroups.flatMap((g) => g.items));
+
+	// Reset highlight when results change
+	$effect(() => {
+		void filteredGroups;
+		highlightedIndex = 0;
+	});
+
+	// Focus input when opened
+	$effect(() => {
+		if (commandPalette.open) {
+			searchQuery = '';
+			tick().then(() => searchInput?.focus());
+		}
+	});
+
+	function scrollHighlightIntoView() {
+		tick().then(() => {
+			const el = listRef?.querySelector<HTMLElement>('[data-highlighted="true"]');
+			el?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			commandPalette.closePalette();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedIndex = Math.min(highlightedIndex + 1, flatItems.length - 1);
+			scrollHighlightIntoView();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, 0);
+			scrollHighlightIntoView();
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const item = flatItems[highlightedIndex];
+			if (item) commandPalette.runCommand(item);
+		} else if (e.key === 'Tab') {
+			// Tab between groups — find next group boundary
+			e.preventDefault();
+			const dir = e.shiftKey ? -1 : 1;
+			const currentItem = flatItems[highlightedIndex];
+			const currentGroup = filteredGroups.find((g) => g.items.includes(currentItem));
+			const groupIdx = currentGroup ? filteredGroups.indexOf(currentGroup) : 0;
+			const nextGroupIdx = (groupIdx + dir + filteredGroups.length) % filteredGroups.length;
+			const nextGroup = filteredGroups[nextGroupIdx];
+			if (nextGroup) {
+				const nextItem = nextGroup.items[0];
+				highlightedIndex = flatItems.indexOf(nextItem);
+				scrollHighlightIntoView();
+			}
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) commandPalette.closePalette();
+	}
+
+	function handleWindowKeydown(e: KeyboardEvent) {
+		// Open on Ctrl+K / Cmd+K (ignore if typing in an input)
+		if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+			const tag = (document.activeElement as HTMLElement)?.tagName;
+			const isTyping =
+				tag === 'INPUT' || tag === 'TEXTAREA' ||
+				(document.activeElement as HTMLElement)?.isContentEditable;
+			if (!isTyping) {
+				e.preventDefault();
+				if (commandPalette.open) {
+					commandPalette.closePalette();
+				} else {
+					commandPalette.openPalette();
+				}
+			}
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleWindowKeydown} />
+
+{#if commandPalette.open}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		class="cp-backdrop"
+		onclick={handleBackdropClick}
+		transition:fade={{ duration: reducedMotion ? 0 : 150 }}
+	>
+		<div
+			class="cp-panel"
+			role="combobox"
+			aria-expanded="true"
+			aria-haspopup="listbox"
+			aria-owns="cp-listbox"
+			in:fly={{ y: reducedMotion ? 0 : -8, duration: reducedMotion ? 0 : 200, easing: cubicOut }}
+			out:fade={{ duration: reducedMotion ? 0 : 120 }}
+		>
+			<!-- Search input -->
+			<div class="cp-search">
+				<svg class="cp-search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+				</svg>
+				<input
+					bind:this={searchInput}
+					bind:value={searchQuery}
+					onkeydown={handleKeydown}
+					type="text"
+					placeholder="Search commands…"
+					aria-label="Search commands"
+					aria-autocomplete="list"
+					aria-controls="cp-listbox"
+					aria-activedescendant={flatItems[highlightedIndex] ? `cp-item-${flatItems[highlightedIndex].id}` : undefined}
+					class="cp-search-input"
+					autocomplete="off"
+					spellcheck="false"
+				/>
+				{#if searchQuery}
+					<button
+						type="button"
+						aria-label="Clear search"
+						onclick={() => { searchQuery = ''; searchInput?.focus(); }}
+						class="cp-search-clear"
+					>
+						<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				{:else}
+					<kbd class="cp-hint-kbd">ESC</kbd>
+				{/if}
+			</div>
+
+			<!-- Results -->
+			<ul
+				id="cp-listbox"
+				role="listbox"
+				aria-label="Commands"
+				bind:this={listRef}
+				class="cp-list"
+			>
+				{#if filteredGroups.length > 0}
+					{#each filteredGroups as group}
+						<li role="presentation" class="cp-group-label">{group.label}</li>
+						{#each group.items as item}
+							{@const flatIdx = flatItems.indexOf(item)}
+							{@const isHighlighted = flatIdx === highlightedIndex}
+							<li
+								id="cp-item-{item.id}"
+								role="option"
+								aria-selected={isHighlighted}
+								data-highlighted={isHighlighted ? 'true' : undefined}
+								class="cp-item"
+								class:cp-item-highlighted={isHighlighted}
+							>
+								<button
+									type="button"
+									class="cp-item-btn"
+									onclick={() => commandPalette.runCommand(item)}
+									onmouseenter={() => { highlightedIndex = flatIdx; }}
+									tabindex="-1"
+								>
+									{#if item.icon}
+										<span class="cp-item-icon" aria-hidden="true">{item.icon}</span>
+									{:else}
+										<span class="cp-item-icon-placeholder" aria-hidden="true"></span>
+									{/if}
+									<span class="cp-item-label">{item.label}</span>
+									{#if item.shortcut && item.shortcut.length > 0}
+										<span class="cp-item-shortcut" aria-label="Shortcut: {item.shortcut.join(' ')}">
+											{#each item.shortcut as key}
+												<kbd class="cp-kbd">{key}</kbd>
+											{/each}
+										</span>
+									{/if}
+								</button>
+							</li>
+						{/each}
+					{/each}
+				{:else}
+					<li class="cp-empty">No commands match "{searchQuery}"</li>
+				{/if}
+			</ul>
+
+			<!-- Footer hint -->
+			<div class="cp-footer" aria-hidden="true">
+				<span class="cp-footer-hint"><kbd class="cp-kbd">↑↓</kbd> navigate</span>
+				<span class="cp-footer-hint"><kbd class="cp-kbd">↵</kbd> run</span>
+				<span class="cp-footer-hint"><kbd class="cp-kbd">Tab</kbd> jump group</span>
+				<span class="cp-footer-hint"><kbd class="cp-kbd">Esc</kbd> close</span>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.cp-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 9000;
+		background: oklch(0 0 0 / 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		padding-top: 15vh;
+		padding-inline: 1rem;
+	}
+
+	.cp-panel {
+		width: 100%;
+		max-width: 560px;
+		background: oklch(var(--b1));
+		border: var(--jatui-border-w) solid oklch(var(--b3));
+		border-radius: var(--jatui-radius-box);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		max-height: 60vh;
+	}
+
+	/* Search row */
+	.cp-search {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.625rem 0.875rem;
+		border-bottom: var(--jatui-border-w) solid oklch(var(--b2));
+		flex-shrink: 0;
+	}
+
+	.cp-search-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		color: oklch(var(--bc) / 0.4);
+	}
+
+	.cp-search-input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		outline: none;
+		font-size: 0.9375rem;
+		color: oklch(var(--bc));
+		line-height: 1.5;
+		min-width: 0;
+	}
+
+	.cp-search-input::placeholder {
+		color: oklch(var(--bc) / 0.35);
+	}
+
+	.cp-search-clear {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.1875rem;
+		border-radius: var(--jatui-radius-field);
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: oklch(var(--bc) / 0.45);
+		transition: color var(--motion-instant) var(--motion-glide),
+		            background var(--motion-instant) var(--motion-glide);
+	}
+
+	.cp-search-clear:hover {
+		color: oklch(var(--bc));
+		background: oklch(var(--b2));
+	}
+
+	.cp-hint-kbd {
+		font-size: 0.5625rem;
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		color: oklch(var(--bc) / 0.3);
+		background: none;
+		border: none;
+		padding: 0;
+	}
+
+	/* Results list */
+	.cp-list {
+		flex: 1;
+		overflow-y: auto;
+		list-style: none;
+		margin: 0;
+		padding: 0.25rem 0;
+	}
+
+	.cp-group-label {
+		padding: 0.5rem 0.875rem 0.125rem;
+		font-size: 0.5625rem;
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.07em;
+		color: oklch(var(--bc) / 0.35);
+	}
+
+	.cp-item {
+		padding: 0 0.375rem;
+	}
+
+	.cp-item-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		width: 100%;
+		padding: 0.5rem 0.5rem;
+		border: none;
+		border-radius: var(--jatui-radius-selector);
+		background: transparent;
+		cursor: pointer;
+		text-align: left;
+		color: oklch(var(--bc) / 0.85);
+		transition: background var(--motion-instant) var(--motion-glide),
+		            color var(--motion-instant) var(--motion-glide);
+	}
+
+	.cp-item-highlighted .cp-item-btn {
+		background: oklch(var(--b2));
+		color: oklch(var(--bc));
+	}
+
+	.cp-item-icon {
+		flex-shrink: 0;
+		width: 1.25rem;
+		text-align: center;
+		font-size: 0.875rem;
+		line-height: 1;
+	}
+
+	.cp-item-icon-placeholder {
+		flex-shrink: 0;
+		width: 1.25rem;
+	}
+
+	.cp-item-label {
+		flex: 1;
+		font-size: 0.875rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cp-item-shortcut {
+		display: flex;
+		gap: 0.25rem;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	/* Keyboard hint keys */
+	.cp-kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.0625rem 0.3125rem;
+		border-radius: var(--jatui-radius-field);
+		font-size: 0.5625rem;
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		font-weight: 600;
+		color: oklch(var(--bc) / 0.55);
+		background: oklch(var(--b2));
+		border: var(--jatui-border-w) solid oklch(var(--b3));
+		line-height: 1.4;
+	}
+
+	.cp-item-highlighted .cp-kbd {
+		color: oklch(var(--bc) / 0.7);
+		background: oklch(var(--b3));
+	}
+
+	/* Empty state */
+	.cp-empty {
+		padding: 1.5rem 0.875rem;
+		text-align: center;
+		font-size: 0.8125rem;
+		color: oklch(var(--bc) / 0.4);
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+	}
+
+	/* Footer */
+	.cp-footer {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+		padding: 0.5rem 0.875rem;
+		border-top: var(--jatui-border-w) solid oklch(var(--b2));
+		flex-shrink: 0;
+	}
+
+	.cp-footer-hint {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.5625rem;
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		color: oklch(var(--bc) / 0.35);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cp-search-clear,
+		.cp-item-btn {
+			transition: none;
+		}
+	}
+</style>

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

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

package/dist/components/ContextMenu.svelte

@@ -3,15 +3,9 @@
 	 * ContextMenu Component
 	 *
 	 * Floating right-click (or programmatic) menu positioned at a cursor point.
-	 * Headless primitive that handles positioning, viewport clamping, and
-	 * dismiss behavior (click-outside, Escape, right-click elsewhere).
-	 *
-	 * Viewport clamping is measured from the rendered DOM (offsetWidth /
-	 * offsetHeight) — no estimatedWidth/estimatedHeight props needed. The menu
-	 * stays inside the viewport regardless of how many items are passed in.
-	 * `transform-origin: top left` is set on the menu element so a caller's
-	 * scale-based entrance animation (via `class`) cannot shift the visual
-	 * rect away from the layout-box position used for clamping.
+	 * Positioning is handled by the use:floating action (@floating-ui/dom) via a
+	 * virtual anchor at the cursor coordinates. Dismiss (click-outside, Escape),
+	 * focus return, and entrance animation are all delegated to the action.
 	 *
 	 * Usage:
 	 *   let cm = $state({ open: false, x: 0, y: 0, target: null })
@@ -35,8 +29,7 @@
 	 *   />
 	 */
 
-	import { scale, fade } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
+	import { floating, makeVirtualAnchor } from '../actions/floating.js';
 
 	type ActionItem = {
 		label: string;
@@ -89,74 +82,17 @@
 		close();
 	}
 
-	// Position is measured from the rendered menu so it stays correct as items
-	// are added/removed. Initial values match the cursor; the post-render
-	// effect below corrects them once the layout box is known.
-	let menuEl = $state<HTMLDivElement | null>(null);
-	// svelte-ignore state_referenced_locally
-	let clampedX = $state(x);
-	// svelte-ignore state_referenced_locally
-	let clampedY = $state(y);
-
-	function measureAndClamp() {
-		if (typeof window === 'undefined' || !menuEl) return;
-		// offset* gives the layout box, ignoring any transform: scale() the
-		// caller might apply via a className. getBoundingClientRect would
-		// return the post-transform rect and underestimate during entrance
-		// animations.
-		const w = menuEl.offsetWidth;
-		const h = menuEl.offsetHeight;
-		const margin = 8;
-		clampedX =
-			x + w > window.innerWidth - margin
-				? Math.max(margin, window.innerWidth - w - margin)
-				: Math.max(margin, x);
-		clampedY =
-			y + h > window.innerHeight - margin
-				? Math.max(margin, window.innerHeight - h - margin)
-				: Math.max(margin, y);
-	}
-
-	// Re-measure whenever the menu opens, the anchor moves, or the item list
-	// changes (which can change the menu height).
-	$effect(() => {
-		if (!open) return;
-		// Touch reactive deps so the effect re-runs.
-		void x; void y; void items.length;
-		// Wait for the menu element to mount before measuring.
-		if (menuEl) {
-			measureAndClamp();
-		} else {
-			// Element not mounted yet — fall back to cursor position; the next
-			// effect tick will fire once `bind:this` resolves.
-			clampedX = x;
-			clampedY = y;
-		}
-	});
+	// Virtual anchor tracks the cursor position; rebuilt whenever x or y change.
+	let anchor = $derived(makeVirtualAnchor(x, y));
 </script>
 
 {#if open}
-	<!-- Invisible full-viewport overlay — captures click/right-click to dismiss -->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="fixed inset-0"
-		style="z-index: {zIndex - 1};"
-		onclick={close}
-		oncontextmenu={(e) => {
-			e.preventDefault();
-			close();
-		}}
-	></div>
-
 	<div
-		bind:this={menuEl}
 		role="menu"
 		tabindex="-1"
-		class="fixed min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
-		style="left: {clampedX}px; top: {clampedY}px; z-index: {zIndex}; transform-origin: top left;"
-		in:scale={{ start: 0.92, duration: 140, easing: cubicOut }}
-		out:fade={{ duration: 100 }}
+		class="min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
+		style="z-index: {zIndex};"
+		use:floating={{ anchor, placement: 'bottom-start', flip: true, shift: true, offset: 2, onDismiss: close }}
 		onkeydown={(e) => e.key === 'Escape' && close()}
 	>
 		{#if header}