<!-- source-hash: fd9f374934342611a000534ff097b06e -->
Storybook stories for the `NotificationDrawer` feature, providing interactive visual tests for notification tile variants, drawer states, and live notification dispatching via the `useNotifications` hook.

## Key Components

| Export | Description |
|---|---|
| `AllTileVariants` | Static preview of all five `NotificationVariant` tile styles (`default`, `success`, `error`, `warning`, `info`) in a settled/read state |
| `LiveTile` | Demonstrates the animated progress-bar lifecycle of a freshly arrived tile, with a replay button |
| `DrawerEmpty` | Drawer rendered with zero notifications (empty state), auto-opened on mount |
| `DrawerWithSeedData` | Drawer pre-seeded with six notifications mirroring the Figma reference design |
| `LivePlayground` | Interactive sandbox for firing notifications of any variant, toggling the drawer, and testing `markAllRead`/`clear` |

## Usage Example

```typescript
// Minimal setup mirroring how stories bootstrap the notification system
import {
  NotificationsProvider,
  NotificationDrawer,
  useNotifications,
} from '../components/features/notifications';

function App() {
  return (
    <NotificationsProvider
      initialNotifications={[]}
      onHistoryClick={() => router.push('/notifications')}
      onShowPopupsChange={(enabled) => console.log('popups:', enabled)}
    >
      <NotificationDrawer />
      <FireButton />
    </NotificationsProvider>
  );
}

function FireButton() {
  const { addNotification } = useNotifications();
  return (
    <button
      onClick={() =>
        addNotification({
          variant: 'success',
          title: 'Deployment Complete',
          description: 'HP EliteBook deployed to Marketing Dept',
        })
      }
    >
      Fire notification
    </button>
  );
}
```

> Mount `<NotificationsProvider>` once at the app root. The `<NotificationDrawer>` can be placed anywhere within the provider tree; the bell button in `AppHeader` toggles it automatically.