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:T4123,// Hairline UI · live-activity · 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"; /* ───────────────────────────────────────────────────────── * LIVE ACTIVITY: one pill for whatever is happening now * * arrive the pill opens out of nothing when an activity * starts and folds away when it's cleared * update the same activity morphs in place: its label * letter by letter, its progress ring filling, its * figure rolling * switch a different activity blurs in over the last while * the pill reshapes to fit it * expand tap it and the pill itself grows into a panel * (size and corners easing together): title, a * progress bar, steps that tick themselves off, and * actions. Escape or a tap outside folds it back * done the spinner blurs into a check that draws itself; * error, into an alert * * Put it where activity belongs (top of the app, over a * composer); it never covers what it's about. * ───────────────────────────────────────────────────────── */ export type LiveActivityStatus = "running" | "done" | "error"; export interface LiveActivityStep { label: string; done?: boolean; } export interface LiveActivityAction { label: string; onClick: () => void; primary?: boolean; } export interface LiveActivityData { /** A new id is a different activity (it blurs in); the same id updates in place. */ id: string; /** In the pill, e.g. "Editing 3 files". */ label: string; status?: LiveActivityStatus; /** 0 to 1: a ring in the pill and a bar in the panel. */ progress?: number; /** A figure at the pill's end, e.g. elapsed seconds. */ count?: { value: number; format?: Intl.NumberFormatOptions; suffix?: string }; icon?: React.ReactNode; /** The panel's heading; defaults to the label. */ title?: string; /** A line under it. */ detail?: string; steps?: LiveActivityStep[]; actions?: LiveActivityAction[]; } export interface LiveActivityProps extends Omit, "children"> { activity: LiveActivityData | null; expanded?: boolean; defaultExpanded?: boolean; onExpandedChange?: (expanded: boolean) => void; /** The panel's width when expanded. */ panelWidth?: number; } 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"; 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 swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 240ms ${EASE}, transform 360ms ${EASE}, filter 240ms ${EASE}`, }); /** Spinner, check or alert in one slot, trading places through a blur. */ function StatusMark({ status, icon, reduced, size = 16 }: { status: LiveActivityStatus; icon?: React.ReactNode; reduced: boolean; size?: number }) { return ( {icon ?? ( )} ); } function Ring({ value, reduced }: { value: number; reduced: boolean }) { const c = 2 * Math.PI * 6; return ( ); } export function LiveActivity({ activity, expanded: expandedProp, defaultExpanded = false, onExpandedChange, panelWidth = 320, className = "", ...props }: LiveActivityProps) { const reduced = useReducedMotion(); const panelId = React.useId(); const [ownExpanded, setOwnExpanded] = React.useState(defaultExpanded); // Keep the last activity while the pill folds away, so it doesn't empty as it goes. const [last, setLast] = React.useState(activity); if (activity && activity !== last) setLast(activity); const shown = activity ?? last; const present = Boolean(activity); // A cleared activity resets the panel, so the next one starts as a pill. if (!activity && ownExpanded) setOwnExpanded(false); const expanded = (expandedProp ?? ownExpanded) && present; const status = shown?.status ?? "running"; const rootRef = React.useRef(null); const compactRef = React.useRef(null); const panelRef = React.useRef(null); const triggerRef = React.useRef(null); const [size, setSize] = React.useState({ compact: { w: 0, h: 36 }, panel: { w: panelWidth, h: 0 } }); const [enterKey, setEnterKey] = React.useState(shown?.id); const setExpanded = React.useCallback( (next: boolean) => { if (expandedProp === undefined) setOwnExpanded(next); onExpandedChange?.(next); }, [expandedProp, onExpandedChange], ); // Both faces are measured as they are; the surface eases between their sizes. React.useLayoutEffect(() => { const c = compactRef.current; const p = panelRef.current; if (!c || !p) return; const measure = () => setSize((s) => { const next = { compact: { w: c.offsetWidth, h: c.offsetHeight }, panel: { w: p.offsetWidth, h: p.offsetHeight } }; return s.compact.w === next.compact.w && s.compact.h === next.compact.h && s.panel.w === next.panel.w && s.panel.h === next.panel.h ? s : next; }); measure(); const observer = new ResizeObserver(measure); observer.observe(c); observer.observe(p); return () => observer.disconnect(); }, []); // A different activity blurs in over the last. React.useLayoutEffect(() => { if (!shown || shown.id === enterKey) return; setEnterKey(shown.id); const el = compactRef.current; if (!el || reduced) return; el.animate( [ { opacity: 0, filter: "blur(5px)", transform: "translateY(4px)" }, { opacity: 1, filter: "blur(0px)", transform: "none" }, ], { duration: 360, easing: EASE }, ); }, [shown, enterKey, reduced]); // Escape or a tap outside folds the panel back into the pill. React.useEffect(() => { if (!expanded) return; const onKey = (e: KeyboardEvent) => { if (e.key !== "Escape") return; setExpanded(false); triggerRef.current?.focus(); }; const onDown = (e: PointerEvent) => { if (!rootRef.current?.contains(e.target as Node)) setExpanded(false); }; window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onDown); }; }, [expanded, setExpanded]); const w = !present ? 0 : expanded ? size.panel.w : size.compact.w; const h = !present ? size.compact.h : expanded ? size.panel.h : size.compact.h; const progress = shown?.progress; const steps = shown?.steps ?? []; const doneSteps = steps.filter((s) => s.done).length; return (

{/* The pill's face. */}

{/* The panel the pill grows into. */}

{shown?.title ?? shown?.label ?? ""}

{shown?.detail &&

{shown.detail}

}

{shown?.count && ( )}

{progress !== undefined && (

{steps.length ? `${doneSteps} of ${steps.length} steps` : ""}

)} {steps.length > 0 && (

: undefined} reduced={reduced} size={14} /> {s.label}

)} {shown?.actions && shown.actions.length > 0 && (

{shown.actions.map((a) => ( ))}

)}

{/* Announce what changed in words, never the ticking figures. */}

{activity ? `${activity.label}${activity.status === "done" ? ", done" : activity.status === "error" ? ", failed" : ""}` : ""}

); } 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/live-activity.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]