@astra-kit/ui 1.1.0 → 1.2.1

package/dist/components/timeline.js

@@ -0,0 +1,1013 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Timeline (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): follow what happened, newest first,
+* grouped by day. Day labels stay pinned while their updates scroll, the connecting line draws itself as rows come into
+* view, rows with details expand in place, and new updates slide in at the top while the rest glide down. Arrow keys
+* move between expandable rows; Enter or Space expands one.
+*/
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { TIMELINE_AVATAR_SIZE_PX, TIMELINE_DEFAULT_HEADING_LEVEL, TIMELINE_DEFAULT_LOCALE, TIMELINE_DEFAULT_MESSAGES, TIMELINE_DEFAULT_TIME_ZONE, TIMELINE_FRESH_ROW_DELAY_S, TIMELINE_RELATIVE_WINDOW_HOURS, TIMELINE_REVEAL_AMOUNT, TIMELINE_REVEAL_QUEUE_LIMIT_S, TIMELINE_REVEAL_STEP_S } from "../constants/timeline.js";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ArcTextSwap } from "../motion/arc-text-swap.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MILLISECONDS_PER_MINUTE = 6e4;
+const MINUTES_PER_HOUR = 60;
+const MILLISECONDS_PER_HOUR = MILLISECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+/** Length of a `YYYY-MM-DD` day key, the start of an ISO timestamp. */
+const DAY_KEY_LENGTH = 10;
+const MILLISECONDS_PER_SECOND = 1e3;
+const enterEase = [...ARC_EASE.enter];
+const standardEase = [...ARC_EASE.standard];
+/** Quick fades that replace travel with reduced motion. */
+const REDUCED_FADE_S = .15;
+const REDUCED_EXIT_S = .1;
+/** Delays, in seconds, between a row's marker popping and its line drawing, and before new content fades in. */
+const LINE_DRAW_DELAY_S = .1;
+const CONTENT_FADE_DELAY_S = .05;
+const DETAIL_FADE_DELAY_S = .06;
+/** Visual durations, in seconds, of the marker pop, the line draw, a row leaving and details collapsing. */
+const MARKER_POP_DURATION_S = .36;
+const MARKER_POP_BOUNCE = .32;
+const LINE_DRAW_DURATION_S = .34;
+const ROW_EXIT_DURATION_S = .3;
+const DETAIL_COLLAPSE_DURATION_S = .28;
+/** Travel, in pixels, of a new row's content and of expanded details settling in. */
+const FRESH_CONTENT_OFFSET_PX = -10;
+const DETAIL_OFFSET_PX = -4;
+/** Scale a marker pops from. */
+const MARKER_ENTER_SCALE = .4;
+const CHEVRON_SIZE_PX = 16;
+const HALF_TURN_DEG = 180;
+const RevealClockContext = createContext(null);
+/**
+* Keys a time by its calendar day in a time zone.
+* @param time - Epoch milliseconds.
+* @param timeZone - Time zone of the day groups.
+* @returns The day as `YYYY-MM-DD`.
+*/
+function dayKey(time, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-CA", {
+		timeZone,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(new Date(time));
+	const get = (type) => parts.find((part) => part.type === type)?.value ?? "";
+	return `${get("year")}-${get("month")}-${get("day")}`;
+}
+/**
+* The calendar day before a day key. It works on the date itself, so a daylight-saving change, where a day lasts 23 or
+* 25 hours, never skips or repeats a day.
+* @param day - A day as `YYYY-MM-DD`.
+* @returns The previous day as `YYYY-MM-DD`.
+*/
+function previousDayKey(day) {
+	const [year, month, date] = day.split("-").map(Number);
+	return new Date(Date.UTC(year, month - 1, date - 1)).toISOString().slice(0, DAY_KEY_LENGTH);
+}
+/**
+* Relative time of a recent event, short for the row and long for screen readers.
+* @param time - When the event happened, in epoch milliseconds.
+* @param now - Reference time, in epoch milliseconds.
+* @param copy - Timeline copy.
+* @returns Short and long relative times.
+*/
+function relativeTime(time, now, copy) {
+	const minutes = Math.max(0, Math.floor((now - time) / MILLISECONDS_PER_MINUTE));
+	if (minutes < 1) return {
+		short: copy.justNowShort,
+		long: copy.justNowLong
+	};
+	if (minutes < MINUTES_PER_HOUR) return {
+		short: copy.minutesShort(minutes),
+		long: copy.minutesLong(minutes)
+	};
+	const hours = Math.floor(minutes / MINUTES_PER_HOUR);
+	return {
+		short: copy.hoursShort(hours),
+		long: copy.hoursLong(hours)
+	};
+}
+/** The day's update count rolls digit by digit in the direction it moved. */
+function RollingCount(t0) {
+	const $ = _c(8);
+	const { value, reduceMotion } = t0;
+	let t1;
+	if ($[0] !== value) {
+		t1 = {
+			value,
+			direction: 1
+		};
+		$[0] = value;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const [state, setState] = useState(t1);
+	if (state.value !== value) {
+		setState({
+			value,
+			direction: value > state.value ? 1 : -1
+		});
+	}
+	const t2 = String(value);
+	let t3;
+	if ($[2] !== t2) {
+		t3 = [...t2];
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	const characters = t3;
+	let t4;
+	if ($[4] !== characters || $[5] !== reduceMotion || $[6] !== state.direction) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "inline-flex",
+			children: characters.map((character, index) => /* @__PURE__ */ _jsx("span", {
+				className: "relative inline-flex overflow-clip [overflow-clip-margin:.15em]",
+				children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+					text: character,
+					reduceMotion,
+					direction: state.direction,
+					className: "inline-flex",
+					lineClassName: "inline-block whitespace-nowrap"
+				})
+			}, characters.length - index))
+		});
+		$[4] = characters;
+		$[5] = reduceMotion;
+		$[6] = state.direction;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	return t4;
+}
+/** A day's section. A new day opens from nothing and pushes the older days down; it clips only while it grows. */
+function DaySection(t0) {
+	const $ = _c(17);
+	const { labelId, isFresh, reduceMotion, children } = t0;
+	const [isEntering, setIsEntering] = useState(isFresh);
+	const t1 = isEntering && "overflow-clip";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("relative", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== isFresh) {
+		t3 = isFresh ? {
+			height: 0,
+			opacity: 0
+		} : false;
+		$[2] = isFresh;
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			height: "auto",
+			opacity: 1
+		};
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	const t5 = reduceMotion ? ARC_DURATION.instant : ARC_DURATION.exit;
+	let t6;
+	if ($[5] !== t5) {
+		t6 = {
+			height: 0,
+			opacity: 0,
+			transition: {
+				duration: t5,
+				ease: standardEase
+			}
+		};
+		$[5] = t5;
+		$[6] = t6;
+	} else {
+		t6 = $[6];
+	}
+	let t7;
+	if ($[7] !== reduceMotion) {
+		t7 = reduceMotion ? { duration: REDUCED_FADE_S } : {
+			height: ARC_SPRING_SMOOTH,
+			opacity: {
+				duration: ARC_DURATION.standard,
+				ease: enterEase
+			}
+		};
+		$[7] = reduceMotion;
+		$[8] = t7;
+	} else {
+		t7 = $[8];
+	}
+	let t8;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => setIsEntering(false);
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] !== children || $[11] !== labelId || $[12] !== t2 || $[13] !== t3 || $[14] !== t6 || $[15] !== t7) {
+		t9 = /* @__PURE__ */ _jsx(motion.section, {
+			"data-slot": "timeline-day",
+			"aria-labelledby": labelId,
+			className: t2,
+			initial: t3,
+			animate: t4,
+			exit: t6,
+			transition: t7,
+			onAnimationComplete: t8,
+			children
+		});
+		$[10] = children;
+		$[11] = labelId;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t9;
+	} else {
+		t9 = $[16];
+	}
+	return t9;
+}
+/** Marker colours: a quiet node for system events, tinted by tone. Portraits sit on a hairline ring. */
+const MARKER_TONE_CLASS_NAMES = {
+	neutral: "bg-surface",
+	success: "bg-[color-mix(in_oklab,var(--success)_12%,var(--surface))] text-success",
+	danger: "bg-[color-mix(in_oklab,var(--danger)_12%,var(--surface))] text-danger"
+};
+/** One update: a marker on the line, the copy and time, and details that expand in place. */
+function TimelineRow(t0) {
+	const $ = _c(99);
+	const { row, isLast, isExpanded, onToggle, timeLabel, timeFull } = t0;
+	const clock = useContext(RevealClockContext);
+	const { reduceMotion } = clock;
+	const detailId = useId();
+	const [revealDelay, setRevealDelay] = useState(null);
+	let t1;
+	if ($[0] !== clock.fresh || $[1] !== row.id) {
+		t1 = clock.fresh.has(row.id);
+		$[0] = clock.fresh;
+		$[1] = row.id;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const isFresh = t1;
+	const [isEntering, setIsEntering] = useState(isFresh);
+	const isShown = revealDelay !== null;
+	const delay = (revealDelay ?? 0) + (isFresh ? TIMELINE_FRESH_ROW_DELAY_S : 0);
+	let t2;
+	if ($[3] !== delay || $[4] !== reduceMotion) {
+		t2 = reduceMotion ? {
+			duration: 0,
+			opacity: { duration: REDUCED_FADE_S }
+		} : {
+			...ARC_SPRING_MORPH,
+			visualDuration: MARKER_POP_DURATION_S,
+			bounce: MARKER_POP_BOUNCE,
+			delay,
+			opacity: {
+				duration: ARC_DURATION.fast,
+				ease: enterEase,
+				delay
+			}
+		};
+		$[3] = delay;
+		$[4] = reduceMotion;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	const pop = t2;
+	let t3;
+	if ($[6] !== delay || $[7] !== reduceMotion) {
+		t3 = reduceMotion ? { duration: 0 } : {
+			...ARC_SPRING_SMOOTH,
+			visualDuration: LINE_DRAW_DURATION_S,
+			delay: delay + LINE_DRAW_DELAY_S
+		};
+		$[6] = delay;
+		$[7] = reduceMotion;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	const draw = t3;
+	const tone = row.avatar ? undefined : row.tone ?? "neutral";
+	let t4;
+	if ($[9] !== row.actor) {
+		t4 = row.actor ? /* @__PURE__ */ _jsx("span", {
+			className: "font-medium text-foreground",
+			children: row.actor
+		}) : null;
+		$[9] = row.actor;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	const t5 = row.actor ? " " : "";
+	let t6;
+	if ($[11] !== row.title || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "timeline-title",
+			className: "text-sm leading-5 text-text-secondary",
+			children: [
+				t4,
+				t5,
+				row.title
+			]
+		});
+		$[11] = row.title;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== row.meta) {
+		t7 = row.meta ? /* @__PURE__ */ _jsx("span", {
+			className: "text-xs leading-(--leading-body) text-text-muted",
+			children: row.meta
+		}) : null;
+		$[15] = row.meta;
+		$[16] = t7;
+	} else {
+		t7 = $[16];
+	}
+	let t8;
+	if ($[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else {
+		t8 = $[19];
+	}
+	let t9;
+	if ($[20] !== row.time) {
+		t9 = new Date(row.time).toISOString();
+		$[20] = row.time;
+		$[21] = t9;
+	} else {
+		t9 = $[21];
+	}
+	let t10;
+	if ($[22] !== reduceMotion || $[23] !== timeLabel) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+				text: timeLabel,
+				reduceMotion,
+				className: "inline-flex",
+				lineClassName: "inline-block whitespace-nowrap"
+			})
+		});
+		$[22] = reduceMotion;
+		$[23] = timeLabel;
+		$[24] = t10;
+	} else {
+		t10 = $[24];
+	}
+	let t11;
+	if ($[25] !== timeFull) {
+		t11 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: timeFull
+		});
+		$[25] = timeFull;
+		$[26] = t11;
+	} else {
+		t11 = $[26];
+	}
+	let t12;
+	if ($[27] !== t10 || $[28] !== t11 || $[29] !== t9 || $[30] !== timeFull) {
+		t12 = /* @__PURE__ */ _jsxs("time", {
+			"data-slot": "timeline-time",
+			dateTime: t9,
+			title: timeFull,
+			className: "flex min-w-11 justify-end text-xs leading-5 whitespace-nowrap text-text-muted tabular-nums",
+			children: [t10, t11]
+		});
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t9;
+		$[30] = timeFull;
+		$[31] = t12;
+	} else {
+		t12 = $[31];
+	}
+	let t13;
+	if ($[32] !== t12 || $[33] !== t8) {
+		t13 = /* @__PURE__ */ _jsxs(_Fragment, { children: [t8, t12] });
+		$[32] = t12;
+		$[33] = t8;
+		$[34] = t13;
+	} else {
+		t13 = $[34];
+	}
+	const content = t13;
+	const t14 = isEntering && "overflow-clip";
+	let t15;
+	if ($[35] !== t14) {
+		t15 = cn("relative pl-[calc(var(--marker)+var(--space-2))]", t14);
+		$[35] = t14;
+		$[36] = t15;
+	} else {
+		t15 = $[36];
+	}
+	let t16;
+	if ($[37] !== isFresh) {
+		t16 = isFresh ? { height: 0 } : false;
+		$[37] = isFresh;
+		$[38] = t16;
+	} else {
+		t16 = $[38];
+	}
+	let t17;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = { height: "auto" };
+		$[39] = t17;
+	} else {
+		t17 = $[39];
+	}
+	let t18;
+	let t19;
+	if ($[40] !== reduceMotion) {
+		t18 = {
+			height: 0,
+			opacity: 0,
+			transition: reduceMotion ? { duration: REDUCED_EXIT_S } : {
+				height: {
+					...ARC_SPRING_SMOOTH,
+					visualDuration: ROW_EXIT_DURATION_S
+				},
+				opacity: { duration: ARC_DURATION.instant }
+			}
+		};
+		t19 = reduceMotion ? { duration: 0 } : ARC_SPRING_SMOOTH;
+		$[40] = reduceMotion;
+		$[41] = t18;
+		$[42] = t19;
+	} else {
+		t18 = $[41];
+		t19 = $[42];
+	}
+	let t20;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = () => setIsEntering(false);
+		$[43] = t20;
+	} else {
+		t20 = $[43];
+	}
+	let t21;
+	if ($[44] !== clock) {
+		t21 = () => setRevealDelay((current) => current ?? clock.schedule());
+		$[44] = clock;
+		$[45] = t21;
+	} else {
+		t21 = $[45];
+	}
+	let t22;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = {
+			once: true,
+			amount: TIMELINE_REVEAL_AMOUNT
+		};
+		$[46] = t22;
+	} else {
+		t22 = $[46];
+	}
+	const t23 = tone && MARKER_TONE_CLASS_NAMES[tone];
+	let t24;
+	if ($[47] !== t23) {
+		t24 = cn("absolute top-(--marker-top) left-0 z-1 grid size-(--marker) place-items-center rounded-(--radius-pill) text-text-secondary after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-[color-mix(in_oklab,var(--foreground)_10%,transparent)] after:content-[''] [&_svg]:size-3.5 [&_svg]:stroke-2", t23);
+		$[47] = t23;
+		$[48] = t24;
+	} else {
+		t24 = $[48];
+	}
+	let t25;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = {
+			scale: MARKER_ENTER_SCALE,
+			opacity: 0
+		};
+		$[49] = t25;
+	} else {
+		t25 = $[49];
+	}
+	let t26;
+	if ($[50] !== isShown) {
+		t26 = isShown ? {
+			scale: 1,
+			opacity: 1
+		} : undefined;
+		$[50] = isShown;
+		$[51] = t26;
+	} else {
+		t26 = $[51];
+	}
+	let t27;
+	if ($[52] !== row.avatar || $[53] !== row.icon) {
+		t27 = row.avatar ? /* @__PURE__ */ _jsx("img", {
+			src: row.avatar,
+			alt: "",
+			width: TIMELINE_AVATAR_SIZE_PX,
+			height: TIMELINE_AVATAR_SIZE_PX,
+			decoding: "async",
+			className: "block size-full rounded-[inherit] object-cover"
+		}) : row.icon;
+		$[52] = row.avatar;
+		$[53] = row.icon;
+		$[54] = t27;
+	} else {
+		t27 = $[54];
+	}
+	let t28;
+	if ($[55] !== pop || $[56] !== t24 || $[57] !== t26 || $[58] !== t27 || $[59] !== tone) {
+		t28 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "timeline-marker",
+			"data-tone": tone,
+			"aria-hidden": "true",
+			className: t24,
+			initial: t25,
+			animate: t26,
+			transition: pop,
+			children: t27
+		});
+		$[55] = pop;
+		$[56] = t24;
+		$[57] = t26;
+		$[58] = t27;
+		$[59] = tone;
+		$[60] = t28;
+	} else {
+		t28 = $[60];
+	}
+	let t29;
+	if ($[61] !== draw || $[62] !== isLast || $[63] !== isShown) {
+		t29 = !isLast ? /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "timeline-line",
+			"aria-hidden": "true",
+			className: "absolute top-[calc(var(--marker-top)+var(--marker)+var(--line-gap))] bottom-[calc(var(--line-gap)-var(--marker-top))] left-[calc(var(--marker)/2_-_.5px)] w-px origin-top bg-border-strong",
+			initial: { scaleY: 0 },
+			animate: isShown ? { scaleY: 1 } : undefined,
+			transition: draw
+		}) : null;
+		$[61] = draw;
+		$[62] = isLast;
+		$[63] = isShown;
+		$[64] = t29;
+	} else {
+		t29 = $[64];
+	}
+	let t30;
+	if ($[65] !== isFresh || $[66] !== reduceMotion) {
+		t30 = isFresh ? reduceMotion ? { opacity: 0 } : {
+			opacity: 0,
+			y: FRESH_CONTENT_OFFSET_PX,
+			filter: `blur(${ARC_BLUR.soft}px)`
+		} : false;
+		$[65] = isFresh;
+		$[66] = reduceMotion;
+		$[67] = t30;
+	} else {
+		t30 = $[67];
+	}
+	let t31;
+	if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+		t31 = {
+			opacity: 1,
+			y: 0,
+			filter: "blur(0px)"
+		};
+		$[68] = t31;
+	} else {
+		t31 = $[68];
+	}
+	let t32;
+	if ($[69] !== reduceMotion) {
+		t32 = reduceMotion ? { duration: REDUCED_FADE_S } : {
+			y: ARC_SPRING_SMOOTH,
+			opacity: {
+				duration: ARC_DURATION.standard,
+				ease: enterEase,
+				delay: CONTENT_FADE_DELAY_S
+			},
+			filter: {
+				duration: ARC_DURATION.standard,
+				ease: enterEase,
+				delay: CONTENT_FADE_DELAY_S
+			}
+		};
+		$[69] = reduceMotion;
+		$[70] = t32;
+	} else {
+		t32 = $[70];
+	}
+	let t33;
+	if ($[71] !== content || $[72] !== detailId || $[73] !== isExpanded || $[74] !== onToggle || $[75] !== reduceMotion || $[76] !== row.detail) {
+		t33 = row.detail ? /* @__PURE__ */ _jsxs("button", {
+			type: "button",
+			"data-timeline-trigger": "",
+			"aria-expanded": isExpanded,
+			"aria-controls": isExpanded ? detailId : undefined,
+			onClick: onToggle,
+			className: cn("grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-(--space-3) rounded-(--radius-control) border-0 bg-transparent px-(--space-3) py-3 text-left [font:inherit] text-inherit [-webkit-tap-highlight-color:transparent] transition-[background-color] duration-(--duration-fast) ease-(--ease-standard) max-[420px]:gap-x-(--space-2) max-[420px]:px-(--space-2) motion-reduce:transition-none", "cursor-pointer grid-cols-[minmax(0,1fr)_auto_16px] hover-fine:bg-surface-muted active:bg-surface-muted"),
+			children: [content, /* @__PURE__ */ _jsx(motion.span, {
+				"aria-hidden": "true",
+				className: "grid h-5 place-items-center text-text-muted",
+				initial: false,
+				animate: { rotate: isExpanded ? HALF_TURN_DEG : 0 },
+				transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SNAPPY,
+				children: /* @__PURE__ */ _jsx(ChevronDown, {
+					size: CHEVRON_SIZE_PX,
+					strokeWidth: 1.75
+				})
+			})]
+		}) : /* @__PURE__ */ _jsx("div", {
+			className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-(--space-3) rounded-(--radius-control) border-0 bg-transparent px-(--space-3) py-3 text-left [font:inherit] text-inherit [-webkit-tap-highlight-color:transparent] transition-[background-color] duration-(--duration-fast) ease-(--ease-standard) max-[420px]:gap-x-(--space-2) max-[420px]:px-(--space-2) motion-reduce:transition-none",
+			children: content
+		});
+		$[71] = content;
+		$[72] = detailId;
+		$[73] = isExpanded;
+		$[74] = onToggle;
+		$[75] = reduceMotion;
+		$[76] = row.detail;
+		$[77] = t33;
+	} else {
+		t33 = $[77];
+	}
+	let t34;
+	if ($[78] !== detailId || $[79] !== isExpanded || $[80] !== reduceMotion || $[81] !== row.detail) {
+		t34 = isExpanded && row.detail ? /* @__PURE__ */ _jsx(motion.div, {
+			id: detailId,
+			"data-slot": "timeline-detail",
+			className: "overflow-clip [overflow-clip-margin:4px]",
+			initial: { height: 0 },
+			animate: { height: "auto" },
+			exit: {
+				height: 0,
+				transition: reduceMotion ? { duration: 0 } : {
+					...ARC_SPRING_SMOOTH,
+					visualDuration: DETAIL_COLLAPSE_DURATION_S
+				}
+			},
+			transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SMOOTH,
+			children: /* @__PURE__ */ _jsx(motion.div, {
+				className: "px-(--space-3) pb-(--space-4) text-sm leading-(--leading-body) text-text-secondary max-[420px]:px-(--space-2)",
+				initial: reduceMotion ? { opacity: 0 } : {
+					opacity: 0,
+					y: DETAIL_OFFSET_PX,
+					filter: `blur(${ARC_BLUR.soft}px)`
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					filter: "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					transition: {
+						duration: ARC_DURATION.instant,
+						ease: standardEase
+					}
+				},
+				transition: reduceMotion ? { duration: REDUCED_FADE_S } : {
+					duration: ARC_DURATION.standard,
+					ease: enterEase,
+					delay: DETAIL_FADE_DELAY_S
+				},
+				children: row.detail
+			})
+		}, "detail") : null;
+		$[78] = detailId;
+		$[79] = isExpanded;
+		$[80] = reduceMotion;
+		$[81] = row.detail;
+		$[82] = t34;
+	} else {
+		t34 = $[82];
+	}
+	let t35;
+	if ($[83] !== t34) {
+		t35 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t34
+		});
+		$[83] = t34;
+		$[84] = t35;
+	} else {
+		t35 = $[84];
+	}
+	let t36;
+	if ($[85] !== t30 || $[86] !== t32 || $[87] !== t33 || $[88] !== t35) {
+		t36 = /* @__PURE__ */ _jsxs(motion.div, {
+			className: "min-w-0",
+			initial: t30,
+			animate: t31,
+			transition: t32,
+			children: [t33, t35]
+		});
+		$[85] = t30;
+		$[86] = t32;
+		$[87] = t33;
+		$[88] = t35;
+		$[89] = t36;
+	} else {
+		t36 = $[89];
+	}
+	let t37;
+	if ($[90] !== t15 || $[91] !== t16 || $[92] !== t18 || $[93] !== t19 || $[94] !== t21 || $[95] !== t28 || $[96] !== t29 || $[97] !== t36) {
+		t37 = /* @__PURE__ */ _jsxs(motion.li, {
+			"data-slot": "timeline-item",
+			className: t15,
+			initial: t16,
+			animate: t17,
+			exit: t18,
+			transition: t19,
+			onAnimationComplete: t20,
+			onViewportEnter: t21,
+			viewport: t22,
+			children: [
+				t28,
+				t29,
+				t36
+			]
+		});
+		$[90] = t15;
+		$[91] = t16;
+		$[92] = t18;
+		$[93] = t19;
+		$[94] = t21;
+		$[95] = t28;
+		$[96] = t29;
+		$[97] = t36;
+		$[98] = t37;
+	} else {
+		t37 = $[98];
+	}
+	return t37;
+}
+/**
+* A vertical activity feed grouped by day with pinned day labels and rows that expand in place.
+* @param props - Events, reference time, accessible name, formatting, scrolling, copy and native div attributes.
+* @returns The labelled feed region.
+*/
+function Timeline({ events, now, label, timeZone = TIMELINE_DEFAULT_TIME_ZONE, locale = TIMELINE_DEFAULT_LOCALE, maxHeight, scrollToNew = true, defaultExpanded = [], headingLevel = TIMELINE_DEFAULT_HEADING_LEVEL, messages, className, ...props }) {
+	const copy = {
+		...TIMELINE_DEFAULT_MESSAGES,
+		...messages
+	};
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const isHydrated = useIsHydrated();
+	const reduceMotion = isHydrated && prefersReducedMotion;
+	const id = useId();
+	const scrollerRef = useRef(null);
+	const trackRef = useRef(null);
+	const [expanded, setExpanded] = useState(() => new Set(defaultExpanded));
+	const ids = events.map((event) => event.id).join("|");
+	const [known, setKnown] = useState(() => ({
+		ids,
+		set: new Set(events.map((event) => event.id)),
+		fresh: new Set(),
+		announcement: "",
+		announcementCount: 0
+	}));
+	if (known.ids !== ids) {
+		const added = events.filter((event) => !known.set.has(event.id));
+		setKnown({
+			ids,
+			set: new Set(events.map((event) => event.id)),
+			fresh: new Set([...known.fresh, ...added.map((event) => event.id)]),
+			announcement: added.length ? copy.newUpdates(added.map((event) => [event.actor, event.title].filter(Boolean).join(" ")).join(". ")) : known.announcement,
+			announcementCount: known.announcementCount + (added.length ? 1 : 0)
+		});
+	}
+	const scrolls = maxHeight !== undefined;
+	useEffect(() => {
+		const scroller = scrollerRef.current;
+		const track = trackRef.current;
+		if (!scrolls || !scroller || !track || typeof ResizeObserver === "undefined") return;
+		const update = () => {
+			if (scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop > 2) scroller.dataset.more = "";
+			else delete scroller.dataset.more;
+		};
+		update();
+		scroller.addEventListener("scroll", update, { passive: true });
+		const observer = new ResizeObserver(update);
+		observer.observe(scroller);
+		observer.observe(track);
+		return () => {
+			scroller.removeEventListener("scroll", update);
+			observer.disconnect();
+		};
+	}, [scrolls]);
+	const newestId = events.reduce((latest, event) => !latest || new Date(event.at).getTime() > new Date(latest.at).getTime() ? event : latest, null)?.id;
+	const scrollOptions = useRef({
+		scrollToNew,
+		reduceMotion
+	});
+	useEffect(() => {
+		scrollOptions.current = {
+			scrollToNew,
+			reduceMotion
+		};
+	});
+	const shownNewestId = useRef(newestId);
+	useEffect(() => {
+		if (shownNewestId.current === newestId) return;
+		shownNewestId.current = newestId;
+		const scroller = scrollerRef.current;
+		if (!scrollOptions.current.scrollToNew || !scroller || scroller.scrollTop < 1) return;
+		scroller.scrollTo({
+			top: 0,
+			behavior: scrollOptions.current.reduceMotion ? "auto" : "smooth"
+		});
+	}, [newestId]);
+	const [initialDays] = useState(() => new Set(events.map((event) => dayKey(new Date(event.at).getTime(), timeZone))));
+	const { today: todayLabel, yesterday: yesterdayLabel } = copy;
+	const todayKey = dayKey(now, timeZone);
+	const groups = useMemo(() => {
+		const today = dayKey(now, timeZone);
+		const yesterday = previousDayKey(today);
+		const heading = new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			timeZone
+		});
+		const byDay = new Map();
+		events.map((event) => ({
+			...event,
+			time: new Date(event.at).getTime()
+		})).sort((first, second) => second.time - first.time).forEach((event) => {
+			const day = dayKey(event.time, timeZone);
+			byDay.set(day, [...byDay.get(day) ?? [], {
+				...event,
+				day
+			}]);
+		});
+		return [...byDay].map(([day, rows]) => ({
+			day,
+			rows,
+			label: day === today ? todayLabel : day === yesterday ? yesterdayLabel : heading.format(new Date(rows[0].time))
+		}));
+	}, [
+		events,
+		now,
+		timeZone,
+		locale,
+		todayLabel,
+		yesterdayLabel
+	]);
+	const formats = useMemo(() => ({
+		clock: new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone
+		}),
+		full: new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone
+		})
+	}), [locale, timeZone]);
+	const nextReveal = useRef(0);
+	const schedule = useCallback(() => {
+		if (reduceMotion) return 0;
+		const current = performance.now() / MILLISECONDS_PER_SECOND;
+		const start = Math.min(Math.max(current, nextReveal.current), current + TIMELINE_REVEAL_QUEUE_LIMIT_S);
+		nextReveal.current = start + TIMELINE_REVEAL_STEP_S;
+		return start - current;
+	}, [reduceMotion]);
+	const clock = useMemo(() => ({
+		schedule,
+		reduceMotion,
+		fresh: known.fresh
+	}), [
+		schedule,
+		reduceMotion,
+		known.fresh
+	]);
+	const toggle = (eventId) => {
+		setExpanded((current) => {
+			const next = new Set(current);
+			if (next.has(eventId)) next.delete(eventId);
+			else next.add(eventId);
+			return next;
+		});
+	};
+	const onKeyDown = (event) => {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const triggers = [...scrollerRef.current?.querySelectorAll("[data-timeline-trigger]") ?? []];
+		const index = triggers.indexOf(document.activeElement);
+		if (index < 0) return;
+		event.preventDefault();
+		const next = event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : Math.min(Math.max(index + (event.key === "ArrowDown" ? 1 : -1), 0), triggers.length - 1);
+		triggers[next]?.focus();
+	};
+	return /* @__PURE__ */ _jsx(RevealClockContext.Provider, {
+		value: clock,
+		children: /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "timeline",
+			role: "region",
+			"aria-label": label,
+			className: cn("relative grid min-w-0 text-foreground [--line-gap:4px] [--marker-top:8px] [--marker:28px]", className),
+			...props,
+			children: [/* @__PURE__ */ _jsx("div", {
+				ref: scrollerRef,
+				"data-slot": "timeline-scroller",
+				"data-scrolls": scrolls || undefined,
+				className: "min-w-0 [overflow-anchor:none] data-scrolls:max-h-(--timeline-height) data-scrolls:overflow-y-auto data-scrolls:overscroll-contain data-scrolls:[scrollbar-color:var(--border-strong)_transparent] data-scrolls:[scrollbar-width:thin] data-more:[mask-image:linear-gradient(to_bottom,#000_calc(100%_-_36px),transparent)]",
+				style: scrolls ? { "--timeline-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : undefined,
+				onKeyDown,
+				children: /* @__PURE__ */ _jsx("div", {
+					ref: trackRef,
+					children: /* @__PURE__ */ _jsx(AnimatePresence, { children: groups.map((group) => {
+						const labelId = `${id}-${group.day}`;
+						const noun = copy.updates(group.rows.length);
+						return /* @__PURE__ */ _jsxs(DaySection, {
+							labelId,
+							isFresh: !initialDays.has(group.day),
+							reduceMotion,
+							children: [/* @__PURE__ */ _jsxs("div", {
+								id: labelId,
+								role: "heading",
+								"aria-level": headingLevel,
+								className: "sticky top-0 z-2 flex items-baseline justify-between gap-(--space-3) bg-[var(--timeline-surface,var(--surface))] py-(--space-2) pr-(--space-3) text-sm leading-(--leading-body) font-medium text-foreground",
+								children: [
+									/* @__PURE__ */ _jsx("span", { children: group.label }),
+									/* @__PURE__ */ _jsxs("span", {
+										"aria-hidden": "true",
+										className: "inline-flex items-baseline text-xs font-normal whitespace-pre text-text-muted tabular-nums",
+										children: [/* @__PURE__ */ _jsx(RollingCount, {
+											value: group.rows.length,
+											reduceMotion
+										}), ` ${noun}`]
+									}),
+									/* @__PURE__ */ _jsx("span", {
+										className: "sr-only",
+										children: `, ${group.rows.length} ${noun}`
+									})
+								]
+							}), /* @__PURE__ */ _jsx("ol", {
+								className: "m-0 mb-(--space-3) list-none p-0",
+								children: /* @__PURE__ */ _jsx(AnimatePresence, { children: group.rows.map((row, index) => {
+									const isRecent = group.day === todayKey && now - row.time < TIMELINE_RELATIVE_WINDOW_HOURS * MILLISECONDS_PER_HOUR;
+									const full = formats.full.format(new Date(row.time));
+									const relative = isRecent ? relativeTime(row.time, now, copy) : null;
+									return /* @__PURE__ */ _jsx(TimelineRow, {
+										row,
+										isLast: index === group.rows.length - 1,
+										isExpanded: expanded.has(row.id),
+										onToggle: () => toggle(row.id),
+										timeLabel: relative ? relative.short : formats.clock.format(new Date(row.time)),
+										timeFull: relative ? `${relative.long}, ${full}` : full
+									}, row.id);
+								}) })
+							})]
+						}, group.day);
+					}) })
+				})
+			}), /* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				role: "status",
+				children: /* @__PURE__ */ _jsx("span", { children: known.announcement }, known.announcementCount)
+			})]
+		})
+	});
+}
+export { Timeline };