# MediaLightbox

> Shows a picture or video full screen, to zoom and step through.

- **Level**: organism · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: content
- **Import**: `import { MediaLightbox } from "@rrios-forge/ui/organisms/media-lightbox";`
- **Source**: `packages/ui/src/organisms/media-lightbox`

Fullscreen immersive media viewer. Controlled via `open` / `onClose`; owns index, zoom and idle-fade chrome internally. Backdrop is the overlay-backdrop token + content-inverse text (no literal black/white, R04). Icons are consumer slots with text-glyph fallbacks. Replaces the sissificate PostMediaLightbox. Patterns consulted: Patterns/Overlays · ImmersiveMedia, Patterns/Motion · MovementByElementType.

## Use it for

- Media viewer / composer / profile → `MediaLightbox` / `Composer` / `ProfileHeader`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `idle` | — | `true` `false` | `false` | Waiting, with nothing to show yet. |

## Stories

- [Playground](/?path=/story/components-organisms-medialightbox--playground) · frame: `/iframe.html?id=components-organisms-medialightbox--playground&viewMode=story`
- [Mixed media (video + gif)](/?path=/story/components-organisms-medialightbox--mixed-media) · frame: `/iframe.html?id=components-organisms-medialightbox--mixed-media&viewMode=story`
- [Single image (no arrows)](/?path=/story/components-organisms-medialightbox--single-image) · frame: `/iframe.html?id=components-organisms-medialightbox--single-image&viewMode=story`

## Decisions that name it

- ADR-021 — ProfileHeader organism and the `cover` slot contract
- ADR-034 — Accessible names come from a labels provider

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).