Environment Switcher Navbar Block for React

Edit ENVIRONMENTS at the top of the file: an id, a label and the base URL. The segments, the URL cell (drawn over an unseen copy of every URL, so its width never changes) and the polite lines are built from it. needsConfirm decides which environments ask first; it is "production" here, and returning true for another id adds the same dialog to it. The URLs use the reserved .example domain. In an app, replace commit with your own switch (a cookie, a route, a context).

Production is a segment like the others, but choosing it only opens the dialog: the control keeps showing the environment you are in until you press Continue. Cancel, Escape and the overlay's dismissal all leave things as they were and say "Switch cancelled. Still in Staging." Continue switches, updates the URL and the dot (the warning token on Production, the foreground colour elsewhere) and says "Environment: Production. Base URL api.launchlane.example." Nothing is stored or sent. Focus goes back to the segment you chose from.

The segment control is a labelled radio group named Environment. The arrow keys move to a segment and choose it, so arriving on Production opens the dialog. The warning icon is decoration; the word Production is what is read. The URL is read as "Base URL: staging.api.launchlane.example" and the copy button, named "Copy base URL", says "Base URL copied" once the text is on the clipboard (or that it couldn't copy, if the browser refuses). The alert dialog traps focus, is named by its title and description, and returns focus when it closes.

Below the md breakpoint the bar shows the wordmark's icon, the environment's name behind its dot, and a menu button; nothing wraps at 320 pixels. The sheet from the top holds the same segment control, the URL with its copy button and the links. Choosing Production there opens the same dialog above the sheet; Cancel brings you back to the sheet. Escape or the close button closes the sheet and focus goes back to the menu button.

Yes. The bar mirrors, the dividers stay between the cells and the segment control's thumb follows the direction. The URL is always read left to right, as web addresses are, and so is the wordmark. Wrap the block in your direction provider (the catalog's DirectionProvider) so the dialog and the sheet follow the page.

The segment control's thumb slides to the chosen segment, the dialog fades in and the sheet slides down from the top. With reduced motion the thumb jumps, the dialog appears at once and the sheet appears without sliding.