Status Board Team Block for React

Edit PEOPLE at the top of the file: each person is a name, a role, an activity, a status ("online", "focus" or "away"), an offset in minutes east of UTC for their clock, and for people in focus an extra that adds whole hours to when the focus ends. The columns are COLUMNS; add a status there and in PEOPLE to get a fourth.

It is one more person in the list, with the status picked in the header. Picking a pill changes that status and the avatar moves to the matching column, at the end of its list. Its clock is your own, read from the browser. Wire the pill group to your own status API where pick sets the state.

It's worked out from the person's clock: the next whole hour on their local time, plus their extra hours. So it is always in the future and never goes stale, and it reads "--:--" until the browser's clock is read after the page loads.

The pills are a labelled group of toggle buttons: Tab enters it and the arrow keys move between the pills. Each column is a labelled list with its count in the heading. When "You" moves, a polite line reads "You are now In focus." without moving focus.

Presence is the one place colour carries meaning, so the three dots use the Status tokens (online, busy, away), and each has its word beside it in the column heading. The pills and the avatars use foreground weights, and "You" is the one solid avatar.

The three columns stack in the same order, each with its dot and count, and a row is the same three short lines: name, activity, then the clock with the focus end. The total height doesn't change when "You" moves from one column to another.