No Guests Empty State Block for React

The guests live in the page's state: reload and the list is empty, and Start over empties it without a reload. Nothing is sent, saved or emailed. To wire it for real, call your invite API where the code says so, then add the guest from its response, with the pass's own id, and show a pending state until they accept.

From a fixed day written at the top of the file, not the visitor's clock, so the example always reads "Ends 16 Oct" for a 7 day pass. In your app compute it on the server when the pass is created, and show it in the guest's own time zone. The dates are in time elements with the ISO day, and every one is spelled the same on the server and in the browser.

An empty field, an address that is not in the form name@company.example, an address on the workspace's own domain (those people join as members, not guests) and an address that is already a guest. Each is said in a line under the field that holds its space, so the layout never moves, and focus goes back to the field. The button stays in the tab order and says why instead of doing nothing.

It is decoration: hidden from assistive technology, with the same facts in text beside it. The Data List names the guest, what they can do and when the pass ends, the guest list repeats each guest's address and pass, and one polite status line says every change. The words on the badge are HTML laid over the drawing, not SVG text.

The pass stacks: the fields and the Invite guest button come first so the button is on the first screen, then the badge and its summary, then the guest list. The guest list never holds more than three rows, the status line reserves its lines, and the page does not scroll sideways at 320 px.

The expiry is a native select and the access choice is a single Toggle Group that always keeps one value. The pressed choice is a solid foreground tone, never the primary color, so the Shine Button stays the one colored control.