51: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"] 52: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"] 53:T2f2e,"use client"; import { cn } from "@/lib/utils"; import gsap from "gsap"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { useClickOutside } from "./use-click-outside"; const MEASURE_DELAY_SHORT = 100; const MEASURE_DELAY_LONG = 500; const DEFAULT_TRIGGER_SIZE = 44; const DEFAULT_CONTENT_WIDTH = 240; const DEFAULT_SIDE_OFFSET = 24; const DEFAULT_SPEED = 0.25; const GOO_STD_DEVIATION = 10; const GOO_MATRIX_ALPHA_MULTIPLIER = 24; const GOO_MATRIX_ALPHA_OFFSET = -10; const CONTENT_BORDER_RADIUS = 18; export type GooeyPopoverProps = { children: React.ReactNode; trigger?: React.ReactNode; /** * Accessible name for the trigger. Required when `trigger` renders no text * of its own; the default plus icon falls back to "Open popover". */ triggerLabel?: string; triggerSize?: number; isOpen?: boolean; onOpenChange?: (open: boolean) => void; side?: "top" | "bottom"; sideOffset?: number; contentWidth?: number; speed?: number; bgClassName?: string; contentClassName?: string; className?: string; }; export default function GooeyPopover({ children, trigger, triggerLabel, triggerSize = DEFAULT_TRIGGER_SIZE, isOpen: controlledIsOpen, onOpenChange, side = "top", sideOffset = DEFAULT_SIDE_OFFSET, contentWidth = DEFAULT_CONTENT_WIDTH, speed = DEFAULT_SPEED, bgClassName = "bg-neutral-900", contentClassName, className, }: GooeyPopoverProps) { const filterId = useId(); const isControlled = controlledIsOpen !== undefined; const [internalIsOpen, setInternalIsOpen] = useState(false); const isOpen = isControlled ? controlledIsOpen : internalIsOpen; const [isVisible, setIsVisible] = useState(false); const containerRef = useRef(null); const measureRef = useRef(null); const filteredContentRef = useRef(null); const unfilteredContentRef = useRef(null); const innerContentRef = useRef(null); const timelineRef = useRef(null); const [contentHeight, setContentHeight] = useState(0); const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setPrefersReducedMotion(mq.matches); const handler = (e: MediaQueryListEvent) => { setPrefersReducedMotion(e.matches); }; mq.addEventListener("change", handler); return () => mq.removeEventListener("change", handler); }, []); const setIsOpen = useCallback( (open: boolean) => { if (!isControlled) { setInternalIsOpen(open); } onOpenChange?.(open); }, [isControlled, onOpenChange] ); const handleClose = useCallback(() => { if (isOpen) { setIsOpen(false); } }, [isOpen, setIsOpen]); useClickOutside(containerRef, handleClose); // Escape key to close useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" && isOpen) { setIsOpen(false); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [isOpen, setIsOpen]); // Measure content height useEffect(() => { const measureHeight = () => { if (measureRef.current) { const height = measureRef.current.scrollHeight; if (height > 0) { setContentHeight(height); } } }; const timeoutId = setTimeout(measureHeight, MEASURE_DELAY_SHORT); const timeoutId2 = setTimeout(measureHeight, MEASURE_DELAY_LONG); return () => { clearTimeout(timeoutId); clearTimeout(timeoutId2); }; }, [children]); const triggerRadius = triggerSize / 2; // Position content so its edge clears the trigger with sideOffset gap const translateY = side === "top" ? -(contentHeight + sideOffset) : triggerSize + sideOffset; const contentLeft = triggerRadius - contentWidth / 2; // GSAP animations useEffect(() => { if (contentHeight === 0) { return; } // Kill any running timeline if (timelineRef.current) { timelineRef.current.kill(); } const filteredTarget = filteredContentRef.current; const unfilteredTarget = unfilteredContentRef.current; const innerTarget = innerContentRef.current; if (!(unfilteredTarget && innerTarget)) { return; } if (prefersReducedMotion) { if (isOpen) { setIsVisible(true); gsap.set(unfilteredTarget, { borderRadius: CONTENT_BORDER_RADIUS, height: contentHeight, opacity: 1, width: contentWidth, x: contentLeft, y: translateY, }); gsap.set(innerTarget, { opacity: 1, y: 0 }); } else { gsap.set(unfilteredTarget, { borderRadius: triggerRadius, height: triggerSize, opacity: 0, width: triggerSize, x: 0, y: 0, }); gsap.set(innerTarget, { opacity: 0, y: 0 }); setIsVisible(false); } return; } if (isOpen) { setIsVisible(true); // Start both content shapes as circles at trigger position const startProps = { borderRadius: triggerRadius, height: triggerSize, opacity: 1, width: triggerSize, x: 0, y: 0, }; if (filteredTarget) { gsap.set(filteredTarget, startProps); } gsap.set(unfilteredTarget, startProps); gsap.set(innerTarget, { opacity: 0, y: 16 }); const tl = gsap.timeline(); // Filtered content: morph to rectangle with borderRadius=0 // The goo filter softens the edges naturally if (filteredTarget) { tl.to( filteredTarget, { borderRadius: 0, duration: speed, ease: "power1.in", height: contentHeight, width: contentWidth, x: contentLeft, y: translateY, }, 0 ); } // Unfiltered content: morph to rectangle with rounded corners tl.to( unfilteredTarget, { borderRadius: CONTENT_BORDER_RADIUS, duration: speed, ease: "power1.in", height: contentHeight, width: contentWidth, x: contentLeft, y: translateY, }, 0 ); // Content text fade in (overlapping with shape morph) tl.to( innerTarget, { duration: speed * 0.75, ease: "power1.out", opacity: 1, y: 0, }, speed * 0.575 ); timelineRef.current = tl; } else { // Content text fade out first const tl = gsap.timeline({ onComplete: () => { setIsVisible(false); }, }); tl.to(innerTarget, { duration: speed * 0.4, ease: "power1.in", opacity: 0, y: 8, }); // Shape morph back: rectangle → circle const targets = [filteredTarget, unfilteredTarget].filter(Boolean); tl.to( targets, { borderRadius: triggerRadius, duration: speed, ease: "power1.in", height: triggerSize, width: triggerSize, x: 0, y: 0, }, speed * 0.2 ); // Fade out at the end tl.to( targets, { duration: speed * 0.3, ease: "power1.in", opacity: 0, }, `-=${speed * 0.3}` ); timelineRef.current = tl; } return () => { if (timelineRef.current) { timelineRef.current.kill(); } }; }, [ isOpen, contentHeight, contentWidth, triggerSize, triggerRadius, contentLeft, translateY, speed, prefersReducedMotion, ]); const defaultTriggerIcon = ( ); return (

