61: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"] 62: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"] 63:T4b80,'use client'; import * as React from 'react'; import { motion, AnimatePresence, LayoutGroup, type Transition, type HTMLMotionProps, isMotionComponent, } from 'motion/react'; import { useFloating, autoUpdate, offset as floatingOffset, flip, shift, arrow as floatingArrow, FloatingPortal, FloatingArrow, type UseFloatingReturn, } from '@floating-ui/react'; import { cn } from '@/lib/utils'; type TooltipProviderProps = TooltipProviderPrimitiveProps; function TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) { return ; } type TooltipProps = TooltipPrimitiveProps; function Tooltip({ sideOffset = 10, ...props }: TooltipProps) { return ; } type TooltipTriggerProps = TooltipTriggerPrimitveProps; function TooltipTrigger({ ...props }: TooltipTriggerProps) { return ; } type TooltipContentProps = Omit & { children: React.ReactNode; layout?: boolean | 'position' | 'size' | 'preserve-aspect'; }; function TooltipContent({ className, children, layout = 'preserve-aspect', ...props }: TooltipContentProps) { return ( {children} ); } export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, type TooltipProviderProps, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, }; type Side = 'top' | 'bottom' | 'left' | 'right'; type Align = 'start' | 'center' | 'end'; type TooltipData = { contentProps: HTMLMotionProps<'div'>; contentAsChild: boolean; rect: DOMRect; side: Side; sideOffset: number; align: Align; alignOffset: number; id: string; }; type GlobalTooltipContextType = { showTooltip: (data: TooltipData) => void; hideTooltip: () => void; hideImmediate: () => void; currentTooltip: TooltipData | null; transition: Transition; globalId: string; setReferenceEl: (el: HTMLElement | null) => void; referenceElRef: React.RefObject; }; const [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext('GlobalTooltipProvider'); type TooltipContextType = { props: HTMLMotionProps<'div'>; setProps: React.Dispatch>>; asChild: boolean; setAsChild: React.Dispatch>; side: Side; sideOffset: number; align: Align; alignOffset: number; id: string; }; const [LocalTooltipProvider, useTooltip] = getStrictContext( 'LocalTooltipProvider', ); function getResolvedSide(placement: Side | `${Side}-${Align}`) { if (placement.includes('-')) { return placement.split('-')[0] as Side; } return placement as Side; } function initialFromSide(side: Side): Partial> { if (side === 'top') return { y: 15 }; if (side === 'bottom') return { y: -15 }; if (side === 'left') return { x: 15 }; return { x: -15 }; } type TooltipProviderPrimitiveProps = { children: React.ReactNode; id?: string; openDelay?: number; closeDelay?: number; transition?: Transition; }; function TooltipProviderPrimitive({ children, id, openDelay = 700, closeDelay = 300, transition = { type: 'spring', stiffness: 300, damping: 35 }, }: TooltipProviderProps) { const globalId = React.useId(); const [currentTooltip, setCurrentTooltip] = React.useState(null); const timeoutRef = React.useRef(null); const lastCloseTimeRef = React.useRef(0); const referenceElRef = React.useRef(null); const showTooltip = React.useCallback( (data: TooltipData) => { if (timeoutRef.current) clearTimeout(timeoutRef.current); if (currentTooltip !== null) { setCurrentTooltip(data); return; } const now = Date.now(); const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay; timeoutRef.current = window.setTimeout( () => setCurrentTooltip(data), delay, ); }, [openDelay, closeDelay, currentTooltip], ); const hideTooltip = React.useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); timeoutRef.current = window.setTimeout(() => { setCurrentTooltip(null); lastCloseTimeRef.current = Date.now(); }, closeDelay); }, [closeDelay]); const hideImmediate = React.useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); setCurrentTooltip(null); lastCloseTimeRef.current = Date.now(); }, []); const setReferenceEl = React.useCallback((el: HTMLElement | null) => { referenceElRef.current = el; }, []); React.useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') hideImmediate(); }; window.addEventListener('keydown', onKeyDown, true); window.addEventListener('scroll', hideImmediate, true); window.addEventListener('resize', hideImmediate, true); return () => { window.removeEventListener('keydown', onKeyDown, true); window.removeEventListener('scroll', hideImmediate, true); window.removeEventListener('resize', hideImmediate, true); }; }, [hideImmediate]); return ( {children} ); } type RenderedTooltipContextType = { side: Side; align: Align; open: boolean; }; const [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext('RenderedTooltipContext'); type FloatingContextType = { context: UseFloatingReturn['context']; arrowRef: React.RefObject; }; const [FloatingProvider, useFloatingContext] = getStrictContext('FloatingContext'); const MotionTooltipArrow = motion.create(FloatingArrow); type TooltipArrowProps = Omit< React.ComponentProps, 'context' > & { withTransition?: boolean; }; function TooltipArrowPrimitive({ ref, withTransition = true, ...props }: TooltipArrowProps) { const { side, align, open } = useRenderedTooltip(); const { context, arrowRef } = useFloatingContext(); const { transition, globalId } = useGlobalTooltip(); React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement); const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side]; return ( ); } type TooltipPortalProps = React.ComponentProps; function TooltipPortal(props: TooltipPortalProps) { return ; } function TooltipOverlay() { const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip(); const [rendered, setRendered] = React.useState<{ data: TooltipData | null; open: boolean; }>({ data: null, open: false }); const arrowRef = React.useRef(null); const side = rendered.data?.side ?? 'top'; const align = rendered.data?.align ?? 'center'; const { refs, x, y, strategy, context, update } = useFloating({ placement: align === 'center' ? side : `${side}-${align}`, whileElementsMounted: autoUpdate, middleware: [ floatingOffset({ mainAxis: rendered.data?.sideOffset ?? 0, crossAxis: rendered.data?.alignOffset ?? 0, }), flip(), shift({ padding: 8 }), floatingArrow({ element: arrowRef }), ], }); React.useEffect(() => { if (currentTooltip) { setRendered({ data: currentTooltip, open: true }); } else { setRendered((p) => (p.data ? { ...p, open: false } : p)); } }, [currentTooltip]); React.useLayoutEffect(() => { if (referenceElRef.current) { refs.setReference(referenceElRef.current); update(); } }, [referenceElRef, refs, update, rendered.data]); const ready = x != null && y != null; const Component = rendered.data?.contentAsChild ? Slot : motion.div; const resolvedSide = getResolvedSide(context.placement); return ( {rendered.data && ready && (

