@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/app-shell/AppShellOmnibar.svelte

@@ -0,0 +1,668 @@
+<script lang="ts" module>import * as z from "zod/v4";
+const OmnibarJson = z.json();
+const OmnibarHitSchema = z.object({
+	id: z.string(),
+	title: z.string(),
+	snippet: z.string().optional(),
+	url: z.string(),
+	source: z.string(),
+	score: z.number().optional(),
+	badge: z.string().optional(),
+	metadata: z.record(z.string(), OmnibarJson).optional()
+}).loose();
+const OmnibarSearchResponse = z.object({
+	hits: z.array(OmnibarJson).nullish(),
+	results: z.array(OmnibarJson).nullish()
+});
+function decodeHits(items) {
+	return items.flatMap((item) => {
+		const hit = OmnibarHitSchema.safeParse(item);
+		return hit.success ? [hit.data] : [];
+	});
+}
+</script>
+
+<script lang="ts">/**
+* AppShellOmnibar.svelte
+*
+* Universal app-aware omnisearch bar embedded in every page header.
+* Features app-scoped chipping ([ Knowledge ▾ ]), current-app precedence ranking,
+* Backspace unscoping to global search, and contextual zero-match handoff to Marshal.
+*/
+import { onMount } from "svelte";
+import { MediaQuery } from "svelte/reactivity";
+import * as Dialog from "../ui/dialog";
+import { Icon } from "../icon";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { cn } from "../../utils.js";
+import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+const logger = kitLogger("vibeskit-app-shell-omnibar");
+let { activeAppId = "system", activeAppName = "", pathname = "/", apps = [], searchEndpoint = "", onSelectResult, onMarshalHandoff, class: className = "" } = $props();
+let query = $state("");
+// Follows activeAppId; a user's unscope overrides it until activeAppId next changes.
+let scope = $derived(activeAppId);
+let isFocused = $state(false);
+let isOpen = $state(false);
+let isMobileOpen = $state(false);
+const mobile = new MediaQuery("(max-width: 1023.98px)");
+$effect(() => {
+	if (!mobile.current && isMobileOpen) closeOmnibar();
+});
+let isLoading = $state(false);
+let hits = $state([]);
+let selectedIndex = $state(0);
+let inputEl = $state(null);
+let mobileInputEl = $state(null);
+let mobileTrigger = $state(null);
+let searchError = $state("");
+let requestId = 0;
+const componentId = $props.id();
+const resultsId = `${componentId}-results`;
+const appLabel = $derived(activeAppName || (apps.find((a) => a.id === activeAppId)?.label ?? activeAppId));
+const currentScopeLabel = $derived(scope === "global" ? "All Apps" : apps.find((a) => a.id === scope)?.label ?? appLabel);
+// Grouping
+const currentAppHits = $derived(hits.filter((h) => h.source.toLowerCase() === activeAppId.toLowerCase()));
+const crossAppHits = $derived(hits.filter((h) => h.source.toLowerCase() !== activeAppId.toLowerCase()));
+// Flattened list of navigable items for keyboard navigation
+// [Current App Hits] + [Cross App Hits] + [Ask Marshal]
+const navigableItems = $derived.by(() => {
+	const items = [];
+	for (const hit of currentAppHits) {
+		items.push({
+			type: "hit",
+			hit
+		});
+	}
+	for (const hit of crossAppHits) {
+		items.push({
+			type: "hit",
+			hit
+		});
+	}
+	if (query.trim()) {
+		items.push({
+			type: "marshal",
+			query: query.trim()
+		});
+	}
+	return items;
+});
+let searchDebounceTimer = null;
+async function performSearch(q, currentScope) {
+	const currentRequest = ++requestId;
+	searchError = "";
+	const trimmed = q.trim();
+	if (!trimmed) {
+		hits = [];
+		isLoading = false;
+		return;
+	}
+	isLoading = true;
+	hits = [];
+	// null: the endpoint answered with a failure status.
+	const searched = await settle(async () => {
+		const params = new URLSearchParams({
+			query: trimmed,
+			limit: "15"
+		});
+		if (currentScope !== "global") {
+			params.set("activeApp", currentScope);
+		}
+		const res = await fetch(`${searchEndpoint}?${params.toString()}`, {
+			headers: { accept: "application/json" },
+			credentials: "same-origin"
+		});
+		return res.ok ? OmnibarSearchResponse.safeParse(await res.json()) : null;
+	});
+	if (currentRequest !== requestId) return;
+	// A failed request, a failure status and a malformed body all surface as the same search error.
+	if (!searched.ok) {
+		logger.warn("Omnibar search request failed", { reason: failureClass(searched.error) });
+	}
+	const body = searched.ok ? searched.value : null;
+	if (body?.success) hits = decodeHits(body.data.hits ?? body.data.results ?? []);
+	else searchError = "Search could not load. Try again.";
+	isLoading = false;
+	selectedIndex = 0;
+}
+function handleInput(val) {
+	requestId += 1;
+	hits = [];
+	searchError = "";
+	isLoading = Boolean(val.trim());
+	query = val;
+	isOpen = true;
+	if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+	searchDebounceTimer = setTimeout(() => {
+		void performSearch(query, scope);
+	}, 150);
+}
+function handleKeyDown(e) {
+	if (e.key === "Backspace" && query === "" && scope !== "global") {
+		e.preventDefault();
+		scope = "global";
+		void performSearch(query, scope);
+		return;
+	}
+	if (e.key === "ArrowDown") {
+		e.preventDefault();
+		if (navigableItems.length > 0) {
+			selectedIndex = (selectedIndex + 1) % navigableItems.length;
+		}
+		return;
+	}
+	if (e.key === "ArrowUp") {
+		e.preventDefault();
+		if (navigableItems.length > 0) {
+			selectedIndex = (selectedIndex - 1 + navigableItems.length) % navigableItems.length;
+		}
+		return;
+	}
+	if (e.key === "Enter") {
+		e.preventDefault();
+		if (isLoading || searchError || !isOpen) return;
+		triggerSelection(selectedIndex);
+		return;
+	}
+	if (e.key === "Escape") {
+		isOpen = false;
+		isMobileOpen = false;
+		return;
+	}
+}
+function triggerSelection(idx) {
+	const target = navigableItems[idx];
+	if (!target || target.type === "marshal") {
+		triggerMarshal(query);
+		return;
+	}
+	if (target.type === "hit") {
+		if (onSelectResult) {
+			onSelectResult(target.hit);
+		} else if (target.hit.url) {
+			window.location.href = target.hit.url;
+		}
+		closeOmnibar();
+	}
+}
+function triggerMarshal(userQuery) {
+	const trimmed = userQuery.trim();
+	if (!trimmed) return;
+	closeOmnibar();
+	if (onMarshalHandoff) {
+		onMarshalHandoff({
+			query: trimmed,
+			context: {
+				appId: activeAppId,
+				pathname
+			}
+		});
+	} else {
+		// Let the owning shell's Chat-framework composition handle Marshal.
+		window.dispatchEvent(new CustomEvent("vibes:marshal:handoff", { detail: {
+			query: trimmed,
+			context: {
+				appId: activeAppId,
+				pathname
+			}
+		} }));
+	}
+}
+function closeOmnibar() {
+	requestId += 1;
+	if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+	searchError = "";
+	isLoading = false;
+	isOpen = false;
+	isMobileOpen = false;
+	query = "";
+	hits = [];
+	inputEl?.blur();
+}
+function selectScope(newScope) {
+	scope = newScope;
+	if (query) {
+		void performSearch(query, scope);
+	}
+	if (isMobileOpen) mobileInputEl?.focus();
+	else inputEl?.focus();
+}
+function retrySearch() {
+	void performSearch(query, scope);
+	if (isMobileOpen) mobileInputEl?.focus();
+	else inputEl?.focus();
+}
+onMount(() => {
+	const handleGlobalKeyDown = (e) => {
+		if (!searchEndpoint) return;
+		if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+			e.preventDefault();
+			if (window.innerWidth < 1024) {
+				isMobileOpen = true;
+			} else {
+				inputEl?.focus();
+				inputEl?.select();
+				isOpen = true;
+			}
+		}
+	};
+	window.addEventListener("keydown", handleGlobalKeyDown);
+	return () => {
+		window.removeEventListener("keydown", handleGlobalKeyDown);
+		requestId += 1;
+		if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+	};
+});
+</script>
+
+<!-- Desktop Omnibar (≥1024px) -->
+{#if searchEndpoint}
+	<div class={cn('relative hidden w-full max-w-md lg:block', className)} data-app-shell-omnibar>
+		<div
+			class={cn(
+				'group flex h-9 w-full items-center gap-1.5 rounded-lg border bg-muted/40 px-2 text-sm shadow-xs transition-all duration-150',
+				isFocused || isOpen
+					? 'border-primary bg-background ring-2 ring-primary/20'
+					: 'border-border/60 hover:border-border hover:bg-muted/60'
+			)}
+		>
+			<!-- Scope Pill -->
+			<DropdownMenu>
+				<DropdownMenuTrigger
+					class="flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+				>
+					<span class="max-w-[100px] truncate">{currentScopeLabel}</span>
+					<Icon icon="lucide:chevron-down" class="h-3 w-3 opacity-60" />
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" class="w-44">
+					<DropdownMenuItem onclick={() => selectScope('global')}>
+						<Icon icon="lucide:globe" class="mr-2 h-4 w-4 text-muted-foreground" />
+						<span>All Apps</span>
+					</DropdownMenuItem>
+					<DropdownMenuItem onclick={() => selectScope(activeAppId)}>
+						<Icon icon="lucide:layers" class="mr-2 h-4 w-4 text-primary" />
+						<span class="font-medium text-primary">{appLabel} (This App)</span>
+					</DropdownMenuItem>
+					{#each apps.filter((a) => a.id !== activeAppId) as app (app.id)}
+						<DropdownMenuItem onclick={() => selectScope(app.id)}>
+							<Icon icon={app.icon ?? 'lucide:box'} class="mr-2 h-4 w-4 text-muted-foreground" />
+							<span>{app.label}</span>
+						</DropdownMenuItem>
+					{/each}
+				</DropdownMenuContent>
+			</DropdownMenu>
+
+			<div class="h-4 w-px bg-border/60"></div>
+
+			<!-- Search Input -->
+			<input
+				bind:this={inputEl}
+				type="text"
+				role="combobox"
+				aria-label="Search {currentScopeLabel}"
+				aria-expanded={isOpen && Boolean(query.trim())}
+				aria-controls={isOpen && query.trim() ? resultsId : undefined}
+				aria-activedescendant={isOpen && query.trim() && !isLoading && !searchError
+					? `${resultsId}-${selectedIndex}`
+					: undefined}
+				aria-autocomplete="list"
+				placeholder="Search {currentScopeLabel}... (⌘K)"
+				class="h-full min-w-0 flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground/70"
+				value={query}
+				oninput={(e) => handleInput(e.currentTarget.value)}
+				onfocus={() => {
+					isFocused = true;
+					if (query) isOpen = true;
+				}}
+				onblur={() => {
+					isFocused = false;
+					// Delay to allow click events on dropdown to register
+					setTimeout(() => {
+						if (!isFocused) isOpen = false;
+					}, 200);
+				}}
+				onkeydown={handleKeyDown}
+			/>
+
+			{#if isLoading}
+				<Icon icon="lucide:loader-2" class="h-4 w-4 animate-spin text-muted-foreground" />
+			{:else if query}
+				<button
+					type="button"
+					aria-label="Clear search"
+					class="p-0.5 text-muted-foreground hover:text-foreground"
+					onclick={() => {
+						handleInput('');
+						inputEl?.focus();
+					}}
+				>
+					<Icon icon="lucide:x" class="h-3.5 w-3.5" />
+				</button>
+			{:else}
+				<kbd
+					class="hidden rounded border border-border/60 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground group-hover:text-foreground xl:inline-block"
+				>
+					⌘K
+				</kbd>
+			{/if}
+		</div>
+
+		<!-- Search Results Popover -->
+		{#if isOpen && query.trim()}
+			<div
+				id={resultsId}
+				class="absolute top-full left-0 z-50 mt-1 max-h-96 w-full min-w-[340px] overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg backdrop-blur-md"
+				role={searchError || isLoading ? undefined : 'listbox'}
+				aria-label="Search results"
+			>
+				{#if searchError}
+					<p role="alert" class="p-2 text-sm text-destructive">{searchError}</p>
+					<button type="button" class="rounded px-3 py-2 text-sm underline" onclick={retrySearch}
+						>Retry search</button
+					>
+				{:else if isLoading}
+					<p role="status" class="p-2 text-sm text-muted-foreground">Searching…</p>
+				{:else if hits.length === 0}
+					<!-- Zero Match State -> Marshal Direct Trigger -->
+					<div class="p-2 text-center text-xs text-muted-foreground">
+						No matching results in {currentScopeLabel}
+					</div>
+					<button
+						type="button"
+						role="option"
+						id={`${resultsId}-0`}
+						aria-selected={selectedIndex === 0}
+						class={cn(
+							'flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors',
+							selectedIndex === 0
+								? 'bg-accent font-medium text-accent-foreground'
+								: 'hover:bg-accent/50'
+						)}
+						onmouseenter={() => (selectedIndex = 0)}
+						onclick={() => triggerMarshal(query)}
+					>
+						<Icon icon="lucide:sparkles" class="h-4 w-4 shrink-0 text-primary" />
+						<div class="min-w-0 flex-1">
+							<div class="font-medium text-foreground">Ask Marshal</div>
+							<div class="truncate text-xs text-muted-foreground">
+								Ask the AI assistant about &ldquo;{query}&rdquo;
+							</div>
+						</div>
+						<kbd class="rounded border border-border/80 bg-muted px-1.5 py-0.5 text-[10px]">↵</kbd>
+					</button>
+				{:else}
+					<!-- Current App Results -->
+					{#if currentAppHits.length > 0}
+						<div
+							class="px-2 py-1 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase"
+						>
+							In {appLabel}
+						</div>
+						{#each currentAppHits as hit, i (hit.id)}
+							{@const isSelected = selectedIndex === i}
+							<button
+								type="button"
+								role="option"
+								id={`${resultsId}-${i}`}
+								aria-selected={isSelected}
+								class={cn(
+									'flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors',
+									isSelected ? 'bg-accent font-medium text-accent-foreground' : 'hover:bg-accent/50'
+								)}
+								onmouseenter={() => (selectedIndex = i)}
+								onclick={() => {
+									if (onSelectResult) onSelectResult(hit);
+									else if (hit.url) window.location.href = hit.url;
+									closeOmnibar();
+								}}
+							>
+								<Icon icon="lucide:file-text" class="h-4 w-4 shrink-0 text-primary" />
+								<div class="min-w-0 flex-1">
+									<div class="truncate text-foreground">{hit.title}</div>
+									{#if hit.snippet}
+										<div class="truncate text-xs text-muted-foreground">{hit.snippet}</div>
+									{/if}
+								</div>
+								<span
+									class="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary uppercase"
+								>
+									{hit.badge ?? appLabel}
+								</span>
+							</button>
+						{/each}
+					{/if}
+
+					<!-- Cross-App Results -->
+					{#if crossAppHits.length > 0}
+						<div
+							class="mt-2 px-2 py-1 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase"
+						>
+							Other Apps
+						</div>
+						{#each crossAppHits as hit, j (hit.id)}
+							{@const overallIndex = currentAppHits.length + j}
+							{@const isSelected = selectedIndex === overallIndex}
+							<button
+								type="button"
+								role="option"
+								id={`${resultsId}-${overallIndex}`}
+								aria-selected={isSelected}
+								class={cn(
+									'flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors',
+									isSelected ? 'bg-accent font-medium text-accent-foreground' : 'hover:bg-accent/50'
+								)}
+								onmouseenter={() => (selectedIndex = overallIndex)}
+								onclick={() => {
+									if (onSelectResult) onSelectResult(hit);
+									else if (hit.url) window.location.href = hit.url;
+									closeOmnibar();
+								}}
+							>
+								<Icon icon="lucide:external-link" class="h-4 w-4 shrink-0 text-muted-foreground" />
+								<div class="min-w-0 flex-1">
+									<div class="truncate text-foreground">{hit.title}</div>
+									{#if hit.snippet}
+										<div class="truncate text-xs text-muted-foreground">{hit.snippet}</div>
+									{/if}
+								</div>
+								<span
+									class="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground uppercase"
+								>
+									{hit.badge ?? hit.source}
+								</span>
+							</button>
+						{/each}
+					{/if}
+
+					<!-- Ask Marshal Option Always Available at bottom -->
+					<div class="mt-2 border-t border-border/40 pt-1">
+						<button
+							type="button"
+							role="option"
+							id={`${resultsId}-${currentAppHits.length + crossAppHits.length}`}
+							aria-selected={selectedIndex === currentAppHits.length + crossAppHits.length}
+							class={cn(
+								'flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors',
+								selectedIndex === currentAppHits.length + crossAppHits.length
+									? 'bg-accent font-medium text-accent-foreground'
+									: 'hover:bg-accent/50'
+							)}
+							onmouseenter={() => (selectedIndex = currentAppHits.length + crossAppHits.length)}
+							onclick={() => triggerMarshal(query)}
+						>
+							<Icon icon="lucide:sparkles" class="h-4 w-4 shrink-0 text-primary" />
+							<div class="min-w-0 flex-1">
+								<div class="text-sm font-medium text-foreground">Ask Marshal</div>
+								<div class="truncate text-xs text-muted-foreground">
+									Ask the AI assistant about &ldquo;{query}&rdquo;
+								</div>
+							</div>
+							<kbd class="rounded border border-border/80 bg-muted px-1.5 py-0.5 text-[10px]">↵</kbd
+							>
+						</button>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Mobile Compact Trigger Button (<1024px) -->
+	<button
+		bind:this={mobileTrigger}
+		type="button"
+		class="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 bg-muted/40 text-muted-foreground transition-colors hover:border-border hover:bg-muted/70 hover:text-foreground lg:hidden"
+		aria-label="Open search"
+		onclick={() => {
+			isMobileOpen = true;
+		}}
+	>
+		<Icon icon="lucide:search" class="h-4 w-4" />
+	</button>
+
+	<!-- Mobile Modal Dialog -->
+	<Dialog.Root
+		open={isMobileOpen}
+		onOpenChange={(open) => {
+			if (!open) closeOmnibar();
+		}}
+	>
+		<Dialog.Content
+			showCloseButton={false}
+			onOpenAutoFocus={(event) => {
+				event.preventDefault();
+				mobileInputEl?.focus();
+			}}
+			onCloseAutoFocus={(event) => {
+				event.preventDefault();
+				if (mobile.current) mobileTrigger?.focus();
+				else inputEl?.focus();
+			}}
+			class="fixed inset-0 z-50 flex h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none border-0 bg-background p-0 sm:max-w-none lg:hidden"
+		>
+			<Dialog.Title class="sr-only">Search Vibes</Dialog.Title>
+			<Dialog.Description class="sr-only"
+				>Search {currentScopeLabel} or ask Marshal, the AI assistant.</Dialog.Description
+			>
+			<div class="flex items-center gap-2 border-b border-border p-3">
+				<Icon icon="lucide:search" class="h-5 w-5 shrink-0 text-muted-foreground" />
+				<input
+					bind:this={mobileInputEl}
+					type="search"
+					aria-label="Search {currentScopeLabel}"
+					placeholder="Search {currentScopeLabel}..."
+					class="flex-1 bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground/70"
+					value={query}
+					oninput={(e) => handleInput(e.currentTarget.value)}
+					onkeydown={(event) => {
+						if (event.key === 'Enter') {
+							event.preventDefault();
+							void performSearch(query, scope);
+						}
+					}}
+				/>
+				<button
+					type="button"
+					aria-label="Close search"
+					class="rounded p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+					onclick={closeOmnibar}
+				>
+					<Icon icon="lucide:x" class="h-5 w-5" />
+				</button>
+			</div>
+
+			<!-- Mobile Scope Selection Bar -->
+			<div
+				class="flex items-center gap-1.5 overflow-x-auto border-b border-border/40 px-3 py-2 text-xs"
+			>
+				<button
+					type="button"
+					class={cn(
+						'shrink-0 rounded-full px-2.5 py-1 font-medium transition-colors',
+						scope === 'global'
+							? 'bg-primary text-primary-foreground'
+							: 'bg-muted text-muted-foreground hover:text-foreground'
+					)}
+					onclick={() => selectScope('global')}
+					aria-pressed={scope === 'global'}
+				>
+					All Apps
+				</button>
+				<button
+					type="button"
+					class={cn(
+						'shrink-0 rounded-full px-2.5 py-1 font-medium transition-colors',
+						scope === activeAppId
+							? 'bg-primary text-primary-foreground'
+							: 'bg-muted text-muted-foreground hover:text-foreground'
+					)}
+					onclick={() => selectScope(activeAppId)}
+					aria-pressed={scope === activeAppId}
+				>
+					{appLabel}
+				</button>
+			</div>
+
+			<!-- Mobile Results List -->
+			<div class="flex-1 overflow-y-auto p-2">
+				{#if searchError}
+					<p role="alert" class="p-2 text-sm text-destructive">{searchError}</p>
+					<button type="button" class="rounded px-3 py-2 text-sm underline" onclick={retrySearch}
+						>Retry search</button
+					>
+				{:else if isLoading}
+					<p role="status" class="p-2 text-sm text-muted-foreground">Searching…</p>
+				{:else if query.trim() && hits.length === 0}
+					<p role="status" class="p-2 text-sm text-muted-foreground">
+						No matching results in {currentScopeLabel}
+					</p>
+				{:else if !query.trim()}
+					<p class="p-2 text-sm text-muted-foreground">
+						Search by name or keyword. Choose All Apps to widen your search.
+					</p>
+				{/if}
+				{#if query.trim()}
+					<button
+						type="button"
+						class="mb-3 flex w-full items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 p-3 text-left transition-colors active:bg-primary/10"
+						onclick={() => triggerMarshal(query)}
+					>
+						<Icon icon="lucide:sparkles" class="h-5 w-5 shrink-0 text-primary" />
+						<div class="min-w-0 flex-1">
+							<div class="font-semibold text-foreground">Ask Marshal</div>
+							<div class="truncate text-xs text-muted-foreground">
+								Ask the AI assistant about &ldquo;{query}&rdquo;
+							</div>
+						</div>
+					</button>
+				{/if}
+
+				{#each hits as hit (hit.id)}
+					<button
+						type="button"
+						class="mb-1.5 flex w-full items-center gap-3 rounded-lg border border-border/40 p-2.5 text-left transition-colors active:bg-muted"
+						onclick={() => {
+							if (onSelectResult) onSelectResult(hit);
+							else if (hit.url) window.location.href = hit.url;
+							closeOmnibar();
+						}}
+					>
+						<Icon icon="lucide:file-text" class="h-4 w-4 shrink-0 text-muted-foreground" />
+						<div class="min-w-0 flex-1">
+							<div class="font-medium text-foreground">{hit.title}</div>
+							{#if hit.snippet}
+								<div class="truncate text-xs text-muted-foreground">{hit.snippet}</div>
+							{/if}
+						</div>
+						<span
+							class="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground uppercase"
+						>
+							{hit.badge ?? hit.source}
+						</span>
+					</button>
+				{/each}
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+{/if}

package/dist/lib/components/app-shell/AppShellOmnibar.svelte.d.ts

@@ -0,0 +1,40 @@
+import * as z from 'zod/v4';
+declare const OmnibarJson: z.ZodJSONSchema;
+export type OmnibarMetadataValue = z.infer<typeof OmnibarJson>;
+export interface OmnibarHit {
+    id: string;
+    title: string;
+    snippet?: string;
+    url: string;
+    source: string;
+    score?: number;
+    badge?: string;
+    metadata?: {
+        [key: string]: OmnibarMetadataValue;
+    };
+}
+export interface OmnibarApp {
+    id: string;
+    label: string;
+    icon?: string;
+}
+type $$ComponentProps = {
+    activeAppId?: string;
+    activeAppName?: string;
+    pathname?: string;
+    apps?: OmnibarApp[];
+    /** Host-provided search API. Omit to leave search to the command palette. */
+    searchEndpoint?: string;
+    onSelectResult?: (hit: OmnibarHit) => void;
+    onMarshalHandoff?: (handoff: {
+        query: string;
+        context: {
+            appId: string;
+            pathname: string;
+        };
+    }) => void;
+    class?: string;
+};
+declare const AppShellOmnibar: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellOmnibar = ReturnType<typeof AppShellOmnibar>;
+export default AppShellOmnibar;