No Plugins Empty State Block for React

Nothing is installed. The plugin goes into the page's state, its cube turns solid on the shelf, the Installed tab and the count in the heading row update and a polite status message says "Word counter installed in this demo." Remove and Start over take plugins off again. To wire it for real, install through your own extension service where the code says so, keep the button busy until it answers, and show a failure in the status line.

They are typed with each plugin: what it reads, what it writes and what it reaches over the network, in plain words, so a reader can decide before installing. The demo's plugins are made up. In your store, show what the plugin's manifest really asks for and nothing the plugin could not do.

It is one inline SVG that never swaps: the five bays are always there, each with a dashed cube and a solid cube in it, and only the chosen plugin's dashed cube and the installed plugins' solid cubes are visible, fading in with opacity transitions that are switched off under reduced motion. The drawing is decorative and hidden from screen readers; the heading, the permissions and the status message say the same.

It keeps the list's height and says what to do: "Nothing is installed yet. Choose a plugin in All plugins and install it; it will be listed here." The detail on the right keeps showing the plugin you chose, whichever tab is open, so installing from the Installed tab is not possible until something is there.

Tab reaches the tab list (arrow keys switch tabs) and then the plugin list as one radio group, where the arrow keys change the plugin. The detail follows: Install, then Remove, which stays quiet (and says so if pressed) until the plugin is installed. Each count is spoken with its tab and the status message announces every change. The shelf is hidden from assistive technology.

The detail stacks under the list, the shelf shrinks to 112 px tall and the tab list scrolls sideways if it must. Every row keeps one height and the plugin's sentence reserves two lines, so changing the plugin never moves the buttons. From the medium breakpoint the detail sits at the end of the frame beside the list, divided by a rule that meets the band's rules at plus marks.