// src/components/ui/Toast.tsx "use client"; import { createContext, useCallback, useContext, useRef, useState, type ReactNode, } from "react"; import { cx } from "@/lib/cx"; import Button from "./Button"; export interface ToastOptions { message: string; tone?: "neutral" | "success" | "caution" | "danger"; /** Optional action, e.g. { label: "Undo", onAction }. Undo-everything lives here. */ action?: { label: string; onAction: () => void }; } interface ToastRecord extends ToastOptions { id: number; } const ToastContext = createContext<((opts: ToastOptions) => void) | null>(null); export function useToast() { const ctx = useContext(ToastContext); if (!ctx) throw new Error("useToast must be used inside "); return ctx; } // Auto-dismiss timing (behavioral constant, not a style token). Pauses on hover. const DISMISS_AFTER_MS = 5000; export function ToastProvider({ children }: { children: ReactNode }) { const [toasts, setToasts] = useState([]); const nextId = useRef(1); const timers = useRef(new Map>()); const dismiss = useCallback((id: number) => { setToasts((t) => t.filter((x) => x.id !== id)); const timer = timers.current.get(id); if (timer) clearTimeout(timer); timers.current.delete(id); }, []); const schedule = useCallback( (id: number) => { timers.current.set( id, setTimeout(() => dismiss(id), DISMISS_AFTER_MS) ); }, [dismiss] ); const toast = useCallback( (opts: ToastOptions) => { const id = nextId.current++; setToasts((t) => [...t, { id, ...opts }]); schedule(id); }, [schedule] ); return ( {children}

{toasts.map((t) => (

{ const timer = timers.current.get(t.id); if (timer) clearTimeout(timer); }} onMouseLeave={() => schedule(t.id)} > {t.message} {t.action && ( )}

))}

); }