<!-- source-hash: 38660f97f3dee9cba42a817ae6b6490d -->
Environment-aware `next/image` shim that renders a plain `<img>` by default, delegating to the real `next/image` component only when explicitly registered — allowing library components to work across Next.js, Vite, CRA, and esbuild hosts without aliasing.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Image` | `React.ForwardRefExoticComponent` | Default export; the shim component. Renders `<img>` or delegates to registered `next/image` |
| `registerImage` | `(component: ComponentType) => void` | Registers the real `next/image` implementation; call once at app init in Next.js hosts |
| `ImageProps` | `type` | Extended image props supporting both HTML `<img>` attributes and Next.js-specific props |

### `ImageProps` Next.js-specific fields

`fill`, `sizes`, `quality`, `priority`, `placeholder`, `blurDataURL`, `unoptimized`, `loader`, `onLoadingComplete`

## Usage Example

**Non-Next host (Vite/CRA)** — no setup required:

```typescript
import Image from './next-image'

// Renders a plain <img> automatically
<Image src="/hero.png" alt="Hero" width={800} height={400} />
```

**Next.js host** — register once at app init:

```typescript
// lib/embed-shim-registration.ts
import NextImage from 'next/image'
import { registerImage } from '@flamingo-stack/openframe-frontend-core/embed-shims'

registerImage(NextImage) // All shim instances now delegate to next/image
```

**`fill` mode fallback behavior:**

```typescript
// When unregistered, `fill` maps to absolute positioning via inline style
<Image src="/bg.png" alt="Background" fill />
// Renders: <img style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover" />
```

> **Note:** Next.js-only props (`priority`, `placeholder`, `blurDataURL`, `loader`, etc.) are silently dropped on the plain `<img>` fallback path — no runtime errors in non-Next environments.