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:T2e8e,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const RADIUS = 11; const MIN_W = 160; const MIN_H = 88; const useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect; export type PopoverSide = "top" | "right" | "bottom" | "left"; export type PopoverAlign = "start" | "center" | "end"; const FLIP: Record = { top: "bottom", bottom: "top", left: "right", right: "left", }; const ARROW_EDGE: Record = { bottom: "border-t border-l", top: "border-b border-r", right: "border-b border-l", left: "border-t border-r", }; const FROM: Record = { top: { y: 6 }, bottom: { y: -6 }, left: { x: 6 }, right: { x: -6 }, }; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), Math.max(min, max)); } export type UsePopoverOptions = { open: boolean; side?: PopoverSide; align?: PopoverAlign; offset?: number; padding?: number; arrowSize?: number; boundary?: React.RefObject; }; export type UsePopoverResult = { anchorRef: React.RefObject ; floatingRef: React.RefObject; panelRef: React.RefObject; contentRef: React.RefObject; arrowRef: React.RefObject; side: PopoverSide; update: () => void; }; export function usePopover ({ open, side = "bottom", align = "center", offset = 10, padding = 8, arrowSize = 9, boundary, }: UsePopoverOptions): UsePopoverResult { const anchorRef = useRef (null); const floatingRef = useRef(null); const panelRef = useRef(null); const contentRef = useRef(null); const arrowRef = useRef(null); const [resolved, setResolved] = useState(side); const update = useCallback(() => { const anchor = anchorRef.current; const wrap = floatingRef.current; const panel = panelRef.current; if (!anchor || !wrap || !panel) return; const content = contentRef.current; panel.style.maxWidth = ""; if (content) content.style.maxHeight = ""; const a = anchor.getBoundingClientRect(); const b = boundary?.current?.getBoundingClientRect() ?? null; const vw = document.documentElement.clientWidth; const vh = document.documentElement.clientHeight; const left = b ? Math.max(padding, b.left + padding) : padding; const top = b ? Math.max(padding, b.top + padding) : padding; const right = b ? Math.min(vw - padding, b.right - padding) : vw - padding; const bottom = b ? Math.min(vh - padding, b.bottom - padding) : vh - padding; panel.style.maxWidth = `${Math.max(MIN_W, right - left)}px`; const room: Record = { top: a.top - top - offset, bottom: bottom - a.bottom - offset, left: a.left - left - offset, right: right - a.right - offset, }; let next = side; const wanted = next === "top" || next === "bottom" ? panel.offsetHeight : panel.offsetWidth; if (room[next] < wanted && room[FLIP[next]] > room[next]) next = FLIP[next]; const horizontal = next === "top" || next === "bottom"; if (!horizontal) { panel.style.maxWidth = `${Math.max(MIN_W, Math.min(right - left, room[next]))}px`; } if (content) { const chrome = panel.offsetHeight - content.offsetHeight; const allowed = horizontal ? room[next] : bottom - top; content.style.maxHeight = `${Math.max(MIN_H, allowed - chrome)}px`; } const w = panel.offsetWidth; const h = panel.offsetHeight; let x: number; let y: number; if (horizontal) { y = next === "top" ? a.top - offset - h : a.bottom + offset; x = align === "start" ? a.left : align === "end" ? a.right - w : a.left + (a.width - w) / 2; } else { x = next === "left" ? a.left - offset - w : a.right + offset; y = align === "start" ? a.top : align === "end" ? a.bottom - h : a.top + (a.height - h) / 2; } x = clamp(x, left, right - w); y = clamp(y, top, bottom - h); const base = wrap.getBoundingClientRect(); const originX = base.left - (parseFloat(wrap.style.left) || 0); const originY = base.top - (parseFloat(wrap.style.top) || 0); wrap.style.left = `${Math.round(x - originX)}px`; wrap.style.top = `${Math.round(y - originY)}px`; const half = arrowSize / 2; const point = horizontal ? clamp(a.left + a.width / 2 - x, RADIUS + half, w - RADIUS - half) : clamp(a.top + a.height / 2 - y, RADIUS + half, h - RADIUS - half); panel.style.transformOrigin = horizontal ? `${Math.round(point)}px ${next === "top" ? h : 0}px` : `${next === "left" ? w : 0}px ${Math.round(point)}px`; const arrow = arrowRef.current; if (arrow) { if (horizontal) { arrow.style.left = `${Math.round(point - half)}px`; arrow.style.top = `${Math.round(next === "top" ? h - half : -half)}px`; } else { arrow.style.top = `${Math.round(point - half)}px`; arrow.style.left = `${Math.round(next === "left" ? w - half : -half)}px`; } } setResolved((prev) => (prev === next ? prev : next)); }, [side, align, offset, padding, arrowSize, boundary]); useIsoLayoutEffect(() => { if (!open) return; update(); }, [open, update]); useEffect(() => { if (!open) return; let frame = 0; const schedule = () => { if (frame) return; frame = requestAnimationFrame(() => { frame = 0; update(); }); }; const observer = new ResizeObserver(schedule); if (anchorRef.current) observer.observe(anchorRef.current); if (contentRef.current) observer.observe(contentRef.current); window.addEventListener("scroll", schedule, true); window.addEventListener("resize", schedule); return () => { cancelAnimationFrame(frame); observer.disconnect(); window.removeEventListener("scroll", schedule, true); window.removeEventListener("resize", schedule); }; }, [open, update]); return { anchorRef, floatingRef, panelRef, contentRef, arrowRef, side: resolved, update }; } export type PopoverProps = { trigger: React.ReactNode; children: React.ReactNode; label: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; side?: PopoverSide; align?: PopoverAlign; offset?: number; padding?: number; arrowSize?: number; boundary?: React.RefObject; triggerClassName?: string; className?: string; }; export function Popover({ trigger, children, label, open: controlled, defaultOpen = false, onOpenChange, side = "bottom", align = "center", offset = 10, padding = 8, arrowSize = 9, boundary, triggerClassName = "", className = "", }: PopoverProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = controlled ?? uncontrolled; const id = useId(); const reduced = useReducedMotion(); const notify = useRef(onOpenChange); notify.current = onOpenChange; const { anchorRef, floatingRef, panelRef, contentRef, arrowRef, side: at } = usePopover({ open, side, align, offset, padding, arrowSize, boundary, }); const setOpen = useCallback( (next: boolean) => { if (controlled === undefined) setUncontrolled(next); notify.current?.(next); }, [controlled], ); useEffect(() => { if (!open) return; panelRef.current?.focus({ preventScroll: true }); }, [open, panelRef]); useEffect(() => { if (!open) return; const onPointerDown = (event: PointerEvent) => { const target = event.target as Node | null; if (!target) return; if (panelRef.current?.contains(target) || anchorRef.current?.contains(target)) return; setOpen(false); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.stopPropagation(); anchorRef.current?.focus({ preventScroll: true }); setOpen(false); }; document.addEventListener("pointerdown", onPointerDown, true); document.addEventListener("keydown", onKeyDown, true); return () => { document.removeEventListener("pointerdown", onPointerDown, true); document.removeEventListener("keydown", onKeyDown, true); }; }, [open, setOpen, anchorRef, panelRef]); return ( <> {open ? (

{ const next = event.relatedTarget as Node | null; if (!next) return; if (panelRef.current?.contains(next) || anchorRef.current?.contains(next)) return; setOpen(false); }} >

) : null} ); } 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":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/popover.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/popover.tsx"}],"className":"h-[70svh] min-h-80"}]]}]