svelte-fluentui 1.4.0 → 1.5.0-rc01

package/README.md

@@ -2,17 +2,22 @@
 
 A comprehensive Svelte wrapper library for Microsoft FluentUI web components (v2.6.x), providing a seamless way to use FluentUI components in Svelte applications.
 
-## What's New in v1.4.0
+## What's New in v1.5.0-rc01
 
-- **`MultiSplitter` — full rewrite as a Svelte 5 port of pureadmin.io's `pa-splitter`** — The old wrapper was a near-empty shell; the new component (`src/lib/components/layout/MultiSplitter.svelte` + `MultiSplitterPane.svelte`) is a real N-pane resizable container with drag-to-resize using a REBALANCE model (CLASSIC + TUNNEL absorbers so slack can punch through a rail wall), minimize-to-rail via the `minimize` prop with a configurable snap threshold, full keyboard nav + ARIA on the gutter, `localStorage` persistence via the `id` prop, and auto-accordion mode when the container can't fit all panes' mins. Drag math is rAF-throttled with a 2px jitter floor; pane Cards auto-adapt to railed state with the first child becoming a rotated rail title in horizontal orientation. Three callbacks (`onresize`, `oncollapse`, `onexpand`) and full type exports (`MultiSplitterResizeDetail`, `MultiSplitterToggleDetail`).
-- **`MultiSplitter` — gutter drag against a railed pane is a one-way valve: inward inert, outward expands** — Earlier iterations either flipped the rail open instantly on `pointerdown` (the user saw the card "expand" just from pressing the gutter) or refused to expand from any drag at all. Final behaviour: inward drag (toward the rail) bails before reaching the drag math so the gutter doesn't move; outward drag past 2px releases the rail, fires `onexpand`, and grows the pane following the cursor with the rail floor clamping until `primary.min` is reached. Dblclick and rail-body click stay as alternative expand gestures. The result matches what users actually expect from a collapsed pane — you can pull it open but you can't accidentally crush it further.
-- **`Select` — encapsulated in a single render root via `display: contents`** — The component renders 2-4 sibling elements at root depending on mode (label + hidden source mirror + trigger + optional hidden form input in single mode; label + inline listbox in multi mode). That meant a consumer dropping `<Select>` into a flex or grid had to reason about the internal sibling structure to align it. Wrapped everything in `<div class="select-root">` with `display: contents` so the wrapper is invisible to flex/grid layout (children still participate as direct items of the consumer's container), but the component now reads as a single logical root from the outside. Zero behaviour change for existing layout code.
+- **`CommandPalette` — a generic, app-ready command palette is now a published component** — The Spotlight-style palette that previously lived only inside this repo's docs is now exported from `svelte-fluentui` and reshaped for real apps. It dropped its hard dependency on SvelteKit's `goto`: navigation items render as real `<a>` elements so whatever router your app uses handles the click, which makes the component framework-agnostic. Items are either navigation (`href`) or actions (`onSelect`) and can carry an `icon`, a `meta` line, a `badge`, a `shortcut` hint, a `group`, and search-only `keywords`. You get layered fuzzy scoring (exact > prefix > substring > subsequence) with match highlighting, a grouped idle screen, `bind:open` control, and a configurable global `mod+k` shortcut out of the box — plus escape hatches (a custom `filter` prop and `item`/`empty`/`footer` snippets) when you need full control. See the new `/components/command-palette` demo.
+- **`CommandPaletteTrigger` — a drop-in search pill to open the palette** — A small presentational trigger that looks like a search input but acts as a button: search icon, placeholder, and a platform-aware keyboard hint (⌘K on Mac, Ctrl K elsewhere). It ships `small` / `medium` / `large` sizes and collapses to icon-only on narrow screens. Wire its `onclick` to your palette's `bind:open` state and you have the familiar "click the search box or press the shortcut" pattern with no custom markup.
 
-## What's New in v1.3.3
+## What's New in v1.4.1
 
-- **Custom-element attribute bindings stop stringifying `undefined` / `null` / `false`** — Recurring regression (last fixed ~5 months ago, reintroduced during the structural rework) that affected 22 wrappers including `TextField`, `Textarea`, `Switch`, `Slider`, `Checkbox`, `Button`, `Anchor`, `Accordion(Item)`, `BreadcrumbItem`, `DataGrid(Row/Cell)`, `Dialog`, `Listbox`, `MenuButton`, `Option`, `TabPanel`, `Toolbar`, `NumberField`, `Combobox`, plus `Paginator` and `QuickGrid` sub-buttons. Svelte 5 sets properties on custom elements rather than attributes, and FAST's `@attr` decorators stringify whatever they receive — so unset props were rendering as `title="undefined"`, `readonly="false"`, `disabled="false"`, etc. The `readonly`/`disabled` cases were the worst symptom because `[readonly]` and `[disabled]` CSS attribute-presence selectors match regardless of value, leaving an enabled field with a not-allowed cursor. All affected wrappers converted to the conditional-spread pattern (`{...(title ? { title } : {})}`) which physically omits the attribute from the template when unset. Variants `{...(value != null ? { value } : {})}` for inputs (so `value=""` still renders) and `{...(attr !== undefined ? { attr } : {})}` for numeric props (so `0` survives) are used where falsy values are meaningful.
+- **`MultiSplitter` — splitters mounted inside hidden tab panels now render at proper widths on first reveal** — When a splitter mounted inside an inactive `<Tab>` (or any `display: none` parent), `clientWidth` was 0 at construction time, so the previous code assigned `flex-basis: 0px` to every pane and the `ResizeObserver` then short-circuited the first reveal — leaving panes smashed at 0 width with no path back to their declared `min` / `size`. The fix splits init into two phases: `scheduleInit` always installs the observer immediately (even when hidden), and `applyInitialSizes` defers its work until `totalAvailable() > 0`. The observer's callback runs the deferred init on the first 0 → non-zero transition via a new `!initApplied` branch. Bonus: hide-then-show cycles now preserve sizes instead of zeroing them via the destructive `clampToConstraints(0, ...)` path, and a reveal-after-resize-while-hidden falls through to the existing scale path so panes re-scale proportionally to the new container width. Demo added under "Inside tabs (deferred initial sizing)".
 
-- **`TextField` demo page — new Readonly and Disabled example sections** — The `/components/forms/text-field` showcase previously demonstrated only the basic input and `autocomplete` variants; the readonly and disabled states (the surface that exposed the bug above) had no live example. Added Readonly with outline + filled variants and Disabled with three variants (outline + placeholder, outline + value, filled + value).
+- **`TopNav` — the pinned desktop drawer no longer collapses on every link click** — `closeMobileMenu` was unconditionally writing `mobileMenuOpen = false`, so the documented pattern of wiring `onClick={closeDrawer}` on every `NavLinkItem` (needed for the mobile overlay to dismiss on tap) accidentally closed the pinned desktop rail too. The sync `$effect` only re-ran when `drawerPinned` itself changed, so once collapsed the rail stayed collapsed until the consumer toggled the prop. Added an early-return guard in `closeMobileMenu` — it's now a no-op when `drawerPinned` is true, matching the documented contract. Mobile overlay behaviour is unchanged.
+
+- **`CommandPalette` — keyboard-shortcut chips in the footer are legible again** — The `.cp-footer` rule set `color: var(--neutral-foreground-hint)` for the "navigate" / "open" / "toggle" labels (reads fine on the panel background), but `.cp-footer kbd` carries its own opaque `--neutral-layer-2` background for the boxed-key look — so the hint color cascaded into the kbd boxes, giving #888 text on #f5f5f5 at 0.7 rem and the arrow / Ctrl / K glyphs effectively vanished. Added explicit `color: var(--neutral-foreground-rest)` on `.cp-footer kbd` so the kbd contents resolve against full foreground-on-layer-2 contrast.
+
+- **Security — npm audit cleaned up, 8 of 9 advisories resolved** — Dev/build dependency chain refreshed: `ws`, `devalue`, `vite`, `postcss`, `qs`, `brace-expansion`, `svelte`, `@sveltejs/kit`, and the nested `cookie` chain all bumped past their respective advisories (3 high, 5 moderate, plus the cookie chain). Only `esbuild` 0.27.x's Windows dev-server file-read low remains, deferred because 0.28.x mis-emits output in this project's pipeline. All resolved packages are devDeps in `svelte-fluentui` — consumers don't get runtime changes, but anyone building from source no longer trips the audit gate.
+
+- **Build pipeline — `vitePreprocess({ script: true })` restored in `docs/svelte.config.js`** — Newer `@sveltejs/vite-plugin-svelte` made `vitePreprocess()` skip TypeScript by default; Svelte 5's native parser handles most TS but tripped on curried arrow functions with typed optional params + return-type annotation and let raw `?.` / `??` operators through to the browser. Switching to `vitePreprocess({ script: true })` re-enables explicit script preprocessing. If you fork this repo or use the same config in your own project and see `SyntaxError: Unexpected token '?'` in the browser after a `@sveltejs/vite-plugin-svelte` bump — this is the fix.
 
 ## Features
 

package/dist/components/CommandPalette.svelte

@@ -0,0 +1,597 @@
+<script lang="ts">
+	import {onMount, tick} from "svelte"
+	import Icon from "./Icon.svelte"
+	import {portal} from "../actions/portal.js"
+	import type {SlotType} from "../types/index.js"
+	import type {CommandPaletteItem, CommandPaletteFilter} from "./CommandPalette.types.js"
+
+	type Props = {
+		/** Items to search. Each is either navigation (`href`) or an action (`onSelect`). */
+		items: CommandPaletteItem[]
+		/** Controlled open state. Bind it to drive the palette from your own trigger. */
+		open?: boolean
+		/** Input placeholder. */
+		placeholder?: string
+		/** Items shown on the idle screen (no query yet), grouped by `group`. Defaults to the first `maxResults` of `items`. */
+		homeItems?: CommandPaletteItem[]
+		/** Max results rendered for a query. */
+		maxResults?: number
+		/**
+		 * Global keyboard shortcut that toggles the palette, e.g. "mod+k"
+		 * (mod = ⌘ on Mac, Ctrl elsewhere). Set `enableShortcut={false}` to
+		 * disable the built-in listener and drive `open` yourself.
+		 */
+		shortcut?: string
+		/** Register the global `shortcut` listener. */
+		enableShortcut?: boolean
+		/** Close the palette after an item is selected. */
+		closeOnSelect?: boolean
+		/** Override the built-in fuzzy scorer with app-specific search. */
+		filter?: CommandPaletteFilter
+		/** Called with the selected item before navigation/action runs. */
+		onselect?: (item: CommandPaletteItem) => void
+		onopen?: () => void
+		onclose?: () => void
+		/** Replace a result row's rendering. Receives the item and whether it's the active row. */
+		item?: SlotType
+		/** Replace the empty-state body. Receives the current query. */
+		empty?: SlotType
+		/** Replace the footer hints. */
+		footer?: SlotType
+	}
+
+	let {
+		items,
+		open = $bindable(false),
+		placeholder = "Search…",
+		homeItems = undefined,
+		maxResults = 50,
+		shortcut = "mod+k",
+		enableShortcut = true,
+		closeOnSelect = true,
+		filter = undefined,
+		onselect = undefined,
+		onopen = undefined,
+		onclose = undefined,
+		item: itemSnippet = undefined,
+		empty: emptySnippet = undefined,
+		footer: footerSnippet = undefined
+	}: Props = $props()
+
+	let query = $state("")
+	let selectedIndex = $state(0)
+	let inputEl = $state<HTMLInputElement | undefined>(undefined)
+	let listEl = $state<HTMLDivElement | undefined>(undefined)
+
+	const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.platform)
+	const modKey = isMac ? "⌘" : "Ctrl"
+
+	// Parse "mod+k" once into the modifier/key contract the keydown handler checks.
+	const parsedShortcut = $derived.by(() => {
+		const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean)
+		return {
+			key: parts[parts.length - 1] ?? "",
+			mod: parts.includes("mod"),
+			ctrl: parts.includes("ctrl"),
+			meta: parts.includes("cmd") || parts.includes("meta"),
+			shift: parts.includes("shift"),
+			alt: parts.includes("alt")
+		}
+	})
+
+	// Score: higher = better match. 0 = no match. Layered so exact / prefix beat
+	// substring beat fuzzy-subsequence. Searches title, meta, group and keywords.
+	function score(it: CommandPaletteItem, needle: string): number {
+		const title = it.title.toLowerCase()
+		if (title === needle) return 1000
+		if (title.startsWith(needle)) return 500 - (title.length - needle.length)
+		const group = (it.group ?? "").toLowerCase()
+		if (group === needle) return 400
+		if (title.includes(needle)) return 300 - title.indexOf(needle)
+		if ((it.meta ?? "").toLowerCase().includes(needle)) return 200
+		if ((it.keywords ?? []).some((k) => k.toLowerCase().includes(needle))) return 150
+		if (group.includes(needle)) return 100
+		// Fuzzy: every character of needle must appear in title in order.
+		let i = 0
+		for (const c of title) {
+			if (c === needle[i]) i++
+			if (i === needle.length) return 20
+		}
+		return 0
+	}
+
+	const trimmedQuery = $derived(query.trim())
+
+	const results = $derived.by(() => {
+		const q = trimmedQuery
+		if (!q) return []
+		if (filter) return filter(items, q).slice(0, maxResults)
+		const needle = q.toLowerCase()
+		return items
+			.map((it) => ({it, s: score(it, needle)}))
+			.filter((r) => r.s > 0)
+			.sort((a, b) => b.s - a.s)
+			.slice(0, maxResults)
+			.map((r) => r.it)
+	})
+
+	// Idle screen: grouped sections preserving first-appearance order.
+	const homeSections = $derived.by(() => {
+		const source = (homeItems ?? items).slice(0, maxResults)
+		const order: string[] = []
+		const byGroup = new Map<string, CommandPaletteItem[]>()
+		for (const it of source) {
+			const g = it.group ?? ""
+			if (!byGroup.has(g)) {
+				byGroup.set(g, [])
+				order.push(g)
+			}
+			byGroup.get(g)!.push(it)
+		}
+		return order.map((g) => ({group: g, items: byGroup.get(g)!}))
+	})
+
+	// Flattened render list — section headers interleaved with rows — so a single
+	// running index drives both keyboard nav and the highlight. Headers carry no index.
+	type Row =
+		| {kind: "header"; label: string}
+		| {kind: "item"; item: CommandPaletteItem; index: number}
+
+	const rows = $derived.by(() => {
+		const out: Row[] = []
+		let index = 0
+		if (trimmedQuery) {
+			for (const it of results) out.push({kind: "item", item: it, index: index++})
+		} else {
+			for (const section of homeSections) {
+				if (section.group) out.push({kind: "header", label: section.group})
+				for (const it of section.items) out.push({kind: "item", item: it, index: index++})
+			}
+		}
+		return out
+	})
+
+	const itemCount = $derived(rows.filter((r) => r.kind === "item").length)
+
+	function itemKey(it: CommandPaletteItem): string {
+		return it.id ?? it.href ?? it.title
+	}
+
+	// Split a title around the first contiguous match of the query for <mark>
+	// highlighting. Subsequence (fuzzy) matches don't highlight — only the simple
+	// substring case, which is what users actually read.
+	function highlight(title: string): {text: string; mark: boolean}[] {
+		const q = trimmedQuery
+		if (!q) return [{text: title, mark: false}]
+		const i = title.toLowerCase().indexOf(q.toLowerCase())
+		if (i < 0) return [{text: title, mark: false}]
+		return [
+			{text: title.slice(0, i), mark: false},
+			{text: title.slice(i, i + q.length), mark: true},
+			{text: title.slice(i + q.length), mark: false}
+		].filter((s) => s.text.length > 0)
+	}
+
+	async function openPalette() {
+		open = true
+		query = ""
+		selectedIndex = 0
+		onopen?.()
+		await tick()
+		inputEl?.focus()
+	}
+
+	function closePalette() {
+		if (!open) return
+		open = false
+		onclose?.()
+	}
+
+	function selectItem(it: CommandPaletteItem) {
+		if (it.disabled) return
+		onselect?.(it)
+		if (closeOnSelect) closePalette()
+		// Actions run inline; navigation rows are real <a> elements, so a click
+		// (mouse or the synthetic Enter click below) lets the host router handle it.
+		it.onSelect?.()
+	}
+
+	// Enter activates the highlighted row by clicking its DOM node — works for both
+	// <button> actions and <a> navigation (router intercepts the anchor click).
+	function activateSelected() {
+		const el = listEl?.querySelector<HTMLElement>(`[data-idx="${selectedIndex}"]`)
+		el?.click()
+	}
+
+	function matchesShortcut(e: KeyboardEvent): boolean {
+		const s = parsedShortcut
+		if (!s.key || e.key.toLowerCase() !== s.key) return false
+		const wantCtrlOrMeta = s.mod || s.ctrl || s.meta
+		if (wantCtrlOrMeta && !(e.ctrlKey || e.metaKey)) return false
+		if (!wantCtrlOrMeta && (e.ctrlKey || e.metaKey)) return false
+		if (s.shift !== e.shiftKey) return false
+		if (s.alt !== e.altKey) return false
+		return true
+	}
+
+	// Reset highlighted row whenever the query changes.
+	$effect(() => {
+		query
+		selectedIndex = 0
+	})
+
+	// Keep highlighted row in view during keyboard nav.
+	$effect(() => {
+		if (!open || !listEl) return
+		const target = listEl.querySelector<HTMLElement>(`[data-idx="${selectedIndex}"]`)
+		target?.scrollIntoView({block: "nearest"})
+	})
+
+	function handleGlobalKey(e: KeyboardEvent) {
+		if (enableShortcut && matchesShortcut(e)) {
+			e.preventDefault()
+			if (open) closePalette()
+			else openPalette()
+			return
+		}
+
+		if (!open) return
+
+		if (e.key === "Escape") {
+			e.preventDefault()
+			closePalette()
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault()
+			selectedIndex = Math.min(selectedIndex + 1, Math.max(itemCount - 1, 0))
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault()
+			selectedIndex = Math.max(selectedIndex - 1, 0)
+		} else if (e.key === "Enter") {
+			e.preventDefault()
+			activateSelected()
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("keydown", handleGlobalKey)
+		return () => document.removeEventListener("keydown", handleGlobalKey)
+	})
+</script>
+
+{#snippet rowBody(it: CommandPaletteItem)}
+	{#if it.icon}
+		<span class="cp-item-icon"><Icon name={it.icon} size={20} /></span>
+	{/if}
+	<span class="cp-item-content">
+		<span class="cp-item-title">
+			{#each highlight(it.title) as seg}{#if seg.mark}<mark>{seg.text}</mark>{:else}{seg.text}{/if}{/each}
+		</span>
+		{#if it.meta}<span class="cp-item-meta">{it.meta}</span>{/if}
+	</span>
+	{#if trimmedQuery && it.group}
+		<span class="cp-item-group">{it.group}</span>
+	{/if}
+	{#if it.badge}
+		<span class="cp-item-badge">{it.badge}</span>
+	{/if}
+	{#if it.shortcut}
+		<span class="cp-item-shortcut">
+			{#each it.shortcut.split(" ") as key}<kbd>{key}</kbd>{/each}
+		</span>
+	{/if}
+{/snippet}
+
+{#if open}
+	<div use:portal class="cp-root">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div class="cp-backdrop" onclick={closePalette}></div>
+		<div
+			class="cp-panel"
+			role="dialog"
+			aria-modal="true"
+			aria-label="Command palette"
+		>
+			<div class="cp-search-row">
+				<svg class="cp-search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M7 1.75a5.25 5.25 0 1 0 3.215 9.4l3.067 3.068a.75.75 0 1 0 1.061-1.061l-3.066-3.066A5.25 5.25 0 0 0 7 1.75zM3.25 7a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0z" fill="currentColor"/>
+				</svg>
+				<input
+					bind:this={inputEl}
+					bind:value={query}
+					type="text"
+					class="cp-input"
+					{placeholder}
+					autocomplete="off"
+					spellcheck="false"
+				/>
+				<span class="cp-kbd-hint">esc to close</span>
+			</div>
+
+			<div class="cp-results" bind:this={listEl} role="listbox">
+				{#each rows as row (row.kind === "header" ? "h:" + row.label : itemKey(row.item) + ":" + row.index)}
+					{#if row.kind === "header"}
+						<div class="cp-section">{row.label}</div>
+					{:else if row.item.href && !row.item.onSelect}
+						<!-- Navigation row — real <a> so the host router handles the click. -->
+						<a
+							class="cp-item"
+							class:selected={row.index === selectedIndex}
+							class:disabled={row.item.disabled}
+							data-idx={row.index}
+							href={row.item.disabled ? undefined : row.item.href}
+							target={row.item.target ?? null}
+							rel={row.item.rel ?? null}
+							role="option"
+							aria-selected={row.index === selectedIndex}
+							onclick={() => selectItem(row.item)}
+							onmousemove={() => (selectedIndex = row.index)}
+						>
+							{#if itemSnippet}{@render itemSnippet(row.item, row.index === selectedIndex)}{:else}{@render rowBody(row.item)}{/if}
+						</a>
+					{:else}
+						<!-- Action row. -->
+						<button
+							type="button"
+							class="cp-item"
+							class:selected={row.index === selectedIndex}
+							data-idx={row.index}
+							disabled={row.item.disabled || undefined}
+							role="option"
+							aria-selected={row.index === selectedIndex}
+							onclick={() => selectItem(row.item)}
+							onmousemove={() => (selectedIndex = row.index)}
+						>
+							{#if itemSnippet}{@render itemSnippet(row.item, row.index === selectedIndex)}{:else}{@render rowBody(row.item)}{/if}
+						</button>
+					{/if}
+				{/each}
+
+				{#if itemCount === 0}
+					{#if emptySnippet}
+						{@render emptySnippet(trimmedQuery)}
+					{:else}
+						<div class="cp-empty">
+							{#if trimmedQuery}No matches for "{trimmedQuery}"{:else}No items{/if}
+						</div>
+					{/if}
+				{/if}
+			</div>
+
+			{#if footerSnippet}
+				{@render footerSnippet()}
+			{:else}
+				<div class="cp-footer">
+					<span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+					<span><kbd>↵</kbd> select</span>
+					<span><kbd>{modKey}</kbd><kbd>{parsedShortcut.key.toUpperCase()}</kbd> toggle</span>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.cp-root {
+		position: fixed;
+		inset: 0;
+		z-index: var(--fluent-z-modal, 1070);
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		padding-top: 12vh;
+	}
+
+	.cp-backdrop {
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+	}
+
+	.cp-panel {
+		position: relative;
+		width: min(640px, calc(100vw - 2rem));
+		max-height: 70vh;
+		display: flex;
+		flex-direction: column;
+		background: var(--neutral-layer-1, #ffffff);
+		border: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
+		border-radius: 8px;
+		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 2px rgba(0, 0, 0, 0.12);
+		overflow: hidden;
+		font-family: var(--body-font);
+	}
+
+	.cp-search-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
+	}
+
+	.cp-search-icon {
+		color: var(--neutral-foreground-hint, #666);
+		flex-shrink: 0;
+	}
+
+	.cp-input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: 1rem;
+		color: var(--neutral-foreground-rest, inherit);
+		font-family: inherit;
+	}
+
+	.cp-kbd-hint {
+		color: var(--neutral-foreground-hint, #888);
+		font-size: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.cp-results {
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.25rem;
+	}
+
+	.cp-section {
+		padding: 0.5rem 0.75rem 0.25rem;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--neutral-foreground-hint, #888);
+	}
+
+	.cp-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		cursor: pointer;
+		text-align: start;
+		text-decoration: none;
+		font: inherit;
+		color: var(--neutral-foreground-rest, inherit);
+	}
+
+	.cp-item.selected {
+		background: var(--accent-fill-rest, #0078d4);
+		color: var(--neutral-foreground-on-accent, #ffffff);
+	}
+
+	.cp-item.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.cp-item-icon {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		color: var(--accent-fill-rest);
+	}
+
+	.cp-item.selected .cp-item-icon {
+		color: inherit;
+	}
+
+	.cp-item-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.0625rem;
+	}
+
+	.cp-item-title {
+		font-size: 0.9375rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.cp-item-title :global(mark) {
+		background: transparent;
+		color: var(--accent-fill-rest, #0078d4);
+		font-weight: 700;
+	}
+
+	.cp-item.selected .cp-item-title :global(mark) {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	.cp-item-meta {
+		font-size: 0.75rem;
+		color: var(--neutral-foreground-hint, #888);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.cp-item.selected .cp-item-meta {
+		color: inherit;
+		opacity: 0.85;
+	}
+
+	.cp-item-group {
+		flex-shrink: 0;
+		font-size: 0.75rem;
+		opacity: 0.8;
+		padding: 0.125rem 0.5rem;
+		border-radius: 999px;
+		background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.06));
+	}
+
+	.cp-item.selected .cp-item-group {
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.cp-item-badge {
+		flex-shrink: 0;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		padding: 0.125rem 0.5rem;
+		border-radius: 4px;
+		background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.06));
+		color: var(--neutral-foreground-rest);
+	}
+
+	.cp-item.selected .cp-item-badge {
+		background: rgba(255, 255, 255, 0.2);
+		color: inherit;
+	}
+
+	.cp-item-shortcut {
+		display: inline-flex;
+		gap: 0.15rem;
+		flex-shrink: 0;
+	}
+
+	.cp-empty {
+		padding: 1.5rem 1rem;
+		text-align: center;
+		color: var(--neutral-foreground-hint, #888);
+		font-size: 0.875rem;
+	}
+
+	.cp-footer {
+		display: flex;
+		gap: 1rem;
+		padding: 0.5rem 1rem;
+		border-top: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
+		font-size: 0.75rem;
+		color: var(--neutral-foreground-hint, #888);
+	}
+
+	.cp-footer kbd,
+	.cp-item-shortcut kbd {
+		display: inline-block;
+		padding: 0.05rem 0.35rem;
+		border: 1px solid var(--neutral-stroke-layer-rest, #ccc);
+		border-radius: 3px;
+		background: var(--neutral-layer-2, #f5f5f5);
+		color: var(--neutral-foreground-rest, #222);
+		font-family: inherit;
+		font-size: 0.7rem;
+		margin: 0 0.15rem 0 0;
+		min-width: 1rem;
+		text-align: center;
+	}
+
+	.cp-item.selected .cp-item-shortcut kbd {
+		background: rgba(255, 255, 255, 0.2);
+		border-color: rgba(255, 255, 255, 0.3);
+		color: inherit;
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { SlotType } from "../types/index.js";
+import type { CommandPaletteItem, CommandPaletteFilter } from "./CommandPalette.types.js";
+type Props = {
+    /** Items to search. Each is either navigation (`href`) or an action (`onSelect`). */
+    items: CommandPaletteItem[];
+    /** Controlled open state. Bind it to drive the palette from your own trigger. */
+    open?: boolean;
+    /** Input placeholder. */
+    placeholder?: string;
+    /** Items shown on the idle screen (no query yet), grouped by `group`. Defaults to the first `maxResults` of `items`. */
+    homeItems?: CommandPaletteItem[];
+    /** Max results rendered for a query. */
+    maxResults?: number;
+    /**
+     * Global keyboard shortcut that toggles the palette, e.g. "mod+k"
+     * (mod = ⌘ on Mac, Ctrl elsewhere). Set `enableShortcut={false}` to
+     * disable the built-in listener and drive `open` yourself.
+     */
+    shortcut?: string;
+    /** Register the global `shortcut` listener. */
+    enableShortcut?: boolean;
+    /** Close the palette after an item is selected. */
+    closeOnSelect?: boolean;
+    /** Override the built-in fuzzy scorer with app-specific search. */
+    filter?: CommandPaletteFilter;
+    /** Called with the selected item before navigation/action runs. */
+    onselect?: (item: CommandPaletteItem) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+    /** Replace a result row's rendering. Receives the item and whether it's the active row. */
+    item?: SlotType;
+    /** Replace the empty-state body. Receives the current query. */
+    empty?: SlotType;
+    /** Replace the footer hints. */
+    footer?: SlotType;
+};
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;