51: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"] 52: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"] 53:T426a,"use client"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const SURFACE = { type: "spring", stiffness: 420, damping: 36, mass: 0.9 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const SMALL = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const FILL = { type: "spring", stiffness: 210, damping: 34, mass: 0.9 } as const; const EASE = [0.23, 1, 0.32, 1] as const; const LEAVE = [0.4, 0, 1, 1] as const; const DRAW = { duration: 0.3, ease: EASE } as const; const INSTANT = { duration: 0 } as const; const SPIN = { duration: 0.85, ease: "linear", repeat: Infinity } as const; const PEEK_FOR = 2600; const LEAVE_DELAY = 160; const face = (on: boolean) => (on ? "" : "pointer-events-none"); const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type ActivityPhase = "running" | "success" | "error"; export type Activity = { id: string; title: string; detail?: string; progress?: number | null; phase: ActivityPhase; action?: { label: string; onClick: () => void }; }; export type ActivityInput = { title: string; detail?: string; progress?: number | null; }; export type UseLiveActivityOptions = { linger?: number; }; export function useLiveActivity({ linger = 2000 }: UseLiveActivityOptions = {}) { const [activity, setActivity] = useState(null); const seq = useRef(0); const timer = useRef | null>(null); const clear = useCallback(() => { if (timer.current) clearTimeout(timer.current); timer.current = null; }, []); const start = useCallback( (input: ActivityInput) => { clear(); seq.current += 1; const id = `activity-${seq.current}`; setActivity({ progress: null, ...input, id, phase: "running" }); return id; }, [clear], ); const update = useCallback((patch: Partial) => { setActivity((prev) => (prev ? { ...prev, ...patch } : prev)); }, []); const dismiss = useCallback(() => { clear(); setActivity(null); }, [clear]); const succeed = useCallback( (patch?: Partial) => { setActivity((prev) => prev ? { ...prev, ...patch, phase: "success", progress: 1 } : prev, ); clear(); timer.current = setTimeout(() => { timer.current = null; setActivity(null); }, linger); }, [clear, linger], ); const fail = useCallback( (patch?: Partial, action?: Activity["action"]) => { clear(); setActivity((prev) => prev ? { ...prev, ...patch, phase: "error", action } : prev, ); }, [clear], ); useEffect(() => clear, [clear]); return { activity, start, update, succeed, fail, dismiss }; } export type UseLiveActivityReturn = ReturnType; export type LiveActivityProps = { activity: Activity | null; onDismiss?: () => void; width?: number; dismissLabel?: string; label?: string; className?: string; }; export function LiveActivity({ activity, onDismiss, width = 300, dismissLabel = "Dismiss activity", label = "Activity", className = "", }: LiveActivityProps) { const reduced = useReducedMotion() === true; const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const [peeking, setPeeking] = useState(false); const [spoken, setSpoken] = useState(""); const compactRef = useRef(null); const expandedRef = useRef(null); const sizes = useRef({ c: { w: 0, h: 0 }, e: { w: 0, h: 0 } }); const [dims, setDims] = useState<{ w: number; h: number } | null>(null); const leaveTimer = useRef | null>(null); const peekTimer = useRef | null>(null); const said = useRef>(new Set()); const phase = activity?.phase ?? "running"; const expanded = activity !== null && (hovered || focused || peeking || phase === "error"); const apply = useCallback((open: boolean) => { const target = open ? sizes.current.e : sizes.current.c; if (target.w === 0 || target.h === 0) return; setDims((prev) => prev && Math.abs(prev.w - target.w) < 0.5 && Math.abs(prev.h - target.h) < 0.5 ? prev : { w: target.w, h: target.h }, ); }, []); useIsoLayoutEffect(() => { if (!activity) return; const read = () => { const c = compactRef.current; const e = expandedRef.current; if (c) sizes.current.c = { w: c.offsetWidth, h: c.offsetHeight }; if (e) sizes.current.e = { w: e.offsetWidth, h: e.offsetHeight }; apply(expanded); }; read(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(read); if (compactRef.current) observer.observe(compactRef.current); if (expandedRef.current) observer.observe(expandedRef.current); return () => observer.disconnect(); }, [activity, expanded, apply]); useEffect(() => { if (!activity) { setPeeking(false); setHovered(false); setFocused(false); setDims(null); return; } setPeeking(true); if (peekTimer.current) clearTimeout(peekTimer.current); peekTimer.current = setTimeout(() => { peekTimer.current = null; setPeeking(false); }, PEEK_FOR); }, [activity?.id, activity?.phase, activity]); useEffect( () => () => { if (leaveTimer.current) clearTimeout(leaveTimer.current); if (peekTimer.current) clearTimeout(peekTimer.current); }, [], ); useEffect(() => { if (!activity) return; const key = `${activity.id}:${activity.phase}`; if (said.current.has(key)) return; if (said.current.size > 64) said.current.clear(); said.current.add(key); setSpoken( activity.phase === "running" ? `${activity.title} started.` : activity.phase === "success" ? `${activity.title} finished.` : `${activity.title} failed.`, ); }, [activity]); const enter = () => { if (leaveTimer.current) clearTimeout(leaveTimer.current); leaveTimer.current = null; setHovered(true); }; const leave = () => { if (leaveTimer.current) clearTimeout(leaveTimer.current); leaveTimer.current = setTimeout(() => { leaveTimer.current = null; setHovered(false); }, LEAVE_DELAY); }; const percent = activity?.progress === null || activity?.progress === undefined ? null : Math.round(Math.min(1, Math.max(0, activity.progress)) * 100); return (

{activity ? ( setFocused(true)} onBlurCapture={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) { setFocused(false); } }} onKeyDown={(e) => { if (e.key !== "Escape") return; e.preventDefault(); if (phase === "running") setHovered(false); else onDismiss?.(); }} className="pointer-events-auto relative overflow-hidden rounded-[11px] border border-stone-200 bg-white shadow-[inset_0_1.5px_0_rgba(255,255,255,0.95),0_1px_2px_rgba(28,25,23,0.07),0_16px_36px_-18px_rgba(28,25,23,0.5)] dark:border-white/[0.16] dark:bg-[#252522] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.07),0_2px_12px_rgba(0,0,0,0.55)]" > {percent !== null && phase === "running" ? ( {percent}% ) : ( {activity.title} )}

{activity.title} {activity.action ? ( ) : null} {onDismiss && phase !== "running" ? ( ) : null}

{activity.detail ? (

{activity.detail}

) : null} {percent !== null && phase !== "error" ? (

{percent}%

) : null} ) : null} {spoken}

); } function PhaseGlyph({ phase, reduced }: { phase: ActivityPhase; reduced: boolean }) { return ( {reduced ? ( ) : ( )} ); } 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/interior/live-activity.tsx","content":"$53","type":"registry:ui","target":"components/interior/live-activity.tsx"}],"className":"h-[70svh] min-h-80"}]]}]