@flexireact/core 1.0.2 → 2.0.0

package/cli/index.js

@@ -1,992 +0,0 @@
-#!/usr/bin/env node
-/**
- * FlexiReact CLI v2.1
- * Professional CLI with TypeScript, colors, prompts, and progress indicators
- */
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath, pathToFileURL } from 'url';
-import { spawn } from 'child_process';
-import pc from 'picocolors';
-import prompts from 'prompts';
-import ora from 'ora';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const VERSION = '2.1.0';
-// ============================================================================
-// ASCII Logo & Branding
-// ============================================================================
-const LOGO = `
-${pc.cyan('╔═══════════════════════════════════════════════════════════╗')}
-${pc.cyan('║')}                                                             ${pc.cyan('║')}
-${pc.cyan('║')}   ${pc.bold(pc.magenta('⚡'))} ${pc.bold(pc.white('F L E X I R E A C T'))}                                  ${pc.cyan('║')}
-${pc.cyan('║')}                                                             ${pc.cyan('║')}
-${pc.cyan('║')}   ${pc.dim('The Modern React Framework')}                              ${pc.cyan('║')}
-${pc.cyan('║')}   ${pc.dim('TypeScript • Tailwind • SSR • Islands')}                   ${pc.cyan('║')}
-${pc.cyan('║')}                                                             ${pc.cyan('║')}
-${pc.cyan('╚═══════════════════════════════════════════════════════════╝')}
-`;
-const MINI_LOGO = `${pc.magenta('⚡')} ${pc.bold('FlexiReact')}`;
-// ============================================================================
-// Logger Utilities
-// ============================================================================
-const log = {
-    info: (msg) => console.log(`${pc.cyan('ℹ')} ${msg}`),
-    success: (msg) => console.log(`${pc.green('✓')} ${msg}`),
-    warn: (msg) => console.log(`${pc.yellow('⚠')} ${pc.yellow(msg)}`),
-    error: (msg) => console.log(`${pc.red('✗')} ${pc.red(msg)}`),
-    step: (num, total, msg) => console.log(`${pc.dim(`[${num}/${total}]`)} ${msg}`),
-    blank: () => console.log(''),
-    divider: () => console.log(pc.dim('─'.repeat(60))),
-};
-// ============================================================================
-// Helper Functions
-// ============================================================================
-function copyDirectory(src, dest) {
-    if (!fs.existsSync(dest)) {
-        fs.mkdirSync(dest, { recursive: true });
-    }
-    const entries = fs.readdirSync(src, { withFileTypes: true });
-    for (const entry of entries) {
-        const srcPath = path.join(src, entry.name);
-        const destPath = path.join(dest, entry.name);
-        if (entry.isDirectory()) {
-            copyDirectory(srcPath, destPath);
-        }
-        else {
-            fs.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);
-    log.blank();
-    // Get project name
-    let name = projectName;
-    if (!name) {
-        const response = await prompts({
-            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 = path.resolve(process.cwd(), name);
-    // Check if directory exists
-    if (fs.existsSync(projectPath)) {
-        log.error(`Directory "${name}" already exists.`);
-        process.exit(1);
-    }
-    // Get options
-    const options = await prompts([
-        {
-            type: 'select',
-            name: 'template',
-            message: 'Select a template:',
-            choices: [
-                { title: '🚀 Default (Tailwind + shadcn/ui)', value: 'default' },
-                { title: '💚 FlexiUI (Landing page + @flexireact/flexi-ui)', value: 'flexi-ui' },
-                { title: '📦 Minimal (Clean slate)', value: 'minimal' }
-            ],
-            initial: 0
-        },
-        {
-            type: 'toggle',
-            name: 'typescript',
-            message: 'Use TypeScript?',
-            initial: true,
-            active: 'Yes',
-            inactive: 'No'
-        }
-    ]);
-    if (options.template === undefined)
-        process.exit(1);
-    log.blank();
-    log.divider();
-    log.blank();
-    const totalSteps = options.template === 'default' ? 6 : (options.template === 'flexi-ui' ? 5 : 4);
-    let currentStep = 0;
-    // Step 1: Create directory
-    currentStep++;
-    log.step(currentStep, totalSteps, 'Creating project directory...');
-    fs.mkdirSync(projectPath, { recursive: true });
-    log.success(`Created ${pc.cyan(name)}/`);
-    // Step 2: Copy template
-    currentStep++;
-    log.step(currentStep, totalSteps, 'Setting up project structure...');
-    const templateName = options.template;
-    const templatePath = path.resolve(__dirname, '..', 'templates', templateName);
-    if (fs.existsSync(templatePath)) {
-        copyDirectory(templatePath, projectPath);
-        log.success('Project structure created');
-    }
-    else {
-        // Create basic structure if template doesn't exist
-        await createDefaultTemplate(projectPath, name, options.typescript);
-        log.success('Project structure created');
-    }
-    // Step 3: Update package.json
-    currentStep++;
-    log.step(currentStep, totalSteps, 'Configuring project...');
-    const packageJsonPath = path.join(projectPath, 'package.json');
-    if (fs.existsSync(packageJsonPath)) {
-        const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-        pkg.name = name;
-        fs.writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2));
-    }
-    log.success('Project configured');
-    // Step 4: Install dependencies
-    currentStep++;
-    log.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');
-        log.warn('Run "npm install" manually in the project directory');
-    }
-    // Step 5: Link FlexiReact (for development)
-    currentStep++;
-    log.step(currentStep, totalSteps, 'Linking FlexiReact...');
-    const linkSpinner = ora({ text: 'Linking framework...', color: 'cyan' }).start();
-    try {
-        const frameworkRoot = path.resolve(__dirname, '..');
-        await runCommand(`npm link "${frameworkRoot}"`, projectPath);
-        linkSpinner.succeed('FlexiReact linked');
-    }
-    catch {
-        linkSpinner.fail('Failed to link FlexiReact');
-        log.warn('Run "npm link flexireact" manually');
-    }
-    // Step 6: Initialize shadcn/ui (if default template)
-    if (options.template === 'default') {
-        currentStep++;
-        log.step(currentStep, totalSteps, 'Setting up shadcn/ui components...');
-        log.success('shadcn/ui configured');
-    }
-    // Success message
-    log.blank();
-    log.divider();
-    log.blank();
-    console.log(`  ${pc.green('✨')} ${pc.bold('Success!')} Your FlexiReact app is ready.`);
-    log.blank();
-    console.log(`  ${pc.dim('$')} ${pc.cyan(`cd ${name}`)}`);
-    console.log(`  ${pc.dim('$')} ${pc.cyan('npm run dev')}`);
-    log.blank();
-    console.log(`  ${pc.dim('Then open')} ${pc.cyan('http://localhost:3000')} ${pc.dim('in your browser.')}`);
-    log.blank();
-    console.log(`  ${pc.dim('Documentation:')} ${pc.cyan('https://github.com/flexireact/flexireact')}`);
-    log.blank();
-}
-async function createDefaultTemplate(projectPath, name, useTypeScript) {
-    const ext = useTypeScript ? 'tsx' : 'jsx';
-    const configExt = useTypeScript ? 'ts' : 'js';
-    // Create directories
-    const dirs = [
-        'app/components',
-        'app/styles',
-        'pages/api',
-        'public',
-    ];
-    for (const dir of dirs) {
-        fs.mkdirSync(path.join(projectPath, dir), { recursive: true });
-    }
-    // package.json
-    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'
-            } : {})
-        }
-    };
-    fs.writeFileSync(path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2));
-    // TypeScript config
-    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']
-        };
-        fs.writeFileSync(path.join(projectPath, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
-    }
-    // Tailwind config
-    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: [],
-};
-`;
-    fs.writeFileSync(path.join(projectPath, 'tailwind.config.js'), tailwindConfig);
-    // PostCSS config
-    const postcssConfig = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-`;
-    fs.writeFileSync(path.join(projectPath, 'postcss.config.js'), postcssConfig);
-    // Global CSS
-    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;
-  }
-}
-`;
-    fs.writeFileSync(path.join(projectPath, 'app/styles/globals.css'), globalsCss);
-    // FlexiReact config
-    const flexiConfig = `export default {
-  server: {
-    port: 3000,
-    host: 'localhost'
-  },
-  islands: {
-    enabled: true
-  },
-  rsc: {
-    enabled: true
-  }
-};
-`;
-    fs.writeFileSync(path.join(projectPath, `flexireact.config.${configExt}`), flexiConfig);
-    // Create components
-    await createComponents(projectPath, ext);
-    // Create pages
-    await createPages(projectPath, ext);
-}
-async function createComponents(projectPath, ext) {
-    // Button component
-    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}
-    />
-  );
-}
-`;
-    fs.writeFileSync(path.join(projectPath, `app/components/Button.${ext}`), buttonComponent);
-    // Card component
-    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>;
-}
-`;
-    fs.writeFileSync(path.join(projectPath, `app/components/Card.${ext}`), cardComponent);
-    // Navbar component
-    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">⚡</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>
-  );
-}
-`;
-    fs.writeFileSync(path.join(projectPath, `app/components/Navbar.${ext}`), navbarComponent);
-}
-async function createPages(projectPath, ext) {
-    // Home page with INLINE STYLES (works without Tailwind build)
-    const homePage = `import React from 'react';
-
-export const title = 'FlexiReact - The Modern React Framework';
-
-const features = [
-  { icon: '⚡', title: 'Lightning Fast', desc: 'Powered by esbuild for instant builds.' },
-  { icon: '📘', title: 'TypeScript', desc: 'First-class TypeScript support.' },
-  { icon: '🏝️', title: 'Islands', desc: 'Partial hydration for minimal JS.' },
-  { icon: '📁', title: 'File Routing', desc: 'Create a file, get a route.' },
-  { icon: '🔌', title: 'API Routes', desc: 'Build your API alongside frontend.' },
-  { icon: '🚀', 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}>🚀 v2.1 — 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 →</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 ❤️ 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)',
-  },
-};
-`;
-    // Always use .jsx for pages (simpler, works without TS config)
-    fs.writeFileSync(path.join(projectPath, 'pages/index.jsx'), homePage);
-    // API route
-    const apiRoute = `/**
- * API Route: /api/hello
- */
-
-export function get(req${ext === 'tsx' ? ': any' : ''}, res${ext === 'tsx' ? ': any' : ''}) {
-  res.json({
-    message: 'Hello from FlexiReact API! 🚀',
-    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()
-  });
-}
-`;
-    fs.writeFileSync(path.join(projectPath, `pages/api/hello.${ext === 'tsx' ? 'ts' : 'js'}`), apiRoute);
-    // .gitkeep for public
-    fs.writeFileSync(path.join(projectPath, 'public/.gitkeep'), '');
-}
-// ============================================================================
-// Dev Command
-// ============================================================================
-async function runDev() {
-    // Logo is shown by the server
-    const loaderPath = path.join(__dirname, '..', 'core', 'loader.js');
-    const serverPath = path.join(__dirname, '..', 'core', 'server', 'index.js');
-    const loaderUrl = pathToFileURL(loaderPath).href;
-    const child = spawn(process.execPath, [
-        '--import',
-        `data:text/javascript,import { register } from 'node:module'; register('${loaderUrl}', import.meta.url);`,
-        '-e',
-        `import('${pathToFileURL(serverPath).href}').then(m => m.createServer({ mode: 'development' }))`
-    ], {
-        stdio: 'inherit',
-        cwd: process.cwd(),
-        env: { ...process.env, NODE_ENV: 'development', FORCE_COLOR: '1' }
-    });
-    child.on('error', (error) => {
-        log.error(`Failed to start dev server: ${error.message}`);
-        process.exit(1);
-    });
-    process.on('SIGINT', () => child.kill('SIGINT'));
-    process.on('SIGTERM', () => child.kill('SIGTERM'));
-}
-// ============================================================================
-// Build Command
-// ============================================================================
-async function runBuild() {
-    console.log(MINI_LOGO);
-    log.blank();
-    log.info('Building for production...');
-    log.blank();
-    const spinner = ora({ text: 'Compiling...', color: 'cyan' }).start();
-    try {
-        // Dynamic import of build module
-        const buildPath = path.join(__dirname, '..', 'core', 'build', 'index.js');
-        const configPath = path.join(__dirname, '..', '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);
-        await buildModule.build({
-            projectRoot,
-            config,
-            mode: 'production'
-        });
-        spinner.succeed('Build complete!');
-        log.blank();
-        log.success(`Output: ${pc.cyan('.flexi/')}`);
-    }
-    catch (error) {
-        spinner.fail('Build failed');
-        log.error(error.message);
-        process.exit(1);
-    }
-}
-// ============================================================================
-// Start Command
-// ============================================================================
-async function runStart() {
-    console.log(MINI_LOGO);
-    log.blank();
-    log.info('Starting production server...');
-    log.blank();
-    const loaderPath = path.join(__dirname, '..', 'core', 'loader.js');
-    const serverPath = path.join(__dirname, '..', 'core', 'server', 'index.js');
-    const loaderUrl = pathToFileURL(loaderPath).href;
-    const child = spawn(process.execPath, [
-        '--import',
-        `data:text/javascript,import { register } from 'node:module'; register('${loaderUrl}', import.meta.url);`,
-        '-e',
-        `import('${pathToFileURL(serverPath).href}').then(m => m.createServer({ mode: 'production' }))`
-    ], {
-        stdio: 'inherit',
-        cwd: process.cwd(),
-        env: { ...process.env, NODE_ENV: 'production' }
-    });
-    child.on('error', (error) => {
-        log.error(`Failed to start server: ${error.message}`);
-        process.exit(1);
-    });
-    process.on('SIGINT', () => child.kill('SIGINT'));
-    process.on('SIGTERM', () => child.kill('SIGTERM'));
-}
-// ============================================================================
-// Doctor Command
-// ============================================================================
-async function runDoctor() {
-    console.log(MINI_LOGO);
-    log.blank();
-    log.info('Checking your project...');
-    log.blank();
-    const checks = [];
-    const projectRoot = process.cwd();
-    // Node.js version
-    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} ✓` : `${nodeVersion} (requires 18+)`
-    });
-    // package.json
-    const packageJsonPath = path.join(projectRoot, 'package.json');
-    const hasPackageJson = fs.existsSync(packageJsonPath);
-    checks.push({
-        name: 'package.json',
-        status: hasPackageJson ? 'pass' : 'fail',
-        message: hasPackageJson ? 'Found' : 'Not found'
-    });
-    // pages directory
-    const pagesDir = path.join(projectRoot, 'pages');
-    const hasPages = fs.existsSync(pagesDir);
-    checks.push({
-        name: 'pages/ directory',
-        status: hasPages ? 'pass' : 'warn',
-        message: hasPages ? 'Found' : 'Not found'
-    });
-    // TypeScript
-    const tsconfigPath = path.join(projectRoot, 'tsconfig.json');
-    const hasTypeScript = fs.existsSync(tsconfigPath);
-    checks.push({
-        name: 'TypeScript',
-        status: 'info',
-        message: hasTypeScript ? 'Enabled' : 'Not configured'
-    });
-    // Tailwind
-    const tailwindPath = path.join(projectRoot, 'tailwind.config.js');
-    const hasTailwind = fs.existsSync(tailwindPath);
-    checks.push({
-        name: 'Tailwind CSS',
-        status: 'info',
-        message: hasTailwind ? 'Configured' : 'Not configured'
-    });
-    // Print results
-    let hasErrors = false;
-    let hasWarnings = false;
-    for (const check of checks) {
-        let icon;
-        let color;
-        switch (check.status) {
-            case 'pass':
-                icon = '✓';
-                color = pc.green;
-                break;
-            case 'fail':
-                icon = '✗';
-                color = pc.red;
-                hasErrors = true;
-                break;
-            case 'warn':
-                icon = '⚠';
-                color = pc.yellow;
-                hasWarnings = true;
-                break;
-            default:
-                icon = '○';
-                color = pc.cyan;
-        }
-        console.log(`  ${color(icon)} ${check.name}: ${pc.dim(check.message)}`);
-    }
-    log.blank();
-    if (hasErrors) {
-        log.error('Some checks failed. Please fix the issues above.');
-    }
-    else if (hasWarnings) {
-        log.warn('All critical checks passed with some warnings.');
-    }
-    else {
-        log.success('All checks passed! Your project is ready.');
-    }
-    log.blank();
-}
-// ============================================================================
-// Help Command
-// ============================================================================
-function showHelp() {
-    console.log(LOGO);
-    console.log(`  ${pc.bold('Usage:')}`);
-    console.log(`    ${pc.cyan('flexi')} ${pc.dim('<command>')} ${pc.dim('[options]')}`);
-    log.blank();
-    console.log(`  ${pc.bold('Commands:')}`);
-    console.log(`    ${pc.cyan('create')} ${pc.dim('<name>')}    Create a new FlexiReact project`);
-    console.log(`    ${pc.cyan('dev')}               Start development server`);
-    console.log(`    ${pc.cyan('build')}             Build for production`);
-    console.log(`    ${pc.cyan('start')}             Start production server`);
-    console.log(`    ${pc.cyan('doctor')}            Check project health`);
-    console.log(`    ${pc.cyan('help')}              Show this help message`);
-    log.blank();
-    console.log(`  ${pc.bold('Examples:')}`);
-    console.log(`    ${pc.dim('$')} flexi create my-app`);
-    console.log(`    ${pc.dim('$')} flexi dev`);
-    console.log(`    ${pc.dim('$')} flexi build && flexi start`);
-    log.blank();
-}
-// ============================================================================
-// Main Entry Point
-// ============================================================================
-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':
-            await runBuild();
-            break;
-        case 'start':
-            await runStart();
-            break;
-        case 'doctor':
-            await runDoctor();
-            break;
-        case 'version':
-        case '-v':
-        case '--version':
-            console.log(`${MINI_LOGO} ${pc.dim(`v${VERSION}`)}`);
-            break;
-        case 'help':
-        case '--help':
-        case '-h':
-            showHelp();
-            break;
-        default:
-            if (command) {
-                log.error(`Unknown command: ${command}`);
-                log.blank();
-            }
-            showHelp();
-            process.exit(command ? 1 : 0);
-    }
-}
-main().catch((error) => {
-    log.error(error.message);
-    process.exit(1);
-});