<!-- source-hash: 0ce5f81d0a9d025580e28ea3daa0fb7b -->
Renders markdown images with correct aspect ratios and size constraints inside rich markdown articles, using a lightweight probe to detect intrinsic dimensions before displaying the full image.

## Key Components

### `MarkdownImage({ src, alt })`
The primary export. A client component that:
- **Probes** the image at 48px via `transformImageSrc` to determine the true width/height ratio before fetching the full image
- **Renders a skeleton placeholder** (`animate-pulse`) while the probe is in-flight, preventing layout jumps
- **Passes `object-contain`** to the underlying image shim so Supabase's loader uses `resize=contain` (never crops)
- **Caps display size** at `32rem` tall while maintaining the real aspect ratio — wide images fill the column, tall screenshots don't dominate the page

### Constants
| Name | Value | Purpose |
|---|---|---|
| `MAX_H_REM` | `32` | On-page height cap (~512px) |
| `DISPLAY_W` | `768` | Logical width hint for srcset generation |

### Dependencies
- **`useRichMarkdownRuntime`** — supplies `transformImageSrc`, which adapts image URLs for the active optimizer (Supabase on the hub, identity passthrough elsewhere)
- **`Image` shim** (`embed-shims/next-image`) — full Next.js Image Optimization on the hub, plain `<img>` in other embedders

## Usage Example

```typescript
// Used automatically by the markdown renderer; not typically called directly.
// The rich markdown runtime must be provided by an ancestor RichMarkdownRuntimeProvider.
import { MarkdownImage } from './markdown-image';

// Inside a markdown component map:
const components = {
  img: ({ src, alt }: { src: string; alt?: string }) => (
    <MarkdownImage src={src} alt={alt} />
  ),
};
```

> **Note:** `transformImageSrc` is optional — embedders that omit it receive an identity fallback, so the raw `src` is used for both the probe and display copy.

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