@aex.is/zero 0.1.3 → 0.1.4

package/dist/cli/prompts.js

@@ -0,0 +1,163 @@
+import * as p from '@clack/prompts';
+import { frameworks } from '../config/frameworks.js';
+import { modules } from '../config/modules.js';
+const introArt = [
+    '   _____',
+    '  / ___ \\\\',
+    ' / / _ \\\\ \\\\',
+    ' | |/ /| |',
+    ' \\\\ \\\\_/ / /',
+    '  \\\\___/_/'
+].join('\n');
+export async function runWizard() {
+    p.intro(`${introArt}\nAexis Zero`);
+    let directory = '.';
+    let appName = '';
+    let domain = '';
+    let framework = 'nextjs';
+    let selectedModules = [];
+    let step = 'directory';
+    while (true) {
+        if (step === 'directory') {
+            const value = await p.text({
+                message: 'Project directory',
+                placeholder: '.',
+                validate: (input) => {
+                    if (typeof input !== 'string') {
+                        return 'Enter a directory.';
+                    }
+                    return undefined;
+                }
+            });
+            if (isCancelled(value))
+                return null;
+            const normalized = String(value).trim();
+            directory = normalized.length === 0 ? '.' : normalized;
+            step = 'name';
+            continue;
+        }
+        if (step === 'name') {
+            const value = await p.text({
+                message: 'App name',
+                placeholder: 'my-app',
+                validate: (input) => {
+                    if (typeof input !== 'string' || input.trim().length === 0) {
+                        return 'App name is required.';
+                    }
+                    return undefined;
+                }
+            });
+            if (isCancelled(value))
+                return null;
+            appName = String(value).trim();
+            step = 'domain';
+            continue;
+        }
+        if (step === 'domain') {
+            const value = await p.text({
+                message: 'Domain (optional)',
+                placeholder: 'example.com'
+            });
+            if (isCancelled(value))
+                return null;
+            domain = String(value).trim();
+            step = 'framework';
+            continue;
+        }
+        if (step === 'framework') {
+            const value = await p.select({
+                message: 'Framework',
+                options: frameworks.map((item) => ({
+                    value: item.id,
+                    label: item.label,
+                    hint: item.description
+                }))
+            });
+            if (isCancelled(value))
+                return null;
+            framework = value;
+            step = 'modules';
+            continue;
+        }
+        if (step === 'modules') {
+            const value = await p.multiselect({
+                message: 'Modules',
+                options: modules.map((item) => ({
+                    value: item.id,
+                    label: item.label,
+                    hint: item.description
+                })),
+                required: false
+            });
+            if (isCancelled(value))
+                return null;
+            selectedModules = value;
+            step = 'confirm';
+            continue;
+        }
+        if (step === 'confirm') {
+            const frameworkLabel = frameworks.find((item) => item.id === framework)?.label ?? framework;
+            const moduleLabels = selectedModules
+                .map((id) => modules.find((item) => item.id === id)?.label ?? id)
+                .join(', ');
+            p.note([
+                `Directory: ${directory}`,
+                `App name: ${appName}`,
+                `Domain: ${domain || 'None'}`,
+                `Framework: ${frameworkLabel}`,
+                `Modules: ${moduleLabels || 'None'}`
+            ].join('\n'), 'Review');
+            const action = await p.select({
+                message: 'Next step',
+                options: [
+                    { value: 'continue', label: 'Continue' },
+                    { value: 'edit-directory', label: 'Edit directory' },
+                    { value: 'edit-name', label: 'Edit name' },
+                    { value: 'edit-domain', label: 'Edit domain' },
+                    { value: 'edit-framework', label: 'Edit framework' },
+                    { value: 'edit-modules', label: 'Edit modules' },
+                    { value: 'cancel', label: 'Cancel' }
+                ]
+            });
+            if (isCancelled(action))
+                return null;
+            switch (action) {
+                case 'continue':
+                    return {
+                        directory,
+                        appName,
+                        domain,
+                        framework,
+                        modules: selectedModules
+                    };
+                case 'edit-directory':
+                    step = 'directory';
+                    continue;
+                case 'edit-name':
+                    step = 'name';
+                    continue;
+                case 'edit-domain':
+                    step = 'domain';
+                    continue;
+                case 'edit-framework':
+                    step = 'framework';
+                    continue;
+                case 'edit-modules':
+                    step = 'modules';
+                    continue;
+                case 'cancel':
+                    p.cancel('Cancelled.');
+                    return null;
+                default:
+                    return null;
+            }
+        }
+    }
+}
+function isCancelled(value) {
+    if (p.isCancel(value)) {
+        p.cancel('Cancelled.');
+        return true;
+    }
+    return false;
+}

package/dist/config/frameworks.js

