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:T211e,"use client"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "motion/react"; import { type CSSProperties, cloneElement, type ReactElement, type Ref, useEffect, useRef, useState, } from "react"; export interface GlowHoverTheme { hue: number; lightness: number; saturation: number; } export interface GlowHoverItem { element: ReactElement; id: string; theme?: GlowHoverTheme; } export interface GlowHoverProps { className?: string; glowIntensity?: number; items: GlowHoverItem[]; maskSize?: number; } // Legacy types for backward compatibility export type GlowHoverCardTheme = GlowHoverTheme; export type GlowHoverCardItem = GlowHoverItem; export type GlowHoverCardsProps = GlowHoverProps; export default function GlowHover({ items, className = "", maskSize = 400, glowIntensity = 0.15, }: GlowHoverProps) { const containerRef = useRef(null); const overlayRef = useRef(null); const itemRefs = useRef<(HTMLElement | null)[]>([]); const overlayItemRefs = useRef<(HTMLElement | null)[]>([]); const [mousePosition, setMousePosition] = useState<{ x: number; y: number; opacity: number; }>({ opacity: 0, x: 0, y: 0 }); const shouldReduceMotion = useReducedMotion(); useEffect(() => { const container = containerRef.current; if (!container || shouldReduceMotion) { return; } const handlePointerMove = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); // Use clientX/clientY for viewport coordinates, then subtract container position const x = e.clientX - rect.left; const y = e.clientY - rect.top; setMousePosition({ opacity: 1, x, y, }); }; const handlePointerLeave = () => { setMousePosition((prev) => ({ ...prev, opacity: 0 })); }; container.addEventListener("pointermove", handlePointerMove); container.addEventListener("pointerleave", handlePointerLeave); return () => { container.removeEventListener("pointermove", handlePointerMove); container.removeEventListener("pointerleave", handlePointerLeave); }; }, [shouldReduceMotion]); // Sync overlay card sizes and positions with original cards useEffect(() => { if (shouldReduceMotion || !overlayRef.current || !containerRef.current) { return; } const syncCards = () => { const container = containerRef.current; const overlay = overlayRef.current; if (!(container && overlay)) { return; } itemRefs.current.forEach((itemEl, index) => { const overlayItemEl = overlayItemRefs.current[index]; if (!(itemEl && overlayItemEl)) { return; } const itemRect = itemEl.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); // Calculate position relative to container const left = itemRect.left - containerRect.left; const top = itemRect.top - containerRect.top; overlayItemEl.style.position = "absolute"; overlayItemEl.style.left = `${left}px`; overlayItemEl.style.top = `${top}px`; overlayItemEl.style.width = `${itemRect.width}px`; overlayItemEl.style.height = `${itemRect.height}px`; }); }; const observers: ResizeObserver[] = []; const mutationObserver = new MutationObserver(syncCards); // Sync on resize for (const itemEl of itemRefs.current) { if (!itemEl) { continue; } const observer = new ResizeObserver(() => { syncCards(); }); observer.observe(itemEl); observers.push(observer); } // Sync on DOM mutations if (containerRef.current) { mutationObserver.observe(containerRef.current, { attributes: true, childList: true, subtree: true, }); } // Initial sync syncCards(); // Sync on scroll and resize window.addEventListener("scroll", syncCards, { passive: true }); window.addEventListener("resize", syncCards); return () => { for (const observer of observers) { observer.disconnect(); } mutationObserver.disconnect(); window.removeEventListener("scroll", syncCards); window.removeEventListener("resize", syncCards); }; }, [shouldReduceMotion]); // Apply glow effect styles to an element const applyGlowStyles = ( element: ReactElement, theme?: GlowHoverTheme, isOverlay = false ): ReactElement => { if (!isOverlay) { return element; } const props = element.props as { style?: CSSProperties; className?: string; }; const existingStyle = props.style || {}; const existingClassName = props.className || ""; let glowStyles: CSSProperties; if (theme) { // Use theme HSL colors const hsl = `${theme.hue}, ${theme.saturation}%, ${theme.lightness}%`; glowStyles = { backgroundColor: `hsla(${hsl}, ${glowIntensity})`, borderColor: `hsla(${hsl}, 1)`, boxShadow: `0 0 0 1px inset hsl(${hsl}), 0 0 20px hsla(${hsl}, ${glowIntensity})`, }; } else { // Use brand color from CSS variable (OKLCH format supports / opacity) const brandColor = "var(--color-brand)"; // OKLCH format: oklch(L C H / opacity) const brandWithOpacity = `color-mix(in oklch, ${brandColor}, transparent ${(1 - glowIntensity) * 100}%)`; glowStyles = { backgroundColor: brandWithOpacity, borderColor: brandColor, boxShadow: `0 0 0 1px inset ${brandColor}, 0 0 20px ${brandWithOpacity}`, }; } // Merge with existing styles const mergedStyle = { ...existingStyle, ...glowStyles, }; return cloneElement(element, { ...props, className: cn(existingClassName, "glow-overlay-item"), style: mergedStyle, // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing } as any); }; return (

{/* Original Items */}

{items.map((item, index) => cloneElement(item.element, { key: item.id, ref: (el: HTMLElement | null) => { itemRefs.current[index] = el; // Preserve existing ref if any const elementProps = item.element.props as { ref?: Ref; }; const existingRef = elementProps?.ref; if (typeof existingRef === "function") { existingRef(el); } else if (existingRef && typeof existingRef === "object") { (existingRef as { current: HTMLElement | null }).current = el; } }, // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing } as any) )}

{/* Overlay with Glow Effect */} {!shouldReduceMotion && (

{items.map((item, index) => { const glowElement = applyGlowStyles(item.element, item.theme, true); return cloneElement(glowElement, { key: item.id, ref: (el: HTMLElement | null) => { overlayItemRefs.current[index] = el; }, // biome-ignore lint/suspicious/noExplicitAny: cloneElement requires flexible typing } as any); })}

)}

); } // Legacy export for backward compatibility export function GlowHoverCards(props: GlowHoverCardsProps) { return ; } 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":"@smoothui","registryDependencies":["https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/glow-hover-card/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]