Donut Center Readout Stats Block for React

Edit CHANNELS at the top of the file: each has an id, a label and the spend. Up to five weights are defined in WEIGHTS. The total, the shares, the arcs, the rows and the header's headline are all computed from the list; nothing else needs editing.

Each row is a native button with aria-pressed. One channel can be pressed at a time: pressing another moves the lift and the middle to it, and pressing the pressed one again clears the choice, so the middle shows the total. Tab moves between the rows and Space or Enter presses one. The state is plain React state (picked), so you can also drive it from elsewhere.

The rows are real buttons in a list, named by their text, and the pressed one has a foreground bar on its start edge as well as a tint, so it never relies on colour alone. The donut is hidden from assistive technology since the list says the same, and a polite status line says what the middle shows after each press ("Social: $12,760, 26% of spend").

The arcs sweep in once when the block loads, the pressed arc grows with a short CSS transition and the digits in the middle roll. With reduced motion the arcs and the digits simply change at once.

The panel becomes one column, donut first (about 256 px) and the five rows under it, each row keeping its swatch, name, amount and share on one line at 320 px.