Command Palette

Build a keyboard-first command palette in React: a modal search surface that opens from a trigger or platform shortcut, fuzzily filters commands, supports wrapped arrow navigation, and exposes its active option to assistive technology.

Signature

Implement the App component in App.tsx. It receives no props. Keep the provided six-command data set and visual shell.

Examples

• Clicking Search commands, pressing ⌘K on macOS, or pressing Ctrl+K elsewhere opens a labelled modal dialog, clears the previous query, selects the first command, and focuses the search field.
• Typing se keeps Open Settings and Search Docs in source order. Typing nf still finds New File because fuzzy matching accepts ordered, non-adjacent characters.
• With two matches, ArrowUp from the first wraps to the last and ArrowDown wraps back. Enter runs the active command.
• Clicking a command or pressing Enter closes the palette and changes the live status to Ran: <label>.
• Escape, a backdrop click, or the same global shortcut closes without changing the status. Focus returns to the trigger.

Notes

• Fuzzy means ordered subsequence. Compare case-insensitively and advance through the query only when the next character appears in the label. Preserve command source order; ranking is out of scope.
• One active option. Reset activeIndex to 0 after every query change. If there are no matches, arrows and Enter do nothing and the palette shows No commands found.
• Accessible popup contract. The surface is a labelled modal dialog; the input is a combobox controlling a listbox. Give every option a stable id, set aria-selected, point aria-activedescendant at the active option, and keep Tab on the only focusable control while the modal is open.
• Focus lifecycle. Use a trigger ref plus an input ref. Focus from an effect after open mounts the dialog, and return focus to the trigger when the palette closes.
• Derived results. Derive filtered during render from query; do not store results in state.
• Starting shell. The starter includes the data, subsequence matcher, closed shell, and persistent styles. Add state, effects, accessible overlay markup, and event handlers.