60: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"] 61: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"] 62:Tfcb,"use client"; import { useRef, useState } from "react"; import { cn } from "@/lib/utils"; interface LensProps extends React.HTMLAttributes { /** The content to magnify, usually an `` that fills the box */ children: React.ReactNode; /** How many times the lens magnifies */ zoomFactor?: number; /** Lens radius in px */ radius?: number; /** Pin the lens open at this spot (percentages of width and height) and ignore the pointer — handy for touch screens and product callouts */ staticPosition?: { x: number; y: number }; } /** * A circular magnifier that follows the pointer over an image (or any * content). Keyboard users can focus it, move the lens with the arrow keys * (Shift for bigger steps) and hide it with Escape. The magnified copy is * aria-hidden and inert. */ export function Lens({ children, zoomFactor = 2, radius = 80, staticPosition, className, style, ...props }: LensProps) { const ref = useRef(null); const start = staticPosition ?? { x: 50, y: 50 }; // Position lives in CSS variables, so pointer moves never re-render. const pos = useRef(start); const [shown, setShown] = useState(false); const visible = shown || !!staticPosition; const moveTo = (x: number, y: number) => { pos.current = { x: Math.min(100, Math.max(0, x)), y: Math.min(100, Math.max(0, y)) }; ref.current?.style.setProperty("--x", `${pos.current.x}%`); ref.current?.style.setProperty("--y", `${pos.current.y}%`); setShown(true); }; const track = (event: React.PointerEvent) => { if (staticPosition) return; const rect = event.currentTarget.getBoundingClientRect(); moveTo( ((event.clientX - rect.left) / rect.width) * 100, ((event.clientY - rect.top) / rect.height) * 100 ); }; const keys: Record = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1], }; return (

event.pointerType === "mouse" && setShown(false)} onFocus={(event) => event.target.matches(":focus-visible") && setShown(true)} onBlur={() => setShown(false)} onKeyDown={(event) => { if (event.key === "Escape") setShown(false); const step = keys[event.key]; if (!step || staticPosition) return; event.preventDefault(); const size = event.shiftKey ? 12 : 4; moveTo(pos.current.x + step[0] * size, pos.current.y + step[1] * size); }} className={cn( "relative overflow-hidden rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", !staticPosition && "cursor-crosshair", className )} style={ { "--x": `${start.x}%`, "--y": `${start.y}%`, "--r": `${radius}px`, ...style, } as React.CSSProperties } {...props} > {children}

{children}

); } 5f:["$","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":[null,["$","$L60",null,{"namespace":"@velora","registryDependencies":["utils"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/components/velora/lens.tsx","content":"$62","type":"registry:ui","target":"components/velora/lens.tsx"}],"className":"h-[70svh] min-h-80"}]]}]