Actions 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 lease, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The actions 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 component and share the block's state. 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.

Alt and a letter, or Option on a Mac, runs the action while the menu is open and its input has focus: N rename, U duplicate, X export, G sign and Q request a signature. The block reads the physical key (event.code), so Option's special characters never matter, calls preventDefault so nothing is typed, and ignores the chord when Ctrl or Command is also down. The highlight does not move and the menu stays open, so you can run two actions in a row; Enter or a click runs the highlighted one and closes. The caps say Alt or Option to match the system. The letters avoid the ones browsers use for their menus.

A tint that fades out over half a second on the row whose key you pressed, so the key has a visible answer even when the status line is off screen. Under reduced motion it isn't drawn, and the badge, the signature and the status line still change. Each press mounts a new element, so the flash plays again.

Everything. Sign sets a flag that the drawn badge and signature read, Request signature sets another, and the other actions only say what they would do: rename leaves the title, duplicate makes no copy, export downloads nothing. In your app replace the bodies in run with your calls, for example a request to your signing API for Sign, and set the badge from what the server returns.

Yes. Type to filter, the arrow keys move through the rows, Enter runs the highlighted action and Escape closes the menu and puts focus on the actions 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 under the toolbar at full width, so the keyboard does not cover the foot; the key hints go, the count stays, and each row keeps its key cap (a phone with a hardware keyboard can use them). The real dialog keeps the Command dialog's own phone layout.