Act as a senior front-end engineer. Build a toast and notification system for {{business_name}}'s app in my {{tech_stack}} project. If Sonner or an existing toast library is installed, configure it rather than adding another. Inventory current toasts and alerts first. Two channels with clear rules: - toasts: short feedback on the person's own action ("Invoice sent", with Undo) - notification center: things that happened elsewhere (a teammate commented, a payment failed) that need to persist, with read and unread - form validation errors are inline, never toasts Toasts: - types: success, info, warning, error; icon plus text, color never alone - success and info stay at least 5 seconds, longer for longer text; errors that need action stay until dismissed - timers pause on hover and on focus - at most 3 visible; the rest queue; identical messages merge with a count - a single live region exists from page load: polite for most, role alert only for urgent errors - focus never jumps into a toast; any Undo action is also available elsewhere or with a shortcut you announce Placement: bottom center at 360 and 768, above the safe area, any sticky bar and the cookie banner; bottom right at 1280, 360px wide. 16px gaps, 14 to 15px text, 12px radius, one shadow. Notification center: a bell button with the unread count in its accessible name ("Notifications, 3 unread"); a panel grouped by day; mark one or all read; links go to the exact item; real-time updates from the backend (Supabase Realtime if that's the stack); an empty state that says what will appear here. Motion: toasts enter with 8px rise and fade in 200ms, leave in 150ms, and the stack closes up smoothly; swipe to dismiss on touch; fade only under prefers-reduced-motion. Avoid: a toast for every trivial save, six stacked toasts, toasts covering primary buttons, pulsing red dots on the bell.