Environment Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline, 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 query, the step and the word 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.

Production is the only guarded row. Choosing it sets the step to confirm and the menu body is swapped for a form of the same size, so nothing around it moves. The field wants the word production, ignoring case and spaces around it, and the line under it says whether what you typed matches. The destructive button is always there but aria-disabled until it matches; pressing it, or pressing Enter in the field, before then says "Type production to switch." and puts focus back in the field instead of doing nothing.

It goes back to the list and the menu stays open, so one slip does not close everything; Escape again closes the menu and puts focus on the field. In the real dialog a click outside the dialog also steps back first. The Back button does the same as Escape, and the status line says which environment you are still on.

The catalog's destructive button draws its red text on a faint red tint, which falls under AA in light and dark. Once the word matches, the block pulls the text toward the foreground so it reads at AA on its tint in both themes; before that the button is a quiet grey that says it is not ready. The block has no primary button, as a destructive confirm should not.

Everything. Switching changes the pill and the status line and nothing else: nothing deploys, no environment changes and nothing is saved. In your app pick and confirm are where the console would change its target; keep the typed word on the server side too, since a field in a browser is a guard for people, not a lock.

Yes. Type to search, the arrow keys move, Enter chooses and Escape closes or goes back; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. When the confirm step opens, focus moves to its field. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.