Radial Hub Satellite Graph Features Block for React

Edit TOOLS at the top of the file: each has a name, a two-letter mark, a status ("connected", "syncing" or "auth") and a note. The six sit at equal angles from the top, clockwise; the spokes, the dots and the list are all made from the array. A tool that needs auth gets a dashed spoke and no dot.

Yes. A Pause flow toggle in the corner of the diagram freezes every dot where it is, and with reduced motion the dots are hidden altogether, leaving the spokes. The animation is SMIL inside the SVG, so nothing runs in JavaScript between frames.

The tools are one group of radio buttons: Tab puts focus on the chosen tool and the arrow keys move around the ring, choosing a tool as they go, which lights its spoke and its row. Each tool's description points at its row, so a screen reader hears its status and note.

A dot alone would be a colour or a shape to decode. Every row says Connected, Syncing or Needs auth in text, and the dot only repeats it: a solid dot, a ring and, for the one exception, the warning colour.

The list comes first, then the tinted diagram under it, shrunk to the width; each tool's tile is 44 pixels and its name sits under it. The row note wraps under the status.

No: a diagram keeps its geography, so the figure is dir="ltr". The header and the list follow the page's direction, and the diagram cell stays on the start side, so it moves to the other edge.