{ if (!rendered.open) setRendered({ data: null, open: false }); }} transition={transition} {...rendered.data.contentProps} style={{ position: 'relative', ...(rendered.data.contentProps?.style || {}), }} />

)} ); } type TooltipPrimitiveProps = { children: React.ReactNode; side?: Side; sideOffset?: number; align?: Align; alignOffset?: number; }; function TooltipPrimitive({ children, side = 'top', sideOffset = 0, align = 'center', alignOffset = 0, }: TooltipPrimitiveProps) { const id = React.useId(); const [props, setProps] = React.useState>({}); const [asChild, setAsChild] = React.useState(false); return ( {children} ); } type TooltipContentPrimiviteProps = WithAsChild>; function shallowEqualWithoutChildren( a?: HTMLMotionProps<'div'>, b?: HTMLMotionProps<'div'>, ) { if (a === b) return true; if (!a || !b) return false; const keysA = Object.keys(a).filter((k) => k !== 'children'); const keysB = Object.keys(b).filter((k) => k !== 'children'); if (keysA.length !== keysB.length) return false; for (const k of keysA) { // @ts-expect-error index if (a[k] !== b[k]) return false; } return true; } function TooltipContentPrimitive({ asChild = false, ...props }: TooltipContentPrimiviteProps) { const { setProps, setAsChild } = useTooltip(); const lastPropsRef = React.useRef | undefined>( undefined, ); React.useEffect(() => { if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) { lastPropsRef.current = props; setProps(props); } }, [props, setProps]); React.useEffect(() => { setAsChild(asChild); }, [asChild, setAsChild]); return null; } type TooltipTriggerPrimitveProps = WithAsChild>; function TooltipTriggerPrimitive({ ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onPointerDown, asChild = false, ...props }: TooltipTriggerPrimitveProps) { const { props: contentProps, asChild: contentAsChild, side, sideOffset, align, alignOffset, id, } = useTooltip(); const { showTooltip, hideTooltip, hideImmediate, currentTooltip, setReferenceEl, } = useGlobalTooltip(); const triggerRef = React.useRef(null); React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement); const suppressNextFocusRef = React.useRef(false); const handleOpen = React.useCallback(() => { if (!triggerRef.current) return; setReferenceEl(triggerRef.current); const rect = triggerRef.current.getBoundingClientRect(); showTooltip({ contentProps, contentAsChild, rect, side, sideOffset, align, alignOffset, id, }); }, [ showTooltip, setReferenceEl, contentProps, contentAsChild, side, sideOffset, align, alignOffset, id, ]); const handlePointerDown = React.useCallback( (e: React.PointerEvent) => { onPointerDown?.(e); if (currentTooltip?.id === id) { suppressNextFocusRef.current = true; hideImmediate(); Promise.resolve().then(() => { suppressNextFocusRef.current = false; }); } }, [onPointerDown, currentTooltip?.id, id, hideImmediate], ); const handleMouseEnter = React.useCallback( (e: React.MouseEvent) => { onMouseEnter?.(e); handleOpen(); }, [handleOpen, onMouseEnter], ); const handleMouseLeave = React.useCallback( (e: React.MouseEvent) => { onMouseLeave?.(e); hideTooltip(); }, [hideTooltip, onMouseLeave], ); const handleFocus = React.useCallback( (e: React.FocusEvent) => { onFocus?.(e); if (suppressNextFocusRef.current) return; handleOpen(); }, [handleOpen, onFocus], ); const handleBlur = React.useCallback( (e: React.FocusEvent) => { onBlur?.(e); hideTooltip(); }, [hideTooltip, onBlur], ); const Component = asChild ? Slot : motion.div; return ( ); } function getStrictContext( name?: string, ): readonly [ ({ value, children, }: { value: T; children?: React.ReactNode; }) => React.JSX.Element, () => T, ] { const Context = React.createContext(undefined); const Provider = ({ value, children, }: { value: T; children?: React.ReactNode; }) => {children}; const useSafeContext = () => { const ctx = React.useContext(Context); if (ctx === undefined) { throw new Error(`useContext must be used within ${name ?? 'a Provider'}`); } return ctx; }; return [Provider, useSafeContext] as const; } export { getStrictContext }; type AnyProps = Record; type DOMMotionProps = Omit< HTMLMotionProps, 'ref' > & { ref?: React.Ref }; type WithAsChild = | (Base & { asChild: true; children: React.ReactElement }) | (Base & { asChild?: false | undefined }); type SlotProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any children?: any; } & DOMMotionProps; function mergeRefs( ...refs: (React.Ref | undefined)[] ): React.RefCallback { return (node) => { refs.forEach((ref) => { if (!ref) return; if (typeof ref === 'function') { ref(node); } else { (ref as React.RefObject).current = node; } }); }; } function mergeProps( childProps: AnyProps, slotProps: DOMMotionProps, ): AnyProps { const merged: AnyProps = { ...childProps, ...slotProps }; if (childProps.className || slotProps.className) { merged.className = cn( childProps.className as string, slotProps.className as string, ); } if (childProps.style || slotProps.style) { merged.style = { ...(childProps.style as React.CSSProperties), ...(slotProps.style as React.CSSProperties), }; } return merged; } const motionCache = new Map(); function getMotionComponent(type: React.ElementType) { if (typeof type === 'object' && type !== null && isMotionComponent(type)) return type; if (!motionCache.has(type)) { motionCache.set(type, motion.create(type)); } return motionCache.get(type)!; } function Slot({ children, ref, ...props }: SlotProps) { if (!React.isValidElement(children)) return null; const ComponentType = getMotionComponent(children.type as React.ElementType); const { ref: childRef, ...childProps } = children.props as AnyProps; const mergedProps = mergeProps(childProps, props); return ( // eslint-disable-next-line react-hooks/static-components , ref)} /> ); } export { Slot, type SlotProps, type WithAsChild, type DOMMotionProps, type AnyProps, }; 60:["$","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","@floating-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact","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":"@floating-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@watermelon","registryDependencies":["utils"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/watermelon-ui/tooltip-animated.tsx","content":"$63","type":"registry:ui","target":"components/ui/tooltip-animated.tsx"}],"className":"h-[70svh] min-h-80"}]]}]