Select Template Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the home: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The New document button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same TemplateTiles component and share the block's state, so the tile you chose in the copy is chosen in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The tiles are native radio buttons, so the group is one tab stop and moving the focus chooses the tile. Left and Right move along a row (reversed in a right-to-left layout) and stop at the row's ends, Up and Down move between rows, and Home and End go to the first and last tile. Typing a letter jumps to the next tile whose name starts with it, wrapping round, so M finds Meeting notes and R finds Roadmap. Each name starts with its own letter, so one key is enough; with names that share a letter, pressing it again steps to the next one.

Create adds a file named for the template, "Untitled weekly report", to the top of the drawn recent files and says so in a polite message; Start blank adds "Untitled document". Both close the dialog and return focus to the New document button. The newest three files show above the older ones, and nothing is created anywhere: the row lives in this tab.

A template's name and one line carry its meaning, and an icon marks its kind. Drawn thumbnails of each page would be six illustrations to keep in step with real templates, and they sink on a small screen. The tiles stay in two columns on a phone, with the icon above the name, and the badges say what is popular or new in words.

All of it. The six templates are a typed list and Create only updates the drawn home. In your app load the templates from your API in the same shape (an id, a name, a line, an optional badge), create the document from create and send the person to it; the tiles, the keys and the label that names the choice stay as they are.

Yes. The real dialog is named by its title and described by its sentence, the tiles are a labelled radio group with their key instructions as its description, focus starts on the chosen tile and stays inside until the dialog closes, and Escape and the close button return focus to New document. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.