Layout Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its preview band drawn inline at the end of a picture of the dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the layout applied in the copy is the one the dialog opens on. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Every diagram is one CSS grid of three columns and two rows holding four regions: a sidebar, a top bar, the content and a second pane. A layout is only its track sizes and where each region sits, typed as literal classes, and the regions a layout drops fade out and park in a column with no width. Changing the layout changes grid-template-columns and grid-template-rows, which the browser animates over 300 ms. The row diagrams, the band and the dashboard behind the menu are the same component at three sizes, so they can never disagree.

Nothing moves. The tracks and the fades have no transition under prefers-reduced-motion, so highlighting a layout swaps the band's diagram at once and applying one swaps the dashboard at once; the sentence beside the band says what the layout is, so no information depends on seeing the change happen. Nothing loops and nothing plays on load.

It applies the highlighted layout: the dashboard behind the menu takes the arrangement as the menu closes (you see it re-arrange, with no scrim over it), the row gets a tick and the words ", applied", the status line names the layout, and focus goes back to the field. Reopening the dialog starts its band on the applied layout. The highlight alone never applies anything.

All of it. The six layouts and the applied one are typed state in the block; nothing is saved and nothing leaves the page. In your app keep LAYOUTS as the rows, write the choice to your layout state or user settings in pick, and render your real dashboard with the same track classes so the diagram is a faithful preview.

Yes. Type to search by name, hint or word ("sidebar", "split", "centred", "focus"), the arrow keys move through the layouts and preview each, Enter applies the highlighted one and Escape closes the menu and puts focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The diagrams are hidden from assistive technology; the band's sentence and each row's name and hint carry the same facts.

The drawn dashboard goes, since the menu covers most of it, and the band shows the diagram across the full width without its sentence (which is read out instead). The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.