Setup Checklist Onboarding Block for React

Edit STEPS: each has an id, a title, the sentence shown when it is open and the action label of its button. START_DONE and START_OPEN say what is done and which step is open on load. The count, the progress line, the Done and Next up words and the sentence under the list are all worked out from the list of done ids, never typed twice, so adding a seventh step needs nothing else. Keep the sentences about the same length: every open step is given the same height, so the panel never jumps between steps.

In the demo the step is marked Done and the next step that is not done opens, going round to the top if needed; focus moves to that step's header and a polite status line says what changed ("Marked done in this demo. 4 of 6 to do. Next up: Invite your team."). When the last step is done nothing opens, the line under the list reads "All six steps are done. You can hide this guide." (the foot always has a Hide guide button). A done step opens to a Mark as not done button instead.

The menu has two items. Hide completed steps takes the done rows out of the list, keeps the panel at the same height and says how many are hidden. Hide guide replaces the whole panel with the pill, and focus goes to the pill; the pill (or Show guide in the menu) brings the guide back with the same step open. Nothing is remembered between visits in the demo: to remember it, save the two flags with the person's account.

Everything. Nothing is sent, created or invited: the buttons only change the ticks. In your app, make each button open the real place (the template editor, the invite dialog) and let done come from what your server knows the account has done, so a step ticks itself when the work is finished anywhere. Keep the hidden flags per person.

Yes. Tab reaches the menu button, each step header and the open step's button; Enter or Space opens a step. The menu opens with Enter, Space or the arrow keys and closes with Escape, returning focus to its button. The arrow keys don't move between step headers on this base; Tab does.

The header's menu button drops under the sentence, and the panel keeps its single column: the count and progress line on top, the steps as full-width rows with the state word at the end, the open step's sentence wrapping to a few lines, and the foot line under the list. The open step's button is on the first screen.