Search UI

CommandPalette Component

$lib/components/composites/command-palette/

Built on Bits UI Command + Dialog primitives. shouldFilter={false} — all filtering is handled by the engine or the component's own derived state, not by the Bits UI filter.

Props

interface Props {
  open: boolean;          // bindable
  items: CommandPaletteItem[];
  query?: string;         // bindable — parent drives the search engine
  placeholder?: string;
  mode?: 'filter' | 'search';
  loading?: boolean;      // shows spinner in search mode
}

mode Prop

AppShell.svelte always uses mode="search".

Item Types

CommandPaletteItemType = 'page' | 'action' | 'recent' | 'panel' | 'showcase' | 'section' | 'doc' | 'blog'

Items carry optional snippet (plain text) and highlight ([start, end] ranges) for rich search result display. Highlights are rendered with <mark> — never {@html}.

Items carry optional badge: 'en-fallback' for English content shown to de/ru users.

Items carry optional secondary for a hover-revealed icon button (e.g., "Open in new tab" on desk panels).

Launcher View vs Query View

When the query is empty, the palette shows only recents, panels, and actions. Search-surface groups (pages, showcases, docs, blog) are hidden. When query is non-empty, all groups appear (capped per group).

"Search Everything" Escape Hatch

In mode="search", a "Search everything for …" button appears below the results. Selecting it navigates to /search?q=<query>. Keyboard shortcut: ↵ on that item.

Triggers

⌘K / Ctrl+K

Registered globally in the keyboard shortcut registry. Opens modals.quickSearchOpen from anywhere in the app.

Sidebar Rail Icon

A search icon in the left sidebar rail opens the palette. Wired in AppShell.svelte via the Sidebar component.

On first open, search.ensureLoaded() is called to prefetch the Lane-A shard.

Keyboard Navigation

Standard Bits UI Command keyboard behavior:

AppShell Wiring

CommandPalette is mounted once in AppShell.svelte:

<CommandPalette
  bind:open={modals.quickSearchOpen}
  bind:query={searchQuery}
  items={searchItems}
  mode="search"
  loading={search.status === 'loading'}
/>

searchItems merges: deduped search results + desk panel items + hardcoded actions (toggle theme, keyboard shortcuts, AI assistant).

/search Page

Route: src/routes/[[locale=locale]]/(public)/search/+page.svelte Load: src/routes/[[locale=locale]]/(public)/search/+page.server.ts

A dedicated full-page search view. Accepts ?q= query param. Results are grouped by surface in the same SURFACE_ORDER as the palette. The page is noindex (meta robots).

The load function runs both lanes server-side (no client fetch): match(buildSearchIndex(locale), q, 50) for static hits, searchContent(q, { locale, limit: 50 }) for server hits. Same merge logic as the palette (server result wins for richer snippet), then sorted by descending score.

┌────────────────────────────────────┐
│  Search                            │
│  3 results for "svelte"            │
├────────────────────────────────────┤
│  PAGES                             │
│  [icon] SvelteKit                  │
│         Docs / Stack               │
├────────────────────────────────────┤
│  DOCS                              │
│  [icon] Svelte 5 Runes             │
│         Docs / Stack               │
│         …reactive variables that…  │ ← snippet with bold matches
│  [icon] SvelteKit 2                │
│         Docs / Stack               │
└────────────────────────────────────┘

Not Yet Implemented

• Recent searches (localStorage persistence)
• Doc heading-level deep anchors in results
• /docs/programming agents section indexing