Generalize XDSLightbox to host arbitrary React content (rich previews)
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Context
Follow-up from PR #2474 (template preview dialog). Reviewer (@cixzhang) suggested the prev/next navigation chrome in `TemplatePreviewDialog` overlaps with `XDSLightbox`'s gallery mode and could potentially live in `XDSLightbox` instead.
## Current limitation
`XDSLightbox` already supports gallery mode with controlled `index` + `onIndexChange` and built-in prev/next navigation + keyboard arrows — which is exactly the pattern `TemplatePreviewDialog` reimplements. However, its `media` prop only accepts:
```ts
interface XDSLightboxMedia {
src: string;
alt: string;
caption?: ReactNode;
type?: 'image' | 'video';
}
```
It cannot host an arbitrary React subtree, which the template preview needs (a live template rendered inside a nested `XDSAppShell`, plus a metadata footer with a copy-command button and an Open-in-Playground action).
## Proposal
Generalize `XDSLightbox` to accept rich `ReactNode` content items (e.g. a `content`/`children` variant alongside `media`), so callers can reuse its gallery navigation, keyboard handling, scroll lock, and backdrop/Escape behavior for non-media previews. This would let `TemplatePreviewDialog` (and future rich previews) drop their hand-rolled fixed nav arrows + `keydown` handling.
## Scope notes
- Keep image/video zoom-pan behavior unchanged for `type: 'image'` media.
- Allow per-item footer/caption as `ReactNode`.
- Preserve controlled `index`/`onIndexChange` API.
Linking PR: #2474
Contributor guide
Assessment
This issue has not been assessed yet.