Waitlist Morph Startup Navbar Block for React

Nowhere yet: the block keeps it in memory so the control can be shown working, and it stores nothing. Open the submit handler inside Waitlist and send email to your own endpoint before it calls onStep("done"); if the request fails, leave the step on editing and set invalid or show your own message. The check is a simple pattern (EMAIL), only there to catch a typo, so validate on the server too.

Three layers share one grid cell: the button, the form and the confirmation. Only the current one is visible, in the tab order and in the accessibility tree; the others are inert and unseen. A layer fades in with an opacity transition and fades out with opacity and visibility, which is what lets focus move into a layer the moment it appears. The cell's width (WIDTH) eases between the three states; the bar's height never changes. With reduced motion everything swaps at once.

Tab reaches the wordmark, the links and the button. Enter or Space turns the button into the field and puts the cursor in it; Enter submits, Escape returns to the button with focus on it. A bad address is announced as an alert and the field is aria-invalid and described by that line; the line clears once the address is valid. After a good submit focus moves to the "You're on the list" line, which is a status.

Below the lg breakpoint the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was). Below sm the bar holds only the wordmark, the badge and the menu button; the waitlist control is in the sheet, where it fills the row and its controls are larger. The state is shared with the bar's copy: join in the sheet, close it, open it again and you're still on the list. Closing the sheet with the field half-open puts the button back. Nothing wraps at 320 pixels.

Edit PAGES at the top: both the bar and the sheet read it, and the page you're on takes aria-current="page". Every link points at #.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The header keeps overflow-x-clip for the bleeding rule; the error line drops below the bar without being cut. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.