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:T1aa3,"use client"; import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type ReactNode, } from "react"; import { useReducedMotion } from "motion/react"; export type SpotlightBentoItem = { id: string; label: string; value: string; meta?: string; icon?: ReactNode; tone?: "blue" | "clay" | "moss" | "ink"; wide?: boolean; }; export type SpotlightBentoProps = { items: readonly SpotlightBentoItem[]; label?: string; className?: string; selectedId?: string; onSelect?: (item: SpotlightBentoItem) => void; }; const toneClass = { blue: "bg-[#315f8c] text-[#eff9ff]", clay: "bg-[#d36a42] text-[#fff3df]", moss: "bg-[#6b8760] text-[#f5ffe8]", ink: "bg-[#2a2520] text-[#fff0dc]", } as const; export function SpotlightBento({ items, label = "Product signals", className = "", selectedId, onSelect, }: SpotlightBentoProps) { const rootRef = useRef(null); const lightRef = useRef(null); const frameRef = useRef(null); const scheduleRef = useRef<() => void>(() => undefined); const pointRef = useRef({ x: 220, y: 125 }); const reduced = useReducedMotion() === true; const paint = () => { frameRef.current = null; const light = lightRef.current; if (!light) return; light.style.transform = `translate3d(${pointRef.current.x - 150}px, ${pointRef.current.y - 150}px, 0)`; }; const schedule = () => { if (frameRef.current === null) frameRef.current = requestAnimationFrame(paint); }; scheduleRef.current = schedule; useEffect(() => { const root = rootRef.current; if (!root) return; const resize = new ResizeObserver(([entry]) => { pointRef.current = { x: entry.contentRect.width * 0.72, y: entry.contentRect.height * 0.28, }; scheduleRef.current(); }); resize.observe(root); return () => { resize.disconnect(); if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); }; }, []); const moveLight = (event: ReactPointerEvent) => { if ( reduced || event.pointerType !== "mouse" || !window.matchMedia("(hover: hover) and (pointer: fine)").matches ) { return; } const rect = event.currentTarget.getBoundingClientRect(); pointRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top }; schedule(); }; return (

{ const root = rootRef.current; if (!root) return; pointRef.current = { x: root.clientWidth * 0.72, y: root.clientHeight * 0.28 }; schedule(); }} className="relative isolate grid grid-cols-2 gap-1.5 overflow-hidden rounded-[13px] bg-[radial-gradient(circle_at_76%_16%,rgba(229,154,89,.22),transparent_34%),radial-gradient(circle_at_12%_90%,rgba(80,130,116,.22),transparent_40%)]" >

{items.map((item) => { const interactive = typeof onSelect === "function"; const selected = interactive && item.id === selectedId; const cardClassName = `group relative z-10 min-h-[106px] min-w-0 overflow-hidden rounded-xl border bg-[#211d17]/94 p-3 text-left shadow-[inset_0_1px_0_rgba(255,255,255,.03)] ${ selected ? "border-[#f1c98d]/75" : "border-white/[0.1]" } ${ item.wide ? "col-span-2" : "" } ${ interactive ? "outline-none focus-visible:ring-2 focus-visible:ring-[#f1c98d] focus-visible:ring-offset-1 focus-visible:ring-offset-[#15130f]" : "" } ${ interactive && !reduced ? "transition-[transform,border-color,background-color] duration-200 [transition-timing-function:cubic-bezier(.2,.8,.2,1)] [@media(hover:hover)_and_(pointer:fine)]:hover:-translate-y-0.5 [@media(hover:hover)_and_(pointer:fine)]:hover:border-[#f1c98d]/45" : "" }`; const content = ( <> {item.icon ?? } {item.meta ? ( {item.meta} ) : null} {item.value} {item.label} {interactive ? ( ) : null} ); return interactive ? ( ) : (

{content}

); })}

); } 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":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/spotlight-bento.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/spotlight-bento.tsx"}],"className":"h-[70svh] min-h-80"}]]}]