<!-- source-hash: 727163d193b2d1e3e47ea92637add9ea -->
Single source of truth for compact card Tailwind class constants and URL safety utilities used across chat-inline `size='sm'` card frames in the OpenFrame chat shell.

## Key Components

### Class Constants

| Export | Purpose |
|--------|---------|
| `COMPACT_CARD_OUTER` | Interactive anchor wrap with hover/transition styles |
| `COMPACT_CARD_OUTER_STATIC` | Non-interactive span wrap (no hover, `cursor-default`) |
| `COMPACT_CARD_SKELETON_OUTER` | Animated pulse skeleton frame |
| `COMPACT_CARD_IMAGE_SLOT` | 56×56 cover image container |
| `COMPACT_CARD_ICON_SLOT` | 56×56 fallback icon container |
| `COMPACT_CARD_SKELETON_IMAGE_SLOT` | 56×56 skeleton image placeholder |
| `COMPACT_CARD_TEXT_COL` | Flex column wrapper for text content |
| `COMPACT_CARD_TITLE_ROW` | Fixed 20px height title row |
| `COMPACT_CARD_META_ROW_BOX` | Fixed 16px height subtitle row |
| `COMPACT_CARD_TITLE` | Bold 14px/20px primary text |
| `COMPACT_CARD_SUBTITLE` | 11px/16px secondary text |
| `COMPACT_CARD_SUMMARY` | 11px/16px secondary text at 80% opacity |
| `COMPACT_CARD_META_ROW` | Multi-part 11px metadata row |
| `COMPACT_CARD_ROW_FILLER` | Non-breaking space to preserve row height |

### Functions

**`safeHref(url)`** — Validates a URL before use in an `<a href>`. Allows `http:`, `https:`, `mailto:`, and same-origin paths (`/path`). Strips control/zero-width characters. Returns the original string or `null`.

## Usage Example

```typescript
import {
  COMPACT_CARD_OUTER,
  COMPACT_CARD_OUTER_STATIC,
  COMPACT_CARD_IMAGE_SLOT,
  COMPACT_CARD_TITLE,
  COMPACT_CARD_SUBTITLE,
  safeHref,
} from './compact-card-classes'

const href = safeHref(card.url)

// Interactive card (valid href)
if (href) {
  return (
    <a href={href} className={COMPACT_CARD_OUTER}>
      <div className={COMPACT_CARD_IMAGE_SLOT}>...</div>
      <span className={COMPACT_CARD_TITLE}>{card.title}</span>
      <span className={COMPACT_CARD_SUBTITLE}>{card.subtitle}</span>
    </a>
  )
}

// Non-interactive fallback
return (
  <span className={COMPACT_CARD_OUTER_STATIC}>
    ...
  </span>
)
```

> Card-specific variations (play overlays, status badges, pill counters) are added inside each card component. The outer frame constants remain uniform across all compact card types.