slicejs-cli 3.4.0 → 3.4.1

package/commands/getComponent/getComponent.js

@@ -2,87 +2,108 @@
 
 import fs from "fs-extra";
 import path from "path";
-import { fileURLToPath } from "url";
 import inquirer from "inquirer";
 import validations from "../Validations.js";
 import Print from "../Print.js";
-import { getConfigPath, getComponentsJsPath, getPath } from "../utils/PathHelper.js";
+import { getComponentsJsPath, getPath } from "../utils/PathHelper.js";
+import { loadConfig as sharedLoadConfig } from "../utils/loadConfig.js";
 import ora from "ora";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// Base URL del repositorio de documentación de Slice.js
+// Base URL of the Slice.js documentation repository
 const DOCS_REPO_BASE_URL = 'https://raw.githubusercontent.com/VKneider/slice.js_visual_library/master/src/Components';
 const COMPONENTS_REGISTRY_URL = 'https://raw.githubusercontent.com/VKneider/slice.js_visual_library/master/src/Components/components.js';
 
 /**
- * Carga la configuración desde sliceConfig.json
- * @returns {object} - Objeto de configuración
+ * Loads configuration from sliceConfig.json
+ * @returns {object} - Configuration object
  */
-const loadConfig = () => {
-  try {
-    const configPath = getConfigPath(import.meta.url);
-    if (!fs.existsSync(configPath)) {
-      throw new Error('sliceConfig.json not found in src folder');
+const loadConfig = () => sharedLoadConfig(import.meta.url);
+
+const fetchWithRetry = async (url, retries = 3, baseDelay = 500) => {
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      return await response.text();
+    } catch (e) {
+      if (attempt === retries) throw e;
+      const delay = baseDelay * Math.pow(2, attempt);
+      await new Promise(r => setTimeout(r, delay));
     }
-    const rawData = fs.readFileSync(configPath, 'utf-8');
-    return JSON.parse(rawData);
-  } catch (error) {
-    console.error(`Error loading configuration: ${error.message}`);
-    return null;
   }
 };
 
+const runConcurrent = async (items, worker, concurrency = 3) => {
+  let index = 0;
+  const runners = Array(Math.min(concurrency, items.length)).fill(0).map(async () => {
+    while (true) {
+      const i = index++;
+      if (i >= items.length) break;
+      await worker(items[i]);
+    }
+  });
+  await Promise.all(runners);
+};
+
 class ComponentRegistry {
   constructor() {
     this.componentsRegistry = null;
-    this.config = loadConfig();
+    this.config = null;
+    this._configPromise = null;
   }
 
-  async loadRegistry() {
-  Print.info('Loading component registry from official repository...');
-  
-  try {
-    const response = await fetch(COMPONENTS_REGISTRY_URL);
-    
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  async _ensureConfig() {
+    if (!this.config && !this._configPromise) {
+      this._configPromise = loadConfig();
     }
-
-    const content = await response.text();
-    
-    // Parse the components.js file content
-    const match = content.match(/const components = ({[\s\S]*?});/);
-    if (!match) {
-      throw new Error('Invalid components.js format from repository');
+    if (this._configPromise) {
+      this.config = await this._configPromise;
     }
+  }
 
-    const allComponents = eval('(' + match[1] + ')');
-    
-    // ✅ NUEVO: FILTRAR solo componentes Visual y Service
-    this.componentsRegistry = this.filterOfficialComponents(allComponents);
-    
-    Print.success('Component registry loaded successfully');
-    
-  } catch (error) {
-    Print.error(`Loading component registry: ${error.message}`);
-    Print.info('Check your internet connection and repository accessibility');
-    throw error;
+  async loadRegistry() {
+    await this._ensureConfig();
+    Print.info('Loading component registry from official repository...');
+
+    try {
+      const response = await fetch(COMPONENTS_REGISTRY_URL);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const content = await response.text();
+
+      // Parse the components.js file content
+      const match = content.match(/const components = ({[\s\S]*?});/);
+      if (!match) {
+        throw new Error('Invalid components.js format from repository');
+      }
+
+      const allComponents = JSON.parse(match[1]);
+
+      // Filter only Visual and Service components
+      this.componentsRegistry = this.filterOfficialComponents(allComponents);
+
+      Print.success('Component registry loaded successfully');
+
+    } catch (error) {
+      throw error;
+    }
   }
-}
 
 /**
- * Filtra el registry para incluir SOLO componentes de categorías Visual y Service
- * Excluye AppComponents y cualquier otra categoría
- * @param {object} allComponents - Objeto con todos los componentes del registry
- * @returns {object} - Objeto filtrado solo con Visual y Service
+ * Filters the registry to include ONLY Visual and Service category components
+ * Excludes AppComponents and any other category
+ * @param {object} allComponents - Object with all registry components
+ * @returns {object} - Filtered object with only Visual and Service
  */
 filterOfficialComponents(allComponents) {
   const filtered = {};
   let excludedCount = 0;
   
   Object.entries(allComponents).forEach(([name, category]) => {
-    // Solo incluir componentes de categoría Visual o Service
+    // Only include Visual or Service category components
     if (category === 'Visual' || category === 'Service') {
       filtered[name] = category;
     } else {
@@ -112,14 +133,15 @@ filterOfficialComponents(allComponents) {
         return {};
       }
 
-      return eval('(' + match[1] + ')');
+      return JSON.parse(match[1]);
     } catch (error) {
-      Print.warning('⚠️  No se pudo leer el registro local de componentes');
+      Print.warning(`⚠️  Could not read the local component registry at: ${componentsPath}`);
       return {};
     }
   }
 
   async findUpdatableComponents() {
+    await this._ensureConfig();
     const localComponents = await this.getLocalComponents();
     const updatableComponents = [];
 
@@ -129,7 +151,7 @@ filterOfficialComponents(allComponents) {
         // Check if local component directory exists using dynamic paths
         const categoryPath = validations.getCategoryPath(category);
         
-        // ✅ CORREGIDO: Usar 4 niveles para compatibilidad con node_modules
+        // Use 4 levels for node_modules compatibility
         const isProduction = this.config?.production?.enabled === true;
         const folderSuffix = isProduction ? 'dist' : 'src';
         const componentPath = getPath(import.meta.url, folderSuffix, categoryPath, name);
@@ -153,18 +175,18 @@ filterOfficialComponents(allComponents) {
     const components = {};
     Object.entries(this.componentsRegistry).forEach(([name, componentCategory]) => {
       if (!category || componentCategory === category) {
-        // ✅ CORREGIDO: Componentes especiales que no necesitan todos los archivos
+        // Special components that don't need all files
         let files;
         if (componentCategory === 'Visual') {
-          // Componentes de routing lógico solo necesitan JS
-          if (['Route', 'MultiRoute', 'NotFound'].includes(name)) {
+          // Logical routing components only need JS
+          if (['Route', 'MultiRoute', 'Link'].includes(name)) {
             files = [`${name}.js`];
           } else {
-            // Componentes visuales normales necesitan JS, HTML, CSS
+            // Normal visual components need JS, HTML, CSS
             files = [`${name}.js`, `${name}.html`, `${name}.css`];
           }
         } else {
-          // Service components solo necesitan JS
+          // Service components only need JS
           files = [`${name}.js`];
         }
 
@@ -192,19 +214,6 @@ filterOfficialComponents(allComponents) {
     const total = component.files.length;
     let done = 0;
     const spinner = ora(`Downloading ${componentName} 0/${total}`).start();
-    const fetchWithRetry = async (url, retries = 3, baseDelay = 500) => {
-      for (let attempt = 0; attempt <= retries; attempt++) {
-        try {
-          const response = await fetch(url);
-          if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-          return await response.text();
-        } catch (e) {
-          if (attempt === retries) throw e;
-          const delay = baseDelay * Math.pow(2, attempt);
-          await new Promise(r => setTimeout(r, delay));
-        }
-      }
-    };
     const worker = async (fileName) => {
       const url = `${DOCS_REPO_BASE_URL}/${category}/${componentName}/${fileName}`;
       const localPath = path.join(targetPath, fileName);
@@ -212,37 +221,25 @@ filterOfficialComponents(allComponents) {
         const content = await fetchWithRetry(url);
         await fs.writeFile(localPath, content, 'utf8');
         downloadedFiles.push(fileName);
-        Print.downloadSuccess(fileName);
       } catch (error) {
-        Print.downloadError(fileName, error.message);
+        Print.downloadError(fileName);
         failedFiles.push(fileName);
       } finally {
         done += 1;
         spinner.text = `Downloading ${componentName} ${done}/${total}`;
       }
     };
-    const runConcurrent = async (items, concurrency = 3) => {
-      let index = 0;
-      const runners = Array(Math.min(concurrency, items.length)).fill(0).map(async () => {
-        while (true) {
-          const i = index++;
-          if (i >= items.length) break;
-          await worker(items[i]);
-        }
-      });
-      await Promise.all(runners);
-    };
-    await runConcurrent(component.files, 3);
+    await runConcurrent(component.files, worker, 3);
     spinner.stop();
 
-    // ✅ NUEVO: Solo lanzar error si NO se descargó el archivo principal (.js)
+    // Only throw error if main file (.js) was not downloaded
     const mainFileDownloaded = downloadedFiles.some(file => file.endsWith('.js'));
     
     if (!mainFileDownloaded) {
       throw new Error(`Failed to download main component file (${componentName}.js)`);
     }
 
-    // ✅ ADVERTENCIA: Informar sobre archivos que fallaron (pero no detener el proceso)
+    // Report files that failed (but don't stop the process)
     if (failedFiles.length > 0) {
       Print.warning(`Some files couldn't be downloaded: ${failedFiles.join(', ')}`);
       Print.info('Component installed with available files');
@@ -252,7 +249,7 @@ filterOfficialComponents(allComponents) {
   }
 
   async updateLocalRegistrySafe(componentName, category) {
-    const componentsPath = path.join(__dirname, '../../../../src/Components/components.js');
+    const componentsPath = getComponentsJsPath(import.meta.url);
     try {
       if (!await fs.pathExists(componentsPath)) {
         const dir = path.dirname(componentsPath);
@@ -263,7 +260,7 @@ filterOfficialComponents(allComponents) {
       const content = await fs.readFile(componentsPath, 'utf8');
       const match = content.match(/const components = ({[\s\S]*?});/);
       if (!match) throw new Error('Invalid components.js format in local project');
-      const componentsObj = eval('(' + match[1] + ')');
+      const componentsObj = JSON.parse(match[1]);
       if (!componentsObj[componentName]) {
         componentsObj[componentName] = category;
         const sorted = Object.keys(componentsObj)
@@ -276,65 +273,19 @@ filterOfficialComponents(allComponents) {
         Print.info(`${componentName} already exists in local registry`);
       }
     } catch (error) {
-      Print.error(`Updating local components.js: ${error.message}`);
-      throw error;
-    }
-  }
-
-  async updateLocalRegistry(componentName, category) {
-    // ✅ CORREGIDO: Usar 4 niveles para compatibilidad con node_modules
-    const componentsPath = path.join(__dirname, '../../../../src/Components/components.js');
-    
-    try {
-      let content = await fs.readFile(componentsPath, 'utf8');
-      
-      // Parse existing components
-      const componentsMatch = content.match(/const components = ({[\s\S]*?});/);
-      if (!componentsMatch) {
-        throw new Error('Invalid components.js format in local project');
-      }
-
-      const componentsObj = eval('(' + componentsMatch[1] + ')');
-      
-      // Add new component if it doesn't exist
-      if (!componentsObj[componentName]) {
-        componentsObj[componentName] = category;
-
-        // Generate new content
-        const sortedComponents = Object.keys(componentsObj)
-          .sort()
-          .reduce((obj, key) => {
-            obj[key] = componentsObj[key];
-            return obj;
-          }, {});
-
-        const newComponentsString = JSON.stringify(sortedComponents, null, 2)
-          .replace(/"/g, '"')
-          .replace(/: "/g, ': "')
-          .replace(/",\n/g, '",\n');
-
-        const newContent = `const components = ${newComponentsString}; export default components;`;
-        
-        await fs.writeFile(componentsPath, newContent, 'utf8');
-        Print.registryUpdate(`Registered ${componentName} in local components.js`);
-      } else {
-        Print.info(`${componentName} already exists in local registry`);
-      }
-      
-    } catch (error) {
-      Print.error(`Updating local components.js: ${error.message}`);
       throw error;
     }
   }
 
   async installComponent(componentName, category, force = false) {
+    await this._ensureConfig();
      const availableComponents = this.getAvailableComponents(category);
 
   if (!availableComponents[componentName]) {
     throw new Error(`Component '${componentName}' not found in category '${category}' in the official repository`);
   }
 
-  // ✅ MEJORADO: Detectar si validations tiene acceso a la configuración
+    // Detect if validations has access to configuration
   let categoryPath;
   const hasValidConfig = validations.config && 
                          validations.config.paths && 
@@ -394,16 +345,13 @@ filterOfficialComponents(allComponents) {
       return true;
 
     } catch (error) {
-      Print.error(`Error installing ${componentName}: ${error.message}`);
-      
-      // ✅ MEJORADO: Solo borrar si el archivo principal (.js) no existe
+      // Only clean up if main file (.js) does not exist
       const mainFilePath = path.join(targetPath, `${componentName}.js`);
       const mainFileExists = await fs.pathExists(mainFilePath);
       
       if (!mainFileExists && await fs.pathExists(targetPath)) {
-        // Solo limpiar si no se instaló el archivo principal
+        // Only clean up if main file was not installed
         await fs.remove(targetPath);
-        Print.info('Cleaned up failed installation');
       } else if (mainFileExists) {
         Print.warning('Component partially installed - main file exists');
       }
@@ -430,18 +378,7 @@ filterOfficialComponents(allComponents) {
         spinner.text = `Installing ${done}/${total}`;
       }
     };
-    const runConcurrent = async (items, concurrency = 3) => {
-      let index = 0;
-      const runners = Array(Math.min(concurrency, items.length)).fill(0).map(async () => {
-        while (true) {
-          const i = index++;
-          if (i >= items.length) break;
-          await worker(items[i]);
-        }
-      });
-      await Promise.all(runners);
-    };
-    await runConcurrent(componentNames, 3);
+    await runConcurrent(componentNames, worker, 3);
     spinner.stop();
 
     // Summary
@@ -459,7 +396,7 @@ filterOfficialComponents(allComponents) {
     
     const allUpdatableComponents = await this.findUpdatableComponents();
     
-    // ✅ NUEVO: Filtrar solo componentes Visual
+    // Filter only Visual components
     const updatableComponents = allUpdatableComponents.filter(comp => comp.category === 'Visual');
     
     if (updatableComponents.length === 0) {
@@ -468,7 +405,7 @@ filterOfficialComponents(allComponents) {
       return true;
     }
 
-    // Mostrar estadísticas si hay componentes Service que no se sincronizarán
+    // Show statistics if there are Service components that won't be synced
     const serviceComponents = allUpdatableComponents.filter(comp => comp.category === 'Service');
     if (serviceComponents.length > 0) {
       Print.info(`Found ${serviceComponents.length} Service components (skipped - sync only affects Visual components)`);
@@ -497,7 +434,7 @@ filterOfficialComponents(allComponents) {
       }
     }
 
-    // ✅ SIMPLIFICADO: Solo actualizar componentes Visual
+    // Only update Visual components
     const visualComponentNames = updatableComponents.map(c => c.name);
     
     Print.info(`Updating ${visualComponentNames.length} Visual components...`);
@@ -517,7 +454,7 @@ filterOfficialComponents(allComponents) {
       Print.success('All your Visual components are now updated to the latest official versions!');
     }
 
-    // Información adicional sobre Service components
+    // Additional information about Service components
     if (serviceComponents.length > 0) {
       Print.newLine();
       Print.info(`Note: ${serviceComponents.length} Service components were found but not updated`);
@@ -539,7 +476,7 @@ filterOfficialComponents(allComponents) {
     const visualComponents = this.getAvailableComponents('Visual');
     const serviceComponents = this.getAvailableComponents('Service');
 
-    // ✅ SIMPLIFICADO: Solo mostrar nombres sin descripciones
+    // Only show names without descriptions
     Print.info('🎨 Visual Components (UI):');
     Object.keys(visualComponents).forEach(name => {
       const files = visualComponents[name].files;
@@ -695,7 +632,7 @@ async function getComponents(componentNames = [], options = {}) {
       await registry.installComponent(componentInfo.name, actualCategory, options.force);
       return true;
     } catch (error) {
-      Print.error(`${error.message}`);
+      Print.error(`Error installing component: ${error.message}`);
       return false;
     }
   } else {
@@ -708,7 +645,7 @@ async function getComponents(componentNames = [], options = {}) {
       await registry.installMultipleComponents(normalizedComponents, category, options.force);
       return true;
     } catch (error) {
-      Print.error(`${error.message}`);
+      Print.error(`Error installing components: ${error.message}`);
       return false;
     }
   }
@@ -744,4 +681,4 @@ async function syncComponents(options = {}) {
 }
 
 export default getComponents;
-export { listComponents, syncComponents, ComponentRegistry };
+export { listComponents, syncComponents, ComponentRegistry, loadConfig, runConcurrent, fetchWithRetry };

package/commands/init/init.js

@@ -3,12 +3,10 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import ora from 'ora';
 import Print from '../Print.js';
-import { getProjectRoot, getApiPath, getSrcPath } from '../utils/PathHelper.js';
+import { getProjectRoot, getApiPath, getSrcPath, getPath } from '../utils/PathHelper.js';
 import { execSync } from 'child_process';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// Importar la clase ComponentRegistry del getComponent
+// Import ComponentRegistry class from getComponent
 import { ComponentRegistry } from '../getComponent/getComponent.js';
 
 // Visual components used by the App Shell + MultiRoute starter project.
@@ -35,7 +33,7 @@ export default async function initializeProject(projectType) {
         try {
             const latest = execSync('npm view slicejs-web-framework version', { cwd: projectRoot }).toString().trim();
             latestVersion = latest;
-            const installedPkgPath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
+            const installedPkgPath = getPath(import.meta.url, 'node_modules', 'slicejs-web-framework', 'package.json');
             let installed = null;
             if (await fs.pathExists(installedPkgPath)) {
                 const pkg = await fs.readJson(installedPkgPath);
@@ -44,9 +42,11 @@ export default async function initializeProject(projectType) {
             if (installed !== latest) {
                 execSync(`npm install slicejs-web-framework@${latest} --save`, { cwd: projectRoot, stdio: 'inherit' });
             }
-            sliceBaseDir = path.join(projectRoot, 'node_modules', 'slicejs-web-framework');
+            sliceBaseDir = getPath(import.meta.url, 'node_modules', 'slicejs-web-framework');
             fwSpinner.succeed(`slicejs-web-framework@${latest} ready`);
         } catch (err) {
+            // Fallback uses __dirname-style path because it looks for a local development copy,
+            // not a project-relative path — npm install failed, so we fall back to monorepo sibling.
             const fallback = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../../slicejs-web-framework');
             if (await fs.pathExists(fallback)) {
                 sliceBaseDir = fallback;
@@ -58,6 +58,8 @@ export default async function initializeProject(projectType) {
             }
         }
 
+        // These derive from sliceBaseDir (which comes from npm install or fallback),
+        // so they're already dynamic — no PathHelper needed.
         const apiDir = path.join(sliceBaseDir, 'api');
         const srcDir = path.join(sliceBaseDir, 'src');
 
@@ -69,7 +71,7 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 1. COPIAR LA CARPETA API (mantener lógica original)
+        // 1. COPY API FOLDER (keep original logic)
         const apiSpinner = ora('Copying API structure...').start();
         try {
             if (!fs.existsSync(apiDir)) throw new Error(`API folder not found: ${apiDir}`);
@@ -81,15 +83,15 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 2. CREAR ESTRUCTURA SRC BÁSICA (sin copiar componentes Visual)
+        // 2. CREATE BASIC SRC STRUCTURE (without copying Visual components)
         const srcSpinner = ora('Creating src structure...').start();
         try {
             if (!fs.existsSync(srcDir)) throw new Error(`src folder not found: ${srcDir}`);
 
-            // Copiar solo los archivos base de src, excluyendo Components/Visual
+            // Copy only base src files, excluding Components/Visual
             await fs.ensureDir(destinationSrc);
 
-            // Copiar archivos y carpetas de src excepto Components/Visual
+            // Copy src files and folders except Components/Visual
             const srcItems = await fs.readdir(srcDir);
 
             for (const item of srcItems) {
@@ -99,7 +101,7 @@ export default async function initializeProject(projectType) {
 
                 if (stat.isDirectory()) {
                     if (item === 'Components') {
-                        // Crear estructura de Components pero sin copiar Visual
+                        // Create Components structure but without copying Visual
                         await fs.ensureDir(destItemPath);
 
                         const componentItems = await fs.readdir(srcItemPath);
@@ -132,7 +134,7 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 3. DESCARGAR TODOS LOS COMPONENTES VISUAL DESDE EL REPOSITORIO OFICIAL
+        // 3. DOWNLOAD ALL VISUAL COMPONENTS FROM OFFICIAL REPOSITORY
         const componentsSpinner = ora('Loading component registry...').start();
         try {
             const registry = new ComponentRegistry();
@@ -148,7 +150,7 @@ export default async function initializeProject(projectType) {
                 const results = await registry.installMultipleComponents(
                     allVisualComponents,
                     'Visual',
-                    true // force = true para instalación inicial
+                    true // force = true for initial installation
                 );
 
                 const successful = results.filter(r => r.success).length;
@@ -174,11 +176,11 @@ export default async function initializeProject(projectType) {
             Print.info('You can add them later using "slice get <component-name>"');
         }
 
-        // 4. CONFIGURAR SCRIPTS EN package.json DEL PROYECTO
+        // 4. CONFIGURE SCRIPTS IN PROJECT package.json
         const pkgSpinner = ora('Configuring npm scripts...').start();
         try {
             const projectRoot = getProjectRoot(import.meta.url);
-            const pkgPath = path.join(projectRoot, 'package.json');
+            const pkgPath = getPath(import.meta.url, 'package.json');
 
             let pkg;
             if (await fs.pathExists(pkgPath)) {
@@ -200,7 +202,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['dev'] = 'slice dev';
             pkg.scripts['start'] = 'slice start';
 
-            // Gestión de componentes
+            // Component management
             pkg.scripts['component:create'] = 'slice component create';
             pkg.scripts['component:list'] = 'slice component list';
             pkg.scripts['component:delete'] = 'slice component delete';
@@ -215,7 +217,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['slice:update'] = 'slice update';
             pkg.scripts['slice:types'] = 'slice types generate';
 
-            // Legacy (compatibilidad)
+            // Legacy (compatibility)
             pkg.scripts['slice:init'] = 'slice init';
             pkg.scripts['slice:start'] = 'slice start';
             pkg.scripts['slice:dev'] = 'slice dev';
@@ -227,7 +229,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['slice:sync'] = 'slice sync';
             pkg.scripts['run'] = 'slice dev';
 
-            // Configuración de módulo
+            // Module configuration
             pkg.type = 'module';
             pkg.engines = pkg.engines || { node: '>=20.0.0' };
 
@@ -239,7 +241,7 @@ export default async function initializeProject(projectType) {
             await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2), 'utf8');
             pkgSpinner.succeed('npm scripts configured successfully');
 
-            console.log('\n🎯 New recommended commands:');
+            Print.title('New recommended commands:');
             console.log('  npm run dev            - Start development server');
             console.log('  npm run get            - Install components');
             console.log('  npm run browse         - Browse components');
@@ -248,9 +250,11 @@ export default async function initializeProject(projectType) {
         Print.error(error.message);
         }
 
-        Print.success('Project initialized successfully.');
+        const projectName = path.basename(process.cwd());
+        Print.success(`Project initialized successfully in "${projectName}/"`);
         Print.newLine();
-        Print.info('Next steps:');
+        Print.title('Next steps:');
+        console.log(`  cd ${projectName}`);
         console.log('  slice browse          - View available components');
         console.log('  slice get Button      - Install specific components');
         console.log('  slice sync            - Update all components to latest versions');