Command Menu Features Block for React

Edit ACTIONS at the top of the file: each entry has a group, an icon, a label, a shortcut, a text sentence, three steps and a value that identifies it. The preview pane reads those same fields, so a new action needs nothing else. The groups are listed once in GROUPS, in the order they show: add a new group's name there as well.

The command's own value is the highlighted item, and the block keeps it in state, so the arrow keys and the pointer both move the preview.

It selects the highlighted action and writes "Ran" and its name in the strip under the palette, which is a polite live region. That is a stand-in: replace setRan with the call that really starts the workflow.

No. An open command moves focus into its field when it mounts, so the block hands focus back a moment later unless the reader has already moved, and a page that loads this block keeps its own focus and scroll position. Click the field or tab to it and it behaves as any search field does.

It matches the action's label anywhere in the word, ignoring case, so "sec" finds "Rotate a secret". A group left with no matches disappears, and with no matches at all the list says "No actions found." and the preview pane says so too. The list keeps its height while you type, so nothing below it moves.

The preview pane is hidden below md and the list takes the whole width, at a fixed height that scrolls. The shortcuts stay in each row and the hint strip wraps. Nothing scrolls sideways at 320 pixels.