52: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"] 53: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"] 54:T3b8c,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const BOUNDARY = /[\s\-_/.:]/; const ROW = 36; const GAP = 2; const PAD = 5; export type CommandItem = { id: string; label: string; hint?: string; keywords?: string; shortcut?: string[]; }; export type UseCommandPaletteOptions = { items: CommandItem[]; onSelect: (item: CommandItem) => void; onDismiss?: () => void; }; function scoreOne(text: string, query: string): number { const t = text.toLowerCase(); let cursor = 0; let total = 0; let streak = 0; for (let i = 0; i < query.length; i++) { const at = t.indexOf(query[i], cursor); if (at < 0) return -1; streak = at === cursor && i > 0 ? streak + 1 : 0; total += 2 + streak * 4; if (at === 0) total += 12; else if (BOUNDARY.test(t[at - 1])) total += 8; cursor = at + 1; } return total; } function rank(items: CommandItem[], query: string): CommandItem[] { const q = query.trim().toLowerCase(); if (!q) return items; const scored: { item: CommandItem; score: number; order: number }[] = []; for (let i = 0; i < items.length; i++) { const item = items[i]; const direct = scoreOne(item.label, q); const aliased = item.keywords ? scoreOne(item.keywords, q) - 3 : -1; const best = Math.max(direct, item.keywords ? aliased : -1); if (best < 0) continue; scored.push({ item, score: best - item.label.length * 0.05, order: i }); } scored.sort((a, b) => b.score - a.score || a.order - b.order); return scored.map((s) => s.item); } export function useCommandPalette({ items, onSelect, onDismiss, }: UseCommandPaletteOptions) { const [query, setQuery] = useState(""); const [pinned, setPinned] = useState(null); const listRef = useRef(null); const pointer = useRef({ x: -1, y: -1 }); const select = useRef(onSelect); select.current = onSelect; const dismiss = useRef(onDismiss); dismiss.current = onDismiss; const results = useMemo(() => rank(items, query), [items, query]); const activeId = results.some((r) => r.id === pinned) ? pinned : (results[0]?.id ?? null); const activeIndex = results.findIndex((r) => r.id === activeId); useEffect(() => { if (listRef.current) listRef.current.scrollTop = 0; }, [query]); const reveal = (index: number) => { const list = listRef.current; const row = list?.children[index]; if (!list || !(row instanceof HTMLElement)) return; const top = row.offsetTop - PAD; const bottom = row.offsetTop + row.offsetHeight + PAD; if (top < list.scrollTop) list.scrollTop = top; else if (bottom > list.scrollTop + list.clientHeight) { list.scrollTop = bottom - list.clientHeight; } }; const jump = (index: number) => { if (results.length === 0) return; const next = Math.max(0, Math.min(results.length - 1, index)); setPinned(results[next].id); reveal(next); }; const move = (delta: number) => { if (results.length === 0) return; const from = activeIndex < 0 ? 0 : activeIndex; jump((from + delta + results.length) % results.length); }; const run = (item?: CommandItem) => { const target = item ?? results.find((r) => r.id === activeId); if (target) select.current(target); }; const pointerActivate = (id: string, event: React.PointerEvent) => { const { x, y } = pointer.current; if (event.clientX === x && event.clientY === y) return; pointer.current = { x: event.clientX, y: event.clientY }; if (id !== activeId) setPinned(id); }; const onKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); move(1); } else if (event.key === "ArrowUp") { event.preventDefault(); move(-1); } else if (event.key === "Home") { event.preventDefault(); jump(0); } else if (event.key === "End") { event.preventDefault(); jump(results.length - 1); } else if (event.key === "Enter") { event.preventDefault(); run(); } else if (event.key === "Escape") { event.preventDefault(); dismiss.current?.(); } }; return { query, setQuery, results, activeId, activeIndex, listRef, onKeyDown, pointerActivate, jump, move, run, }; } export type CommandPaletteProps = { items: CommandItem[]; onSelect: (item: CommandItem) => void; onDismiss?: () => void; open?: boolean; placeholder?: string; emptyLabel?: string; label?: string; maxRows?: number; autoFocus?: boolean; className?: string; }; export function CommandPalette({ items, onSelect, onDismiss, open, placeholder = "Search commands", emptyLabel = "No command matches", label = "Command palette", maxRows = 6, autoFocus = false, className = "", }: CommandPaletteProps) { const uid = useId(); const reduced = useReducedMotion(); const panelRef = useRef(null); const inputRef = useRef(null); const liveRef = useRef(null); const { query, setQuery, results, activeId, listRef, onKeyDown, pointerActivate, run, } = useCommandPalette({ items, onSelect, onDismiss }); const rows = Math.max(1, Math.min(maxRows, items.length)); const height = PAD * 2 + rows * ROW + (rows - 1) * GAP; const count = results.length; useEffect(() => { if (autoFocus) inputRef.current?.focus({ preventScroll: true }); }, [autoFocus]); useEffect(() => { if (open) setQuery(""); }, [open, setQuery]); useEffect(() => { const id = setTimeout(() => { if (!liveRef.current) return; liveRef.current.textContent = count === 0 ? emptyLabel : `${count} ${count === 1 ? "command" : "commands"} available`; }, 400); return () => clearTimeout(id); }, [count, emptyLabel]); const spring = reduced ? { duration: 0 } : CELL; const overlaid = open !== undefined; const surface = (

setQuery(e.target.value)} onKeyDown={onKeyDown} className="h-full min-w-0 flex-1 bg-transparent text-[13.5px] text-stone-700 outline-none placeholder:text-stone-400 dark:text-stone-200 dark:placeholder:text-stone-500" /> {count}

{count === 0 ? ( {emptyLabel} ) : null}

); if (!overlaid) return surface; return ( {surface} ); } const LAYER_EASE = [0.23, 1, 0.32, 1] as const; const LAYER_OUT = [0.4, 0, 1, 1] as const; const PANEL = { type: "spring", stiffness: 420, damping: 36, mass: 0.9 } as const; function PaletteLayer({ open, onDismiss, reduced, panelRef, children, }: { open: boolean; onDismiss?: () => void; reduced: boolean; panelRef: React.RefObject; children: React.ReactNode; }) { const [host, setHost] = useState(null); const downedOutside = useRef(false); const leave = useRef(onDismiss); leave.current = onDismiss; useEffect(() => setHost(document.body), []); useEffect(() => { if (!open) return; const onKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.preventDefault(); event.stopPropagation(); leave.current?.(); }; document.addEventListener("keydown", onKeyDown, true); return () => document.removeEventListener("keydown", onKeyDown, true); }, [open]); useEffect(() => { if (!open) return; const root = document.documentElement; const overflow = root.style.overflow; const padding = root.style.paddingRight; const gutter = window.innerWidth - root.clientWidth; root.style.overflow = "hidden"; if (gutter > 0) root.style.paddingRight = `${gutter}px`; return () => { root.style.overflow = overflow; root.style.paddingRight = padding; }; }, [open]); if (!host) return null; return createPortal( {open ? ( { const panel = panelRef.current; downedOutside.current = !panel?.contains(event.target as Node); }} onClick={(event) => { const panel = panelRef.current; if (panel?.contains(event.target as Node)) return; if (!downedOutside.current) return; downedOutside.current = false; leave.current?.(); }} > {children} ) : null} , host, ); } 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/interior/command-palette.tsx","content":"$54","type":"registry:ui","target":"components/interior/command-palette.tsx"}],"className":"h-[70svh] min-h-80"}]]}]