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:T1553,"use client"; import { useEffect, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type PointerEvent, type ReactNode, type Ref, } from "react"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } function prefersReducedMotion() { return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true; } // How quickly the circle grows and shrinks: the time constant of an ease-out, in ms. const EASE_MS = 90; interface HoverRevealProps extends ComponentProps<"div"> { /** The layer shown through the circle. Decorative: it is hidden from screen readers. */ reveal: ReactNode; /** Radius of the circle, in px. */ radius?: number; /** From 0 to 1: 0 gives a crisp edge, 1 fades from the centre out. */ softness?: number; /** Classes for the revealed layer. */ revealClassName?: string; } /** * A second layer seen through a soft circle that follows the pointer: a * photo under a sketch, colour under greyscale, the answer under the * question. The circle opens when the pointer comes in and closes when it * leaves; it moves by writing CSS variables once per frame, so nothing * re-renders. Touch screens only see the base layer. The revealed layer is * hidden from screen readers and cannot take focus or clicks, so the base * (`children`) has to carry the meaning. With `prefers-reduced-motion` the * circle opens and closes at once. * * @example * } * > * A sea chart of the bay

* */ function HoverReveal({ reveal, radius = 120, softness = 0.4, revealClassName, className, children, onPointerEnter, onPointerMove, onPointerLeave, ref, ...props }: HoverRevealProps) { const [active, setActive] = useState(false); const root = useRef(null); const mergedRef = useMemo(() => mergeRefs(ref, root), [ref]); const frame = useRef(0); const motion = useRef({ x: 0, y: 0, r: 0, target: 0, last: 0 }); useEffect(() => () => cancelAnimationFrame(frame.current), []); // Grows or shrinks the circle toward its target, and writes the position. const tick = (now: number) => { frame.current = 0; const node = root.current; if (!node) return; const state = motion.current; const elapsed = state.last ? now - state.last : 16; state.last = now; state.r += (state.target - state.r) * (1 - Math.exp(-elapsed / EASE_MS)); if (Math.abs(state.target - state.r) < 0.5) state.r = state.target; node.style.setProperty("--hover-reveal-x", `${state.x}px`); node.style.setProperty("--hover-reveal-y", `${state.y}px`); node.style.setProperty("--hover-reveal-r", `${state.r}px`); if (state.r !== state.target) frame.current = requestAnimationFrame(tick); else state.last = 0; }; const schedule = () => { if (!frame.current) frame.current = requestAnimationFrame(tick); }; const track = (event: PointerEvent) => { const bounds = event.currentTarget.getBoundingClientRect(); motion.current.x = event.clientX - bounds.left; motion.current.y = event.clientY - bounds.top; }; const handlePointerEnter = (event: PointerEvent) => { onPointerEnter?.(event); if (event.pointerType === "touch") return; track(event); motion.current.target = radius; if (prefersReducedMotion()) motion.current.r = radius; setActive(true); schedule(); }; const handlePointerMove = (event: PointerEvent) => { onPointerMove?.(event); if (event.pointerType === "touch") return; track(event); // A pointer that was already inside when the page loaded never "entered". if (!active) { motion.current.target = radius; if (prefersReducedMotion()) motion.current.r = radius; setActive(true); } schedule(); }; const handlePointerLeave = (event: PointerEvent) => { onPointerLeave?.(event); if (event.pointerType === "touch") return; motion.current.target = 0; if (prefersReducedMotion()) motion.current.r = 0; setActive(false); schedule(); }; const edge = Math.round((1 - Math.min(Math.max(softness, 0), 1)) * 100); const mask = `radial-gradient(circle var(--hover-reveal-r, 0px) at var(--hover-reveal-x, 50%) var(--hover-reveal-y, 50%), #000 ${edge}%, transparent 100%)`; return (

{children}

); } export { HoverReveal, type HoverRevealProps }; 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":[null,["$","$L52",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/hover-reveal.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]