<!-- source-hash: 79398b1e78d30f30fbc2dcd2bf7f5787 -->
Storybook stories for the `DeviceCard` UI component, covering all major display states, OS variants, action configurations, and status badges.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Default` | `Story` | Basic device card with minimal info |
| `WindowsDevice` / `LinuxDevice` | `Story` | OS-specific rendering variants |
| `WithTags` | `Story` | Device card with tag pills |
| `WithCustomActions` | `Story` | Custom action buttons (Remote Access, Run Script) |
| `WithDetailsButton` | `Story` | Inline details button via `detailsButton.component` |
| `WithStatusBadge` / `WithWarningStatus` / `OfflineDevice` | `Story` | Status tag variants (`success`, `warning`, `grey`) |
| `Minimal` | `Story` | Bare-minimum fields, no more button |
| `FullyLoaded` | `Story` | All props populated including IP, version, location |
| `CardGrid` | `Story` | Grid layout decorator showing 4 cards side-by-side |

## Usage Example

```typescript
import { DeviceCard } from '../components/ui/device-card'

<DeviceCard
  device={{
    id: '1',
    name: 'MacBook Pro',
    operatingSystem: 'darwin',
    organization: 'Engineering Team',
    status: 'active',
    lastSeen: new Date().toISOString(),
    tags: ['Production', 'Critical'],
  }}
  actions={{
    moreButton: { visible: true },
    customActions: [
      { label: 'Remote Access', visible: true },
    ],
  }}
  statusTag={{ label: 'Online', variant: 'success' }}
  onDeviceClick={(device) => console.log('Clicked:', device)}
/>
```

## Controlled Props (argTypes)

| Prop | Control | Description |
|------|---------|-------------|
| `device` | `object` | Device data including OS, org, status, tags |
| `actions` | `object` | `moreButton`, `customActions`, `detailsButton` config |
| `statusTag` | `object` | `label`, `variant`, `icon`, `onClose`, `className` |
| `onDeviceClick` | `action` | Fired when the card is clicked |