xertica-ui 2.0.0 → 2.0.2

package/bin/cli.ts

@@ -1,285 +1,472 @@
-#!/usr/bin/env node
-import { Command } from 'commander';
-import prompts from 'prompts';
-import chalk from 'chalk';
-import ora from 'ora';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execa } from 'execa';
-import { colorThemes } from '../contexts/theme-data';
-import { generateTokensCss } from './generate-tokens';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const program = new Command();
-
-program
-    .name('xertica-ui')
-    .description('CLI to initialize Xertica UI projects')
-    .version('1.7.0');
-
-program
-    .command('init')
-    .description('Initialize a new Xertica UI project')
-    .argument('[directory]', 'Directory to initialize in', '.')
-    .action(async (directory) => {
-        const targetDir = path.resolve(process.cwd(), directory);
-        // The templates directory is bundled alongside the CLI
-        const templatesDir = path.resolve(__dirname, '../templates');
-
-        console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
-
-        const response = await prompts([
-            {
-                type: 'multiselect',
-                name: 'pages',
-                message: 'Which pages/templates to include?',
-                choices: [
-                    { title: 'Login Page (+ Forgot / Verify / Reset Password)', value: 'login', selected: true },
-                    { title: 'Home Page', value: 'home', selected: true },
-                    { title: 'Template Page (components showcase)', value: 'template', selected: true },
-                ]
-            },
-            {
-                type: 'select',
-                name: 'theme',
-                message: 'Select the default color theme for your project:',
-                choices: colorThemes.map(t => ({
-                    title: t.name,
-                    description: t.description,
-                    value: t.id
-                })),
-                initial: 0
-            },
-            {
-                type: 'confirm',
-                name: 'install',
-                message: 'Install dependencies automatically?',
-                initial: true
-            }
-        ]);
-
-        if (!response.pages) return;
-
-        const spinner = ora('Initializing project...').start();
-
-        try {
-            // 1. Create Target Directory
-            await fs.ensureDir(targetDir);
-
-            const pages = response.pages || [];
-            const hasLogin = pages.includes('login');
-            const hasHome = pages.includes('home');
-            const hasTemplate = pages.includes('template');
-
-            // 2. Copy root config files from templates/
-            const rootFilesToCopy = [
-                'index.html',
-                'vite.config.ts',
-                'tsconfig.json',
-                'tsconfig.node.json',
-                'postcss.config.js',
-                'vite-env.d.ts',
-                'eslint.config.js',
-                '.env.example',
-                'guidelines',
-            ];
-
-            for (const file of rootFilesToCopy) {
-                const srcPath = path.join(templatesDir, file);
-                const destPath = path.join(targetDir, file);
-                if (await fs.pathExists(srcPath)) {
-                    await fs.copy(srcPath, destPath);
-                }
-            }
-
-            // 3. Copy package.json template and customize it
-            const pkgTemplatePath = path.join(templatesDir, 'package.json');
-            if (await fs.pathExists(pkgTemplatePath)) {
-                const pkgContent = await fs.readJson(pkgTemplatePath);
-                // Use directory name as project name
-                const projectName = path.basename(targetDir) || 'my-xertica-app';
-                pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
-                await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
-            }
-
-            // 4. Ensure src/app directory exists
-            await fs.ensureDir(path.join(targetDir, 'src', 'app'));
-
-            // 5. Copy src/app/App.tsx
-            await fs.copy(
-                path.join(templatesDir, 'src', 'app', 'App.tsx'),
-                path.join(targetDir, 'src', 'app', 'App.tsx')
-            );
-
-            // 6. Copy src/main.tsx
-            await fs.copy(
-                path.join(templatesDir, 'src', 'main.tsx'),
-                path.join(targetDir, 'src', 'main.tsx')
-            );
-
-            // 7. Copy src/app/routes.tsx
-            await fs.copy(
-                path.join(templatesDir, 'src', 'app', 'routes.tsx'),
-                path.join(targetDir, 'src', 'app', 'routes.tsx')
-            );
-
-            // 8. Copy pages and contents
-            await fs.ensureDir(path.join(targetDir, 'src', 'app', 'pages'));
-
-            const optionalPages: Record<string, { file: string, dir?: string, shouldCopy: boolean }> = {
-                login: { file: 'LoginPage.tsx', dir: 'Login', shouldCopy: hasLogin },
-                forgot: { file: 'ForgotPasswordPage.tsx', dir: 'ForgotPassword', shouldCopy: hasLogin },
-                verify: { file: 'VerifyEmailPage.tsx', dir: 'VerifyEmail', shouldCopy: hasLogin },
-                reset: { file: 'ResetPasswordPage.tsx', dir: 'ResetPassword', shouldCopy: hasLogin },
-                home: { file: 'HomePage.tsx', dir: 'Home', shouldCopy: hasHome },
-                template: { file: 'TemplatePage.tsx', dir: 'Template', shouldCopy: hasTemplate },
-            };
-
-            const srcPagesDir = path.join(templatesDir, 'src', 'app', 'pages');
-            for (const key in optionalPages) {
-                const { file, dir, shouldCopy } = optionalPages[key];
-                if (shouldCopy) {
-                    const srcFilePath = path.join(srcPagesDir, file);
-                    if (await fs.pathExists(srcFilePath)) {
-                        await fs.copy(srcFilePath, path.join(targetDir, 'src', 'app', 'pages', file));
-                    }
-                    if (dir) {
-                        const srcDirPath = path.join(srcPagesDir, dir);
-                        if (await fs.pathExists(srcDirPath)) {
-                            await fs.copy(srcDirPath, path.join(targetDir, 'src', 'app', 'pages', dir));
-                        }
-                    }
-                }
-            }
-
-            // 10. If NOT all pages selected, create a minimal App.tsx
-            if (!hasLogin || !hasHome || !hasTemplate) {
-                const imports: string[] = [];
-                const routes: string[] = [];
-
-                if (hasLogin) {
-                    imports.push(`import { LoginPage } from './pages/LoginPage';`);
-                    imports.push(`import { ForgotPasswordPage } from './pages/ForgotPasswordPage';`);
-                    imports.push(`import { VerifyEmailPage } from './pages/VerifyEmailPage';`);
-                    imports.push(`import { ResetPasswordPage } from './pages/ResetPasswordPage';`);
-                    routes.push(`        <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />`);
-                    routes.push(`        <Route path="/forgot-password" element={<ForgotPasswordPage />} />`);
-                    routes.push(`        <Route path="/verify-email" element={<VerifyEmailPage />} />`);
-                    routes.push(`        <Route path="/reset-password" element={<ResetPasswordPage />} />`);
-                }
-                if (hasHome) {
-                    imports.push(`import { HomePage } from './pages/HomePage';`);
-                    routes.push(`        <Route path="/home" element={<HomePage user={user} onLogout={handleLogout} />} />`);
-                }
-                if (hasTemplate) {
-                    imports.push(`import { TemplatePage } from './pages/TemplatePage';`);
-                    routes.push(`        <Route path="/template" element={<TemplatePage user={user} onLogout={handleLogout} />} />`);
-                }
-
-                const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
-import { XerticaProvider } from 'xertica-ui';
-${imports.join('\n')}
-
-export default function App() {
-  return (
-    <XerticaProvider>
-      <Router>
-        <Routes>
-${routes.join('\n')}
-          <Route path="/" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
-          <Route path="*" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
-        </Routes>
-      </Router>
-    </XerticaProvider>
-  );
-}
-`;
-                await fs.writeFile(path.join(targetDir, 'src', 'app', 'App.tsx'), minimalApp);
-            }
-
-            // 11. Generate theme tokens
-            const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
-
-            // Create src/styles/xertica directory
-            const tokensDir = path.join(targetDir, 'src', 'styles', 'xertica');
-            await fs.ensureDir(tokensDir);
-
-            // Copy src/styles/index.css
-            await fs.copy(
-                path.join(templatesDir, 'src', 'styles', 'index.css'),
-                path.join(targetDir, 'src', 'styles', 'index.css')
-            );
-
-            const newTokensCss = generateTokensCss(selectedTheme);
-            await fs.writeFile(path.join(tokensDir, 'tokens.css'), newTokensCss);
-
-            spinner.succeed('Project initialized successfully!');
-
-            if (response.install) {
-                const installSpinner = ora('Installing dependencies...').start();
-                await execa('npm', ['install'], { cwd: targetDir });
-                installSpinner.succeed('Dependencies installed!');
-            }
-
-            console.log(chalk.green('\n✅ Done! Your Xertica UI project is ready.'));
-            console.log(chalk.cyan(`\n  cd ${directory}`));
-            if (!response.install) {
-                console.log(chalk.cyan('  npm install'));
-            }
-            console.log(chalk.cyan('  npm run dev'));
-            console.log();
-            console.log(chalk.gray('  Components are imported from the xertica-ui package.'));
-            console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
-
-        } catch (error) {
-            spinner.fail('Failed to initialize project');
-            console.error(error);
-        }
-    });
-
-program
-    .command('update')
-    .alias('update-theme')
-    .description('Update theme tokens in your project')
-    .action(async () => {
-        const targetDir = process.cwd();
-
-        const themeResponse = await prompts({
-            type: 'select',
-            name: 'theme',
-            message: 'Select the new color theme:',
-            choices: colorThemes.map(t => ({
-                title: t.name,
-                description: t.description,
-                value: t.id
-            })),
-            initial: 0
-        });
-
-        if (!themeResponse.theme) return;
-
-        const spinner = ora('Updating theme...').start();
-
-        try {
-            const tokensPath = path.join(targetDir, 'src', 'styles', 'xertica', 'tokens.css');
-            const selectedTheme = colorThemes.find(t => t.id === themeResponse.theme);
-
-            if (selectedTheme) {
-                await fs.ensureDir(path.dirname(tokensPath));
-                const newTokensCss = generateTokensCss(selectedTheme);
-                await fs.writeFile(tokensPath, newTokensCss);
-                spinner.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
-            } else {
-                spinner.fail('Theme not found.');
-            }
-        } catch (error) {
-            spinner.fail('Failed to update theme');
-            console.error(error);
-        }
-    });
-
-program.parse();
+#!/usr/bin/env node
+import { Command } from 'commander';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execa } from 'execa';
+import { colorThemes } from '../contexts/theme-data';
+import { generateTokensCss } from './generate-tokens';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+    .name('xertica-ui')
+    .description('CLI to initialize Xertica UI projects')
+    .version('2.0.2');
+
+program
+    .command('init')
+    .description('Initialize a new Xertica UI project')
+    .argument('[directory]', 'Directory to initialize in', '.')
+    .action(async (directory) => {
+        const targetDir = path.resolve(process.cwd(), directory);
+        const templatesDir = path.resolve(__dirname, '../templates');
+
+        console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
+
+        const response = await prompts([
+            {
+                type: 'multiselect',
+                name: 'pages',
+                message: 'Which pages/templates to include?',
+                choices: [
+                    { title: 'Login Page (+ Forgot / Verify / Reset Password)', value: 'login', selected: true },
+                    { title: 'Home Page', value: 'home', selected: true },
+                    { title: 'Template Page (components showcase)', value: 'template', selected: true },
+                ]
+            },
+            {
+                type: 'select',
+                name: 'theme',
+                message: 'Select the default color theme for your project:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            },
+            {
+                type: 'confirm',
+                name: 'install',
+                message: 'Install dependencies automatically?',
+                initial: true
+            }
+        ]);
+
+        if (!response.pages) return;
+
+        const spinner = ora('Initializing project...').start();
+
+        try {
+            await fs.ensureDir(targetDir);
+
+            const pages = response.pages || [];
+            const hasLogin = pages.includes('login');
+            const hasHome = pages.includes('home');
+            const hasTemplate = pages.includes('template');
+
+            // 1. Copy root config files
+            const rootFilesToCopy = [
+                'index.html',
+                'vite.config.ts',
+                'tsconfig.json',
+                'tsconfig.node.json',
+                'postcss.config.js',
+                'vite-env.d.ts',
+                'eslint.config.js',
+                '.env.example',
+                'guidelines',
+            ];
+
+            for (const file of rootFilesToCopy) {
+                const srcPath = path.join(templatesDir, file);
+                if (await fs.pathExists(srcPath)) {
+                    await fs.copy(srcPath, path.join(targetDir, file));
+                }
+            }
+
+            // 2. Copy package.json
+            const pkgTemplatePath = path.join(templatesDir, 'package.json');
+            if (await fs.pathExists(pkgTemplatePath)) {
+                const pkgContent = await fs.readJson(pkgTemplatePath);
+                const projectName = path.basename(targetDir) || 'my-xertica-app';
+                pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
+            }
+
+            // 3. Copy src/main.tsx
+            await fs.copy(
+                path.join(templatesDir, 'src', 'main.tsx'),
+                path.join(targetDir, 'src', 'main.tsx')
+            );
+
+            // 4. Copy src/app/App.tsx
+            await fs.ensureDir(path.join(targetDir, 'src', 'app'));
+            await fs.copy(
+                path.join(templatesDir, 'src', 'app', 'App.tsx'),
+                path.join(targetDir, 'src', 'app', 'App.tsx')
+            );
+
+            // 5. Copy src/app/components/AppLayout.tsx (always needed)
+            await fs.ensureDir(path.join(targetDir, 'src', 'app', 'components'));
+            await fs.copy(
+                path.join(templatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+                path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx')
+            );
+
+            // 6. Copy src/shared/ (always needed — auth helpers, navigation config, types)
+            await fs.copy(
+                path.join(templatesDir, 'src', 'shared'),
+                path.join(targetDir, 'src', 'shared')
+            );
+
+            // 7. Copy features based on selections
+            if (hasLogin) {
+                await fs.copy(
+                    path.join(templatesDir, 'src', 'features', 'auth'),
+                    path.join(targetDir, 'src', 'features', 'auth')
+                );
+            }
+            if (hasHome) {
+                await fs.copy(
+                    path.join(templatesDir, 'src', 'features', 'home'),
+                    path.join(targetDir, 'src', 'features', 'home')
+                );
+            }
+            if (hasTemplate) {
+                await fs.copy(
+                    path.join(templatesDir, 'src', 'features', 'template'),
+                    path.join(targetDir, 'src', 'features', 'template')
+                );
+            }
+
+            // 8. Copy pages based on selections
+            await fs.ensureDir(path.join(targetDir, 'src', 'pages'));
+
+            const pagesToCopy: string[] = [];
+            if (hasLogin) pagesToCopy.push('LoginPage.tsx', 'ForgotPasswordPage.tsx', 'VerifyEmailPage.tsx', 'ResetPasswordPage.tsx');
+            if (hasHome) pagesToCopy.push('HomePage.tsx');
+            if (hasTemplate) pagesToCopy.push('TemplatePage.tsx');
+
+            for (const pageFile of pagesToCopy) {
+                const src = path.join(templatesDir, 'src', 'pages', pageFile);
+                if (await fs.pathExists(src)) {
+                    await fs.copy(src, path.join(targetDir, 'src', 'pages', pageFile));
+                }
+            }
+
+            // 9. Generate AuthGuard.tsx based on selected pages
+            const firstProtectedPath = hasHome ? '/home' : hasTemplate ? '/template' : '/login';
+
+            const authGuardImports: string[] = [
+                `import React, { useState, useEffect } from 'react';`,
+                `import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';`,
+            ];
+
+            if (hasLogin) {
+                authGuardImports.push(`import { getStoredUser, storeUser, clearStoredUser } from '../../shared/lib/auth';`);
+                authGuardImports.push(`import type { User } from '../../shared/types/auth';`);
+                authGuardImports.push(`import { LoginPage } from '../../pages/LoginPage';`);
+                authGuardImports.push(`import { ForgotPasswordPage } from '../../pages/ForgotPasswordPage';`);
+                authGuardImports.push(`import { VerifyEmailPage } from '../../pages/VerifyEmailPage';`);
+                authGuardImports.push(`import { ResetPasswordPage } from '../../pages/ResetPasswordPage';`);
+            } else {
+                authGuardImports.push(`import { getStoredUser, storeUser, clearStoredUser } from '../../shared/lib/auth';`);
+                authGuardImports.push(`import type { User } from '../../shared/types/auth';`);
+            }
+            if (hasHome) authGuardImports.push(`import { HomePage } from '../../pages/HomePage';`);
+            if (hasTemplate) authGuardImports.push(`import { TemplatePage } from '../../pages/TemplatePage';`);
+
+            const protectedRoutes: string[] = [];
+            if (hasHome) protectedRoutes.push(`        <Route path="/home" element={<ProtectedRoute user={user}><HomePage user={user} onLogout={handleLogout} /></ProtectedRoute>} />`);
+            if (hasTemplate) protectedRoutes.push(`        <Route path="/template" element={<ProtectedRoute user={user}><TemplatePage user={user} onLogout={handleLogout} /></ProtectedRoute>} />`);
+
+            const authRoutes: string[] = [];
+            if (hasLogin) {
+                authRoutes.push(`        <Route path="/login" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <LoginPage onLogin={handleLogin} />} />`);
+                authRoutes.push(`        <Route path="/forgot-password" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <ForgotPasswordPage />} />`);
+                authRoutes.push(`        <Route path="/verify-email" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <VerifyEmailPage />} />`);
+                authRoutes.push(`        <Route path="/reset-password" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <ResetPasswordPage />} />`);
+            }
+
+            const handleLoginFn = hasLogin ? `
+  const handleLogin = (email: string, password: string): boolean => {
+    if (!email.trim() || !password.trim()) return false;
+    const userData: User = { email };
+    storeUser(userData);
+    setUser(userData);
+    navigate('${firstProtectedPath}');
+    return true;
+  };` : '';
+
+            const authPathsRedirect = hasLogin ? `
+  useEffect(() => {
+    const authPaths = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
+    if (user && authPaths.includes(location.pathname)) {
+      navigate('${firstProtectedPath}', { replace: true });
+    }
+  }, [user, location.pathname, navigate]);` : '';
+
+            const authGuardContent = `${authGuardImports.join('\n')}
+
+function ProtectedRoute({ children, user }: { children: React.ReactNode; user: User | null }) {
+  if (!user) return <Navigate to="${hasLogin ? '/login' : firstProtectedPath}" replace />;
+  return <>{children}</>;
+}
+
+export function AuthGuard() {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();${hasLogin ? `\n  const location = useLocation();` : ''}
+
+  useEffect(() => {
+    setUser(getStoredUser());
+  }, []);
+${authPathsRedirect}${handleLoginFn}
+
+  const handleLogout = () => {
+    clearStoredUser();
+    setUser(null);
+    navigate('${hasLogin ? '/login' : firstProtectedPath}');
+  };
+
+  return (
+    <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
+      <Routes>
+${authRoutes.join('\n')}
+${protectedRoutes.join('\n')}
+        <Route path="/" element={<Navigate to="${hasLogin ? (firstProtectedPath === '/login' ? '/login' : firstProtectedPath) : firstProtectedPath}" replace />} />
+        <Route path="*" element={<Navigate to="${hasLogin ? '/login' : firstProtectedPath}" replace />} />
+      </Routes>
+    </div>
+  );
+}
+`;
+
+            await fs.writeFile(
+                path.join(targetDir, 'src', 'app', 'components', 'AuthGuard.tsx'),
+                authGuardContent
+            );
+
+            // 10. Generate theme tokens
+            const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
+            const tokensDir = path.join(targetDir, 'src', 'styles', 'xertica');
+            await fs.ensureDir(tokensDir);
+            await fs.copy(
+                path.join(templatesDir, 'src', 'styles', 'index.css'),
+                path.join(targetDir, 'src', 'styles', 'index.css')
+            );
+            await fs.writeFile(path.join(tokensDir, 'tokens.css'), generateTokensCss(selectedTheme));
+
+            spinner.succeed('Project initialized successfully!');
+
+            if (response.install) {
+                const installSpinner = ora('Installing dependencies...').start();
+                await execa('npm', ['install'], { cwd: targetDir });
+                installSpinner.succeed('Dependencies installed!');
+            }
+
+            console.log(chalk.green('\n✅ Done! Your Xertica UI project is ready.'));
+            console.log(chalk.cyan(`\n  cd ${directory}`));
+            if (!response.install) {
+                console.log(chalk.cyan('  npm install'));
+            }
+            console.log(chalk.cyan('  npm run dev'));
+            console.log();
+            console.log(chalk.gray('  Components are imported from the xertica-ui package.'));
+            console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
+
+        } catch (error) {
+            spinner.fail('Failed to initialize project');
+            console.error(error);
+        }
+    });
+
+program
+    .command('update')
+    .alias('update-theme')
+    .description('Update theme or project files to the latest version')
+    .action(async () => {
+        const targetDir = process.cwd();
+
+        const { updateType } = await prompts({
+            type: 'select',
+            name: 'updateType',
+            message: 'What do you want to update?',
+            choices: [
+                { title: 'Theme only', description: 'Change the color tokens (tokens.css)', value: 'theme' },
+                { title: 'Project files', description: 'Update app shell, shared, features and pages to a specific version', value: 'project' },
+            ],
+        });
+
+        if (!updateType) return;
+
+        // ── Theme update ─────────────────────────────────────────────────────────
+        if (updateType === 'theme') {
+            const { theme } = await prompts({
+                type: 'select',
+                name: 'theme',
+                message: 'Select the new color theme:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            });
+
+            if (!theme) return;
+
+            const spinner = ora('Updating theme...').start();
+            try {
+                const tokensPath = path.join(targetDir, 'src', 'styles', 'xertica', 'tokens.css');
+                const selectedTheme = colorThemes.find(t => t.id === theme);
+                if (selectedTheme) {
+                    await fs.ensureDir(path.dirname(tokensPath));
+                    await fs.writeFile(tokensPath, generateTokensCss(selectedTheme));
+                    spinner.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+                } else {
+                    spinner.fail('Theme not found.');
+                }
+            } catch (error) {
+                spinner.fail('Failed to update theme');
+                console.error(error);
+            }
+            return;
+        }
+
+        // ── Project files update ──────────────────────────────────────────────────
+        const { versionType } = await prompts({
+            type: 'select',
+            name: 'versionType',
+            message: 'Which version do you want to update to?',
+            choices: [
+                { title: 'Latest', description: 'Install the latest published version', value: 'latest' },
+                { title: 'Specific version', description: 'Enter a version number (e.g. 2.0.2)', value: 'specific' },
+            ],
+        });
+
+        if (!versionType) return;
+
+        let targetVersion = 'latest';
+        if (versionType === 'specific') {
+            const { version } = await prompts({
+                type: 'text',
+                name: 'version',
+                message: 'Enter the version (e.g. 2.0.2):',
+                validate: v => /^\d+\.\d+\.\d+/.test(v.trim()) ? true : 'Enter a valid semver (e.g. 2.0.2)',
+            });
+            if (!version) return;
+            targetVersion = version.trim();
+        }
+
+        const { filesToUpdate } = await prompts({
+            type: 'multiselect',
+            name: 'filesToUpdate',
+            message: 'Select which parts of the project to update:',
+            choices: [
+                { title: 'App shell (src/app/)', description: 'App.tsx, AppLayout.tsx', value: 'app', selected: true },
+                { title: 'Shared utilities (src/shared/)', description: 'auth.ts, navigation.ts, types', value: 'shared', selected: true },
+                { title: 'Features (src/features/)', description: 'auth, home, template UI components', value: 'features', selected: true },
+                { title: 'Pages (src/pages/)', description: 'Thin page wrapper components', value: 'pages', selected: true },
+                { title: 'Root config files', description: 'vite.config.ts, tsconfig.json, etc.', value: 'config', selected: false },
+            ],
+        });
+
+        if (!filesToUpdate || filesToUpdate.length === 0) return;
+
+        const { confirmed } = await prompts({
+            type: 'confirm',
+            name: 'confirmed',
+            message: chalk.yellow(`⚠️  This will overwrite the selected files. Local changes will be lost. Continue?`),
+            initial: false,
+        });
+
+        if (!confirmed) {
+            console.log(chalk.gray('Update cancelled.'));
+            return;
+        }
+
+        const spinner = ora(`Installing xertica-ui@${targetVersion}...`).start();
+
+        try {
+            // Install the target version in the consumer project
+            await execa('npm', ['install', `xertica-ui@${targetVersion}`], { cwd: targetDir });
+            spinner.text = 'Copying updated files...';
+
+            // Templates now come from the freshly installed version
+            const updatedTemplatesDir = path.join(targetDir, 'node_modules', 'xertica-ui', 'templates');
+
+            if (filesToUpdate.includes('app')) {
+                await fs.copy(
+                    path.join(updatedTemplatesDir, 'src', 'app', 'App.tsx'),
+                    path.join(targetDir, 'src', 'app', 'App.tsx'),
+                    { overwrite: true }
+                );
+                await fs.copy(
+                    path.join(updatedTemplatesDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+                    path.join(targetDir, 'src', 'app', 'components', 'AppLayout.tsx'),
+                    { overwrite: true }
+                );
+            }
+
+            if (filesToUpdate.includes('shared')) {
+                await fs.copy(
+                    path.join(updatedTemplatesDir, 'src', 'shared'),
+                    path.join(targetDir, 'src', 'shared'),
+                    { overwrite: true }
+                );
+            }
+
+            if (filesToUpdate.includes('features')) {
+                // Only update feature directories that already exist in the project
+                for (const feature of ['auth', 'home', 'template']) {
+                    const destFeature = path.join(targetDir, 'src', 'features', feature);
+                    const srcFeature = path.join(updatedTemplatesDir, 'src', 'features', feature);
+                    if (await fs.pathExists(destFeature) && await fs.pathExists(srcFeature)) {
+                        await fs.copy(srcFeature, destFeature, { overwrite: true });
+                    }
+                }
+            }
+
+            if (filesToUpdate.includes('pages')) {
+                const pagesDir = path.join(targetDir, 'src', 'pages');
+                const srcPagesDir = path.join(updatedTemplatesDir, 'src', 'pages');
+                if (await fs.pathExists(pagesDir) && await fs.pathExists(srcPagesDir)) {
+                    // Only overwrite pages that already exist in the project
+                    const existingPages = await fs.readdir(pagesDir);
+                    for (const pageFile of existingPages) {
+                        const src = path.join(srcPagesDir, pageFile);
+                        if (await fs.pathExists(src)) {
+                            await fs.copy(src, path.join(pagesDir, pageFile), { overwrite: true });
+                        }
+                    }
+                }
+            }
+
+            if (filesToUpdate.includes('config')) {
+                const configFiles = ['vite.config.ts', 'tsconfig.json', 'tsconfig.node.json', 'postcss.config.js'];
+                for (const file of configFiles) {
+                    const src = path.join(updatedTemplatesDir, '..', file);
+                    if (await fs.pathExists(src)) {
+                        await fs.copy(src, path.join(targetDir, file), { overwrite: true });
+                    }
+                }
+            }
+
+            spinner.succeed(`Project updated to xertica-ui@${targetVersion} successfully!`);
+            console.log(chalk.gray('\n  Run npm run dev to start the development server.'));
+
+        } catch (error) {
+            spinner.fail('Failed to update project');
+            console.error(error);
+        }
+    });
+
+program.parse();