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:T3932,// Hairline UI · changelog-timeline · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * CHANGELOG TIMELINE: what shipped, drawn as you read * * read a hairline rail runs down the page and fills as you * scroll; each entry's dot fills as the line reaches it * arrive entries rise out of a light blur the first time they * come into view * filter All, New, Improved, Fixed: a pill is thrown to the * choice, entries that don't match fold away and the * count rolls * older "Show 6 older" folds the rest open and morphs to * "Show fewer" * * Every entry has an anchor, so a release can be linked to. * ───────────────────────────────────────────────────────── */ export interface ChangelogEntry { id: string; date: string | Date; title: string; version?: string; /** e.g. ["new"], ["improved", "fixed"]. */ tags?: string[]; body?: React.ReactNode; /** An image or video under the text. */ media?: React.ReactNode; } export interface ChangelogTimelineProps extends React.HTMLAttributes { entries: ChangelogEntry[]; /** How many show before "Show older". */ initialCount?: number; /** Filter chips, by tag; defaults to the tags in the entries. */ filters?: { tag: string; label: string }[]; locales?: string | string[]; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const TAG_LABEL: Record = { new: "New", improved: "Improved", fixed: "Fixed" }; const TAG_TONE: Record = { new: "bg-primary/10 text-primary", improved: "bg-muted text-foreground/80", fixed: "bg-muted text-muted-foreground", }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Rises out of a light blur the first time it scrolls into view. */ function Arrive({ reduced, children }: { reduced: boolean; children: React.ReactNode }) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(reduced); React.useEffect(() => { if (seen) return; const el = ref.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setSeen(true); observer.disconnect(); } }, { rootMargin: "0px 0px -12% 0px" } ); observer.observe(el); return () => observer.disconnect(); }, [seen]); return (

{children}

); } export function ChangelogTimeline({ entries, initialCount = 4, filters: filtersProp, locales, className = "", ...props }: ChangelogTimelineProps) { const reduced = useReducedMotion(); const id = React.useId(); const [filter, setFilter] = React.useState(null); const [showAll, setShowAll] = React.useState(false); const [progress, setProgress] = React.useState(0); const [passed, setPassed] = React.useState>(() => new Set()); const rootRef = React.useRef(null); const railRef = React.useRef(null); const dotRefs = React.useRef(new Map()); const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const [pill, setPill] = React.useState({ left: 0, width: 0, ready: false }); const filters = React.useMemo(() => { if (filtersProp) return filtersProp; const tags = Array.from(new Set(entries.flatMap((e) => e.tags ?? []))); return tags.map((tag) => ({ tag, label: TAG_LABEL[tag] ?? tag.charAt(0).toUpperCase() + tag.slice(1) })); }, [entries, filtersProp]); const chips = [{ tag: null as string | null, label: "All" }, ...filters]; const matches = entries.filter((e) => !filter || e.tags?.includes(filter)); const limit = showAll ? Infinity : initialCount; const shownIds = new Set(matches.slice(0, limit).map((e) => e.id)); const hiddenOlder = Math.max(0, matches.length - initialCount); // The rail fills to the middle of the screen as you read; dots fill as the line reaches them. React.useEffect(() => { const root = rootRef.current; if (!root) return; let frame = 0; let visible = false; const update = () => { frame = 0; const rail = railRef.current?.getBoundingClientRect(); if (!rail) return; const anchor = window.innerHeight * 0.55; const p = Math.min(1, Math.max(0, (anchor - rail.top) / Math.max(1, rail.height))); setProgress((x) => (Math.abs(x - p) < 0.002 ? x : p)); const now = new Set(); dotRefs.current.forEach((dot, key) => { if (dot.getBoundingClientRect().top + 5 <= anchor) now.add(key); }); setPassed((s) => (s.size === now.size && [...now].every((k) => s.has(k)) ? s : now)); }; const onScroll = () => { if (visible && !frame) frame = requestAnimationFrame(update); }; // Only listen while the timeline is on screen. const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) update(); }); observer.observe(root); window.addEventListener("scroll", onScroll, { passive: true, capture: true }); window.addEventListener("resize", onScroll); return () => { observer.disconnect(); window.removeEventListener("scroll", onScroll, { capture: true }); window.removeEventListener("resize", onScroll); cancelAnimationFrame(frame); }; }, []); // Folding entries move the dots: re-check once the folds have settled. React.useEffect(() => { const t = window.setTimeout(() => window.dispatchEvent(new Event("resize")), 520); return () => window.clearTimeout(t); }, [filter, showAll]); React.useLayoutEffect(() => { const el = chipRefs.current[chips.findIndex((c) => c.tag === filter)]; if (!el) return; setPill((p) => (p.left === el.offsetLeft && p.width === el.offsetWidth ? p : { left: el.offsetLeft, width: el.offsetWidth, ready: p.width > 0 })); // eslint-disable-next-line react-hooks/exhaustive-deps }, [filter, filters.length]); const dateText = (d: string | Date) => new Date(d).toLocaleDateString(locales ?? "en-GB", { day: "numeric", month: "short", year: "numeric" }); const fold = (open: boolean): React.CSSProperties => ({ gridTemplateRows: open ? "1fr" : "0fr", opacity: open ? 1 : 0, transition: reduced ? "none" : `grid-template-rows 480ms ${EASE}, opacity ${open ? "380ms" : "160ms"} ${EASE}`, }); return (

{chips.map((c, i) => { const selected = c.tag === filter; return ( ); })}

{matches.length === 1 ? "update" : "updates"}

{/* The rail, and the line that fills it as you read. */}

{dateText(e.date)} {e.version &&
{e.version}
}
{/* The dot fills when the line reaches it. */} { if (el) dotRefs.current.set(e.id, el); else dotRefs.current.delete(e.id); }} aria-hidden="true" className="relative mt-[5px] flex size-[11px] items-center justify-center rounded-full bg-background shadow-[inset_0_0_0_1px_var(--border)] transition-[box-shadow] duration-500" style={{ boxShadow: lit ? "inset 0 0 0 1px color-mix(in oklab, var(--foreground) 70%, transparent)" : undefined }} >

{dateText(e.date)} {e.version && {e.version}}
{e.tags && e.tags.length > 0 && (
{e.tags.map((t) => ( {TAG_LABEL[t] ?? t} ))}
)}
{e.title}
{e.body &&
{e.body}
} {e.media &&
{e.media}
}

{hiddenOlder > 0 && (

)}

{`${matches.length} ${matches.length === 1 ? "update" : "updates"}`}

); } 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":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/changelog-timeline.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]