<!-- source-hash: c830a3a2150d037a47f9fe653ca5eac0 -->
Full-screen image gallery modal component with keyboard navigation, prev/next controls, and image counter display.

## Key Components

### `ImageGalleryModal`

The primary (and only) export. Renders a full-screen modal wrapping an image carousel.

**Props (`ImageGalleryModalProps`):**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `images` | `string[]` | — | Array of image URLs to display |
| `isOpen` | `boolean` | — | Controls modal visibility |
| `onClose` | `() => void` | — | Callback fired on close |
| `initialIndex` | `number` | `0` | Starting image index when modal opens |

**Behaviors:**
- **Keyboard navigation** — `ArrowLeft` / `ArrowRight` cycle through images; `Escape` closes the modal
- **Error handling** — Detects unsupported formats (e.g. HEIC) and renders a fallback download link in place of broken images
- **Index reset** — Resets to `initialIndex` whenever the modal re-opens
- **Conditional controls** — Prev/next buttons and counter only render when `images.length > 1`

## Usage Example

```typescript
import { ImageGalleryModal } from '@/components/ui/image-gallery-modal';

const screenshots = [
  'https://cdn.example.com/photo-1.jpg',
  'https://cdn.example.com/photo-2.jpg',
  'https://cdn.example.com/photo-3.heic',
];

export function EventDetail() {
  const [galleryOpen, setGalleryOpen] = useState(false);
  const [startIndex, setStartIndex] = useState(0);

  return (
    <>
      <button onClick={() => { setStartIndex(0); setGalleryOpen(true); }}>
        View Photos
      </button>

      <ImageGalleryModal
        images={screenshots}
        isOpen={galleryOpen}
        onClose={() => setGalleryOpen(false)}
        initialIndex={startIndex}
      />
    </>
  );
}
```

> **Source:** [`components/ui/image-gallery-modal.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/ui/image-gallery-modal.tsx)