<!-- source-hash: bd12c42181c375131ca22d95cc9d9e24 -->
A self-contained notification tile component that renders a single notification with live/settled state management, auto-dismiss timing, and a progress bar animation.

## Key Components

- **`NotificationTileProps`** — Interface defining the tile's configuration:
  - `notification` — The `Notification` object to display
  - `liveDurationMs` — Auto-settle duration in ms (default: `4000`)
  - `onComplete` — Callback fired when the user marks the notification as done
  - `onSettle` — Callback fired when the notification auto-dismisses or is manually closed

- **`NotificationTile`** — Main exported component that:
  - Determines `isLive` state based on `read`, `settled`, and elapsed time since `createdAt`
  - Uses a `useEffect` timer to auto-call `onSettle` after the remaining live duration
  - Shows a dismiss (`XmarkIcon`) button while live, swapping to a complete (`CheckCircleIcon`) button once settled
  - Renders a CSS progress bar (`toast-progress` animation) anchored to `liveDurationMs` with a negative `animationDelay` to account for already-elapsed time

## Usage Example

```typescript
import { NotificationTile } from './notification-tile'

const notification = {
  id: 'notif-1',
  variant: 'success',
  title: 'Ticket resolved',
  description: 'Ticket #4821 has been closed.',
  createdAt: Date.now(),
  read: false,
  settled: false,
}

<NotificationTile
  notification={notification}
  liveDurationMs={5000}
  onComplete={(id) => markComplete(id)}
  onSettle={(id) => settleNotification(id)}
/>
```