{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"changelog-timeline","type":"registry:component","title":"Changelog timeline","description":"What shipped, drawn as you read: a rail that fills, dots that light, filters that fold the rest away.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/changelog-timeline.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * CHANGELOG TIMELINE: what shipped, drawn as you read\n *\n * read a hairline rail runs down the page and fills as you\n * scroll; each entry's dot fills as the line reaches it\n * arrive entries rise out of a light blur the first time they\n * come into view\n * filter All, New, Improved, Fixed: a pill is thrown to the\n * choice, entries that don't match fold away and the\n * count rolls\n * older \"Show 6 older\" folds the rest open and morphs to\n * \"Show fewer\"\n *\n * Every entry has an anchor, so a release can be linked to.\n * ───────────────────────────────────────────────────────── */\n\nexport interface ChangelogEntry {\n id: string;\n date: string | Date;\n title: string;\n version?: string;\n /** e.g. [\"new\"], [\"improved\", \"fixed\"]. */\n tags?: string[];\n body?: React.ReactNode;\n /** An image or video under the text. */\n media?: React.ReactNode;\n}\n\nexport interface ChangelogTimelineProps extends React.HTMLAttributes {\n entries: ChangelogEntry[];\n /** How many show before \"Show older\". */\n initialCount?: number;\n /** Filter chips, by tag; defaults to the tags in the entries. */\n filters?: { tag: string; label: string }[];\n locales?: string | string[];\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst THROW = \"cubic-bezier(0.34,1.36,0.64,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst TAG_LABEL: Record = { new: \"New\", improved: \"Improved\", fixed: \"Fixed\" };\nconst TAG_TONE: Record = {\n new: \"bg-primary/10 text-primary\",\n improved: \"bg-muted text-foreground/80\",\n fixed: \"bg-muted text-muted-foreground\",\n};\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** Rises out of a light blur the first time it scrolls into view. */\nfunction Arrive({ reduced, children }: { reduced: boolean; children: React.ReactNode }) {\n const ref = React.useRef(null);\n const [seen, setSeen] = React.useState(reduced);\n React.useEffect(() => {\n if (seen) return;\n const el = ref.current;\n if (!el) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setSeen(true);\n observer.disconnect();\n }\n },\n { rootMargin: \"0px 0px -12% 0px\" }\n );\n observer.observe(el);\n return () => observer.disconnect();\n }, [seen]);\n return (\n \n {children}\n \n );\n}\n\nexport function ChangelogTimeline({ entries, initialCount = 4, filters: filtersProp, locales, className = \"\", ...props }: ChangelogTimelineProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [filter, setFilter] = React.useState(null);\n const [showAll, setShowAll] = React.useState(false);\n const [progress, setProgress] = React.useState(0);\n const [passed, setPassed] = React.useState>(() => new Set());\n const rootRef = React.useRef(null);\n const railRef = React.useRef(null);\n const dotRefs = React.useRef(new Map());\n const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n const [pill, setPill] = React.useState({ left: 0, width: 0, ready: false });\n\n const filters = React.useMemo(() => {\n if (filtersProp) return filtersProp;\n const tags = Array.from(new Set(entries.flatMap((e) => e.tags ?? [])));\n return tags.map((tag) => ({ tag, label: TAG_LABEL[tag] ?? tag.charAt(0).toUpperCase() + tag.slice(1) }));\n }, [entries, filtersProp]);\n const chips = [{ tag: null as string | null, label: \"All\" }, ...filters];\n\n const matches = entries.filter((e) => !filter || e.tags?.includes(filter));\n const limit = showAll ? Infinity : initialCount;\n const shownIds = new Set(matches.slice(0, limit).map((e) => e.id));\n const hiddenOlder = Math.max(0, matches.length - initialCount);\n\n // The rail fills to the middle of the screen as you read; dots fill as the line reaches them.\n React.useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n let frame = 0;\n let visible = false;\n const update = () => {\n frame = 0;\n const rail = railRef.current?.getBoundingClientRect();\n if (!rail) return;\n const anchor = window.innerHeight * 0.55;\n const p = Math.min(1, Math.max(0, (anchor - rail.top) / Math.max(1, rail.height)));\n setProgress((x) => (Math.abs(x - p) < 0.002 ? x : p));\n const now = new Set();\n dotRefs.current.forEach((dot, key) => {\n if (dot.getBoundingClientRect().top + 5 <= anchor) now.add(key);\n });\n setPassed((s) => (s.size === now.size && [...now].every((k) => s.has(k)) ? s : now));\n };\n const onScroll = () => {\n if (visible && !frame) frame = requestAnimationFrame(update);\n };\n // Only listen while the timeline is on screen.\n const observer = new IntersectionObserver(([entry]) => {\n visible = entry.isIntersecting;\n if (visible) update();\n });\n observer.observe(root);\n window.addEventListener(\"scroll\", onScroll, { passive: true, capture: true });\n window.addEventListener(\"resize\", onScroll);\n return () => {\n observer.disconnect();\n window.removeEventListener(\"scroll\", onScroll, { capture: true });\n window.removeEventListener(\"resize\", onScroll);\n cancelAnimationFrame(frame);\n };\n }, []);\n\n // Folding entries move the dots: re-check once the folds have settled.\n React.useEffect(() => {\n const t = window.setTimeout(() => window.dispatchEvent(new Event(\"resize\")), 520);\n return () => window.clearTimeout(t);\n }, [filter, showAll]);\n\n React.useLayoutEffect(() => {\n const el = chipRefs.current[chips.findIndex((c) => c.tag === filter)];\n if (!el) return;\n setPill((p) => (p.left === el.offsetLeft && p.width === el.offsetWidth ? p : { left: el.offsetLeft, width: el.offsetWidth, ready: p.width > 0 }));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [filter, filters.length]);\n\n const dateText = (d: string | Date) => new Date(d).toLocaleDateString(locales ?? \"en-GB\", { day: \"numeric\", month: \"short\", year: \"numeric\" });\n const fold = (open: boolean): React.CSSProperties => ({\n gridTemplateRows: open ? \"1fr\" : \"0fr\",\n opacity: open ? 1 : 0,\n transition: reduced ? \"none\" : `grid-template-rows 480ms ${EASE}, opacity ${open ? \"380ms\" : \"160ms\"} ${EASE}`,\n });\n\n return (\n
\n
\n
\n \n {chips.map((c, i) => {\n const selected = c.tag === filter;\n return (\n {\n chipRefs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => setFilter(c.tag)}\n onKeyDown={(e) => {\n if (e.key !== \"ArrowRight\" && e.key !== \"ArrowLeft\") return;\n e.preventDefault();\n const next = (i + (e.key === \"ArrowRight\" ? 1 : -1) + chips.length) % chips.length;\n setFilter(chips[next].tag);\n chipRefs.current[next]?.focus();\n }}\n className={`relative h-8 rounded-full px-3.5 text-[12.5px] font-medium transition-colors duration-300 ${FOCUS} ${selected ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\"}`}\n >\n {c.label}\n \n );\n })}\n
\n

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

\n
\n\n
\n {/* The rail, and the line that fills it as you read. */}\n
\n
\n
\n\n
    \n {entries.map((e) => {\n const shown = shownIds.has(e.id);\n const lit = passed.has(e.id);\n return (\n
  1. \n
    \n \n
    \n
    \n \n {e.version &&

    {e.version}

    }\n
    \n {/* The dot fills when the line reaches it. */}\n {\n if (el) dotRefs.current.set(e.id, el);\n else dotRefs.current.delete(e.id);\n }}\n aria-hidden=\"true\"\n 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\"\n style={{ boxShadow: lit ? \"inset 0 0 0 1px color-mix(in oklab, var(--foreground) 70%, transparent)\" : undefined }}\n >\n \n \n
    \n
    \n \n {e.version && {e.version}}\n
    \n {e.tags && e.tags.length > 0 && (\n
    \n {e.tags.map((t) => (\n \n {TAG_LABEL[t] ?? t}\n \n ))}\n
    \n )}\n

    \n \n {e.title}\n \n

    \n {e.body &&
    {e.body}
    }\n {e.media &&
    {e.media}
    }\n
    \n
    \n     \n
    \n
    2. \n );\n })}\n
\n\n {hiddenOlder > 0 && (\n
\n setShowAll((s) => !s)}\n className={`inline-flex h-9 items-center rounded-full px-4 text-[13px] font-medium text-foreground shadow-[inset_0_0_0_1px_var(--border)] transition-colors hover:bg-accent ${FOCUS}`}\n >\n {showAll ? \"Show fewer\" : `Show ${hiddenOlder} older`}\n \n
\n )}\n
\n

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

\n
\n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/changelog-timeline"}