Danger Zone Settings Block for React

Because the cost of a mistake is different. Pausing is undone by one press, so it has no dialog. Archiving changes what everyone can do, so it asks once and says what happens. Deleting is the one that loses things, so it asks for the name typed out and then a deliberate gesture, and still leaves 14 days to change your mind. The meter and the words beside each title (One click, One confirmation, Type the name, then slide) say that up front.

Until the name matches, the slot holds a quiet button that says Type the name to unlock and, pressed, moves focus to the field. When it matches, the Slide to Confirm Button takes its place: drag the handle across the track and release past nine tenths of it, or focus the button and press Enter or Space, which confirms without dragging. A click on the track alone does nothing. It mirrors in right-to-left layouts and the handle jumps instead of easing under reduced motion.

Edit WORKSPACE (the name to type), CONTENTS (what a deletion takes), MEMBERS and GRACE_DAYS. The date the deletion lands on is worked out from AS_OF, a fixed day, so the page reads the same every time; in your app use the real date from your server.

Everything. Pause, Archive and Delete only change what the page says; no member is signed out and nothing is removed. To make it real, send each result from togglePause, confirmArchive, confirmDelete and restore to your server, keep the 14-day hold there, and check on the server that the name was typed: the page's check is only a courtesy.

Both dialogs are alert dialogs: focus starts on Cancel, Escape closes them and focus returns to the button that opened them. When a button is replaced (Archive by Unarchive, Delete by Restore) focus moves to its replacement. The typed-name line is announced as you type, and the status line at the foot is the one live region for the results. Buttons that can't act while a deletion is scheduled stay focusable and say why when pressed.

Each row stacks: the title and its meter, the words, then the button. In the delete dialog the slider takes the full width under Cancel.