create-vista-app 0.2.12 → 0.2.13

package/bin/cli.js

@@ -6,37 +6,95 @@ const { execSync } = require('child_process');
 const prompts = require('prompts');
 
 const usageCommand = 'npx create-vista-app@latest <project-name>';
-
-// Detect which package manager invoked us (npm, pnpm, yarn, bun)
-function detectPackageManager() {
-  const ua = process.env.npm_config_user_agent || '';
-  if (ua.startsWith('pnpm')) return 'pnpm';
-  if (ua.startsWith('yarn')) return 'yarn';
-  if (ua.startsWith('bun')) return 'bun';
-  return 'npm';
-}
-
-const pkgManager = detectPackageManager();
+const SUPPORTED_PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
+
+// Detect which package manager invoked us (npm, pnpm, yarn, bun)
+function normalizePackageManager(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return SUPPORTED_PACKAGE_MANAGERS.includes(normalized) ? normalized : undefined;
+}
+
+function detectPackageManager(userAgent = process.env.npm_config_user_agent || '') {
+  const ua = String(userAgent || '');
+  if (ua.startsWith('pnpm')) return 'pnpm';
+  if (ua.startsWith('yarn')) return 'yarn';
+  if (ua.startsWith('bun')) return 'bun';
+  return 'npm';
+}
+
+function getExplicitPackageManagerFromArgs(args) {
+  const explicitValue = normalizePackageManager(getFlagValue('--package-manager'));
+  const explicitFlags = SUPPORTED_PACKAGE_MANAGERS.filter((manager) => args.includes(`--${manager}`));
+
+  if (explicitFlags.length > 1) {
+    console.error('Error: use only one package manager flag: --npm, --pnpm, --yarn, or --bun.');
+    process.exit(1);
+  }
+
+  if (getFlagValue('--package-manager') && !explicitValue) {
+    console.error(
+      `Error: unsupported package manager "${getFlagValue('--package-manager')}". Use npm, pnpm, yarn, or bun.`
+    );
+    process.exit(1);
+  }
+
+  if (explicitValue && explicitFlags.length > 0 && explicitFlags[0] !== explicitValue) {
+    console.error('Error: package manager flags conflict. Use only one package manager selector.');
+    process.exit(1);
+  }
+
+  return explicitValue || explicitFlags[0];
+}
+
 const rawArgs = process.argv.slice(2);
 const useTypedApiStarter = rawArgs.includes('--typed-api') || rawArgs.includes('--typed');
 const skipInstall = rawArgs.includes('--skip-install');
 const skipGit = rawArgs.includes('--no-git');
 const assumeYes = rawArgs.includes('--yes') || rawArgs.includes('-y');
 const canPrompt = !!(process.stdin.isTTY && process.stdout.isTTY);
+const detectedPackageManager = detectPackageManager();
+
+function getFlagValue(flag) {
+  const index = rawArgs.indexOf(flag);
+  if (index !== -1) {
+    const next = rawArgs[index + 1];
+    if (next && !next.startsWith('-')) return next;
+  }
+  const inline = rawArgs.find((arg) => arg.startsWith(`${flag}=`));
+  if (inline) return inline.slice(flag.length + 1);
+  return undefined;
+}
+
+const explicitFlashpack = rawArgs.includes('--flashpack');
+const explicitDefaultEngine = rawArgs.includes('--default-engine');
+const explicitEngine = getFlagValue('--engine');
+const explicitPackageManager = getExplicitPackageManagerFromArgs(rawArgs);
 
 if (process.argv.includes('--help') || process.argv.includes('-h')) {
   console.log(`
 Usage:
-  ${usageCommand} [--typed-api] [--skip-install] [--no-git] [--yes]
+  ${usageCommand} [--typed-api] [--skip-install] [--no-git] [--yes] [--engine <default|flashpack>] [--flashpack] [--default-engine] [--package-manager <npm|pnpm|yarn|bun>] [--npm|--pnpm|--yarn|--bun]
 
 Example:
   npx create-vista-app@latest my-vista-app
   npx create-vista-app@latest
   npx create-vista-app@latest my-vista-app --typed-api
+  npx create-vista-app@latest my-vista-app --flashpack
+  npx create-vista-app@latest my-vista-app --package-manager pnpm
 `);
   process.exit(0);
 }
 
