4b: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"] 4c: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"] 4d:T29d0,"use client"; // easeui.dev/components/motion/command-palette import { Search } from "lucide-react"; import { Children, createContext, Fragment, type InputHTMLAttributes, isValidElement, type KeyboardEvent, type ReactNode, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface CommandItemProps { /** Text matched against the search query. Falls back to string children. */ value?: string; /** Extra terms that also match, invisibly, such as synonyms or a keyboard shortcut. */ keywords?: string[]; onSelect?: () => void; disabled?: boolean; className?: string; children: ReactNode; } function itemValue(props: { value?: string; children?: ReactNode }): string { return props.value ?? (typeof props.children === "string" ? props.children : ""); } function isMatch(props: CommandItemProps, query: string): boolean { const trimmed = query.trim().toLowerCase(); if (!trimmed) return true; const haystack = [itemValue(props), ...(props.keywords ?? [])].join(" ").toLowerCase(); return haystack.includes(trimmed); } /** Walks a children tree, collecting every enabled item that matches the query, in order. */ function collectItems(children: ReactNode, query: string): CommandItemProps[] { const found: CommandItemProps[] = []; for (const child of Children.toArray(children)) { if (!isValidElement(child)) continue; if (child.type === Fragment || child.type === CommandGroup || child.type === CommandList) { found.push(...collectItems((child.props as { children?: ReactNode }).children, query)); } else if (child.type === CommandItem) { const props = child.props as CommandItemProps; if (!props.disabled && isMatch(props, query)) found.push(props); } } return found; } interface CommandContextValue { query: string; setQuery: (query: string) => void; activeValue: string | undefined; setActiveValue: (value: string) => void; select: (value: string) => void; count: number; listboxId: string; } const CommandContext = createContext(null); function useCommand(part: string) { const ctx = useContext(CommandContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } export interface CommandPaletteProps { /** Whether the palette is open. */ open: boolean; /** Called when the palette asks to close, from Escape, the backdrop, or a selection. */ onOpenChange: (open: boolean) => void; /** Names the dialog for screen readers. Default "Command palette". */ label?: string; className?: string; children: ReactNode; } /** * A command-K style search overlay on the native dialog element. Typing * filters the list, arrow keys move the highlight, and Enter selects it. * The dialog handles focus and an inert page behind it on its own. */ export function CommandPalette({ open, onOpenChange, label = "Command palette", className, children, }: CommandPaletteProps) { const ref = useRef(null); const listboxId = useId(); const [query, setQuery] = useState(""); const [activeValue, setActiveValue] = useState(); const [shown, setShown] = useState(false); const items = useMemo(() => collectItems(children, query), [children, query]); // Reset the highlight only once the active item filters out. useEffect(() => { if (items.some((item) => itemValue(item) === activeValue)) return; setActiveValue(items[0] ? itemValue(items[0]) : undefined); }, [items, activeValue]); useEffect(() => { const dialog = ref.current; if (!dialog) return; if (open) { setQuery(""); if (!dialog.open) dialog.showModal(); const frame = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(frame); } setShown(false); if (!dialog.open) return; const timeout = setTimeout(() => dialog.close(), 150); return () => clearTimeout(timeout); }, [open]); // The native dialog does not stop the page behind it from scrolling. useEffect(() => { if (!open) return; const root = document.documentElement; const previous = root.style.overflow; root.style.overflow = "hidden"; return () => { root.style.overflow = previous; }; }, [open]); const select = useCallback( (value: string) => { items.find((item) => itemValue(item) === value)?.onSelect?.(); onOpenChange(false); }, [items, onOpenChange], ); const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter") { event.preventDefault(); if (activeValue !== undefined) select(activeValue); return; } if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return; event.preventDefault(); if (items.length === 0) return; const index = items.findIndex((item) => itemValue(item) === activeValue); const next = event.key === "ArrowDown" ? index + 1 : index - 1; setActiveValue(itemValue(items[(next + items.length) % items.length])); }; const ctx = useMemo( () => ({ query, setQuery, activeValue, setActiveValue, select, count: items.length, listboxId }), [query, activeValue, items, listboxId, select], ); return ( ); } export type CommandInputProps = Omit< InputHTMLAttributes, "value" | "onChange" | "role" >; export function CommandInput({ className, placeholder = "Type a command or search...", ...props }: CommandInputProps) { const { query, setQuery, listboxId, activeValue } = useCommand("CommandInput"); return (

); } export function CommandList({ className, children }: { className?: string; children: ReactNode }) { const { listboxId } = useCommand("CommandList"); return ( ); } /** Shown in place of the list once nothing in it matches the query. */ export function CommandEmpty({ children }: { children: ReactNode }) { const { count } = useCommand("CommandEmpty"); if (count > 0) return null; return

{children}

; } export interface CommandGroupProps { heading?: ReactNode; className?: string; children: ReactNode; } /** A labeled cluster of items. Collapses along with its heading once every item in it filters out. */ export function CommandGroup({ heading, className, children }: CommandGroupProps) { const { query } = useCommand("CommandGroup"); if (collectItems(children, query).length === 0) return null; return (

{heading ? (

{heading}

) : null} {children}

); } export function CommandSeparator({ className }: { className?: string }) { return

; } /** A selectable row. Hidden entirely once it stops matching the query. */ export function CommandItem({ value, keywords, disabled = false, className, children, }: CommandItemProps) { const { query, activeValue, setActiveValue, select, listboxId } = useCommand("CommandItem"); const ref = useRef(null); const thisValue = itemValue({ value, children }); const active = activeValue === thisValue; useEffect(() => { if (active) ref.current?.scrollIntoView({ block: "nearest" }); }, [active]); if (!isMatch({ value, keywords, children }, query)) return null; return ( ); } 4a:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4b",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/motion/command-palette.tsx","content":"$4d","type":"registry:component","target":"@components/motion/command-palette.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]