Image Crop Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Edit cover button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same CropFields component and share the block's state, so a shape or a zoom chosen in the copy is 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.

readView reads the cropper's frame and the picture's own transform from the page whenever either changes, turns them into the picture's units, and each preview places the same picture so the crop covers its box: scaled, shifted and carrying the cropper's matrix, so a zoom or a quarter turn shows up in all three at once. A free crop is covered, not stretched, in the round and the square boxes. They are drawn from the picture, with no canvas and no file.

Here it stores the crop and shows it on the cover band of the drawn profile, closes the dialog and says in a polite status message that nothing was uploaded. The landscape is an SVG at module scope. In your app swap PICTURE for the person's file, read the cropped pixels from the cropper's own getCroppedImage or send the crop rectangle to your server, and update the band when it answers.

Yes. The crop frame is a focusable slider: the arrow keys nudge it, with Shift for bigger steps. The shapes are a toggle group, always with one pressed, the zoom is a slider named Zoom, and the turn and Reset buttons are named. The caption under the cropper says the shape in words, and one polite message reports the applied crop. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Focus returns to Edit cover when the dialog closes.

The cropper takes its ratio when it mounts, so a new shape remounts it with a fresh frame of that ratio, keeping the zoom and the turn. Free leaves the ratio out, so the handles resize any way you like. Reset remounts it too, and also returns the shape to Banner, the shape of the cover.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Apply crop on top, and the cropper, the controls and the previews scroll above them, one column, the previews in a row under the controls. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.