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:T3307,"use client"; import * as React from "react"; import { AnimatePresence, motion, useInView } from "motion/react"; import { ArrowDown, ArrowRight, ArrowUp, CornerDownLeft, Search, SearchX, } from "lucide-react"; import { cn } from "@/lib/utils"; import { useTypewriter } from "@/components/spectrumui/use-typewriter"; export interface CommandSearchItem { label: string; icon?: React.ReactNode; } export interface CommandSearchGroup { label: string; items: CommandSearchItem[]; } export interface CommandSearchProps { /** Static text for the search field (used when `autoType` is false). */ query?: string; /** Queries the palette types out and live-filters by. */ queries?: string[]; /** Type the queries automatically and filter results as they type. */ autoType?: boolean; placeholder?: string; /** Grouped results rendered below the search field. */ groups?: CommandSearchGroup[]; /** Called with the item when a row is clicked. */ onSelect?: (item: CommandSearchItem) => void; /** Fixed height of the palette. Content overflows are clipped like a real palette. */ height?: number; className?: string; } const DEFAULT_QUERIES = ["anim", "chart", "dialog", "side"]; const DEFAULT_GROUPS: CommandSearchGroup[] = [ { label: "Pages", items: [ { label: "Animated Drawer" }, { label: "Docs" }, { label: "Components" }, { label: "Blocks" }, { label: "Charts" }, { label: "Directory" }, { label: "Create" }, ], }, { label: "Components", items: [ { label: "Accordion" }, { label: "Alert" }, { label: "Alert Dialog" }, { label: "Animated Beam" }, { label: "Avatar" }, { label: "Badge" }, { label: "Breadcrumb" }, { label: "Button" }, { label: "Calendar" }, { label: "Card" }, { label: "Carousel" }, { label: "Chart" }, { label: "Checkbox" }, { label: "Combobox" }, { label: "Command" }, { label: "Dialog" }, { label: "Drawer" }, { label: "Dropdown Menu" }, { label: "Input" }, { label: "Navigation Menu" }, { label: "Popover" }, { label: "Select" }, { label: "Sidebar" }, { label: "Table" }, { label: "Tabs" }, { label: "Tooltip" }, ], }, ]; const ROW_SPRING = { type: "spring", stiffness: 420, damping: 34 } as const; function Caret() { return ( ); } export function CommandSearch({ query = "anim", queries, autoType = true, placeholder = "Search…", groups = DEFAULT_GROUPS, onSelect, height = 408, className, }: CommandSearchProps) { const rootRef = React.useRef(null); const inView = useInView(rootRef, { margin: "-10% 0px" }); const { text: typed } = useTypewriter(queries ?? DEFAULT_QUERIES, { typeMs: 170, deleteMs: 80, holdMs: 2800, gapMs: 1000, enabled: autoType && inView, }); const displayQuery = autoType ? typed : query; const needle = displayQuery.trim().toLowerCase(); const filteredGroups = React.useMemo( () => groups .map((group) => ({ ...group, items: needle ? group.items.filter((item) => item.label.toLowerCase().includes(needle), ) : group.items, })) .filter((group) => group.items.length > 0), [groups, needle], ); // The highlight tracks item identity (label), never a numeric index, so it // stays correct while rows animate in and out. When the hovered row is // filtered away it falls back to the first visible row — no state resets. const [hoveredLabel, setHoveredLabel] = React.useState(null); const visibleLabels = React.useMemo( () => new Set(filteredGroups.flatMap((g) => g.items.map((i) => i.label))), [filteredGroups], ); const activeLabel = hoveredLabel && visibleLabels.has(hoveredLabel) ? hoveredLabel : filteredGroups[0]?.items[0]?.label ?? null; // The highlight is ONE persistent element positioned in the list container, // re-measured from the DOM whenever the active row or the filter changes. // (A layoutId pill breaks here: the list reflows instantly under the // animation and the projected position goes stale between re-renders.) const rowRefs = React.useRef(new Map()); const [pillY, setPillY] = React.useState(null); // Remeasure when the active row or filtered list changes so the pill stays // aligned while auto-typing reflows results. setState bails out when unchanged. React.useLayoutEffect(() => { const row = activeLabel ? rowRefs.current.get(activeLabel) : undefined; const next = row ? row.offsetTop : null; setPillY((prev) => (prev === next ? prev : next)); }, [activeLabel, filteredGroups]); const flatItems = React.useMemo( () => filteredGroups.flatMap((group) => group.items), [filteredGroups], ); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (flatItems.length === 0) return; const currentIndex = Math.max( 0, flatItems.findIndex((item) => item.label === activeLabel), ); if (event.key === "ArrowDown") { event.preventDefault(); const next = flatItems[(currentIndex + 1) % flatItems.length]; setHoveredLabel(next.label); rowRefs.current.get(next.label)?.scrollIntoView({ block: "nearest" }); return; } if (event.key === "ArrowUp") { event.preventDefault(); const prev = flatItems[(currentIndex - 1 + flatItems.length) % flatItems.length]; setHoveredLabel(prev.label); rowRefs.current.get(prev.label)?.scrollIntoView({ block: "nearest" }); return; } if (event.key === "Enter") { event.preventDefault(); const selected = flatItems[currentIndex] ?? flatItems[0]; if (selected) onSelect?.(selected); } }, [activeLabel, flatItems, onSelect], ); const activeOptionId = activeLabel ? `command-search-option-${activeLabel.replace(/\s+/g, "-").toLowerCase()}` : undefined; return ( ); } function Highlighted({ label, needle }: { label: string; needle: string }) { if (!needle) return <>{label}; const start = label.toLowerCase().indexOf(needle); if (start === -1) return <>{label}; const end = start + needle.length; return ( <> {label.slice(0, start)} {label.slice(start, end)} {label.slice(end)} ); } 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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/use-typewriter"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/command-search/command-search.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/command-search.tsx"}],"className":"h-[70svh] min-h-80"}]]}]