Saved Draft Top Bar Banner Block for React

The first save is a little old (12 seconds), and the age is worked out in the browser after the first render, so the server's markup is the same every time. Until then the line holds the room of "12 seconds ago" invisibly, so nothing shifts when it fills in. It is a time element with a machine-readable dateTime, updated once a second from Intl.RelativeTimeFormat: seconds first, then minutes. It is not inside a live region, so a screen reader is not told every second.

Nothing in the block saves a document: they flip a state and are the two places to call your own code. In restore bring back the previous version and, in undo, the latest one. Both reset the saved time to now (the document has just been saved again) and set the status line's text.

The button you pressed is replaced by the other state's, so focus is moved for you: to Undo after a restore, and back to Restore previous after an Undo. The hidden state is invisible and inert, so it can't be reached by Tab or read by a screen reader. Focus is moved in an effect after the change is on screen.

The strip is a labelled "Draft status" region. A polite status line, empty until the first press, says "Previous version restored." or "Undone. Your latest draft is back." The ticking age is deliberately outside it.

It stands for one real state: the draft is saved. It uses the success token and is hidden from assistive technology, because the words say the same. If saving can fail, switch the dot and the words together to the warning token and "Saving paused".

At 393 pixels it is one line. At 320 pixels the status wraps to two ("Draft saved" and "12 seconds ago") beside the button, which keeps its own line. In right-to-left layouts the two ends swap and nothing scrolls sideways.