{/* SVG goo filter definition */} {/* Hidden measurement div */} {/* Filtered layer: SVG goo filter creates liquid bridge between blob and content */} {!prefersReducedMotion && (isOpen || isVisible) && (

{/* Blob: circle at trigger position — stays put while content morphs away */}

{/* Content shape: morphs from circle to rectangle (borderRadius=0, goo softens edges) */}

)} {/* Trigger button (z-10, sits on top of filtered blob) */} {/* Unfiltered content panel (z-10, clean edges, actual text) */} {isOpen || isVisible ? ( ) : null}

); } 54:T431,"use client"; import { type RefObject, useEffect } from "react"; type EventType = | "mousedown" | "mouseup" | "touchstart" | "touchend" | "focusin" | "focusout"; export function useClickOutside( ref: RefObject | RefObject[], handler: (event: Event) => void, eventType: EventType = "mousedown" ): void { useEffect(() => { function callback(event: Event) { const target = event.target as Node; // Do nothing if the target is not connected element with document if (!target?.isConnected) { return; } const isOutside = Array.isArray(ref) ? ref .filter((r) => Boolean(r.current)) .every((r) => r.current && !r.current.contains(target)) : ref.current && !ref.current.contains(target); if (isOutside) { handler(event); } } window.addEventListener(eventType, callback); return () => { window.removeEventListener(eventType, callback); }; }, [ref, handler, eventType]); } 50:["$","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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}]]}],["$","$L51",null,{"namespace":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"index.tsx","content":"$53","type":"registry:ui","target":"components/smoothui/gooey-popover/index.tsx"},{"path":"use-click-outside.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/gooey-popover/use-click-outside.tsx"}],"className":"h-[70svh] min-h-80"}]]}]