{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-search", "title": "Command search", "description": "A search field that opens a Cmd+K palette on the native dialog, with grouped results, a preview pane for the active result, and a no-results state with suggestions.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "@manniche/badge" ], "files": [ { "path": "registry/manniche/command-search/command-search.tsx", "content": "// CommandSearch: a site search that opens as a Cmd+K palette. The trigger is a search field set into the page (a real\n// GET form, so it still searches without JavaScript); typing in it, pressing Enter, clicking it, Cmd/Ctrl+K or \"/\"\n// opens a modal with the results grouped (Free, Pro, Templates, … from each item's `group`) and a preview of the\n// active one beside them. With nothing found it echoes the query and offers a few searches that do find something.\n//\n// Keyboard: Up and Down move through the results (and wrap), Home and End jump to the first and last while the field\n// is empty, Enter opens the active result, Cmd/Ctrl+Enter copies its install line, Esc closes. Focus goes back to\n// whatever opened the search. \"/\" is a single-key shortcut, so `shortcuts={false}` turns it off (WCAG 2.1.4); it is\n// also ignored while typing in a field. Cmd/Ctrl+K and the arrow keys always work.\n//\n// Screen readers: the field is a combobox over a listbox, the active result is announced through\n// aria-activedescendant, and the number of hits is read from a polite status inside the dialog once typing pauses.\n//\n// Motion: a click on the trigger lifts the field into the palette and unfolds the results under it; other clicks fade\n// and rise the palette in 220 ms. Opening or closing from the keyboard is instant, and so is everything under reduced\n// motion. Only transform, opacity and filter move.\nimport { Search, X } from 'lucide-react'\nimport {\n Fragment,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n useSyncExternalStore,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n} from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/registry/manniche/badge/badge'\nimport { useReducedMotion } from '@/registry/manniche/hooks/use-reduced-motion'\n\nexport type CommandSearchItem = {\n /** Unique id, such as \"flux-image\". Shown in mono under the title and matched by the search. */\n id: string\n /** The name people know it by, such as \"Flux Image\". */\n title: string\n /** One or two sentences. Shown in the preview and searched for words of three letters or more. */\n description?: string\n /** The group it is listed under, such as \"Free\", \"Pro\" or \"Templates\". Groups show in the order they first appear. */\n group: string\n /** A category, shown as a neutral badge and matched from its start. */\n category?: string\n /** Shows a Free or Pro badge, and lets \"free\" and \"pro\" find it. */\n tier?: 'free' | 'pro'\n /** Marks it as recently added in the preview. */\n isNew?: boolean\n /** An image for the thumbnail and the preview. Without one, its initials and name stand in. */\n poster?: string\n /** The install line shown in the preview; Cmd/Ctrl+Enter copies it. */\n install?: string\n /** Where Enter or a click goes when there is no `onSelect`. */\n href?: string\n /** Extra words that should find it, matched like the description. */\n keywords?: string[]\n}\n\nexport type CommandSearchLabels = {\n /** The trigger field's placeholder; `{count}` becomes the number of items. Default \"Search components\". */\n placeholder?: string\n /** Names the trigger field and its search landmark. Give a second search on the page its own. Default \"Search\". */\n searchLabel?: string\n /** Read after the trigger field's name. Default \"When you type here, the search opens in a dialog with the results.\" */\n triggerHint?: string\n /** Between the Cmd+K and \"/\" hints. Default \"or\". */\n or?: string\n /** Names the dialog. Default \"Search\". */\n dialog?: string\n /** The palette field's placeholder, also its name. Default \"Name, category, free or pro\". */\n inputPlaceholder?: string\n /** The close button. Default \"Close search\". */\n close?: string\n /** Names the list of results. Default \"Results\". */\n results?: string\n /** Names the preview pane. Default \"Preview\". */\n preview?: string\n /** Tier badges. Defaults \"Free\", \"Pro\" and \"New\". */\n free?: string\n pro?: string\n new?: string\n /** A group's count with an empty field. Default \"{shown} of {total}\". */\n groupCount?: string\n /** A group's count while searching. Default \"{shown} of {total} hits\". */\n groupHits?: string\n /** The footer count with an empty field. Default \"{count} in total\". */\n total?: string\n /** The footer count while searching. Default \"{count} hits of {total}\". */\n hitsOf?: string\n /** Read after typing pauses. Defaults \"{count} hits\" and \"{count} hit\". */\n hits?: string\n hit?: string\n /** The no-results heading; `{query}` becomes what was typed. Default \"Nothing matches “{query}”\". */\n noneTitle?: string\n /** Under it when there are suggestions. Default \"Try a shorter word, or one of these:\". */\n noneText?: string\n /** Under it when there are none. Default \"Try a shorter word.\" */\n noneTextAlone?: string\n /** Read when nothing matches. Default \"Nothing matches {query}.\" */\n noneLive?: string\n /** Names the suggestion buttons. Default \"Suggestions\". */\n suggestions?: string\n /** Shown when there are no items at all. Default \"Nothing to search yet.\" */\n empty?: string\n /** Footer key hints. Defaults \"select\", \"open\", \"copy install\" and \"close\". */\n keySelect?: string\n keyOpen?: string\n keyCopy?: string\n keyClose?: string\n /** After Cmd/Ctrl+Enter; `{id}` becomes the item's id. Defaults \"Copied: {id}\" and \"Could not copy\". */\n copied?: string\n copyFailed?: string\n}\n\nexport type CommandSearchProps = {\n /** Everything that can be found. Counts in the palette are taken from this list. */\n items: CommandSearchItem[]\n /** Called with the chosen item after the palette has closed. Without it, the item's `href` is followed. */\n onSelect?: (item: CommandSearchItem) => void\n /** Your own preview for the active item, in place of the poster, title, description, badges and install line. */\n renderPreview?: (item: CommandSearchItem) => ReactNode\n /**\n * Searches to offer when nothing matches, shown with their hit counts (ones with no hits are left out, at most\n * four). A function gets the query, for mapping words in another language. Default: the commonest categories.\n */\n suggestions?: string[] | ((query: string) => string[])\n /** Single-key shortcuts: \"/\" opens the search. Turn off for WCAG 2.1.4; Cmd/Ctrl+K keeps working. Default true. */\n shortcuts?: boolean\n /** Listen on the whole page for Cmd/Ctrl+K (and \"/\"). Turn off on a second search on the same page. Default true. */\n hotkeys?: boolean\n /** Results per group while searching. Default 8. */\n limit?: number\n /** Results per group with an empty field. Default 5. */\n initialLimit?: number\n /** Controls whether the palette is open. Leave it out to let the component keep track. */\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n /** Controls the text in the field (the trigger and the palette share it). */\n query?: string\n /** The starting text, such as `?q=` from the URL. */\n defaultQuery?: string\n onQueryChange?: (query: string) => void\n /** Where the trigger form sends `?q=` without JavaScript. Default: the current page. */\n action?: string\n /** The query parameter's name. Default \"q\". */\n name?: string\n /** Words for other languages. */\n labels?: CommandSearchLabels\n /** Classes for the trigger field. */\n className?: string\n}\n\ntype Mode = 'key' | 'pointer' | 'lift'\ntype Hit = { item: CommandSearchItem; score: number; index: number }\n\nconst EASE = 'cubic-bezier(0.23, 1, 0.32, 1)'\nconst noop = () => () => {}\nconst isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)\n\n// Another modal is up when a native modal dialog is open, or a visible dialog from a library such as Radix\n// (role=dialog, alertdialog or aria-modal). `own` and what is inside it do not count.\nfunction otherDialogOpen(own: Element | null = null) {\n const found = document.querySelectorAll('dialog[open], [role=\"dialog\"], [role=\"alertdialog\"], [aria-modal=\"true\"]')\n return [...found].some((el) => el !== own && !own?.contains(el) && el.getClientRects().length > 0)\n}\n\n// Only web and mail links are followed, so an item's href can never run script.\nfunction safeHref(href: string) {\n try {\n const url = new URL(href, location.href)\n return ['http:', 'https:', 'mailto:'].includes(url.protocol) ? url.href : null\n } catch {\n return null\n }\n}\n\nfunction fill(template: string, values: Record): ReactNode {\n return template.split(/(\\{\\w+\\})/).map((part, i) => {\n const key = /^\\{(\\w+)\\}$/.exec(part)?.[1]\n return {key && key in values ? values[key] : part}\n })\n}\nconst fillText = (template: string, values: Record) =>\n template.replace(/\\{(\\w+)\\}/g, (m, key: string) => (key in values ? String(values[key]) : m))\n\nconst termsOf = (q: string) => q.trim().toLowerCase().split(/\\s+/).filter(Boolean)\nconst initials = (id: string) =>\n id\n .split(/[-_\\s]+/)\n .map((s) => s[0] ?? '')\n .join('')\n .slice(0, 3)\n\n// Each word must match somewhere; where it matches sets how high the item ranks.\nfunction score(item: CommandSearchItem, terms: string[], tierWords: string[]) {\n const id = item.id.toLowerCase()\n const title = item.title.toLowerCase()\n const cat = item.category?.toLowerCase() ?? ''\n const text = [item.description, ...(item.keywords ?? [])].join(' ').toLowerCase()\n let total = 0\n for (const w of terms) {\n let k = 0\n if (id.startsWith(w) || title.startsWith(w)) k = 5\n else if (id.includes(w) || title.includes(w)) k = 4\n else if (cat && cat.startsWith(w)) k = 3\n else if (tierWords.some((t) => t === w || (w.length > 2 && t.startsWith(w)))) k = 2\n else if (w.length > 2 && text.includes(w)) k = 1\n if (!k) return 0\n total += k\n }\n return total\n}\n\n// The words that find an item by its group or tier, such as \"pro\".\nconst groupWords = (item: CommandSearchItem, tierWords: string[]) =>\n [item.group.toLowerCase(), item.tier ? tierWords[item.tier === 'free' ? 0 : 1] : ''].filter(Boolean)\n\nconst countHits = (items: CommandSearchItem[], q: string, tierWords: string[]) => {\n const terms = termsOf(q)\n return items.filter((i) => score(i, terms, groupWords(i, tierWords))).length\n}\n\n// A long command breaks between words first, then after a slash. Each piece is kept whole (so flux-image or\n// --header never splits at its hyphen) unless it is wider than the line on its own.\nconst breakable = (s: string) =>\n s.split(/( +)/).map((word, w) =>\n word.trim() ? (\n \n {word.split(/(?<=\\/)(?!\\/)/).map((part, i) => (\n \n {part}\n \n ))}\n \n ) : (\n word\n ),\n )\n\nfunction marked(id: string, terms: string[]) {\n const lower = id.toLowerCase()\n const w = terms.find((t) => lower.includes(t))\n if (!w) return id\n const at = lower.indexOf(w)\n return (\n <>\n {id.slice(0, at)}\n \n {id.slice(at, at + w.length)}\n \n {id.slice(at + w.length)}\n \n )\n}\n\nconst CAP =\n 'bg-muted shadow-[inset_0_1px_0_color-mix(in_oklab,var(--foreground)_8%,transparent),inset_0_-1.5px_0_rgb(0_0_0/0.14),0_0_0_1px_color-mix(in_oklab,var(--foreground)_8%,transparent)] dark:shadow-[inset_0_1px_0_color-mix(in_oklab,var(--foreground)_8%,transparent),inset_0_-1.5px_0_rgb(0_0_0/0.5),0_0_0_1px_color-mix(in_oklab,var(--foreground)_8%,transparent)]'\nconst WELL =\n 'bg-background shadow-[inset_0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_7%,transparent)] dark:shadow-[inset_0_1px_2px_rgb(0_0_0/0.55),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_6%,transparent)]'\nconst RING =\n 'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card'\nconst DOTS =\n 'bg-[radial-gradient(color-mix(in_oklab,var(--foreground)_9%,transparent)_1px,transparent_1.3px)] bg-background'\n\nfunction Kbd({ children, large }: { children: ReactNode; large?: boolean }) {\n return (\n \n {children}\n \n )\n}\n\n/** A search field that opens a Cmd+K palette with grouped results and a preview of the active one. */\nexport function CommandSearch({\n items,\n onSelect,\n renderPreview,\n suggestions,\n shortcuts = true,\n hotkeys = true,\n limit = 8,\n initialLimit = 5,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n query: queryProp,\n defaultQuery = '',\n onQueryChange,\n action,\n name = 'q',\n labels = {},\n className,\n}: CommandSearchProps) {\n const L = {\n placeholder: 'Search components',\n searchLabel: 'Search',\n triggerHint: 'When you type here, the search opens in a dialog with the results.',\n or: 'or',\n dialog: 'Search',\n inputPlaceholder: 'Name, category, free or pro',\n close: 'Close search',\n results: 'Results',\n preview: 'Preview',\n free: 'Free',\n pro: 'Pro',\n new: 'New',\n groupCount: '{shown} of {total}',\n groupHits: '{shown} of {total} hits',\n total: '{count} in total',\n hitsOf: '{count} hits of {total}',\n hits: '{count} hits',\n hit: '{count} hit',\n noneTitle: 'Nothing matches “{query}”',\n noneText: 'Try a shorter word, or one of these:',\n noneTextAlone: 'Try a shorter word.',\n noneLive: 'Nothing matches {query}.',\n suggestions: 'Suggestions',\n empty: 'Nothing to search yet.',\n keySelect: 'select',\n keyOpen: 'open',\n keyCopy: 'copy install',\n keyClose: 'close',\n copied: 'Copied: {id}',\n copyFailed: 'Could not copy',\n ...labels,\n }\n\n const [ownOpen, setOwnOpen] = useState(defaultOpen)\n const isOpen = openProp ?? ownOpen\n const setOpen = (v: boolean) => {\n setOwnOpen(v)\n onOpenChange?.(v)\n }\n const [ownQuery, setOwnQuery] = useState(defaultQuery)\n const query = queryProp ?? ownQuery\n const setQuery = (v: string) => {\n setOwnQuery(v)\n onQueryChange?.(v)\n }\n\n const [active, setActive] = useState(0)\n const [live, setLive] = useState('')\n const [toast, setToast] = useState<{ text: ReactNode; on: boolean }>({ text: '', on: false })\n const reduced = useReducedMotion()\n const mac = useSyncExternalStore(noop, isMac, () => true)\n\n const fieldId = useId()\n const hintId = useId()\n const listId = useId()\n const formRef = useRef(null)\n const fieldRef = useRef(null)\n const dialogRef = useRef(null)\n const scrimRef = useRef(null)\n const boxRef = useRef(null)\n const rowRef = useRef(null)\n const sheetRef = useRef(null)\n const inputRef = useRef(null)\n const listRef = useRef(null)\n const mode = useRef('pointer')\n const returnTo = useRef(null)\n const pressedOn = useRef(null)\n const closing = useRef(false)\n const scrollToActive = useRef(false)\n const toastTimer = useRef>(undefined)\n\n // ── Results ──\n const tierWords = useMemo(() => [L.free.toLowerCase(), L.pro.toLowerCase()], [L.free, L.pro])\n const terms = useMemo(() => termsOf(query), [query])\n const searching = terms.length > 0\n\n const { groups, options, found } = useMemo(() => {\n const byGroup = new Map()\n items.forEach((item, index) => {\n const g = byGroup.get(item.group) ?? { hits: [], size: 0 }\n g.size++\n const s = searching ? score(item, terms, groupWords(item, tierWords)) : 1\n if (s) g.hits.push({ item, score: s, index })\n byGroup.set(item.group, g)\n })\n const cap = searching ? limit : initialLimit\n const groups: { label: string; shown: CommandSearchItem[]; matched: number; size: number }[] = []\n let found = 0\n for (const [label, g] of byGroup) {\n found += g.hits.length\n if (!g.hits.length) continue\n g.hits.sort((a, b) => b.score - a.score || a.index - b.index)\n groups.push({ label, shown: g.hits.slice(0, cap).map((h) => h.item), matched: g.hits.length, size: g.size })\n }\n return { groups, options: groups.flatMap((g) => g.shown), found }\n }, [items, terms, searching, limit, initialLimit, tierWords])\n\n const none = options.length === 0\n const current = none ? -1 : Math.min(active, options.length - 1)\n const activeItem = none ? undefined : options[current]\n const anyInstall = items.some((i) => i.install)\n\n const suggested = useMemo(() => {\n if (!none) return []\n let words: string[]\n if (typeof suggestions === 'function') words = suggestions(query.trim())\n else if (suggestions) words = suggestions\n else {\n const freq = new Map()\n for (const i of items) if (i.category) freq.set(i.category, (freq.get(i.category) ?? 0) + 1)\n words = [...freq].sort((a, b) => b[1] - a[1]).map(([c]) => c)\n }\n return [...new Set(words)]\n .map((w) => [w, countHits(items, w, tierWords)] as const)\n .filter(([, n]) => n > 0)\n .slice(0, 4)\n }, [none, suggestions, query, items, tierWords])\n\n const liveText = !searching\n ? ''\n : none\n ? fillText(L.noneLive, { query: query.trim() })\n : fillText(found === 1 ? L.hit : L.hits, { count: found })\n\n // ── Opening and closing ──\n const slabVisible = () => {\n const r = formRef.current?.getBoundingClientRect()\n return !!r && r.bottom > 0 && r.top < innerHeight && !matchMedia('(max-width: 720px)').matches\n }\n\n // `from` is where focus goes back to; the search field when the field itself opened it.\n const openWith = (how: Mode, from?: HTMLElement | null) => {\n if (isOpen) return\n mode.current = how\n returnTo.current = from ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null)\n setOpen(true)\n }\n\n const close = async (how: 'key' | 'pointer') => {\n const d = dialogRef.current\n if (!d?.open || closing.current) return\n closing.current = true\n const runs: Animation[] = []\n if (!reduced && how !== 'key') {\n const opts = { easing: EASE, fill: 'forwards' as const }\n runs.push(scrimRef.current!.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 180, ...opts }))\n if (mode.current === 'lift' && slabVisible()) {\n const s = formRef.current!.getBoundingClientRect()\n const r = rowRef.current!.getBoundingClientRect()\n const k = s.width / r.width\n const dy = s.top + (s.height - r.height * k) / 2 - r.top\n runs.push(\n rowRef.current!.animate(\n [{ transform: 'none' }, { transform: `translate(${s.left - r.left}px, ${dy}px) scale(${k})` }],\n {\n duration: 240,\n ...opts,\n },\n ),\n sheetRef.current!.animate([{ opacity: 1 }, { opacity: 0, transform: 'translateY(-8px)' }], {\n duration: 140,\n ...opts,\n }),\n )\n } else {\n runs.push(\n boxRef.current!.animate([{ opacity: 1 }, { opacity: 0, transform: 'translateY(4px)' }], {\n duration: 150,\n ...opts,\n }),\n )\n }\n await Promise.all(runs.map((a) => a.finished.catch(() => {})))\n }\n if (formRef.current) delete formRef.current.dataset.lifted\n d.close()\n runs.forEach((a) => a.cancel())\n closing.current = false\n }\n\n // Show or hide the dialog when `open` changes, and play the way in.\n useLayoutEffect(() => {\n const d = dialogRef.current\n if (!d) return\n if (isOpen && !d.open) {\n returnTo.current ??= document.activeElement instanceof HTMLElement ? document.activeElement : null\n d.showModal()\n const input = inputRef.current\n input?.focus()\n input?.setSelectionRange(input.value.length, input.value.length)\n if (reduced || mode.current === 'key') return\n const opts = { easing: EASE }\n scrimRef.current!.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 220, ...opts })\n if (mode.current === 'lift' && slabVisible()) {\n // The field rises out of the page into the palette, and the results unfold under it.\n const s = formRef.current!.getBoundingClientRect()\n const r = rowRef.current!.getBoundingClientRect()\n const k = s.width / r.width\n const dy = s.top + (s.height - r.height * k) / 2 - r.top\n formRef.current!.dataset.lifted = ''\n rowRef.current!.animate(\n [{ transform: `translate(${s.left - r.left}px, ${dy}px) scale(${k})` }, { transform: 'none' }],\n {\n duration: 300,\n ...opts,\n },\n )\n sheetRef.current!.animate(\n [\n { opacity: 0, transform: 'translateY(-10px)', filter: 'blur(4px)' },\n { opacity: 1, transform: 'none', filter: 'blur(0px)' },\n ],\n { duration: 260, delay: 40, fill: 'backwards', ...opts },\n )\n } else if (matchMedia('(max-width: 720px)').matches) {\n boxRef.current!.animate(\n [\n { opacity: 0, transform: 'translateY(16px)' },\n { opacity: 1, transform: 'none' },\n ],\n { duration: 260, ...opts },\n )\n } else {\n boxRef.current!.animate(\n [\n { opacity: 0, transform: 'translateY(8px) scale(.98)' },\n { opacity: 1, transform: 'none' },\n ],\n {\n duration: 220,\n ...opts,\n },\n )\n }\n } else if (!isOpen && d.open) {\n d.close()\n }\n // Nothing to do when only `reduced` changes: it is read at the moment the palette opens.\n }, [isOpen, reduced])\n\n // After the dialog has closed, by any route: tell the owner, put the field back and return focus.\n const onClosed = () => {\n if (formRef.current) delete formRef.current.dataset.lifted\n const from = returnTo.current\n returnTo.current = null\n mode.current = 'pointer'\n if (isOpen) setOpen(false)\n // The browser usually puts focus back itself, and onSelect may have moved it on purpose: leave that alone.\n const now = document.activeElement\n if (now && now !== document.body && !dialogRef.current?.contains(now)) return\n const field = fieldRef.current\n const back = !from || from === document.body || from === field || !from.isConnected ? field : from\n back?.focus({ preventScroll: true })\n }\n\n const choose = (item: CommandSearchItem) => {\n const d = dialogRef.current\n if (d?.open) d.close()\n if (onSelect) onSelect(item)\n else if (item.href) {\n const url = safeHref(item.href)\n if (url) window.location.assign(url)\n }\n }\n\n const showToast = (text: ReactNode) => {\n clearTimeout(toastTimer.current)\n setToast({ text, on: true })\n toastTimer.current = setTimeout(() => setToast((t) => ({ ...t, on: false })), 2200)\n }\n useEffect(() => () => clearTimeout(toastTimer.current), [])\n\n const copyInstall = async (item: CommandSearchItem) => {\n if (!item.install) return\n try {\n await navigator.clipboard.writeText(item.install)\n showToast(\n fill(L.copied, { id: {item.id} }),\n )\n } catch {\n showToast(L.copyFailed)\n }\n }\n\n // Cmd/Ctrl+K anywhere toggles the palette; \"/\" opens it when single-key shortcuts are on and no field has focus.\n const keys = useRef({ openWith, close, isOpen, shortcuts })\n useLayoutEffect(() => {\n keys.current = { openWith, close, isOpen, shortcuts }\n })\n useEffect(() => {\n if (!hotkeys) return\n const onKey = (e: KeyboardEvent) => {\n if (e.defaultPrevented) return\n const k = keys.current\n const otherModal = otherDialogOpen(dialogRef.current)\n if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'k') {\n if (otherModal) return\n e.preventDefault()\n if (k.isOpen) void k.close('key')\n else k.openWith('key')\n return\n }\n if (!k.shortcuts || k.isOpen || otherModal || e.metaKey || e.ctrlKey || e.altKey || e.key !== '/') return\n const t = e.target\n if (\n t instanceof Element &&\n t.closest('input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])')\n )\n return\n e.preventDefault()\n k.openWith('key')\n }\n document.addEventListener('keydown', onKey)\n return () => document.removeEventListener('keydown', onKey)\n }, [hotkeys])\n\n // Announce the number of hits once typing pauses.\n useEffect(() => {\n if (!isOpen) return\n const t = setTimeout(() => setLive(liveText), 450)\n return () => clearTimeout(t)\n }, [isOpen, liveText])\n\n // A new query starts the list from the top.\n useEffect(() => {\n listRef.current?.scrollTo({ top: 0 })\n }, [query])\n\n // Keep the active result in view when the keys move it.\n useEffect(() => {\n if (!scrollToActive.current || current < 0) return\n scrollToActive.current = false\n document.getElementById(`${listId}-${current}`)?.scrollIntoView({ block: 'nearest' })\n }, [current, listId])\n\n const move = (to: number) => {\n if (none) return\n scrollToActive.current = true\n setActive((to + options.length) % options.length)\n }\n const type = (v: string) => {\n setQuery(v)\n setActive(0)\n }\n\n const onInputKey = (e: ReactKeyboardEvent) => {\n // Enter and the arrows belong to the IME while it is composing (Chinese, Japanese, Korean input).\n if (e.nativeEvent.isComposing) return\n if (e.key === 'ArrowDown') {\n e.preventDefault()\n move(current + 1)\n } else if (e.key === 'ArrowUp') {\n e.preventDefault()\n move(current - 1)\n } else if (e.key === 'Home' && !query) {\n e.preventDefault()\n move(0)\n } else if (e.key === 'End' && !query) {\n e.preventDefault()\n move(options.length - 1)\n } else if (e.key === 'Enter' && activeItem) {\n e.preventDefault()\n if (e.metaKey || e.ctrlKey) void copyInstall(activeItem)\n else choose(activeItem)\n }\n }\n\n const keyHint = hotkeys ? (shortcuts ? 'Meta+K Control+K /' : 'Meta+K Control+K') : undefined\n const mod = mac ? '⌘' : 'Ctrl'\n let index = 0\n\n return (\n <>\n \n\n {\n e.preventDefault()\n openWith('key', fieldRef.current)\n }}\n // A mouse opens on press, which feels instant; touch opens on the click, so the tap cannot land on the palette.\n onPointerDown={(e) => {\n if (e.pointerType === 'mouse' && e.button === 0) {\n e.preventDefault()\n openWith('lift', fieldRef.current)\n }\n }}\n onClick={(e) => {\n if (e.detail !== 0) openWith('lift', fieldRef.current)\n }}\n className={cn(\n '@container relative flex h-[72px] cursor-text items-center gap-4 rounded-[18px] pr-3.5 pl-6 data-[lifted]:opacity-0 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring max-[480px]:gap-3 max-[480px]:pl-4',\n 'bg-background shadow-[inset_0_2px_8px_rgb(0_0_0/0.08),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_9%,transparent)] dark:shadow-[inset_0_2px_8px_rgb(0_0_0/0.6),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_7%,transparent)]',\n className,\n )}\n >\n \n \n {\n type(e.target.value)\n openWith('key', fieldRef.current)\n }}\n placeholder={fillText(L.placeholder, { count: items.length })}\n autoComplete=\"off\"\n spellCheck={false}\n aria-haspopup=\"dialog\"\n aria-describedby={hintId}\n aria-keyshortcuts={keyHint}\n className=\"h-full min-w-0 flex-1 bg-transparent text-[21px] tracking-[-0.012em] text-foreground outline-none placeholder:text-muted-foreground max-[480px]:text-lg [&::-webkit-search-cancel-button]:hidden\"\n />\n \n {L.triggerHint}\n \n {hotkeys && (\n \n \n {mod}\n K\n \n {shortcuts && (\n <>\n {L.or}\n /\n \n )}\n \n )}\n \n\n {\n e.preventDefault()\n void close('key')\n }}\n onClose={onClosed}\n onPointerDown={(e) => {\n pressedOn.current = e.target\n }}\n onClick={(e) => {\n // A text selection dragged out of the field ends on the scrim: that is not a click outside.\n const outside = (t: EventTarget | null) => t === scrimRef.current || t === dialogRef.current\n if (outside(e.target) && (e.detail === 0 || outside(pressedOn.current)))\n void close(e.detail === 0 ? 'key' : 'pointer')\n }}\n className=\"fixed inset-0 m-0 h-full max-h-none w-full max-w-none overflow-hidden border-0 bg-transparent p-0 text-foreground backdrop:bg-transparent\"\n >\n
\n \n \n \n type(e.target.value)}\n onKeyDown={onInputKey}\n role=\"combobox\"\n aria-expanded={!none}\n aria-controls={listId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeItem ? `${listId}-${current}` : undefined}\n aria-label={L.inputPlaceholder}\n placeholder={L.inputPlaceholder}\n autoComplete=\"off\"\n spellCheck={false}\n className=\"h-full min-w-0 flex-1 bg-transparent text-[19px] tracking-[-0.01em] text-ellipsis text-foreground outline-none placeholder:text-muted-foreground max-[720px]:text-[17px]\"\n />\n void close(e.detail === 0 ? 'key' : 'pointer')}\n className={cn(\n 'inline-flex size-11 flex-none items-center justify-center rounded-[10px] text-muted-foreground hover:bg-muted hover:text-foreground',\n RING,\n )}\n >\n \n esc\n \n \n \n
\n

\n {live}\n

\n\n \n \n