49: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4b:T3454,"use client"; // easeui.dev/components/motion/toast import { CircleAlert, CircleCheck, X } from "lucide-react"; import { type CSSProperties, type PointerEvent, type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react"; import { cn } from "@/lib/utils"; export type ToastTone = "neutral" | "success" | "error"; export interface ToastAction { label: string; onClick: () => void; } export interface ToastOptions { /** Second line with more detail. */ description?: string; /** Adds a status icon. Default "neutral". */ tone?: ToastTone; /** Time on screen in ms. By default it is worked out from the word count. */ duration?: number; /** One button, such as Undo. Pressing it also closes the toast. */ action?: ToastAction; } type ToastItem = { id: number; title: string; description?: string; tone: ToastTone; duration: number; action?: ToastAction; closing: boolean; swiped: boolean; }; /** Cards visible in the stack. Older ones wait out of sight until there is room. */ const VISIBLE = 3; /** Older toasts are closed once this many are waiting. */ const MAX_QUEUED = 8; /** Space between cards when the stack is spread out. */ const GAP = 10; /** How far each card behind the front one peeks out above it. */ const PEEK = 12; /** How much smaller each card behind the front one is. */ const SCALE_STEP = 0.05; const MOVE_MS = 400; /** Exits are quicker than entrances. */ const EXIT_MS = 200; /** Drag distance, in px, that dismisses a toast. */ const SWIPE_DISTANCE = 45; /** Drag speed, in px per ms, that dismisses a toast even when the drag is short. */ const SWIPE_VELOCITY = 0.11; const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; /** An average reading speed, in words per minute. */ const READING_WPM = 220; let items: ToastItem[] = []; let nextId = 0; const listeners = new Set<() => void>(); const EMPTY: ToastItem[] = []; function emit() { for (const listener of listeners) listener(); } function subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; } /** Long enough to read the message once at a normal pace, plus a moment to notice it. */ function readingTime(text: string) { const words = text.trim().split(/\s+/).filter(Boolean).length; return Math.min(10_000, Math.max(3000, 1500 + (words / READING_WPM) * 60_000)); } function dismiss(id: number, swiped = false) { if (!items.some((item) => item.id === id && !item.closing)) return; items = items.map((item) => (item.id === id ? { ...item, closing: true, swiped } : item)); emit(); setTimeout(() => { items = items.filter((item) => item.id !== id); emit(); }, EXIT_MS); } function show(title: string, options: ToastOptions = {}) { nextId += 1; const { description, tone = "neutral", action } = options; const duration = options.duration ?? readingTime(`${title} ${description ?? ""}`); items = [ ...items, { id: nextId, title, description, tone, duration, action, closing: false, swiped: false }, ]; emit(); const open = items.filter((item) => !item.closing); for (const item of open.slice(0, Math.max(0, open.length - MAX_QUEUED))) dismiss(item.id); return nextId; } /** Shows a toast and returns its id. Render one Toaster somewhere in the app. */ export const toast = Object.assign(show, { success: (title: string, options?: Omit) => show(title, { ...options, tone: "success" }), error: (title: string, options?: Omit) => show(title, { ...options, tone: "error" }), dismiss: (id: number) => dismiss(id), }); function useMediaQuery(query: string) { const [matches, setMatches] = useState(false); useEffect(() => { const list = window.matchMedia(query); const update = () => setMatches(list.matches); update(); list.addEventListener("change", update); return () => list.removeEventListener("change", update); }, [query]); return matches; } /** True while the tab is in the background. */ function useDocumentHidden() { const [hidden, setHidden] = useState(false); useEffect(() => { const update = () => setHidden(document.hidden); update(); document.addEventListener("visibilitychange", update); return () => document.removeEventListener("visibilitychange", update); }, []); return hidden; } const TONE_ICON: Record = { neutral: null, success: , error: , }; type Slot = { /** 0 is the newest card, at the front of the stack. */ index: number; /** Distance from the bottom when the stack is spread out, in px. */ offset: number; }; type CardProps = { item: ToastItem; slot: Slot | undefined; expanded: boolean; height: number | undefined; frontHeight: number; paused: boolean; reduceMotion: boolean; onHeight: (id: number, height: number) => void; }; function ToastCard({ item, slot, expanded, height, frontHeight, paused, reduceMotion, onHeight, }: CardProps) { const contentRef = useRef(null); const remaining = useRef(item.duration); // A closing card has no slot any more, so it stays where it was while it leaves. const lastSlot = useRef({ index: 0, offset: 0 }); if (slot) lastSlot.current = slot; const { index, offset } = lastSlot.current; const [mounted, setMounted] = useState(false); const [drag, setDrag] = useState<{ startY: number; startedAt: number; y: number } | null>(null); const [swipeY, setSwipeY] = useState(0); // Mount below the stack first, then move into place on the next frame so the entrance transitions. useEffect(() => { const frame = requestAnimationFrame(() => setMounted(true)); return () => cancelAnimationFrame(frame); }, []); // Report the natural height, measured on the content so a clipped card still reports its full size. useLayoutEffect(() => { const content = contentRef.current; if (!content) return; const report = () => onHeight(item.id, content.offsetHeight); report(); const observer = new ResizeObserver(report); observer.observe(content); return () => observer.disconnect(); }, [item.id, onHeight]); // The countdown only runs while nobody is reading or dragging. Pausing keeps the time that is left. const dragging = drag !== null; useEffect(() => { if (paused || dragging || item.closing) return; const startedAt = Date.now(); const timeout = setTimeout(() => dismiss(item.id), remaining.current); return () => { clearTimeout(timeout); remaining.current -= Date.now() - startedAt; }; }, [paused, dragging, item.closing, item.id]); const onPointerDown = (event: PointerEvent) => { if (item.closing || event.button !== 0) return; if ((event.target as HTMLElement).closest("button")) return; event.currentTarget.setPointerCapture(event.pointerId); setDrag({ startY: event.clientY, startedAt: Date.now(), y: 0 }); }; const onPointerMove = (event: PointerEvent) => { if (!drag) return; const raw = event.clientY - drag.startY; // Down follows the finger. Up resists, since there is nowhere to go. setDrag({ ...drag, y: raw > 0 ? raw : -Math.sqrt(-raw) }); }; const onPointerUp = () => { if (!drag) return; const velocity = drag.y / Math.max(1, Date.now() - drag.startedAt); if (drag.y > SWIPE_DISTANCE || (drag.y > 8 && velocity > SWIPE_VELOCITY)) { setSwipeY(drag.y); dismiss(item.id, true); } setDrag(null); }; const front = index === 0; const hidden = index >= VISIBLE; const lift = expanded ? offset : index * PEEK; const scale = expanded ? 1 : 1 - index * SCALE_STEP; let transform = `translateY(${-lift + (drag?.y ?? 0)}px) scale(${scale})`; let opacity = hidden ? 0 : 1; if (!mounted) { transform = "translateY(100%)"; opacity = 0; } else if (item.closing) { transform = item.swiped ? `translateY(calc(${-lift + swipeY}px + 100%))` : `translateY(${-lift}px) translateY(${front ? "50%" : "0px"}) scale(${scale})`; opacity = 0; } const duration = item.closing ? EXIT_MS : MOVE_MS; const style: CSSProperties = { transform, opacity, // Cards behind the front one take its height while stacked, so the stack stays tidy. height: height === undefined ? undefined : expanded || front ? height : frontHeight, zIndex: VISIBLE * 10 - index, transition: dragging || reduceMotion ? "none" : `transform ${duration}ms ${EASE_OUT}, opacity ${duration}ms ${EASE_OUT}, height ${MOVE_MS}ms ${EASE_OUT}`, }; return (

