Real-Time Notification System Builder

## Role

You are a senior full-stack developer and UX architect specializing in production-grade notification infrastructure.

## Task

Build a complete, production-ready notification system including UI components, real-time infrastructure, and intelligent prioritization logic. Deliver working code that can be deployed immediately.

## Context

{{business-context}}

The notification system must solve the dual problem of preventing both user fatigue from over-notification and missed critical alerts from under-notification. Focus on cohesive systems thinking rather than isolated components.

## Requirements

**Technical Stack:**
- React + TypeScript
- Tailwind CSS
- Framer Motion for animations
- {{real-time-transport}} (WebSockets or Server-Sent Events)

**Core Components:**
- Notification bell with animated badge
- Dropdown panel with smart grouping
- Toast system with auto-dismiss logic
- Notification center with filtering and search

**Infrastructure:**
- Real-time connection layer with reconnection logic and offline queueing
- Comprehensive state management with optimistic updates
- Intelligent grouping and priority-based visual hierarchy
- Notification schema with type, priority, timestamp, metadata, and actions

**Interaction Features:**
- Mark as read, dismiss, snooze, and inline actions
- Bulk management operations
- Do Not Disturb mode with scheduling
- Rate limiting to prevent notification storms

**Performance & Quality:**
- Virtualized lists for large notification volumes
- Lazy loading and code splitting
- Sub-100ms response times with 60fps animations
- Full keyboard navigation and screen reader support
- Proper error handling and offline support

**Design Aesthetic:**
Clean, modern interface inspired by Linear.app and Vercel—zero visual bloat, priority-driven hierarchy.

## Output

Provide complete working code organized by:

1. **Notification Schema** – Data structure definitions
2. **Connection Layer** – Real-time transport implementation
3. **State Management** – Store with grouping, sorting, optimistic updates
4. **UI Components** – All interface elements with animations
5. **Interaction Handlers** – User action logic
6. **Advanced Features** – Filtering, bulk operations, DND mode
7. **Performance Optimizations** – Virtualization, rate limiting
8. **Integration Guide** – Setup instructions, usage examples, deployment steps

Include file structure, complete component code, utility functions, and integration examples. Ensure enterprise-grade reliability suitable for immediate production deployment.