Team Presence Live Banner Block for React

Edit PEOPLE: each entry has a name, initials, the doc they are in and whether they start idle. The count in the heading is worked out from the list. To show photos, add an AvatarImage before the fallback in each cell; the initials stay as the fallback while it loads.

Once, seven seconds after load, the idle teammate's dot turns green and the cell says "Editing Q4 plan", and the count goes from 4 to 5. A polite status line that is in the page from the start, visually hidden, says "Jun Watanabe is back, editing Q4 plan. 5 of 5 teammates active." To connect real presence, update the list from your presence channel and set that line only when someone arrives or leaves.

Below lg the roster is a horizontal snap scroller. It takes focus itself, so the arrow keys scroll it, and its name is "Teammates". From lg the cells fit side by side and the scroller's focus stop and snapping are off.

Everything a hover card would say is already in the cell: the name and what they're doing. Nothing needs a pointer to be read, so it works the same on touch and with a keyboard.

Idle is not a problem, just a quieter state, so its dot is the muted tone and only active people get the success colour. The cell's text says "Idle 4 min" too, so the dot is never the only signal.

Yes. The cells fill from the inline start, the dividers sit on each cell's start edge, the avatar's dot sits at its end corner and the link's arrow mirrors. The counts are wrapped in bdi.