<!-- source-hash: 526a5a2e2cd1e53b04aca51a563fe490 -->
Pure presentation component that renders HubSpot ticket data as a compact card or inline row, with a matching skeleton loader for loading states.

## Key Components

### `HubspotTicketCard`
Main card component supporting two layout variants:
- **`compact`** (default) — Full card with title, priority/status badges, customer email, description preview, meta row (company + date), and optional external link icon
- **`row`** — Slim inline layout for use in lists/tables: title, preview snippet, status badge, and date

Accepts an `anchorProps` bundle for caller-controlled navigation (e.g. from a runtime hook), falling back to a plain `<a>` using `item.url`, or a static `<span>` if no URL is available.

### `HubspotTicketCardSkeleton`
Animated pulse placeholder matching the `compact` and `row` layouts, used during data fetching.

### Helper Functions
| Function | Purpose |
|---|---|
| `formatToken` | Normalizes `snake_case` enum strings to `Title case` |
| `priorityScheme` | Maps `URGENT/HIGH/MEDIUM/LOW` → badge color scheme |
| `statusScheme` | Maps `CLOSED/OPEN/...` → badge color scheme |

## Interfaces

```typescript
interface HubspotTicketCardProps {
  item: HubspotTicketItem      // Ticket data shape
  variant?: 'row' | 'compact' // Layout mode (default: 'compact')
  className?: string
  anchorProps?: HubspotTicketCardAnchorProps // Caller-controlled <a> props
}
```

## Usage Example

```typescript
// Compact card with caller-supplied navigation
<HubspotTicketCard
  item={ticket}
  anchorProps={{
    href: buildTicketHref(ticket.id),
    target: '_blank',
    rel: 'noopener noreferrer',
    onClick: (e) => handleTicketClick(e, ticket.id),
  }}
/>

// Inline row variant (e.g. inside a list)
<HubspotTicketCard item={ticket} variant="row" />

// Loading state
<HubspotTicketCardSkeleton variant="compact" />
```