Discord Setup Integration Block for React

Discord only lets a bot give roles that sit below its own role in the server's list, so a mapping to a higher role would fail on a real server. The ladder at the end shows Hearthbell's role third, and every role above it (and Hearthbell's own role) is unavailable in the Selects, with the reason beside it. To change that on a real server, an admin drags Hearthbell's role higher in Server Settings, then Roles. Edit ROLES: each has a blocked reason, empty when the bot may grant it.

No. Nothing connects, authorizes or sends anything. Step 1 names the two scopes a real authorize screen would show and says that this demo skips it. Finishing says "Connected in this demo", and a polite line says "Nothing is sent to Discord from this demo." Replace finish with your own call: server is the chosen server and mapping the role for each plan.

Continue on step 2 waits for a server, and Finish setup on step 3 waits for a server and a role for each of the three plans; the line beside the button says what is missing ("Map 2 more plans."). Both buttons stay focusable while they wait (they are aria-disabled, not removed), and pressing one does nothing until the step is complete. Back is always available after the first step, and a finished step can be revisited by its number in the strip.

No. All four panels (the three steps and the result) are drawn once more, unseen, in the same grid cell as the live one, so the panel keeps the height of the tallest. Each step's heading takes focus when you move with Continue, Back or the strip, never on load, so a keyboard or screen reader user starts reading where the content changed.

The plan selects take their roles as items and mark the blocked ones disabled; the server list is the same Listbox on every base.

Below lg the divider gives way to a rule and the role ladder goes under the wizard; the strip keeps only its numbers, and the buttons fill the width. Scopes and role names keep their direction in a right-to-left layout while the columns and the ladder flip. The header and the wizard fade up once on load; with reduced motion they simply appear.