New Page Template Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the builder, 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 pages added in the copy are in the tree when the dialog opens. 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.

While the input is empty the rows are the templates by group, and choosing one names the page after the template. Once something is typed the list becomes one group headed "Create ‘Name’ from…": a Blank page row, then the templates that any typed word starts a word of in their name, group or keywords ("pric" finds the Pricing templates), or all of them when nothing matches, so a new name is never a dead end. The heading shows the name the page will get and each row says ", as Name" to a screen reader.

The name is what you typed, trimmed, with one space between words and at most 24 characters. The slug is that name with its accents and case folded away and every run of other characters turned into a dash, so "Pricing 2" is /pricing-2. If the slug is already used by one of the site's pages (the home page, pricing, blog and contact) or by a page you added, the name takes the next free number, so typing "Pricing" creates "Pricing 2", and the heading shows it before you choose.

Each template is typed as six lines from a small kit of shapes (a title, a line, a short line, a button, a hero, three or two tiles, an image, a form, a list), drawn in greys with hairlines. The same kit draws the small one in a row and the large one on the canvas, so they can never disagree, and they are pictures: hidden from assistive technology, with the template's name and a one-line hint carrying the same facts.

All of it. The templates, the added pages and the selection are typed state in the block; nothing is saved, published or sent. In your app build TEMPLATES from your own, write the page and its blocks to your CMS in pick, and route to the new page; keep freeName so two pages never share an address.

Yes. Type to search or to name the page, the arrow keys move through the rows, Enter adds the highlighted template 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 tree and the canvas behind the menu are pictures; the status line says what was added.

The tree goes and the canvas stays; the wireframes in the rows shrink a little. 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.