Invite Seats

Build a team invite step built around the plan's seat limit. Structure: a header with a live seat counter, a column of exactly N seat rows, and Add / Invite buttons. DRAW THE SEATS. Render one row per seat, whether or not it is filled: filled rows hold an avatar, the address and a remove button; empty rows are dashed and labelled "empty seat". A plain "add an email" field hides the limit until the invite fails, and then someone has to be removed in front of the person you just typed in. The counter reads "3 of 5 left" and switches to a status colour (amber) and "no seats left" at zero, so the limit is legible before the Add button is tapped and found dead. Animate each filled row keyed on its address inside AnimatePresence mode="wait": names spring in from x -6 and out to x +6, so adding someone is an event on that seat rather than a whole-list re-render. Removal is per seat, with an aria-label naming the person ("Remove sam@acme.co"). A column of identical X buttons tells a screen reader nothing. The send button carries the count - "Invite 3", not "Invite" - so the size of the action is on the control that performs it. Accessibility: the seat counter is aria-live="polite". Under prefers-reduced-motion, names appear and disappear in place. Colors as tokens: paper surface, hairline borders for filled seats, dashed low-opacity ink for empty ones, one accent for avatars, a reserved amber for the full state. Use placeholder addresses. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.