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:T21a4,"use client"; import { useEffect, useRef, useState, type FocusEvent, type KeyboardEvent, type ReactNode } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import useMeasure from "react-use-measure"; export interface MotionNavbarItem { label: string; /** Plain link when there is no dropdown. */ href?: string; /** Dropdown panel. */ content?: ReactNode; } export interface MotionNavbarProps { items: MotionNavbarItem[]; /** Left slot (brand). */ logo?: ReactNode; /** Right slot (buttons). */ actions?: ReactNode; /** Spring bounce of the highlight and dropdown morph, 0 to 0.5. */ bounce?: number; /** Seconds for the highlight glide and dropdown morph. */ duration?: number; /** Ms of grace before the dropdown closes after the pointer leaves. */ closeDelay?: number; className?: string; } /** * Navbar with a hover pill that glides between items and one shared dropdown that morphs * its width, height and position as you move between menus, sliding content the way you went. */ export function MotionNavbar({ items, logo, actions, bounce = 0.15, duration = 0.4, closeDelay = 150, className }: MotionNavbarProps) { const [hl, setHl] = useState<{ left: number; width: number } | null>(null); const [open, setOpen] = useState(null); const [dir, setDir] = useState(0); const [anchor, setAnchor] = useState({ center: 0, width: 0 }); const [ref, bounds] = useMeasure({ offsetSize: true }); const reduce = useReducedMotion(); const nav = useRef(null); const panel = useRef(null); const triggers = useRef<(HTMLElement | null)[]>([]); const timer = useRef>(undefined); useEffect(() => () => clearTimeout(timer.current), []); const cancelClose = () => clearTimeout(timer.current); const scheduleClose = () => { clearTimeout(timer.current); timer.current = setTimeout(() => setOpen(null), closeDelay); }; const show = (i: number) => { cancelClose(); const el = triggers.current[i]; const n = nav.current; if (el && n) { const r = el.getBoundingClientRect(); const nr = n.getBoundingClientRect(); setHl({ left: el.offsetLeft, width: el.offsetWidth }); if (items[i].content) setAnchor({ center: r.left + r.width / 2 - nr.left, width: nr.width }); } if (!items[i].content) { setOpen(null); return; } if (open !== null && open !== i) setDir(i > open ? 1 : -1); else if (open === null) setDir(0); setOpen(i); }; const focusPanel = () => requestAnimationFrame(() => panel.current?.querySelector("a, button, input, [tabindex]:not([tabindex='-1'])")?.focus()); const onTriggerKey = (e: KeyboardEvent, i: number) => { if (!items[i].content) return; if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") { e.preventDefault(); show(i); focusPanel(); } }; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && open !== null) { triggers.current[open]?.focus(); setOpen(null); } }; const onBlur = (e: FocusEvent) => { if (!nav.current?.contains(e.relatedTarget as Node)) { setOpen(null); setHl(null); } }; const spring = reduce ? { duration: 0 } : { type: "spring" as const, bounce, duration }; const current = open !== null ? items[open] : null; // Center the panel under its trigger, but keep it inside the bar when it fits. const half = bounds.width / 2; const left = half && bounds.width <= anchor.width ? Math.min(Math.max(anchor.center, half), anchor.width - half) : anchor.center; return (

{ scheduleClose(); setHl(null); }} onKeyDown={onKey} onBlur={onBlur} className={`relative w-full ${className ?? ""}`} >

{logo &&

{logo}

}

{hl && ( )}

{item.content ? ( ) : ( {item.label} )}

{actions &&

{actions}

}

{current?.content && (

({ opacity: 0, x: reduce ? 0 : d * 60 }), center: { opacity: 1, x: 0 }, exit: (d: number) => ({ opacity: 0, x: reduce ? 0 : d * -60 }), }} initial="enter" animate="center" exit="exit" transition={reduce ? { duration: 0 } : { duration: duration * 0.75, ease: [0.2, 0.7, 0.2, 1] }} > {current.content}

)}

); } 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","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"}]]}]}],["$","li","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/motion-navbar.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]