Command Palette Dialog Block for React

So you can see it without a click. On load the palette is the catalog Command drawn in place over the page, inside a native dialog element that isn't modal, so nothing is trapped or hidden and the page around the preview keeps working; its field doesn't take focus. The header button, or the shortcut, opens the real palette in a modal Dialog with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PaletteBody component and share the block's state, so what was typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

When the palette is in no mode and the first character typed is greater-than, at or hash, prefixOf turns it into a mode and keeps the rest as the search, so a pasted >lock lands in Actions already searching for lock. The mode shows as a chip beside the field. Its button clears the mode, and so does Backspace on an empty field; a prefix typed inside a mode is just text. groupsFor returns the groups each mode shows, so adding a mode is one more entry in PREFIXES and one more branch there.

The block does, with a case-insensitive match on a row's name and its few words of meta, so every library shows the same rows. The Command runs with shouldFilter off, and the field is controlled with value and onValueChange. The foot reads the count back in words ("4 actions") in a polite live region inside the palette, so it is announced in the real modal too, and an empty result names what was typed.

It runs against local state and says what it did in a polite status message: a page becomes the drawn page's title, a person's first name joins its row of mentions, Duplicate adds Copy of to the title, Lock and Wide layout toggle, and the callout appears under the title. Nothing is saved or sent, and nobody is notified. In your app route to the page, insert the mention into your editor, and call your own commands in choose; the rows' labels already follow the page's state (Unlock page, Narrow layout) because they are built from it.

Yes. The real palette is a dialog named by a hidden title, focus starts in the field, the arrow keys move through the rows, Enter chooses and Escape closes and returns focus to the header button. The shortcut is Command and K on a Mac and Control and K elsewhere, shown on the button after the page loads, and it works only while focus is inside this block, so it never competes with your site's own search. The chip is a button named Leave and the mode. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the header button.

The copy shown on load docks to the top of the page, full width, with no corners at the top, because a keyboard would cover its foot. The keys in the foot are dropped to leave room for the count. The real palette keeps the Command dialog's own phone layout, also near the top.