+if (explicitFlashpack && explicitDefaultEngine) {
+  console.error('Error: use only one of --flashpack or --default-engine.');
+  process.exit(1);
+}
+
+if (explicitEngine && !['default', 'flashpack'].includes(explicitEngine)) {
+  console.error(`Error: unsupported engine "${explicitEngine}". Use "default" or "flashpack".`);
+  process.exit(1);
+}
+
 async function resolveProjectName() {
   const args = rawArgs.filter((arg) => !arg.startsWith('-'));
   if (args[0]) return args[0];
@@ -65,17 +123,109 @@ async function resolveProjectName() {
   }
   return value;
 }
-async function confirmProceed(projectName, projectDir) {
+async function confirmProceed(projectName, projectDir, engine, packageManager) {
   if (assumeYes || !canPrompt) return true;
   const response = await prompts({
     type: 'confirm',
     name: 'proceed',
-    message: `Create Vista app "${projectName}" in ${projectDir}?`,
+    message: `Create Vista app "${projectName}" in ${projectDir} (engine: ${engine}, package manager: ${packageManager})?`,
     initial: true,
   });
   return response.proceed !== false;
 }
 
+async function resolveEngineChoice() {
+  if (explicitEngine) return explicitEngine;
+  if (explicitFlashpack) return 'flashpack';
+  if (explicitDefaultEngine) return 'default';
+  if (assumeYes || !canPrompt) return 'default';
+
+  const response = await prompts({
+    type: 'select',
+    name: 'engine',
+    message: 'Select engine',
+    choices: [
+      {
+        title: 'default (recommended)',
+        value: 'default',
+        description: 'Stable webpack-first path',
+      },
+      {
+        title: 'flashpack',
+        value: 'flashpack',
+        description: 'Rust-first engine path',
+      },
+    ],
+    initial: 0,
+  });
+
+  const value = String(response.engine || '').trim();
+  if (!value) {
+    console.log('Aborted.');
+    process.exit(0);
+  }
+  return value;
+}
+
+async function resolvePackageManagerChoice() {
+  if (explicitPackageManager) return explicitPackageManager;
+  if (assumeYes || !canPrompt) return detectedPackageManager;
+
+  const response = await prompts({
+    type: 'select',
+    name: 'packageManager',
+    message: 'Select package manager',
+    choices: [
+      {
+        title: 'npm',
+        value: 'npm',
+        description: 'Widely available default',
+      },
+      {
+        title: 'pnpm',
+        value: 'pnpm',
+        description: 'Fast installs with shared store',
+      },
+      {
+        title: 'yarn',
+        value: 'yarn',
+        description: 'Classic Yarn workflow',
+      },
+      {
+        title: 'bun',
+        value: 'bun',
+        description: 'Fast Bun-based install/runtime',
+      },
+    ],
+    initial: Math.max(SUPPORTED_PACKAGE_MANAGERS.indexOf(detectedPackageManager), 0),
+  });
+
+  const value = normalizePackageManager(response.packageManager);
+  if (!value) {
+    console.log('Aborted.');
+    process.exit(0);
+  }
+
+  return value;
+}
+
+function getInstallCommand(packageManager) {
+  if (packageManager === 'yarn') return 'yarn';
+  if (packageManager === 'bun') return 'bun install';
+  return `${packageManager} install`;
+}
+
+function getRunCommand(packageManager) {
+  return packageManager === 'npm' ? 'npm run' : packageManager;
+}
+
+function getCreateCommand(packageManager) {
+  if (packageManager === 'pnpm') return 'pnpm create vista-app';
+  if (packageManager === 'yarn') return 'yarn create vista-app';
+  if (packageManager === 'bun') return 'bun create vista-app';
+  return 'npx create-vista-app@latest';
+}
+
 function copyRecursiveSync(src, dest) {
   const exists = fs.existsSync(src);
   const stats = exists && fs.statSync(src);
@@ -90,13 +240,74 @@ function copyRecursiveSync(src, dest) {
   }
 }
 
+function injectEngineBlock(source, selectedEngine) {
+  // Prefer preserving existing formatting when an engine block already exists.
+  if (/\bengine\s*:\s*\{[\s\S]*?\bvariant\s*:\s*['"][^'"]+['"]/m.test(source)) {
+    return source.replace(
+      /(\bengine\s*:\s*\{[\s\S]*?\bvariant\s*:\s*['"])([^'"]+)(['"])/m,
+      `$1${selectedEngine}$3`
+    );
+  }
+
+  // Replace existing scalar engine config
+  if (/\bengine\s*:\s*['"][^'"]+['"],?/m.test(source)) {
+    return source.replace(/\bengine\s*:\s*['"][^'"]+['"],?/m, `engine: '${selectedEngine}',`);
+  }
+
+  // Insert right after "const config = {"
+  const engineBlock = `  engine: {\n    variant: '${selectedEngine}',\n  },`;
+  const marker = 'const config = {';
+  const markerIndex = source.indexOf(marker);
+  if (markerIndex !== -1) {
+    const insertAt = markerIndex + marker.length;
+    return `${source.slice(0, insertAt)}\n${engineBlock}${source.slice(insertAt)}`;
+  }
+
+  // Fallback to a minimal config when template structure is unexpected
+  return `const config = {\n${engineBlock}\n};\n\nexport default config;\n`;
+}
+
+function applyEngineToVistaConfig(projectDir, selectedEngine) {
+  const configPath = path.join(projectDir, 'vista.config.ts');
+  if (!fs.existsSync(configPath)) return;
+
+  const source = fs.readFileSync(configPath, 'utf8');
+  const patched = injectEngineBlock(source, selectedEngine);
+  fs.writeFileSync(configPath, patched);
+}
+
+function applyReadmeSelections(projectDir, selectedEngine, useTypedApi) {
+  const readmePath = path.join(projectDir, 'README.md');
+  if (!fs.existsSync(readmePath)) return;
+
+  const source = fs.readFileSync(readmePath, 'utf8');
+  const patched = source
+    .replace(/__VISTA_ENGINE__/g, selectedEngine)
+    .replace(/__VISTA_TYPED_API__/g, useTypedApi ? 'enabled' : 'disabled');
+  fs.writeFileSync(readmePath, patched);
+}
+
+function applyFlashpackStarterTheme(projectDir) {
+  const flashTemplateDir = path.join(__dirname, 'flash-template');
+  if (fs.existsSync(flashTemplateDir)) {
+    copyRecursiveSync(flashTemplateDir, projectDir);
+  }
+}
+
 async function main() {
   const useLocal = rawArgs.includes('--local');
   const currentDir = process.cwd();
   const projectName = await resolveProjectName();
+  const selectedEngine = await resolveEngineChoice();
+  const selectedPackageManager = await resolvePackageManagerChoice();
   const projectDir = path.join(currentDir, projectName);
 
-  const proceed = await confirmProceed(projectName, projectDir);
+  const proceed = await confirmProceed(
+    projectName,
+    projectDir,
+    selectedEngine,
+    selectedPackageManager
+  );
   if (!proceed) {
     console.log('Aborted.');
     process.exit(0);
@@ -121,6 +332,12 @@ async function main() {
     console.log('Added typed API starter files.');
   }
 
+  applyEngineToVistaConfig(projectDir, selectedEngine);
+  applyReadmeSelections(projectDir, selectedEngine, useTypedApiStarter);
+  if (selectedEngine === 'flashpack') {
+    applyFlashpackStarterTheme(projectDir);
+  }
+
   console.log('Scaffolding complete.');
 
   // 3. Setup Dependencies (production-ready)
@@ -143,6 +360,7 @@ async function main() {
       'postcss-cli': '^11.0.0',
       tailwindcss: '^4.0.0',
       '@tailwindcss/postcss': '^4.0.0',
+      webpack: '^5.90.0',
       // Node 20+ SSR compatibility
       '@swc-node/register': '^1.9.0',
       '@swc/core': '^1.4.0',
@@ -165,7 +383,7 @@ node_modules/
 # Build outputs
 dist/
 .vista/
-.next/
+.flash/
 out/
 
 # Rust artifacts
@@ -235,9 +453,11 @@ coverage/
   }
 
   // 6. Install Dependencies
-  const installCmd = pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install`;
+  const installCmd = getInstallCommand(selectedPackageManager);
   if (!skipInstall) {
-    console.log(`\nInstalling dependencies with ${pkgManager}... This may take a moment.\n`);
+    console.log(
+      `\nInstalling dependencies with ${selectedPackageManager}... This may take a moment.\n`
+    );
     try {
       execSync(installCmd, { cwd: projectDir, stdio: 'inherit' });
       console.log(`\n✓ Dependencies installed successfully!`);
@@ -250,18 +470,13 @@ coverage/
     console.log('\nSkipped dependency installation (--skip-install).');
   }
 
-  const runCmd = pkgManager === 'npm' ? 'npm run' : pkgManager;
-  const createCmd =
-    pkgManager === 'pnpm'
-      ? 'pnpm create vista-app'
-      : pkgManager === 'yarn'
-        ? 'yarn create vista-app'
-        : pkgManager === 'bun'
-          ? 'bun create vista-app'
-          : 'npx create-vista-app@latest';
+  const runCmd = getRunCommand(selectedPackageManager);
+  const createCmd = getCreateCommand(selectedPackageManager);
 
   console.log(`
 ✨ Success! Created ${projectName} at ${projectDir}
+Engine: ${selectedEngine}
+Package manager: ${selectedPackageManager}
 
 Get started by running:
 
@@ -275,7 +490,22 @@ Happy Hacking! 🚀
 `);
 }
 
-main().catch((error) => {
-  console.error('create-vista-app failed:', error);
-  process.exit(1);
-});
+module.exports = {
+  main,
+  detectPackageManager,
+  normalizePackageManager,
+  getInstallCommand,
+  getRunCommand,
+  getCreateCommand,
+  injectEngineBlock,
+  applyEngineToVistaConfig,
+  applyReadmeSelections,
+  applyFlashpackStarterTheme,
+};
+
+if (require.main === module) {
+  main().catch((error) => {
+    console.error('create-vista-app failed:', error);
+    process.exit(1);
+  });
+}

package/bin/flash-template/app/index.tsx

@@ -0,0 +1,91 @@
+import Image from 'vista/image';
+
+export default function Index() {
+  return (
+    <main className="relative flex min-h-[100dvh] items-center overflow-hidden bg-black text-zinc-100 selection:bg-primary/20 selection:text-primary">
+      <div className="pointer-events-none absolute top-0 right-0 h-[380px] w-[380px] translate-x-1/4 -translate-y-1/4 rounded-full bg-primary opacity-20 blur-[110px]" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/45 to-transparent" />
+
+      <section className="relative z-10 mx-auto w-full max-w-5xl px-6 py-10 md:px-10 lg:px-12">
+        <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
+          <div className="max-w-2xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
+              Flashpack starter
+            </div>
+            <h1 className="mt-6 max-w-2xl text-balance text-[clamp(2.9rem,5.8vw,5rem)] font-semibold leading-[0.94] tracking-tight text-zinc-50">
+              Stay in flow while the app keeps moving.
+            </h1>
+            <p className="mt-5 max-w-xl text-pretty text-base leading-8 text-zinc-400 md:text-lg">
+              Flashpack keeps the Vista workflow familiar, but gives you a tighter edit loop, clearer runtime traces,
+              and a cleaner place to inspect what happened during dev, build, and start.
+            </p>
+
+            <div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-zinc-300">
+              <span className="rounded-full border border-zinc-800 bg-zinc-950/80 px-4 py-2">
+                Same <code>vista dev</code> workflow
+              </span>
+              <span className="rounded-full border border-zinc-800 bg-zinc-950/80 px-4 py-2">
+                Traceable output in <code>.flash/</code>
+              </span>
+            </div>
+
+            <div className="mt-7 flex flex-wrap items-center gap-3 text-sm text-zinc-400">
+              <span>
+                Edit <code className="rounded bg-zinc-900 px-2 py-1 text-zinc-200">app/index.tsx</code> to shape this
+                screen.
+              </span>
+              <a
+                href="https://vista.xyz/docs/env"
+                className="rounded-full border border-zinc-800 bg-zinc-950/70 px-4 py-2 text-zinc-200 transition-colors hover:border-primary/50 hover:text-primary"
+              >
+                Read the env guide
+              </a>
+            </div>
+          </div>
+
+          <aside className="space-y-4">
+            <div className="rounded-[1.9rem] border border-zinc-800/80 bg-zinc-950/60 p-6 shadow-[0_28px_75px_rgba(0,0,0,0.45)] backdrop-blur-sm">
+              <div className="mb-6 flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-zinc-500">
+                <span>Vista</span>
+                <span>Flashpack</span>
+              </div>
+              <div className="flex justify-center">
+                <Image
+                  src="/vista.svg"
+                  alt="Vista Logo"
+                  width={600}
+                  height={600}
+                  priority
+                  unoptimized
+                  className="h-auto w-[210px] invert opacity-95 sm:w-[250px] lg:w-[280px]"
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <article className="rounded-[1.6rem] border border-zinc-800/80 bg-zinc-950/45 p-5">
+                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Quicker feedback</p>
+                <p className="mt-3 text-sm leading-7 text-zinc-400">
+                  Keep editing without feeling pushed into long restart cycles every time the route tree shifts.
+                </p>
+              </article>
+              <article className="rounded-[1.6rem] border border-zinc-800/80 bg-zinc-950/45 p-5">
+                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Readable artifacts</p>
+                <p className="mt-3 text-sm leading-7 text-zinc-400">
+                  Open graph, runtime, and log output when you want to understand how the engine moved.
+                </p>
+              </article>
+            </div>
+
+            <div className="rounded-[1.6rem] border border-zinc-800/80 bg-zinc-950/45 p-5">
+              <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Why teams pick it</p>
+              <p className="mt-3 text-sm leading-7 text-zinc-400">
+                Flashpack keeps the command surface stable while making build artifacts and dev behavior easier to read.
+              </p>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  );
+}

package/bin/flash-template/app/root.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from 'vista';
+import { Geist, Geist_Mono } from 'vista/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'My Vista App',
+  description: 'Built with Vista Framework',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden bg-black text-zinc-100 antialiased`}
+        suppressHydrationWarning
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vista-app",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Create Vista applications with one command",
   "bin": {
     "create-vista-app": "./bin/cli.js"

package/template/README.md

@@ -1,6 +1,10 @@
-# My Vista App
-
-Built with [Vista.js](https://github.com/vistagen/Vista-Js) — the React framework powered by Rust.
+# My Vista App
+
+Built with [Vista.js](https://github.com/vistagen/Vista-Js) — the React framework powered by Rust.
+
+Selected engine for this app: `__VISTA_ENGINE__`
+
+Typed API starter: `__VISTA_TYPED_API__`
 
 ## Getting Started
 
@@ -41,17 +45,42 @@ vista.config.ts     # Framework configuration
 - **`'use client'`** — Add this directive to make a component interactive (client-side).
 - **Server Components** — All components are server components by default (zero JS sent to browser).
 
-## Available Commands
+## Available Commands
 
 | Command       | Description                       |
 | ------------- | --------------------------------- |
-| `vista dev`   | Start dev server with live-reload |
-| `vista build` | Create production build           |
-| `vista start` | Start production server           |
+| `vista dev`   | Start dev server with the engine selected in `vista.config.ts` |
+| `vista build` | Create production build with the engine selected in `vista.config.ts` |
+| `vista start` | Start production server with the engine selected in `vista.config.ts` |
 | `vista g api-init` | Generate typed API starter files |
 | `vista g router <name>` | Generate a typed router file |
 | `vista g procedure <name> [get\|post]` | Generate a typed procedure file |
 
+## Engine Selection
+
+`create-vista-app` supports both engine variants:
+
+- `default` (webpack path)
+- `flashpack` (Rust-first path)
+
+You can choose at scaffold time, but the generated app still uses the same `npm run dev`, `npm run build`, and `npm run start` scripts. Vista reads the selected engine from `vista.config.ts`.
+
+Example:
+
+```bash
+npx create-vista-app@latest my-vista-app --engine flashpack
+```
+
+The generated config looks like:
+
+```ts
+engine: {
+  variant: 'flashpack'
+}
+```
+
+Flashpack engine runtime/cache artifacts are stored in `.flash/`.
+
 ## Typed API Rollback
 
 Typed API is experimental and can be disabled anytime from `vista.config.ts`:

package/template/app/globals.css

@@ -11,14 +11,16 @@
 }
 
 html {
-  overflow-y: scroll;
+  min-height: 100%;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
 }
 
 :root {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --background: #f3e8d8;
+  --foreground: #171717;
   --primary: #ff4c30;
-  color-scheme: dark;
+  color-scheme: light;
 }
 
 :root.light {
@@ -36,7 +38,10 @@ html {
 }
 
 body {
+  min-height: 100vh;
+  margin: 0;
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
 }

package/template/app/index.tsx

@@ -2,23 +2,65 @@ import Image from 'vista/image';
 
 export default function Index() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-black transition-colors duration-200">
-      <div className="-mt-20 mb-10 relative border border-dashed border-gray-300 dark:border-neutral-700 p-10">
-        <div className="absolute -top-0 -left-0 -translate-x-1/2 -translate-y-1/2 w-24 h-24 border border-dashed border-gray-300 dark:border-neutral-700 rounded-full" />
-        <div className="absolute -bottom-0 -right-0 translate-x-1/2 translate-y-1/2 w-24 h-24 border border-dashed border-gray-300 dark:border-neutral-700 rounded-full" />
-        <Image
-          src="/vista.svg"
-          alt="Vista Logo"
-          width={600}
-          height={600}
-          unoptimized
-          className="dark:invert"
-        />
-      </div>
+    <main className="flex min-h-[100dvh] items-center justify-center bg-[#f7f4ee] px-6 py-10 text-zinc-950 selection:bg-primary/15 selection:text-primary md:px-10">
+      <section className="w-full max-w-4xl rounded-[2rem] border border-zinc-900/10 bg-white/85 p-7 shadow-[0_24px_80px_rgba(27,18,7,0.08)] backdrop-blur-sm md:p-10">
+        <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(300px,0.95fr)]">
+          <div className="max-w-xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-zinc-900/10 bg-[#fbf7f1] px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
+              Vista starter
+            </div>
+            <h1 className="mt-6 max-w-xl text-balance text-[clamp(2.6rem,5vw,4.6rem)] font-semibold tracking-tight text-zinc-950">
+              Start by editing <code className="font-mono text-[0.82em]">app/index.tsx</code>.
+            </h1>
+            <p className="mt-5 max-w-lg text-pretty text-base leading-8 text-zinc-700 md:text-lg">
+              The default starter keeps the first screen calm: one route, a clean app shell, and the core Vista flow
+              already wired so you can start building instead of cleaning up scaffolding.
+            </p>
 
-      <h1 className="max-w-xs sm:max-w-none text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50 text-center">
-        To get started, edit the index.tsx file.
-      </h1>
-    </main>
-  );
-}
+            <div className="mt-7 flex flex-wrap items-center gap-3">
+              <a
+                href="https://vista.xyz/docs/env"
+                className="inline-flex items-center justify-center rounded-full bg-zinc-950 px-5 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800"
+              >
+                Open env guide
+              </a>
+              <span className="rounded-full border border-zinc-900/10 bg-[#fbf7f1] px-4 py-3 text-sm text-zinc-700">
+                Engine lives in <code>vista.config.ts</code>
+              </span>
+            </div>
+          </div>
+
+          <aside className="rounded-[1.7rem] border border-zinc-900/10 bg-[#fcfaf6] p-6">
+            <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-zinc-500">
+              <span>Default engine</span>
+              <span>Vista</span>
+            </div>
+
+            <div className="mt-6 flex justify-center">
+              <Image
+                src="/vista.svg"
+                alt="Vista Logo"
+                width={600}
+                height={600}
+                priority
+                unoptimized
+                className="h-auto w-[220px] opacity-95 sm:w-[250px]"
+              />
+            </div>
+
+            <div className="mt-7 space-y-3 text-sm text-zinc-700">
+              <div className="rounded-2xl border border-zinc-900/8 bg-white p-4">
+                <p className="font-medium text-zinc-950">Stable default path</p>
+                <p className="mt-2 leading-7">Use the familiar <code>vista dev</code>, <code>vista build</code>, and <code>vista start</code> flow from day one.</p>
+              </div>
+              <div className="rounded-2xl border border-zinc-900/8 bg-white p-4">
+                <p className="font-medium text-zinc-950">Config-first workflow</p>
+                <p className="mt-2 leading-7">Adjust engine and framework behavior in <code>vista.config.ts</code> instead of rewriting scripts.</p>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  );
+}

package/template/app/root.tsx

@@ -19,9 +19,14 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head />
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden antialiased bg-background text-foreground`}
+        suppressHydrationWarning
+      >
+        {children}
+      </body>
     </html>
   );
 }

package/template/vista-env.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="vista/image/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://vista.dev/docs/env for more information.
+// see https://vista.xyz/docs/env for more information.
 
 declare module '*.module.css' {
   const classes: { readonly [key: string]: string };

package/template/vista.config.ts

@@ -1,4 +1,8 @@
 const config = {
+  engine: {
+    // Engine options: 'default' or 'flashpack'
+    variant: 'default',
+  },
   images: {
     domains: ['example.com'],
     // For static hosts where the /_vista/image endpoint is not available:

package/template-typed/vista.config.ts

@@ -1,4 +1,8 @@
 const config = {
+    engine: {
+        // Engine options: 'default' or 'flashpack'
+        variant: 'default',
+    },
     images: {
         domains: ['example.com'],
     },