"use client";import * as React from "react";import { NumberRoll } from "./number-roll";import { TextMorph } from "./text-morph";import { compareRevisions, diffWords, splitWords, type DocumentRevision, type VersionBlock } from "./version-time-machine-model";export type { DocumentRevision, VersionBlock, VersionBlockType } from "./version-time-machine-model";export interface VersionTimeMachineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> { /** Oldest first. The latest revision is selected by default. */ revisions: DocumentRevision[]; /** The visible revision, by id. */ value?: string; defaultValue?: string; onValueChange?: (id: string) => void; /** Briefly tint words that arrived in the newly selected revision. */ highlight?: boolean; /** The revision slider's accessible name. */ label?: string; locales?: string | string[];}const EASE = "cubic-bezier(0.16,1,0.3,1)";const MORPH = 480;const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background";const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));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);const dateText = (date: string | Date, locales: string | string[] | undefined, short = false) => new Date(date).toLocaleDateString(locales ?? "en-GB", short ? { day: "numeric", month: "short", timeZone: "UTC" } : { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" });type Word = { key: number; text: string };type LeavingWord = Word & { x: number; y: number; batch: number };function morphWords(previous: Word[], text: string, nextKey: () => number): Word[] { const before = previous.map((word) => word.text).join(" "); const operations = diffWords(before, text); const output: Word[] = []; let oldIndex = 0; for (const operation of operations) { if (operation.kind === "add") output.push({ key: nextKey(), text: operation.text }); else { const word = previous[oldIndex++]; if (operation.kind === "same" && word) output.push(word); } } return output;}function MorphText({ text, reduced, highlight, className }: { text: string; reduced: boolean; highlight: boolean; className: string }) { const boxRef = React.useRef<HTMLSpanElement>(null); const sequence = React.useRef(1_000_000); const batch = React.useRef(0); const timers = React.useRef(new Set<number>()); const shown = React.useRef(text); const flip = React.useRef<{ first: Map<number, DOMRect> } | null>(null); const [words, setWords] = React.useState<Word[]>(() => splitWords(text).map((word, index) => ({ key: index + 1, text: word }))); const [leaving, setLeaving] = React.useState<LeavingWord[]>([]); React.useEffect(() => { const active = timers.current; return () => active.forEach((timer) => window.clearTimeout(timer)); }, []); React.useLayoutEffect(() => { if (text === shown.current) return; shown.current = text; const next = morphWords(words, text, () => ++sequence.current); const box = boxRef.current; if (!box || reduced) { setWords(next); setLeaving([]); return; } const bounds = box.getBoundingClientRect(); const first = new Map<number, DOMRect>(); box.querySelectorAll<HTMLElement>("[data-vtm-word]").forEach((element) => { element.style.marginLeft = element.style.paddingLeft = element.style.borderRadius = ""; first.set(Number(element.dataset.vtmWord), element.getBoundingClientRect()); }); const keep = new Set(next.map((word) => word.key)); const id = ++batch.current; const gone: LeavingWord[] = []; for (const word of words) { const rect = first.get(word.key); if (!keep.has(word.key) && rect) gone.push({ ...word, x: rect.left - bounds.left, y: rect.top - bounds.top, batch: id }); } flip.current = { first }; setWords(next); if (gone.length) { setLeaving((current) => [...current.slice(-24), ...gone]); const timer = window.setTimeout(() => { timers.current.delete(timer); setLeaving((current) => current.filter((word) => word.batch !== id)); }, 340); timers.current.add(timer); } }, [text, reduced, words]); React.useLayoutEffect(() => { const pending = flip.current; const box = boxRef.current; if (!pending || !box) return; flip.current = null; const elements = Array.from(box.querySelectorAll<HTMLElement>("[data-vtm-word]")); elements.forEach((element) => element.getAnimations().forEach((animation) => animation.cancel())); const rectangles = elements.map((element) => element.getBoundingClientRect()); const green = getComputedStyle(box).getPropertyValue("--color-emerald-500").trim() || getComputedStyle(box).getPropertyValue("--primary").trim(); const tint = `color-mix(in oklab, ${green} 18%, transparent)`; const fresh = elements.map((element) => !pending.first.has(Number(element.dataset.vtmWord))); const sameLine = (a: number, b: number) => Math.abs(rectangles[a].top - rectangles[b].top) < 2; let arrival = 0; elements.forEach((element, index) => { const before = pending.first.get(Number(element.dataset.vtmWord)); if (before) { const x = before.left - rectangles[index].left; const y = before.top - rectangles[index].top; if (Math.abs(x) > 0.5 || Math.abs(y) > 0.5) element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "none" }], { duration: MORPH, easing: EASE }); return; } const delay = Math.min(60 + arrival++ * 14, 280); element.animate( [ { opacity: 0, transform: "translateY(0.35em)", filter: "blur(4px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 380, delay, easing: EASE, fill: "backwards" }, ); if (!highlight) return; const joinsBefore = index > 0 && fresh[index - 1] && sameLine(index - 1, index); const joinsAfter = index < elements.length - 1 && fresh[index + 1] && sameLine(index, index + 1); if (joinsBefore) { const gap = Math.max(0, rectangles[index].left - rectangles[index - 1].right); element.style.marginLeft = `${-gap}px`; element.style.paddingLeft = `${gap}px`; } element.style.borderRadius = `${joinsBefore ? 0 : 3}px ${joinsAfter ? 0 : 3}px ${joinsAfter ? 0 : 3}px ${joinsBefore ? 0 : 3}px`; element.animate([{ backgroundColor: tint }, { backgroundColor: tint, offset: 0.38 }, { backgroundColor: "transparent" }], { duration: 1700, delay, easing: "ease-out", fill: "backwards", }); }); box.querySelectorAll<HTMLElement>("[data-vtm-leaving-word]:not([data-out])").forEach((element) => { element.dataset.out = ""; element.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: "translateY(-0.2em)", filter: "blur(4px)" }, ], { duration: 250, easing: EASE, fill: "forwards" }, ); }); }, [words, highlight]); return ( <span ref={boxRef} className={`relative block ${className}`}> {words.map((word, index) => ( <React.Fragment key={word.key}> {index > 0 && " "} <span data-vtm-word={word.key} className="inline-block"> {word.text} </span> </React.Fragment> ))} {leaving.map((word) => ( <del key={`${word.batch}-${word.key}`} data-vtm-leaving-word="" aria-hidden="true" className="pointer-events-none absolute whitespace-nowrap rounded-[3px] bg-red-500/10 text-red-600 no-underline decoration-red-500/60 dark:text-red-400" style={{ left: word.x, top: word.y }} > {word.text} </del> ))} </span> );}function DocumentBlock({ block, reduced, highlight, className = "" }: { block: VersionBlock; reduced: boolean; highlight: boolean; className?: string }) { const content = <MorphText text={block.text} reduced={reduced} highlight={highlight} className="" />; return ( <div data-vtm-block={block.id} className={`relative ${className}`}> {block.type === "heading" && <h3 className="text-[20px] font-medium leading-[1.25] tracking-[-0.025em] text-foreground">{content}</h3>} {block.type === "paragraph" && <p className="text-[13.5px] leading-[1.65] text-muted-foreground">{content}</p>} {block.type === "list-item" && ( <div className="flex items-start gap-2.5 text-[13.5px] leading-[1.55] text-foreground/80"> <span aria-hidden="true" className="mt-[7px] size-[5px] shrink-0 rounded-full bg-chart-2" /> {content} </div> )} {block.type === "quote" && ( <blockquote className="rounded-r-[10px] border-l border-primary/50 bg-primary/[0.045] px-3.5 py-2.5 text-[13px] leading-[1.55] text-foreground/80">{content}</blockquote> )} </div> );}type LeavingBlock = { block: VersionBlock; x: number; y: number; width: number; batch: number };function Document({ revision, reduced, highlight }: { revision: DocumentRevision; reduced: boolean; highlight: boolean }) { const boxRef = React.useRef<HTMLDivElement>(null); const batch = React.useRef(0); const timers = React.useRef(new Set<number>()); const flip = React.useRef<{ first: Map<string, DOMRect>; height: number } | null>(null); const [shown, setShown] = React.useState(revision); const [leaving, setLeaving] = React.useState<LeavingBlock[]>([]); React.useEffect(() => { const active = timers.current; return () => active.forEach((timer) => window.clearTimeout(timer)); }, []); React.useLayoutEffect(() => { if (revision === shown) return; const box = boxRef.current; if (!box || reduced) { setShown(revision); setLeaving([]); return; } const bounds = box.getBoundingClientRect(); const first = new Map<string, DOMRect>(); box.querySelectorAll<HTMLElement>(":scope > [data-vtm-block]").forEach((element) => first.set(element.dataset.vtmBlock ?? "", element.getBoundingClientRect())); const nextIds = new Set(revision.blocks.map((block) => block.id)); const id = ++batch.current; const gone = shown.blocks.flatMap((block) => { const rect = first.get(block.id); return !nextIds.has(block.id) && rect ? [{ block, x: rect.left - bounds.left, y: rect.top - bounds.top, width: rect.width, batch: id }] : []; }); flip.current = { first, height: bounds.height }; setShown(revision); if (gone.length) { setLeaving((current) => [...current.slice(-4), ...gone]); const timer = window.setTimeout(() => { timers.current.delete(timer); setLeaving((current) => current.filter((block) => block.batch !== id)); }, MORPH + 80); timers.current.add(timer); } }, [revision, shown, reduced]); React.useLayoutEffect(() => { const pending = flip.current; const box = boxRef.current; if (!pending || !box) return; flip.current = null; const elements = Array.from(box.querySelectorAll<HTMLElement>(":scope > [data-vtm-block]")); box.getAnimations().forEach((animation) => animation.cancel()); elements.forEach((element) => element.getAnimations().forEach((animation) => animation.cancel())); const rectangles = elements.map((element) => element.getBoundingClientRect()); if (Math.abs(box.offsetHeight - pending.height) > 0.5) box.animate([{ height: `${pending.height}px` }, { height: `${box.offsetHeight}px` }], { duration: MORPH, easing: EASE }); elements.forEach((element, index) => { const before = pending.first.get(element.dataset.vtmBlock ?? ""); if (before) { const x = before.left - rectangles[index].left; const y = before.top - rectangles[index].top; if (Math.abs(x) > 0.5 || Math.abs(y) > 0.5) element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "none" }], { duration: MORPH, easing: EASE }); } else { element.animate( [ { opacity: 0, transform: "translateY(10px)", filter: "blur(5px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 420, easing: EASE, fill: "backwards" }, ); } }); box.querySelectorAll<HTMLElement>("[data-vtm-leaving-block]:not([data-out])").forEach((element) => { element.dataset.out = ""; element.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: "translateY(-6px)", filter: "blur(5px)" }, ], { duration: 280, easing: EASE, fill: "forwards" }, ); }); }, [shown]); return ( <div ref={boxRef} className="relative [clip-path:inset(-2px)]"> {shown.blocks.map((block, index) => ( <DocumentBlock key={block.id} block={block} reduced={reduced} highlight={highlight} className={index ? "mt-3.5" : ""} /> ))} {leaving.map((item) => ( <div key={`${item.batch}-${item.block.id}`} data-vtm-leaving-block="" aria-hidden="true" className="pointer-events-none absolute opacity-70" style={{ left: item.x, top: item.y, width: item.width }} > <DocumentBlock block={item.block} reduced highlight={false} /> </div> ))} </div> );}function StepButton({ direction, disabled, onStep }: { direction: -1 | 1; disabled: boolean; onStep: () => void }) { return ( <button type="button" aria-label={direction < 0 ? "Older revision" : "Newer revision"} aria-disabled={disabled || undefined} onClick={() => !disabled && onStep()} className={`flex size-9 items-center justify-center rounded-full text-foreground transition-[background-color,opacity] duration-300 motion-reduce:transition-none ${FOCUS} ${disabled ? "cursor-default opacity-30" : "cursor-pointer hover:bg-accent"}`} > <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4"> <path d={direction < 0 ? "M10 3.5 5.5 8l4.5 4.5" : "M6 3.5 10.5 8 6 12.5"} /> </svg> </button> );}function RevisionRuler({ revisions, index, value, reduced, label, locales, onChoose }: { revisions: DocumentRevision[]; index: number; value: string | undefined; reduced: boolean; label: string; locales?: string | string[]; onChoose: (index: number) => void;}) { const trackRef = React.useRef<HTMLDivElement>(null); const playheadRef = React.useRef<HTMLDivElement>(null); const labelRef = React.useRef<HTMLDivElement>(null); const fillRef = React.useRef<HTMLSpanElement>(null); const tickRefs = React.useRef<(HTMLSpanElement | null)[]>([]); const width = React.useRef(0); const position = React.useRef(0); const current = React.useRef(index); const controlled = React.useRef(value); const tween = React.useRef(0); const drag = React.useRef<{ pointer: number; start: number; moved: boolean } | null>(null); const [dragging, setDragging] = React.useState(false); const model = React.useMemo(() => { const times = revisions.map((revision) => new Date(revision.date).getTime()); const first = times[0] ?? 0; const last = times[times.length - 1] ?? first; const span = Math.max(1, last - first); return { at: times.map((time) => (times.length < 2 ? 50 : 6 + ((time - first) / span) * 88)), ticks: Array.from({ length: 25 }, (_, i) => 6 + (i * 88) / 24) }; }, [revisions]); const paint = React.useCallback((x: number) => { position.current = x; const pixels = (x / 100) * width.current; if (playheadRef.current) playheadRef.current.style.transform = `translateX(${pixels}px)`; if (labelRef.current) labelRef.current.style.transform = `translateX(-${x}%)`; if (fillRef.current) fillRef.current.style.transform = `scaleX(${x / 100})`; tickRefs.current.forEach((tick, tickIndex) => { if (!tick) return; const distance = Math.abs(x - model.ticks[tickIndex]); const influence = Math.max(0, 1 - distance / 11); tick.style.transform = `scaleY(${1 + influence * influence * 1.8})`; }); }, [model.ticks]); const stop = React.useCallback(() => { cancelAnimationFrame(tween.current); tween.current = 0; }, []); const settle = React.useCallback((to: number) => { stop(); if (reduced) { paint(to); return; } const from = position.current; const start = performance.now(); const frame = (now: number) => { const t = clamp((now - start) / 460, 0, 1); const eased = 1 + 2.36 * Math.pow(t - 1, 3) + 1.36 * Math.pow(t - 1, 2); paint(from + (to - from) * eased); if (t < 1) tween.current = requestAnimationFrame(frame); else tween.current = 0; }; tween.current = requestAnimationFrame(frame); }, [paint, reduced, stop]); React.useLayoutEffect(() => { current.current = index; controlled.current = value; }); React.useLayoutEffect(() => { const track = trackRef.current; if (!track) return; const measure = () => { width.current = track.clientWidth; paint(position.current || model.at[current.current] || 0); }; measure(); paint(model.at[index] ?? 0); const observer = new ResizeObserver(measure); observer.observe(track); return () => observer.disconnect(); }, [index, model, paint]); React.useEffect(() => { if (!drag.current?.moved) settle(model.at[index] ?? 0); }, [index, model.at, settle]); React.useEffect(() => stop, [stop]); const nearest = (x: number) => model.at.reduce((best, point, i) => (Math.abs(point - x) < Math.abs(model.at[best] - x) ? i : best), 0); const atPointer = (clientX: number) => { const bounds = trackRef.current?.getBoundingClientRect(); return bounds?.width ? clamp(((clientX - bounds.left) / bounds.width) * 100, 0, 100) : position.current; }; const choose = (next: number) => { if (next === current.current) return; current.current = next; onChoose(next); }; return ( <div ref={trackRef} role="slider" tabIndex={0} aria-label={label} aria-valuemin={1} aria-valuemax={revisions.length} aria-valuenow={index + 1} aria-valuetext={`${revisions[index]?.label ?? ""}, ${dateText(revisions[index]?.date ?? "", locales)}`} onKeyDown={(event) => { const moves: Record<string, number> = { ArrowLeft: index - 1, ArrowDown: index - 1, ArrowRight: index + 1, ArrowUp: index + 1, Home: 0, End: revisions.length - 1 }; if (!(event.key in moves)) return; event.preventDefault(); choose(clamp(moves[event.key], 0, revisions.length - 1)); }} onPointerDown={(event) => { if (event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); stop(); drag.current = { pointer: event.pointerId, start: event.clientX, moved: false }; }} onPointerMove={(event) => { const active = drag.current; if (!active || active.pointer !== event.pointerId) return; if (!active.moved) { if (Math.abs(event.clientX - active.start) < 4) return; active.moved = true; active.start = event.clientX; setDragging(true); } const x = atPointer(event.clientX); paint(x); choose(nearest(x)); }} onPointerUp={(event) => { const active = drag.current; if (!active || active.pointer !== event.pointerId) return; drag.current = null; setDragging(false); const x = active.moved ? position.current : atPointer(event.clientX); const next = nearest(x); choose(next); settle(model.at[next]); }} onPointerCancel={() => { drag.current = null; setDragging(false); settle(model.at[current.current]); }} className={`relative mt-4 h-[74px] w-full touch-pan-y select-none rounded-[12px] ${FOCUS} ${dragging ? "cursor-grabbing" : "cursor-grab"}`} > <span aria-hidden="true" className="absolute inset-x-0 top-[43px] h-px bg-border" /> <span ref={fillRef} aria-hidden="true" className="absolute inset-x-0 top-[43px] h-px origin-left bg-primary/60" /> {model.ticks.map((point, tickIndex) => ( <span key={point} ref={(element) => { tickRefs.current[tickIndex] = element; }} aria-hidden="true" className="absolute top-[39px] h-2 w-px origin-center bg-border will-change-transform" style={{ left: `${point}%` }} /> ))} {model.at.map((point, revisionIndex) => ( <span key={revisions[revisionIndex].id} aria-hidden="true" className={`absolute top-[36px] size-[7px] -translate-x-1/2 rounded-full border transition-colors duration-300 motion-reduce:transition-none ${revisionIndex === index ? "border-primary bg-primary" : "border-border bg-card"}`} style={{ left: `${point}%` }} /> ))} <span aria-hidden="true" className="absolute bottom-0 left-0 text-[10.5px] text-muted-foreground">{dateText(revisions[0]?.date ?? "", locales, true)}</span> <span aria-hidden="true" className="absolute bottom-0 right-0 text-[10.5px] text-muted-foreground">{dateText(revisions[revisions.length - 1]?.date ?? "", locales, true)}</span> <div ref={playheadRef} aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-0 w-px will-change-transform"> <span className="absolute left-0 top-[29px] h-[29px] w-px -translate-x-1/2 bg-primary" /> <div ref={labelRef} className="absolute left-0 top-0 whitespace-nowrap"> <span className="flex h-6 items-center rounded-full bg-primary px-2.5 font-mono text-[10.5px] font-medium text-primary-foreground"> <TextMorph>{revisions[index]?.label ?? ""}</TextMorph> </span> </div> </div> </div> );}export function VersionTimeMachine({ revisions, value, defaultValue, onValueChange, highlight = true, label = "Document revision", locales, className = "", ...props }: VersionTimeMachineProps) { const reduced = useReducedMotion(); const [own, setOwn] = React.useState(defaultValue ?? revisions[revisions.length - 1]?.id); const active = value ?? own; const found = revisions.findIndex((revision) => revision.id === active); const index = found < 0 ? revisions.length - 1 : found; const current = revisions[index]; const [change, setChange] = React.useState({ index, from: Math.max(0, index - 1) }); if (change.index !== index) setChange({ index, from: change.index }); const diff = current ? compareRevisions(revisions[change.from], current) : { added: 0, removed: 0 }; const choose = (next: number) => { const revision = revisions[next]; if (!revision || next === index) return; if (value === undefined) setOwn(revision.id); onValueChange?.(revision.id); }; if (!current) return null; return ( <div className={`@container w-full ${className}`} {...props}> <div className="rounded-[20px] border border-border bg-card p-4 @md:p-5"> <div className="flex items-center justify-between gap-3"> <div className="min-w-0"> <p className="text-[12px] font-medium text-muted-foreground">Version history</p> <p className="mt-0.5 truncate text-[13.5px] font-medium text-foreground"><TextMorph>{current.summary ?? current.label}</TextMorph></p> </div> <span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-[10.5px] font-medium text-muted-foreground"> <NumberRoll value={index + 1} duration={600} /> / {revisions.length} </span> </div> <RevisionRuler revisions={revisions} index={index} value={value} reduced={reduced} label={label} locales={locales} onChoose={choose} /> <div className="mt-3 rounded-[16px] border border-border bg-background p-4 @md:p-5"> <div className="flex min-h-9 items-center justify-between gap-3 border-b border-border pb-3"> <div className="flex min-w-0 items-center gap-2 text-[11.5px] text-muted-foreground"> <span aria-hidden="true" className="flex size-6 shrink-0 items-center justify-center rounded-full bg-chart-1/15 text-[9px] font-semibold text-chart-1"> {(current.author ?? "Editor").split(/\s+/).map((part) => part[0]).join("").slice(0, 2)} </span> <span className="truncate"><TextMorph>{current.author ?? "Editor"}</TextMorph></span> <span aria-hidden="true" className="size-[3px] shrink-0 rounded-full bg-muted-foreground/40" /> <time className="shrink-0" dateTime={new Date(current.date).toISOString()}>{dateText(current.date, locales)}</time> </div> <div className="-mr-2 flex shrink-0 items-center"> <StepButton direction={-1} disabled={index === 0} onStep={() => choose(index - 1)} /> <StepButton direction={1} disabled={index === revisions.length - 1} onStep={() => choose(index + 1)} /> </div> </div> <div className="pt-4"> <Document revision={current} reduced={reduced} highlight={highlight} /> </div> </div> <div className="mt-3 flex items-center gap-3 text-[11.5px] tabular-nums text-muted-foreground"> <span className="text-emerald-600 dark:text-emerald-400">+<NumberRoll value={diff.added} /> added</span> <span className="text-red-600 dark:text-red-400">−<NumberRoll value={diff.removed} /> removed</span> <span className="ml-auto truncate"><TextMorph>{index === revisions.length - 1 ? "Latest revision" : index === 0 ? "First revision" : "Compared with previous view"}</TextMorph></span> </div> </div> <p className="sr-only" role="status"> {current.label}, {dateText(current.date, locales)}. {diff.added} words added and {diff.removed} words removed from the previous view. </p> </div> );}
