@flexireact/core 3.0.1 → 3.0.3

package/dist/cli/index.js

@@ -0,0 +1,1514 @@
+#!/usr/bin/env node
+
+// cli/index.ts
+import fs2 from "fs";
+import path2 from "path";
+import { fileURLToPath, pathToFileURL } from "url";
+import { spawn } from "child_process";
+import pc2 from "picocolors";
+import prompts2 from "prompts";
+import ora from "ora";
+
+// cli/generators.ts
+import fs from "fs";
+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)}`),
+  blank: () => console.log("")
+};
+var templates = {
+  // Page template
+  page: (name, options) => `${options.client ? "'use client';\n\n" : ""}import React from 'react';
+
+export default function ${toPascalCase(name)}Page() {
+  return (
+    <div className="min-h-screen p-8">
+      <h1 className="text-4xl font-bold">${toPascalCase(name)}</h1>
+      <p className="text-gray-400 mt-4">Welcome to ${name} page</p>
+    </div>
+  );
+}
+`,
+  // Layout template
+  layout: (name) => `import React from 'react';
+
+interface ${toPascalCase(name)}LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ${toPascalCase(name)}Layout({ children }: ${toPascalCase(name)}LayoutProps) {
+  return (
+    <div className="${name}-layout">
+      {/* Add your layout wrapper here */}
+      {children}
+    </div>
+  );
+}
+`,
+  // Component template
+  component: (name, options) => {
+    const propsInterface = options.props ? `
+interface ${toPascalCase(name)}Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+` : "";
+    const propsType = options.props ? `{ className, children }: ${toPascalCase(name)}Props` : "{}";
+    return `${options.client ? "'use client';\n\n" : ""}import React from 'react';
+import { cn } from '@/lib/utils';
+${propsInterface}
+export function ${toPascalCase(name)}(${propsType}) {
+  return (
+    <div className={cn('${toKebabCase(name)}', ${options.props ? "className" : "''"})}>
+      ${options.props ? "{children}" : `{/* ${toPascalCase(name)} content */}`}
+    </div>
+  );
+}
+
+export default ${toPascalCase(name)};
+`;
+  },
+  // Hook template
+  hook: (name) => `import { useState, useEffect, useCallback } from 'react';
+
+export function use${toPascalCase(name)}() {
+  const [state, setState] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const execute = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Add your logic here
+      setState(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { state, loading, error, execute };
+}
+
+export default use${toPascalCase(name)};
+`,
+  // API route template
+  api: (name) => `import type { IncomingMessage, ServerResponse } from 'http';
+
+export default async function handler(req: IncomingMessage, res: ServerResponse) {
+  const method = req.method;
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res);
+    case 'POST':
+      return handlePost(req, res);
+    default:
+      res.statusCode = 405;
+      res.setHeader('Content-Type', 'application/json');
+      res.end(JSON.stringify({ error: 'Method not allowed' }));
+  }
+}
+
+async function handleGet(req: IncomingMessage, res: ServerResponse) {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify({ message: '${name} API - GET' }));
+}
+
+async function handlePost(req: IncomingMessage, res: ServerResponse) {
+  // Parse body
+  let body = '';
+  for await (const chunk of req) {
+    body += chunk;
+  }
+  const data = body ? JSON.parse(body) : {};
+
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify({ message: '${name} API - POST', data }));
+}
+`,
+  // Server Action template
+  action: (name) => `'use server';
+
+import { revalidatePath } from '@flexireact/core';
+
+export async function ${toCamelCase(name)}Action(formData: FormData) {
+  // Validate input
+  const data = Object.fromEntries(formData);
+  
+  try {
+    // Add your server logic here
+    console.log('${toPascalCase(name)} action executed:', data);
+    
+    // Revalidate cache if needed
+    // revalidatePath('/');
+    
+    return { success: true, data };
+  } catch (error) {
+    return { 
+      success: false, 
+      error: error instanceof Error ? error.message : 'Unknown error' 
+    };
+  }
+}
+`,
+  // Middleware template
+  middleware: (name) => `import type { IncomingMessage, ServerResponse } from 'http';
+
+export interface ${toPascalCase(name)}MiddlewareOptions {
+  // Add your options here
+}
+
+export function ${toCamelCase(name)}Middleware(options: ${toPascalCase(name)}MiddlewareOptions = {}) {
+  return async (
+    req: IncomingMessage,
+    res: ServerResponse,
+    next: () => Promise<void>
+  ) => {
+    // Before request handling
+    console.log('[${toPascalCase(name)}] Request:', req.url);
+    
+    // Continue to next middleware/handler
+    await next();
+    
+    // After request handling (optional)
+  };
+}
+
+export default ${toCamelCase(name)}Middleware;
+`,
+  // Context template
+  context: (name) => `'use client';
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+interface ${toPascalCase(name)}State {
+  // Add your state properties here
+  value: string | null;
+}
+
+interface ${toPascalCase(name)}ContextValue extends ${toPascalCase(name)}State {
+  setValue: (value: string) => void;
+  reset: () => void;
+}
+
+const ${toPascalCase(name)}Context = createContext<${toPascalCase(name)}ContextValue | null>(null);
+
+export function ${toPascalCase(name)}Provider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<${toPascalCase(name)}State>({
+    value: null,
+  });
+
+  const setValue = useCallback((value: string) => {
+    setState(prev => ({ ...prev, value }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState({ value: null });
+  }, []);
+
+  return (
+    <${toPascalCase(name)}Context.Provider value={{ ...state, setValue, reset }}>
+      {children}
+    </${toPascalCase(name)}Context.Provider>
+  );
+}
+
+export function use${toPascalCase(name)}() {
+  const context = useContext(${toPascalCase(name)}Context);
+  if (!context) {
+    throw new Error('use${toPascalCase(name)} must be used within a ${toPascalCase(name)}Provider');
+  }
+  return context;
+}
+`,
+  // Loading template
+  loading: () => `import React from 'react';
+import { Spinner } from '@flexireact/flexi-ui';
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <Spinner size="lg" />
+    </div>
+  );
+}
+`,
+  // Error template
+  error: () => `'use client';
+
+import React from 'react';
+import { Button, Alert } from '@flexireact/flexi-ui';
+
+interface ErrorProps {
+  error: Error;
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-8">
+      <Alert variant="error" className="max-w-md mb-8">
+        <h2 className="font-bold text-lg mb-2">Something went wrong</h2>
+        <p className="text-sm">{error.message}</p>
+      </Alert>
+      <Button onClick={reset}>Try again</Button>
+    </div>
+  );
+}
+`,
+  // Not found template
+  notFound: () => `import React from 'react';
+import { Button } from '@flexireact/flexi-ui';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-8">
+      <h1 className="text-8xl font-bold text-primary mb-4">404</h1>
+      <p className="text-gray-400 text-xl mb-8">Page not found</p>
+      <Button asChild>
+        <a href="/">\u2190 Back Home</a>
+      </Button>
+    </div>
+  );
+}
+`
+};
+function toPascalCase(str) {
+  return str.replace(/[-_](.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (_, c) => c.toUpperCase());
+}
+function toCamelCase(str) {
+  return str.replace(/[-_](.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (_, c) => c.toLowerCase());
+}
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
+}
+function ensureDir(filePath) {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+function writeFile(filePath, content) {
+  ensureDir(filePath);
+  fs.writeFileSync(filePath, content);
+}
+async function runGenerate(type, name) {
+  const cwd = process.cwd();
+  if (!fs.existsSync(path.join(cwd, "package.json"))) {
+    log.error("Not in a FlexiReact project. Run this command in your project root.");
+    process.exit(1);
+  }
+  if (!type) {
+    const response = await prompts([
+      {
+        type: "select",
+        name: "type",
+        message: "What do you want to generate?",
+        choices: [
+          { title: "\u{1F4C4} Page", value: "page", description: "A new page in app/ or pages/" },
+          { title: "\u{1F4D0} Layout", value: "layout", description: "A layout wrapper component" },
+          { title: "\u{1F9E9} Component", value: "component", description: "A reusable React component" },
+          { title: "\u{1FA9D} Hook", value: "hook", description: "A custom React hook" },
+          { title: "\u{1F50C} API Route", value: "api", description: "An API endpoint" },
+          { title: "\u26A1 Server Action", value: "action", description: "A server action function" },
+          { title: "\u{1F6E1}\uFE0F Middleware", value: "middleware", description: "Request middleware" },
+          { title: "\u{1F310} Context", value: "context", description: "React context provider" },
+          { title: "\u23F3 Loading", value: "loading", description: "Loading state component" },
+          { title: "\u274C Error", value: "error", description: "Error boundary component" },
+          { title: "\u{1F50D} Not Found", value: "not-found", description: "404 page component" }
+        ]
+      },
+      {
+        type: (prev) => ["loading", "error", "not-found"].includes(prev) ? null : "text",
+        name: "name",
+        message: "Name:",
+        validate: (v) => v.length > 0 || "Name is required"
+      }
+    ]);
+    if (!response.type) process.exit(0);
+    type = response.type;
+    name = response.name;
+  }
+  const validTypes = [
+    "page",
+    "layout",
+    "component",
+    "hook",
+    "api",
+    "action",
+    "middleware",
+    "context",
+    "loading",
+    "error",
+    "not-found"
+  ];
+  if (!validTypes.includes(type)) {
+    log.error(`Invalid type: ${type}`);
+    log.info(`Valid types: ${validTypes.join(", ")}`);
+    process.exit(1);
+  }
+  if (type && ["loading", "error", "not-found"].includes(type)) {
+    await generateSpecialFile(type, cwd);
+    return;
+  }
+  let finalName = name;
+  if (!finalName) {
+    const response = await prompts({
+      type: "text",
+      name: "name",
+      message: `${toPascalCase(type || "item")} name:`,
+      validate: (v) => v.length > 0 || "Name is required"
+    });
+    finalName = response.name;
+    if (!finalName) process.exit(0);
+  }
+  switch (type) {
+    case "page":
+      await generatePage(finalName, cwd);
+      break;
+    case "layout":
+      await generateLayout(finalName, cwd);
+      break;
+    case "component":
+      await generateComponent(finalName, cwd);
+      break;
+    case "hook":
+      await generateHook(finalName, cwd);
+      break;
+    case "api":
+      await generateApi(finalName, cwd);
+      break;
+    case "action":
+      await generateAction(finalName, cwd);
+      break;
+    case "middleware":
+      await generateMiddleware(finalName, cwd);
+      break;
+    case "context":
+      await generateContext(finalName, cwd);
+      break;
+  }
+}
+async function generatePage(name, cwd) {
+  const response = await prompts([
+    {
+      type: "select",
+      name: "directory",
+      message: "Where to create the page?",
+      choices: [
+        { title: "app/ (App Router)", value: "app" },
+        { title: "pages/ (Pages Router)", value: "pages" }
+      ]
+    },
+    {
+      type: "toggle",
+      name: "client",
+      message: "Client component? (use client)",
+      initial: false,
+      active: "Yes",
+      inactive: "No"
+    }
+  ]);
+  const fileName = response.directory === "app" ? "page.tsx" : `${toKebabCase(name)}.tsx`;
+  const filePath = response.directory === "app" ? path.join(cwd, "app", toKebabCase(name), fileName) : path.join(cwd, "pages", fileName);
+  writeFile(filePath, templates.page(name, { client: response.client }));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateLayout(name, cwd) {
+  const filePath = path.join(cwd, "app", toKebabCase(name), "layout.tsx");
+  writeFile(filePath, templates.layout(name));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateComponent(name, cwd) {
+  const response = await prompts([
+    {
+      type: "select",
+      name: "directory",
+      message: "Where to create the component?",
+      choices: [
+        { title: "components/", value: "components" },
+        { title: "app/components/", value: "app/components" }
+      ]
+    },
+    {
+      type: "toggle",
+      name: "client",
+      message: "Client component?",
+      initial: true,
+      active: "Yes",
+      inactive: "No"
+    },
+    {
+      type: "toggle",
+      name: "props",
+      message: "Include props interface?",
+      initial: true,
+      active: "Yes",
+      inactive: "No"
+    }
+  ]);
+  const filePath = path.join(cwd, response.directory, `${toPascalCase(name)}.tsx`);
+  writeFile(filePath, templates.component(name, { client: response.client, props: response.props }));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateHook(name, cwd) {
+  const hookName = name.startsWith("use") ? name : `use-${name}`;
+  const filePath = path.join(cwd, "hooks", `${toKebabCase(hookName)}.ts`);
+  writeFile(filePath, templates.hook(hookName.replace(/^use-?/, "")));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateApi(name, cwd) {
+  const filePath = path.join(cwd, "pages", "api", `${toKebabCase(name)}.ts`);
+  writeFile(filePath, templates.api(name));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateAction(name, cwd) {
+  const filePath = path.join(cwd, "actions", `${toKebabCase(name)}.ts`);
+  writeFile(filePath, templates.action(name));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateMiddleware(name, cwd) {
+  const filePath = path.join(cwd, "middleware", `${toKebabCase(name)}.ts`);
+  writeFile(filePath, templates.middleware(name));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateContext(name, cwd) {
+  const filePath = path.join(cwd, "contexts", `${toPascalCase(name)}Context.tsx`);
+  writeFile(filePath, templates.context(name));
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+async function generateSpecialFile(type, cwd) {
+  const response = await prompts({
+    type: "text",
+    name: "path",
+    message: "Path (relative to app/):",
+    initial: ""
+  });
+  const basePath = response.path ? path.join(cwd, "app", response.path) : path.join(cwd, "app");
+  let fileName;
+  let content;
+  switch (type) {
+    case "loading":
+      fileName = "loading.tsx";
+      content = templates.loading();
+      break;
+    case "error":
+      fileName = "error.tsx";
+      content = templates.error();
+      break;
+    case "not-found":
+      fileName = "not-found.tsx";
+      content = templates.notFound();
+      break;
+  }
+  const filePath = path.join(basePath, fileName);
+  writeFile(filePath, content);
+  log.success(`Created ${pc.cyan(path.relative(cwd, filePath))}`);
+}
+function listGenerators() {
+  console.log(`
+${pc.bold("Available Generators:")}
+
+  ${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
+
+${pc.bold("Usage:")}
+  ${pc.dim("$")} flexi generate ${pc.cyan("<type>")} ${pc.dim("[name]")}
+  ${pc.dim("$")} flexi g ${pc.cyan("<type>")} ${pc.dim("[name]")}
+
+${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
+`);
+}
+
+// cli/index.ts
+var __filename2 = fileURLToPath(import.meta.url);
+var __dirname2 = path2.dirname(__filename2);
+var VERSION = "3.0.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")}
+`;
+var MINI_LOGO = `${pc2.magenta("\u26A1")} ${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}`),
+  blank: () => console.log(""),
+  divider: () => console.log(pc2.dim("\u2500".repeat(60)))
+};
+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, {
+      shell: true,
+      cwd,
+      stdio: "pipe"
+    });
+    child.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`Command failed with code ${code}`));
+    });
+    child.on("error", reject);
+  });
+}
+async function createProject(projectName) {
+  console.log(LOGO);
+  log2.blank();
+  let name = projectName;
+  if (!name) {
+    const response = await prompts2({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "my-flexi-app",
+      validate: (value) => value.length > 0 || "Project name is required"
+    });
+    name = response.projectName;
+    if (!name) process.exit(1);
+  }
+  const projectPath = path2.resolve(process.cwd(), name);
+  if (fs2.existsSync(projectPath)) {
+    log2.error(`Directory "${name}" already exists.`);
+    process.exit(1);
+  }
+  const options = await prompts2([
+    {
+      type: "select",
+      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" }
+      ],
+      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;
+  let currentStep = 0;
+  currentStep++;
+  log2.step(currentStep, totalSteps, "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");
+  }
+  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.success("Project configured");
+  currentStep++;
+  log2.step(currentStep, totalSteps, "Installing dependencies...");
+  const spinner = ora({ text: "Installing packages...", color: "cyan" }).start();
+  try {
+    await runCommand("npm install", projectPath);
+    spinner.succeed("Dependencies installed");
+  } catch {
+    spinner.fail("Failed to install dependencies");
+    log2.warn('Run "npm install" manually in the project directory');
+  }
+  currentStep++;
+  log2.step(currentStep, totalSteps, "Linking FlexiReact...");
+  const linkSpinner = ora({ text: "Linking framework...", color: "cyan" }).start();
+  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.")}`);
+  log2.blank();
+  console.log(`  ${pc2.dim("Documentation:")} ${pc2.cyan("https://github.com/flexireact/flexireact")}`);
+  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: "^18.3.1",
+      "react-dom": "^18.3.1",
+      "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": "^18.3.14",
+        "@types/react-dom": "^18.3.2",
+        "@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' as const,
+    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' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center' as const,
+    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' as const, 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' as const,
+    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' as const,
+    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 v2.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")}
+`);
+  const startDevPath = path2.join(__dirname2, "..", "core", "start-dev.ts");
+  const child = spawn(
+    "npx",
+    ["tsx", startDevPath],
+    {
+      stdio: "inherit",
+      cwd: process.cwd(),
+      shell: true,
+      env: { ...process.env, NODE_ENV: "development", FORCE_COLOR: "1" }
+    }
+  );
+  child.on("error", (error) => {
+    log2.error(`Failed to start dev server: ${error.message}`);
+    process.exit(1);
+  });
+  process.on("SIGINT", () => child.kill("SIGINT"));
+  process.on("SIGTERM", () => child.kill("SIGTERM"));
+}
+async function runBuild(options = {}) {
+  console.log(MINI_LOGO);
+  log2.blank();
+  log2.info("Building for production...");
+  if (options.analyze) {
+    log2.info("Bundle analysis enabled");
+  }
+  log2.blank();
+  const spinner = ora({ text: "Compiling...", color: "cyan" }).start();
+  try {
+    const buildPath = path2.join(__dirname2, "..", "core", "build", "index.js");
+    const configPath = path2.join(__dirname2, "..", "core", "config.js");
+    const buildModule = await import(pathToFileURL(buildPath).href);
+    const configModule = await import(pathToFileURL(configPath).href);
+    const projectRoot = process.cwd();
+    const rawConfig = await configModule.loadConfig(projectRoot);
+    const config = configModule.resolvePaths(rawConfig, projectRoot);
+    const result = await buildModule.build({
+      projectRoot,
+      config,
+      mode: "production",
+      analyze: options.analyze
+    });
+    spinner.succeed("Build complete!");
+    log2.blank();
+    log2.success(`Output: ${pc2.cyan(".flexi/")}`);
+    if (options.analyze && result?.analysis) {
+      log2.blank();
+      log2.info("\u{1F4CA} 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"));
+      for (const [file, info] of sorted.slice(0, 15)) {
+        const name = file.length > 35 ? "..." + file.slice(-32) : 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))}`);
+      }
+      log2.blank();
+    }
+  } catch (error) {
+    spinner.fail("Build failed");
+    log2.error(error.message);
+    process.exit(1);
+  }
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+async function runStart() {
+  console.log(MINI_LOGO);
+  log2.blank();
+  log2.info("Starting production server...");
+  log2.blank();
+  const startProdPath = path2.join(__dirname2, "..", "core", "start-prod.ts");
+  const child = spawn(
+    "npx",
+    ["tsx", startProdPath],
+    {
+      stdio: "inherit",
+      cwd: process.cwd(),
+      shell: true,
+      env: { ...process.env, NODE_ENV: "production" }
+    }
+  );
+  child.on("error", (error) => {
+    log2.error(`Failed to start server: ${error.message}`);
+    process.exit(1);
+  });
+  process.on("SIGINT", () => child.kill("SIGINT"));
+  process.on("SIGTERM", () => child.kill("SIGTERM"));
+}
+async function runDoctor() {
+  console.log(MINI_LOGO);
+  log2.blank();
+  log2.info("Checking your project...");
+  log2.blank();
+  const checks = [];
+  const projectRoot = process.cwd();
+  const nodeVersion = process.version;
+  const nodeMajor = parseInt(nodeVersion.slice(1).split(".")[0]);
+  checks.push({
+    name: "Node.js version",
+    status: nodeMajor >= 18 ? "pass" : "fail",
+    message: nodeMajor >= 18 ? `${nodeVersion} \u2713` : `${nodeVersion} (requires 18+)`
+  });
+  const packageJsonPath = path2.join(projectRoot, "package.json");
+  const hasPackageJson = fs2.existsSync(packageJsonPath);
+  checks.push({
+    name: "package.json",
+    status: hasPackageJson ? "pass" : "fail",
+    message: hasPackageJson ? "Found" : "Not found"
+  });
+  const pagesDir = path2.join(projectRoot, "pages");
+  const hasPages = fs2.existsSync(pagesDir);
+  checks.push({
+    name: "pages/ directory",
+    status: hasPages ? "pass" : "warn",
+    message: hasPages ? "Found" : "Not found"
+  });
+  const tsconfigPath = path2.join(projectRoot, "tsconfig.json");
+  const hasTypeScript = fs2.existsSync(tsconfigPath);
+  checks.push({
+    name: "TypeScript",
+    status: "info",
+    message: hasTypeScript ? "Enabled" : "Not configured"
+  });
+  const tailwindPath = path2.join(projectRoot, "tailwind.config.js");
+  const hasTailwind = fs2.existsSync(tailwindPath);
+  checks.push({
+    name: "Tailwind CSS",
+    status: "info",
+    message: hasTailwind ? "Configured" : "Not configured"
+  });
+  let hasErrors = false;
+  let hasWarnings = false;
+  for (const check of checks) {
+    let icon;
+    let color;
+    switch (check.status) {
+      case "pass":
+        icon = "\u2713";
+        color = pc2.green;
+        break;
+      case "fail":
+        icon = "\u2717";
+        color = pc2.red;
+        hasErrors = true;
+        break;
+      case "warn":
+        icon = "\u26A0";
+        color = pc2.yellow;
+        hasWarnings = true;
+        break;
+      default:
+        icon = "\u25CB";
+        color = pc2.cyan;
+    }
+    console.log(`  ${color(icon)} ${check.name}: ${pc2.dim(check.message)}`);
+  }
+  log2.blank();
+  if (hasErrors) {
+    log2.error("Some checks failed. Please fix the issues above.");
+  } else if (hasWarnings) {
+    log2.warn("All critical checks passed with some warnings.");
+  } else {
+    log2.success("All checks passed! Your project is ready.");
+  }
+  log2.blank();
+}
+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`);
+  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")}`);
+  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`);
+  log2.blank();
+}
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  switch (command) {
+    case "create":
+      await createProject(args[1]);
+      break;
+    case "dev":
+      await runDev();
+      break;
+    case "build":
+      const analyzeFlag = args.includes("--analyze") || args.includes("-a");
+      await runBuild({ analyze: analyzeFlag });
+      break;
+    case "start":
+      await runStart();
+      break;
+    case "doctor":
+      await runDoctor();
+      break;
+    case "generate":
+    case "g":
+      await runGenerate(args[1], args[2]);
+      break;
+    case "generate:list":
+    case "g:list":
+      listGenerators();
+      break;
+    case "version":
+    case "-v":
+    case "--version":
+      console.log(`${MINI_LOGO} ${pc2.dim(`v${VERSION}`)}`);
+      break;
+    case "help":
+    case "--help":
+    case "-h":
+      showHelp();
+      break;
+    default:
+      if (command) {
+        log2.error(`Unknown command: ${command}`);
+        log2.blank();
+      }
+      showHelp();
+      process.exit(command ? 1 : 0);
+  }
+}
+main().catch((error) => {
+  log2.error(error.message);
+  process.exit(1);
+});
+//# sourceMappingURL=index.js.map