50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T833d,"use client"; /** * @author: @kokonutui * @description: Command Palette with ⌘K, nested pages, fuzzy matching and in-row action progress * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Activity, ArrowUpRight, BookOpen, Check, ChevronRight, Copy, FilePlus, FolderInput, History, Keyboard, Link2, LoaderCircle, Search, SunMoon, UserPlus, } from "lucide-react"; import { animate, useReducedMotion } from "motion/react"; import { type ChangeEvent, type FocusEvent, type KeyboardEvent, type PointerEvent, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface CommandItem { id: string; label: string; icon?: ReactNode; /** Section heading on its page, such as "Actions" or "Links". */ group?: string; /** Extra words the row matches on, without being shown. */ keywords?: string[]; /** Keys shown at the end of the row, such as ["⌘", "N"]. */ shortcut?: string[]; /** Marks the row as a link. `onSelect` decides how to open it. */ href?: string; /** Choosing the row opens these as a nested page instead of running it. */ children?: CommandItem[]; /** Input placeholder while this item's page is open. */ placeholder?: string; } /** @deprecated Use `CommandItem`. */ export type Action = CommandItem; export interface ActionSearchBarProps { items?: CommandItem[]; /** Ids shown under "Recent" before anything is typed. Running a row adds it. */ defaultRecent?: string[]; /** * Called when a row without children is chosen. Return a Promise to show a * spinner in the row until it settles; a rejection leaves the palette open. */ onSelect?: (item: CommandItem, path: CommandItem[]) => unknown; onOpenChange?: (open: boolean) => void; defaultOpen?: boolean; /** * ⌘K / Ctrl+K toggles the palette. By default it only does so while the * palette is focused or hovered, so the host page keeps its own ⌘K. Set * `true` to take ⌘K page-wide whenever the palette is on screen. */ shortcut?: boolean; label?: string; placeholder?: string; className?: string; } interface Entry { item: CommandItem; /** Ancestors below the current page, shown as a "Parent ›" prefix. */ path: CommandItem[]; } interface Row extends Entry { key: string; matches: number[]; score: number; } interface Section { key: string; label?: string; rows: Row[]; } type InputSource = "keyboard" | "pointer"; const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; const HOLD_MS = 400; const RECENT_LIMIT = 3; const ICON = "size-4"; const sampleItems: CommandItem[] = [ { id: "new-document", label: "New document", icon: , group: "Actions", keywords: ["create", "page", "file"], shortcut: ["⌘", "N"], }, { id: "duplicate", label: "Duplicate page", icon: , group: "Actions", keywords: ["copy", "clone"], shortcut: ["⌘", "D"], }, { id: "move", label: "Move to…", icon: , group: "Actions", keywords: ["folder", "file"], placeholder: "Move to which folder?", children: [ { id: "move-inbox", label: "Inbox", icon: , }, { id: "move-projects", label: "Projects", icon: , }, { id: "move-archive", label: "Archive", icon: , }, ], }, { id: "theme", label: "Change theme", icon: , group: "Actions", keywords: ["appearance", "dark", "light", "mode"], placeholder: "Choose a theme…", children: [ { id: "theme-light", label: "Light", icon: }, { id: "theme-dark", label: "Dark", icon: }, { id: "theme-system", label: "Match system", icon: , }, ], }, { id: "invite", label: "Invite member", icon: , group: "Actions", keywords: ["team", "share", "add"], }, { id: "copy-link", label: "Copy link", icon: , group: "Actions", keywords: ["url", "share"], shortcut: ["⌘", "L"], }, { id: "docs", label: "Documentation", icon: , group: "Links", keywords: ["help", "guide"], href: "/docs", }, { id: "changelog", label: "Changelog", icon: , group: "Links", keywords: ["release", "updates", "new"], href: "/changelog", }, { id: "status", label: "Status page", icon: , group: "Links", keywords: ["uptime", "incident"], href: "/status", }, { id: "shortcuts", label: "Keyboard shortcuts", icon: , group: "Links", keywords: ["keys", "hotkeys"], href: "/shortcuts", }, ]; /* ---------------------------------------------------------------- matching */ const WORD_BREAK = /[\s\-_/.]/; const WHITESPACE = /\s+/g; const APPLE_PLATFORM = /mac|iphone|ipad/i; const isWordStart = (text: string, i: number) => i === 0 || WORD_BREAK.test(text[i - 1] ?? ""); /** The first word start at or after `from` that holds `ch`, else `from`. */ function nextWordStart(t: string, ch: string, from: number) { for (let j = from; j < t.length; j++) { if (t[j] === ch && isWordStart(t, j)) { return j; } } return from; } function subsequence(t: string, q: string, preferWordStarts: boolean) { const matches: number[] = []; let score = 0; let from = 0; for (const ch of q) { let i = t.indexOf(ch, from); if (i < 0) { return null; } const prev = matches.at(-1); // Unless it continues a run, jump ahead to a word start holding `ch`. if (preferWordStarts && (prev === undefined || i !== prev + 1)) { i = nextWordStart(t, ch, i); } score += prev !== undefined && i === prev + 1 ? 6 : 1; score += isWordStart(t, i) ? 8 : 0; score -= prev === undefined ? i * 0.5 : (i - prev - 1) * 0.2; matches.push(i); from = i + 1; } return { score, matches }; } /** * Fuzzy match. Returns the matched character indices and a score that favours * contiguous runs, word starts and early matches; null when `query` is not a * subsequence of `text`. */ export function fuzzyMatch( text: string, query: string ): { score: number; matches: number[] } | null { const t = text.toLowerCase(); const q = query.toLowerCase().replace(WHITESPACE, ""); if (!q) { return { score: 0, matches: [] }; } const at = t.indexOf(q); if (at >= 0) { const matches = Array.from({ length: q.length }, (_, k) => at + k); return { score: 100 - at + (isWordStart(t, at) ? 30 : 0), matches }; } return subsequence(t, q, true) ?? subsequence(t, q, false); } function scoreEntry(entry: Entry, query: string) { const onLabel = fuzzyMatch(entry.item.label, query); if (onLabel) { return onLabel; } // Parent labels and keywords still find the row, ranked lower, unbolded. const extra = [ ...entry.path.map((p) => p.label), ...(entry.item.keywords ?? []), ]; let best: number | null = null; for (const word of extra) { const hit = fuzzyMatch(word, query); if (hit && (best === null || hit.score > best)) { best = hit.score; } } return best === null ? null : { score: best / 2, matches: [] }; } /* ---------------------------------------------------------------- sections */ function flatten(items: CommandItem[], path: CommandItem[] = []): Entry[] { const out: Entry[] = []; for (const item of items) { out.push({ item, path }); if (item.children) { out.push(...flatten(item.children, [...path, item])); } } return out; } function groupRows(rows: Row[], fallback?: string): Section[] { const byGroup = new Map(); for (const row of rows) { const label = row.path[0]?.group ?? row.item.group ?? fallback ?? ""; const list = byGroup.get(label) ?? []; list.push(row); byGroup.set(label, list); } return [...byGroup].map(([label, list]) => ({ key: label || "items", label: label || undefined, rows: list, })); } function buildSections( page: CommandItem | undefined, rootItems: CommandItem[], query: string, recent: Entry[] ): Section[] { const items = page?.children ?? rootItems; const fallback = page?.label; if (!query.trim()) { const rows = items.map((item) => ({ item, path: [], key: item.id, matches: [], score: 0, })); const sections = groupRows(rows, fallback); if (!page && recent.length > 0) { sections.unshift({ key: "recent", label: "Recent", rows: recent.map((e) => ({ ...e, key: `recent-${e.item.id}`, matches: [], score: 0, })), }); } return sections; } // Searching from a page also reaches the rows nested inside it. const rows: Row[] = []; for (const entry of flatten(items)) { const hit = scoreEntry(entry, query); if (hit) { rows.push({ ...entry, key: entry.item.id, ...hit }); } } const sections = groupRows(rows, fallback); for (const section of sections) { section.rows.sort((a, b) => b.score - a.score); } return sections; } function findEntry(items: CommandItem[], id: string): Entry | undefined { return flatten(items).find((e) => e.item.id === id); } /* ---------------------------------------------------------------- pieces */ function Highlighted({ text, matches }: { text: string; matches: number[] }) { if (matches.length === 0) { return <>{text}; } const hit = new Set(matches); const parts: { start: number; text: string; on: boolean }[] = []; for (let i = 0; i < text.length; i++) { const on = hit.has(i); const last = parts.at(-1); if (last && last.on === on) { last.text += text[i]; } else { parts.push({ start: i, text: text[i] ?? "", on }); } } return ( <> {parts.map((p) => p.on ? ( {p.text} ) : ( {p.text} ) )} ); } function Kbd({ children }: { children: ReactNode }) { return ( {children} ); } function RowEnd({ item, status, }: { item: CommandItem; status: "pending" | "done" | undefined; }) { if (status === "pending") { return ( ); } if (status === "done") { return ( ); } if (item.children) { return ; } if (item.href) { return ; } if (item.shortcut) { return ( ); } return null; } function isPaletteCombo(e: globalThis.KeyboardEvent) { return ( (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "k" ); } /** Focus sits in an open modal dialog that does not hold the palette. */ function inOtherModal(focused: Element | null, root: HTMLElement) { const modal = focused?.closest('[aria-modal="true"]'); return Boolean(modal && !modal.contains(root)); } function useIsMac() { const [mac, setMac] = useState(true); useEffect(() => { setMac(APPLE_PLATFORM.test(navigator.userAgent)); }, []); return mac; } /* ---------------------------------------------------------------- palette */ function ActionSearchBar({ items = sampleItems, defaultRecent = ["copy-link", "theme-dark"], onSelect, onOpenChange, defaultOpen = false, shortcut = false, label = "Search commands", placeholder = "Search or jump to…", className, }: ActionSearchBarProps) { const uid = useId(); const inputId = `${uid}-input`; const listboxId = `${uid}-listbox`; const optionId = (index: number) => `${uid}-option-${index}`; const reduce = useReducedMotion(); const isMac = useIsMac(); const [open, setOpen] = useState(defaultOpen); const [query, setQuery] = useState(""); const [stack, setStack] = useState([]); const [activeIndex, setActiveIndex] = useState(0); const [running, setRunning] = useState<{ key: string; phase: "pending" | "done"; } | null>(null); const [recentIds, setRecentIds] = useState(defaultRecent); const [announcement, setAnnouncement] = useState(""); const rootRef = useRef(null); const inputRef = useRef(null); const panelRef = useRef(null); const bodyRef = useRef(null); const contentRef = useRef(null); const listRef = useRef(null); const onScreenRef = useRef(true); const hoverRef = useRef(false); const fadeNextOpen = useRef(false); const slideNext = useRef<0 | 1 | -1>(0); const springUntil = useRef(0); const returnFocus = useRef(null); const holdTimer = useRef(undefined); const runToken = useRef(0); const page = stack.at(-1); const recent = useMemo( () => recentIds .map((id) => findEntry(items, id)) .filter((e): e is Entry => e !== undefined && !e.item.children) .slice(0, RECENT_LIMIT), [recentIds, items] ); const sections = useMemo( () => buildSections(page, items, query, recent), [page, items, query, recent] ); const rows = useMemo(() => sections.flatMap((s) => s.rows), [sections]); const highlighted = Math.min(activeIndex, rows.length - 1); const activeRow = open ? rows[highlighted] : undefined; /* -- open / close -- */ const setOpenState = useCallback( (next: boolean) => { setOpen(next); onOpenChange?.(next); }, [onOpenChange] ); const openPalette = useCallback( (source: InputSource) => { if (open) { return; } fadeNextOpen.current = source === "pointer"; setActiveIndex(0); setOpenState(true); }, [open, setOpenState] ); const closePalette = useCallback( (restoreFocus: boolean) => { window.clearTimeout(holdTimer.current); runToken.current += 1; setRunning(null); setOpenState(false); setQuery(""); setStack([]); setActiveIndex(0); const target = returnFocus.current; returnFocus.current = null; if (restoreFocus && target?.isConnected) { target.focus(); } }, [setOpenState] ); useEffect(() => () => window.clearTimeout(holdTimer.current), []); /* -- ⌘K, only while the palette is on screen -- */ useEffect(() => { const root = rootRef.current; if (!root) { return; } const io = new IntersectionObserver(([entry]) => { onScreenRef.current = entry?.isIntersecting ?? true; }); io.observe(root); return () => io.disconnect(); }, []); const hotkeyState = useRef({ open, openPalette, closePalette }); useEffect(() => { hotkeyState.current = { open, openPalette, closePalette }; }); useEffect(() => { const onKey = (e: globalThis.KeyboardEvent) => { const root = rootRef.current; if ( !(isPaletteCombo(e) && root && onScreenRef.current) || e.defaultPrevented ) { return; } const focused = document.activeElement; const focusedInside = focused instanceof Node && root.contains(focused); if (!(shortcut || focusedInside || hoverRef.current)) { return; } if (inOtherModal(focused, root)) { return; } e.preventDefault(); e.stopPropagation(); const state = hotkeyState.current; if (state.open) { state.closePalette(true); return; } if (focused instanceof HTMLElement && !focusedInside) { returnFocus.current = focused; } inputRef.current?.focus(); inputRef.current?.select(); state.openPalette("keyboard"); }; // Capture, so the host page's ⌘K does not also fire when this one takes it. window.addEventListener("keydown", onKey, true); return () => window.removeEventListener("keydown", onKey, true); }, [shortcut]); /* -- motion: fade on pointer open; slide + spring on pointer page change -- */ useLayoutEffect(() => { const panel = panelRef.current; if (!(open && panel && fadeNextOpen.current)) { return; } fadeNextOpen.current = false; panel.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, easing: EASE_OUT, }); }, [open]); useLayoutEffect(() => { const body = bodyRef.current; const content = contentRef.current; if (!(open && body && content)) { return; } let controls: ReturnType | undefined; const fitHeight = () => { const h = `${content.offsetHeight}px`; controls?.stop(); if (!reduce && performance.now() < springUntil.current) { controls = animate( body, { height: h }, { type: "spring", bounce: 0, duration: 0.32 } ); } else { body.style.height = h; } }; fitHeight(); const ro = new ResizeObserver(fitHeight); ro.observe(content); return () => { ro.disconnect(); controls?.stop(); }; }, [open, reduce]); // biome-ignore lint/correctness/useExhaustiveDependencies: runs when the page changes useLayoutEffect(() => { const list = listRef.current; const dir = slideNext.current; slideNext.current = 0; if (!list || dir === 0) { return; } list.animate( [ { transform: reduce ? "none" : `translateX(${dir * 14}px)`, opacity: 0, }, { transform: "none", opacity: 1 }, ], { duration: 200, easing: EASE_OUT } ); }, [stack.length]); // Keep the highlighted row inside the list's scroll box (never the page). // biome-ignore lint/correctness/useExhaustiveDependencies: optionId is derived from uid useLayoutEffect(() => { const list = listRef.current; const row = document.getElementById(optionId(highlighted)); if (!(open && list && row)) { return; } const top = row.offsetTop; const bottom = top + row.offsetHeight; if (top < list.scrollTop + 6) { list.scrollTop = top - 30; } else if (bottom > list.scrollTop + list.clientHeight - 6) { list.scrollTop = bottom - list.clientHeight + 6; } }, [open, highlighted, sections]); /* -- pages -- */ const pushPage = (item: CommandItem, source: InputSource) => { if (source === "pointer") { slideNext.current = 1; springUntil.current = performance.now() + 150; } setStack((s) => [...s, item]); setQuery(""); setActiveIndex(0); setAnnouncement(`${item.label}, ${item.children?.length ?? 0} options`); }; const popPage = (source: InputSource) => { const left = stack.at(-1); if (!left) { return; } if (source === "pointer") { slideNext.current = -1; springUntil.current = performance.now() + 150; } const nextStack = stack.slice(0, -1); setStack(nextStack); setQuery(""); // Land back on the row that opened the page. const back = buildSections(nextStack.at(-1), items, "", recent) .flatMap((s) => s.rows) .findIndex((r) => r.key === left.id); setActiveIndex(Math.max(0, back)); setAnnouncement(nextStack.at(-1)?.label ?? "All commands"); inputRef.current?.focus(); }; /* -- running -- */ const finishRun = (row: Row, token: number) => { if (token !== runToken.current) { return; } setRunning({ key: row.key, phase: "done" }); setAnnouncement(`${row.item.label}, done`); holdTimer.current = window.setTimeout(() => { if (token !== runToken.current) { return; } setRecentIds((ids) => [row.item.id, ...ids.filter((id) => id !== row.item.id)].slice( 0, RECENT_LIMIT ) ); closePalette(returnFocus.current !== null); }, HOLD_MS); }; const runRow = (row: Row) => { runToken.current += 1; const token = runToken.current; const result = onSelect?.(row.item, [...stack, ...row.path]); if (!(result instanceof Promise)) { finishRun(row, token); return; } setRunning({ key: row.key, phase: "pending" }); setAnnouncement(`Running ${row.item.label}`); result.then( () => finishRun(row, token), () => { if (token === runToken.current) { setRunning(null); setAnnouncement(`${row.item.label} failed`); } } ); }; const choose = (row: Row, source: InputSource) => { if (running) { return; } if (row.item.children) { pushPage(row.item, source); } else { runRow(row); } }; /* -- input -- */ const moveHighlight = (step: number) => { const count = rows.length; if (count > 0) { setActiveIndex((Math.max(highlighted, 0) + step + count) % count); } }; const handleNavKey = (e: KeyboardEvent) => { if (!open) { e.preventDefault(); openPalette("keyboard"); return; } if (rows.length === 0) { return; } e.preventDefault(); if (e.key === "Home" || e.key === "End") { setActiveIndex(e.key === "Home" ? 0 : rows.length - 1); } else { moveHighlight(e.key === "ArrowDown" ? 1 : -1); } }; const handleEnter = (e: KeyboardEvent) => { e.preventDefault(); if (!open) { openPalette("keyboard"); } else if (activeRow) { choose(activeRow, "keyboard"); } }; const handleEscape = (e: KeyboardEvent) => { if (open) { e.preventDefault(); closePalette(true); } else if (query) { setQuery(""); } }; const handleKeyDown = (e: KeyboardEvent) => { if (running && e.key !== "Tab") { e.preventDefault(); return; } switch (e.key) { case "ArrowDown": case "ArrowUp": case "Home": case "End": handleNavKey(e); break; case "Enter": handleEnter(e); break; case "Backspace": if (open && query === "" && stack.length > 0) { e.preventDefault(); popPage("keyboard"); } break; case "Escape": handleEscape(e); break; default: break; } }; const handleChange = (e: ChangeEvent) => { setQuery(e.target.value); setActiveIndex(0); openPalette("keyboard"); }; const handleInputPointerDown = (e: PointerEvent) => { if (e.button === 0) { openPalette("pointer"); } }; // Close when focus leaves the whole palette (Tab away, click outside). const handleBlur = (e: FocusEvent) => { const next = e.relatedTarget; if (open && !(next instanceof Node && e.currentTarget.contains(next))) { returnFocus.current = null; closePalette(false); } }; const pagePlaceholder = page ? (page.placeholder ?? `Search ${page.label.toLowerCase()}…`) : placeholder; let rowIndex = -1; return ( // biome-ignore lint/a11y/noStaticElementInteractions: focusout from the whole palette closes it // biome-ignore lint/a11y/noNoninteractiveElementInteractions: same focusout handler

{ hoverRef.current = e.pointerType === "mouse"; }} onPointerLeave={() => { hoverRef.current = false; }} ref={rootRef} >

{stack.map((p, i) => ( ))} {label} {!open && ( )}

{open && (

e.preventDefault()} ref={panelRef} >

{rows.length === 0 && (

No results for “{query.trim()}”

)}

↑ ↓ Navigate ↵ {activeRow?.item.children ? "Open" : "Run"} {stack.length > 0 && ( <> ⌫ Back )} esc Close

)}

{announcement}

); } export default ActionSearchBar; 4f:["$","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",{"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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/action-search-bar.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/action-search-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]