Presence Avatars Navbar Block for React

Replace PEOPLE at the top with your own list: initials, name, the section each person is in, and whether they are editing. The count, the dots, the roster rows and the polite line all read that list, so they can't disagree. The entry with self is the viewer, and it's the only one the switch changes. In a real product, feed the list from your presence channel.

Yes. The dot is solid for editing and hollow for viewing, but every roster row also says "Editing" or "Viewing" in words, and the bar reads "3 editing". The avatars in the bar are hidden from screen readers because that count and the roster say the same.

The switch changes your own row and the bar's count at once and a polite line says "You are shown as viewing. 2 editing." It doesn't send anything: it's state on this page. Copy puts the link on the clipboard and its label says "Link copied". The link uses a reserved example domain; replace LINK.

Share opens the popover with Enter or Space, and Escape closes it and returns focus to Share. Focus moves into the popover on open; Tab walks the switch, the link field and Copy.

The wordmark shrinks to its icon and Share to its icon (the words stay for screen readers). The avatars collapse to a people icon and the number; the word "editing" stays for screen readers. The popover is as wide as the screen allows, less a margin. Nothing wraps and the bar is 56 pixels at every width.

Nothing moves on load. The popover fades and grows from Share, and appears instantly under reduced motion; a band of light sweeps across Share once on hover and focus (it fades in place under reduced motion). The count and dots change in place.