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:T2dad,/** * Spectrum UI — UndoPill * * An inline undo pill with a draining countdown ring. When opened it springs * in from below, drains an SVG ring over the given duration while counting * the remaining seconds, and fires onExpire when time runs out. Hovering or * focusing the pill pauses the countdown; clicking Undo (or pressing Escape * while focus is within) fires onUndo and exits with a quick bounce. Honors * prefers-reduced-motion and announces itself politely to screen readers. * * Dependencies: framer-motion, @/lib/utils * * @example * restore()} * onExpire={() => commit()} * /> */ "use client" import React, { useCallback, useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useMotionValue, useReducedMotion, type Variants, } from "framer-motion" import { cn } from "@/lib/utils" // ─── Types ─────────────────────────────────────────────────────────────────── export interface UndoPillProps { /** Controls whether the pill is shown. Fully controlled */ open: boolean /** Message shown inside the pill. Default "Deleted" */ label?: string /** Countdown length in seconds. Default 5 */ duration?: number /** Fires when the Undo button is clicked or Escape is pressed within */ onUndo: () => void /** Fires once when the countdown completes */ onExpire: () => void /** Pause the countdown while hovered or focused. Default true */ pauseOnHover?: boolean /** Text of the undo button. Default "Undo" */ undoLabel?: string /** Additional classes merged with the default pill styles */ className?: string } type ExitReason = "undo" | "expire" // ─── Constants ─────────────────────────────────────────────────────────────── const RING_RADIUS = 7 const RING_SIZE = 18 const RING_CENTER = RING_SIZE / 2 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS /** * Longest elapsed time credited per frame. rAF stops in background tabs, so * without this clamp the first frame after returning would land the entire * hidden period at once and the pill could expire mid-jump. */ const MAX_FRAME_DELTA_MS = 100 /** Micro-crossfade when the seconds digit swaps */ const SECONDS_SWAP_DURATION = 0.15 /** Happy bounce-out after a successful undo */ const UNDO_EXIT_DURATION = 0.3 /** Quiet fade once the countdown runs out */ const EXPIRE_EXIT_DURATION = 0.25 const ENTRANCE_SPRING = { type: "spring", stiffness: 500, damping: 30 } as const // ─── Component ─────────────────────────────────────────────────────────────── export function UndoPill({ open, label = "Deleted", duration = 5, onUndo, onExpire, pauseOnHover = true, undoLabel = "Undo", className, }: UndoPillProps) { const shouldReduceMotion = useReducedMotion() const [secondsLeft, setSecondsLeft] = useState(() => Math.ceil(duration)) const [exitReason, setExitReason] = useState("expire") // Mirrors the hover/focus pause into render so the ring can hint the pause const [isPaused, setIsPaused] = useState(false) // Drives the ring's stroke-dashoffset without re-rendering every frame const ringOffset = useMotionValue(0) // Timer bookkeeping — rAF + accumulated elapsed so pause/resume is smooth const rafRef = useRef(null) const lastFrameRef = useRef(0) const elapsedRef = useRef(0) const expiredRef = useRef(false) const hoveredRef = useRef(false) const focusedRef = useRef(false) // Latest props readable from the rAF loop without restarting it const latestRef = useRef({ onExpire, pauseOnHover }) useEffect(() => { latestRef.current = { onExpire, pauseOnHover } }) useEffect(() => { if (!open) return const durationMs = Math.max(duration, 0.001) * 1000 elapsedRef.current = 0 expiredRef.current = false hoveredRef.current = false focusedRef.current = false lastFrameRef.current = performance.now() ringOffset.set(0) setSecondsLeft(Math.ceil(duration)) setExitReason("expire") setIsPaused(false) const tick = (now: number) => { const { onExpire: expire, pauseOnHover: pausable } = latestRef.current const paused = pausable && (hoveredRef.current || focusedRef.current) // Accumulate elapsed instead of diffing wall-clock across pauses, and // clamp the per-frame delta so background-tab time never lands at once if (!paused) { elapsedRef.current += Math.min( now - lastFrameRef.current, MAX_FRAME_DELTA_MS, ) } lastFrameRef.current = now const progress = Math.min(elapsedRef.current / durationMs, 1) ringOffset.set(RING_CIRCUMFERENCE * progress) const remaining = Math.max( 0, Math.ceil((durationMs - elapsedRef.current) / 1000), ) setSecondsLeft((prev) => (prev === remaining ? prev : remaining)) if (progress >= 1) { if (!expiredRef.current) { expiredRef.current = true expire() } return } rafRef.current = requestAnimationFrame(tick) } rafRef.current = requestAnimationFrame(tick) return () => { if (rafRef.current !== null) cancelAnimationFrame(rafRef.current) rafRef.current = null } }, [open, duration, ringOffset]) const handleUndo = useCallback(() => { if (expiredRef.current) return expiredRef.current = true if (rafRef.current !== null) cancelAnimationFrame(rafRef.current) setExitReason("undo") onUndo() }, [onUndo]) const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key !== "Escape") return event.stopPropagation() handleUndo() }, [handleUndo], ) const syncPaused = useCallback(() => { setIsPaused(pauseOnHover && (hoveredRef.current || focusedRef.current)) }, [pauseOnHover]) const pillVariants: Variants = { hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 16, scale: 0.95 }, visible: shouldReduceMotion ? { opacity: 1, transition: { duration: 0.2 } } : { opacity: 1, y: 0, scale: 1, transition: ENTRANCE_SPRING, }, exit: (reason: ExitReason) => shouldReduceMotion ? { opacity: 0, transition: { duration: 0.15 } } : reason === "undo" ? { opacity: [1, 1, 0], scale: [1, 1.04, 0.9], transition: { duration: UNDO_EXIT_DURATION, times: [0, 0.4, 1], ease: "easeIn", }, } : { opacity: 0, scale: 0.9, y: 8, transition: { duration: EXPIRE_EXIT_DURATION, ease: "easeIn" }, }, } return ( {open && ( { hoveredRef.current = true syncPaused() }} onPointerLeave={() => { hoveredRef.current = false syncPaused() }} onFocus={() => { focusedRef.current = true syncPaused() }} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node)) { focusedRef.current = false syncPaused() } }} onKeyDown={handleKeyDown} className={cn( "pointer-events-auto inline-flex select-none items-center gap-2.5 rounded-full bg-neutral-900 py-2 pl-3 pr-2.5 text-sm text-white", "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04)]", "dark:bg-white dark:text-neutral-900 dark:shadow-none", className, )} > {label} )} ) } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/undo-pill/undo-pill.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/undo-pill.tsx"}],"className":"h-[70svh] min-h-80"}]]}]