Top Bar Search Banner Block for React

Edit PAGES at the top of the file: a label, a section shown under it and a value. Picking a result puts its title in the field, as an autocomplete does. To open the page, pass onValueChange to Autocomplete: it receives the picked value, which you can map to a route. To search a real index, replace matching(query) with your own results, fetched or local; the popup renders whatever the collection holds.

The collection is rebuilt from the typed text on every change, comparing the title and the section without case or accents, so "publish" finds both pages in the Publishing section and "markdown" finds one. A blank field lists all five. Nothing is debounced because the list is local; for a remote index, keep the same shape and add your own delay.

A key listener on the document focuses the field when "/" is pressed, unless the keyboard is already in an input, a textarea, a select or an editable element, where the key types as usual. The field declares it with aria-keyshortcuts, and the key cap is hidden from screen readers because it's a hint, not a control. On a phone the key cap is dropped, since there's no keyboard to press.

The popup says "No results for" followed by the text, in a bdi so it reads right in any direction, and has an outline "Reset search" button. It clears the field, so all five pages are back, and returns focus to the input so you can type again. The strip's height is the same with the popup open, closed or empty.

The input is a combobox with an accessible name and the popup is a listbox of options; the arrow keys move through the results, Enter picks one and Escape closes the popup. The visible product name sits beside the field and the field's own label stays "Search the docs", so the name doesn't depend on the placeholder.

The name shortens to "Quailcraft", the key hint is dropped and the field takes the rest, so the strip stays one line of 44 pixels. The popup is as wide as the field.