Build a toast notification system with queueing and auto-dismiss

type Toast = { id: string; message: string; type: "success" | "error" | "info"; duration: number };
const listeners = new Set<(toasts: Toast[]) => void>();
let toasts: Toast[] = [];
const emit = () => listeners.forEach(l => l(toasts));

export const toast = {
  show(message: string, opts: Partial<Toast> = {}) {
    const id = crypto.randomUUID();
    const t: Toast = { id, message, type: opts.type ?? "info", duration: opts.duration ?? 4000 };
    toasts = [...toasts, t];
    emit();
    if (t.duration > 0) setTimeout(() => toast.dismiss(id), t.duration);
    return id;
  },
  success: (m: string, o?: Partial<Toast>) => toast.show(m, { ...o, type: "success" }),
  error: (m: string, o?: Partial<Toast>) => toast.show(m, { ...o, type: "error" }),
  dismiss(id: string) { toasts = toasts.filter(t => t.id !== id); emit(); },
  subscribe(cb: (toasts: Toast[]) => void) { listeners.add(cb); cb(toasts); return () => listeners.delete(cb); },
};

export function Toaster() {
  const [items, setItems] = useState<Toast[]>([]);
  useEffect(() => toast.subscribe(setItems), []);
  return createPortal(
    <div className="fixed bottom-4 right-4 flex flex-col gap-2" aria-live="polite" aria-atomic="false">
      <AnimatePresence>
        {items.slice(-5).map(t => (
          <motion.div key={t.id} layout
            initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, x: 100 }}
            role={t.type === "error" ? "alert" : "status"}
            className={`rounded shadow px-4 py-2 ${t.type === "error" ? "bg-red-600 text-white" : "bg-white"}`}>
            {t.message}
            <button onClick={() => toast.dismiss(t.id)} aria-label="Dismiss">×</button>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>,
    document.body
  );
}