62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T5fc8,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Kind = "page" | "person" | "file" | "action"; type Scope = "all" | Kind; export interface SpotlightItem { id: string; kind: Kind; title: string; subtitle: string; meta?: Record; shortcut?: string[]; color?: string; } export interface SpotlightSearchPanelProps { items?: SpotlightItem[]; recent?: string[]; defaultOpen?: boolean; onSelect?: (item: SpotlightItem) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", panel: "#141414", side: "#101010", border: "rgba(255,255,255,0.09)", active: "rgba(255,255,255,0.07)", mark: "#F5F4F1", chip: "rgba(255,255,255,0.06)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#60A5FA", ring: "rgba(245,244,241,0.6)", scrim: "rgba(0,0,0,0.55)", ghost: "rgba(255,255,255,0.04)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.42)", panel: "#FFFFFF", side: "#FAFAF8", border: "rgba(10,10,10,0.09)", active: "rgba(10,10,10,0.05)", mark: "#0A0A0A", chip: "rgba(10,10,10,0.05)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#2563EB", ring: "rgba(10,10,10,0.5)", scrim: "rgba(10,10,10,0.25)", ghost: "rgba(10,10,10,0.04)" }, }; const ITEMS: SpotlightItem[] = [ { id: "p1", kind: "page", title: "Revenue overview", subtitle: "Dashboards / Finance", meta: { Updated: "2h ago", Owner: "Daniel Reyes", Snippet: "MRR grew 8.6% in October, led by expansion in the Team plan." } }, { id: "p2", kind: "page", title: "Churn analysis", subtitle: "Dashboards / Growth", meta: { Updated: "Yesterday", Owner: "Mia Okafor", Snippet: "Logo churn fell to 1.1%. Most cancellations cite missing SSO." } }, { id: "p3", kind: "page", title: "Release notes 4.2", subtitle: "Docs / Changelog", meta: { Updated: "Nov 6", Owner: "Lena Brandt", Snippet: "Saved views, faster exports and audit log search." } }, { id: "p4", kind: "page", title: "Onboarding checklist", subtitle: "Docs / Customers", meta: { Updated: "Oct 28", Owner: "Tomás Ferreira", Snippet: "Seven steps every new workspace should finish in week one." } }, { id: "u1", kind: "person", title: "Lena Brandt", subtitle: "Head of Product", color: "#60A5FA", meta: { Email: "lena@nexora.io", Team: "Product", Local: "10:42 Berlin" } }, { id: "u2", kind: "person", title: "Daniel Reyes", subtitle: "Finance Lead", color: "#F472B6", meta: { Email: "daniel@nexora.io", Team: "Finance", Local: "04:42 New York" } }, { id: "u3", kind: "person", title: "Mia Okafor", subtitle: "Product Designer", color: "#A78BFA", meta: { Email: "mia@nexora.io", Team: "Design", Local: "09:42 Lagos" } }, { id: "f1", kind: "file", title: "Q4-revenue-forecast.xlsx", subtitle: "Spreadsheet · 248 KB", color: "#34D399", meta: { Modified: "Today, 09:14", Owner: "Daniel Reyes", Folder: "Finance / 2026" } }, { id: "f2", kind: "file", title: "brand-guidelines.pdf", subtitle: "PDF · 4.1 MB", color: "#F87171", meta: { Modified: "Oct 30", Owner: "Mia Okafor", Folder: "Design / Brand" } }, { id: "f3", kind: "file", title: "roadmap-q1-2027.key", subtitle: "Presentation · 12 MB", color: "#FBBF24", meta: { Modified: "Nov 10", Owner: "Lena Brandt", Folder: "Product / Planning" } }, { id: "a1", kind: "action", title: "Create new report", subtitle: "Start from a blank report or a template", shortcut: ["N"] }, { id: "a2", kind: "action", title: "Invite teammates", subtitle: "Send invites by email or share a link", shortcut: ["⌘", "I"] }, { id: "a3", kind: "action", title: "Switch to light theme", subtitle: "Change how Nexora looks on this device", shortcut: ["⌘", "⇧", "L"] }, ]; const RECENT = ["churn", "Daniel", "forecast"]; const SCOPES: { id: Scope; label: string }[] = [ { id: "all", label: "All" }, { id: "page", label: "Pages" }, { id: "person", label: "People" }, { id: "file", label: "Files" }, { id: "action", label: "Actions" }, ]; const GROUP: Record = { page: "Pages", person: "People", file: "Files", action: "Actions" }; const ICON: Record = { page: "M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6", person: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0", file: "M6 3h8l4 4v14H6zM14 3v4h4", action: "M13 3 4 14h7l-1 7 9-11h-7l1-7Z", }; /** Subsequence match: every query letter in order. Returns matched indexes and a score (lower is better). */ function fuzzy(text: string, q: string) { if (!q) return { score: 0, hits: [] as number[] }; const t = text.toLowerCase(); const query = q.toLowerCase().replace(/\s+/g, ""); const hits: number[] = []; let from = 0; for (const ch of query) { const i = t.indexOf(ch, from); if (i < 0) return null; hits.push(i); from = i + 1; } const spread = hits[hits.length - 1] - hits[0]; return { score: spread + hits[0] * 0.5 - (t.startsWith(query) ? 10 : 0), hits }; } const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join(""); export function SpotlightSearchPanel({ items = ITEMS, recent: recent0 = RECENT, defaultOpen = true, onSelect, theme = "dark", className }: SpotlightSearchPanelProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [open, setOpen] = React.useState(defaultOpen); const [query, setQuery] = React.useState(""); const [scope, setScope] = React.useState("all"); const [active, setActive] = React.useState(0); const [recent, setRecent] = React.useState(recent0); const [toast, setToast] = React.useState(null); const listRef = React.useRef(null); const inputRef = React.useRef(null); const focusOnce = React.useCallback((el: HTMLInputElement | null) => { inputRef.current = el; el?.focus({ preventScroll: true }); }, []); React.useEffect(() => { const onKey = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setOpen((o) => !o); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2000); return () => clearTimeout(t); }, [toast]); const q = query.trim(); const results = items .filter((i) => scope === "all" || i.kind === scope) .map((i) => ({ item: i, m: fuzzy(i.title, q) })) .filter((r): r is { item: SpotlightItem; m: { score: number; hits: number[] } } => r.m !== null) .sort((a, b) => (q ? a.m.score - b.m.score : 0)); // Keep groups in a fixed order; flatten for keyboard movement. const groups = (["page", "person", "file", "action"] as Kind[]).map((k) => ({ kind: k, rows: results.filter((r) => r.item.kind === k).slice(0, scope === "all" ? 3 : 8) })).filter((g) => g.rows.length); const flat = groups.flatMap((g) => g.rows); const current = flat[Math.min(active, flat.length - 1)]?.item; const counts = Object.fromEntries(SCOPES.map((s) => [s.id, items.filter((i) => (s.id === "all" || i.kind === s.id) && fuzzy(i.title, q)).length])); React.useEffect(() => { listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" }); }, [active]); const choose = (item: SpotlightItem) => { if (q) setRecent((r) => [q, ...r.filter((x) => x.toLowerCase() !== q.toLowerCase())].slice(0, 4)); setToast(item.kind === "action" ? `${item.title}…` : `Opened ${item.title}`); onSelect?.(item); setOpen(false); setQuery(""); setScope("all"); setActive(0); }; const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); if (!flat.length) return; setActive((a) => (a + (e.key === "ArrowDown" ? 1 : -1) + flat.length) % flat.length); } else if (e.key === "Enter" && current) { e.preventDefault(); choose(current); } else if (e.key === "Tab") { e.preventDefault(); const i = SCOPES.findIndex((s) => s.id === scope); setScope(SCOPES[(i + (e.shiftKey ? -1 : 1) + SCOPES.length) % SCOPES.length].id); setActive(0); } else if (e.key === "Escape") { if (query) setQuery(""); else setOpen(false); } }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const highlight = (text: string, hits: number[]) => hits.length ? [...text].map((ch, i) => hits.includes(i) ? ( {ch} ) : ( {ch} ), ) : text; const glyph = (it: SpotlightItem, size = 30) => it.kind === "person" ? ( {initials(it.title)} ) : ( ); return (

{/* Faded app behind */}

{[0, 1, 2, 3, 4, 5].map((i) => (

))}

{toast && ( {toast} )} {open && ( { if (e.target === e.currentTarget) setOpen(false); }} > )}

); } export default SpotlightSearchPanel; 61:["$","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","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","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/spotlight-search-panel/spotlight-search-panel.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]