No Widgets Empty State Block for React

The widget's kind goes into the page's state and a small drawing of it appears in the next free slot; a polite status message says "Chart added to slot 1." Nothing is saved: reload and the canvas is empty again, and Clear empties it without a reload. The Number widget shows a typed sample figure, not real data. To wire it for real, save the widget to your page where the code says so and render your own widget in its slot.

The canvas never grows, since the window has one height. A thirteenth widget is refused with a sentence in the foot ("The canvas is full. Clear it first.") and the top bar's button stays in the tab order, marked as unavailable, instead of disappearing. In your own app a canvas would scroll or add rows; the twelve are this demo's limit.

No. The window is a fixed height (36 rem on a phone, 46 rem from the medium breakpoint), the canvas is a grid whose rows share what is left, and every slot, empty or full, is the same box, so adding a widget swaps what is inside it and moves nothing. Only a region of its own would scroll; none needs to here.

Tab runs through the top bar's button, the four tray buttons, then Clear, which stays quiet (and says so if pressed) until something is on the canvas. The canvas is a list named Canvas, twelve slots; each slot says its number and whether it is empty or holds a kind of widget. The small drawings are hidden from assistive technology and the status message announces every change.

The tray becomes a row of four buttons above the canvas, each an icon over its name, and the canvas is two slots across and six down, so all twelve stay on one screen inside the window. The widgets' captions and the slot count drop out to save room, and the status message and Clear stay.