slicejs-web-framework 2.2.2 → 2.2.5

package/Slice/Components/Structural/Controller/Controller.js

@@ -5,8 +5,13 @@ export default class Controller {
       this.componentCategories = new Map(Object.entries(components));
       this.templates = new Map();
       this.classes = new Map();
-      this.requestedStyles = new Set();
+      this.requestedStyles = new Set(); // ✅ CRÍTICO: Para tracking de CSS cargados
       this.activeComponents = new Map();
+      
+      // 🚀 OPTIMIZACIÓN: Índice inverso para búsqueda rápida de hijos
+      // parentSliceId → Set<childSliceId>
+      this.childrenIndex = new Map();
+      
       this.idCounter = 0;
    }
 
@@ -65,9 +70,27 @@ export default class Controller {
       return true;
    }
 
+   /**
+    * Registra un componente y actualiza el índice de relaciones padre-hijo
+    * 🚀 OPTIMIZADO: Ahora mantiene childrenIndex y precalcula profundidad
+    */
    registerComponent(component, parent = null) {
       component.parentComponent = parent;
+      
+      // 🚀 OPTIMIZACIÓN: Precalcular y guardar profundidad
+      component._depth = parent ? (parent._depth || 0) + 1 : 0;
+      
+      // Registrar en activeComponents
       this.activeComponents.set(component.sliceId, component);
+      
+      // 🚀 OPTIMIZACIÓN: Actualizar índice inverso de hijos
+      if (parent) {
+         if (!this.childrenIndex.has(parent.sliceId)) {
+            this.childrenIndex.set(parent.sliceId, new Set());
+         }
+         this.childrenIndex.get(parent.sliceId).add(component.sliceId);
+      }
+      
       return true;
    }
 
@@ -92,7 +115,6 @@ export default class Controller {
       return this.activeComponents.get(sliceId);
    }
 
