Version History Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Version history button 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 HistoryBody and HistoryFoot components and share the block's state, so the version you chose in the copy is chosen in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet, and the diff opens under the chosen version instead of beside the list.

It compares the current text with the chosen version word by word, with a longest-common-subsequence match, and shows what restoring the chosen version would do: words it adds are underlined with a plus, words it removes are struck through with a minus, and everything else is plain. A legend names both marks, each run is read out as "added" or "removed" by a screen reader, and a line under the text counts the words, "2 words added, 9 words removed". The title and the first paragraph are compared separately. Choosing the current version says so instead of showing a diff.

Restore this version asks in the foot, "Restore v4? You can undo it", and the same button then reads "Confirm restore of v4". Confirming adds a new top version, "Restored from v4", with that version's title and paragraph, makes it the current one and selects it; nothing older is changed or lost. Undo is always in the foot, quiet until there is something to take back, and removes the restored version. Cancel and Escape step back from the question before they close the sheet.

All of it. The six versions are typed, the times are typed labels, and Restore only changes the drawn memo in this tab. In your app load the versions from your API in the same shape, post the restore from restore and let the server write the new version; keep diffOf for the comparison, or use the server's own.

Yes. The real sheet is named by its title and described by its sentence, focus starts on the chosen version and stays inside until the sheet closes, and Escape, Cancel and the close button return focus to Version history. The versions are buttons, the chosen one marked as current, and every change is said in a polite message. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.