No Templates Empty State Block for React

Nothing is saved. The layout goes into the page's state, its thumbnail fills the next slot of the strip, and a polite status message says "Roadmap added to your templates in this demo." Reload and the strip is empty again; Start over empties it without a reload. To wire it for real, copy the layout into the account where the code says so, then open it for editing; a layout already added is refused with a sentence rather than duplicated.

All four previews are always in the page, stacked in one grid cell, and only the chosen one is visible; the others are hidden from sight and from assistive technology. The sentence under the preview reserves two lines (three on a phone), so a long description never moves the button. The drawings are decorative: the choice group, the heading over the preview and the status message carry the same facts.

A group of cards that choose one of four is what a radio group is, and the browser already does it right: arrow keys move the choice, one tab stop for the group, a name for every card. Each card is a label around a hidden radio, so the whole card is the click target and a focus ring shows on the card.

Tab reaches the layouts as one group (arrow keys change the choice), then the button and Start over, which stays quiet (and says so if pressed) until something is added. The group is named by its heading, the strip is a list that names each slot and what is in it, and the status message announces every change.

The four thumbnails become a row that scrolls sideways with snapping, so the heading, the layouts and the button fit the first screen. The preview follows below them, with its own top rule, at 240 px tall. From the large breakpoint the preview sits at the end of the band beside the controls, divided by a rule that meets the band's rules at plus marks.