50: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"] 51:T1c62,"use client"; import NextImage from "next/image"; import type React from "react"; import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/cn"; // ========================================== // TYPES & INTERFACES // ========================================== export interface PreviewData { /** Image URL for the preview card */ image: string; /** Title displayed in the preview card */ title: string; /** Subtitle or description displayed below the title */ subtitle?: string; } export interface HoverPreviewLinkProps { /** Unique key to identify which preview data to show */ previewKey: string; /** Content to render as the hoverable link */ children: React.ReactNode; /** Additional CSS classes for the link */ className?: string; } export interface HoverPreviewCardProps { /** Width of the preview card in pixels */ width?: number; /** Border radius of the card */ borderRadius?: number; /** Additional CSS classes for the card */ className?: string; } export interface HoverPreviewProviderProps { /** Preview data object with keys matching the previewKey in HoverPreviewLink */ data: Record; /** Children components (should include HoverPreviewLink components) */ children: React.ReactNode; /** Card configuration options */ cardProps?: HoverPreviewCardProps; /** Offset distance from cursor in pixels */ cursorOffset?: number; /** Whether to preload all images on mount */ preloadImages?: boolean; /** Additional CSS classes for the container */ className?: string; } // ========================================== // CONTEXT // ========================================== interface HoverPreviewContextValue { data: Record; activePreview: PreviewData | null; position: { x: number; y: number }; isVisible: boolean; cardProps: HoverPreviewCardProps; handleHoverStart: (key: string, e: React.MouseEvent) => void; handleHoverMove: (e: React.MouseEvent) => void; handleHoverEnd: () => void; } const HoverPreviewContext = createContext( null, ); function useHoverPreview() { const context = useContext(HoverPreviewContext); if (!context) { throw new Error( "HoverPreviewLink must be used within a HoverPreviewProvider", ); } return context; } // ========================================== // COMPONENTS // ========================================== export function HoverPreviewProvider({ data, children, cardProps = {}, cursorOffset = 20, preloadImages = true, className, }: HoverPreviewProviderProps) { const [activePreview, setActivePreview] = useState(null); const [position, setPosition] = useState({ x: 0, y: 0 }); const [isVisible, setIsVisible] = useState(false); const cardRef = useRef(null); const cardWidth = cardProps.width ?? 300; const cardHeight = 250; // Preload all images on mount useEffect(() => { if (!preloadImages) return; Object.values(data).forEach((item) => { const img = new Image(); img.crossOrigin = "anonymous"; img.src = item.image; }); }, [data, preloadImages]); const updatePosition = useCallback( (e: React.MouseEvent | MouseEvent) => { let x = e.clientX - cardWidth / 2; let y = e.clientY - cardHeight - cursorOffset; // Boundary checks if (x + cardWidth > window.innerWidth - 20) { x = window.innerWidth - cardWidth - 20; } if (x < 20) { x = 20; } if (y < 20) { y = e.clientY + cursorOffset; } setPosition({ x, y }); }, [cardWidth, cursorOffset], ); const handleHoverStart = useCallback( (key: string, e: React.MouseEvent) => { const previewData = data[key]; if (previewData) { setActivePreview(previewData); setIsVisible(true); updatePosition(e); } }, [data, updatePosition], ); const handleHoverMove = useCallback( (e: React.MouseEvent) => { if (isVisible) { updatePosition(e); } }, [isVisible, updatePosition], ); const handleHoverEnd = useCallback(() => { setIsVisible(false); }, []); const contextValue: HoverPreviewContextValue = { data, activePreview, position, isVisible, cardProps: { width: cardWidth, ...cardProps }, handleHoverStart, handleHoverMove, handleHoverEnd, }; return (

{children}

); } export function HoverPreviewLink({ previewKey, children, className, }: HoverPreviewLinkProps) { const { handleHoverStart, handleHoverMove, handleHoverEnd } = useHoverPreview(); return ( handleHoverStart(previewKey, e)} onMouseMove={handleHoverMove} onMouseLeave={handleHoverEnd} onFocus={(e) => handleHoverStart(previewKey, e as unknown as React.MouseEvent) } > {children} ); } const HoverPreviewCard = forwardRef((_, ref) => { const { activePreview, position, isVisible, cardProps } = useHoverPreview(); if (!activePreview) return null; return (

{activePreview.title}

{activePreview.subtitle && (

{activePreview.subtitle}

)}

); }); HoverPreviewCard.displayName = "HoverPreviewCard"; // ========================================== // EXPORTS // ========================================== export { HoverPreviewContext, useHoverPreview }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"ui/hover-preview.tsx","content":"$51","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]