slicejs-cli 2.6.0 → 2.7.0

package/client.js

@@ -8,11 +8,12 @@ import deleteComponent from "./commands/deleteComponent/deleteComponent.js";
 import getComponent, { listComponents as listRemoteComponents, syncComponents } from "./commands/getComponent/getComponent.js";
 import startServer from "./commands/startServer/startServer.js";
 import runDiagnostics from "./commands/doctor/doctor.js";
-import versionChecker from "./commands/utils/versionChecker.js";
+import versionChecker from "./commands/utils/VersionChecker.js";
 import updateManager from "./commands/utils/updateManager.js";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { getConfigPath } from "./commands/utils/PathHelper.js";
 import validations from "./commands/Validations.js";
 import Print from "./commands/Print.js";
 
@@ -20,7 +21,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const loadConfig = () => {
   try {
-    const configPath = path.join(__dirname, "../../src/sliceConfig.json");
+    const configPath = getConfigPath(import.meta.url);
     const rawData = fs.readFileSync(configPath, "utf-8");
     return JSON.parse(rawData);
   } catch (error) {
@@ -37,10 +38,13 @@ const getCategories = () => {
 // Function to run version check for all commands
 async function runWithVersionCheck(commandFunction, ...args) {
   try {
-    // Run the command first
+    const updateInfo = await updateManager.checkForUpdates();
+    if (updateInfo && updateInfo.hasUpdates) {
+      await updateManager.checkAndPromptUpdates({});
+    }
+
     const result = await commandFunction(...args);
 
-    // Then check for updates (non-blocking)
     setTimeout(() => {
       versionChecker.checkForUpdates(false);
     }, 100);
@@ -54,7 +58,7 @@ async function runWithVersionCheck(commandFunction, ...args) {
 
 const sliceClient = program;
 
-sliceClient.version("2.5.0").description("CLI for managing Slice.js framework components");
+sliceClient.version("2.6.1").description("CLI for managing Slice.js framework components");
 
 // INIT COMMAND
 sliceClient
@@ -337,6 +341,17 @@ sliceClient
     });
   });
 
+// LIST COMMAND - Quick shortcut for listing local components
+sliceClient
+  .command("list")
+  .description("Quick list all local components (alias for component list)")
+  .action(async () => {
+    await runWithVersionCheck(() => {
+      listComponents();
+      return Promise.resolve();
+    });
+  });
+
 // UPDATE COMMAND
 sliceClient
   .command("update")
@@ -379,11 +394,12 @@ Common Usage Examples:
   slice browse                   - Browse all available components
   slice sync                     - Update local components to latest versions
   slice component create         - Create new local component
+  slice list                     - List all local components
   slice doctor                   - Run project diagnostics
 
 Command Categories:
   • init, dev, start             - Project lifecycle (development only)
-  • get, browse, sync            - Quick registry shortcuts  
+  • get, browse, sync, list      - Quick shortcuts  
   • component <cmd>              - Local component management
   • registry <cmd>               - Official repository operations
   • version, update, doctor      - Maintenance commands
@@ -419,4 +435,4 @@ const helpCommand = sliceClient.command("help").description("Display help inform
   sliceClient.outputHelp();
 });
 
-program.parse();
+program.parse();

package/commands/Validations.js

@@ -1,14 +1,28 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { getConfigPath, getComponentsJsPath } from './utils/PathHelper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 class Validations {
     constructor() {
-        this.config = this.loadConfig(); // Cargamos la configuración solo una vez al instanciar
-        this.categories = this.config?.paths?.components;
+        this._config = null;
+        this._categories = null;
+    }
+
+    _ensureConfig() {
+        if (!this._config) {
+            this._config = this.loadConfig();
+            if (this._config) {
+                this._categories = this._config.paths?.components;
+            }
+        }
+    }
 
+    get config() {
+        this._ensureConfig();
+        return this._config;
     }
 
     isValidComponentName(componentName) {
@@ -19,36 +33,40 @@ class Validations {
 
     loadConfig() {
         try {
-            const configPath = path.join(__dirname, '../../../src/sliceConfig.json');
+            const configPath = getConfigPath(import.meta.url);
             if (!fs.existsSync(configPath)) {
-                console.error('\x1b[31m', '❌ Error: sliceConfig.json not found', '\x1b[0m');
-                console.log('\x1b[36m', 'ℹ️  Info: Run "slice init" to initialize your project', '\x1b[0m');
+                // Return null silently - let commands handle missing config if needed
                 return null;
-              }
+            }
             const rawData = fs.readFileSync(configPath, 'utf-8');
-            
+
             return JSON.parse(rawData);
         } catch (error) {
             console.error('\x1b[31m', `❌ Error loading configuration: ${error.message}`, '\x1b[0m');
-            console.log('\x1b[36m', 'ℹ️  Info: Check that sliceConfig.json is valid JSON', '\x1b[0m');
             return null;
         }
     }
 
     getCategories() {
-        return this.categories; // Usamos las categorías cargadas en el constructor
+        this._ensureConfig();
+        return this._categories;
     }
 
     getCategoryPath(category) {
-        return  this.categories[category].path;
+        this._ensureConfig();
+        return this._categories && this._categories[category] ? this._categories[category].path : null;
     }
 
-    getCategoryType(category){
-        return this.categories[category].type;
+    getCategoryType(category) {
+        this._ensureConfig();
+        return this._categories && this._categories[category] ? this._categories[category].type : null;
     }
 
     isValidCategory(category) {
-        const availableCategories = Object.keys(this.categories).map(cat => cat.toLowerCase()); 
+        this._ensureConfig();
+        if (!this._categories) return { isValid: false, category: null };
+
+        const availableCategories = Object.keys(this._categories).map(cat => cat.toLowerCase());
 
         if (availableCategories.includes(category.toLowerCase())) {
             return { isValid: true, category };
@@ -59,17 +77,17 @@ class Validations {
 
     componentExists(componentName) {
         try {
-            const componentFilePath = path.join(__dirname, '../../../src/Components/components.js');
-    
+            const componentFilePath = getComponentsJsPath(import.meta.url);
+
             if (!fs.existsSync(componentFilePath)) {
                 console.error('\x1b[31m', '❌ Error: components.js not found in expected path', '\x1b[0m');
                 console.log('\x1b[36m', 'ℹ️  Info: Run "slice component list" to generate components.js', '\x1b[0m');
                 return false;
             }
-    
+
             const fileContent = fs.readFileSync(componentFilePath, 'utf-8');
             const components = eval(fileContent.replace('export default', '')); // Evalúa el contenido como objeto
-            
+
             return components.hasOwnProperty(componentName);
 
         } catch (error) {
@@ -82,4 +100,4 @@ class Validations {
 
 const validations = new Validations();
 
-export default validations;
+export default validations;

package/commands/buildProduction/buildProduction.js

@@ -7,6 +7,7 @@ import { minify as terserMinify } from 'terser';
 import { minify } from 'html-minifier-terser';
 import CleanCSS from 'clean-css';
 import Print from '../Print.js';
+import { getSrcPath, getDistPath, getConfigPath } from '../utils/PathHelper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -15,7 +16,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  */
 const loadConfig = () => {
   try {
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const configPath = getConfigPath(import.meta.url);
     const rawData = fs.readFileSync(configPath, 'utf-8');
     return JSON.parse(rawData);
   } catch (error) {
@@ -28,7 +29,7 @@ const loadConfig = () => {
  * Verifica dependencias necesarias para el build
  */
 async function checkBuildDependencies() {
-  const srcDir = path.join(__dirname, '../../../../src');
+  const srcDir = getSrcPath(import.meta.url);
   
   if (!await fs.pathExists(srcDir)) {
     Print.error('Source directory (/src) not found');
@@ -103,8 +104,8 @@ async function verifyBuildIntegrity(distDir) {
  * Copia sliceConfig.json al directorio dist
  */
 async function copySliceConfig() {
-  const srcConfig = path.join(__dirname, '../../../../src/sliceConfig.json');
-  const distConfig = path.join(__dirname, '../../../../dist/sliceConfig.json');
+  const srcConfig = getConfigPath(import.meta.url);
+  const distConfig = getDistPath(import.meta.url, 'sliceConfig.json');
   
   if (await fs.pathExists(srcConfig)) {
     await fs.copy(srcConfig, distConfig);
@@ -336,7 +337,7 @@ async function minifyHTML(srcPath, distPath) {
 async function createOptimizedBundle() {
   Print.buildProgress('Creating optimized bundle...');
   
-  const mainJSPath = path.join(__dirname, '../../../../dist/App/index.js');
+  const mainJSPath = getDistPath(import.meta.url, 'App', 'index.js');
   
   if (await fs.pathExists(mainJSPath)) {
     Print.success('Main bundle optimized');
@@ -389,7 +390,7 @@ async function generateBuildStats(srcDir, distDir) {
  * Analiza el build sin construir
  */
 async function analyzeBuild() {
-  const distDir = path.join(__dirname, '../../../../dist');
+  const distDir = getDistPath(import.meta.url);
   
   if (!await fs.pathExists(distDir)) {
     Print.error('No build found to analyze. Run "slice build" first.');
@@ -398,7 +399,7 @@ async function analyzeBuild() {
   
   Print.info('Analyzing production build...');
   await generateBuildStats(
-    path.join(__dirname, '../../../../src'),
+    getSrcPath(import.meta.url),
     distDir
   );
 }
@@ -413,8 +414,8 @@ export default async function buildProduction(options = {}) {
     Print.title('🔨 Building Slice.js project for production...');
     Print.newLine();
     
-    const srcDir = path.join(__dirname, '../../../../src');
-    const distDir = path.join(__dirname, '../../../../dist');
+    const srcDir = getSrcPath(import.meta.url);
+    const distDir = getDistPath(import.meta.url);
     
     if (!await fs.pathExists(srcDir)) {
       throw new Error('Source directory not found. Run "slice init" first.');
@@ -470,7 +471,7 @@ export async function serveProductionBuild(port) {
     const defaultPort = config?.server?.port || 3001;
     const finalPort = port || defaultPort;
     
-    const distDir = path.join(__dirname, '../../../../dist');
+    const distDir = getDistPath(import.meta.url);
     
     if (!await fs.pathExists(distDir)) {
       throw new Error('No production build found. Run "slice build" first.');
@@ -540,4 +541,4 @@ export async function buildCommand(options = {}) {
   }
   
   return success;
-}
+}

package/commands/createComponent/createComponent.js

@@ -5,7 +5,8 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import Validations from '../Validations.js';
 import Print from '../Print.js';
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
+import { getSrcPath } from '../utils/PathHelper.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 function createComponent(componentName, category) {
     // Validación: Nombre de componente requerido
@@ -62,10 +63,8 @@ function createComponent(componentName, category) {
     }
 
     const categoryPath = Validations.getCategoryPath(category);
-
-    // Determinar la ruta del directorio del componente
-    let componentDir = path.join(__dirname, '../../../../src/', categoryPath, className);
-    componentDir = componentDir.slice(1);
+    const categoryPathClean = categoryPath ? categoryPath.replace(/^[/\\]+/, '') : '';
+    const componentDir = getSrcPath(import.meta.url, categoryPathClean, className);
     
     try {
         // Crear directorio del componente

package/commands/deleteComponent/deleteComponent.js

@@ -2,7 +2,9 @@ import fs from 'fs-extra';
 import path from 'path';
 import Validations from '../Validations.js';
 import Print from '../Print.js';
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
+import { fileURLToPath } from 'url';
+import { getSrcPath } from '../utils/PathHelper.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 function deleteComponent(componentName, category) {
     // Validación: Nombre de componente requerido
@@ -31,10 +33,8 @@ function deleteComponent(componentName, category) {
     category = flagCategory.category;
     
     const categoryPath = Validations.getCategoryPath(category);
-
-    // Construir la ruta del directorio del componente
-    let componentDir = path.join(__dirname, '../../../../src/', categoryPath, componentName);
-    componentDir = componentDir.slice(1);
+    const categoryPathClean = categoryPath ? categoryPath.replace(/^[/\\]+/, '') : '';
+    const componentDir = getSrcPath(import.meta.url, categoryPathClean, componentName);
 
     // Verificar si el directorio del componente existe
     if (!fs.existsSync(componentDir)) {

package/commands/doctor/doctor.js

@@ -5,6 +5,7 @@ import { createServer } from 'net';
 import chalk from 'chalk';
 import Table from 'cli-table3';
 import Print from '../Print.js';
+import { getProjectRoot, getSrcPath, getApiPath, getConfigPath, getPath } from '../utils/PathHelper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -34,9 +35,8 @@ async function checkNodeVersion() {
  * Verifica la estructura de directorios
  */
 async function checkDirectoryStructure() {
-    const projectRoot = path.join(__dirname, '../../../../');
-    const srcPath = path.join(projectRoot, 'src');
-    const apiPath = path.join(projectRoot, 'api');
+    const srcPath = getSrcPath(import.meta.url);
+    const apiPath = getApiPath(import.meta.url);
 
     const srcExists = await fs.pathExists(srcPath);
     const apiExists = await fs.pathExists(apiPath);
@@ -63,7 +63,7 @@ async function checkDirectoryStructure() {
  * Verifica sliceConfig.json
  */
 async function checkConfig() {
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const configPath = getConfigPath(import.meta.url);
 
     if (!await fs.pathExists(configPath)) {
         return {
@@ -101,7 +101,7 @@ async function checkConfig() {
  * Verifica disponibilidad del puerto
  */
 async function checkPort() {
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const configPath = getConfigPath(import.meta.url);
     let port = 3000;
 
     try {
@@ -145,7 +145,7 @@ async function checkPort() {
  * Verifica dependencias en package.json
  */
 async function checkDependencies() {
-    const packagePath = path.join(__dirname, '../../../../package.json');
+    const packagePath = getPath(import.meta.url, '', 'package.json');
 
     if (!await fs.pathExists(packagePath)) {
         return {
@@ -189,8 +189,8 @@ async function checkDependencies() {
  * Verifica integridad de componentes
  */
 async function checkComponents() {
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
-    const projectRoot = path.join(__dirname, '../../../../');
+    const configPath = getConfigPath(import.meta.url);
+        const projectRoot = getProjectRoot(import.meta.url);
 
     if (!await fs.pathExists(configPath)) {
         return {
@@ -208,7 +208,7 @@ async function checkComponents() {
         let componentIssues = 0;
 
         for (const [category, { path: compPath }] of Object.entries(componentPaths)) {
-            const fullPath = path.join(projectRoot, 'src', compPath);
+            const fullPath = getSrcPath(import.meta.url, compPath);
 
             if (await fs.pathExists(fullPath)) {
                 const items = await fs.readdir(fullPath);

package/commands/getComponent/getComponent.js

@@ -6,6 +6,7 @@ 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";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -19,8 +20,7 @@ const COMPONENTS_REGISTRY_URL = 'https://raw.githubusercontent.com/VKneider/slic
  */
 const loadConfig = () => {
   try {
-    // ✅ CORREGIDO: Usar 4 niveles como en listComponents para compatibilidad con node_modules
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const configPath = getConfigPath(import.meta.url);
     if (!fs.existsSync(configPath)) {
       throw new Error('sliceConfig.json not found in src folder');
     }
@@ -98,8 +98,7 @@ filterOfficialComponents(allComponents) {
 
   async getLocalComponents() {
     try {
-      // ✅ CORREGIDO: Usar 4 niveles como en listComponents para compatibilidad con node_modules
-      const componentsPath = path.join(__dirname, '../../../../src/Components/components.js');
+      const componentsPath = getComponentsJsPath(import.meta.url);
       
       if (!await fs.pathExists(componentsPath)) {
         return {};
@@ -132,8 +131,7 @@ filterOfficialComponents(allComponents) {
         // ✅ CORREGIDO: Usar 4 niveles para compatibilidad con node_modules
         const isProduction = this.config?.production?.enabled === true;
         const folderSuffix = isProduction ? 'dist' : 'src';
-        
-        const componentPath = path.join(__dirname, `../../../../${folderSuffix}`, categoryPath, name);
+        const componentPath = getPath(import.meta.url, folderSuffix, categoryPath, name);
         
         if (fs.pathExistsSync(componentPath)) {
           updatableComponents.push({
@@ -180,43 +178,6 @@ filterOfficialComponents(allComponents) {
     return components;
   }
 
-  displayAvailableComponents() {
-    if (!this.componentsRegistry) {
-      Print.error('❌ No se pudo cargar el registro de componentes');
-      return;
-    }
-
-    console.log('\n📚 Componentes disponibles en el repositorio oficial de Slice.js:\n');
-
-    const visualComponents = this.getAvailableComponents('Visual');
-    const serviceComponents = this.getAvailableComponents('Service');
-
-    // ✅ SIMPLIFICADO: Solo mostrar nombres sin descripciones
-    Print.info('🎨 Visual Components (UI):');
-    Object.keys(visualComponents).forEach(name => {
-      const files = visualComponents[name].files;
-      const fileIcons = files.map(file => {
-        if (file.endsWith('.js')) return '📜';
-        if (file.endsWith('.html')) return '🌐';
-        if (file.endsWith('.css')) return '🎨';
-        return '📄';
-      }).join(' ');
-      console.log(`  • ${name} ${fileIcons}`);
-    });
-
-    Print.info('\n⚙️  Service Components (Logic):');
-    Object.keys(serviceComponents).forEach(name => {
-      console.log(`  • ${name} 📜`);
-    });
-
-    Print.newLine();
-    Print.info(`Total: ${Object.keys(visualComponents).length} Visual + ${Object.keys(serviceComponents).length} Service components`);
-
-    console.log(`\n💡 Ejemplos de uso:`);
-    console.log(`slice get Button Card Input          # Obtener componentes Visual`);
-    console.log(`slice get FetchManager --service     # Obtener componente Service`);
-    console.log(`slice sync                           # Sincronizar componentes Visual`);
-  }
 
   async downloadComponentFiles(componentName, category, targetPath) {
     const component = this.getAvailableComponents(category)[componentName];
@@ -270,6 +231,36 @@ filterOfficialComponents(allComponents) {
     return downloadedFiles;
   }
 
+  async updateLocalRegistrySafe(componentName, category) {
+    const componentsPath = path.join(__dirname, '../../../../src/Components/components.js');
+    try {
+      if (!await fs.pathExists(componentsPath)) {
+        const dir = path.dirname(componentsPath);
+        await fs.ensureDir(dir);
+        const initial = `const components = {};\n\nexport default components;\n`;
+        await fs.writeFile(componentsPath, initial, 'utf8');
+      }
+      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] + ')');
+      if (!componentsObj[componentName]) {
+        componentsObj[componentName] = category;
+        const sorted = Object.keys(componentsObj)
+          .sort()
+          .reduce((obj, key) => { obj[key] = componentsObj[key]; return obj; }, {});
+        const newContent = `const components = ${JSON.stringify(sorted, null, 2)};\n\nexport default components;\n`;
+        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 updateLocalRegistry(componentName, category) {
     // ✅ CORREGIDO: Usar 4 niveles para compatibilidad con node_modules
     const componentsPath = path.join(__dirname, '../../../../src/Components/components.js');
@@ -331,14 +322,12 @@ filterOfficialComponents(allComponents) {
                          validations.config.paths.components[category];
   
   if (hasValidConfig) {
-    // Usar validations cuando la config está disponible
     categoryPath = validations.getCategoryPath(category);
   } else {
-    // Usar rutas por defecto cuando no hay config (durante init o error)
     if (category === 'Visual') {
-      categoryPath = '/Components/Visual';
+      categoryPath = 'Components/Visual';
     } else if (category === 'Service') {
-      categoryPath = '/Components/Service';
+      categoryPath = 'Components/Service';
     } else {
       throw new Error(`Unknown category: ${category}`);
     }
@@ -347,7 +336,8 @@ filterOfficialComponents(allComponents) {
   const isProduction = this.config?.production?.enabled === true;
   const folderSuffix = isProduction ? 'dist' : 'src';
   
-  const targetPath = path.join(__dirname, `../../../../${folderSuffix}`, categoryPath, componentName);
+  const cleanCategoryPath = categoryPath ? categoryPath.replace(/^[/\\]+/, '') : '';
+  const targetPath = getPath(import.meta.url, folderSuffix, cleanCategoryPath, componentName);
 
 
 
@@ -375,8 +365,7 @@ filterOfficialComponents(allComponents) {
       // Download component files
       const downloadedFiles = await this.downloadComponentFiles(componentName, category, targetPath);
 
-      // Update components registry
-      await this.updateLocalRegistry(componentName, category);
+      await this.updateLocalRegistrySafe(componentName, category);
 
       Print.success(`${componentName} installed successfully from official repository!`);
       console.log(`📁 Location: ${folderSuffix}/${categoryPath}/${componentName}/`);
@@ -717,4 +706,4 @@ async function syncComponents(options = {}) {
 }
 
 export default getComponents;
-export { listComponents, syncComponents, ComponentRegistry };
+export { listComponents, syncComponents, ComponentRegistry };

package/commands/init/init.js

@@ -3,6 +3,8 @@ 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 { execSync } from 'child_process';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -11,12 +13,39 @@ import { ComponentRegistry } from '../getComponent/getComponent.js';
 
 export default async function initializeProject(projectType) {
     try {
-        // Directorio de origen para API (mantener copia local)
-        let sliceBaseDir = path.join(__dirname, '../../../slicejs-web-framework');
-        let apiDir = path.join(sliceBaseDir, 'api');
-        let srcDir = path.join(sliceBaseDir, 'src');
-        let destinationApi = path.join(__dirname, '../../../../api');
-        let destinationSrc = path.join(__dirname, '../../../../src');
+        const projectRoot = getProjectRoot(import.meta.url);
+        const destinationApi = getApiPath(import.meta.url);
+        const destinationSrc = getSrcPath(import.meta.url);
+
+        const fwSpinner = ora('Ensuring latest Slice framework...').start();
+        let sliceBaseDir;
+        try {
+            const latest = execSync('npm view slicejs-web-framework version', { cwd: projectRoot }).toString().trim();
+            const installedPkgPath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
+            let installed = null;
+            if (await fs.pathExists(installedPkgPath)) {
+                const pkg = await fs.readJson(installedPkgPath);
+                installed = pkg.version;
+            }
+            if (installed !== latest) {
+                execSync(`npm install slicejs-web-framework@${latest} --save`, { cwd: projectRoot, stdio: 'inherit' });
+            }
+            sliceBaseDir = path.join(projectRoot, 'node_modules', 'slicejs-web-framework');
+            fwSpinner.succeed(`slicejs-web-framework@${latest} ready`);
+        } catch (err) {
+            const fallback = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../../slicejs-web-framework');
+            if (await fs.pathExists(fallback)) {
+                sliceBaseDir = fallback;
+                fwSpinner.warn('Using local slicejs-web-framework fallback');
+            } else {
+                fwSpinner.fail('Failed to ensure latest slicejs-web-framework');
+                Print.error(err.message);
+                return;
+            }
+        }
+
+        const apiDir = path.join(sliceBaseDir, 'api');
+        const srcDir = path.join(sliceBaseDir, 'src');
 
         try {
             // Verificar si los directorios de destino ya existen
@@ -131,6 +160,73 @@ 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
+        const pkgSpinner = ora('Configuring npm scripts...').start();
+        try {
+            const projectRoot = getProjectRoot(import.meta.url);
+            const pkgPath = path.join(projectRoot, 'package.json');
+
+            let pkg;
+            if (await fs.pathExists(pkgPath)) {
+                pkg = await fs.readJson(pkgPath);
+            } else {
+                pkg = {
+                    name: path.basename(projectRoot),
+                    version: '1.0.0',
+                    description: 'Slice.js project',
+                    main: 'api/index.js',
+                    scripts: {}
+                };
+            }
+
+            pkg.scripts = pkg.scripts || {};
+
+            // Comandos principales
+            pkg.scripts['dev'] = 'slice dev';
+            pkg.scripts['start'] = 'slice start';
+
+            // Gestión de componentes
+            pkg.scripts['component:create'] = 'slice component create';
+            pkg.scripts['component:list'] = 'slice component list';
+            pkg.scripts['component:delete'] = 'slice component delete';
+
+            // Atajos de repositorio
+            pkg.scripts['get'] = 'slice get';
+            pkg.scripts['browse'] = 'slice browse';
+            pkg.scripts['sync'] = 'slice sync';
+
+            // Utilidades
+            pkg.scripts['slice:version'] = 'slice version';
+            pkg.scripts['slice:update'] = 'slice update';
+
+            // Legacy (compatibilidad)
+            pkg.scripts['slice:init'] = 'slice init';
+            pkg.scripts['slice:start'] = 'slice start';
+            pkg.scripts['slice:dev'] = 'slice dev';
+            pkg.scripts['slice:create'] = 'slice component create';
+            pkg.scripts['slice:list'] = 'slice component list';
+            pkg.scripts['slice:delete'] = 'slice component delete';
+            pkg.scripts['slice:get'] = 'slice get';
+            pkg.scripts['slice:browse'] = 'slice browse';
+            pkg.scripts['slice:sync'] = 'slice sync';
+            pkg.scripts['run'] = 'slice dev';
+
+            // Configuración de módulo
+            pkg.type = pkg.type || 'module';
+            pkg.engines = pkg.engines || { node: '>=20.0.0' };
+
+            await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2), 'utf8');
+            pkgSpinner.succeed('npm scripts configured successfully');
+
+            console.log('\n🎯 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');
+        } catch (error) {
+            pkgSpinner.fail('Failed to configure npm scripts');
+            Print.error(error.message);
+        }
+
         Print.success('Proyecto inicializado correctamente.');
         Print.newLine();
         Print.info('Next steps:');
@@ -155,4 +251,4 @@ async function getAllVisualComponents(registry) {
     Print.info(`Found ${allVisualComponents.length} Visual components in official repository`);
 
     return allVisualComponents;
-}
+}

package/commands/listComponents/listComponents.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 import Table from 'cli-table3';
 import chalk from 'chalk';
 import Print from '../Print.js';
+import { getSrcPath, getComponentsJsPath, getConfigPath } from '../utils/PathHelper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -13,7 +14,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  */
 const loadConfig = () => {
     try {
-        const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+        const configPath = getConfigPath(import.meta.url);
         if (!fs.existsSync(configPath)) {
             Print.error('sliceConfig.json not found');
             Print.info('Run "slice init" to initialize your project');
@@ -72,7 +73,8 @@ const getComponents = () => {
     let allComponents = new Map();
 
     Object.entries(componentPaths).forEach(([category, { path: folderPath }]) => {
-        const fullPath = path.join(__dirname, `../../../../${folderSuffix}`, folderPath);
+        const cleanFolderPath = folderPath ? folderPath.replace(/^[/\\]+/, '') : '';
+        const fullPath = getSrcPath(import.meta.url, cleanFolderPath);
         const files = listComponents(fullPath);
 
         files.forEach(file => {
@@ -150,7 +152,7 @@ function listComponentsReal() {
         Print.info(`Total: ${Object.keys(components).length} component${Object.keys(components).length !== 1 ? 's' : ''} found`);
 
         // Ruta donde se generará components.js
-        const outputPath = path.join(__dirname, '../../../../src/Components/components.js');
+        const outputPath = getComponentsJsPath(import.meta.url);
 
         // Asegurar que el directorio existe
         const outputDir = path.dirname(outputPath);

package/commands/startServer/startServer.js

@@ -7,6 +7,7 @@ import { spawn } from 'child_process';
 import { createServer } from 'net';
 import setupWatcher, { stopWatcher } from './watchServer.js';
 import Print from '../Print.js';
+import { getConfigPath, getApiPath, getSrcPath, getDistPath } from '../utils/PathHelper.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -15,7 +16,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  */
 const loadConfig = () => {
   try {
-    const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+    const configPath = getConfigPath(import.meta.url);
     const rawData = fs.readFileSync(configPath, 'utf-8');
     return JSON.parse(rawData);
   } catch (error) {
@@ -52,7 +53,7 @@ async function isPortAvailable(port) {
  * Verifica si existe un build de producción
  */
 async function checkProductionBuild() {
-  const distDir = path.join(__dirname, '../../../../dist');
+  const distDir = getDistPath(import.meta.url);
   return await fs.pathExists(distDir);
 }
 
@@ -60,8 +61,8 @@ async function checkProductionBuild() {
  * Verifica si existe la estructura de desarrollo
  */
 async function checkDevelopmentStructure() {
-  const srcDir = path.join(__dirname, '../../../../src');
-  const apiDir = path.join(__dirname, '../../../../api');
+  const srcDir = getSrcPath(import.meta.url);
+  const apiDir = getApiPath(import.meta.url);
 
   return (await fs.pathExists(srcDir)) && (await fs.pathExists(apiDir));
 }
@@ -71,7 +72,7 @@ async function checkDevelopmentStructure() {
  */
 function startNodeServer(port, mode) {
   return new Promise((resolve, reject) => {
-    const apiIndexPath = path.join(__dirname, '../../../../api/index.js');
+    const apiIndexPath = getApiPath(import.meta.url, 'index.js');
 
     // Verificar que el archivo existe
     if (!fs.existsSync(apiIndexPath)) {
@@ -235,4 +236,4 @@ export default async function startServer(options = {}) {
 /**
  * Funciones de utilidad exportadas
  */
-export { checkProductionBuild, checkDevelopmentStructure, isPortAvailable };
+export { checkProductionBuild, checkDevelopmentStructure, isPortAvailable };

package/commands/utils/PathHelper.js

@@ -0,0 +1,58 @@
+import path from 'path'
+import fs from 'fs-extra'
+import { fileURLToPath } from 'url'
+
+const sanitize = (s) => (s || '').replace(/^[/\\]+/, '')
+const dirOf = (url) => path.dirname(fileURLToPath(url))
+
+function candidates(moduleUrl) {
+  const dir = dirOf(moduleUrl)
+  return [
+    path.join(dir, '../../'),
+    path.join(dir, '../../../../')
+  ]
+}
+
+function resolveProjectRoot(moduleUrl) {
+  const dirs = candidates(moduleUrl)
+  for (const root of dirs) {
+    const hasSrc = fs.pathExistsSync(path.join(root, 'src'))
+    const hasApi = fs.pathExistsSync(path.join(root, 'api'))
+    if (hasSrc || hasApi) return root
+  }
+  return dirs[1]
+}
+
+function joinProject(moduleUrl, ...segments) {
+  const root = resolveProjectRoot(moduleUrl)
+  const clean = segments.map(sanitize)
+  return path.join(root, ...clean)
+}
+
+export function getProjectRoot(moduleUrl) {
+  return resolveProjectRoot(moduleUrl)
+}
+
+export function getPath(moduleUrl, folder, ...segments) {
+  return joinProject(moduleUrl, folder, ...segments)
+}
+
+export function getSrcPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'src', ...segments)
+}
+
+export function getApiPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'api', ...segments)
+}
+
+export function getDistPath(moduleUrl, ...segments) {
+  return joinProject(moduleUrl, 'dist', ...segments)
+}
+
+export function getConfigPath(moduleUrl) {
+  return joinProject(moduleUrl, 'src', 'sliceConfig.json')
+}
+
+export function getComponentsJsPath(moduleUrl) {
+  return joinProject(moduleUrl, 'src', 'Components', 'components.js')
+}

package/commands/utils/VersionChecker.js

@@ -1,9 +1,10 @@
 // commands/utils/VersionChecker.js
 
-import fs from "fs-extra";
-import path from "path";
-import { fileURLToPath } from "url";
-import Print from "../Print.js";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import Print from "../Print.js";
+import { getProjectRoot } from "../utils/PathHelper.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -22,8 +23,9 @@ class VersionChecker {
       const cliPackage = await fs.readJson(cliPackagePath);
       this.currentCliVersion = cliPackage.version;
 
-      // Get Framework version from node_modules
-      const frameworkPackagePath = path.join(__dirname, '../../../../node_modules/slicejs-web-framework/package.json');
+      // Get Framework version from project node_modules
+      const projectRoot = getProjectRoot(import.meta.url);
+      const frameworkPackagePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
       if (await fs.pathExists(frameworkPackagePath)) {
         const frameworkPackage = await fs.readJson(frameworkPackagePath);
         this.currentFrameworkVersion = frameworkPackage.version;
@@ -162,4 +164,4 @@ class VersionChecker {
 // Singleton instance
 const versionChecker = new VersionChecker();
 
-export default versionChecker;
+export default versionChecker;

package/commands/utils/updateManager.js

@@ -5,7 +5,10 @@ import { promisify } from "util";
 import inquirer from "inquirer";
 import ora from "ora";
 import Print from "../Print.js";
-import versionChecker from "./versionChecker.js";
+import versionChecker from "./VersionChecker.js";
+import { getProjectRoot } from "../utils/PathHelper.js";
+import path from "path";
+import { fileURLToPath } from "url";
 
 const execAsync = promisify(exec);
 
@@ -14,6 +17,31 @@ class UpdateManager {
         this.packagesToUpdate = [];
     }
 
+    async detectCliInstall() {
+        try {
+            const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+            const cliRoot = path.join(moduleDir, '../../');
+            const projectRoot = getProjectRoot(import.meta.url);
+            let globalPrefix = '';
+            try {
+                const { stdout } = await execAsync('npm config get prefix');
+                globalPrefix = stdout.toString().trim();
+            } catch {}
+            const localNodeModules = path.join(projectRoot, 'node_modules');
+            const globalNodeModules = globalPrefix ? path.join(globalPrefix, 'node_modules') : '';
+
+            if (cliRoot.startsWith(localNodeModules)) {
+                return { type: 'local', cliRoot, projectRoot, globalPrefix };
+            }
+            if (globalNodeModules && cliRoot.startsWith(globalNodeModules)) {
+                return { type: 'global', cliRoot, projectRoot, globalPrefix };
+            }
+            return { type: 'unknown', cliRoot, projectRoot, globalPrefix };
+        } catch (error) {
+            return { type: 'unknown' };
+        }
+    }
+
     /**
      * Check for available updates and return structured info
      */
@@ -132,13 +160,45 @@ class UpdateManager {
         return answers.packages;
     }
 
+    async buildUpdatePlan(packages) {
+        const plan = [];
+        const info = await this.detectCliInstall();
+        for (const pkg of packages) {
+            if (pkg === 'slicejs-cli') {
+                if (info.type === 'global') {
+                    plan.push({ package: pkg, target: 'global', command: 'npm install -g slicejs-cli@latest' });
+                } else {
+                    plan.push({ package: pkg, target: 'project', command: 'npm install slicejs-cli@latest' });
+                }
+            } else if (pkg === 'slicejs-web-framework') {
+                plan.push({ package: pkg, target: 'project', command: 'npm install slicejs-web-framework@latest' });
+            } else {
+                plan.push({ package: pkg, target: 'project', command: `npm install ${pkg}@latest` });
+            }
+        }
+        return plan;
+    }
+
     /**
      * Execute npm update command for a specific package
      */
     async updatePackage(packageName) {
         try {
-            const command = `npm install ${packageName}@latest`;
-            const { stdout, stderr } = await execAsync(command);
+            let command = `npm install ${packageName}@latest`;
+            let options = {};
+
+            if (packageName === 'slicejs-cli') {
+                const info = await this.detectCliInstall();
+                if (info.type === 'global') {
+                    command = `npm install -g slicejs-cli@latest`;
+                } else {
+                    options.cwd = info.projectRoot || getProjectRoot(import.meta.url);
+                }
+            } else {
+                options.cwd = getProjectRoot(import.meta.url);
+            }
+
+            const { stdout, stderr } = await execAsync(command, options);
 
             return {
                 success: true,
@@ -213,24 +273,64 @@ class UpdateManager {
             // Display available updates
             this.displayUpdates(updateInfo);
 
-            // Get packages to update
-            const packagesToUpdate = await this.promptForUpdates(updateInfo, options);
+        // Get packages to update
+        const packagesToUpdate = await this.promptForUpdates(updateInfo, options);
 
             if (!packagesToUpdate || packagesToUpdate.length === 0) {
                 Print.info('No se seleccionaron paquetes para actualizar.');
                 return false;
             }
 
-            // Confirm installation if not auto-confirmed
-            if (!options.yes && !options.cli && !options.framework) {
-                const { confirm } = await inquirer.prompt([
+        // Show plan and confirm installation if not auto-confirmed
+        let plan = await this.buildUpdatePlan(packagesToUpdate);
+        console.log('');
+        Print.info('🧭 Plan de actualización:');
+        plan.forEach(item => {
+            const where = item.target === 'global' ? 'GLOBAL' : 'PROYECTO';
+            console.log(`   • ${item.package} → ${where}`);
+            console.log(`     ${item.command}`);
+        });
+        console.log('');
+
+        const cliInfo = await this.detectCliInstall();
+        if (cliInfo.type === 'global' && !packagesToUpdate.includes('slicejs-cli')) {
+            if (!options.yes && !options.cli) {
+                const { addCli } = await inquirer.prompt([
                     {
                         type: 'confirm',
-                        name: 'confirm',
-                        message: '¿Deseas continuar con la actualización?',
+                        name: 'addCli',
+                        message: 'Se detectó CLI global. ¿Agregar la actualización global del CLI al plan?',
                         default: true
                     }
                 ]);
+                if (addCli) {
+                    packagesToUpdate.push('slicejs-cli');
+                    plan = await this.buildUpdatePlan(packagesToUpdate);
+                    console.log('');
+                    Print.info('🧭 Plan actualizado:');
+                    plan.forEach(item => {
+                        const where = item.target === 'global' ? 'GLOBAL' : 'PROYECTO';
+                        console.log(`   • ${item.package} → ${where}`);
+                        console.log(`     ${item.command}`);
+                    });
+                    console.log('');
+                }
+            } else {
+                Print.warning('CLI global detectado. Se recomienda actualizar slicejs-cli global para mantener alineado con el framework.');
+                console.log('   Sugerencia: npm install -g slicejs-cli@latest');
+                console.log('');
+            }
+        }
+
+        if (!options.yes && !options.cli && !options.framework) {
+            const { confirm } = await inquirer.prompt([
+                {
+                    type: 'confirm',
+                    name: 'confirm',
+                    message: '¿Deseas continuar con la actualización según el plan mostrado?',
+                    default: true
+                }
+            ]);
 
                 if (!confirm) {
                     Print.info('Actualización cancelada.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "bin": {

package/post.js

@@ -5,142 +5,21 @@ import Print from './commands/Print.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const projectName = path.basename(__dirname);
 
-const projectPackageJsonPath = path.resolve(__dirname, '../../package.json');
-
-// Check if package.json file exists
-fs.promises.access(projectPackageJsonPath, fs.constants.F_OK)
-    .then(() => {
-        // The package.json file exists, so we read it and add the commands
-        return fs.promises.readFile(projectPackageJsonPath, 'utf8');
-    })
-    .then(data => {
-        // Convert the file content to a JSON object
-        const projectPackageJson = JSON.parse(data);
-
-        // Add custom commands to the project scripts
-        projectPackageJson.scripts = projectPackageJson.scripts || {};
-
-        // Main project commands - using 'slice' directly
-        projectPackageJson.scripts['dev'] = 'slice dev';
-        projectPackageJson.scripts['start'] = 'slice start';
-
-        // Component management
-        projectPackageJson.scripts['component:create'] = 'slice component create';
-        projectPackageJson.scripts['component:list'] = 'slice component list';
-        projectPackageJson.scripts['component:delete'] = 'slice component delete';
-
-        // Main repository commands (most used shortcuts)
-        projectPackageJson.scripts['get'] = 'slice get';
-        projectPackageJson.scripts['browse'] = 'slice browse';
-        projectPackageJson.scripts['sync'] = 'slice sync';
-
-        // Utility commands
-        projectPackageJson.scripts['slice:version'] = 'slice version';
-        projectPackageJson.scripts['slice:update'] = 'slice update';
-
-        // Legacy commands - mantener por compatibilidad temporal
-        projectPackageJson.scripts['slice:init'] = 'slice init';
-        projectPackageJson.scripts['slice:start'] = 'slice start';
-        projectPackageJson.scripts['slice:dev'] = 'slice dev';
-        projectPackageJson.scripts['slice:create'] = 'slice component create';
-        projectPackageJson.scripts['slice:list'] = 'slice component list';
-        projectPackageJson.scripts['slice:delete'] = 'slice component delete';
-        projectPackageJson.scripts['slice:get'] = 'slice get';
-        projectPackageJson.scripts['slice:browse'] = 'slice browse';
-        projectPackageJson.scripts['slice:sync'] = 'slice sync';
-        projectPackageJson.scripts['run'] = 'slice dev';
-
-        // Module configuration
-        projectPackageJson.type = 'module';
-        projectPackageJson.engines = {
-            "node": ">=20.0.0"
-        };
-
-        // Write the new content to package.json
-        return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(projectPackageJson, null, 2), 'utf8');
-    })
-    .then(() => {
-        console.log('✅ SliceJS CLI configured successfully');
-        console.log('\n🎯 New recommended commands:');
-        console.log('  slice dev              - Start development server');
-        console.log('  slice get Button       - Get components from repository');
-        console.log('  slice browse           - View available components');
-        console.log('  slice component create - Create local component');
-        console.log('\n📦 Available npm scripts:');
-        console.log('  npm run dev            - Start development server');
-        console.log('  npm run get            - Install components');
-        console.log('  npm run browse         - Browse components');
-        console.log('\n⚠️  Legacy commands (deprecated but still work):');
-        console.log('  npm run slice:dev      - Use "slice dev" instead');
-        console.log('  npm run slice:get      - Use "slice get" instead');
-        console.log('\n💡 You can also use npx:');
-        console.log('  npx slicejs-cli dev');
-        console.log('\n📘 Documentation: https://slice-js-docs.vercel.app/');
-    })
-    .catch(err => {
-        if (err.code === 'ENOENT') {
-            // The package.json file doesn't exist, so we create a new one with the commands
-            const defaultPackageJson = {
-                name: projectName,
-                version: '1.0.0',
-                description: 'Slice.js project',
-                main: 'api/index.js',
-                scripts: {
-                    // Main workflow commands
-                    'dev': 'slice dev',
-                    'start': 'slice start',
-
-                    // Component management
-                    'component:create': 'slice component create',
-                    'component:list': 'slice component list',
-                    'component:delete': 'slice component delete',
-
-                    // Repository commands
-                    'get': 'slice get',
-                    'browse': 'slice browse',
-                    'sync': 'slice sync',
-
-                    // Utility
-                    'slice:version': 'slice version',
-                    'slice:update': 'slice update',
-
-                    // Legacy commands (for compatibility)
-                    'slice:init': 'slice init',
-                    'slice:start': 'slice start',
-                    'slice:dev': 'slice dev',
-                    'slice:create': 'slice component create',
-                    'slice:list': 'slice component list',
-                    'slice:delete': 'slice component delete',
-                    'slice:get': 'slice get',
-                    'slice:browse': 'slice browse',
-                    'slice:sync': 'slice sync',
-                    'run': 'slice dev'
-                },
-                type: 'module',
-                engines: {
-                    "node": ">=20.0.0"
-                }
-            };
-
-            return fs.promises.writeFile(projectPackageJsonPath, JSON.stringify(defaultPackageJson, null, 2), 'utf8');
-        } else {
-            throw err;
-        }
-    })
-    .then(() => {
-        console.log('✅ SliceJS CLI commands configured successfully');
-        console.log('\n🎯 Simplified development workflow:');
-        console.log('  slice dev        → Start development server');
-        console.log('  slice get Button → Install components');
-        console.log('  slice browse     → View available components');
-        console.log('\n🔧 Benefits:');
-        console.log('  • Simple and direct commands');
-        console.log('  • Can be used globally or with npx');
-        console.log('  • Legacy npm scripts still work for compatibility');
-    })
-    .catch(err => {
-        console.error('❌ Error setting up package.json:', err.message);
-        process.exit(1);
-    });
+const isGlobal = process.env.npm_config_global === 'true';
+const initCwd = process.env.INIT_CWD ? path.resolve(process.env.INIT_CWD) : null;
+const targetRoot = initCwd || path.resolve(__dirname, '../../');
+const projectPackageJsonPath = path.join(targetRoot, 'package.json');
+
+if (isGlobal) {
+    console.log('ℹ️  Instalación global detectada de slicejs-cli.');
+    console.log('   Omite configuración de scripts. Usa el binario directamente:');
+    console.log('     slice dev');
+    console.log('     slice get Button');
+    process.exit(0);
+}
+
+console.log('ℹ️  Instalación local detectada de slicejs-cli.');
+console.log('   Se omite configuración automática de scripts en postinstall.');
+console.log('   Usa "slice init" para configurar los scripts del proyecto.');
+process.exit(0);