<!-- source-hash: 82997feaf6df9370cc3057cd02b01be6 -->
Renders a visual card component for Slack message markers, supporting both `compact` and `row` display variants with optional anchor navigation and a loading skeleton state.

## Key Components

### `SlackMessageCard`
Main card component that displays a Slack message entry with icon, title, preview text, channel name, and date. Rendering behavior varies by nav context:
- Wraps in a caller-provided `<a>` via `anchorProps` if supplied
- Falls back to a direct external `<a href>` if `item.url` is valid
- Renders a static `<span>` when no link is available

### `SlackMessageCardSkeleton`
Animated placeholder matching the card layout for loading states. Accepts `variant` and `className` props.

### `parseChannelFromUrl` *(internal)*
Extracts the Slack channel ID from a Slack archive URL (`*.slack.com/archives/<channelId>/...`) as a fallback when `item.channel` is not set.

### Interfaces

| Interface | Purpose |
|---|---|
| `SlackMessageCardProps` | `item`, `variant`, `className`, `anchorProps` |
| `SlackMessageCardAnchorProps` | Typed `<a>` prop bundle composed by the caller |

## Usage Example

```typescript
import { SlackMessageCard, SlackMessageCardSkeleton } from './slack-message-card'

// Compact card with caller-controlled navigation
<SlackMessageCard
  item={slackMessageItem}
  variant="compact"
  anchorProps={{
    href: '/messages/123',
    onClick: (e) => handleNavigate(e),
  }}
/>

// Inline row variant (e.g. inside a list or table)
<SlackMessageCard
  item={slackMessageItem}
  variant="row"
/>

// Skeleton while loading
<SlackMessageCardSkeleton variant="compact" />
```