Project Initializer Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the welcome tab: 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 project 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 InitFields component and share the block's state, so what you chose in the copy is there 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.

commandOf joins the package manager, the create call, the project name and one flag per choice: --framework, --lint and --test. npm needs two dashes before the flags and yarn has no @latest, so those two are written their own way. The name goes through a small kebab-case helper: Sunny Day becomes sunny-day, an empty name falls back to my-app, and a name with no letters or numbers is refused with a short problem under the field. The window is text, so it wraps on a phone and you can select it by hand.

It writes the command to your real clipboard, nothing more; the drawn terminal strip behind the dialog then shows it as if pasted. If your browser refuses, which it can on an insecure page, the dialog says so and stays open so you can select the command and copy it yourself. Nothing is installed and no command is run: the command line tool is fictional and the flags are typed here.

Which choices you have reached. The marker for a choice fills when you change it or one after it, and the next marker is outlined, so it reads as progress through the four. Every choice already has a default, so the rail is orientation, not a gate. On a phone the rail is hidden and each Select gets a numbered label of its own.

All of it. The four lists of choices, the defaults and the recent projects are typed constants. In your app build the command from your own tool's options, keep the list of package managers to what your tool supports, and run the command in the user's terminal, never on your server.

Yes. The real dialog is named New project, focus starts inside and stays there until it closes, and Escape and the close button return focus to the header button. Each Select opens with Enter or the arrow keys and is named by its step title, the name field takes Enter to copy, and a polite message says what was chosen and when the command was copied. 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.