Image Preview Dialog Block for React

So you can see it without a click. On load the inspector is a copy drawn in place over the plans list: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Inspect plans button opens the real full-screen Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same Viewer component and share the block's state, so the sheet and the zoom chosen in the copy are there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

A lightbox steps through pictures; this inspects one large drawing. The sheet is 1200 by 750 units of vector lines and labels, so it stays sharp at 400%, and the controls are about reading it: Fit scales it to the window, the stops and the slider set an exact zoom, the minimap shows where you are, and the arrow keys and dragging pan. For photographs of a gallery, use the lightbox block.

The sheet is an image whose width is 1200 × scale pixels inside a scroll region, so panning is the browser's own scrolling: the arrow keys, the wheel, touch, and a mouse drag that moves the scroll position. Before a zoom the view remembers which point of the sheet is in the middle, and afterwards scrolls back to it. Fit is measured from the viewport's size and follows it when the window is resized. The minimap's rectangle is the scroll position and viewport as shares of the sheet; pressing it centres that point.

The three sheets are drawn SVG strings in PLANS; nothing is fetched or uploaded. Download saves the sheet's own SVG text as plot-plan.svg and the like, a real file. In your app load the sheets from your API into the same shape (a name, a file name and an image address), keep Viewer as it is, and point Download at the original file instead of regenerated text.

Yes. The viewport is a focusable region named for the sheet and its zoom, and the arrow keys pan it. The zoom stops are a toggle group, the slider has a name, previous and next are named buttons that stay in place at the ends, and a polite message says the sheet you moved to. The minimap is a pointer shortcut and hidden from assistive technology, since the arrow keys do the same. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Escape closes it and focus returns to Inspect plans.

Both the copy on load and the real dialog fill the screen. The minimap and the slider are hidden and the controls become one bar: previous and next, the zoom stops and Download. Dragging pans with a finger as any scrolling region does.