<!-- source-hash: 147d509f918f296b0265bcdeb8f2a9c1 -->
Flexible error state display component for rendering contextual error, warning, and info messages with optional retry and navigation actions.

## Key Components

### `ErrorState`
The core component accepting the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `'Error'` | Heading text displayed above the message |
| `message` | `string` | — | *(required)* Body text describing the error |
| `variant` | `'error' \| 'warning' \| 'info'` | `'error'` | Controls color scheme and styling |
| `showIcon` | `boolean` | `true` | Toggles the `AlertTriangle` icon |
| `showRetry` | `boolean` | `false` | Shows "Try Again" button when `onRetry` is also provided |
| `showHome` | `boolean` | `false` | Shows "Go Home" button when `onHome` is also provided |
| `onRetry` | `() => void` | — | Callback fired on retry button click |
| `onHome` | `() => void` | — | Callback fired on home button click |
| `className` | `string` | — | Applied to the inner bordered card |
| `containerClassName` | `string` | — | Applied to the outer wrapper `div` |

### Convenience Components

| Component | Variant | Buttons |
|-----------|---------|---------|
| `PageError` | `error` | Retry + Home |
| `LoadError` | `error` | Retry |
| `NotFoundError` | `warning` | Home |

## Usage Example

```typescript
import { ErrorState, PageError, LoadError, NotFoundError } from './error-state'

// Full control via ErrorState
<ErrorState
  title="Connection Failed"
  message="Unable to reach the server."
  variant="warning"
  showRetry
  onRetry={() => refetch()}
/>

// Convenience wrappers
<PageError
  message="Something went wrong loading this page."
  onRetry={() => router.refresh()}
  onHome={() => router.push('/')}
/>

<LoadError
  message="Failed to load device list."
  onRetry={() => refetch()}
/>

<NotFoundError onHome={() => router.push('/')} />
```