{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "search-dialog", "type": "registry:ui", "title": "Search Dialog", "description": "Async search with filter counts that roll, a live preview and stale-safe loading.", "categories": [ "command" ], "dependencies": [ "@base-ui/react", "@number-flow/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/use-controllable-state.json", "https://www.stealth.pm/r/command-palette.json", "https://www.stealth.pm/r/copy-button.json", "https://www.stealth.pm/r/kbd.json" ], "files": [ { "path": "components/ui/search-dialog.tsx", "content": "\"use client\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport NumberFlow from \"@number-flow/react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Clock, Loader, Search, Warning, X } from \"@/lib/icons\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\nimport {\n CommandHighlight,\n PaletteFooter,\n paletteClasses,\n scoreCommand,\n useDelayedFlag,\n useListGlide,\n usePaletteHotkey,\n} from \"@/components/ui/command-palette\";\n\nexport type SearchResult = {\n id: string;\n title: string;\n /** Which filter it belongs to: a SearchFilter value. */\n kind: string;\n /** Where it lives: \"Docs › Billing\", an email, a project. */\n subtitle?: string;\n icon?: React.ReactNode;\n /** Body text for the preview. Every word of the query is marked in it. */\n excerpt?: string;\n /** Label and value rows under the excerpt in the preview. */\n meta?: [label: string, value: React.ReactNode][];\n /** Enables Copy link in the preview. */\n href?: string;\n};\n\nexport type SearchFilter = { value: string; label: string };\n\nexport type SearchDialogProps = {\n /** Called (debounced) as the query changes. Honor the signal: a newer query aborts the older request. */\n search: (query: string, options: { signal: AbortSignal }) => Promise;\n /** Filter tabs after All. Each result's kind picks its tab and its group. */\n filters?: SearchFilter[];\n allLabel?: string;\n onSelect?: (result: SearchResult, query: string) => void;\n /** Replace the default preview. Receives the highlighted result and the query it matched. */\n renderPreview?: (result: SearchResult, query: string) => React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Recent queries, newest first. Shown while the field is empty. */\n recent?: string[];\n defaultRecent?: string[];\n onRecentChange?: (queries: string[]) => void;\n /** Milliseconds of quiet typing before a search runs. */\n debounce?: number;\n hotkey?: string | false;\n hotkeyTarget?: React.RefObject;\n placeholder?: string;\n container?: Dialog.Portal.Props[\"container\"];\n label?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\ntype Entry = { key: string; type: \"recent\"; query: string } | { key: string; type: \"result\"; result: SearchResult };\ntype Section = { value: string; items: Entry[] };\n\n// Every occurrence of every word of the query, for marking up an excerpt.\nfunction marks(text: string, query: string): [number, number][] {\n const lower = text.toLocaleLowerCase();\n const out: [number, number][] = [];\n for (const token of query.toLocaleLowerCase().split(/\\s+/).filter((t) => t.length > 1)) {\n for (let i = lower.indexOf(token); i >= 0; i = lower.indexOf(token, i + token.length)) out.push([i, i + token.length]);\n }\n out.sort((a, b) => a[0] - b[0]);\n const merged: [number, number][] = [];\n for (const r of out) {\n const last = merged[merged.length - 1];\n if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);\n else merged.push([...r]);\n }\n return merged;\n}\n\nfunction Marked({ text, query }: { text: string; query: string }) {\n const ranges = marks(text, query);\n if (!ranges.length) return <>{text};\n const parts: React.ReactNode[] = [];\n let at = 0;\n ranges.forEach(([s, e], i) => {\n if (s > at) parts.push(text.slice(at, s));\n parts.push(\n \n {text.slice(s, e)}\n ,\n );\n at = e;\n });\n parts.push(text.slice(at));\n return <>{parts};\n}\n\n/**\n * The request lifecycle on its own: debounces the query, aborts the one before,\n * keeps the last results on screen while the next arrive, and reports failure.\n */\nexport function useSearch(search: SearchDialogProps[\"search\"], query: string, debounce = 150) {\n const [state, setState] = useState<{ results: SearchResult[] | null; for: string; loading: boolean; error: string | null }>({\n results: null,\n for: \"\",\n loading: false,\n error: null,\n });\n const [attempt, setAttempt] = useState(0);\n const run = useRef(search);\n useEffect(() => {\n run.current = search;\n });\n const q = query.trim();\n // A changed query marks the current results as refreshing in the same render, so nothing flickers \"done\" in between.\n const [seen, setSeen] = useState({ q, attempt });\n if (seen.q !== q || seen.attempt !== attempt) {\n setSeen({ q, attempt });\n setState((s) => (q ? { ...s, loading: true, error: null } : { results: null, for: \"\", loading: false, error: null }));\n }\n\n useEffect(() => {\n if (!q) return;\n const controller = new AbortController();\n const timer = window.setTimeout(() => {\n run\n .current(q, { signal: controller.signal })\n .then((results) => {\n if (!controller.signal.aborted) setState({ results, for: q, loading: false, error: null });\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n const message = error instanceof Error && error.message ? error.message : \"Couldn’t search. Try again.\";\n setState((s) => ({ ...s, loading: false, error: message }));\n });\n }, debounce);\n return () => {\n window.clearTimeout(timer);\n controller.abort();\n };\n }, [q, debounce, attempt]);\n\n return { ...state, retry: () => setAttempt((a) => a + 1) };\n}\n\nexport function SearchDialog({\n search,\n filters = [],\n allLabel = \"All\",\n onSelect,\n renderPreview,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n recent: recentProp,\n defaultRecent = [],\n onRecentChange,\n debounce = 150,\n hotkey = \"/\",\n hotkeyTarget,\n placeholder = \"Search…\",\n container,\n label = \"Search\",\n className,\n children,\n}: SearchDialogProps) {\n const reduce = !!useReducedMotion();\n const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });\n const [recent, setRecent] = useControllableState({ value: recentProp, defaultValue: defaultRecent, onChange: onRecentChange });\n const [query, setQuery] = useState(\"\");\n const [filter, setFilter] = useState(\"all\");\n const [instant, setInstant] = useState(false);\n const [highlighted, setHighlighted] = useState<{ key: string; byKeyboard: boolean } | null>(null);\n const inputRef = useRef(null);\n const contained = container != null;\n\n const { results, for: resultQuery, loading, error, retry } = useSearch(search, query, debounce);\n const q = query.trim();\n const skeleton = useDelayedFlag(loading && results === null && !error);\n const refreshing = useDelayedFlag(loading && results !== null);\n const { setList: setGlideList, y: glideY, height: glideH, opacity: glideO } = useListGlide(reduce);\n\n const tabs = useMemo(() => [{ value: \"all\", label: allLabel }, ...filters], [filters, allLabel]);\n const counts = useMemo(() => {\n const c: Record = { all: results?.length ?? 0 };\n for (const r of results ?? []) c[r.kind] = (c[r.kind] ?? 0) + 1;\n return c;\n }, [results]);\n\n const sections = useMemo(() => {\n if (!q) return recent.length ? [{ value: \"Recent searches\", items: recent.map((r) => ({ key: `recent:${r}`, type: \"recent\" as const, query: r })) }] : [];\n if (!results) return [];\n const shown = filter === \"all\" ? results : results.filter((r) => r.kind === filter);\n if (filter !== \"all\") return shown.length ? [{ value: \"\", items: shown.map((result) => ({ key: result.id, type: \"result\" as const, result })) }] : [];\n // In All, results group by kind in the order of the filters.\n const order = filters.map((f) => f.value);\n const kinds = [...new Set(shown.map((r) => r.kind))].sort((a, b) => (order.indexOf(a) + 1 || 99) - (order.indexOf(b) + 1 || 99));\n return kinds.map((k) => ({\n value: filters.find((f) => f.value === k)?.label ?? k,\n items: shown.filter((r) => r.kind === k).map((result) => ({ key: result.id, type: \"result\" as const, result })),\n }));\n }, [q, recent, results, filter, filters]);\n\n const entries = sections.flatMap((s) => s.items);\n const current = entries.find((e) => e.key === highlighted?.key) ?? entries[0];\n const preview = current?.type === \"result\" ? current.result : null;\n const otherFilter = filter !== \"all\" && results?.length ? filters.find((f) => (counts[f.value] ?? 0) > 0 && f.value !== filter) : undefined;\n\n // Results arrive after the keystroke that asked for them, so the list's own first-row highlight has\n // already passed. Put it on the first row, as a real arrow key would, whenever a new set lands.\n const listRef = useRef(null);\n useEffect(() => {\n if (!open) return;\n const frame = requestAnimationFrame(() => {\n const list = listRef.current;\n const input = inputRef.current;\n if (!list || !input || list.querySelector(\"[data-highlighted]\") || !list.querySelector(\"[role=option]\")) return;\n input.dispatchEvent(new KeyboardEvent(\"keydown\", { key: \"ArrowDown\", code: \"ArrowDown\", bubbles: true, cancelable: true }));\n });\n return () => cancelAnimationFrame(frame);\n }, [open, results, filter, recent.length]);\n\n const close = (fromKeyboard: boolean) => {\n setInstant(fromKeyboard);\n setOpen(false);\n };\n\n const remember = (text: string) => setRecent((r) => [text, ...r.filter((x) => x !== text)].slice(0, 6));\n const forget = (text: string) => setRecent((r) => r.filter((x) => x !== text));\n\n const choose = (entry: Entry, fromKeyboard: boolean) => {\n if (entry.type === \"recent\") {\n setQuery(entry.query);\n inputRef.current?.focus();\n return;\n }\n remember(resultQuery || q);\n onSelect?.(entry.result, resultQuery || q);\n close(fromKeyboard);\n };\n\n usePaletteHotkey({\n hotkey,\n target: hotkeyTarget,\n open,\n onToggle: () => {\n setInstant(true);\n setOpen(!open);\n },\n });\n\n const onInputKeyDown = (e: React.KeyboardEvent) => {\n // ⇧⌫ forgets the highlighted recent search.\n if (e.shiftKey && (e.key === \"Backspace\" || e.key === \"Delete\") && current?.type === \"recent\") {\n e.preventDefault();\n forget(current.query);\n }\n };\n\n const emptyState = q && !loading && !error && results && entries.length === 0;\n\n return (\n {\n const ev = details.event as Event | undefined;\n setInstant(ev instanceof KeyboardEvent || (ev instanceof MouseEvent && ev.detail === 0));\n setOpen(next);\n }}\n onOpenChangeComplete={(isOpen) => {\n if (isOpen) return;\n setQuery(\"\");\n setFilter(\"all\");\n setHighlighted(null);\n }}\n >\n {children}\n \n \n \n \n {label}\n {\n if (details.reason === \"item-press\") return;\n setQuery(next);\n }}\n onOpenChange={(next, details) => {\n if (!next && details.reason === \"escape-key\") close(true);\n }}\n onItemHighlighted={(value: Entry | undefined, details) => setHighlighted(value ? { key: value.key, byKeyboard: details.reason !== \"pointer\" } : null)}\n itemToStringValue={(entry: Entry) => (entry.type === \"recent\" ? entry.query : entry.result.title)}\n autoHighlight=\"always\"\n keepHighlight\n >\n
\n \n \n \n \n \n \n \n \n
\n\n setFilter(String(v))} className=\"flex min-h-0 flex-1 flex-col\">\n
\n {\n if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== \" \") inputRef.current?.focus();\n }}\n className=\"relative flex h-10 w-max items-center gap-0.5\"\n >\n \n {tabs.map((t) => (\n \n {t.label}\n {q && results && (\n \n \n \n )}\n \n ))}\n \n
\n\n \n
\n {error && results && (\n
\n \n {error} Showing earlier results.\n \n
\n )}\n
\n {skeleton && }\n {!skeleton && error && !results && (\n
\n

{error}

\n \n
\n )}\n {emptyState && (\n
\n

\n No {filter === \"all\" ? \"results\" : (filters.find((f) => f.value === filter)?.label.toLowerCase() ?? \"results\")} for{\" \"}\n “{resultQuery}”\n

\n {otherFilter ? (\n setFilter(otherFilter.value)}>\n See {counts[otherFilter.value]} in {otherFilter.label}\n \n ) : (\n {\n setQuery(\"\");\n inputRef.current?.focus();\n }}\n >\n Clear search\n \n )}\n
\n )}\n {!q && !recent.length &&

Search across everything in this workspace

}\n {\n listRef.current = node;\n setGlideList(node);\n }}\n className={cn(\"group/list relative\", skeleton && \"hidden\")}\n >\n \n \n {(section: Section) => (\n \n {section.value && {section.value}}\n \n {(entry: Entry) =>\n entry.type === \"recent\" ? (\n choose(entry, e.detail === 0)} className={paletteClasses.item}>\n \n {entry.query}\n e.stopPropagation()}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n forget(entry.query);\n inputRef.current?.focus();\n }}\n className={cn(\n \"relative -mr-1 grid size-6 shrink-0 place-items-center rounded-md text-fg-4 opacity-0 transition-[opacity,color,background-color,scale]\",\n \"group-data-highlighted/item:opacity-100 pointer-coarse:opacity-100 hover:bg-fg/[0.06] hover:text-fg-2 active:scale-[0.9]\",\n \"after:absolute after:-inset-2 after:content-['']\",\n )}\n >\n \n \n \n ) : (\n choose(entry, e.detail === 0)}\n className={cn(paletteClasses.item, \"h-12 pointer-coarse:h-14\")}\n >\n {entry.result.icon && (\n {entry.result.icon}\n )}\n \n \n \n \n {entry.result.subtitle && {entry.result.subtitle}}\n \n \n )\n }\n \n \n )}\n \n
\n
\n \n\n \n \n \n\n \n \n {!q ? \"\" : loading ? \"Searching…\" : error ? error : `${entries.length} ${entries.length === 1 ? \"result\" : \"results\"}`}\n \n \n \n \n \n \n );\n}\n\nfunction DefaultPreview({ result, query }: { result: SearchResult; query: string }) {\n return (\n <>\n
\n {result.icon && {result.icon}}\n {result.subtitle}\n
\n

\n \n

\n {result.excerpt && (\n

\n \n

\n )}\n {result.meta && (\n
\n {result.meta.map(([k, v]) => (\n
\n
{k}
\n
{v}
\n
\n ))}\n
\n )}\n \n );\n}\n\nfunction SkeletonRows() {\n return (\n
\n {[62, 48, 71, 55].map((w, i) => (\n
\n \n \n \n \n \n
\n ))}\n
\n );\n}\n\nfunction SmallButton({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {\n return (\n \n {children}\n \n );\n}\n\nfunction RetryButton({ onClick }: { onClick: () => void }) {\n return Try again;\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/search-dialog" }