xertica-ui 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -7,6 +7,30 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.0.3] — 2026-05-11
+
+### Added
+
+- **CLI `update` — atualização de projeto** — novo modo no comando `update` permite atualizar os arquivos do projeto (app shell, shared, features, pages) para qualquer versão publicada do `xertica-ui`, com seleção granular de quais partes atualizar e confirmação antes de sobrescrever.
+
+---
+
+## [2.0.2] — 2026-05-11
+
+### Fixed
+
+- **CLI rewritten for FSD/FDA structure** — `npx xertica-ui@latest init` agora copia corretamente a estrutura Feature-Sliced Design:
+  - Removida cópia de `src/app/routes.tsx` (arquivo não existe mais após refatoração)
+  - Adicionada cópia de `src/app/components/AppLayout.tsx`
+  - Adicionada cópia completa de `src/shared/` (`auth.ts`, `navigation.ts`, `types/auth.ts`)
+  - Adicionada cópia de `src/features/auth|home|template` conforme seleções do usuário
+  - Cópia de pages corrigida de `src/app/pages/` → `src/pages/`
+  - `AuthGuard.tsx` agora gerado dinamicamente com imports e rotas apenas das páginas selecionadas
+- **`generateDemoResponse` exportado via `xertica-ui/assistant`** — estava ausente do barrel causando `SyntaxError: does not provide an export named 'generateDemoResponse'`
+- **Build corrigido: UMD → CJS** — múltiplos entry points não são suportados com formato UMD no Vite; migrado para CJS (todos os `*.umd.js` → `*.cjs.js` no `package.json` exports)
+
+---
+
 ## [2.0.0] — 2026-05-11
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/npm/v/xertica-ui)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.0.3-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

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.3');
+
+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();

package/dist/cli.js

@@ -528,7 +528,7 @@ var generateTokensCss = (theme) => {
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
-program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("1.7.0");
+program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.0.3");
 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");
@@ -583,9 +583,8 @@ program.command("init").description("Initialize a new Xertica UI project").argum
     ];
     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);
+        await fs.copy(srcPath, path.join(targetDir, file));
       }
     }
     const pkgTemplatePath = path.join(templatesDir, "package.json");
@@ -595,86 +594,136 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
       await fs.writeJson(path.join(targetDir, "package.json"), pkgContent, { spaces: 2 });
     }
+    await fs.copy(
+      path.join(templatesDir, "src", "main.tsx"),
+      path.join(targetDir, "src", "main.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")
     );
+    await fs.ensureDir(path.join(targetDir, "src", "app", "components"));
     await fs.copy(
-      path.join(templatesDir, "src", "main.tsx"),
-      path.join(targetDir, "src", "main.tsx")
+      path.join(templatesDir, "src", "app", "components", "AppLayout.tsx"),
+      path.join(targetDir, "src", "app", "components", "AppLayout.tsx")
     );
     await fs.copy(
-      path.join(templatesDir, "src", "app", "routes.tsx"),
-      path.join(targetDir, "src", "app", "routes.tsx")
+      path.join(templatesDir, "src", "shared"),
+      path.join(targetDir, "src", "shared")
     );
-    await fs.ensureDir(path.join(targetDir, "src", "app", "pages"));
-    const optionalPages = {
-      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));
-          }
-        }
-      }
+    if (hasLogin) {
+      await fs.copy(
+        path.join(templatesDir, "src", "features", "auth"),
+        path.join(targetDir, "src", "features", "auth")
+      );
     }
-    if (!hasLogin || !hasHome || !hasTemplate) {
-      const imports = [];
-      const routes = [];
-      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} />} />`);
+    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")
+      );
+    }
+    await fs.ensureDir(path.join(targetDir, "src", "pages"));
+    const pagesToCopy = [];
+    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));
       }
-      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")}
+    }
+    const firstProtectedPath = hasHome ? "/home" : hasTemplate ? "/template" : "/login";
+    const authGuardImports = [
+      `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 = [];
+    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 = [];
+    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 ? `
+  const location = useLocation();` : ""}
+
+  useEffect(() => {
+    setUser(getStoredUser());
+  }, []);
+${authPathsRedirect}${handleLoginFn}
+
+  const handleLogout = () => {
+    clearStoredUser();
+    setUser(null);
+    navigate('${hasLogin ? "/login" : firstProtectedPath}');
+  };
 
-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>
+    <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", "App.tsx"), minimalApp);
-    }
+    await fs.writeFile(
+      path.join(targetDir, "src", "app", "components", "AuthGuard.tsx"),
+      authGuardContent
+    );
     const selectedTheme = colorThemes.find((t) => t.id === response.theme) || colorThemes[0];
     const tokensDir = path.join(targetDir, "src", "styles", "xertica");
     await fs.ensureDir(tokensDir);
@@ -682,8 +731,7 @@ ${routes.join("\n")}
       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);
+    await fs.writeFile(path.join(tokensDir, "tokens.css"), generateTokensCss(selectedTheme));
     spinner.succeed("Project initialized successfully!");
     if (response.install) {
       const installSpinner = ora("Installing dependencies...").start();
@@ -705,34 +753,151 @@ ${routes.join("\n")}
     console.error(error);
   }
 });
-program.command("update").alias("update-theme").description("Update theme tokens in your project").action(async () => {
+program.command("update").alias("update-theme").description("Update theme or project files to the latest version").action(async () => {
   const targetDir = process.cwd();
-  const themeResponse = await prompts({
+  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;
+  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 spinner2 = 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));
+        spinner2.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+      } else {
+        spinner2.fail("Theme not found.");
+      }
+    } catch (error) {
+      spinner2.fail("Failed to update theme");
+      console.error(error);
+    }
+    return;
+  }
+  const { versionType } = 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
+    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 (!themeResponse.theme) return;
-  const spinner = ora("Updating theme...").start();
+  if (!filesToUpdate || filesToUpdate.length === 0) return;
+  const { confirmed } = await prompts({
+    type: "confirm",
+    name: "confirmed",
+    message: chalk.yellow(`\u26A0\uFE0F  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 {
-    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.");
+    await execa("npm", ["install", `xertica-ui@${targetVersion}`], { cwd: targetDir });
+    spinner.text = "Copying updated files...";
+    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")) {
+      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)) {
+        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 theme");
+    spinner.fail("Failed to update project");
     console.error(error);
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/templates/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "my-xertica-app",
-  "version": "2.0.1",
+  "name": "xertica-ui-template",
+  "version": "2.0.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.0.1"
+    "xertica-ui": "^2.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",