Quick Edit Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline under a picture of the ticket, 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 record you changed in the copy is the one the dialog opens with. 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 field in the typed data names its kind: select for a short list of choices, date for a day, text for free words. The edit step renders the control for that kind (a native select, a date input, a text input) with the field's label, and every one of them keeps its own accessible name and keyboard behaviour. A new field is one more entry in FIELDS, and a new kind is one more branch in Editor.

Before is the record's current value and After is the draft as it would be saved (a title is trimmed, a date is written as a day). They read the same until you change something, and the foot says "No change yet" or "Changed". Saving a draft that equals the record changes nothing and says so. Once a field has changed, its row in the list shows what it was when the page loaded, so a row reads "Pending, was Open".

A past date or an empty title is refused in words, in the line under the editor and on the status line: "Pick 14 Oct 2026 or later." and "Give the ticket a title." Focus stays on the editor, and the draft is kept. The earliest day is a fixed constant in the block, not the clock, so the preview reads the same on every visit; in your app compare against the real day.

All of it. The ticket is typed state, nothing is saved or sent, and the record card is the only thing that changes. In your app give START_TICKET your record, send { field, value } to your API in save, and show its error in the same line a refusal uses.

Yes. Type to search the fields by name or by a word like assignee or deadline, the arrow keys move through them, Enter opens the editor, and Enter in the editor saves; Escape goes back, then closes. Focus moves to the editor when the step changes and back to the search field when it returns. 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.