Connected Accounts Settings Block for React

Add an account to PROVIDERS with its two-letter mark, its handle and gives, the fields it can supply and the value each would show, and a field to FIELDS with the value it shows when entered by hand. The radio chips, the results column and the account lines all read from those lists. START_PICKS and START_LINKS set which source each field has and which accounts are connected when the page opens.

An account can be disconnected only when no field uses it as its source. While one does, the Disconnect button is quiet but still answers: the line above it names what it supplies, a press repeats that in the status line and focus moves to the checked source of the first field that depends on it, ready to be changed. Pick another source for every field it supplies and the button becomes the real Disconnect, which asks first.

Everything. Connect adds a row with a fixed date and opens nothing at the service, Disconnect removes it, and the typed values stand in for what each service would return; a reload brings back the starting state. To make it real, start your OAuth flow from Connect, store the account and the scopes granted, read the profile values from it on your server and revoke the token when someone disconnects.

It confirms a disconnect that can't hurt a field. It opens with focus on Keep connected, Escape and Cancel close it and return focus to the button that opened it, and it can't be dismissed by clicking outside it. The destructive action disconnects the account, and focus then goes to that row's Connect button, which replaced it.

The names are real services named in text, as any integration page does, and the tiles are two typed letters in a neutral square, not logos. Each tile has a code comment where you can drop in a logo you have the right to use. The handles, dates and profile values are invented.

Each field becomes a card with its radio chips wrapping under its name and what it shows underneath; each account is a row with its button under the text. The source chips are native radios, so arrow keys move between the ones you can pick and a struck-through one is skipped. The status line is a polite live region present from the start and reads every change.