Version History Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the editor, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the filters, the reverts and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Each entry carries a small patch, the name, the place or the visibility its layer had before it, and layersFor applies the patches of the entries you reverted to the layer list, so the drawing is always a function of the list of reverts. The entry itself stays in the history, struck through, and choosing it again removes it from that list. Here nothing is saved. In your app, pick is where you call your undo, or apply the inverse change, and mark the entry.

Choosing the last row does not clear anything: the row turns into "Clear 12 entries?" with the keys that answer it, and Enter on it (it is still the highlighted row) clears the history. Escape answers no: in the copy and in the real dialog the first Escape, and a click away, only cancel the question and say "Kept the history."; the next one closes the menu. Choosing any other row or typing also cancels it. Clearing empties the list and leaves the editor as it is, as the status line says.

They are a multiple-choice group where at least one chip stays pressed, so the list is never empty because of them; each is named with its count ("Moved, 3"). They sit above the input and outside the command, because the command's own keys (Enter, the arrows) would take the keys from them. The count in the foot says how many of the twelve are shown, and is spoken when you press a chip or pause typing. On a phone the chips scroll sideways.

Yes. Type to search, the arrow keys move through the entries, Enter reverts or redoes the highlighted one, and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence.

The copy shown on load docks to the top of the page at full width under the drawn bar, so the keyboard does not cover the foot; the chips scroll sideways, the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.