@salmexio/ui 0.2.0 → 0.3.0

package/dist/navigation/CommandPalette/CommandPalette.svelte

@@ -0,0 +1,574 @@
+<!--
+  @component CommandPalette
+
+  Win2K × Basquiat — Keyboard-first command launcher with sunken search field,
+  categorised result list, fuzzy matching, and shortcut display.
+
+  @example
+  <CommandPalette
+    commands={[
+      { id: 'save', label: 'Save File', shortcut: 'Ctrl+S', group: 'File', action: handleSave },
+      { id: 'open', label: 'Open File', shortcut: 'Ctrl+O', group: 'File', action: handleOpen },
+    ]}
+    bind:open={showPalette}
+  />
+-->
+<script lang="ts" module>
+export interface CommandItem {
+	id: string;
+	label: string;
+	shortcut?: string;
+	group?: string;
+	icon?: string;
+	description?: string;
+	disabled?: boolean;
+	action: () => void;
+}
+
+export interface CommandGroup {
+	label: string;
+	items: CommandItem[];
+}
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys, createFocusTrap } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+import type { FocusTrap } from '../../utils/keyboard.js';
+
+interface Props {
+	/** All available commands */
+	commands: CommandItem[];
+	/** Whether the palette is open */
+	open?: boolean;
+	/** Placeholder for the search field */
+	placeholder?: string;
+	/** Additional CSS class */
+	class?: string;
+	/** Called when palette closes */
+	onclose?: () => void;
+	/** Test ID */
+	testId?: string;
+}
+
+let {
+	commands,
+	open = $bindable(false),
+	placeholder = 'Type a command...',
+	class: className = '',
+	onclose,
+	testId
+}: Props = $props();
+
+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;
+
+// Fuzzy match: check if query chars appear in order in the label
+function fuzzyMatch(text: string, search: string): boolean {
+	if (!search) return true;
+	const lower = text.toLowerCase();
+	const searchLower = search.toLowerCase();
+	let si = 0;
+	for (let ti = 0; ti < lower.length && si < searchLower.length; ti++) {
+		if (lower[ti] === searchLower[si]) si++;
+	}
+	return si === searchLower.length;
+}
+
+// Score: prefer starts-with and 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;
+	score -= text.length;
+	return score;
+}
+
+const filteredCommands = $derived<CommandItem[]>(
+	commands
+		.filter((c) => fuzzyMatch(c.label, query) || (c.description && fuzzyMatch(c.description, query)))
+		.sort((a, b) => fuzzyScore(b.label, query) - fuzzyScore(a.label, query))
+);
+
+// Group filtered results
+const groupedResults = $derived.by(() => {
+	const groups = new Map<string, CommandItem[]>();
+	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[];
+});
+
+// Flat list for keyboard navigation
+const flatFiltered = $derived(filteredCommands);
+
+function openPalette() {
+	open = true;
+	query = '';
+	activeIndex = 0;
+	requestAnimationFrame(() => {
+		inputEl?.focus();
+		if (panelEl) {
+			focusTrap = createFocusTrap(panelEl);
+			focusTrap.activate();
+		}
+	});
+}
+
+function closePalette() {
+	open = false;
+	query = '';
+	activeIndex = 0;
+	focusTrap?.deactivate();
+	focusTrap = null;
+	onclose?.();
+}
+
+function executeItem(item: CommandItem) {
+	if (item.disabled) return;
+	closePalette();
+	item.action();
+}
+
+function scrollActiveIntoView() {
+	requestAnimationFrame(() => {
+		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;
+		}
+	});
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			activeIndex = Math.min(activeIndex + 1, flatFiltered.length - 1);
+			scrollActiveIntoView();
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			activeIndex = Math.max(activeIndex - 1, 0);
+			scrollActiveIntoView();
+			break;
+		case Keys.Enter:
+			e.preventDefault();
+			if (flatFiltered[activeIndex]) executeItem(flatFiltered[activeIndex]);
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			closePalette();
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			activeIndex = 0;
+			scrollActiveIntoView();
+			break;
+		case Keys.End:
+			e.preventDefault();
+			activeIndex = Math.max(flatFiltered.length - 1, 0);
+			scrollActiveIntoView();
+			break;
+	}
+}
+
+function handleInput() {
+	activeIndex = 0;
+}
+
+function handleBackdropClick() {
+	closePalette();
+}
+
+// Watch for external open changes
+$effect(() => {
+	if (open) openPalette();
+});
+
+// Portal: move wrapper to document.body to escape transform/overflow ancestors
+$effect(() => {
+	if (wrapperEl && open) {
+		document.body.appendChild(wrapperEl);
+		return () => {
+			if (wrapperEl?.parentNode === document.body) {
+				document.body.removeChild(wrapperEl);
+			}
+		};
+	}
+});
+
+// Global keyboard shortcut: Ctrl+K / Cmd+K
+onMount(() => {
+	function onGlobalKey(e: KeyboardEvent) {
+		if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+			e.preventDefault();
+			if (open) closePalette();
+			else openPalette();
+		}
+	}
+	document.addEventListener('keydown', onGlobalKey);
+	return () => {
+		document.removeEventListener('keydown', onGlobalKey);
+		focusTrap?.deactivate();
+	};
+});
+
+// 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++) {
+		offset += groupedResults[g].items.length;
+	}
+	return offset + itemIdx;
+}
+</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>
+
+	<!-- Panel -->
+	<div
+		bind:this={panelEl}
+		class={cn('salmex-cmd', className)}
+		role="dialog"
+		tabindex="-1"
+		aria-label="Command palette"
+		data-testid={testId}
+		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">
+					<circle cx="6.5" cy="6.5" r="5" />
+					<path d="M10 10L14.5 14.5" />
+				</svg>
+			</span>
+			<input
+				bind:this={inputEl}
+				type="text"
+				class="salmex-cmd-input"
+				{placeholder}
+				bind:value={query}
+				oninput={handleInput}
+				aria-label="Search commands"
+				aria-controls="cmd-results"
+				aria-activedescendant={flatFiltered[activeIndex] ? `cmd-item-${flatFiltered[activeIndex].id}` : undefined}
+				autocomplete="off"
+				spellcheck="false"
+			/>
+			<span class="salmex-cmd-shortcut-hint" aria-hidden="true">ESC</span>
+		</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>
+			{:else}
+				{#each groupedResults as group, gi}
+					{#if group.label}
+						<div class="salmex-cmd-group-label">{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}"
+							class={cn(
+								'salmex-cmd-item',
+								isActive && 'salmex-cmd-item-active',
+								item.disabled && 'salmex-cmd-item-disabled'
+							)}
+							role="option"
+							tabindex="-1"
+							aria-selected={isActive}
+							aria-disabled={item.disabled || undefined}
+							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>
+							{/if}
+							<div class="salmex-cmd-item-content">
+								<span class="salmex-cmd-item-label">{item.label}</span>
+								{#if item.description}
+									<span class="salmex-cmd-item-desc">{item.description}</span>
+								{/if}
+							</div>
+							{#if item.shortcut}
+								<span class="salmex-cmd-item-shortcut">{item.shortcut}</span>
+							{/if}
+						</div>
+					{/each}
+				{/each}
+			{/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>
+		</div>
+	</div>
+</div>
+{/if}
+
+<style>
+	/* ========================================
+	   BACKDROP
+	   ======================================== */
+	.salmex-cmd-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: var(--salmex-z-modal-backdrop);
+		background: rgb(0 0 0 / 0.4);
+	}
+
+	/* ========================================
+	   PANEL
+	   ======================================== */
+	.salmex-cmd {
+		position: fixed;
+		top: 20%;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: var(--salmex-z-modal);
+		width: min(560px, calc(100vw - 32px));
+		max-height: 420px;
+		display: flex;
+		flex-direction: column;
+		background: rgb(var(--salmex-window-surface));
+		border: 3px solid rgb(var(--salmex-border-dark));
+		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);
+		overflow: hidden;
+	}
+
+	: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);
+	}
+
+	/* ========================================
+	   SEARCH FIELD — Sunken, prominent
+	   ======================================== */
+	.salmex-cmd-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));
+	}
+
+	.salmex-cmd-search-icon {
+		flex-shrink: 0;
+		display: flex;
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-cmd-input {
+		flex: 1;
+		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));
+	}
+
+	.salmex-cmd-input::placeholder {
+		color: rgb(var(--salmex-text-disabled));
+	}
+
+	.salmex-cmd-shortcut-hint {
+		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));
+	}
+
+	/* ========================================
+	   RESULTS LIST
+	   ======================================== */
+	.salmex-cmd-results {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--salmex-space-1) 0;
+		max-height: 300px;
+	}
+
+	.salmex-cmd-empty {
+		padding: var(--salmex-space-6) var(--salmex-space-5);
+		text-align: center;
+		font-size: var(--salmex-font-size-sm);
+		color: rgb(var(--salmex-text-disabled));
+		font-weight: 600;
+	}
+
+	/* ========================================
+	   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;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.8px;
+		color: rgb(var(--salmex-text-disabled));
+		border-top: 1px solid rgb(var(--salmex-border-light));
+		user-select: none;
+	}
+
+	.salmex-cmd-group-label:first-child {
+		border-top: none;
+		margin-top: 0;
+	}
+
+	/* ========================================
+	   COMMAND ITEM
+	   ======================================== */
+	.salmex-cmd-item {
+		display: flex;
+		align-items: center;
+		gap: var(--salmex-space-3);
+		padding: var(--salmex-space-2) var(--salmex-space-5);
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--salmex-transition-fast);
+	}
+
+	.salmex-cmd-item-active {
+		background: rgb(var(--salmex-electric-blue));
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	:global([data-theme='dark']) .salmex-cmd-item-active {
+		background: rgb(var(--salmex-primary-light));
+		color: rgb(var(--salmex-midnight-black));
+	}
+
+	.salmex-cmd-item-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.salmex-cmd-item-icon {
+		flex-shrink: 0;
+		width: 20px;
+		text-align: center;
+		font-size: 16px;
+	}
+
+	.salmex-cmd-item-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.salmex-cmd-item-label {
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.salmex-cmd-item-desc {
+		font-size: var(--salmex-font-size-xs);
+		opacity: 0.7;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.salmex-cmd-item-active .salmex-cmd-item-desc {
+		opacity: 0.85;
+	}
+
+	.salmex-cmd-item-shortcut {
+		flex-shrink: 0;
+		font-family: var(--salmex-font-mono);
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 600;
+		opacity: 0.6;
+	}
+
+	.salmex-cmd-item-active .salmex-cmd-item-shortcut {
+		opacity: 0.85;
+	}
+
+	/* ========================================
+	   FOOTER
+	   ======================================== */
+	.salmex-cmd-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));
+	}
+
+	.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));
+		font-size: 0.9em;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-cmd-item {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,47 @@
+export interface CommandItem {
+    id: string;
+    label: string;
+    shortcut?: string;
+    group?: string;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+    action: () => void;
+}
+export interface CommandGroup {
+    label: string;
+    items: CommandItem[];
+}
+interface Props {
+    /** All available commands */
+    commands: CommandItem[];
+    /** Whether the palette is open */
+    open?: boolean;
+    /** Placeholder for the search field */
+    placeholder?: string;
+    /** Additional CSS class */
+    class?: string;
+    /** Called when palette closes */
+    onclose?: () => void;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * CommandPalette
+ *
+ * Win2K × Basquiat — Keyboard-first command launcher with sunken search field,
+ * categorised result list, fuzzy matching, and shortcut display.
+ *
+ * @example
+ * <CommandPalette
+ *   commands={[
+ *     { id: 'save', label: 'Save File', shortcut: 'Ctrl+S', group: 'File', action: handleSave },
+ *     { id: 'open', label: 'Open File', shortcut: 'Ctrl+O', group: 'File', action: handleOpen },
+ *   ]}
+ *   bind:open={showPalette}
+ * />
+ */
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;
+//# sourceMappingURL=CommandPalette.svelte.d.ts.map

package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/CommandPalette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACrB;AASD,UAAU,KAAK;IACd,6BAA6B;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAgRD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,cAAc,+CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/navigation/CommandPalette/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandItem, CommandGroup } from './CommandPalette.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/CommandPalette/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/CommandPalette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/navigation/CommandPalette/index.js

@@ -0,0 +1 @@
+export { default as CommandPalette } from './CommandPalette.svelte';

package/dist/navigation/index.d.ts

@@ -1,3 +1,5 @@
 export { Tabs } from './Tabs/index.js';
 export type { TabOption } from './Tabs/index.js';
+export { CommandPalette } from './CommandPalette/index.js';
+export type { CommandItem, CommandGroup } from './CommandPalette/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/navigation/index.js

@@ -1 +1,2 @@
 export { Tabs } from './Tabs/index.js';
+export { CommandPalette } from './CommandPalette/index.js';