@flexireact/core 4.0.0 → 4.1.1

package/dist/cli/index.js

@@ -4,7 +4,7 @@
 import fs2 from "fs";
 import path2 from "path";
 import { fileURLToPath, pathToFileURL } from "url";
-import { spawn } from "child_process";
+import { execSync, spawn } from "child_process";
 import pc2 from "picocolors";
 import prompts2 from "prompts";
 import ora from "ora";
@@ -15,10 +15,10 @@ import path from "path";
 import pc from "picocolors";
 import prompts from "prompts";
 var log = {
-  info: (msg) => console.log(`${pc.cyan("\u2139")} ${msg}`),
-  success: (msg) => console.log(`${pc.green("\u2713")} ${msg}`),
-  warn: (msg) => console.log(`${pc.yellow("\u26A0")} ${pc.yellow(msg)}`),
-  error: (msg) => console.log(`${pc.red("\u2717")} ${pc.red(msg)}`),
+  info: (msg) => console.log(`  ${pc.cyan("\u2139")} ${msg}`),
+  success: (msg) => console.log(`  ${pc.green("\u2714")} ${msg}`),
+  warn: (msg) => console.log(`  ${pc.yellow("\u26A0")} ${pc.yellow(msg)}`),
+  error: (msg) => console.log(`  ${pc.red("\u2716")} ${pc.red(msg)}`),
   blank: () => console.log("")
 };
 var templates = {
@@ -516,72 +516,383 @@ async function generateSpecialFile(type, cwd) {
   log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
 }
 function listGenerators() {
-  console.log(`
-${pc.bold("Available Generators:")}
+  console.log(`  ${pc.bold("Available Generators")}`);
+  log.blank();
+  console.log(`    ${pc.cyan("page")}        ${pc.dim("Create a new page")}`);
+  console.log(`    ${pc.cyan("layout")}      ${pc.dim("Create a layout wrapper")}`);
+  console.log(`    ${pc.cyan("component")}   ${pc.dim("Create a React component")}`);
+  console.log(`    ${pc.cyan("hook")}        ${pc.dim("Create a custom hook")}`);
+  console.log(`    ${pc.cyan("api")}         ${pc.dim("Create an API route")}`);
+  console.log(`    ${pc.cyan("action")}      ${pc.dim("Create a server action")}`);
+  console.log(`    ${pc.cyan("middleware")}  ${pc.dim("Create request middleware")}`);
+  log.blank();
+  console.log(`  ${pc.bold("Usage")}`);
+  console.log(`    $ flexi g <type> [name]`);
+  log.blank();
+}
 
-  ${pc.cyan("page")}        Create a new page (app/ or pages/)
-  ${pc.cyan("layout")}      Create a layout wrapper
-  ${pc.cyan("component")}   Create a React component
-  ${pc.cyan("hook")}        Create a custom hook
-  ${pc.cyan("api")}         Create an API route
-  ${pc.cyan("action")}      Create a server action
-  ${pc.cyan("middleware")}  Create request middleware
-  ${pc.cyan("context")}     Create a React context
-  ${pc.cyan("loading")}     Create a loading component
-  ${pc.cyan("error")}       Create an error boundary
-  ${pc.cyan("not-found")}   Create a 404 page
+// packages/create-flexireact/src/templates/default.ts
+function defaultTemplate(projectName, options = {}) {
+  return {
+    "package.json": JSON.stringify({
+      name: projectName,
+      version: "1.0.0",
+      private: true,
+      type: "module",
+      scripts: {
+        dev: "flexireact dev",
+        build: "flexireact build",
+        start: "flexireact start"
+      },
+      dependencies: {
+        "react": "^19.2.1",
+        "react-dom": "^19.2.1",
+        "@flexireact/core": "^4.1.0"
+      },
+      devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "typescript": "^5.7.0"
+      }
+    }, null, 2),
+    "tsconfig.json": JSON.stringify({
+      compilerOptions: {
+        target: "ES2022",
+        lib: ["DOM", "DOM.Iterable", "ES2022"],
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "react-jsx",
+        strict: true,
+        skipLibCheck: true,
+        noEmit: true,
+        baseUrl: ".",
+        paths: { "@/*": ["./*"] }
+      },
+      include: ["**/*.ts", "**/*.tsx"],
+      exclude: ["node_modules", ".flexi"]
+    }, null, 2),
+    "flexireact.config.js": `export default {
+  server: { port: 3000 },
+  styles: ['/styles.css'],
+};
+`,
+    "pages/index.tsx": `import React from 'react';
 
-${pc.bold("Usage:")}
-  ${pc.dim("$")} flexi generate ${pc.cyan("<type>")} ${pc.dim("[name]")}
-  ${pc.dim("$")} flexi g ${pc.cyan("<type>")} ${pc.dim("[name]")}
+export default function HomePage() {
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.logo}>F</div>
+        <h1 style={styles.title}>Welcome to FlexiReact</h1>
+        <p style={styles.subtitle}>
+          Edit <code style={styles.code}>pages/index.tsx</code> to get started
+        </p>
+        <div style={styles.links}>
+          <a href="https://github.com/aspect-dev/flexireact" style={styles.link}>GitHub</a>
+          <a href="/about" style={styles.link}>About</a>
+        </div>
+      </div>
+    </div>
+  );
+}
 
-${pc.bold("Examples:")}
-  ${pc.dim("$")} flexi g page dashboard
-  ${pc.dim("$")} flexi g component Button
-  ${pc.dim("$")} flexi g hook auth
-  ${pc.dim("$")} flexi g api users
-`);
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+  },
+  card: {
+    textAlign: 'center',
+    padding: '60px 40px',
+    background: 'rgba(255, 255, 255, 0.03)',
+    borderRadius: '24px',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    maxWidth: '500px',
+  },
+  logo: {
+    width: '80px',
+    height: '80px',
+    background: 'linear-gradient(135deg, #00FF9C 0%, #00D68F 100%)',
+    borderRadius: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '40px',
+    fontWeight: 900,
+    color: '#000',
+    margin: '0 auto 30px',
+  },
+  title: { fontSize: '2.5rem', fontWeight: 700, color: '#fff', margin: '0 0 16px' },
+  subtitle: { fontSize: '1.1rem', color: '#888', margin: '0 0 32px' },
+  code: { background: 'rgba(0, 255, 156, 0.1)', color: '#00FF9C', padding: '4px 8px', borderRadius: '6px' },
+  links: { display: 'flex', gap: '16px', justifyContent: 'center' },
+  link: { color: '#00FF9C', textDecoration: 'none', padding: '12px 24px', borderRadius: '12px', background: 'rgba(0, 255, 156, 0.1)' },
+};
+`,
+    "pages/about.tsx": `import React from 'react';
+
+export default function AboutPage() {
+  return (
+    <div style={{ padding: 40, fontFamily: 'system-ui', background: '#0a0a0a', color: '#fff', minHeight: '100vh' }}>
+      <a href="/" style={{ color: '#00FF9C', textDecoration: 'none' }}>Back</a>
+      <h1 style={{ marginTop: 40 }}>About</h1>
+      <p style={{ color: '#888' }}>FlexiReact - Modern React Framework</p>
+    </div>
+  );
+}
+`,
+    "pages/api/hello.ts": `export async function GET() {
+  return Response.json({ message: 'Hello from FlexiReact!' });
+}
+`,
+    "public/styles.css": `* { box-sizing: border-box; margin: 0; padding: 0; }
+`,
+    "public/favicon.svg": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#0a0a0a"/><text x="50" y="68" font-family="system-ui" font-size="50" font-weight="900" fill="#00FF9C" text-anchor="middle">F</text></svg>`,
+    ".gitignore": `node_modules/
+.flexi/
+dist/
+.env
+`
+  };
+}
+
+// packages/create-flexireact/src/templates/minimal.ts
+function minimalTemplate(projectName, options = {}) {
+  return {
+    "package.json": JSON.stringify({
+      name: projectName,
+      version: "1.0.0",
+      private: true,
+      type: "module",
+      scripts: {
+        dev: "flexireact dev",
+        build: "flexireact build",
+        start: "flexireact start"
+      },
+      dependencies: {
+        "react": "^19.2.1",
+        "react-dom": "^19.2.1",
+        "@flexireact/core": "^4.1.0"
+      },
+      devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "typescript": "^5.7.0"
+      }
+    }, null, 2),
+    "tsconfig.json": JSON.stringify({
+      compilerOptions: {
+        target: "ES2022",
+        lib: ["DOM", "ES2022"],
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "react-jsx",
+        strict: true,
+        skipLibCheck: true,
+        noEmit: true
+      },
+      include: ["**/*.ts", "**/*.tsx"],
+      exclude: ["node_modules"]
+    }, null, 2),
+    "flexireact.config.js": `export default { server: { port: 3000 } };
+`,
+    "pages/index.tsx": `import React from 'react';
+
+export default function Home() {
+  return (
+    <div style={{ padding: 40, fontFamily: 'system-ui', background: '#0a0a0a', color: '#fff', minHeight: '100vh' }}>
+      <h1 style={{ color: '#00FF9C' }}>FlexiReact</h1>
+      <p>Edit pages/index.tsx to start</p>
+    </div>
+  );
+}
+`,
+    ".gitignore": `node_modules/
+.flexi/
+`
+  };
+}
+
+// packages/create-flexireact/src/templates/app-router.ts
+function appRouterTemplate(projectName) {
+  return {
+    "package.json": JSON.stringify({
+      name: projectName,
+      version: "1.0.0",
+      private: true,
+      type: "module",
+      scripts: {
+        dev: "flexireact dev",
+        build: "flexireact build",
+        start: "flexireact start"
+      },
+      dependencies: {
+        "react": "^19.2.1",
+        "react-dom": "^19.2.1",
+        "@flexireact/core": "^4.1.0"
+      },
+      devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "typescript": "^5.7.0"
+      }
+    }, null, 2),
+    "tsconfig.json": JSON.stringify({
+      compilerOptions: {
+        target: "ES2022",
+        lib: ["DOM", "DOM.Iterable", "ES2022"],
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "react-jsx",
+        strict: true,
+        skipLibCheck: true,
+        noEmit: true,
+        baseUrl: ".",
+        paths: { "@/*": ["./*"] }
+      },
+      include: ["**/*.ts", "**/*.tsx"],
+      exclude: ["node_modules", ".flexi"]
+    }, null, 2),
+    "flexireact.config.js": `export default {
+  server: { port: 3000 },
+  appDir: 'app',
+};
+`,
+    "app/layout.tsx": `import React from 'react';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>FlexiReact App</title>
+        <style>{\`
+          * { box-sizing: border-box; margin: 0; padding: 0; }
+          body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #fff; }
+        \`}</style>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+`,
+    "app/page.tsx": `import React from 'react';
+
+export default function HomePage() {
+  return (
+    <main style={styles.main}>
+      <div style={styles.logo}>F</div>
+      <h1 style={styles.title}>FlexiReact App Router</h1>
+      <p style={styles.text}>Next.js style routing with app/ directory</p>
+      <div style={styles.links}>
+        <a href="/dashboard" style={styles.link}>Dashboard \u2192</a>
+      </div>
+    </main>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  main: {
+    minHeight: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: '20px',
+  },
+  logo: {
+    width: '80px',
+    height: '80px',
+    background: '#00FF9C',
+    borderRadius: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '40px',
+    fontWeight: 900,
+    color: '#000',
+    marginBottom: '30px',
+  },
+  title: {
+    fontSize: '2.5rem',
+    marginBottom: '16px',
+  },
+  text: {
+    color: '#888',
+    marginBottom: '32px',
+  },
+  links: {
+    display: 'flex',
+    gap: '16px',
+  },
+  link: {
+    color: '#00FF9C',
+    textDecoration: 'none',
+    padding: '12px 24px',
+    borderRadius: '12px',
+    background: 'rgba(0, 255, 156, 0.1)',
+  },
+};
+`,
+    "app/dashboard/page.tsx": `import React from 'react';
+
+export default function DashboardPage() {
+  return (
+    <div style={{ padding: 40 }}>
+      <a href="/" style={{ color: '#00FF9C', textDecoration: 'none' }}>\u2190 Back</a>
+      <h1 style={{ marginTop: 30, marginBottom: 20 }}>Dashboard</h1>
+      <p style={{ color: '#888' }}>This is a nested route: app/dashboard/page.tsx</p>
+    </div>
+  );
+}
+`,
+    "app/api/hello/route.ts": `export async function GET() {
+  return Response.json({ message: 'Hello from App Router API!' });
+}
+`,
+    ".gitignore": `node_modules/
+.flexi/
+dist/
+.env
+`
+  };
+}
+
+// packages/create-flexireact/src/templates/index.ts
+function getTemplateFiles(templateKey, projectName, options = {}) {
+  switch (templateKey) {
+    case "minimal":
+      return minimalTemplate(projectName, options);
+    case "app-router":
+      return appRouterTemplate(projectName);
+    default:
+      return defaultTemplate(projectName, options);
+  }
 }
 
 // cli/index.ts
 var __filename2 = fileURLToPath(import.meta.url);
 var __dirname2 = path2.dirname(__filename2);