setDrag(null)} style={style} className={cn( "absolute inset-x-0 bottom-0 origin-bottom touch-none select-none overflow-hidden rounded-2xl bg-background", "shadow-[0_0_0_1px_var(--border-strong),0_10px_30px_-12px_rgb(0_0_0/0.3)]", (hidden || item.closing) && "pointer-events-none", )} >

{TONE_ICON[item.tone]}

{item.title}

{item.description ? (

{item.description}

) : null}

{item.action ? ( ) : null}

); } /** * Where toasts appear. New toasts slide up from the bottom and push older ones * back into a stack. Hovering spreads the stack out and pauses every countdown, * and so does leaving the tab. Swipe a toast down to dismiss it. */ export function Toaster({ className }: { className?: string }) { const toasts = useSyncExternalStore(subscribe, () => items, () => EMPTY); const hiddenTab = useDocumentHidden(); const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)"); const [expanded, setExpanded] = useState(false); const [heights, setHeights] = useState>({}); const onHeight = useCallback((id: number, height: number) => { setHeights((prev) => (prev[id] === height ? prev : { ...prev, [id]: height })); }, []); const open = toasts.filter((item) => !item.closing).reverse(); const slots = new Map(); let offset = 0; open.forEach((item, index) => { slots.set(item.id, { index, offset }); offset += (heights[item.id] ?? 0) + GAP; }); const frontHeight = open[0] ? (heights[open[0].id] ?? 0) : 0; const shown = open.slice(0, VISIBLE); const spreadHeight = shown.reduce((sum, item) => sum + (heights[item.id] ?? 0), 0) + GAP * Math.max(0, shown.length - 1); // Collapse once the last toast is gone, so the next one starts stacked. useEffect(() => { if (open.length === 0) setExpanded(false); }, [open.length]); return (

))}

); } 48:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L49",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4a",null,{"files":[{"path":"components/motion/toast.tsx","content":"$4b","type":"registry:component","target":"@components/motion/toast.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]