Settings Version Sheet Success Block for React

So you can see it without a click. On load the sheet 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. View changes opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SheetChanges component and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Here it swaps the two typed versions: the page is redrawn from version 13's values, the sheet closes, focus returns to View changes and a polite status message says "Reverted to version 13 in this demo. Nothing was saved." Opening the sheet again shows "Back on version 13" with Restore version 14, which swaps them back. In your app call your API from revert to restore the older version as a new one, and build the two versions from its response.

By comparing the words each setting shows in the two versions: only the settings whose value differs are listed, and the count ("3 of 3") follows the list. To add a setting, add it to SETTINGS and to readOf, give both versions a value for it and draw it in SettingsDrawing.

From the end of the layout. The catalog's sheet sides are physical, so the block reads the page's direction when you open it and passes left in a right-to-left layout and right otherwise. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange.

Yes. The real sheet is named by its title and described by its sentence, and focus stays inside until it closes; Escape, Done and the close button return focus to View changes. The copy shown on load moves no focus; Escape inside it, Done and its close button close it and put focus on View changes. One polite status message reports a revert or a restore.

The copy shown on load docks to the foot of the page as a bottom sheet with Done and Revert pinned under the list of changes, and the real sheet keeps the Sheet's own phone layout. The drawn page behind it is shorter and keeps its shapes.