-var VERSION = "3.0.0";
+var VERSION = "4.1.0";
 var LOGO = `
-${pc2.cyan("\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557")}
-${pc2.cyan("\u2551")}                                                             ${pc2.cyan("\u2551")}
-${pc2.cyan("\u2551")}   ${pc2.bold(pc2.magenta("\u26A1"))} ${pc2.bold(pc2.white("F L E X I R E A C T"))}                                  ${pc2.cyan("\u2551")}
-${pc2.cyan("\u2551")}                                                             ${pc2.cyan("\u2551")}
-${pc2.cyan("\u2551")}   ${pc2.dim("The Modern React Framework")}                              ${pc2.cyan("\u2551")}
-${pc2.cyan("\u2551")}   ${pc2.dim("TypeScript \u2022 Tailwind \u2022 SSR \u2022 Islands")}                   ${pc2.cyan("\u2551")}
-${pc2.cyan("\u2551")}                                                             ${pc2.cyan("\u2551")}
-${pc2.cyan("\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")}
+  ${pc2.white("\u25B2")} ${pc2.bold("FlexiReact")} ${pc2.dim(VERSION)}
 `;
-var MINI_LOGO = `${pc2.magenta("\u26A1")} ${pc2.bold("FlexiReact")}`;
+var MINI_LOGO = `${pc2.white("\u25B2")} ${pc2.bold("FlexiReact")}`;
 var log2 = {
-  info: (msg) => console.log(`${pc2.cyan("\u2139")} ${msg}`),
-  success: (msg) => console.log(`${pc2.green("\u2713")} ${msg}`),
-  warn: (msg) => console.log(`${pc2.yellow("\u26A0")} ${pc2.yellow(msg)}`),
-  error: (msg) => console.log(`${pc2.red("\u2717")} ${pc2.red(msg)}`),
-  step: (num, total, msg) => console.log(`${pc2.dim(`[${num}/${total}]`)} ${msg}`),
+  info: (msg) => console.log(`  ${pc2.cyan("\u2139")} ${msg}`),
+  success: (msg) => console.log(`  ${pc2.green("\u2714")} ${msg}`),
+  warn: (msg) => console.log(`  ${pc2.yellow("\u26A0")} ${pc2.yellow(msg)}`),
+  error: (msg) => console.log(`  ${pc2.red("\u2716")} ${pc2.red(msg)}`),
+  step: (msg) => console.log(`  ${pc2.dim("\u25CB")} ${msg}`),
   blank: () => console.log(""),
-  divider: () => console.log(pc2.dim("\u2500".repeat(60)))
+  divider: () => console.log(pc2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"))
 };
-function copyDirectory(src, dest) {
-  if (!fs2.existsSync(dest)) {
-    fs2.mkdirSync(dest, { recursive: true });
-  }
-  const entries = fs2.readdirSync(src, { withFileTypes: true });
-  for (const entry of entries) {
-    const srcPath = path2.join(src, entry.name);
-    const destPath = path2.join(dest, entry.name);
-    if (entry.isDirectory()) {
-      copyDirectory(srcPath, destPath);
-    } else {
-      fs2.copyFileSync(srcPath, destPath);
-    }
-  }
-}
 async function runCommand(cmd, cwd) {
   return new Promise((resolve, reject) => {
     const child = spawn(cmd, {
@@ -622,638 +933,73 @@ async function createProject(projectName) {
       name: "template",
       message: "Select a template:",
       choices: [
-        { title: "\u{1F680} Default (Tailwind + shadcn/ui)", value: "default" },
-        { title: "\u{1F49A} FlexiUI (Landing page + @flexireact/flexi-ui)", value: "flexi-ui" },
-        { title: "\u{1F4E6} Minimal (Clean slate)", value: "minimal" }
+        { title: `\u26A1 Default ${pc2.dim("(Pages routing)")}`, value: "default" },
+        { title: `\u{1F4C2} App Router ${pc2.dim("(Next.js style)")}`, value: "app-router" },
+        { title: `\u{1F4E6} Minimal ${pc2.dim("(Bare starter)")}`, value: "minimal" }
       ],
       initial: 0
-    },
-    {
-      type: "toggle",
-      name: "typescript",
-      message: "Use TypeScript?",
-      initial: true,
-      active: "Yes",
-      inactive: "No"
     }
   ]);
   if (options.template === void 0) process.exit(1);
   log2.blank();
-  log2.divider();
-  log2.blank();
-  const totalSteps = options.template === "default" ? 6 : options.template === "flexi-ui" ? 5 : 4;
+  const totalSteps = 5;
   let currentStep = 0;
   currentStep++;
-  log2.step(currentStep, totalSteps, "Creating project directory...");
+  log2.step("Creating project directory...");
   fs2.mkdirSync(projectPath, { recursive: true });
-  log2.success(`Created ${pc2.cyan(name)}/`);
   currentStep++;
-  log2.step(currentStep, totalSteps, "Setting up project structure...");
-  const templateName = options.template;
-  const templatePath = path2.resolve(__dirname2, "..", "templates", templateName);
-  if (fs2.existsSync(templatePath)) {
-    copyDirectory(templatePath, projectPath);
-    log2.success("Project structure created");
-  } else {
-    await createDefaultTemplate(projectPath, name, options.typescript);
-    log2.success("Project structure created");
+  log2.step("Generating files...");
+  try {
+    const files = getTemplateFiles(options.template, name, {});
+    for (const [filePath, content] of Object.entries(files)) {
+      const fullPath = path2.join(projectPath, filePath);
+      const dir = path2.dirname(fullPath);
+      if (!fs2.existsSync(dir)) {
+        fs2.mkdirSync(dir, { recursive: true });
+      }
+      fs2.writeFileSync(fullPath, content);
+    }
+  } catch (err) {
+    log2.error(`Failed to generate template: ${err.message}`);
+    process.exit(1);
   }
   currentStep++;
-  log2.step(currentStep, totalSteps, "Configuring project...");
-  const packageJsonPath = path2.join(projectPath, "package.json");
-  if (fs2.existsSync(packageJsonPath)) {
-    const pkg = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
-    pkg.name = name;
-    fs2.writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2));
+  log2.step("Initializing git...");
+  try {
+    execSync("git init", { cwd: projectPath, stdio: "ignore" });
+    execSync("git add .", { cwd: projectPath, stdio: "ignore" });
+    execSync('git commit -m "Initial commit from FlexiReact CLI"', { cwd: projectPath, stdio: "ignore" });
+  } catch {
   }
-  log2.success("Project configured");
   currentStep++;
-  log2.step(currentStep, totalSteps, "Installing dependencies...");
-  const spinner = ora({ text: "Installing packages...", color: "cyan" }).start();
+  log2.step("Installing dependencies...");
+  const spinner = ora({ text: "Installing packages...", color: "cyan", indent: 2 }).start();
   try {
     await runCommand("npm install", projectPath);
-    spinner.succeed("Dependencies installed");
+    spinner.stop();
+    log2.success("Dependencies installed");
   } catch {
-    spinner.fail("Failed to install dependencies");
-    log2.warn('Run "npm install" manually in the project directory');
+    spinner.stop();
+    log2.warn('Run "npm install" manually');
   }
   currentStep++;
-  log2.step(currentStep, totalSteps, "Linking FlexiReact...");
-  const linkSpinner = ora({ text: "Linking framework...", color: "cyan" }).start();
+  log2.step("Linking FlexiReact...");
   try {
     const frameworkRoot = path2.resolve(__dirname2, "..");
     await runCommand(`npm link "${frameworkRoot}"`, projectPath);
-    linkSpinner.succeed("FlexiReact linked");
   } catch {
-    linkSpinner.fail("Failed to link FlexiReact");
     log2.warn('Run "npm link flexireact" manually');
   }
-  if (options.template === "default") {
-    currentStep++;
-    log2.step(currentStep, totalSteps, "Setting up shadcn/ui components...");
-    log2.success("shadcn/ui configured");
-  }
-  log2.blank();
-  log2.divider();
-  log2.blank();
-  console.log(`  ${pc2.green("\u2728")} ${pc2.bold("Success!")} Your FlexiReact app is ready.`);
-  log2.blank();
-  console.log(`  ${pc2.dim("$")} ${pc2.cyan(`cd ${name}`)}`);
-  console.log(`  ${pc2.dim("$")} ${pc2.cyan("npm run dev")}`);
   log2.blank();
-  console.log(`  ${pc2.dim("Then open")} ${pc2.cyan("http://localhost:3000")} ${pc2.dim("in your browser.")}`);
+  console.log(`  ${pc2.green("\u2714")} ${pc2.bold("Success!")} Created ${name} at ${projectPath}`);
   log2.blank();
-  console.log(`  ${pc2.dim("Documentation:")} ${pc2.cyan("https://github.com/flexireact/flexireact")}`);
+  console.log(`  Next steps:`);
+  console.log(`  ${pc2.dim("1.")} ${pc2.cyan(`cd ${name}`)}`);
+  console.log(`  ${pc2.dim("2.")} ${pc2.cyan("npm run dev")}`);
   log2.blank();
 }
-async function createDefaultTemplate(projectPath, name, useTypeScript) {
-  const ext = useTypeScript ? "tsx" : "jsx";
-  const configExt = useTypeScript ? "ts" : "js";
-  const dirs = [
-    "app/components",
-    "app/styles",
-    "pages/api",
-    "public"
-  ];
-  for (const dir of dirs) {
-    fs2.mkdirSync(path2.join(projectPath, dir), { recursive: true });
-  }
-  const packageJson = {
-    name,
-    version: "0.1.0",
-    private: true,
-    type: "module",
-    scripts: {
-      dev: "flexi dev",
-      build: "flexi build",
-      start: "flexi start",
-      doctor: "flexi doctor"
-    },
-    dependencies: {
-      react: "^19.0.0",
-      "react-dom": "^19.0.0",
-      "class-variance-authority": "^0.7.0",
-      clsx: "^2.1.1",
-      "tailwind-merge": "^2.5.5",
-      "lucide-react": "^0.468.0"
-    },
-    devDependencies: {
-      tailwindcss: "^3.4.16",
-      postcss: "^8.4.49",
-      autoprefixer: "^10.4.20",
-      ...useTypeScript ? {
-        typescript: "^5.7.2",
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
-        "@types/node": "^22.10.1"
-      } : {}
-    }
-  };
-  fs2.writeFileSync(
-    path2.join(projectPath, "package.json"),
-    JSON.stringify(packageJson, null, 2)
-  );
-  if (useTypeScript) {
-    const tsconfig = {
-      compilerOptions: {
-        target: "ES2022",
-        lib: ["dom", "dom.iterable", "ES2022"],
-        allowJs: true,
-        skipLibCheck: true,
-        strict: true,
-        noEmit: true,
-        esModuleInterop: true,
-        module: "ESNext",
-        moduleResolution: "bundler",
-        resolveJsonModule: true,
-        isolatedModules: true,
-        jsx: "react-jsx",
-        baseUrl: ".",
-        paths: {
-          "@/*": ["./*"],
-          "@/components/*": ["./app/components/*"]
-        }
-      },
-      include: ["**/*.ts", "**/*.tsx"],
-      exclude: ["node_modules"]
-    };
-    fs2.writeFileSync(
-      path2.join(projectPath, "tsconfig.json"),
-      JSON.stringify(tsconfig, null, 2)
-    );
-  }
-  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-};
-`;
-  fs2.writeFileSync(path2.join(projectPath, "tailwind.config.js"), tailwindConfig);
-  const postcssConfig = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-`;
-  fs2.writeFileSync(path2.join(projectPath, "postcss.config.js"), postcssConfig);
-  const globalsCss = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 222 47% 11%;
-    --foreground: 210 40% 98%;
-    --primary: 263 70% 50%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217 33% 17%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217 33% 17%;
-    --muted-foreground: 215 20% 65%;
-    --accent: 263 70% 50%;
-    --accent-foreground: 210 40% 98%;
-    --border: 217 33% 17%;
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-`;
-  fs2.writeFileSync(path2.join(projectPath, "app/styles/globals.css"), globalsCss);
-  const flexiConfig = `export default {
-  server: {
-    port: 3000,
-    host: 'localhost'
-  },
-  islands: {
-    enabled: true
-  },
-  rsc: {
-    enabled: true
-  }
-};
-`;
-  fs2.writeFileSync(path2.join(projectPath, `flexireact.config.${configExt}`), flexiConfig);
-  await createComponents(projectPath, ext);
-  await createPages(projectPath, ext);
-}
-async function createComponents(projectPath, ext) {
-  const buttonComponent = `import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-function cn(...inputs${ext === "tsx" ? ": (string | undefined)[]" : ""}) {
-  return twMerge(clsx(inputs));
-}
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        outline: 'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-${ext === "tsx" ? `interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}` : ""}
-
-export function Button({ className, variant, size, ...props }${ext === "tsx" ? ": ButtonProps" : ""}) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-`;
-  fs2.writeFileSync(path2.join(projectPath, `app/components/Button.${ext}`), buttonComponent);
-  const cardComponent = `import React from 'react';
-
-${ext === "tsx" ? `interface CardProps {
-  children: React.ReactNode;
-  className?: string;
-}` : ""}
-
-export function Card({ children, className = '' }${ext === "tsx" ? ": CardProps" : ""}) {
-  return (
-    <div className={\`rounded-lg border border-border bg-secondary/50 p-6 backdrop-blur-sm \${className}\`}>
-      {children}
-    </div>
-  );
-}
-
-export function CardHeader({ children, className = '' }${ext === "tsx" ? ": CardProps" : ""}) {
-  return <div className={\`mb-4 \${className}\`}>{children}</div>;
-}
-
-export function CardTitle({ children, className = '' }${ext === "tsx" ? ": CardProps" : ""}) {
-  return <h3 className={\`text-xl font-semibold \${className}\`}>{children}</h3>;
-}
-
-export function CardDescription({ children, className = '' }${ext === "tsx" ? ": CardProps" : ""}) {
-  return <p className={\`text-muted-foreground \${className}\`}>{children}</p>;
-}
-
-export function CardContent({ children, className = '' }${ext === "tsx" ? ": CardProps" : ""}) {
-  return <div className={className}>{children}</div>;
-}
-`;
-  fs2.writeFileSync(path2.join(projectPath, `app/components/Card.${ext}`), cardComponent);
-  const navbarComponent = `import React from 'react';
-
-export function Navbar() {
-  return (
-    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
-        <a href="/" className="flex items-center gap-2 text-xl font-bold">
-          <span className="text-2xl">\u26A1</span>
-          <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-            FlexiReact
-          </span>
-        </a>
-        
-        <div className="flex items-center gap-6">
-          <a href="/" className="text-muted-foreground hover:text-foreground transition-colors">
-            Home
-          </a>
-          <a href="/docs" className="text-muted-foreground hover:text-foreground transition-colors">
-            Docs
-          </a>
-          <a href="/api/hello" className="text-muted-foreground hover:text-foreground transition-colors">
-            API
-          </a>
-          <a 
-            href="https://github.com/flexireact/flexireact" 
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-muted-foreground hover:text-foreground transition-colors"
-          >
-            GitHub
-          </a>
-        </div>
-      </div>
-    </nav>
-  );
-}
-`;
-  fs2.writeFileSync(path2.join(projectPath, `app/components/Navbar.${ext}`), navbarComponent);
-}
-async function createPages(projectPath, ext) {
-  const homePage = `import React from 'react';
-
-export const title = 'FlexiReact - The Modern React Framework';
-
-const features = [
-  { icon: '\u26A1', title: 'Lightning Fast', desc: 'Powered by esbuild for instant builds.' },
-  { icon: '\u{1F4D8}', title: 'TypeScript', desc: 'First-class TypeScript support.' },
-  { icon: '\u{1F3DD}\uFE0F', title: 'Islands', desc: 'Partial hydration for minimal JS.' },
-  { icon: '\u{1F4C1}', title: 'File Routing', desc: 'Create a file, get a route.' },
-  { icon: '\u{1F50C}', title: 'API Routes', desc: 'Build your API alongside frontend.' },
-  { icon: '\u{1F680}', title: 'SSR/SSG', desc: 'Server rendering and static generation.' },
-];
-
-export default function HomePage() {
-  return (
-    <div style={styles.container}>
-      {/* Navbar */}
-      <nav style={styles.nav}>
-        <a href="/" style={styles.logo}>
-          <svg style={{ width: 32, height: 32 }} viewBox="0 0 200 200" fill="none">
-            <defs>
-              <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stopColor="#61DAFB"/>
-                <stop offset="100%" stopColor="#21A1F1"/>
-              </linearGradient>
-            </defs>
-            <circle cx="100" cy="100" r="12" fill="url(#g)"/>
-            <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#g)" strokeWidth="6" transform="rotate(-30 100 100)"/>
-            <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#g)" strokeWidth="6" transform="rotate(30 100 100)"/>
-            <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#g)" strokeWidth="6" transform="rotate(90 100 100)"/>
-          </svg>
-          <span style={styles.logoText}>FlexiReact</span>
-        </a>
-        <div style={styles.navLinks}>
-          <a href="/" style={styles.navLink}>Home</a>
-          <a href="/api/hello" style={styles.navLink}>API</a>
-        </div>
-      </nav>
-
-      {/* Hero */}
-      <section style={styles.hero}>
-        <svg style={{ width: 120, height: 120, marginBottom: 24 }} viewBox="0 0 200 200" fill="none">
-          <defs>
-            <linearGradient id="hero" x1="0%" y1="0%" x2="100%" y2="100%">
-              <stop offset="0%" stopColor="#61DAFB"/>
-              <stop offset="100%" stopColor="#21A1F1"/>
-            </linearGradient>
-          </defs>
-          <circle cx="100" cy="100" r="12" fill="url(#hero)"/>
-          <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#hero)" strokeWidth="6" transform="rotate(-30 100 100)"/>
-          <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#hero)" strokeWidth="6" transform="rotate(30 100 100)"/>
-          <ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="url(#hero)" strokeWidth="6" transform="rotate(90 100 100)"/>
-          <circle cx="28" cy="70" r="8" fill="url(#hero)"/>
-          <circle cx="172" cy="130" r="8" fill="url(#hero)"/>
-          <circle cx="100" cy="20" r="8" fill="url(#hero)"/>
-        </svg>
-        
-        <div style={styles.badge}>\u{1F680} v2.1 \u2014 TypeScript & Islands</div>
-        
-        <h1 style={styles.title}>
-          Build faster with<br/>
-          <span style={styles.titleGradient}>FlexiReact</span>
-        </h1>
-        
-        <p style={styles.subtitle}>
-          The modern React framework with SSR, SSG, Islands architecture,<br/>
-          and file-based routing. Simple and powerful.
-        </p>
-        
-        <div style={styles.buttons}>
-          <a href="/docs" style={styles.primaryBtn}>Get Started \u2192</a>
-          <a href="/api/hello" style={styles.secondaryBtn}>View API</a>
-        </div>
-      </section>
-
-      {/* Features */}
-      <section style={styles.features}>
-        <h2 style={styles.featuresTitle}>Everything you need</h2>
-        <div style={styles.grid}>
-          {features.map((f, i) => (
-            <div key={i} style={styles.card}>
-              <div style={styles.cardIcon}>{f.icon}</div>
-              <h3 style={styles.cardTitle}>{f.title}</h3>
-              <p style={styles.cardDesc}>{f.desc}</p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer style={styles.footer}>
-        Built with \u2764\uFE0F using FlexiReact
-      </footer>
-    </div>
-  );
-}
-
-const styles = {
-  container: {
-    minHeight: '100vh',
-    background: 'linear-gradient(180deg, #0f172a 0%, #1e293b 100%)',
-    color: '#f8fafc',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  },
-  nav: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 64,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '0 24px',
-    background: 'rgba(15, 23, 42, 0.8)',
-    backdropFilter: 'blur(12px)',
-    borderBottom: '1px solid rgba(255,255,255,0.1)',
-    zIndex: 100,
-  },
-  logo: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-    textDecoration: 'none',
-    color: '#f8fafc',
-  },
-  logoText: {
-    fontSize: 20,
-    fontWeight: 700,
-    background: 'linear-gradient(90deg, #61DAFB, #21A1F1)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-  },
-  navLinks: { display: 'flex', gap: 24 },
-  navLink: { color: '#94a3b8', textDecoration: 'none', fontSize: 14 },
-  hero: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-    padding: '140px 24px 80px',
-  },
-  badge: {
-    background: 'rgba(99, 102, 241, 0.2)',
-    border: '1px solid rgba(99, 102, 241, 0.3)',
-    borderRadius: 9999,
-    padding: '8px 16px',
-    fontSize: 14,
-    marginBottom: 24,
-  },
-  title: {
-    fontSize: 'clamp(2.5rem, 8vw, 4.5rem)',
-    fontWeight: 800,
-    lineHeight: 1.1,
-    marginBottom: 24,
-  },
-  titleGradient: {
-    background: 'linear-gradient(90deg, #61DAFB, #a78bfa, #61DAFB)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-  },
-  subtitle: {
-    fontSize: 18,
-    color: '#94a3b8',
-    maxWidth: 600,
-    lineHeight: 1.6,
-    marginBottom: 32,
-  },
-  buttons: { display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' },
-  primaryBtn: {
-    background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
-    color: '#fff',
-    padding: '14px 28px',
-    borderRadius: 12,
-    textDecoration: 'none',
-    fontWeight: 600,
-    boxShadow: '0 4px 20px rgba(99, 102, 241, 0.4)',
-  },
-  secondaryBtn: {
-    background: 'transparent',
-    color: '#f8fafc',
-    padding: '14px 28px',
-    borderRadius: 12,
-    textDecoration: 'none',
-    fontWeight: 600,
-    border: '1px solid rgba(255,255,255,0.2)',
-  },
-  features: {
-    padding: '80px 24px',
-    maxWidth: 1200,
-    margin: '0 auto',
-  },
-  featuresTitle: {
-    fontSize: 32,
-    fontWeight: 700,
-    textAlign: 'center',
-    marginBottom: 48,
-  },
-  grid: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-    gap: 24,
-  },
-  card: {
-    background: 'rgba(255,255,255,0.05)',
-    border: '1px solid rgba(255,255,255,0.1)',
-    borderRadius: 16,
-    padding: 24,
-  },
-  cardIcon: { fontSize: 32, marginBottom: 12 },
-  cardTitle: { fontSize: 18, fontWeight: 600, marginBottom: 8 },
-  cardDesc: { fontSize: 14, color: '#94a3b8', lineHeight: 1.5 },
-  footer: {
-    textAlign: 'center',
-    padding: 32,
-    color: '#64748b',
-    borderTop: '1px solid rgba(255,255,255,0.1)',
-  },
-};
-`;
-  fs2.writeFileSync(path2.join(projectPath, "pages/index.jsx"), homePage);
-  const apiRoute = `/**
- * API Route: /api/hello
- */
-
-export function get(req${ext === "tsx" ? ": any" : ""}, res${ext === "tsx" ? ": any" : ""}) {
-  res.json({
-    message: 'Hello from FlexiReact API! \u{1F680}',
-    timestamp: new Date().toISOString(),
-    framework: 'FlexiReact v3.1'
-  });
-}
-
-export function post(req${ext === "tsx" ? ": any" : ""}, res${ext === "tsx" ? ": any" : ""}) {
-  const { name } = req.body || {};
-  res.json({
-    message: \`Hello, \${name || 'World'}!\`,
-    timestamp: new Date().toISOString()
-  });
-}
-`;
-  fs2.writeFileSync(path2.join(projectPath, `pages/api/hello.${ext === "tsx" ? "ts" : "js"}`), apiRoute);
-  fs2.writeFileSync(path2.join(projectPath, "public/.gitkeep"), "");
-}
 async function runDev() {
-  console.log(`
-${pc2.cyan("   \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E")}
-${pc2.cyan("   \u2502")}                                         ${pc2.cyan("\u2502")}
-${pc2.cyan("   \u2502")}   ${pc2.bold(pc2.cyan("\u269B"))}  ${pc2.bold(pc2.white("F L E X I R E A C T"))}            ${pc2.cyan("\u2502")}
-${pc2.cyan("   \u2502")}                                         ${pc2.cyan("\u2502")}
-${pc2.cyan("   \u2502")}   ${pc2.dim("The Modern React Framework")}          ${pc2.cyan("\u2502")}
-${pc2.cyan("   \u2502")}                                         ${pc2.cyan("\u2502")}
-${pc2.cyan("   \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F")}
-`);
+  console.log("");
   const isBuilt = __dirname2.includes("dist");
   const ext = isBuilt ? "js" : "ts";
   const startDevDir = isBuilt ? path2.join(__dirname2, "..", "core") : path2.join(__dirname2, "..", "core");
@@ -1307,30 +1053,29 @@ async function runBuild(options = {}) {
       mode: "production",
       analyze: options.analyze
     });
-    spinner.succeed("Build complete!");
+    spinner.stop();
+    log2.success("Build complete");
     log2.blank();
-    log2.success(`Output: ${pc2.cyan(".flexi/")}`);
+    console.log(`  ${pc2.dim("Output in")} ${pc2.cyan(".flexi/")}`);
     if (options.analyze && result?.analysis) {
       log2.blank();
-      log2.info("\u{1F4CA} Bundle Analysis:");
+      console.log(`  ${pc2.bold("Bundle Analysis")}`);
       log2.blank();
       const analysis = result.analysis;
       const sorted = Object.entries(analysis.files || {}).sort((a, b) => b[1].size - a[1].size);
-      console.log(pc2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
-      console.log(`  ${pc2.bold("File")}${" ".repeat(35)}${pc2.bold("Size")}`);
-      console.log(pc2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
+      console.log(`  ${pc2.dim("File")}                                    ${pc2.dim("Size")}         ${pc2.dim("Gzip")}`);
+      console.log(pc2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
       for (const [file, info] of sorted.slice(0, 15)) {
-        const name = file.length > 35 ? "..." + file.slice(-32) : file;
+        const name = file.length > 40 ? "..." + file.slice(-37) : file;
         const size = formatBytes(info.size);
-        const gzip = info.gzipSize ? pc2.dim(` (${formatBytes(info.gzipSize)} gzip)`) : "";
-        console.log(`  ${name.padEnd(38)} ${pc2.cyan(size)}${gzip}`);
-      }
-      console.log(pc2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
-      console.log(`  ${pc2.bold("Total:")}${" ".repeat(31)} ${pc2.green(formatBytes(analysis.totalSize || 0))}`);
-      if (analysis.totalGzipSize) {
-        console.log(`  ${pc2.dim("Gzipped:")}${" ".repeat(29)} ${pc2.dim(formatBytes(analysis.totalGzipSize))}`);
+        const gzip = info.gzipSize ? formatBytes(info.gzipSize) : "-";
+        console.log(`  ${name.padEnd(43)} ${size.padEnd(12)} ${pc2.dim(gzip)}`);
       }
       log2.blank();
+      const total = formatBytes(analysis.totalSize || 0);
+      const totalGzip = analysis.totalGzipSize ? formatBytes(analysis.totalGzipSize) : "-";
+      console.log(`  ${pc2.dim("Total:")} ${pc2.bold(total)}  ${pc2.dim(`(Gzip: ${totalGzip})`)}`);
+      log2.blank();
     }
   } catch (error) {
     spinner.fail("Build failed");
@@ -1371,9 +1116,8 @@ async function runStart() {
   process.on("SIGTERM", () => child.kill("SIGTERM"));
 }
 async function runDoctor() {
-  console.log(MINI_LOGO);
   log2.blank();
-  log2.info("Checking your project...");
+  console.log(`  ${pc2.bold("Health Check")}`);
   log2.blank();
   const checks = [];
   const projectRoot = process.cwd();
@@ -1436,7 +1180,7 @@ async function runDoctor() {
         icon = "\u25CB";
         color = pc2.cyan;
     }
-    console.log(`  ${color(icon)} ${check.name}: ${pc2.dim(check.message)}`);
+    console.log(`  ${color(icon)} ${check.name.padEnd(20)} ${pc2.dim(check.message)}`);
   }
   log2.blank();
   if (hasErrors) {
@@ -1450,28 +1194,19 @@ async function runDoctor() {
 }
 function showHelp() {
   console.log(LOGO);
-  console.log(`  ${pc2.bold("Usage:")}`);
-  console.log(`    ${pc2.cyan("flexi")} ${pc2.dim("<command>")} ${pc2.dim("[options]")}`);
-  log2.blank();
-  console.log(`  ${pc2.bold("Commands:")}`);
-  console.log(`    ${pc2.cyan("create")} ${pc2.dim("<name>")}       Create a new FlexiReact project`);
-  console.log(`    ${pc2.cyan("dev")}                  Start development server`);
-  console.log(`    ${pc2.cyan("build")}                Build for production`);
-  console.log(`    ${pc2.cyan("start")}                Start production server`);
-  console.log(`    ${pc2.cyan("generate")} ${pc2.dim("<type>")}     Generate component/page/hook/etc (alias: g)`);
-  console.log(`    ${pc2.cyan("doctor")}               Check project health`);
-  console.log(`    ${pc2.cyan("help")}                 Show this help message`);
+  console.log(`  ${pc2.bold("Usage")}`);
+  console.log(`    $ flexi <command> [options]`);
   log2.blank();
-  console.log(`  ${pc2.bold("Generate Types:")}`);
-  console.log(`    ${pc2.dim("page, layout, component, hook, api, action, middleware, context")}`);
-  console.log(`    ${pc2.dim("loading, error, not-found")}`);
+  console.log(`  ${pc2.bold("Commands")}`);
+  console.log(`    ${pc2.cyan("create")}    ${pc2.dim("Create a new project")}`);
+  console.log(`    ${pc2.cyan("dev")}       ${pc2.dim("Start development server")}`);
+  console.log(`    ${pc2.cyan("build")}     ${pc2.dim("Build for production")}`);
+  console.log(`    ${pc2.cyan("start")}     ${pc2.dim("Start production server")}`);
+  console.log(`    ${pc2.cyan("doctor")}    ${pc2.dim("Check project health")}`);
   log2.blank();
-  console.log(`  ${pc2.bold("Examples:")}`);
-  console.log(`    ${pc2.dim("$")} flexi create my-app`);
-  console.log(`    ${pc2.dim("$")} flexi dev`);
-  console.log(`    ${pc2.dim("$")} flexi g component Button`);
-  console.log(`    ${pc2.dim("$")} flexi g page dashboard`);
-  console.log(`    ${pc2.dim("$")} flexi build --analyze`);
+  console.log(`  ${pc2.bold("Generators")}`);
+  console.log(`    $ flexi g <type> [name]`);
+  console.log(`    ${pc2.dim("Types:")} page, component, hook, api, action, middleware`);
   log2.blank();
 }
 async function main() {
@@ -1521,8 +1256,13 @@ async function main() {
       process.exit(command ? 1 : 0);
   }
 }
-main().catch((error) => {
-  log2.error(error.message);
-  process.exit(1);
-});
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  main().catch((error) => {
+    log2.error(error.message);
+    process.exit(1);
+  });
+}
+export {
+  createProject
+};
 //# sourceMappingURL=index.js.map