@@ -66,6 +66,8 @@ export const frameworks = [
         description: 'Expo app with Router and EAS configuration.',
         packages: [
             'expo-router',
+            'expo-font',
+            '@expo-google-fonts/geist-mono',
             'tamagui',
             '@tamagui/config',
             '@tamagui/animations-react-native',

package/dist/config/modules.js

@@ -3,7 +3,13 @@ export const modules = [
         id: 'neon',
         label: 'Database (Neon)',
         description: 'Serverless Postgres with Neon.',
-        envVars: ['DATABASE_URL'],
+        envVars: [
+            {
+                key: 'DATABASE_URL',
+                description: 'Neon connection string',
+                url: 'https://neon.com/docs/get-started/connect-neon'
+            }
+        ],
         packages: {
             nextjs: ['@neondatabase/serverless'],
             expo: ['@neondatabase/serverless']
@@ -13,7 +19,18 @@ export const modules = [
         id: 'clerk',
         label: 'Auth (Clerk)',
         description: 'Authentication with Clerk.',
-        envVars: ['CLERK_PUBLISHABLE_KEY', 'CLERK_SECRET_KEY'],
+        envVars: [
+            {
+                key: 'CLERK_PUBLISHABLE_KEY',
+                description: 'Clerk publishable key',
+                url: 'https://dashboard.clerk.com'
+            },
+            {
+                key: 'CLERK_SECRET_KEY',
+                description: 'Clerk secret key',
+                url: 'https://dashboard.clerk.com'
+            }
+        ],
         packages: {
             nextjs: ['@clerk/nextjs'],
             expo: ['@clerk/clerk-expo']
@@ -23,7 +40,18 @@ export const modules = [
         id: 'payload',
         label: 'CMS (Payload)',
         description: 'Headless CMS using Payload.',
-        envVars: ['PAYLOAD_SECRET', 'DATABASE_URL'],
+        envVars: [
+            {
+                key: 'PAYLOAD_SECRET',
+                description: 'Payload secret (generate a long random string)',
+                url: 'https://payloadcms.com/docs'
+            },
+            {
+                key: 'DATABASE_URL',
+                description: 'Database connection string',
+                url: 'https://payloadcms.com/docs'
+            }
+        ],
         packages: {
             nextjs: ['payload'],
             expo: ['payload']
@@ -33,7 +61,18 @@ export const modules = [
         id: 'stripe',
         label: 'Payments (Stripe)',
         description: 'Payments via Stripe SDK.',
-        envVars: ['STRIPE_SECRET_KEY', 'STRIPE_WEBHOOK_SECRET'],
+        envVars: [
+            {
+                key: 'STRIPE_SECRET_KEY',
+                description: 'Stripe secret key',
+                url: 'https://dashboard.stripe.com/apikeys'
+            },
+            {
+                key: 'STRIPE_WEBHOOK_SECRET',
+                description: 'Stripe webhook signing secret',
+                url: 'https://dashboard.stripe.com/webhooks'
+            }
+        ],
         packages: {
             nextjs: ['stripe'],
             expo: ['stripe']
@@ -62,8 +101,20 @@ export function getModuleEnvVars(moduleIds) {
     for (const id of moduleIds) {
         const module = getModuleDefinition(id);
         for (const envVar of module.envVars) {
-            envVars.add(envVar);
+            envVars.add(envVar.key);
         }
     }
     return Array.from(envVars).sort();
 }
+export function getModuleEnvHelp(moduleIds) {
+    const map = new Map();
+    for (const id of moduleIds) {
+        const module = getModuleDefinition(id);
+        for (const envVar of module.envVars) {
+            if (!map.has(envVar.key)) {
+                map.set(envVar.key, envVar);
+            }
+        }
+    }
+    return Array.from(map.values());
+}

package/dist/engine/scaffold.js

@@ -2,25 +2,27 @@ import path from 'path';
 import { promises as fs } from 'fs';
 import { execa } from 'execa';
 import { getFrameworkDefinition } from '../config/frameworks.js';
+import { getModuleEnvHelp } from '../config/modules.js';
 import { installBaseDependencies, installModulePackages } from './installers.js';
 import { writeEnvExample } from './env.js';
-import { nextLayoutTemplate, nextPageTemplate, shadcnUtilsTemplate, componentsJsonTemplate, tamaguiConfigTemplate, metroConfigTemplate, expoLayoutTemplate, expoIndexTemplate } from './templates.js';
+import { buildNextTemplateFiles, buildExpoTemplateFiles, componentsJsonTemplate } from './templates.js';
 const baseEnv = {
     ...process.env,
     CI: '1'
 };
 export async function scaffoldProject(config) {
-    const targetDir = path.resolve(process.cwd(), config.appName);
+    const directoryInput = config.directory.trim().length === 0 ? '.' : config.directory.trim();
+    const targetDir = path.resolve(process.cwd(), directoryInput);
     await ensureEmptyTargetDir(targetDir);
     const framework = getFrameworkDefinition(config.framework);
     console.log(`Scaffolding ${framework.label}...`);
-    await runScaffoldCommand(framework.scaffold.command, framework.scaffold.packageName, config.appName, framework.scaffold.argSets);
+    await runScaffoldCommand(framework.scaffold.command, framework.scaffold.packageName, directoryInput, framework.scaffold.argSets);
     console.log('Applying framework templates...');
     if (config.framework === 'nextjs') {
-        await applyNextTemplates(targetDir);
+        await applyNextTemplates(config, targetDir);
     }
     else {
-        await applyExpoTemplates(targetDir);
+        await applyExpoTemplates(config, targetDir);
     }
     console.log('Installing base dependencies with Bun...');
     await installBaseDependencies(targetDir, framework.packages);
@@ -29,7 +31,7 @@ export async function scaffoldProject(config) {
     console.log('Generating .env.example...');
     await writeEnvExample(config.modules, targetDir);
     console.log('Scaffold complete.');
-    const cdTarget = config.appName.includes(' ') ? `"${config.appName}"` : config.appName;
+    const cdTarget = directoryInput === '.' ? '.' : directoryInput.includes(' ') ? `"${directoryInput}"` : directoryInput;
     console.log(`\nNext steps:\n  1) cd ${cdTarget}\n  2) bun run dev`);
 }
 async function ensureEmptyTargetDir(targetDir) {
@@ -50,11 +52,12 @@ async function ensureEmptyTargetDir(targetDir) {
         throw error;
     }
 }
-async function runScaffoldCommand(command, packageName, appName, argSets) {
+async function runScaffoldCommand(command, packageName, directoryInput, argSets) {
     const errors = [];
+    const targetArg = directoryInput === '.' ? '.' : directoryInput;
     for (const args of argSets) {
         try {
-            await execa(command, [packageName, appName, ...args], {
+            await execa(command, [packageName, targetArg, ...args], {
                 stdio: 'inherit',
                 env: baseEnv,
                 shell: false
@@ -70,32 +73,45 @@ async function runScaffoldCommand(command, packageName, appName, argSets) {
         : 'Scaffold failed for unknown reasons.';
     throw new Error(message);
 }
-async function applyNextTemplates(targetDir) {
-    const rootAppDir = path.join(targetDir, 'app');
+async function applyNextTemplates(config, targetDir) {
     const srcAppDir = path.join(targetDir, 'src', 'app');
     const usesSrcDir = await pathExists(srcAppDir);
-    const appDir = usesSrcDir ? srcAppDir : rootAppDir;
-    const projectSrcBase = usesSrcDir ? path.join(targetDir, 'src') : targetDir;
-    await fs.mkdir(appDir, { recursive: true });
-    await fs.writeFile(path.join(appDir, 'layout.tsx'), nextLayoutTemplate, 'utf8');
-    await fs.writeFile(path.join(appDir, 'page.tsx'), nextPageTemplate, 'utf8');
-    await ensureShadcnSetup(targetDir, projectSrcBase, usesSrcDir);
+    const basePath = usesSrcDir ? 'src' : '';
+    const envHelp = getModuleEnvHelp(config.modules);
+    const files = buildNextTemplateFiles({
+        appName: config.appName,
+        domain: config.domain,
+        envVars: envHelp,
+        basePath
+    });
+    await writeTemplateFiles(targetDir, files);
+    const globalsPath = usesSrcDir ? 'src/app/globals.css' : 'app/globals.css';
+    const tailwindConfig = await detectTailwindConfig(targetDir);
+    const componentsJson = componentsJsonTemplate(globalsPath, tailwindConfig ?? 'tailwind.config.ts');
+    await fs.writeFile(path.join(targetDir, 'components.json'), componentsJson, 'utf8');
     await ensureNextTurbo(targetDir);
-}
-async function applyExpoTemplates(targetDir) {
-    const appDir = path.join(targetDir, 'app');
-    await fs.mkdir(appDir, { recursive: true });
-    await fs.writeFile(path.join(appDir, '_layout.tsx'), expoLayoutTemplate, 'utf8');
-    await fs.writeFile(path.join(appDir, 'index.tsx'), expoIndexTemplate, 'utf8');
-    await ensureExpoConfig(targetDir);
-    await ensureExpoTamagui(targetDir);
-}
-async function ensureExpoConfig(targetDir) {
+    await ensurePackageName(targetDir, config.appName);
+}
+async function applyExpoTemplates(config, targetDir) {
+    const envHelp = getModuleEnvHelp(config.modules);
+    const files = buildExpoTemplateFiles({
+        appName: config.appName,
+        domain: config.domain,
+        envVars: envHelp,
+        basePath: ''
+    });
+    await writeTemplateFiles(targetDir, files);
+    await ensureExpoConfig(targetDir, config.appName);
+    await ensurePackageName(targetDir, config.appName);
+}
+async function ensureExpoConfig(targetDir, appName) {
     const appJsonPath = path.join(targetDir, 'app.json');
     const appJson = await readJson(appJsonPath, { expo: {} });
     if (!appJson.expo || typeof appJson.expo !== 'object') {
         appJson.expo = {};
     }
+    appJson.expo.name = appName;
+    appJson.expo.slug = toSlug(appName);
     if (!Array.isArray(appJson.expo.platforms)) {
         appJson.expo.platforms = ['ios', 'android', 'macos', 'windows'];
     }
@@ -134,6 +150,31 @@ async function ensureExpoConfig(targetDir) {
     };
     await writeJson(easPath, easConfig);
 }
+async function ensureNextTurbo(targetDir) {
+    const packageJsonPath = path.join(targetDir, 'package.json');
+    const packageJson = await readJson(packageJsonPath, {});
+    if (!packageJson.scripts || typeof packageJson.scripts !== 'object') {
+        packageJson.scripts = {};
+    }
+    const currentDev = typeof packageJson.scripts.dev === 'string' ? packageJson.scripts.dev : 'next dev';
+    if (!currentDev.includes('--turbo')) {
+        packageJson.scripts.dev = `${currentDev} --turbo`;
+    }
+    await writeJson(packageJsonPath, packageJson);
+}
+async function ensurePackageName(targetDir, appName) {
+    const packageJsonPath = path.join(targetDir, 'package.json');
+    const packageJson = await readJson(packageJsonPath, {});
+    packageJson.name = toPackageName(appName);
+    await writeJson(packageJsonPath, packageJson);
+}
+async function writeTemplateFiles(targetDir, files) {
+    for (const file of files) {
+        const fullPath = path.join(targetDir, ...file.path.split('/'));
+        await fs.mkdir(path.dirname(fullPath), { recursive: true });
+        await fs.writeFile(fullPath, file.content, 'utf8');
+    }
+}
 function mergeUnique(values, additions) {
     const set = new Set(values);
     for (const value of additions) {
@@ -141,6 +182,21 @@ function mergeUnique(values, additions) {
     }
     return Array.from(set);
 }
+async function detectTailwindConfig(targetDir) {
+    const candidates = [
+        'tailwind.config.ts',
+        'tailwind.config.js',
+        'tailwind.config.cjs',
+        'tailwind.config.mjs'
+    ];
+    for (const filename of candidates) {
+        const fullPath = path.join(targetDir, filename);
+        if (await pathExists(fullPath)) {
+            return filename;
+        }
+    }
+    return null;
+}
 async function readJson(filePath, fallback) {
     try {
         const data = await fs.readFile(filePath, 'utf8');
@@ -178,74 +234,20 @@ async function pathExists(targetPath) {
         throw error;
     }
 }
-async function ensureNextTurbo(targetDir) {
-    const packageJsonPath = path.join(targetDir, 'package.json');
-    const packageJson = await readJson(packageJsonPath, {});
-    if (!packageJson.scripts || typeof packageJson.scripts !== 'object') {
-        packageJson.scripts = {};
-    }
-    const currentDev = typeof packageJson.scripts.dev === 'string' ? packageJson.scripts.dev : 'next dev';
-    if (!currentDev.includes('--turbo')) {
-        packageJson.scripts.dev = `${currentDev} --turbo`;
-    }
-    await writeJson(packageJsonPath, packageJson);
-}
-async function ensureShadcnSetup(targetDir, projectSrcBase, usesSrcDir) {
-    const libDir = path.join(projectSrcBase, 'lib');
-    await fs.mkdir(libDir, { recursive: true });
-    await fs.writeFile(path.join(libDir, 'utils.ts'), shadcnUtilsTemplate, 'utf8');
-    const globalsPath = usesSrcDir ? 'src/app/globals.css' : 'app/globals.css';
-    const tailwindConfigPath = await detectTailwindConfig(targetDir);
-    const componentsJson = componentsJsonTemplate(globalsPath, tailwindConfigPath ?? 'tailwind.config.ts');
-    await fs.writeFile(path.join(targetDir, 'components.json'), componentsJson, 'utf8');
-}
-async function detectTailwindConfig(targetDir) {
-    const candidates = [
-        'tailwind.config.ts',
-        'tailwind.config.js',
-        'tailwind.config.cjs',
-        'tailwind.config.mjs'
-    ];
-    for (const filename of candidates) {
-        const fullPath = path.join(targetDir, filename);
-        if (await pathExists(fullPath)) {
-            return filename;
-        }
-    }
-    return null;
-}
-async function ensureExpoTamagui(targetDir) {
-    const configPath = path.join(targetDir, 'tamagui.config.ts');
-    await fs.writeFile(configPath, tamaguiConfigTemplate, 'utf8');
-    const metroPath = path.join(targetDir, 'metro.config.js');
-    await fs.writeFile(metroPath, metroConfigTemplate, 'utf8');
-    await ensureBabelTamagui(targetDir);
-}
-async function ensureBabelTamagui(targetDir) {
-    const babelPath = path.join(targetDir, 'babel.config.js');
-    let content = '';
-    if (await pathExists(babelPath)) {
-        content = await fs.readFile(babelPath, 'utf8');
-    }
-    if (!content) {
-        const defaultConfig = `module.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: [\n      'expo-router/babel',\n      [\n        '@tamagui/babel-plugin',\n        {\n          config: './tamagui.config.ts',\n          components: ['tamagui']\n        }\n      ]\n    ]\n  };\n};\n`;
-        await fs.writeFile(babelPath, defaultConfig, 'utf8');
-        return;
-    }
-    if (content.includes('@tamagui/babel-plugin')) {
-        return;
-    }
-    const pluginSnippet = `[\n        '@tamagui/babel-plugin',\n        {\n          config: './tamagui.config.ts',\n          components: ['tamagui']\n        }\n      ]`;
-    const pluginsRegex = /plugins:\\s*\\[(.*)\\]/s;
-    if (pluginsRegex.test(content)) {
-        content = content.replace(pluginsRegex, (match, inner) => {
-            const trimmed = inner.trim();
-            const updatedInner = trimmed.length > 0 ? `${trimmed},\n      ${pluginSnippet}` : pluginSnippet;
-            return `plugins: [${updatedInner}]`;
-        });
-    }
-    else {
-        content = content.replace(/return\\s*\\{/, (match) => `${match}\n    plugins: [${pluginSnippet}],`);
-    }
-    await fs.writeFile(babelPath, content, 'utf8');
+function toPackageName(name) {
+    const cleaned = name
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9-._]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^[-_.]+|[-_.]+$/g, '');
+    return cleaned || 'aexis-zero-app';
+}
+function toSlug(name) {
+    return name
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '') || 'aexis-zero-app';
 }

package/dist/engine/templates.js

@@ -1,7 +1,125 @@
-export const nextLayoutTemplate = `import type { ReactNode } from 'react';
+export function componentsJsonTemplate(globalsPath, tailwindConfigPath) {
+    return `{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "${tailwindConfigPath}",
+    "css": "${globalsPath}",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+`;
+}
+export function buildNextTemplateFiles(data) {
+    const base = data.basePath ? `${data.basePath}/` : '';
+    const envList = renderNextEnvList(data.envVars);
+    return [
+        {
+            path: `${base}app/layout.tsx`,
+            content: nextLayoutTemplate(data.appName, data.domain)
+        },
+        {
+            path: `${base}app/page.tsx`,
+            content: nextHomeTemplate(data.appName, data.domain, envList)
+        },
+        {
+            path: `${base}app/about/page.tsx`,
+            content: nextRouteTemplate('About', 'A concise overview of your project.')
+        },
+        {
+            path: `${base}app/guide/page.tsx`,
+            content: nextRouteTemplate('Guide', 'Three routes are ready. Customize and ship.')
+        },
+        {
+            path: `${base}app/globals.css`,
+            content: nextGlobalsCss()
+        },
+        {
+            path: `${base}components/site-header.tsx`,
+            content: nextHeaderTemplate(data.appName)
+        },
+        {
+            path: `${base}components/site-footer.tsx`,
+            content: nextFooterTemplate(data.domain)
+        },
+        {
+            path: `${base}components/env-list.tsx`,
+            content: nextEnvListTemplate(envList)
+        },
+        {
+            path: `${base}lib/utils.ts`,
+            content: nextUtilsTemplate()
+        }
+    ];
+}
+export function buildExpoTemplateFiles(data) {
+    const envItems = renderExpoEnvItems(data.envVars);
+    return [
+        {
+            path: 'app/_layout.tsx',
+            content: expoLayoutTemplate()
+        },
+        {
+            path: 'app/index.tsx',
+            content: expoHomeTemplate(data.appName, data.domain, envItems)
+        },
+        {
+            path: 'app/about.tsx',
+            content: expoRouteTemplate('About', 'A concise overview of your project.')
+        },
+        {
+            path: 'app/guide.tsx',
+            content: expoRouteTemplate('Guide', 'Three routes are ready. Customize and ship.')
+        },
+        {
+            path: 'components/theme.ts',
+            content: expoThemeTemplate()
+        },
+        {
+            path: 'components/site-header.tsx',
+            content: expoHeaderTemplate(data.appName)
+        },
+        {
+            path: 'components/site-footer.tsx',
+            content: expoFooterTemplate(data.domain)
+        },
+        {
+            path: 'components/env-list.tsx',
+            content: expoEnvListTemplate(envItems)
+        },
+        {
+            path: 'components/page-shell.tsx',
+            content: expoPageShellTemplate()
+        },
+        {
+            path: 'tamagui.config.ts',
+            content: tamaguiConfigTemplate()
+        },
+        {
+            path: 'metro.config.js',
+            content: metroConfigTemplate()
+        },
+        {
+            path: 'babel.config.js',
+            content: babelConfigTemplate()
+        }
+    ];
+}
+function nextLayoutTemplate(appName, domain) {
+    return `import type { ReactNode } from 'react';
+import './globals.css';
+import { SiteHeader } from '@/components/site-header';
+import { SiteFooter } from '@/components/site-footer';
 
 export const metadata = {
-  title: 'Aexis Zero App',
+  title: '${escapeTemplate(appName)}',
   description: 'Scaffolded by Aexis Zero.'
 };
 
@@ -12,74 +130,520 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="min-h-screen bg-[var(--bg)] text-[var(--fg)]">
+        <div className="flex min-h-screen flex-col">
+          <SiteHeader appName="${escapeTemplate(appName)}" />
+          <main className="flex-1">{children}</main>
+          <SiteFooter domain="${escapeTemplate(domain)}" />
+        </div>
+      </body>
     </html>
   );
 }
 `;
-export const nextPageTemplate = `export default function Home() {
-  return <main />;
+}
+function nextHomeTemplate(appName, domain, envList) {
+    return `import { EnvList } from '@/components/env-list';
+
+export default function Home() {
+  return (
+    <section className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-6 py-12">
+      <div className="flex flex-col gap-3">
+        <p className="text-xs uppercase tracking-[0.4em]">Hello World</p>
+        <h1 className="text-3xl font-thin">${escapeTemplate(appName)}</h1>
+        <p className="text-sm">
+          ${escapeTemplate(domain) ? `Domain: ${escapeTemplate(domain)}` : 'No domain configured yet.'}
+        </p>
+      </div>
+      <div className="rounded-xl border border-[var(--fg)] p-6">
+        <h2 className="text-lg font-medium">Environment variables</h2>
+        <p className="text-sm">Set these in your <code className="rounded bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">.env</code>.</p>
+        <EnvList />
+      </div>
+      <div className="rounded-xl border border-[var(--fg)] p-6">
+        <h2 className="text-lg font-medium">Routes</h2>
+        <p className="text-sm">Explore <code className="rounded bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/about</code> and <code className="rounded bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/guide</code>.</p>
+      </div>
+    </section>
+  );
+}
+`;
+}
+function nextRouteTemplate(title, body) {
+    return `export default function Page() {
+  return (
+    <section className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-6 py-12">
+      <h1 className="text-3xl font-thin">${title}</h1>
+      <p className="text-sm">${body}</p>
+    </section>
+  );
+}
+`;
+}
+function nextHeaderTemplate(appName) {
+    return `import Link from 'next/link';
+
+const links = [
+  { href: '/', label: 'Home' },
+  { href: '/about', label: 'About' },
+  { href: '/guide', label: 'Guide' }
+];
+
+export function SiteHeader({ appName }: { appName: string }) {
+  return (
+    <header className="border-b border-[var(--fg)]">
+      <div className="mx-auto flex w-full max-w-4xl items-center justify-between px-6 py-4">
+        <div className="flex items-baseline gap-3">
+          <span className="text-xl font-thin tracking-[0.3em]">ZER0</span>
+          <span className="text-xs uppercase tracking-[0.2em]">{appName}</span>
+        </div>
+        <nav className="hidden items-center gap-6 text-sm sm:flex">
+          {links.map((link) => (
+            <Link key={link.href} href={link.href} className="underline-offset-4 hover:underline">
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+        <details className="sm:hidden">
+          <summary className="cursor-pointer text-sm">Menu</summary>
+          <div className="mt-3 flex flex-col gap-3 text-sm">
+            {links.map((link) => (
+              <Link key={link.href} href={link.href} className="underline-offset-4 hover:underline">
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </details>
+      </div>
+    </header>
+  );
+}
+`;
+}
+function nextFooterTemplate(domain) {
+    const domainLabel = escapeTemplate(domain).trim().length > 0
+        ? `Domain: ${escapeTemplate(domain)}`
+        : 'Domain: not set';
+    return `export function SiteFooter({ domain }: { domain?: string }) {
+  return (
+    <footer className=\"border-t border-[var(--fg)]\">
+      <div className=\"mx-auto flex w-full max-w-4xl flex-col gap-2 px-6 py-4 text-xs\">
+        <span>${domainLabel}</span>
+        <span>Generated by Aexis Zero.</span>
+      </div>
+    </footer>
+  );
 }
 `;
-export const shadcnUtilsTemplate = `import { clsx, type ClassValue } from 'clsx';
+}
+function nextEnvListTemplate(envList) {
+    return `export function EnvList() {
+  return (
+    <div className="mt-4 flex flex-col gap-4">
+      ${envList}
+    </div>
+  );
+}
+`;
+}
+function nextUtilsTemplate() {
+    return `import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 `;
-export const componentsJsonTemplate = (globalsPath, tailwindConfigPath) => `{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "${tailwindConfigPath}",
-    "css": "${globalsPath}",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
+}
+function nextGlobalsCss() {
+    return `@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #E7E5E4;
+  --fg: #1C1917;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1C1917;
+    --fg: #E7E5E4;
   }
 }
-`;
-export const tamaguiConfigTemplate = `import { config } from '@tamagui/config/v3';
 
-export default config;
-`;
-export const metroConfigTemplate = `const { getDefaultConfig } = require('expo/metro-config');
-const { withTamagui } = require('@tamagui/metro-plugin');
+* {
+  border-color: var(--fg);
+}
 
-const config = getDefaultConfig(__dirname);
+html,
+body {
+  min-height: 100%;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
 
-module.exports = withTamagui(config, {
-  components: ['tamagui'],
-  config: './tamagui.config.ts',
-  outputCSS: './tamagui-web.css'
-});
+a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+code {
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
 `;
-export const expoLayoutTemplate = `import { Stack } from 'expo-router';
-import { TamaguiProvider } from 'tamagui';
+}
+function renderNextEnvList(envVars) {
+    if (envVars.length === 0) {
+        return '<p className="text-sm">No environment variables required.</p>';
+    }
+    return envVars
+        .map((item) => {
+        return `
+      <div className="rounded-lg border border-[var(--fg)] p-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <code className="rounded bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">${escapeTemplate(item.key)}</code>
+          <span className="text-sm">${escapeTemplate(item.description)}</span>
+        </div>
+        <a
+          className="mt-2 inline-flex text-sm underline underline-offset-4"
+          href="${escapeAttribute(item.url)}"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Get keys →
+        </a>
+      </div>`;
+    })
+        .join('\n');
+}
+function expoLayoutTemplate() {
+    return `import { Stack } from 'expo-router';
+import { TamaguiProvider, Theme } from 'tamagui';
+import { useColorScheme } from 'react-native';
+import { useFonts, GeistMono_100Thin } from '@expo-google-fonts/geist-mono';
 import config from '../tamagui.config';
 
 export default function RootLayout() {
+  const scheme = useColorScheme();
+  const [loaded] = useFonts({ GeistMono_100Thin });
+
+  if (!loaded) {
+    return null;
+  }
+
   return (
     <TamaguiProvider config={config}>
-      <Stack screenOptions={{ headerShown: false }} />
+      <Theme name={scheme === 'dark' ? 'dark' : 'light'}>
+        <Stack screenOptions={{ headerShown: false }} />
+      </Theme>
     </TamaguiProvider>
   );
 }
 `;
-export const expoIndexTemplate = `import { Button, H1, YStack } from 'tamagui';
+}
+function expoHomeTemplate(appName, domain, envItems) {
+    return `import { Text, YStack } from 'tamagui';
+import { PageShell } from '../components/page-shell';
+import { EnvList } from '../components/env-list';
+import { FONT_FAMILY, useThemeColors } from '../components/theme';
 
 export default function Home() {
+  const { fg } = useThemeColors();
+
   return (
-    <YStack flex={1} alignItems=\"center\" justifyContent=\"center\" gap=\"$4\">
-      <H1>Aexis Zero</H1>
-      <Button>Start building</Button>
+    <PageShell
+      title="${escapeTemplate(appName)}"
+      subtitle="${escapeTemplate(domain) ? `Domain: ${escapeTemplate(domain)}` : 'No domain configured yet.'}"
+      badge="Hello World"
+    >
+      <YStack borderWidth={1} borderColor={fg} padding="$4" borderRadius="$4" gap="$3">
+        <Text fontFamily={FONT_FAMILY} fontSize="$4" color={fg}>
+          Environment variables
+        </Text>
+        <EnvList />
+      </YStack>
+      <YStack borderWidth={1} borderColor={fg} padding="$4" borderRadius="$4" gap="$3">
+        <Text fontFamily={FONT_FAMILY} fontSize="$4" color={fg}>
+          Routes
+        </Text>
+        <Text fontFamily={FONT_FAMILY} fontSize="$2" color={fg}>
+          Visit /about and /guide.
+        </Text>
+      </YStack>
+    </PageShell>
+  );
+}
+`;
+}
+function expoRouteTemplate(title, body) {
+    return `import { PageShell } from '../components/page-shell';
+
+export default function Page() {
+  return (
+    <PageShell title="${title}" subtitle="${body}">
+      <></>
+    </PageShell>
+  );
+}
+`;
+}
+function expoThemeTemplate() {
+    return `import { useColorScheme } from 'react-native';
+
+export const COLORS = {
+  light: {
+    bg: '#E7E5E4',
+    fg: '#1C1917'
+  },
+  dark: {
+    bg: '#1C1917',
+    fg: '#E7E5E4'
+  }
+};
+
+export const FONT_FAMILY = 'GeistMono_100Thin';
+
+export function useThemeColors() {
+  const scheme = useColorScheme();
+  const mode = scheme === 'dark' ? 'dark' : 'light';
+  return {
+    mode,
+    bg: COLORS[mode].bg,
+    fg: COLORS[mode].fg
+  };
+}
+`;
+}
+function expoHeaderTemplate(appName) {
+    return `import { useState } from 'react';
+import { Link } from 'expo-router';
+import { Button, Text, XStack, YStack } from 'tamagui';
+import { FONT_FAMILY, useThemeColors } from './theme';
+
+const links = [
+  { href: '/', label: 'Home' },
+  { href: '/about', label: 'About' },
+  { href: '/guide', label: 'Guide' }
+];
+
+export function SiteHeader() {
+  const [open, setOpen] = useState(false);
+  const { bg, fg } = useThemeColors();
+
+  return (
+    <YStack backgroundColor={bg} paddingHorizontal="$5" paddingVertical="$4" borderBottomWidth={1} borderColor={fg}>
+      <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center" gap="$3">
+          <Text fontFamily={FONT_FAMILY} fontWeight="100" fontSize="$6" color={fg}>
+            ZER0
+          </Text>
+          <Text fontFamily={FONT_FAMILY} fontSize="$2" textTransform="uppercase" color={fg}>
+            ${escapeTemplate(appName)}
+          </Text>
+        </XStack>
+        <Button
+          backgroundColor={fg}
+          color={bg}
+          fontFamily={FONT_FAMILY}
+          size="$2"
+          onPress={() => setOpen((prev) => !prev)}
+        >
+          Menu
+        </Button>
+      </XStack>
+      {open ? (
+        <YStack marginTop="$3" gap="$2">
+          {links.map((link) => (
+            <Link key={link.href} href={link.href} asChild>
+              <Text fontFamily={FONT_FAMILY} textDecorationLine="underline" color={fg}>
+                {link.label}
+              </Text>
+            </Link>
+          ))}
+        </YStack>
+      ) : null}
+    </YStack>
+  );
+}
+`;
+}
+function expoFooterTemplate(domain) {
+    return `import { Text, YStack } from 'tamagui';
+import { FONT_FAMILY, useThemeColors } from './theme';
+
+export function SiteFooter() {
+  const { bg, fg } = useThemeColors();
+
+  return (
+    <YStack backgroundColor={bg} paddingHorizontal="$5" paddingVertical="$4" borderTopWidth={1} borderColor={fg}>
+      <Text fontFamily={FONT_FAMILY} fontSize="$2" color={fg}>
+        ${escapeTemplate(domain) ? `Domain: ${escapeTemplate(domain)}` : 'Domain: not set'}
+      </Text>
+      <Text fontFamily={FONT_FAMILY} fontSize="$2" color={fg}>
+        Generated by Aexis Zero.
+      </Text>
     </YStack>
   );
 }
 `;
+}
+function expoEnvListTemplate(envItems) {
+    return `import { Linking } from 'react-native';
+import { Text, YStack } from 'tamagui';
+import { FONT_FAMILY, useThemeColors } from './theme';
+
+const envItems = ${envItems};
+
+export function EnvList() {
+  const { bg, fg } = useThemeColors();
+
+  if (envItems.length === 0) {
+    return (
+      <Text fontFamily={FONT_FAMILY} fontSize="$2" color={fg}>
+        No environment variables required.
+      </Text>
+    );
+  }
+
+  return (
+    <YStack gap="$3">
+      {envItems.map((item) => (
+        <YStack key={item.key} borderWidth={1} borderColor={fg} padding="$3" borderRadius="$4">
+          <Text fontFamily={FONT_FAMILY} color={fg}>{item.description}</Text>
+          <Text
+            fontFamily={FONT_FAMILY}
+            backgroundColor={fg}
+            color={bg}
+            paddingHorizontal="$2"
+            paddingVertical="$1"
+            borderRadius="$2"
+            marginTop="$2"
+          >
+            {item.key}
+          </Text>
+          <Text
+            fontFamily={FONT_FAMILY}
+            textDecorationLine="underline"
+            color={fg}
+            marginTop="$2"
+            onPress={() => Linking.openURL(item.url)}
+          >
+            Get keys →
+          </Text>
+        </YStack>
+      ))}
+    </YStack>
+  );
+}
+`;
+}
+function expoPageShellTemplate() {
+    return `import type { ReactNode } from 'react';
+import { ScrollView, Text, YStack } from 'tamagui';
+import { SiteHeader } from './site-header';
+import { SiteFooter } from './site-footer';
+import { FONT_FAMILY, useThemeColors } from './theme';
+
+interface PageShellProps {
+  title: string;
+  subtitle: string;
+  badge?: string;
+  children: ReactNode;
+}
+
+export function PageShell({ title, subtitle, badge, children }: PageShellProps) {
+  const { bg, fg } = useThemeColors();
+
+  return (
+    <YStack flex={1} backgroundColor={bg}>
+      <SiteHeader />
+      <ScrollView contentContainerStyle={{ padding: 24 }}>
+        <YStack gap="$4">
+          {badge ? (
+            <Text fontFamily={FONT_FAMILY} fontSize="$2" textTransform="uppercase" letterSpacing={2} color={fg}>
+              {badge}
+            </Text>
+          ) : null}
+          <Text fontFamily={FONT_FAMILY} fontSize="$7" color={fg}>
+            {title}
+          </Text>
+          <Text fontFamily={FONT_FAMILY} fontSize="$3" color={fg}>
+            {subtitle}
+          </Text>
+          {children}
+        </YStack>
+      </ScrollView>
+      <SiteFooter />
+    </YStack>
+  );
+}
+`;
+}
+function tamaguiConfigTemplate() {
+    return `import { config } from '@tamagui/config/v3';
+
+export default config;
+`;
+}
+function metroConfigTemplate() {
+    return `const { getDefaultConfig } = require('expo/metro-config');
+const { withTamagui } = require('@tamagui/metro-plugin');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withTamagui(config, {
+  components: ['tamagui'],
+  config: './tamagui.config.ts',
+  outputCSS: './tamagui-web.css'
+});
+`;
+}
+function babelConfigTemplate() {
+    return `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'expo-router/babel',
+      [
+        '@tamagui/babel-plugin',
+        {
+          config: './tamagui.config.ts',
+          components: ['tamagui']
+        }
+      ]
+    ]
+  };
+};
+`;
+}
+function renderExpoEnvItems(envVars) {
+    if (envVars.length === 0) {
+        return '[]';
+    }
+    const items = envVars.map((item) => {
+        return `{
+      key: '${escapeTemplate(item.key)}',
+      description: '${escapeTemplate(item.description)}',
+      url: '${escapeTemplate(item.url)}'
+    }`;
+    });
+    return `[
+    ${items.join(',\n    ')}
+  ]`;
+}
+function escapeTemplate(value) {
+    return value
+        .replace(/`/g, '\\`')
+        .replace(/\$/g, '\\$')
+        .replace(/"/g, '\\"')
+        .replace(/'/g, "\\'");
+}
+function escapeAttribute(value) {
+    return value.replace(/"/g, '&quot;');
+}

package/dist/index.js

@@ -1,7 +1,5 @@
 #!/usr/bin/env node
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from 'ink';
-import { App } from './ui/App.js';
+import { runWizard } from './cli/prompts.js';
 import { assertBunAvailable } from './env/detect.js';
 import { scaffoldProject } from './engine/scaffold.js';
 async function main() {
@@ -14,13 +12,8 @@ async function main() {
         process.exitCode = 1;
         return;
     }
-    let config = null;
-    const { waitUntilExit } = render(_jsx(App, { onComplete: (result) => {
-            config = result;
-        } }));
-    await waitUntilExit();
+    const config = await runWizard();
     if (!config) {
-        console.log('Cancelled.');
         return;
     }
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aex.is/zero",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Aexis Zero scaffolding CLI",
   "license": "UNLICENSED",
   "type": "module",
@@ -18,22 +18,17 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "dev": "bun run src/index.tsx",
+    "dev": "bun run src/index.ts",
     "start": "node dist/index.js",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@clack/prompts": "^0.7.0",
     "execa": "^8.0.1",
-    "ink": "^4.4.1",
-    "ink-text-input": "^5.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "which": "^4.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.30",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@types/which": "^3.0.3",
     "typescript": "^5.5.4"
   }