<!-- source-hash: 4a337b178db352704df1ccdf20c1ec95 -->
A client-side React component that fetches and renders a styled Twitter/X post embed using the oEmbed API, with loading skeletons, error fallback states, and extracted tweet metadata.

## Key Components

### `TwitterEmbedClient`
The main exported component. Accepts a tweet URL (or optional `tweetId`) and renders a fully styled card with profile picture, tweet text, links, and engagement stat labels.

**Props:**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `url` | `string` | — | Full Twitter/X post URL |
| `tweetId` | `string?` | — | Optional explicit tweet ID |
| `maxWidth` | `number` | `700` | Controls content area max height calculation |

### Internal SVG Icons
Inline SVG components (`MessageCircleIcon`, `ExternalLinkIcon`, `HeartIcon`, `RepeatIcon`, `ClockIcon`, `UserIcon`) avoid external icon library dependencies. `XIcon` wraps the shared `XLogo` component.

### `TwitterOEmbedResponse`
TypeScript interface modeling the oEmbed API response shape (author info, HTML, dimensions, provider metadata).

### Key Behaviors
- **Cache-first fetching** via `socialCache.fetchWithHierarchy` — deduplicated, runs once via `initializationDone` ref
- **URL normalization** — extracts tweet ID via regex from any `twitter.com` or `x.com` URL
- **Profile pictures** — fetched from `unavatar.io/twitter/{username}` with an inline SVG base64 fallback on error
- **Text extraction** — parses oEmbed HTML with `DOMParser`, strips attribution suffix, truncates at 600 characters

## Usage Example

```typescript
import { TwitterEmbedClient } from './twitter-embed-client';

// Minimal usage with full URL
<TwitterEmbedClient url="https://x.com/OpenAI/status/1234567890123456789" />

// With explicit tweet ID and custom width
<TwitterEmbedClient
  url="https://x.com/OpenAI/status/1234567890123456789"
  tweetId="1234567890123456789"
  maxWidth={500}
/>
```

**Runtime requirement:** The component calls `useRichMarkdownRuntime()` to obtain `twitterProxyUrl`. A compatible runtime provider must exist in the component tree — see [`useRichMarkdownRuntime`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/rich-markdown/rich-markdown-runtime.ts) for context setup details.