<!-- source-hash: 683edd8a6fb103f7ce880f7847fc90e2 -->
Storybook stories for the `TicketCard` board component, covering drag-and-drop context setup and all visual/behavioral variants.

## Key Components

| Export | Type | Description |
|---|---|---|
| `Default` | `Story` | Full card with all fields: title, device/org, priority, assignee, tags, timestamp |
| `Minimal` | `Story` | Only required fields — all optional rows absent |
| `LongContent` | `Story` | Truncation behavior for long titles and device/org rows |
| `ManyAssigneesAndTags` | `Story` | Overflow badges (`+N`) for assignees and tag pills |
| `WithNewMessage` | `Story` | Colored "New Message" tag and tinted card border via `columnColor` |
| `PendingClientApproval` | `Story` | Collapsed client approval row with approve/reject handlers |
| `PendingTechApproval` | `Story` | Yellow shield admin approval header variant |
| `EscalatedByUser` | `Story` | Escalation flag raised by the requester |
| `ActivityIndicators` | `Story` | The four activity states (AI working, user typing, waiting, stale) |
| `AsLink` | `Story` | Full-card anchor overlay via `href` |
| `DragDisabled` | `Story` | Pinned card — no grab cursor, registers no drag |
| `Priorities` | `Story` | All four priority colors (`low`, `medium`, `high`, `urgent`) side by side |
| `Harness` | Helper | Puts `TicketCard` on the column surface it normally sits on, so its border reads correctly |

## Usage Example

```typescript
// The card registers its own drag and drop — no provider to wrap it in
import { TicketCard } from '../components/features/board'

const ticket = {
  id: 'ticket-1',
  title: 'VPN drops every few minutes',
  ticketNumber: '#1042',
  status: 'TECH_REQUIRED',
  priority: 'high',
  assignees: [{ id: 'u1', initials: 'RS', name: 'Rachel Santos' }],
  tags: ['network', 'vpn'],
  createdAt: new Date().toISOString(),
}

export function Example() {
  return (
        <TicketCard
          ticket={ticket}
          columnId="TECH_REQUIRED"
          columnColor="#2890fa"
          onApprove={(ticketId, requestId) => console.log('approve', ticketId, requestId)}
          onReject={(ticketId, requestId) => console.log('reject', ticketId, requestId)}
        />
  )
}
```

> **Note:** `TicketCard` registers its drag and drop behaviour against its own DOM node and needs no provider around it, so it renders standalone in tests and stories. Only a `<Board>` gives it somewhere to be dropped.

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