File Tabs Navbar Block for React

Edit FILES at the top: an id, a name and whether it starts with unsaved edits. The first entry is current when the page loads. Closed files go on a stack with the slot they sat in, so Reopen puts the last one back exactly where it was. Reopening is local state; nothing is written anywhere.

It throws the edits away and says so in the polite line ("Closed router.ts. Unsaved edits discarded. Showing schema.sql."). A reopened file comes back clean. A real editor would ask first; add a confirm dialog in close if yours should.

It saves every changed file, so the dots disappear and the branch chip's count drops to zero, then the button reads "Ran" for a moment. The polite line says which file ran and that this demo runs nothing. Replace run with your own handler. With no file open, Run is inert but stays in the tab order.

The file strip is a list of buttons with one tab stop: the current file. The arrow keys, Home and End move between files (reversed in a right-to-left page), Enter or Space opens one, and Delete or Backspace closes the focused file. The Close buttons are out of the tab order on purpose, since Delete does the same; click them with a pointer. Run and Reopen follow in the tab order.

The wordmark shrinks to its icon, Run to its icon, and the branch chip hides below md. The file strip takes the rest of the row and scrolls, with a soft edge on the side that has more, and the current file is scrolled into view. Nothing wraps, and the bar is 56 pixels at every width.

Nothing moves on load. The strip scrolls smoothly to a chosen file, or jumps there under reduced motion, and a band of light sweeps across Run once on hover and focus (it fades in place under reduced motion). Opening and closing files change the strip with no transition.