4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2801,"use client" import * as React from "react" import { Search } from "lucide-react" import { cn } from "@/lib/utils" export type CommandItem = { id: string label: string description?: string group?: string /** Extra words that should match, without being shown. */ keywords?: string[] } export type CommandPaletteProps = Omit< React.HTMLAttributes, "children" | "onSelect" > & { items: CommandItem[] onSelect?: (item: CommandItem) => void open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void /** Key used with Meta or Control to toggle. Pass false to bind nothing. */ shortcut?: string | false placeholder?: string label?: string emptyMessage?: (query: string) => React.ReactNode maxResults?: number /** Called as the query changes, for fetching the results yourself. */ onQueryChange?: (query: string) => void /** Says results are on their way. Pair it with onQueryChange. */ loading?: boolean loadingMessage?: React.ReactNode /** * Rank and filter the items here. Turn it off when they arrive already * matched and ordered, so a server's ranking is not overruled. */ filter?: boolean /** * Score an item against the query yourself: fuzzy matching, a field we do * not know about, a weighting of your own. Lower is a better match, and * false or nothing drops the item. */ rank?: CommandRanker } export type CommandRanker = ( item: CommandItem, query: string ) => number | false | null | undefined /** * Lower is a better match; Infinity, false, or nothing means no match. It is * exported so a ranker of your own can fall back to it rather than reproduce * it. */ export function rankCommandItem(item: CommandItem, rawQuery: string) { const query = rawQuery.trim().toLowerCase() const label = item.label.toLowerCase() if (label === query) return 0 if (label.startsWith(query)) return 1 if (label.includes(query)) return 2 if (item.group?.toLowerCase().includes(query)) return 3 if (item.keywords?.some((word) => word.toLowerCase().includes(query))) return 4 if (item.description?.toLowerCase().includes(query)) return 5 return Number.POSITIVE_INFINITY } export function CommandPalette({ items, onSelect, open, defaultOpen = false, onOpenChange, shortcut = "k", placeholder = "Search…", label = "Search", emptyMessage = (query) => `Nothing matches “${query}”.`, onQueryChange, loading = false, loadingMessage = "Searching…", filter = true, rank = rankCommandItem, maxResults = 8, className, ...dialogProps }: CommandPaletteProps) { const listId = React.useId() const dialogRef = React.useRef(null) const fieldRef = React.useRef(null) const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const [query, setQuery] = React.useState("") const [highlighted, setHighlighted] = React.useState(0) const isOpen = open ?? uncontrolledOpen const results = React.useMemo(() => { // Already matched and ordered by whoever fetched them. if (!filter) return items.slice(0, maxResults) // The ranker is handed the query as typed, so one of your own can be // case-sensitive if it wants to be. The built-in lowercases internally. const trimmed = query.trim() if (!trimmed) return items.slice(0, maxResults) return items .map((item) => ({ item, score: rank(item, trimmed) })) .filter( (entry): entry is { item: CommandItem; score: number } => typeof entry.score === "number" && Number.isFinite(entry.score) ) .sort( (a, b) => a.score - b.score || a.item.label.localeCompare(b.item.label) ) .slice(0, maxResults) .map(({ item }) => item) }, [items, query, maxResults, filter, rank]) const active = results[Math.min(highlighted, results.length - 1)] const setOpen = React.useCallback( (next: boolean) => { if (open === undefined) setUncontrolledOpen(next) onOpenChange?.(next) }, [open, onOpenChange] ) // The dialog element owns its own visibility, so it is driven from state // rather than rendered conditionally, which keeps focus handling native. React.useEffect(() => { const dialog = dialogRef.current if (!dialog) return if (isOpen && !dialog.open) { setQuery("") setHighlighted(0) dialog.showModal() fieldRef.current?.focus() } else if (!isOpen && dialog.open) { dialog.close() } }, [isOpen]) React.useEffect(() => { if (shortcut === false) return const onKeyDown = (event: KeyboardEvent) => { // Another palette, or the page itself, may already have claimed this // chord. Without the check every listener bound to it opens, and the // reader gets a stack of modals from one keypress. if (event.defaultPrevented) return if (event.key.toLowerCase() !== shortcut.toLowerCase()) return if (!event.metaKey && !event.ctrlKey) return event.preventDefault() setOpen(!dialogRef.current?.open) } window.addEventListener("keydown", onKeyDown) return () => window.removeEventListener("keydown", onKeyDown) }, [shortcut, setOpen]) const choose = (item: CommandItem) => { setOpen(false) onSelect?.(item) } return ( ) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/default/command-palette/command-palette.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]