-   //Attach template to component
    loadTemplateToComponent(component) {
       const className = component.constructor.name;
       const template = this.templates.get(className);
@@ -110,14 +132,6 @@ export default class Controller {
       return this.componentCategories.get(componentSliceId);
    }
 
-   /*
-      Fetches a text resource (HTML, CSS, theme, or styles) for a component.
-      @param {string} componentName - The name of the component.
-      @param {string} resourceType - The type of resource to fetch ('html', 'css', 'theme', or 'styles').
-      @param {string} [componentCategory] - Optional category of the component.
-      @param {string} [customPath] - Optional custom path to fetch the resource from.
-      @returns {Promise<string>} - A promise that resolves to the fetched text.
-   */
    async fetchText(componentName, resourceType, componentCategory, customPath) {
       try {
          const baseUrl = window.location.origin;
@@ -130,12 +144,10 @@ export default class Controller {
          let isVisual = resourceType === 'html' || resourceType === 'css';
 
          if (isVisual) {
-            // ✅ CORREGIDO: Verificar que la categoría existe y agregar baseUrl
             if (slice.paths.components[componentCategory]) {
                path = `${baseUrl}${slice.paths.components[componentCategory].path}/${componentName}`;
                resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
             } else {
-               // ✅ FALLBACK: Para componentes Structural o categorías no configuradas
                if (componentCategory === 'Structural') {
                   path = `${baseUrl}/Slice/Components/Structural/${componentName}`;
                   resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
@@ -157,7 +169,6 @@ export default class Controller {
             path = customPath;
          }
 
-         // ✅ MEJORADO: Logging para debugging
          slice.logger.logInfo('Controller', `Fetching ${resourceType} from: ${path}`);
 
          const response = await fetch(path);
@@ -171,7 +182,6 @@ export default class Controller {
          return content;
       } catch (error) {
          slice.logger.logError('Controller', `Error fetching ${resourceType} for component ${componentName}:`, error);
-         // ✅ CORREGIDO: Re-lanzar el error para que el debugger pueda manejarlo
          throw error;
       }
    }
@@ -180,17 +190,17 @@ export default class Controller {
       const ComponentClass = component.constructor;
       const componentName = ComponentClass.name;
 
-      // ✅ Aplicar defaults si tiene static props
+      // Aplicar defaults si tiene static props
       if (ComponentClass.props) {
          this.applyDefaultProps(component, ComponentClass.props, props);
       }
 
-      // ✅ Validar solo en desarrollo
+      // Validar solo en desarrollo
       if (ComponentClass.props && !slice.isProduction()) {
          this.validatePropsInDevelopment(ComponentClass, props, componentName);
       }
 
-      // ✅ CÓDIGO EXISTENTE: Aplicar props
+      // Aplicar props
       for (const prop in props) {
          component[`_${prop}`] = null;
          component[prop] = props[prop];
@@ -201,14 +211,12 @@ export default class Controller {
       const ComponentClass = component.constructor;
       
       if (ComponentClass.props) {
-         // Si tiene props estáticos, usar esos como referencia
          return {
             availableProps: Object.keys(ComponentClass.props),
             propsConfig: ComponentClass.props,
             usedProps: this.extractUsedProps(component, ComponentClass.props)
          };
       } else {
-         // Si no tiene props estáticos, usar modo legacy
          return {
             availableProps: this.extractUsedProps(component),
             propsConfig: null,
@@ -257,14 +265,12 @@ export default class Controller {
       const usedProps = {};
       
       if (staticProps) {
-         // Si tiene props estáticos, buscar solo esos
          Object.keys(staticProps).forEach(prop => {
             if (component[prop] !== undefined) {
                usedProps[prop] = component[prop];
             }
          });
       } else {
-         // Modo legacy: buscar cualquier prop que empiece con _
          Object.getOwnPropertyNames(component).forEach(key => {
             if (key.startsWith('_') && key !== '_isActive') {
                const propName = key.substring(1);
@@ -276,52 +282,135 @@ export default class Controller {
       return usedProps;
    }
 
+   // ============================================================================
+   // 🚀 MÉTODOS DE DESTRUCCIÓN OPTIMIZADOS
+   // ============================================================================
+
+   /**
+    * Encuentra recursivamente todos los hijos de un componente
+    * 🚀 OPTIMIZADO: O(m) en lugar de O(n*d) - usa childrenIndex
+    * @param {string} parentSliceId - sliceId del componente padre
+    * @param {Set<string>} collected - Set de sliceIds ya recolectados
+    * @returns {Set<string>} Set de todos los sliceIds de componentes hijos
+    */
+   findAllChildComponents(parentSliceId, collected = new Set()) {
+      // 🚀 Buscar directamente en el índice: O(1)
+      const children = this.childrenIndex.get(parentSliceId);
+      
+      if (!children) return collected;
+      
+      // 🚀 Iterar solo los hijos directos: O(k) donde k = número de hijos
+      for (const childSliceId of children) {
+         collected.add(childSliceId);
+         // Recursión solo sobre hijos, no todos los componentes
+         this.findAllChildComponents(childSliceId, collected);
+      }
+      
+      return collected;
+   }
+
+   /**
+    * Encuentra recursivamente todos los componentes dentro de un contenedor DOM
+    * Útil para destroyByContainer cuando no tenemos el sliceId del padre
+    * @param {HTMLElement} container - Elemento contenedor
+    * @param {Set<string>} collected - Set de sliceIds ya recolectados
+    * @returns {Set<string>} Set de todos los sliceIds encontrados
+    */
+   findAllNestedComponentsInContainer(container, collected = new Set()) {
+      // Buscar todos los elementos con slice-id en el contenedor
+      const sliceComponents = container.querySelectorAll('[slice-id]');
+      
+      sliceComponents.forEach(element => {
+         const sliceId = element.getAttribute('slice-id') || element.sliceId;
+         if (sliceId && this.activeComponents.has(sliceId)) {
+            collected.add(sliceId);
+            // 🚀 Usar índice para buscar hijos recursivamente
+            this.findAllChildComponents(sliceId, collected);
+         }
+      });
+
+      return collected;
+   }
+
    /**
-    * Destruye uno o múltiples componentes
+    * Destruye uno o múltiples componentes DE FORMA RECURSIVA
+    * 🚀 OPTIMIZADO: O(m log m) en lugar de O(n*d + m log m)
     * @param {HTMLElement|Array<HTMLElement>|string|Array<string>} components 
-    *        - Componente individual (HTMLElement)
-    *        - Array de componentes
-    *        - sliceId individual (string)
-    *        - Array de sliceIds
-    * @returns {number} Cantidad de componentes destruidos
+    * @returns {number} Cantidad de componentes destruidos (incluyendo hijos)
     */
    destroyComponent(components) {
-      // Normalizar entrada a array
       const toDestroy = Array.isArray(components) ? components : [components];
-      let destroyedCount = 0;
+      const allSliceIdsToDestroy = new Set();
 
+      // PASO 1: Recolectar todos los componentes padres y sus hijos recursivamente
       for (const item of toDestroy) {
-         let component = null;
+         let sliceId = null;
 
-         // Si es string, buscar el componente por sliceId
          if (typeof item === 'string') {
-            component = this.activeComponents.get(item);
-            
-            if (!component) {
+            if (!this.activeComponents.has(item)) {
                slice.logger.logWarning('Controller', `Component with sliceId "${item}" not found`);
                continue;
             }
-         } 
-         // Si es un componente directamente
-         else if (item && item.sliceId) {
-            component = item;
-         } 
-         else {
+            sliceId = item;
+         } else if (item && item.sliceId) {
+            sliceId = item.sliceId;
+         } else {
             slice.logger.logWarning('Controller', `Invalid component or sliceId provided to destroyComponent`);
             continue;
          }
 
+         allSliceIdsToDestroy.add(sliceId);
+         
+         // 🚀 OPTIMIZADO: Usa childrenIndex en lugar de recorrer todos los componentes
+         this.findAllChildComponents(sliceId, allSliceIdsToDestroy);
+      }
+
+      // PASO 2: Ordenar por profundidad (más profundos primero)
+      // 🚀 OPTIMIZADO: Usa _depth precalculada en lugar de calcularla cada vez
+      const sortedSliceIds = Array.from(allSliceIdsToDestroy).sort((a, b) => {
+         const compA = this.activeComponents.get(a);
+         const compB = this.activeComponents.get(b);
+         
+         if (!compA || !compB) return 0;
+         
+         // 🚀 O(1) en lugar de O(d) - usa profundidad precalculada
+         return (compB._depth || 0) - (compA._depth || 0);
+      });
+
+      let destroyedCount = 0;
+
+      // PASO 3: Destruir en orden correcto (hijos antes que padres)
+      for (const sliceId of sortedSliceIds) {
+         const component = this.activeComponents.get(sliceId);
+         
+         if (!component) continue;
+
          // Ejecutar hook beforeDestroy si existe
          if (typeof component.beforeDestroy === 'function') {
             try {
                component.beforeDestroy();
             } catch (error) {
-               slice.logger.logError('Controller', `Error in beforeDestroy for ${component.sliceId}`, error);
+               slice.logger.logError('Controller', `Error in beforeDestroy for ${sliceId}`, error);
+            }
+         }
+
+         // 🚀 Limpiar del índice de hijos
+         this.childrenIndex.delete(sliceId);
+         
+         // Si tiene padre, remover de la lista de hijos del padre
+         if (component.parentComponent) {
+            const parentChildren = this.childrenIndex.get(component.parentComponent.sliceId);
+            if (parentChildren) {
+               parentChildren.delete(sliceId);
+               // Si el padre no tiene más hijos, eliminar entrada vacía
+               if (parentChildren.size === 0) {
+                  this.childrenIndex.delete(component.parentComponent.sliceId);
+               }
             }
          }
 
          // Eliminar del mapa de componentes activos
-         this.activeComponents.delete(component.sliceId);
+         this.activeComponents.delete(sliceId);
 
          // Remover del DOM si está conectado
          if (component.isConnected) {
@@ -332,14 +421,15 @@ export default class Controller {
       }
 
       if (destroyedCount > 0) {
-         slice.logger.logInfo('Controller', `Destroyed ${destroyedCount} component(s)`);
+         slice.logger.logInfo('Controller', `Destroyed ${destroyedCount} component(s) recursively`);
       }
 
       return destroyedCount;
    }
 
    /**
-    * Destruye todos los componentes Slice dentro de un contenedor
+    * Destruye todos los componentes Slice dentro de un contenedor (RECURSIVO)
+    * 🚀 OPTIMIZADO: Usa el índice inverso para búsqueda rápida
     * @param {HTMLElement} container - Elemento contenedor
     * @returns {number} Cantidad de componentes destruidos
     */
@@ -349,56 +439,49 @@ export default class Controller {
          return 0;
       }
 
-      // Buscar todos los elementos que sean componentes Slice
-      const sliceComponents = container.querySelectorAll('[slice-id]');
-      const sliceIdsToDestroy = [];
-
-      sliceComponents.forEach(element => {
-         const sliceId = element.getAttribute('slice-id') || element.sliceId;
-         if (sliceId && this.activeComponents.has(sliceId)) {
-            sliceIdsToDestroy.push(sliceId);
-         }
-      });
+      // 🚀 Recolectar componentes usando índice optimizado
+      const allSliceIds = this.findAllNestedComponentsInContainer(container);
+      
+      if (allSliceIds.size === 0) {
+         return 0;
+      }
 
-      // Destruir usando el método principal
-      const count = this.destroyComponent(sliceIdsToDestroy);
+      // Destruir usando el método principal optimizado
+      const count = this.destroyComponent(Array.from(allSliceIds));
       
       if (count > 0) {
-         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) from container`);
+         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) from container (including nested)`);
       }
 
       return count;
    }
 
    /**
-    * Destruye componentes cuyos sliceId coincidan con un patrón
-    * @param {string|RegExp} pattern - Patrón a buscar (string o expresión regular)
+    * Destruye componentes cuyos sliceId coincidan con un patrón (RECURSIVO)
+    * 🚀 OPTIMIZADO: Usa destrucción optimizada
+    * @param {string|RegExp} pattern - Patrón a buscar
     * @returns {number} Cantidad de componentes destruidos
     */
    destroyByPattern(pattern) {
       const componentsToDestroy = [];
-      
-      // Convertir string a RegExp si es necesario
       const regex = pattern instanceof RegExp ? pattern : new RegExp(pattern);
 
-      // Buscar componentes que coincidan con el patrón
       for (const [sliceId, component] of this.activeComponents) {
          if (regex.test(sliceId)) {
             componentsToDestroy.push(component);
          }
       }
 
-      // Destruir usando el método principal
+      if (componentsToDestroy.length === 0) {
+         return 0;
+      }
+
       const count = this.destroyComponent(componentsToDestroy);
       
       if (count > 0) {
-         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) matching pattern: ${pattern}`);
+         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) matching pattern: ${pattern} (including nested)`);
       }
 
       return count;
    }
-}
-
-function getRelativePath(levels) {
-   return '../'.repeat(levels);
 }

package/Slice/Components/Structural/Router/Router.js

@@ -139,7 +139,7 @@ export default class Router {
     * Ejecuta el beforeEach guard si existe
     * @param {Object} to - Información de ruta destino
     * @param {Object} from - Información de ruta origen
-    * @returns {String|null} Path de redirección o null si continúa
+    * @returns {Object|null} Objeto con redirectPath y options, o null si continúa
     */
    async _executeBeforeEachGuard(to, from) {
       if (!this._beforeEachGuard) {
@@ -147,18 +147,45 @@ export default class Router {
       }
 
       let redirectPath = null;
+      let redirectOptions = {};
       let nextCalled = false;
 
-      const next = (path) => {
+      const next = (arg) => {
          if (nextCalled) {
             slice.logger.logWarning('Router', 'next() called multiple times in guard');
             return;
          }
          nextCalled = true;
 
-         if (path && typeof path === 'string') {
-            redirectPath = path;
+         // Caso 1: Sin argumentos - continuar navegación
+         if (arg === undefined) {
+            return;
+         }
+
+         // Caso 2: false - cancelar navegación
+         if (arg === false) {
+            redirectPath = false;
+            return;
+         }
+
+         // Caso 3: String - redirección simple (backward compatibility)
+         if (typeof arg === 'string') {
+            redirectPath = arg;
+            redirectOptions = { replace: false };
+            return;
+         }
+
+         // Caso 4: Objeto - redirección con opciones
+         if (typeof arg === 'object' && arg.path) {
+            redirectPath = arg.path;
+            redirectOptions = {
+               replace: arg.replace || false
+            };
+            return;
          }
+
+         // Argumento inválido
+         slice.logger.logError('Router', 'Invalid argument passed to next(). Expected string, object with path, false, or undefined.');
       };
 
       try {
@@ -172,7 +199,8 @@ export default class Router {
             );
          }
 
-         return redirectPath;
+         // Retornar tanto el path como las opciones
+         return redirectPath ? { path: redirectPath, options: redirectOptions } : null;
       } catch (error) {
          slice.logger.logError('Router', 'Error in beforeEach guard', error);
          return null; // En caso de error, continuar con la navegación
@@ -200,7 +228,7 @@ export default class Router {
    // ROUTING CORE (MODIFICADO CON GUARDS)
    // ============================================
 
-   async navigate(path, _redirectChain = []) {
+    async navigate(path, _redirectChain = [], _options = {}) {
       const currentPath = window.location.pathname;
       
       
@@ -228,21 +256,32 @@ export default class Router {
 
       // Obtener información de ruta destino
       const { route: toRoute, params: toParams } = this.matchRoute(path);
-      const to = this._createRouteInfo(toRoute, toParams, path); // ← PASAR EL PATH AQUÍ
+      const to = this._createRouteInfo(toRoute, toParams, path);
 
 
       // EJECUTAR BEFORE EACH GUARD
-      const redirectPath = await this._executeBeforeEachGuard(to, from);
+      const guardResult = await this._executeBeforeEachGuard(to, from);
 
-      // Si el guard redirige, agregar ruta actual a la cadena y navegar a la nueva ruta
-      if (redirectPath) {
+      // Si el guard redirige
+      if (guardResult && guardResult.path) {
          const newChain = [..._redirectChain, path];
+         return this.navigate(guardResult.path, newChain, guardResult.options);
+      }
 
-         return this.navigate(redirectPath, newChain);
+      // Si el guard cancela la navegación (next(false))
+      if (guardResult && guardResult.path === false) {
+         slice.logger.logInfo('Router', 'Navigation cancelled by guard');
+         return;
       }
 
       // No hay redirección - continuar con la navegación normal
-      window.history.pushState({}, path, window.location.origin + path);
+      // Usar replace o push según las opciones
+      if (_options.replace) {
+         window.history.replaceState({}, path, window.location.origin + path);
+      } else {
+         window.history.pushState({}, path, window.location.origin + path);
+      }
+      
       await this._performNavigation(to, from);
    }
 
@@ -323,19 +362,25 @@ export default class Router {
       slice.router.activeRoute = route;
    }
 
-   async loadInitialRoute() {
+    async loadInitialRoute() {
       const path = window.location.pathname;
       const { route, params } = this.matchRoute(path);
 
       // Para la carga inicial, también ejecutar guards
       const from = this._createRouteInfo(null, {}, null);
-      const to = this._createRouteInfo(route, params, path); // ← PASAR EL PATH AQUÍ
+      const to = this._createRouteInfo(route, params, path);
 
       // EJECUTAR BEFORE EACH GUARD en carga inicial
-      const redirectPath = await this._executeBeforeEachGuard(to, from);
+      const guardResult = await this._executeBeforeEachGuard(to, from);
 
-      if (redirectPath) {
-         return this.navigate(redirectPath);
+      if (guardResult && guardResult.path) {
+         return this.navigate(guardResult.path, [], guardResult.options);
+      }
+
+      // Si el guard cancela la navegación inicial (caso raro pero posible)
+      if (guardResult && guardResult.path === false) {
+         slice.logger.logWarning('Router', 'Initial route navigation cancelled by guard');
+         return;
       }
 
       await this.handleRoute(route, params);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.2.2",
+  "version": "2.2.5",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/App/index.js

@@ -7,7 +7,7 @@ slice.router.beforeEach(async (to, from, next) => {
    if(to.metadata.private){
       const isAuthenticated = await //fetchlogic for validation
       if(!isAuthenticated){
-         return next({ path: '/login' });
+         return next({ path: '/login', replace: true });
       }
       return next();
    }

package/src/Components/AppComponents/HomePage/HomePage.js

@@ -1,196 +1,196 @@
-export default class HomePage extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      
-      this.$examplesContainer = this.querySelector('.examples-container');
-      
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Crear la barra de navegación
-      const navbar = await slice.build('Navbar', {
-         position: 'fixed',
-         logo: {
-            src: '/images/Slice.js-logo.png',
-            path: '/',
-         },
-         items: [
-            { text: 'Home', path: '/' },
-            { text: 'Playground', path: '/Playground' },
-
-         ],
-         buttons: [
-            {
-               value: 'Change Theme',
-               onClickCallback: async () => {
-                  const currentTheme = slice.stylesManager.themeManager.currentTheme;
-                  if (currentTheme === 'Slice') {
-                     await slice.setTheme('Light');
-                  } else if (currentTheme === 'Light') {
-                     await slice.setTheme('Dark');
-                  } else {
-                     await slice.setTheme('Slice');
-                  }
-               },
-            },
-         ],
-      });
-      
-      // Crear botones para la sección de llamada a la acción
-      const docsButton = await slice.build('Button', {
-         value: 'Documentation',
-         onClickCallback: () => //redirect to https://slice-js-docs.vercel.app/Documentation
-         window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
-         customColor: {
-            button: 'var(--primary-color)',
-            label: 'var(--primary-color-contrast)'
-         }
-      });
-      
-      const componentsButton = await slice.build('Button', {
-         value: 'Components Library',
-         onClickCallback: () => window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
-         customColor: {
-            button: 'var(--secondary-color)',
-            label: 'var(--secondary-color-contrast)'
-         }
-      });
-      
-      // Añadir botones a la sección CTA
-      this.querySelector('.cta-buttons').appendChild(docsButton);
-      this.querySelector('.cta-buttons').appendChild(componentsButton);
-      
-      // Crear features section con un enfoque diferente (sin usar Cards)
-      await this.createFeatures();
-      
-      // Crear ejemplos de componentes
-      await this.createComponentExamples();
-      
-      // Configurar la sección de código de inicio
-      await this.setupGettingStartedSection();
-      
-      // Añadir la barra de navegación al inicio del componente
-      this.insertBefore(navbar, this.firstChild);
-   }
-   
-   async createFeatures() {
-      // Definir características
-      const features = [
-         {
-            title: 'Component-Based',
-            description: 'Build your app using modular, reusable components following web standards.'
-         },
-         {
-            title: 'Zero Dependencies',
-            description: 'Built with vanilla JavaScript. No external libraries required.'
-         },
-         {
-            title: 'Easy Routing',
-            description: 'Simple and powerful routing system for single page applications.'
-         },
-         {
-            title: 'Theme System',
-            description: 'Built-in theme support with easy customization through CSS variables.'
-         },
-         {
-            title: 'Developer Tools',
-            description: 'Integrated debugging and logging for faster development.'
-         },
-         {
-            title: 'Performance Focused',
-            description: 'Lightweight and optimized for fast loading and execution.'
-         }
-      ];
-      
-      const featureGrid = this.querySelector('.feature-grid');
-      
-      // Crear y añadir cada feature como un elemento HTML simple
-      for (const feature of features) {
-         const featureElement = document.createElement('div');
-         featureElement.classList.add('feature-item');
-         
-         const featureTitle = document.createElement('h3');
-         featureTitle.textContent = feature.title;
-         featureTitle.classList.add('feature-title');
-         
-         const featureDescription = document.createElement('p');
-         featureDescription.textContent = feature.description;
-         featureDescription.classList.add('feature-description');
-         
-         featureElement.appendChild(featureTitle);
-         featureElement.appendChild(featureDescription);
-         
-         featureGrid.appendChild(featureElement);
-      }
-   }
-   
-   async createComponentExamples() {
-      // Crear ejemplos para demostrar componentes
-      const inputExample = await slice.build('Input', {
-         placeholder: 'Try typing here...',
-         type: 'text'
-      });
-      
-      const switchExample = await slice.build('Switch', {
-         label: 'Toggle me',
-         checked: true
-      });
-      
-      const checkboxExample = await slice.build('Checkbox', {
-         label: 'Check me',
-         labelPlacement: 'right'
-      });
-      
-      const detailsExample = await slice.build('Details', {
-         title: 'Click to expand',
-         text: 'This is a collapsible details component that can contain any content.'
-      });
-      
-      // Crear sección para cada ejemplo
-      const exampleSections = [
-         { title: 'Input Component', component: inputExample },
-         { title: 'Switch Component', component: switchExample },
-         { title: 'Checkbox Component', component: checkboxExample },
-         { title: 'Details Component', component: detailsExample }
-      ];
-      
-      // Añadir cada ejemplo a la sección de ejemplos
-      for (const section of exampleSections) {
-         const container = document.createElement('div');
-         container.classList.add('example-item');
-         
-         const title = document.createElement('h3');
-         title.textContent = section.title;
-         
-         container.appendChild(title);
-         container.appendChild(section.component);
-         
-         this.$examplesContainer.appendChild(container);
-      }
-   }
-   
-   async setupGettingStartedSection() {
-      // Opcionalmente podríamos mejorar esta sección usando el CodeVisualizer component
-      // en lugar del código HTML estático en el template
-      const codeVisualizer = await slice.build('CodeVisualizer', {
-         value: `// Initialize a new Slice.js project
-npm run slice:init
-
-// Create a new component
-npm run slice:create
-
-// Start your application
-npm run slice:start`,
-         language: 'bash'
-      });
-      
-      const codeSample = this.querySelector('.code-sample');
-      codeSample.innerHTML = ''; // Clear the static code sample
-      codeSample.appendChild(codeVisualizer);
-   }
-}
-
+export default class HomePage extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      
+      this.$examplesContainer = this.querySelector('.examples-container');
+      
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      // Crear la barra de navegación
+      const navbar = await slice.build('Navbar', {
+         position: 'fixed',
+         logo: {
+            src: '/images/Slice.js-logo.png',
+            path: '/',
+         },
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'Playground', path: '/Playground' },
+
+         ],
+         buttons: [
+            {
+               value: 'Change Theme',
+               onClickCallback: async () => {
+                  const currentTheme = slice.stylesManager.themeManager.currentTheme;
+                  if (currentTheme === 'Slice') {
+                     await slice.setTheme('Light');
+                  } else if (currentTheme === 'Light') {
+                     await slice.setTheme('Dark');
+                  } else {
+                     await slice.setTheme('Slice');
+                  }
+               },
+            },
+         ],
+      });
+      
+      // Crear botones para la sección de llamada a la acción
+      const docsButton = await slice.build('Button', {
+         value: 'Documentation',
+         onClickCallback: () => //redirect to https://slice-js-docs.vercel.app/Documentation
+         window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)'
+         }
+      });
+      
+      const componentsButton = await slice.build('Button', {
+         value: 'Components Library',
+         onClickCallback: () => window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
+         customColor: {
+            button: 'var(--secondary-color)',
+            label: 'var(--secondary-color-contrast)'
+         }
+      });
+      
+      // Añadir botones a la sección CTA
+      this.querySelector('.cta-buttons').appendChild(docsButton);
+      this.querySelector('.cta-buttons').appendChild(componentsButton);
+      
+      // Crear features section con un enfoque diferente (sin usar Cards)
+      await this.createFeatures();
+      
+      // Crear ejemplos de componentes
+      await this.createComponentExamples();
+      
+      // Configurar la sección de código de inicio
+      await this.setupGettingStartedSection();
+      
+      // Añadir la barra de navegación al inicio del componente
+      this.insertBefore(navbar, this.firstChild);
+   }
+   
+   async createFeatures() {
+      // Definir características
+      const features = [
+         {
+            title: 'Component-Based',
+            description: 'Build your app using modular, reusable components following web standards.'
+         },
+         {
+            title: 'Zero Dependencies',
+            description: 'Built with vanilla JavaScript. No external libraries required.'
+         },
+         {
+            title: 'Easy Routing',
+            description: 'Simple and powerful routing system for single page applications.'
+         },
+         {
+            title: 'Theme System',
+            description: 'Built-in theme support with easy customization through CSS variables.'
+         },
+         {
+            title: 'Developer Tools',
+            description: 'Integrated debugging and logging for faster development.'
+         },
+         {
+            title: 'Performance Focused',
+            description: 'Lightweight and optimized for fast loading and execution.'
+         }
+      ];
+      
+      const featureGrid = this.querySelector('.feature-grid');
+      
+      // Crear y añadir cada feature como un elemento HTML simple
+      for (const feature of features) {
+         const featureElement = document.createElement('div');
+         featureElement.classList.add('feature-item');
+         
+         const featureTitle = document.createElement('h3');
+         featureTitle.textContent = feature.title;
+         featureTitle.classList.add('feature-title');
+         
+         const featureDescription = document.createElement('p');
+         featureDescription.textContent = feature.description;
+         featureDescription.classList.add('feature-description');
+         
+         featureElement.appendChild(featureTitle);
+         featureElement.appendChild(featureDescription);
+         
+         featureGrid.appendChild(featureElement);
+      }
+   }
+   
+   async createComponentExamples() {
+      // Crear ejemplos para demostrar componentes
+      const inputExample = await slice.build('Input', {
+         placeholder: 'Try typing here...',
+         type: 'text'
+      });
+      
+      const switchExample = await slice.build('Switch', {
+         label: 'Toggle me',
+         checked: true
+      });
+      
+      const checkboxExample = await slice.build('Checkbox', {
+         label: 'Check me',
+         labelPlacement: 'right'
+      });
+      
+      const detailsExample = await slice.build('Details', {
+         title: 'Click to expand',
+         text: 'This is a collapsible details component that can contain any content.'
+      });
+      
+      // Crear sección para cada ejemplo
+      const exampleSections = [
+         { title: 'Input Component', component: inputExample },
+         { title: 'Switch Component', component: switchExample },
+         { title: 'Checkbox Component', component: checkboxExample },
+         { title: 'Details Component', component: detailsExample }
+      ];
+      
+      // Añadir cada ejemplo a la sección de ejemplos
+      for (const section of exampleSections) {
+         const container = document.createElement('div');
+         container.classList.add('example-item');
+         
+         const title = document.createElement('h3');
+         title.textContent = section.title;
+         
+         container.appendChild(title);
+         container.appendChild(section.component);
+         
+         this.$examplesContainer.appendChild(container);
+      }
+   }
+   
+   async setupGettingStartedSection() {
+      // Opcionalmente podríamos mejorar esta sección usando el CodeVisualizer component
+      // en lugar del código HTML estático en el template
+      const codeVisualizer = await slice.build('CodeVisualizer', {
+         value: `// Initialize a new Slice.js project
+npm run slice:init
+
+// Create a new component
+npm run slice:create
+
+// Start your application
+npm run slice:start`,
+         language: 'bash'
+      });
+      
+      const codeSample = this.querySelector('.code-sample');
+      codeSample.innerHTML = ''; // Clear the static code sample
+      codeSample.appendChild(codeVisualizer);
+   }
+}
+
 customElements.define('slice-home-page', HomePage);

package/src/Components/components.js

@@ -1,28 +1,28 @@
-const components = {
-  "HomePage": "AppComponents",
-  "Playground": "AppComponents",
-  "Button": "Visual",
-  "Card": "Visual",
-  "Checkbox": "Visual",
-  "CodeVisualizer": "Visual",
-  "Details": "Visual",
-  "DropDown": "Visual",
-  "Grid": "Visual",
-  "Icon": "Visual",
-  "Input": "Visual",
-  "Layout": "Visual",
-  "Loading": "Visual",
-  "MultiRoute": "Visual",
-  "Navbar": "Visual",
-  "NotFound": "Visual",
-  "Route": "Visual",
-  "Select": "Visual",
-  "Switch": "Visual",
-  "TreeItem": "Visual",
-  "TreeView": "Visual",
-  "FetchManager": "Service",
-  "IndexedDbManager": "Service",
-  "Link": "Service",
-  "LocalStorageManager": "Service",
-  "Translator": "Service"
+const components = {
+  "HomePage": "AppComponents",
+  "Playground": "AppComponents",
+  "Button": "Visual",
+  "Card": "Visual",
+  "Checkbox": "Visual",
+  "CodeVisualizer": "Visual",
+  "Details": "Visual",
+  "DropDown": "Visual",
+  "Grid": "Visual",
+  "Icon": "Visual",
+  "Input": "Visual",
+  "Layout": "Visual",
+  "Loading": "Visual",
+  "MultiRoute": "Visual",
+  "Navbar": "Visual",
+  "NotFound": "Visual",
+  "Route": "Visual",
+  "Select": "Visual",
+  "Switch": "Visual",
+  "TreeItem": "Visual",
+  "TreeView": "Visual",
+  "FetchManager": "Service",
+  "IndexedDbManager": "Service",
+  "Link": "Service",
+  "LocalStorageManager": "Service",
+  "Translator": "Service"
 }; export default components;