50: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"] 51:T150c,"use client"; import { useEffect, useRef, type ReactNode, type RefObject } from "react"; export interface TimelineItem { /** Short label shown above the title, e.g. a date or version. */ date: string; title: string; description?: ReactNode; /** Optional icon rendered inside the marker. */ icon?: ReactNode; } export interface TimelineProps { items: TimelineItem[]; /** Element that scrolls. Defaults to the window. */ scrollContainerRef?: RefObject; /** Where in the viewport the progress head sits, 0 (top) to 1 (bottom). */ anchor?: number; /** Progress line color. */ color?: string; /** Px entries slide up while fading in. */ distance?: number; className?: string; } const css = ` .timeline-entry{opacity:0;transform:translate3d(0,var(--timeline-distance),0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .timeline-entry[data-shown]{opacity:1;transform:none} .timeline-dot{transition:background-color .3s,border-color .3s,box-shadow .3s,color .3s} .timeline-dot[data-reached]{border-color:var(--timeline-color);background:var(--timeline-color);color:#0a0a0a;box-shadow:0 0 0 5px color-mix(in oklab,var(--timeline-color) 22%,transparent),0 0 18px var(--timeline-color)} @media (prefers-reduced-motion: reduce){.timeline-entry{opacity:1;transform:none;transition:none}.timeline-dot{transition:none}} `; export function Timeline({ items, scrollContainerRef, anchor = 0.5, color = "#a3e635", distance = 24, className }: TimelineProps) { const root = useRef(null); const fill = useRef(null); useEffect(() => { const el = root.current; const bar = fill.current; if (!el || !bar) return; const scroller = scrollContainerRef?.current ?? null; const target: HTMLElement | Window = scroller ?? window; const entries = Array.from(el.querySelectorAll("[data-entry]")); const dots = Array.from(el.querySelectorAll("[data-dot]")); let raf = 0; const update = () => { raf = 0; const view = scroller ? scroller.getBoundingClientRect() : { top: 0, height: window.innerHeight }; const r = el.getBoundingClientRect(); const head = view.top + view.height * anchor - r.top; // px from the list's top const p = Math.min(1, Math.max(0, head / r.height)); bar.style.transform = `scaleY(${p})`; for (const d of dots) { const b = d.getBoundingClientRect(); const reached = b.top + b.height / 2 - r.top <= head; if (reached !== d.hasAttribute("data-reached")) d.toggleAttribute("data-reached", reached); } }; const schedule = () => { if (!raf) raf = requestAnimationFrame(update); }; // Entries reveal once, when they scroll into the container. const io = new IntersectionObserver( (list) => { for (const e of list) { if (e.isIntersecting) { (e.target as HTMLElement).dataset.shown = ""; io.unobserve(e.target); } } }, { root: scroller, rootMargin: "0px 0px -12% 0px", threshold: 0.15 }, ); entries.forEach((e) => io.observe(e)); const ro = new ResizeObserver(schedule); ro.observe(el); target.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule); update(); return () => { cancelAnimationFrame(raf); io.disconnect(); ro.disconnect(); target.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); }; }, [scrollContainerRef, anchor, items.length]); return (

{items.map((item, i) => (

{item.icon ?? }

{item.date}

{item.title}

{item.description &&

{item.description}

}

))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/ui/timeline.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]