Usage

Dispatch ui:notify from anywhere — JS, HTMX triggers, or other Alpine components. The panel shows unread count, supports mark-read, mark-all-read, and clear.

// In your navbar / header:
@overlays.NotificationCenter(overlays.NotificationCenterProps{
    Align: "right", // "right" | "left"
    Width: "w-80",  // Tailwind width class for the panel
})

// Fire from JS:
document.dispatchEvent(new CustomEvent('ui:notify', {
    detail: { title: 'Done', message: 'Export complete.', type: 'success' }
}))

// Fire from HTMX response header:
// HX-Trigger: {"ui:notify": {"message": "Saved!", "type": "success"}}