@salmexio/ui 0.3.1 → 1.0.0

package/dist/navigation/CommandPalette/CommandPalette.svelte

@@ -1,8 +1,12 @@
 <!--
   @component CommandPalette
 
-  Win2K × Basquiat — Keyboard-first command launcher with sunken search field,
-  categorised result list, fuzzy matching, and shortcut display.
+  Neo-Brutalist Dark — Premium keyboard-first command launcher.
+  Glass backdrop, entrance animations, fuzzy search with match highlighting,
+  categorised results, shortcut display, live result count announcements.
+
+  ARIA: dialog containing combobox with listbox. Focus stays on input;
+  aria-activedescendant communicates visual focus to screen readers.
 
   @example
   <CommandPalette
@@ -14,12 +18,14 @@
   />
 -->
 <script lang="ts" module>
+import type { Snippet } from 'svelte';
+
 export interface CommandItem {
 	id: string;
 	label: string;
 	shortcut?: string;
 	group?: string;
-	icon?: string;
+	icon?: Snippet;
 	description?: string;
 	disabled?: boolean;
 	action: () => void;
@@ -33,7 +39,7 @@ export interface CommandGroup {
 
 <script lang="ts">
 import { cn } from '../../utils/cn.js';
-import { Keys, createFocusTrap } from '../../utils/keyboard.js';
+import { Keys, createFocusTrap, generateId } from '../../utils/keyboard.js';
 import { onMount, tick } from 'svelte';
 import type { FocusTrap } from '../../utils/keyboard.js';
 
@@ -61,63 +67,100 @@ let {
 	testId
 }: Props = $props();
 
+const instanceId = generateId('cmd');
+const resultsId = `${instanceId}-results`;
+
 let query = $state('');
 let activeIndex = $state(0);
 let inputEl = $state<HTMLInputElement | null>(null);
 let panelEl = $state<HTMLDivElement | null>(null);
 let listEl = $state<HTMLDivElement | null>(null);
-let backdropEl = $state<HTMLDivElement | null>(null);
 let wrapperEl = $state<HTMLDivElement | null>(null);
 let focusTrap: FocusTrap | null = null;
+let previouslyFocused: HTMLElement | null = null;
+let isAnimatingOut = $state(false);
 
-// Fuzzy match: check if query chars appear in order in the label
-function fuzzyMatch(text: string, search: string): boolean {
-	if (!search) return true;
+// Fuzzy match: return matched character indices for highlighting
+function fuzzyMatchIndices(text: string, search: string): number[] | null {
+	if (!search) return [];
 	const lower = text.toLowerCase();
 	const searchLower = search.toLowerCase();
+	const indices: number[] = [];
 	let si = 0;
 	for (let ti = 0; ti < lower.length && si < searchLower.length; ti++) {
-		if (lower[ti] === searchLower[si]) si++;
+		if (lower[ti] === searchLower[si]) {
+			indices.push(ti);
+			si++;
+		}
 	}
-	return si === searchLower.length;
+	return si === searchLower.length ? indices : null;
 }
 
-// Score: prefer starts-with and shorter labels
+// Score: prefer starts-with, word-boundary matches, shorter labels
 function fuzzyScore(text: string, search: string): number {
 	if (!search) return 0;
 	const lower = text.toLowerCase();
 	const searchLower = search.toLowerCase();
 	let score = 0;
-	if (lower.startsWith(searchLower)) score += 100;
-	if (lower.includes(searchLower)) score += 50;
+
+	// Exact prefix — highest
+	if (lower.startsWith(searchLower)) score += 200;
+	// Word boundary matches
+	else if (lower.includes(searchLower)) score += 100;
+
+	// Consecutive matches bonus
+	const indices = fuzzyMatchIndices(text, search);
+	if (indices && indices.length > 1) {
+		let consecutive = 0;
+		for (let i = 1; i < indices.length; i++) {
+			if (indices[i] === indices[i - 1] + 1) consecutive++;
+		}
+		score += consecutive * 15;
+	}
+
+	// Word-boundary bonus: match at start of word
+	if (indices) {
+		for (const idx of indices) {
+			if (idx === 0 || text[idx - 1] === ' ' || text[idx - 1] === '-' || text[idx - 1] === '_') {
+				score += 10;
+			}
+		}
+	}
+
+	// Shorter labels rank higher
 	score -= text.length;
 	return score;
 }
 
-const filteredCommands = $derived<CommandItem[]>(
+const filteredCommands = $derived<(CommandItem & { matchIndices: number[] })[]>(
 	commands
-		.filter((c) => fuzzyMatch(c.label, query) || (c.description && fuzzyMatch(c.description, query)))
+		.map((c) => {
+			const labelIndices = fuzzyMatchIndices(c.label, query);
+			const descIndices = c.description ? fuzzyMatchIndices(c.description, query) : null;
+			if (labelIndices === null && descIndices === null) return null;
+			return { ...c, matchIndices: labelIndices ?? [] };
+		})
+		.filter((c): c is CommandItem & { matchIndices: number[] } => c !== null)
 		.sort((a, b) => fuzzyScore(b.label, query) - fuzzyScore(a.label, query))
 );
 
 // Group filtered results
 const groupedResults = $derived.by(() => {
-	const groups = new Map<string, CommandItem[]>();
+	const groups = new Map<string, (CommandItem & { matchIndices: number[] })[]>();
 	for (const item of filteredCommands) {
 		const key = item.group ?? '';
 		if (!groups.has(key)) groups.set(key, []);
 		groups.get(key)!.push(item);
 	}
-	return Array.from(groups.entries()).map(([label, items]) => ({ label, items })) as CommandGroup[];
+	return Array.from(groups.entries()).map(([label, items]) => ({ label, items }));
 });
 
-// Flat list for keyboard navigation
-const flatFiltered = $derived(filteredCommands);
-
 function openPalette() {
+	previouslyFocused = document.activeElement as HTMLElement;
 	open = true;
 	query = '';
 	activeIndex = 0;
+	isAnimatingOut = false;
 	requestAnimationFrame(() => {
 		inputEl?.focus();
 		if (panelEl) {
@@ -128,18 +171,27 @@ function openPalette() {
 }
 
 function closePalette() {
-	open = false;
-	query = '';
-	activeIndex = 0;
+	isAnimatingOut = true;
 	focusTrap?.deactivate();
 	focusTrap = null;
-	onclose?.();
+
+	// Wait for exit animation
+	setTimeout(() => {
+		open = false;
+		isAnimatingOut = false;
+		query = '';
+		activeIndex = 0;
+		onclose?.();
+		previouslyFocused?.focus();
+		previouslyFocused = null;
+	}, 120);
 }
 
-function executeItem(item: CommandItem) {
+function executeItem(item: CommandItem & { matchIndices: number[] }) {
 	if (item.disabled) return;
 	closePalette();
-	item.action();
+	// Execute after close animation
+	setTimeout(() => item.action(), 130);
 }
 
 function scrollActiveIntoView() {
@@ -147,15 +199,7 @@ function scrollActiveIntoView() {
 		if (!listEl) return;
 		const active = listEl.querySelector('[data-active="true"]') as HTMLElement;
 		if (!active) return;
-		const listTop = listEl.scrollTop;
-		const listHeight = listEl.clientHeight;
-		const elTop = active.offsetTop;
-		const elHeight = active.offsetHeight;
-		if (elTop < listTop) {
-			listEl.scrollTop = elTop;
-		} else if (elTop + elHeight > listTop + listHeight) {
-			listEl.scrollTop = elTop + elHeight - listHeight;
-		}
+		active.scrollIntoView({ block: 'nearest' });
 	});
 }
 
@@ -163,7 +207,7 @@ function handleKeydown(e: KeyboardEvent) {
 	switch (e.key) {
 		case Keys.ArrowDown:
 			e.preventDefault();
-			activeIndex = Math.min(activeIndex + 1, flatFiltered.length - 1);
+			activeIndex = Math.min(activeIndex + 1, filteredCommands.length - 1);
 			scrollActiveIntoView();
 			break;
 		case Keys.ArrowUp:
@@ -173,7 +217,7 @@ function handleKeydown(e: KeyboardEvent) {
 			break;
 		case Keys.Enter:
 			e.preventDefault();
-			if (flatFiltered[activeIndex]) executeItem(flatFiltered[activeIndex]);
+			if (filteredCommands[activeIndex]) executeItem(filteredCommands[activeIndex]);
 			break;
 		case Keys.Escape:
 			e.preventDefault();
@@ -186,7 +230,7 @@ function handleKeydown(e: KeyboardEvent) {
 			break;
 		case Keys.End:
 			e.preventDefault();
-			activeIndex = Math.max(flatFiltered.length - 1, 0);
+			activeIndex = Math.max(filteredCommands.length - 1, 0);
 			scrollActiveIntoView();
 			break;
 	}
@@ -196,16 +240,12 @@ function handleInput() {
 	activeIndex = 0;
 }
 
-function handleBackdropClick() {
-	closePalette();
-}
-
 // Watch for external open changes
 $effect(() => {
-	if (open) openPalette();
+	if (open && !isAnimatingOut) openPalette();
 });
 
-// Portal: move wrapper to document.body to escape transform/overflow ancestors
+// Portal to document.body
 $effect(() => {
 	if (wrapperEl && open) {
 		document.body.appendChild(wrapperEl);
@@ -233,7 +273,6 @@ onMount(() => {
 	};
 });
 
-// Track cumulative index for items within grouped display
 function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 	let offset = 0;
 	for (let g = 0; g < groupIdx; g++) {
@@ -241,18 +280,27 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 	}
 	return offset + itemIdx;
 }
+
+function getItemId(itemId: string): string {
+	return `${instanceId}-item-${itemId}`;
+}
 </script>
 
 {#if open}
 <div bind:this={wrapperEl}>
 	<!-- Backdrop -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div bind:this={backdropEl} class="salmex-cmd-backdrop" onclick={handleBackdropClick} onkeydown={() => {}}></div>
+	<div
+		class={cn('sx-command-backdrop', isAnimatingOut && 'sx-command-backdrop-exit')}
+		onclick={() => closePalette()}
+		onkeydown={() => {}}
+		role="presentation"
+	></div>
 
 	<!-- Panel -->
 	<div
 		bind:this={panelEl}
-		class={cn('salmex-cmd', className)}
+		class={cn('sx-command', isAnimatingOut && 'sx-command-exit', className)}
 		role="dialog"
 		tabindex="-1"
 		aria-label="Command palette"
@@ -260,9 +308,9 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 		onkeydown={handleKeydown}
 	>
 		<!-- Search field -->
-		<div class="salmex-cmd-search">
-			<span class="salmex-cmd-search-icon" aria-hidden="true">
-				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+		<div class="sx-command-search">
+			<span class="sx-command-search-icon" aria-hidden="true">
+				<svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
 					<circle cx="6.5" cy="6.5" r="5" />
 					<path d="M10 10L14.5 14.5" />
 				</svg>
@@ -270,38 +318,51 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 			<input
 				bind:this={inputEl}
 				type="text"
-				class="salmex-cmd-input"
+				class="sx-command-input"
+				role="combobox"
 				{placeholder}
 				bind:value={query}
 				oninput={handleInput}
 				aria-label="Search commands"
-				aria-controls="cmd-results"
-				aria-activedescendant={flatFiltered[activeIndex] ? `cmd-item-${flatFiltered[activeIndex].id}` : undefined}
+				aria-expanded={filteredCommands.length > 0}
+				aria-haspopup="listbox"
+				aria-controls={resultsId}
+				aria-activedescendant={filteredCommands[activeIndex] ? getItemId(filteredCommands[activeIndex].id) : undefined}
+				aria-autocomplete="list"
 				autocomplete="off"
 				spellcheck="false"
 			/>
-			<span class="salmex-cmd-shortcut-hint" aria-hidden="true">ESC</span>
+			<kbd class="sx-command-esc" aria-hidden="true">ESC</kbd>
 		</div>
 
 		<!-- Results -->
-		<div bind:this={listEl} id="cmd-results" class="salmex-cmd-results" role="listbox">
-			{#if flatFiltered.length === 0}
-				<div class="salmex-cmd-empty">No commands found.</div>
+		<div bind:this={listEl} id={resultsId} class="sx-command-results" role="listbox" aria-label="Commands">
+			{#if filteredCommands.length === 0}
+				<div class="sx-command-empty">
+					<span class="sx-command-empty-icon" aria-hidden="true">
+						<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+							<circle cx="11" cy="11" r="8" />
+							<path d="M21 21l-4.35-4.35" />
+							<path d="M8 11h6" />
+						</svg>
+					</span>
+					<span class="sx-command-empty-text">No commands match "<strong>{query}</strong>"</span>
+				</div>
 			{:else}
 				{#each groupedResults as group, gi}
 					{#if group.label}
-						<div class="salmex-cmd-group-label">{group.label}</div>
+						<div class="sx-command-group-label" role="presentation">{group.label}</div>
 					{/if}
 					{#each group.items as item, ii}
 						{@const globalIdx = getCumulativeIndex(gi, ii)}
 						{@const isActive = globalIdx === activeIndex}
 						<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
 						<div
-							id="cmd-item-{item.id}"
+							id={getItemId(item.id)}
 							class={cn(
-								'salmex-cmd-item',
-								isActive && 'salmex-cmd-item-active',
-								item.disabled && 'salmex-cmd-item-disabled'
+								'sx-command-item',
+								isActive && 'sx-command-item-active',
+								item.disabled && 'sx-command-item-disabled'
 							)}
 							role="option"
 							tabindex="-1"
@@ -310,19 +371,30 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 							data-active={isActive}
 							onmouseenter={() => { activeIndex = globalIdx; }}
 							onclick={() => executeItem(item)}
-							onkeydown={handleKeydown}
 						>
 							{#if item.icon}
-								<span class="salmex-cmd-item-icon" aria-hidden="true">{item.icon}</span>
+								<span class="sx-command-item-icon" aria-hidden="true">{@render item.icon()}</span>
 							{/if}
-							<div class="salmex-cmd-item-content">
-								<span class="salmex-cmd-item-label">{item.label}</span>
+							<div class="sx-command-item-content">
+								<span class="sx-command-item-label">
+									{#if query && item.matchIndices.length > 0}
+										{#each item.label.split('') as char, ci}
+											{#if item.matchIndices.includes(ci)}
+												<mark class="sx-command-match">{char}</mark>
+											{:else}
+												{char}
+											{/if}
+										{/each}
+									{:else}
+										{item.label}
+									{/if}
+								</span>
 								{#if item.description}
-									<span class="salmex-cmd-item-desc">{item.description}</span>
+									<span class="sx-command-item-desc">{item.description}</span>
 								{/if}
 							</div>
 							{#if item.shortcut}
-								<span class="salmex-cmd-item-shortcut">{item.shortcut}</span>
+								<kbd class="sx-command-item-shortcut">{item.shortcut}</kbd>
 							{/if}
 						</div>
 					{/each}
@@ -330,11 +402,21 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 			{/if}
 		</div>
 
-		<!-- Footer hint -->
-		<div class="salmex-cmd-footer">
-			<span><kbd>&#8593;&#8595;</kbd> navigate</span>
-			<span><kbd>&#8629;</kbd> select</span>
-			<span><kbd>esc</kbd> close</span>
+		<!-- Live region for screen readers -->
+		<div class="sx-sr-only" aria-live="polite" aria-atomic="true">
+			{#if query}
+				{filteredCommands.length} {filteredCommands.length === 1 ? 'result' : 'results'} available
+			{/if}
+		</div>
+
+		<!-- Footer hints -->
+		<div class="sx-command-footer">
+			<span class="sx-command-footer-hint"><kbd>&uarr;&darr;</kbd> navigate</span>
+			<span class="sx-command-footer-hint"><kbd>&crarr;</kbd> select</span>
+			<span class="sx-command-footer-hint"><kbd>esc</kbd> close</span>
+			{#if filteredCommands.length > 0}
+				<span class="sx-command-footer-count">{filteredCommands.length} {filteredCommands.length === 1 ? 'command' : 'commands'}</span>
+			{/if}
 		</div>
 	</div>
 </div>
@@ -342,232 +424,379 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
 
 <style>
 	/* ========================================
-	   BACKDROP
+	   BACKDROP — Glass blur with entrance/exit
 	   ======================================== */
-	.salmex-cmd-backdrop {
+	.sx-command-backdrop {
 		position: fixed;
 		inset: 0;
-		z-index: var(--salmex-z-modal-backdrop);
-		background: rgb(0 0 0 / 0.4);
+		z-index: var(--sx-z-modal-backdrop);
+		background: var(--sx-color-backdrop);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+		animation: sx-cmd-backdrop-in 150ms ease-out both;
+	}
+
+	.sx-command-backdrop-exit {
+		animation: sx-cmd-backdrop-out 120ms ease-in both;
+	}
+
+	@keyframes sx-cmd-backdrop-in {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	@keyframes sx-cmd-backdrop-out {
+		from { opacity: 1; }
+		to { opacity: 0; }
 	}
 
 	/* ========================================
-	   PANEL
+	   PANEL — Elevated surface with entrance/exit
 	   ======================================== */
-	.salmex-cmd {
+	.sx-command {
 		position: fixed;
-		top: 20%;
+		top: min(20%, 160px);
 		left: 50%;
 		transform: translateX(-50%);
-		z-index: var(--salmex-z-modal);
-		width: min(560px, calc(100vw - 32px));
-		max-height: 420px;
+		z-index: var(--sx-z-modal);
+		width: min(600px, calc(100vw - 32px));
+		max-height: min(460px, calc(100vh - 120px));
 		display: flex;
 		flex-direction: column;
-		background: rgb(var(--salmex-window-surface));
-		border: 3px solid rgb(var(--salmex-border-dark));
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-lg);
 		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			8px 8px 0 rgb(0 0 0 / 0.4);
-		font-family: var(--salmex-font-system);
+			var(--sx-shadow-xl),
+			0 0 0 1px rgba(255, 255, 255, 0.04),
+			0 0 60px rgba(0, 0, 0, 0.5);
+		font-family: var(--sx-font-body);
 		overflow: hidden;
+		animation: sx-cmd-panel-in 200ms var(--sx-ease-out) both;
 	}
 
-	:global([data-theme='dark']) .salmex-cmd {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			8px 8px 0 rgb(0 0 0 / 0.7);
+	.sx-command-exit {
+		animation: sx-cmd-panel-out 120ms ease-in both;
+	}
+
+	@keyframes sx-cmd-panel-in {
+		from {
+			opacity: 0;
+			transform: translateX(-50%) translateY(-8px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0) scale(1);
+		}
+	}
+
+	@keyframes sx-cmd-panel-out {
+		from {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0) scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: translateX(-50%) translateY(4px) scale(0.98);
+		}
 	}
 
 	/* ========================================
-	   SEARCH FIELD — Sunken, prominent
+	   SEARCH FIELD
 	   ======================================== */
-	.salmex-cmd-search {
+	.sx-command-search {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-3);
-		padding: var(--salmex-space-4) var(--salmex-space-5);
-		border-bottom: 1px solid rgb(var(--salmex-border-default));
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-4) var(--sx-space-5);
+		border-bottom: 1px solid var(--sx-color-border);
 	}
 
-	.salmex-cmd-search-icon {
+	.sx-command-search-icon {
 		flex-shrink: 0;
 		display: flex;
-		color: rgb(var(--salmex-text-secondary));
+		color: var(--sx-color-cyan);
+		opacity: 0.7;
 	}
 
-	.salmex-cmd-input {
+	.sx-command-input {
 		flex: 1;
+		min-width: 0;
 		border: none;
 		background: transparent;
 		outline: none;
-		font-family: var(--salmex-font-system);
-		font-size: var(--salmex-font-size-md);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-primary));
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-base);
+		font-weight: 400;
+		color: var(--sx-color-text);
+		padding: 0;
+		line-height: 1.5;
+	}
+
+	.sx-command-input:focus-visible {
+		box-shadow: none;
+		outline: none;
 	}
 
-	.salmex-cmd-input::placeholder {
-		color: rgb(var(--salmex-text-disabled));
+	.sx-command-input::placeholder {
+		color: var(--sx-color-text-disabled);
 	}
 
-	.salmex-cmd-shortcut-hint {
+	.sx-command-esc {
 		flex-shrink: 0;
-		font-family: var(--salmex-font-mono);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 700;
-		padding: 2px 6px;
-		border: 2px solid rgb(var(--salmex-border-default));
-		background: rgb(var(--salmex-button-face));
-		color: rgb(var(--salmex-text-secondary));
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow));
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		padding: var(--sx-space-0-5) var(--sx-space-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-sm);
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text-disabled);
+		line-height: 1.4;
 	}
 
 	/* ========================================
 	   RESULTS LIST
 	   ======================================== */
-	.salmex-cmd-results {
+	.sx-command-results {
 		flex: 1;
 		overflow-y: auto;
-		padding: var(--salmex-space-1) 0;
-		max-height: 300px;
+		overscroll-behavior: contain;
+		padding: var(--sx-space-2) 0;
+		max-height: 320px;
+		scroll-behavior: smooth;
+	}
+
+	.sx-command-results::-webkit-scrollbar {
+		width: 4px;
 	}
 
-	.salmex-cmd-empty {
-		padding: var(--salmex-space-6) var(--salmex-space-5);
+	.sx-command-results::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.sx-command-results::-webkit-scrollbar-thumb {
+		background: var(--sx-color-border-strong);
+		border-radius: 2px;
+	}
+
+	.sx-command-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-8) var(--sx-space-5);
 		text-align: center;
-		font-size: var(--salmex-font-size-sm);
-		color: rgb(var(--salmex-text-disabled));
-		font-weight: 600;
+	}
+
+	.sx-command-empty-icon {
+		color: var(--sx-color-text-disabled);
+		opacity: 0.5;
+	}
+
+	.sx-command-empty-text {
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-disabled);
+		font-weight: 400;
+	}
+
+	.sx-command-empty-text strong {
+		color: var(--sx-color-text-secondary);
+		font-weight: 500;
 	}
 
 	/* ========================================
 	   GROUP LABEL
 	   ======================================== */
-	.salmex-cmd-group-label {
-		padding: var(--salmex-space-2) var(--salmex-space-5) var(--salmex-space-1);
-		margin-top: var(--salmex-space-1);
-		font-family: var(--salmex-font-mono);
-		font-size: 10px;
+	.sx-command-group-label {
+		padding: var(--sx-space-3) var(--sx-space-5) var(--sx-space-1);
+		margin-top: var(--sx-space-1);
+		font-size: var(--sx-text-xs);
 		font-weight: 600;
+		letter-spacing: var(--sx-tracking-wider);
 		text-transform: uppercase;
-		letter-spacing: 0.8px;
-		color: rgb(var(--salmex-text-disabled));
-		border-top: 1px solid rgb(var(--salmex-border-light));
+		color: var(--sx-color-text-disabled);
 		user-select: none;
 	}
 
-	.salmex-cmd-group-label:first-child {
-		border-top: none;
+	.sx-command-group-label:first-child {
 		margin-top: 0;
 	}
 
 	/* ========================================
 	   COMMAND ITEM
 	   ======================================== */
-	.salmex-cmd-item {
+	.sx-command-item {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-3);
-		padding: var(--salmex-space-2) var(--salmex-space-5);
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-2-5) var(--sx-space-5);
 		cursor: pointer;
 		user-select: none;
-		transition: background var(--salmex-transition-fast);
+		color: var(--sx-color-text-secondary);
+		border-left: 2px solid transparent;
+		transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
 	}
 
-	.salmex-cmd-item-active {
-		background: rgb(var(--salmex-electric-blue));
-		color: rgb(var(--salmex-chalk-white));
+	.sx-command-item-active {
+		background: var(--sx-color-cyan-hover);
+		color: var(--sx-color-text);
+		border-left-color: var(--sx-color-cyan);
 	}
 
-	:global([data-theme='dark']) .salmex-cmd-item-active {
-		background: rgb(var(--salmex-primary-light));
-		color: rgb(var(--salmex-midnight-black));
+	.sx-command-item:active:not(.sx-command-item-disabled) {
+		background: var(--sx-color-cyan-active);
 	}
 
-	.salmex-cmd-item-disabled {
+	.sx-command-item-disabled {
 		opacity: 0.4;
 		cursor: not-allowed;
 	}
 
-	.salmex-cmd-item-icon {
+	.sx-command-item-icon {
 		flex-shrink: 0;
 		width: 20px;
-		text-align: center;
-		font-size: 16px;
+		height: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-command-item-active .sx-command-item-icon {
+		color: var(--sx-color-cyan);
 	}
 
-	.salmex-cmd-item-content {
+	.sx-command-item-content {
 		flex: 1;
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
+		gap: 1px;
 	}
 
-	.salmex-cmd-item-label {
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 700;
+	.sx-command-item-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		line-height: 1.4;
 	}
 
-	.salmex-cmd-item-desc {
-		font-size: var(--salmex-font-size-xs);
-		opacity: 0.7;
+	.sx-command-item-active .sx-command-item-label {
+		font-weight: 600;
+	}
+
+	/* Match highlighting */
+	.sx-command-match {
+		background: none;
+		color: var(--sx-color-cyan);
+		font-weight: 700;
+	}
+
+	.sx-command-item-active .sx-command-match {
+		color: var(--sx-color-cyan);
+	}
+
+	.sx-command-item-desc {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-disabled);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		line-height: 1.3;
 	}
 
-	.salmex-cmd-item-active .salmex-cmd-item-desc {
-		opacity: 0.85;
+	.sx-command-item-active .sx-command-item-desc {
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-cmd-item-shortcut {
+	.sx-command-item-shortcut {
 		flex-shrink: 0;
-		font-family: var(--salmex-font-mono);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 600;
-		opacity: 0.6;
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		padding: var(--sx-space-0-5) var(--sx-space-2);
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border);
+		border-radius: var(--sx-radius-sm);
+		color: var(--sx-color-text-disabled);
+		line-height: 1.3;
 	}
 
-	.salmex-cmd-item-active .salmex-cmd-item-shortcut {
-		opacity: 0.85;
+	.sx-command-item-active .sx-command-item-shortcut {
+		background: var(--sx-color-surface-3);
+		border-color: var(--sx-color-border-strong);
+		color: var(--sx-color-text-secondary);
 	}
 
 	/* ========================================
 	   FOOTER
 	   ======================================== */
-	.salmex-cmd-footer {
+	.sx-command-footer {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-5);
-		padding: var(--salmex-space-2) var(--salmex-space-5);
-		border-top: 1px solid rgb(var(--salmex-border-default));
-		font-size: var(--salmex-font-size-xs);
-		color: rgb(var(--salmex-text-secondary));
-		background: rgb(var(--salmex-window-surface));
+		gap: var(--sx-space-5);
+		padding: var(--sx-space-2-5) var(--sx-space-5);
+		border-top: 1px solid var(--sx-color-border);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-disabled);
+		background: var(--sx-color-surface-2);
+		border-radius: 0 0 var(--sx-radius-lg) var(--sx-radius-lg);
 	}
 
-	.salmex-cmd-footer kbd {
-		font-family: var(--salmex-font-mono);
-		font-weight: 700;
-		padding: 1px 4px;
-		border: 1px solid rgb(var(--salmex-border-default));
-		background: rgb(var(--salmex-button-face));
+	.sx-command-footer-hint {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+	}
+
+	.sx-command-footer kbd {
+		font-family: var(--sx-font-mono);
+		font-weight: 600;
+		padding: 1px var(--sx-space-1);
+		border-radius: var(--sx-radius-sm);
+		background: var(--sx-color-surface-3);
+		border: 1px solid var(--sx-color-border);
 		font-size: 0.9em;
+		color: var(--sx-color-text-disabled);
+		line-height: 1.3;
+	}
+
+	.sx-command-footer-count {
+		margin-left: auto;
+		font-family: var(--sx-font-mono);
+		font-weight: 500;
+	}
+
+	/* ========================================
+	   SCREEN READER ONLY
+	   ======================================== */
+	.sx-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
 	}
 
 	/* ========================================
 	   REDUCED MOTION
 	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-cmd-item {
+		.sx-command,
+		.sx-command-exit,
+		.sx-command-backdrop,
+		.sx-command-backdrop-exit {
+			animation: none;
+		}
+
+		.sx-command-item {
 			transition: none;
 		}
 	}