Profile Settings Block for React

Public is anyone, signed in or not, so it sees only the parts open to Everyone. Teammate is someone in the same workspace, so it sees Everyone and Workspace parts. Me is you, who sees everything. The table is REACH: add an audience or a viewer there, and the menus, the card and the caption follow. If a name is hidden from a viewer the card shows "A community member" and the initials CM instead.

Yes. The card is drawn from the draft, so a menu you change shows its effect at once, in the card and in the caption's count; Save only keeps the draft as the saved state. Switching the viewer is not a change and doesn't count as unsaved. The card's parts are real text, so a screen reader reads what the chosen viewer would see, and the avatar is decorative.

Everything. The profile is made up, nothing is shown to anyone, and Save copies the draft into the page's own state and says how many changes it kept; Discard puts the saved menus back. To make it real, store an audience per part (SAVED is that map) and check it on your server whenever a profile is read, never only in the browser. Save and Discard stay in place and focusable while nothing changed and answer "No changes to save." in words.

It doesn't edit what the profile says, only who may see each part, and it answers the question people actually have, "what does a stranger see?", with a picture. For the values themselves use an editable form such as the account basic info block.

Each menu is labelled by its part ("Email is visible to") and described by the value it protects. Preview as is a single-choice group with arrow-key movement, and the status line is a polite live region that says what changed and what the chosen viewer now sees. Below the large breakpoint the card moves under the rows, the header sentence is kept for screen readers only to leave room, and the save bar is pinned to the bottom of the screen.