<!-- source-hash: 1ba572f673818df9756a2a78c2e0d6ad -->
A client-side React component that renders a single notification tile with live auto-dismiss countdown, severity-based styling, image fallback, and accessible dismiss/complete controls.

## Key Components

### `NotificationTileProps`
| Prop | Type | Description |
|------|------|-------------|
| `notification` | `Notification` | Core notification data (id, title, description, severity, etc.) |
| `liveDurationMs` | `number` | Auto-dismiss window in ms (default: `4000`) |
| `onComplete` | `(id: string) => void` | Called when user marks notification complete |
| `onSettle` | `(id: string) => void` | Called when countdown expires or user dismisses live tile |
| `paused` | `boolean` | Freezes the countdown without settling the notification |
| `actions` | `ReactNode` | Action row rendered inside the padded section (e.g. approval buttons) |
| `children` | `ReactNode` | Extra content below the padded section; bring your own top divider |

### Internal Logic
- **`accentVariant`** — maps backend `NotificationSeverity` (`INFO`, `SUCCESS`, `WARNING`, `DANGER`) to a `NotificationVariant`; falls back to `notification.variant`.
- **`isLive`** — `true` when the notification is unread, unsettled, and within the `liveDurationMs` window.
- **`failedImageUrl`** — tracks broken image URLs so the component falls back to the `icon` slot or a severity-colored dot.
- **Progress bar** — animates via a CSS `toast-progress` keyframe using `animationDelay` to account for elapsed time since creation.
- **Dual button slot** — dismiss (`XmarkIcon`) and complete (`CheckCircleIcon`) share one 16 px slot; the inactive button is `aria-hidden`, `disabled`, and `tabIndex={-1}`.

## Usage Example

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

function NotificationFeed() {
  const notification = {
    id: 'notif-1',
    title: 'Ticket #4821 updated',
    description: 'A technician has responded to your request.',
    severity: 'INFO' as const,
    variant: 'info' as const,
    createdAt: Date.now() - 1000,
    read: false,
    settled: false,
  }

  return (
    <NotificationTile
      notification={notification}
      liveDurationMs={5000}
      onSettle={(id) => console.log('dismissed', id)}
      onComplete={(id) => console.log('completed', id)}
      actions={
        <button type="button">Approve</button>
      }
    />
  )
}
```

**Source:** [`notification-tile.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/notification-tile.tsx)