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:T1187,"use client"; import { useRef, type PointerEvent } from "react"; import { cn } from "@/lib/utils"; const css = ` @keyframes flowing-menu-scroll{to{transform:translate3d(-50%,0,0)}} .flowing-menu-track{animation:flowing-menu-scroll linear infinite;animation-play-state:paused} .flowing-menu-row:hover .flowing-menu-track,.flowing-menu-row:focus-visible .flowing-menu-track{animation-play-state:running} @media (prefers-reduced-motion:reduce){.flowing-menu-track{animation:none}} `; export interface FlowingMenuItem { label: string; href?: string; image: string; } export interface FlowingMenuProps { items: FlowingMenuItem[]; /** Seconds for one marquee loop. */ speed?: number; /** Background of the revealed band. */ bandColor?: string; /** Text color inside the band. */ bandTextColor?: string; className?: string; } const EASE = "cubic-bezier(.19,1,.22,1)"; function Row({ item, speed, bandColor, bandTextColor }: { item: FlowingMenuItem } & Required>) { const band = useRef(null); const inner = useRef(null); // Band and its content move in opposite directions, so the content looks // pinned in place while a window slides over it: a wipe, not a slide. const slide = (to: number) => { const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; for (const [el, sign] of [ [band.current!, 1], [inner.current!, -1], ] as const) { const from = getComputedStyle(el).transform; el.getAnimations().forEach((a) => a.cancel()); el.animate([{ transform: from === "none" ? "none" : from }, { transform: `translateY(${sign * to}%)` }], { duration: reduced ? 0 : 650, easing: EASE, fill: "forwards", }); } }; const place = (edge: number) => { band.current!.getAnimations().forEach((a) => a.cancel()); inner.current!.getAnimations().forEach((a) => a.cancel()); band.current!.style.transform = `translateY(${edge}%)`; inner.current!.style.transform = `translateY(${-edge}%)`; }; const edgeOf = (e: PointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); return e.clientY - r.top < r.height / 2 ? -101 : 101; }; return ( { place(edgeOf(e)); slide(0); }} onPointerLeave={(e) => slide(edgeOf(e))} onFocus={() => { place(-101); slide(0); }} onBlur={() => slide(101)} className="flowing-menu-row relative flex min-h-16 flex-1 items-center justify-center overflow-hidden border-t border-border text-3xl font-semibold uppercase tracking-tight text-foreground outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:text-5xl" > {item.label}

); } export function FlowingMenu({ items, speed = 14, bandColor = "#d9f75c", bandTextColor = "#0b0d06", className, }: FlowingMenuProps) { return ( ); } 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":[null,["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/flowing-menu.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]