Workspace Setup Onboarding Block for React

slugOf folds accents, lowers the case, turns every run of other characters into one hyphen and cuts the result at 30 characters. An address needs three to 30 characters of letters, digits and single hyphens. TAKEN is the typed list of addresses that are in use (four of them); when yours is one of them the line says so and offers the next free one (cider-press-2, then -3 if that is taken too). Replace the check with your own lookup where verdictOf is used.

The address shows as a line with a pencil. Pressing the pencil (or the line) turns it into a field: Enter keeps it, Escape or the cross puts the old one back. What you keep is cleaned the same way as a name, so “Studio Row!” becomes studio-row. Once the address no longer follows the name, typing the name leaves it alone and “Match the name” becomes pressable; pressing it hands the address back to the name.

Create workspace stays in the tab order and looks quiet until the name and address are right. Pressing it says what is wrong and puts focus there: an empty or too short name says “Use at least 2 characters.” under the field and focuses it; a taken address focuses the suggestion button (or the pencil). The lines under the fields are always reserved, so nothing moves.

One polite status, present from load. Typing the name does not announce each letter: what the choices add up to (“Larkspur Works will be private to invited people.”) is spoken once the typing has rested for a moment, and results (saved, skipped, refused) are spoken at once. The same sentence is shown at the foot of the card.

Everything: the taken addresses are a typed list, example is the host (nothing lives there) and Create workspace only says it was saved in this demo. In your app check the address on your server as the name settles (debounce it), create the workspace where submit says so, and send the visitor to the new address. Skip for now says it was skipped and keeps what was typed.

The card keeps its four bands in one column, the host drops out of the address field below 368 px so the address itself has the room, and Create workspace pins to the foot of the screen with Skip for now beside it, so the primary action is in reach at every scroll position.