50: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"] 51: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"] 52:T5144,// Hairline UI · changelog-trace · 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 TRACE: what shipped, routed like a circuit * * read the line is a trace: straight through each * release, stepped aside in between. A bead runs * down it as you scroll, a beat behind the page, * following every bend, and fills each dot it reaches * arrive entries rise out of a light blur the first time * they come into view * filter All, New, Improved, Fixed: the pill is thrown to * the choice, entries that don't match fold away, * the trace re-routes as they close and the count * rolls * older "Show 3 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 ChangelogTraceProps 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[]; } type Point = { x: number; y: number }; type Route = { xs: number[]; ys: number[]; ls: number[]; total: number }; 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 STEP = 14; // how far the trace steps aside between releases const CLEAR = 24; // straight run either side of a dot const CORNER = 8; // how much of each bend is rounded const LAG = 120; // how far the bead trails the page, in ms 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); /** The bends: straight through each stop, stepped aside between. A step shrinks with its gap, so a release folding away flattens it smoothly. */ function corners(x: number, stops: number[]): Point[] { const points: Point[] = [{ x, y: stops[0] }]; for (let i = 0; i < stops.length - 1; i++) { const a = stops[i]; const b = stops[i + 1]; const step = Math.min(STEP, Math.max(0, (b - a - 2 * CLEAR) / 3)); if (step < 0.5) continue; points.push({ x, y: a + CLEAR }, { x: x - step, y: a + CLEAR + step }, { x: x - step, y: b - CLEAR - step }, { x, y: b - CLEAR }); } points.push({ x, y: stops[stops.length - 1] }); return points; } /** Rounds every bend into the path, and samples it so the bead can find any height along it without asking the DOM. */ function trace(points: Point[]): { d: string; route: Route } { const r = (n: number) => Math.round(n * 100) / 100; const xs = [points[0].x]; const ys = [points[0].y]; const ls = [0]; const add = (x: number, y: number) => { const i = xs.length - 1; ls.push(ls[i] + Math.hypot(x - xs[i], y - ys[i])); xs.push(x); ys.push(y); }; let d = `M${r(points[0].x)} ${r(points[0].y)}`; for (let i = 1; i < points.length - 1; i++) { const [prev, p, next] = [points[i - 1], points[i], points[i + 1]]; const d1 = Math.hypot(p.x - prev.x, p.y - prev.y); const d2 = Math.hypot(next.x - p.x, next.y - p.y); const k = Math.min(CORNER, d1 / 2, d2 / 2); if (!(k > 0)) continue; const a = { x: p.x + ((prev.x - p.x) * k) / d1, y: p.y + ((prev.y - p.y) * k) / d1 }; const b = { x: p.x + ((next.x - p.x) * k) / d2, y: p.y + ((next.y - p.y) * k) / d2 }; d += `L${r(a.x)} ${r(a.y)}Q${r(p.x)} ${r(p.y)} ${r(b.x)} ${r(b.y)}`; add(a.x, a.y); for (let s = 1; s <= 6; s++) { const t = s / 6; const u = 1 - t; add(u * u * a.x + 2 * u * t * p.x + t * t * b.x, u * u * a.y + 2 * u * t * p.y + t * t * b.y); } } const last = points[points.length - 1]; d += `L${r(last.x)} ${r(last.y)}`; add(last.x, last.y); return { d, route: { xs, ys, ls, total: ls[ls.length - 1] } }; } /** Where the trace is at height y, and how far along it that is. The trace only ever runs downward. */ function at(route: Route, y: number) { const { xs, ys, ls } = route; const n = ys.length - 1; if (y <= ys[0]) return { x: xs[0], l: 0 }; if (y >= ys[n]) return { x: xs[n], l: ls[n] }; let lo = 0; let hi = n; while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (ys[mid] < y) lo = mid; else hi = mid; } const t = ys[hi] === ys[lo] ? 0 : (y - ys[lo]) / (ys[hi] - ys[lo]); return { x: xs[lo] + (xs[hi] - xs[lo]) * t, l: ls[lo] + (ls[hi] - ls[lo]) * t }; } /** Position inside `root` from layout boxes, so transforms (an entry still arriving) don't throw it off. */ function offsetIn(el: HTMLElement, root: HTMLElement) { let x = el.offsetWidth / 2; let y = el.offsetHeight / 2; let node: HTMLElement | null = el; while (node && node !== root) { x += node.offsetLeft; y += node.offsetTop; node = node.offsetParent as HTMLElement | null; } return { x, y }; } /** 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 ChangelogTrace({ entries, initialCount = 4, filters: filtersProp, locales, className = "", ...props }: ChangelogTraceProps) { const reduced = useReducedMotion(); const id = React.useId(); const [filter, setFilter] = React.useState(null); const [showAll, setShowAll] = React.useState(false); const [lit, setLit] = React.useState>(() => new Set()); const listRef = React.useRef(null); const baseRef = React.useRef(null); const fillRef = React.useRef(null); const beadRef = React.useRef(null); const dotRefs = React.useRef(new Map()); const reducedRef = React.useRef(reduced); 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); const idsKey = entries.map((e) => e.id).join("\n"); React.useEffect(() => { reducedRef.current = reduced; }, [reduced]); // The trace is laid out from where the dots sit, and drawn as far as the reader has got. Every frame writes straight to the SVG; // React only hears about it when a dot lights. React.useEffect(() => { const list = listRef.current; const base = baseRef.current; const fill = fillRef.current; const bead = beadRef.current; if (!list || !base || !fill || !bead) return; let route: Route | null = null; let dots: { id: string; y: number }[] = []; let drawn = NaN; let frame = 0; let last = 0; let visible = false; let litKey = ""; const paint = () => { if (!route) return; const top = route.ys[0]; const end = route.ys[route.ys.length - 1]; const y = Math.min(end, Math.max(top, drawn)); const { x, l } = at(route, y); fill.style.strokeDashoffset = String(route.total - l); bead.style.transform = `translate(${x}px, ${y}px)`; bead.style.opacity = y > top + 1 && y < end - 1 ? "1" : "0"; const now = dots.filter((d) => d.y <= y + 0.5).map((d) => d.id); const key = now.join(" "); if (key !== litKey) { litKey = key; setLit(new Set(now)); } }; // One frame: aim at 55% down the screen, close part of the gap (all of it with reduced motion), draw. const tick = (now: number) => { frame = 0; if (!route) return; const top = route.ys[0]; const end = route.ys[route.ys.length - 1]; const target = Math.min(end, Math.max(top, window.innerHeight * 0.55 - list.getBoundingClientRect().top)); const dt = last ? Math.min(64, now - last) : 16; last = now; if (Number.isNaN(drawn)) drawn = top; drawn += (target - drawn) * (reducedRef.current ? 1 : 1 - Math.exp(-dt / LAG)); if (Math.abs(target - drawn) < 0.25) drawn = target; paint(); if (drawn !== target) frame = requestAnimationFrame(tick); else last = 0; }; const run = () => { if (visible && !frame) frame = requestAnimationFrame(tick); }; const ids = idsKey.split("\n"); const layout = () => { // Folded releases at the end sit just below the list; hold them to its last line. const end = list.offsetHeight - 8; const found = ids.flatMap((key) => { const el = dotRefs.current.get(key); if (!el) return []; const { x, y } = offsetIn(el, list); return [{ id: key, x, y: Math.min(y, end) }]; }); if (!found.length) return; dots = found.map(({ id, y }) => ({ id, y })); const { d, route: next } = trace(corners(found[0].x, [...dots.map((dot) => dot.y), Math.max(end, dots[dots.length - 1].y)])); route = next; base.setAttribute("d", d); fill.setAttribute("d", d); fill.setAttribute("pathLength", String(next.total)); fill.style.strokeDasharray = `${next.total} ${next.total}`; if (Number.isNaN(drawn)) fill.style.strokeDashoffset = String(next.total); else paint(); run(); }; // Folding entries resize the list every frame they move, so the trace re-routes with them. const resize = new ResizeObserver(layout); resize.observe(list); list.querySelectorAll(":scope > li").forEach((li) => resize.observe(li)); // Only listen while the timeline is on screen. const seen = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; run(); }); seen.observe(list); window.addEventListener("scroll", run, { passive: true, capture: true }); window.addEventListener("resize", run); return () => { resize.disconnect(); seen.disconnect(); window.removeEventListener("scroll", run, { capture: true }); window.removeEventListener("resize", run); cancelAnimationFrame(frame); }; }, [idsKey]); 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 trace, the part of it you've read, and the bead at its tip. */}

{dateText(e.date)} {e.version &&
{e.version}
}
{/* The dot fills when the bead 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: on ? "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"}`}

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

{e.title}