[yangshun]

Summary

Replace the plain void init welcome pages with a shared Vite-style layout for React, Vue, Svelte, and Solid, using Void colors, system fonts, and automatic light/dark mode.

Preserve the original Pages-mode guidance and the database starters' message list, form, API example, and seed instructions. Bundle a small stack SVG and a theme-aware Void logo with void, with Vite attribution embedded in the icon sprite.

Keep the shared starter styles in a CSS source file and inline the raw CSS into the CLI bundle, with matching type declarations and build/test configuration.

Important

This ships the SVG files with the core void package. I'm not a fan of this but the starter code is already implemented within void and since the SVG files are just a few KB + won't be bundled into a build, it's not terrible.

My preference would be to shift the starter code and assets into create-void, but then void init will have to call create-vite, creating a circular relationship. Happy to do this in a follow-up PR.

Also, I'm not sure why void init needs to exist when there's create-void. Maybe it can be removed?

Examples

Screenshots from the four generated apps. React and Vue include database-backed message forms; Svelte and Solid use Static Pages.

React	Vue

Svelte	Solid

Validation:

• CI=true vp run test: 734 test files and 14,499 tests passed; 31 tests skipped.
• vp run check: all 33 typecheck tasks passed.
• Targeted lint and formatting checks passed.
• Rebuilt CLI smoke test confirms generated pages/style.css matches starter-ui.css byte-for-byte.
• Browser-verified the stack illustration and Void logo in light and dark mode.

[yangshun]

This PR ships the SVG files with the core void package. This means every Void user will have these SVGs in their node_modules. Not ideal IMO.

I'm not a fan of this, but since the starter code is already implemented within void/src/cli/template.ts and since the logos are just a few KB and doesn't enter a built bundle, it's not that terrible.

My preference would be to shift the starter code and assets into create-void, but then void init will have to call create-vite, creating a circular dep. I'm not sure why void init needs to exist when there's create-void. Maybe it can be removed?

[cpojer]

Awesome, thanks for working on this.

Can you:

• Use corner-shape: squircle + larger border-radius for browsers that support it? Tell your agent to copy the Void Admin Dashboard.
• The inline code bit in the React example looks incorrect – see the space on the left.
• The "Void. Explore" button looks odd with the logo imho.

[yangshun]

Thanks for the review, updated the code + screenshots.

[cpojer]

Awesome!