Generation lightboxPro

A full screen viewer for generations: wheel, pinch and double click zoom with drag to pan, arrows between images, side by side compare on one shared view, and the prompt with every parameter next to your actions.

Markdown

On this page

ProA full screen viewer with zoom and pan, arrows between results, side by side compare and the prompt with every parameter.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/generation-lightbox

Usage

tsx

import { GenerationLightbox } from "@/components/ui/chatcn/pro/generation-lightbox"

<GenerationLightbox
  open={open}
  onOpenChange={setOpen}
  images={group.images}
  index={index}
  onIndexChange={setIndex}
  returnFocus={(image) => tileFor(image.id)}
  actions={<VariationActions onAction={run} />}
/>

The viewer is controlled: you own open and index. Images carry their parameters (prompt, model, seed, steps, guidance, size, duration) and the details panel shows them with GenerationMetadata. actions is any node, or a function of the current image; inside the viewer, VariationActions shortcuts are scoped to it.

Both sides of a compare share one zoom and pan, so the same spot is always under comparison. Past 200% the image draws without smoothing, so you see the real pixels.

Wired to GenerationFeed, the feed demo above opens from any tile and returns focus to the same tile when the viewer closes, even after you moved through other images.

Examples

Compare two results

ProOpens side by side on one shared view: zoom or pan either image and both follow.

States

Still generating, a file that did not load (with Retry), a single image (no arrows, no compare) and right to left. The viewer renders in a portal, so pass dir when your layout sets it.

ProStill generating, a file that did not load and a single image.

Props

Prop	Type	Notes
`open`, `onOpenChange`	`boolean`	Controlled
`images`	`StudioImage[]`	The images you can move through
`index`, `onIndexChange`	`number`	Controlled. Arrows wrap around
`prompt`	`string`	Title and prompt when the images carry no `parameters`
`siblings`	`StudioImage[]`	Images to compare with and pick from. Default `images`
`actions`	`ReactNode \| (image, index) => ReactNode`	At the top of the details panel
`returnFocus`	`(image, index) => HTMLElement \| null`	Where focus goes on close. Default the element that opened the viewer
`defaultPanelOpen`	`boolean`	Default true
`defaultCompare`, `defaultCompareId`	`boolean`, `string`	Open side by side, with that sibling
`dir`	`"ltr" \| "rtl"`	For right to left, since the viewer renders in a portal
`label`	`string`	Accessible name prefix. Default "Image viewer"

Keyboard

Key	Action
`←`, `→`	Previous or next image; pan once zoomed. Mirrored in right to left
`↑`, `↓`	Pan once zoomed. `Shift` pans further
`+`, `-`, `0`	Zoom in, zoom out, fit
`C`	Compare side by side, or stop comparing
`Escape`	Close and return focus to the thumbnail
`Tab`	Through the toolbar, the details panel and the sibling strip

Accessibility

A modal dialog titled by the prompt. Focus is trapped inside and starts on the image, so the keys work at once.
Moving between images announces "Image 2 of 4" politely. Every icon button has a name and a tooltip with its key.
The sibling strip is one tab stop with arrow keys; the image showing and the one compared are marked as selected.
Single letter keys never fire while you type in a field inside the viewer.

Motion

Opened with a pointer, the viewer fades in over 220 ms from 0.98 and leaves in 160 ms. Opened or closed from the keyboard, it is instant.
Moving between images never animates. Zoom buttons and double click ease the transform over 200 ms; wheel, pinch, drag and keys follow the input directly.
Under reduced motion only the fades remain.