slicejs-web-framework 3.4.3 → 3.5.0

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

@@ -1,1198 +1,1406 @@
-import components from '/Components/components.js';
-import { collectInvalidAllowedValueProps, formatAllowedValuesForLog } from './allowedValuesValidation.js';
-
-export default class Controller {
-   constructor() {
-      this.componentCategories = new Map(Object.entries(components));
-      this.templates = new Map();
-      this.classes = new Map();
-      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();
-
-      // 📦 Bundle system
-      this.loadedBundles = new Set();
-      this.bundleConfig = null;
-      this.criticalBundleLoaded = false;
-      this.bundleImportPromises = new Map();
-      this.bundleLoadPromises = new Map();
-
-      // 🔁 Singleton builds in flight: sliceId → Promise<instance>.
-      // Lets concurrent build({singleton:true}) calls share one build instead
-      // of racing on a duplicate sliceId. Entries are transient (deleted on settle).
-      this._pendingBuilds = new Map();
-
-      this.idCounter = 0;
-   }
-
-   /**
-    * 📦 Initializes bundle system (called automatically when config is loaded)
-    */
-    initializeBundles(config = null) {
-       if (config) {
-          this.bundleConfig = config;
-
-          // Register critical bundle components if available
-          if (config.bundles?.critical) {
-            // Critical bundle will be loaded explicitly
-          }
-          this.criticalBundleLoaded = false;
-       } else {
-          // No bundles available, will use individual component loading
-          this.bundleConfig = null;
-          this.criticalBundleLoaded = false;
-      }
-     }
-
-   /**
-    * Import a bundle URL once per page session.
-    * Reuses the same Promise for concurrent callers.
-    * @param {string} bundlePath
-    * @returns {Promise<any>}
-    */
-   importBundleOnce(bundlePath) {
-      if (!bundlePath) {
-         return Promise.reject(new Error('Bundle path is required'));
-      }
-
-      if (this.bundleImportPromises.has(bundlePath)) {
-         return this.bundleImportPromises.get(bundlePath);
-      }
-
-      const importPromise = import(bundlePath).catch((error) => {
-         this.bundleImportPromises.delete(bundlePath);
-         throw error;
-      });
-
-      this.bundleImportPromises.set(bundlePath, importPromise);
-      return importPromise;
-   }
-
-   buildBundleImportPath(bundleInfo) {
-      if (!bundleInfo || typeof bundleInfo.file !== 'string' || bundleInfo.file.length === 0) {
-         throw new Error('Bundle file is required');
-      }
-
-      const basePath = `/bundles/${bundleInfo.file}`;
-      const bundleHash = typeof bundleInfo.hash === 'string' ? bundleInfo.hash.trim() : '';
-      if (!bundleHash) {
-         return basePath;
-      }
-
-      return `${basePath}?v=${encodeURIComponent(bundleHash)}`;
-   }
-
-   /**
-    * Validate Bundling V2 module contract.
-    * Requires named exports: SLICE_BUNDLE_META and registerAll.
-    * @param {any} bundleModule
-    * @param {string} [bundleName]
-    * @returns {{metadata: object, registerAll: Function}}
-    */
-   async validateBundleModule(bundleModule, bundleName = 'unknown') {
-      const metadata = bundleModule?.SLICE_BUNDLE_META;
-      const registerAll = bundleModule?.registerAll;
-
-      if (!metadata || typeof metadata !== 'object' || typeof registerAll !== 'function') {
-         throw new Error(
-            `Bundle "${bundleName}" missing Bundling V2 exports contract: requires SLICE_BUNDLE_META and registerAll`
-         );
-      }
-
-      return { metadata, registerAll };
-   }
-
-   /**
-    * 📦 Loads a bundle by name or category
-    */
-   async loadBundle(bundleName) {
-      const resolvedBundleName = this.resolveBundleName(bundleName);
-      if (this.loadedBundles.has(resolvedBundleName)) {
-         return; // Already loaded
-       }
-
-       return this.loadBundleWithDependencies(resolvedBundleName, new Set());
-      }
-
-   async loadBundleWithDependencies(bundleName, loadingStack = new Set()) {
-      const resolvedBundleName = this.resolveBundleName(bundleName);
-
-      if (this.loadedBundles.has(resolvedBundleName)) {
-         return;
-       }
-
-      if (loadingStack.has(resolvedBundleName)) {
-         throw new Error(`Circular bundle dependency detected: ${Array.from(loadingStack).join(' -> ')} -> ${resolvedBundleName}`);
-       }
-
-      if (this.bundleLoadPromises.has(resolvedBundleName)) {
-         return this.bundleLoadPromises.get(resolvedBundleName);
-       }
-
-      const loadPromise = (async () => {
-         loadingStack.add(resolvedBundleName);
-         try {
-            const bundleInfo = this.getBundleInfo(resolvedBundleName);
-            if (!bundleInfo) {
-               slice.logger.logWarning('Controller', `Bundle ${resolvedBundleName} not found in configuration`);
-               return;
-             }
-
-            const dependencies = this.getBundleDependencies(bundleInfo);
-            for (const dependencyName of dependencies) {
-               await this.loadBundleWithDependencies(dependencyName, loadingStack);
-            }
-
-            const bundlePath = this.buildBundleImportPath(bundleInfo);
-            const bundleModule = await this.importBundleOnce(bundlePath);
-            const { metadata, registerAll } = await this.validateBundleModule(bundleModule, resolvedBundleName);
-
-            const registerResult = await registerAll(this, slice.stylesManager);
-            this.registerVendorSharedDependencies(bundleModule, metadata, resolvedBundleName, registerResult);
-
-            this.loadedBundles.add(resolvedBundleName);
-            const loadedBundleKey = metadata.bundleKey;
-            if (loadedBundleKey && loadedBundleKey !== resolvedBundleName) {
-               this.loadedBundles.add(loadedBundleKey);
-             }
-
-            if (metadata.type === 'critical' || resolvedBundleName === 'critical') {
-               this.criticalBundleLoaded = true;
-             }
-         } finally {
-            loadingStack.delete(resolvedBundleName);
-         }
-      })();
-
-      this.bundleLoadPromises.set(resolvedBundleName, loadPromise);
-      try {
-         return await loadPromise;
-      } finally {
-         this.bundleLoadPromises.delete(resolvedBundleName);
-      }
-   }
-
-   resolveBundleName(bundleName) {
-      if (typeof bundleName !== 'string' || bundleName.length === 0) {
-         return bundleName;
-       }
-
-       if (bundleName.toLowerCase() === 'critical') {
-          return 'critical';
-       }
-
-       if (this.isVendorSharedAlias(bundleName) && this.getVendorSharedBundleInfo()) {
-          return 'vendor-shared';
-       }
-
-      const routeBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.routes, bundleName);
-      if (routeBundleName) {
-         return routeBundleName;
-      }
-
-      const sharedBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.shared, bundleName);
-      if (sharedBundleName) {
-         return sharedBundleName;
-      }
-
-      return bundleName;
-   }
-
-   findBundleNameByAlias(bundleRegistry, bundleName) {
-      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
-         return null;
-      }
-
-      if (bundleRegistry[bundleName]) {
-         return bundleName;
-      }
-
-      const normalizedName = bundleName?.toLowerCase();
-      if (!normalizedName) {
-         return null;
-      }
-
-      return Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName) || null;
-   }
-
-   getBundleDependencies(bundleInfo) {
-      if (!bundleInfo || !Array.isArray(bundleInfo.dependencies)) {
-         return [];
-      }
-
-      return bundleInfo.dependencies.filter((dependency) => typeof dependency === 'string' && dependency.length > 0);
-   }
-
-   findBundleEntryByName(bundleRegistry, bundleName) {
-      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
-         return null;
-      }
-
-      if (bundleRegistry[bundleName]) {
-         return bundleRegistry[bundleName];
-      }
-
-      const normalizedName = bundleName?.toLowerCase();
-      if (!normalizedName) {
-         return null;
-      }
-
-      const matchedKey = Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName);
-      return matchedKey ? bundleRegistry[matchedKey] : null;
-   }
-
-   getBundleInfo(bundleName) {
-      if (bundleName === 'critical') {
-         return this.bundleConfig?.bundles?.critical || null;
-       }
-
-       if (this.isVendorSharedAlias(bundleName)) {
-          return this.getVendorSharedBundleInfo();
-       }
-
-      return (
-         this.findBundleEntryByName(this.bundleConfig?.bundles?.routes, bundleName)
-         || this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, bundleName)
-      );
-   }
-
-   getVendorSharedBundleInfo() {
-      if (this.bundleConfig?.bundles?.vendorShared && typeof this.bundleConfig.bundles.vendorShared === 'object') {
-         return this.bundleConfig.bundles.vendorShared;
-      }
-
-      return this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, 'vendor-shared');
-   }
-
-   isVendorSharedAlias(bundleName) {
-      if (typeof bundleName !== 'string') {
-         return false;
-      }
-
-      const normalized = bundleName.toLowerCase();
-      return normalized === 'vendor-shared' || normalized === 'vendorshared';
-   }
-
-   registerVendorSharedDependencies(bundleModule, metadata, bundleName, registerResult) {
-      const isVendorShared = this.isVendorSharedBundleName(metadata?.bundleKey)
-         || this.isVendorSharedBundleName(bundleName)
-         || metadata?.registerVendorSharedDependencies === true;
-
-      if (!isVendorShared) {
-         return;
-       }
-
-       let sharedDeps = bundleModule?.SLICE_SHARED_DEPS;
-       if (!sharedDeps && registerResult && typeof registerResult === 'object') {
-          sharedDeps = registerResult.SLICE_SHARED_DEPS
-             || registerResult.SLICE_BUNDLE_DEPENDENCIES
-             || registerResult;
-       }
-
-       if (!sharedDeps || typeof sharedDeps !== 'object') {
-          return;
-       }
-
-      if (!window.__SLICE_SHARED_DEPS__ || typeof window.__SLICE_SHARED_DEPS__ !== 'object') {
-         window.__SLICE_SHARED_DEPS__ = {};
-      }
-
-      Object.assign(window.__SLICE_SHARED_DEPS__, sharedDeps);
-   }
-
-   isVendorSharedBundleName(bundleName) {
-      return typeof bundleName === 'string' && bundleName.toLowerCase() === 'vendor-shared';
-   }
-
-   /**
-    * 📦 Registers a bundle's components (called automatically by bundle files)
-    */
-   registerBundleLegacy(bundle) {
-      const { components, metadata } = bundle;
-
-      slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
-
-      // Phase 1: Register templates and CSS for all components first
-      for (const [componentName, componentData] of Object.entries(components)) {
-         try {
-            // Register HTML template
-            if (componentData.html !== undefined && !this.templates.has(componentName)) {
-               const template = document.createElement('template');
-               template.innerHTML = componentData.html || '';
-               this.templates.set(componentName, template);
-            }
-
-            // Register CSS styles
-            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
-               // Use the existing stylesManager to register component styles
-               if (window.slice && window.slice.stylesManager) {
-                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
-                  this.requestedStyles.add(componentName);
-               }
-            }
-         } catch (error) {
-            slice.logger.logError('Controller', `❌ Failed to register assets for ${componentName}`, error);
-         }
-      }
-
-      // Phase 2: Evaluate all external file dependencies
-      const processedDeps = new Set();
-      for (const [componentName, componentData] of Object.entries(components)) {
-         if (componentData.dependencies) {
-            for (const [depName, depContent] of Object.entries(componentData.dependencies)) {
-               if (!processedDeps.has(depName)) {
-                  try {
-                     // Convert ES6 exports to global assignments
-                     let processedContent = depContent
-                        .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
-                        .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
-                        .replace(/export\s+var\s+(\w+)\s*=/g, 'window.$1 =')
-                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
-                        .replace(/export\s+default\s+/g, 'window.defaultExport =')
-                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
-                           return exports
-                              .split(',')
-                              .map((exp) => {
-                                 const cleanExp = exp.trim();
-                                 const varName = cleanExp.split(' as ')[0].trim();
-                                 return `window.${varName} = ${varName};`;
-                              })
-                              .join('\n');
-                        })
-                        // Remove any remaining export keywords
-                        .replace(/^\s*export\s+/gm, '');
-
-                     // Evaluate the dependency
-                     try {
-                        new Function('slice', 'customElements', 'window', 'document', processedContent)(
-                           window.slice,
-                           window.customElements,
-                           window,
-                           window.document
-                        );
-                     } catch (evalError) {
-                         slice.logger.error('Controller', `Failed to evaluate processed dependency ${depName}`, evalError);
-                         slice.logger.warn('Controller', `Processed content preview: ${processedContent.substring(0, 200)}`);
-                         try {
-                            new Function('slice', 'customElements', 'window', 'document', depContent)(
-                               window.slice,
-                               window.customElements,
-                               window,
-                               window.document
-                            );
-                            slice.logger.info('Controller', `Fallback evaluation succeeded for ${depName}`);
-                         } catch (fallbackError) {
-                            slice.logger.error('Controller', `Fallback evaluation also failed for ${depName}`, fallbackError);
-                         }
-                      }
-
-                      processedDeps.add(depName);
-                      slice.logger.info('Controller', `Dependency loaded: ${depName}`);
-                   } catch (depError) {
-                      slice.logger.error('Controller', `Failed to load dependency ${depName} for ${componentName}`, depError);
-                   }
-               }
-            }
-         }
-      }
-
-      // Phase 3: Evaluate all component classes (now that dependencies are available)
-      for (const [componentName, componentData] of Object.entries(components)) {
-         // For JavaScript classes, we need to evaluate the code
-         if (componentData.js && !this.classes.has(componentName)) {
-            try {
-               // Create evaluation context with dependencies
-               let evalCode = componentData.js;
-
-               // Prepend dependencies to make them available
-               if (componentData.dependencies) {
-                  const depCode = Object.entries(componentData.dependencies)
-                     .map(([depName, depContent]) => {
-                        // Convert ES6 exports to global assignments
-                        return depContent
-                           .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
-                           .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
-                           .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
-                           .replace(/export\s+default\s+/g, 'window.defaultExport =')
-                           .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
-                              return exports
-                                 .split(',')
-                                 .map((exp) => {
-                                    const cleanExp = exp.trim();
-                                    return `window.${cleanExp} = ${cleanExp};`;
-                                 })
-                                 .join('\n');
-                           });
-                     })
-                     .join('\n\n');
-
-                  evalCode = depCode + '\n\n' + evalCode;
-               }
-
-               // Evaluate the complete code
-               const componentClass = new Function(
-                  'slice',
-                  'customElements',
-                  'window',
-                  'document',
-                  `
-                     "use strict";
-                     ${evalCode}
-                     return ${componentName};
-                  `
-               )(window.slice, window.customElements, window, window.document);
-
-               if (componentClass) {
-                  this.classes.set(componentName, componentClass);
-                  slice.logger.logInfo('Controller', `📝 Class registered for: ${componentName}`);
-               }
-             } catch (error) {
-                slice.logger.error('Controller', `Failed to evaluate class for ${componentName}`, error);
-                slice.logger.warn('Controller', `Code that failed: ${componentData.js.substring(0, 200) + '...'}`);
-             }
-         }
-      }
-   }
-
-   /**
-    * 📦 New bundle registration method (simplified and robust)
-    */
-     registerBundle(bundle) {
-      const validation = this.validateBundle(bundle);
-        if (!validation.isValid) {
-           slice.logger.error('Controller', `Bundle validation failed: ${validation.error}`);
-          return Promise.resolve(false);
-       }
-
-     // Set tracking flags synchronously before any async work, so callers that
-     // await import() see the flags set immediately when the Promise resolves.
-     const { components, metadata } = bundle;
-     const bundleKey = metadata?.bundleKey;
-     if (bundleKey) {
-        this.loadedBundles.add(bundleKey);
-        if (metadata?.type === 'critical') {
-           this.criticalBundleLoaded = true;
-        }
-     }
-
-    slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
-
-      const entries = Object.entries(components);
-      const chunkSize = 50;
-      let index = 0;
-
-       return new Promise((resolve) => {
-          const processChunk = () => {
-             try {
-                const sliceEntries = entries.slice(index, index + chunkSize);
-
-                for (const [componentName, componentData] of sliceEntries) {
-                   try {
-                      if (componentData.html !== undefined && !this.templates.has(componentName)) {
-                         const template = document.createElement('template');
-                         template.innerHTML = componentData.html || '';
-                         this.templates.set(componentName, template);
-                      }
-
-                      if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
-                         if (window.slice && window.slice.stylesManager) {
-                            window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
-                            this.requestedStyles.add(componentName);
-                         }
-                      }
-
-                       if (componentData.class && !this.classes.has(componentName)) {
-                          const registeredName = componentData.isFramework
-                             ? `Framework/Structural/${componentName}`
-                             : componentName;
-                          this.classes.set(registeredName, componentData.class);
-                          if (componentName === 'Loading') {
-                             slice.logger.logInfo('Controller', `Bundle class registered: Loading (registeredName=${registeredName})`);
-                          }
-                          if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
-                             slice.logger.logInfo('Controller', `Bundle class registered: ${componentName}`);
-                          }
-                       }
-                   } catch (error) {
-                      slice.logger.error('Controller', `Failed to register component ${componentName}`, error);
-                   }
-                }
-
-                index += chunkSize;
-                if (index < entries.length) {
-                   if (typeof requestIdleCallback === 'function') {
-                      requestIdleCallback(processChunk);
-                   } else {
-                      setTimeout(processChunk, 0);
-                   }
-                   return;
-                }
-
-                slice.logger.info('Controller', `Bundle registration completed: ${metadata.componentCount} components processed`);
-                resolve(true);
-             } catch (error) {
-                slice.logger.error('Controller', 'Fatal error in registerBundle chunk processing', error);
-                resolve(false);
-             }
-          };
-
-          processChunk();
-        });
-      }
-
-    /**
-     * Validates bundle structure before registering.
-     * @param {object} bundle
-     * @returns {{isValid: boolean, error?: string}}
-     */
-    validateBundle(bundle) {
-       if (!bundle || typeof bundle !== 'object') {
-          return { isValid: false, error: 'Bundle payload is invalid' };
-       }
-
-       if (!bundle.metadata || typeof bundle.metadata !== 'object') {
-          return { isValid: false, error: 'Bundle metadata missing' };
-       }
-
-       if (!bundle.components || typeof bundle.components !== 'object') {
-          return { isValid: false, error: 'Bundle components missing' };
-       }
-
-       if (typeof bundle.metadata.componentCount !== 'number') {
-          return { isValid: false, error: 'Bundle metadata missing componentCount' };
-       }
-
-       if (bundle.metadata.componentCount !== Object.keys(bundle.components).length) {
-          return { isValid: false, error: 'Bundle component count mismatch' };
-       }
-
-       const maxComponents = 5000;
-       if (bundle.metadata.componentCount > maxComponents) {
-          return { isValid: false, error: 'Bundle component count exceeds limit' };
-       }
-
-       return { isValid: true };
-    }
-
-   /**
-    * 📦 Determines which bundle to load for a component
-    */
-   getBundleForComponent(componentName) {
-      if (!this.bundleConfig?.bundles) return null;
-
-      // Check if component is in critical bundle
-      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
-         return 'critical';
-      }
-
-      // Find component in route bundles
-      if (this.bundleConfig.bundles.routes) {
-         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
-            if (bundleInfo.components?.includes(componentName)) {
-               return bundleName;
-            }
-         }
-      }
-
-      return null;
-   }
-
-   /**
-    * 📦 Checks if a component is available from loaded bundles
-    */
-   isComponentFromBundle(componentName) {
-      if (!this.bundleConfig?.bundles) return false;
-
-      // Check critical bundle
-      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
-         return this.criticalBundleLoaded;
-      }
-
-      // Check route bundles
-      if (this.bundleConfig.bundles.routes) {
-         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
-            if (bundleInfo.components?.includes(componentName)) {
-               return this.loadedBundles.has(bundleName);
-            }
-         }
-      }
-
-      return false;
-   }
-
-   /**
-    * 📦 Gets component data from loaded bundles
-    */
-   getComponentFromBundle(componentName) {
-      if (!this.bundleConfig?.bundles) return null;
-
-      // Find component in any loaded bundle
-      const allBundles = [
-         { name: 'critical', data: this.bundleConfig.bundles.critical },
-         ...Object.entries(this.bundleConfig.bundles.routes || {}).map(([name, data]) => ({ name, data })),
-      ];
-
-      for (const { name: bundleName, data: bundleData } of allBundles) {
-         if (bundleData?.components?.includes(componentName) && this.loadedBundles.has(bundleName)) {
-            // Find the bundle file and extract component data
-            // This is a simplified version - in practice you'd need to access the loaded bundle data
-            return { bundleName, componentName };
-         }
-      }
-
-      return null;
-   }
-
-   logActiveComponents() {
-      this.activeComponents.forEach((component) => {
-         let parent = component.parentComponent;
-         let parentName = parent ? parent.constructor.name : null;
-      });
-   }
-
-   getTopParentsLinkedToActiveComponents() {
-      let topParentsLinkedToActiveComponents = new Map();
-      this.activeComponents.forEach((component) => {
-         let parent = component.parentComponent;
-         while (parent && parent.parentComponent) {
-            parent = parent.parentComponent;
-         }
-         if (!topParentsLinkedToActiveComponents.has(parent)) {
-            topParentsLinkedToActiveComponents.set(parent, []);
-         }
-         topParentsLinkedToActiveComponents.get(parent).push(component);
-      });
-      return topParentsLinkedToActiveComponents;
-   }
-
-   verifyComponentIds(component) {
-      const htmlId = component.id;
-
-      if (htmlId && htmlId.trim() !== '') {
-         if (this.activeComponents.has(htmlId)) {
-            slice.logger.logError(
-               'Controller',
-               `A component with the same html id attribute is already registered: ${htmlId}`
-            );
-            return false;
-         }
-      }
-
-      let sliceId = component.sliceId;
-
-      if (sliceId && sliceId.trim() !== '') {
-         if (this.activeComponents.has(sliceId)) {
-            slice.logger.logError(
-               'Controller',
-               `A component with the same slice id attribute is already registered: ${sliceId}`
-            );
-            return false;
-         }
-      } else {
-         sliceId = `${component.constructor.name[0].toLowerCase()}${component.constructor.name.slice(1)}-${this.idCounter}`;
-         component.sliceId = sliceId;
-         this.idCounter++;
-      }
-
-      component.sliceId = sliceId;
-      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);
-
-      // Exponer sliceId como atributo HTML para búsqueda por DOM (destroyByContainer, etc.)
-      if (typeof component.setAttribute === 'function') {
-         component.setAttribute('slice-id', component.sliceId);
-      }
-
-      // 🚀 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;
-   }
-
-   registerComponentsRecursively(component, parent = null) {
-      // Assign parent if not already set
-      if (!component.parentComponent) {
-         component.parentComponent = parent;
-      }
-
-      // Recursively assign parent to children
-      component.querySelectorAll('*').forEach((child) => {
-         if (child.tagName.startsWith('SLICE-')) {
-            // Only the call that establishes the DIRECT parent link feeds the
-            // index — the depth-first recursion sets a node's parent before an
-            // outer ancestor's forEach reaches it, so `component` here is the
-            // immediate enclosing component.
-            if (!child.parentComponent) {
-               child.parentComponent = component;
-               // 🔁 Maintain childrenIndex so destroyComponent(parent) cascades
-               // to children built via slice.build (which registers them WITHOUT
-               // a parent, leaving the index otherwise empty). Without this, a
-               // parent's destroy never finds — and never cleans up — its children.
-               if (child.sliceId && component.sliceId) {
-                  if (!this.childrenIndex.has(component.sliceId)) {
-                     this.childrenIndex.set(component.sliceId, new Set());
-                  }
-                  this.childrenIndex.get(component.sliceId).add(child.sliceId);
-                  child._depth = (component._depth || 0) + 1;
-               }
-            }
-            this.registerComponentsRecursively(child, component);
-         }
-      });
-   }
-
-   /**
-    * Get a registered component by sliceId.
-    * @param {string} sliceId
-    * @returns {HTMLElement|undefined}
-    */
-   getComponent(sliceId) {
-      return this.activeComponents.get(sliceId);
-   }
-
-   /**
-    * Get-or-create a single instance keyed by sliceId, deduplicating concurrent
-    * builds. Returns the existing instance if already registered, the in-flight
-    * promise if a build is underway, or otherwise memoizes a fresh build via
-    * `builder` (an injected closure — the controller never builds by itself).
-    *
-    * The in-flight promise is removed once it settles, so a failed build (which
-    * resolves to `null` and never registers in activeComponents) can be retried
-    * by a later call and never poisons the registry.
-    *
-    * @param {string} sliceId
-    * @param {() => Promise<any>} builder
-    * @returns {any|Promise<any>} instance (sync) or Promise<instance>
-    */
-   getOrCreate(sliceId, builder) {
-      const existing = this.activeComponents.get(sliceId);
-      if (existing) return existing;
-
-      const pending = this._pendingBuilds.get(sliceId);
-      if (pending) return pending;
-
-      const promise = Promise.resolve(builder())
-         .finally(() => this._pendingBuilds.delete(sliceId));
-      this._pendingBuilds.set(sliceId, promise);
-      return promise;
-   }
-
-   loadTemplateToComponent(component) {
-      const className = component.constructor.name;
-      const template = this.templates.get(className);
-
-      if (!template) {
-         slice.logger.error('Controller', `Template not found for component: ${className}`);
-         return;
-      }
-
-      component.innerHTML = template.innerHTML;
-      return component;
-   }
-
-   getComponentCategory(componentSliceId) {
-      return this.componentCategories.get(componentSliceId);
-   }
-
-   /**
-    * Fetch component resources (html, css, styles, theme).
-    * @param {string} componentName
-    * @param {'html'|'css'|'theme'|'styles'} resourceType
-    * @param {string} [componentCategory]
-    * @param {string} [customPath]
-    * @returns {Promise<string>}
-    */
-   async fetchText(componentName, resourceType, componentCategory, customPath) {
-      try {
-         const baseUrl = window.location.origin;
-         let path;
-
-         if (!componentCategory) {
-            componentCategory = this.componentCategories.get(componentName);
-         }
-
-         let isVisual = resourceType === 'html' || resourceType === 'css';
-
-         if (isVisual) {
-            if (slice.paths.components[componentCategory]) {
-               path = `${baseUrl}${slice.paths.components[componentCategory].path}/${componentName}`;
-               resourceType === 'html' ? (path += `/${componentName}.html`) : (path += `/${componentName}.css`);
-            } else {
-               if (componentCategory === 'Structural') {
-                  path = `${baseUrl}/Slice/Components/Structural/${componentName}`;
-                  resourceType === 'html' ? (path += `/${componentName}.html`) : (path += `/${componentName}.css`);
-               } else {
-                  throw new Error(`Component category '${componentCategory}' not found in paths configuration`);
-               }
-            }
-         }
-
-         if (resourceType === 'theme') {
-            path = `${baseUrl}${slice.paths.themes}/${componentName}.css`;
-         }
-
-         if (resourceType === 'styles') {
-            path = `${baseUrl}${slice.paths.styles}/${componentName}.css`;
-         }
-
-         if (customPath) {
-            path = customPath;
-         }
-
-         slice.logger.logInfo('Controller', `Fetching ${resourceType} from: ${path}`);
-
-         const response = await fetch(path);
-
-         if (!response.ok) {
-            throw new Error(`Failed to fetch ${path}: ${response.statusText}`);
-         }
-
-         const content = await response.text();
-         slice.logger.logInfo('Controller', `Successfully fetched ${resourceType} for ${componentName}`);
-         return content;
-      } catch (error) {
-         slice.logger.logError('Controller', `Error fetching ${resourceType} for component ${componentName}:`, error);
-         throw error;
-      }
-   }
-
-   /**
-    * Apply props to a component using static defaults and setters.
-    * @param {HTMLElement} component
-    * @param {Object} props
-    * @returns {void}
-    */
-   setComponentProps(component, props) {
-      const ComponentClass = component.constructor;
-      const componentName = ComponentClass.name;
-
-      // Aplicar defaults si tiene static props
-      if (ComponentClass.props) {
-         this.applyDefaultProps(component, ComponentClass.props, props);
-      }
-
-      // Validar solo en desarrollo
-      if (ComponentClass.props && !slice.isProduction()) {
-         this.validatePropsInDevelopment(ComponentClass, props, componentName);
-      }
-
-      // Aplicar props
-      for (const prop in props) {
-         component[`_${prop}`] = null;
-         component[prop] = props[prop];
-      }
-   }
-
-   getComponentPropsForDebugger(component) {
-      const ComponentClass = component.constructor;
-
-      if (ComponentClass.props) {
-         return {
-            availableProps: Object.keys(ComponentClass.props),
-            propsConfig: ComponentClass.props,
-            usedProps: this.extractUsedProps(component, ComponentClass.props),
-         };
-      } else {
-         return {
-            availableProps: this.extractUsedProps(component),
-            propsConfig: null,
-            usedProps: this.extractUsedProps(component),
-         };
-      }
-   }
-
-   applyDefaultProps(component, staticProps, providedProps) {
-      Object.entries(staticProps).forEach(([prop, config]) => {
-         if (config.default !== undefined && !(prop in (providedProps || {}))) {
-            component[`_${prop}`] = null;
-            component[prop] = config.default;
-         }
-      });
-   }
-
-   validatePropsInDevelopment(ComponentClass, providedProps, componentName) {
-      const staticProps = ComponentClass.props;
-      const usedProps = Object.keys(providedProps || {});
-
-      const availableProps = Object.keys(staticProps);
-      const unknownProps = usedProps.filter((prop) => !availableProps.includes(prop));
-
-      if (unknownProps.length > 0) {
-         slice.logger.logWarning(
-            'PropsValidator',
-            `${componentName}: Unknown props [${unknownProps.join(', ')}]. Available: [${availableProps.join(', ')}]`
-         );
-      }
-
-      const requiredProps = Object.entries(staticProps)
-         .filter(([_, config]) => config.required)
-         .map(([prop, _]) => prop);
-
-      const missingRequired = requiredProps.filter((prop) => !(prop in (providedProps || {})));
-      if (missingRequired.length > 0) {
-         slice.logger.logError(componentName, `Missing required props: [${missingRequired.join(', ')}]`);
-      }
-
-      const invalidAllowedValueProps = collectInvalidAllowedValueProps(staticProps, providedProps);
-      invalidAllowedValueProps.forEach(({ propName, value, allowedValues }) => {
-         const safeValue = (() => { try { return JSON.stringify(value); } catch { return String(value); } })();
-         slice.logger.error(
-            componentName,
-            `Invalid value for prop "${propName}": ${safeValue}. Allowed values: ${formatAllowedValuesForLog(allowedValues)}`
-         );
-      });
-   }
-
-   extractUsedProps(component, staticProps = null) {
-      const usedProps = {};
-
-      if (staticProps) {
-         Object.keys(staticProps).forEach((prop) => {
-            if (component[prop] !== undefined) {
-               usedProps[prop] = component[prop];
-            }
-         });
-      } else {
-         Object.getOwnPropertyNames(component).forEach((key) => {
-            if (key.startsWith('_') && key !== '_isActive') {
-               const propName = key.substring(1);
-               usedProps[propName] = component[propName];
-            }
-         });
-      }
-
-      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 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
-    * @returns {number} Cantidad de componentes destruidos (incluyendo hijos)
-    */
-   destroyComponent(components) {
-      const toDestroy = Array.isArray(components) ? components : [components];
-      const allSliceIdsToDestroy = new Set();
-
-      // PASO 1: Recolectar todos los componentes padres y sus hijos recursivamente
-      for (const item of toDestroy) {
-         let sliceId = null;
-
-         if (typeof item === 'string') {
-            if (!this.activeComponents.has(item)) {
-               slice.logger.logWarning('Controller', `Component with sliceId "${item}" not found`);
-               continue;
-            }
-            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 ${sliceId}`, error);
-            }
-         }
-
-         // Limpiar suscripciones de eventos del componente
-         if (slice.events) {
-            slice.events.cleanupComponent(sliceId);
-         }
-
-         // 🚀 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(sliceId);
-
-         // Remover del DOM si está conectado
-         if (component.isConnected) {
-            component.remove();
-         }
-
-         destroyedCount++;
-      }
-
-      if (destroyedCount > 0) {
-         slice.logger.logInfo('Controller', `Destroyed ${destroyedCount} component(s) recursively`);
-      }
-
-      return destroyedCount;
-   }
-
-   /**
-    * 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
-    */
-   destroyByContainer(container) {
-      if (!container) {
-         slice.logger.logWarning('Controller', 'No container provided to destroyByContainer');
-         return 0;
-      }
-
-      // 🚀 Recolectar componentes usando índice optimizado
-      const allSliceIds = this.findAllNestedComponentsInContainer(container);
-
-      if (allSliceIds.size === 0) {
-         return 0;
-      }
-
-      // 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 (including nested)`);
-      }
-
-      return count;
-   }
-
-   /**
-    * 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 = [];
-      const regex = pattern instanceof RegExp ? pattern : new RegExp(pattern);
-
-      for (const [sliceId, component] of this.activeComponents) {
-         if (regex.test(sliceId)) {
-            componentsToDestroy.push(component);
-         }
-      }
-
-      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} (including nested)`
-         );
-      }
-
-      return count;
-   }
-}
+import components from '/Components/components.js';
+import { collectInvalidAllowedValueProps, formatAllowedValuesForLog } from './allowedValuesValidation.js';
+
+export default class Controller {
+   constructor() {
+      this.componentCategories = new Map(Object.entries(components));
+      this.templates = new Map();
+      this.classes = new Map();
+      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();
+
+      // 📦 Bundle system
+      this.loadedBundles = new Set();
+      this.bundleConfig = null;
+      this.criticalBundleLoaded = false;
+      this.bundleImportPromises = new Map();
+      this.bundleLoadPromises = new Map();
+
+      // 🔁 Singleton builds in flight: sliceId → Promise<instance>.
+      // Lets concurrent build({singleton:true}) calls share one build instead
+      // of racing on a duplicate sliceId. Entries are transient (deleted on settle).
+      this._pendingBuilds = new Map();
+
+      this.idCounter = 0;
+
+      // 🔍 Leak detection (dev-only). App-provided predicates that mark a
+      // detached-but-registered component as intentional (not a leak).
+      this._leakExclusions = [];
+      // Ring buffer of activeComponents.size samples for the growth heuristic.
+      this._growthSamples = [];
+   }
+
+   /**
+    * 📦 Initializes bundle system (called automatically when config is loaded)
+    */
+    initializeBundles(config = null) {
+       if (config) {
+          this.bundleConfig = config;
+
+          // Register critical bundle components if available
+          if (config.bundles?.critical) {
+            // Critical bundle will be loaded explicitly
+          }
+          this.criticalBundleLoaded = false;
+       } else {
+          // No bundles available, will use individual component loading
+          this.bundleConfig = null;
+          this.criticalBundleLoaded = false;
+      }
+     }
+
+   /**
+    * Import a bundle URL once per page session.
+    * Reuses the same Promise for concurrent callers.
+    * @param {string} bundlePath
+    * @returns {Promise<any>}
+    */
+   importBundleOnce(bundlePath) {
+      if (!bundlePath) {
+         return Promise.reject(new Error('Bundle path is required'));
+      }
+
+      if (this.bundleImportPromises.has(bundlePath)) {
+         return this.bundleImportPromises.get(bundlePath);
+      }
+
+      const importPromise = import(bundlePath).catch((error) => {
+         this.bundleImportPromises.delete(bundlePath);
+         throw error;
+      });
+
+      this.bundleImportPromises.set(bundlePath, importPromise);
+      return importPromise;
+   }
+
+   buildBundleImportPath(bundleInfo) {
+      if (!bundleInfo || typeof bundleInfo.file !== 'string' || bundleInfo.file.length === 0) {
+         throw new Error('Bundle file is required');
+      }
+
+      const basePath = `/bundles/${bundleInfo.file}`;
+      const bundleHash = typeof bundleInfo.hash === 'string' ? bundleInfo.hash.trim() : '';
+      if (!bundleHash) {
+         return basePath;
+      }
+
+      return `${basePath}?v=${encodeURIComponent(bundleHash)}`;
+   }
+
+   /**
+    * Validate Bundling V2 module contract.
+    * Requires named exports: SLICE_BUNDLE_META and registerAll.
+    * @param {any} bundleModule
+    * @param {string} [bundleName]
+    * @returns {{metadata: object, registerAll: Function}}
+    */
+   async validateBundleModule(bundleModule, bundleName = 'unknown') {
+      const metadata = bundleModule?.SLICE_BUNDLE_META;
+      const registerAll = bundleModule?.registerAll;
+
+      if (!metadata || typeof metadata !== 'object' || typeof registerAll !== 'function') {
+         throw new Error(
+            `Bundle "${bundleName}" missing Bundling V2 exports contract: requires SLICE_BUNDLE_META and registerAll`
+         );
+      }
+
+      return { metadata, registerAll };
+   }
+
+   /**
+    * 📦 Loads a bundle by name or category
+    */
+   async loadBundle(bundleName) {
+      const resolvedBundleName = this.resolveBundleName(bundleName);
+      if (this.loadedBundles.has(resolvedBundleName)) {
+         return; // Already loaded
+       }
+
+       return this.loadBundleWithDependencies(resolvedBundleName, new Set());
+      }
+
+   async loadBundleWithDependencies(bundleName, loadingStack = new Set()) {
+      const resolvedBundleName = this.resolveBundleName(bundleName);
+
+      if (this.loadedBundles.has(resolvedBundleName)) {
+         return;
+       }
+
+      if (loadingStack.has(resolvedBundleName)) {
+         throw new Error(`Circular bundle dependency detected: ${Array.from(loadingStack).join(' -> ')} -> ${resolvedBundleName}`);
+       }
+
+      if (this.bundleLoadPromises.has(resolvedBundleName)) {
+         return this.bundleLoadPromises.get(resolvedBundleName);
+       }
+
+      const loadPromise = (async () => {
+         loadingStack.add(resolvedBundleName);
+         try {
+            const bundleInfo = this.getBundleInfo(resolvedBundleName);
+            if (!bundleInfo) {
+               slice.logger.logWarning('Controller', `Bundle ${resolvedBundleName} not found in configuration`);
+               return;
+             }
+
+            const dependencies = this.getBundleDependencies(bundleInfo);
+            for (const dependencyName of dependencies) {
+               await this.loadBundleWithDependencies(dependencyName, loadingStack);
+            }
+
+            const bundlePath = this.buildBundleImportPath(bundleInfo);
+            const bundleModule = await this.importBundleOnce(bundlePath);
+            const { metadata, registerAll } = await this.validateBundleModule(bundleModule, resolvedBundleName);
+
+            const registerResult = await registerAll(this, slice.stylesManager);
+            this.registerVendorSharedDependencies(bundleModule, metadata, resolvedBundleName, registerResult);
+
+            this.loadedBundles.add(resolvedBundleName);
+            const loadedBundleKey = metadata.bundleKey;
+            if (loadedBundleKey && loadedBundleKey !== resolvedBundleName) {
+               this.loadedBundles.add(loadedBundleKey);
+             }
+
+            if (metadata.type === 'critical' || resolvedBundleName === 'critical') {
+               this.criticalBundleLoaded = true;
+             }
+         } finally {
+            loadingStack.delete(resolvedBundleName);
+         }
+      })();
+
+      this.bundleLoadPromises.set(resolvedBundleName, loadPromise);
+      try {
+         return await loadPromise;
+      } finally {
+         this.bundleLoadPromises.delete(resolvedBundleName);
+      }
+   }
+
+   resolveBundleName(bundleName) {
+      if (typeof bundleName !== 'string' || bundleName.length === 0) {
+         return bundleName;
+       }
+
+       if (bundleName.toLowerCase() === 'critical') {
+          return 'critical';
+       }
+
+       if (this.isVendorSharedAlias(bundleName) && this.getVendorSharedBundleInfo()) {
+          return 'vendor-shared';
+       }
+
+      const routeBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.routes, bundleName);
+      if (routeBundleName) {
+         return routeBundleName;
+      }
+
+      const sharedBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.shared, bundleName);
+      if (sharedBundleName) {
+         return sharedBundleName;
+      }
+
+      return bundleName;
+   }
+
+   findBundleNameByAlias(bundleRegistry, bundleName) {
+      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
+         return null;
+      }
+
+      if (bundleRegistry[bundleName]) {
+         return bundleName;
+      }
+
+      const normalizedName = bundleName?.toLowerCase();
+      if (!normalizedName) {
+         return null;
+      }
+
+      return Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName) || null;
+   }
+
+   getBundleDependencies(bundleInfo) {
+      if (!bundleInfo || !Array.isArray(bundleInfo.dependencies)) {
+         return [];
+      }
+
+      return bundleInfo.dependencies.filter((dependency) => typeof dependency === 'string' && dependency.length > 0);
+   }
+
+   findBundleEntryByName(bundleRegistry, bundleName) {
+      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
+         return null;
+      }
+
+      if (bundleRegistry[bundleName]) {
+         return bundleRegistry[bundleName];
+      }
+
+      const normalizedName = bundleName?.toLowerCase();
+      if (!normalizedName) {
+         return null;
+      }
+
+      const matchedKey = Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName);
+      return matchedKey ? bundleRegistry[matchedKey] : null;
+   }
+
+   getBundleInfo(bundleName) {
+      if (bundleName === 'critical') {
+         return this.bundleConfig?.bundles?.critical || null;
+       }
+
+       if (this.isVendorSharedAlias(bundleName)) {
+          return this.getVendorSharedBundleInfo();
+       }
+
+      return (
+         this.findBundleEntryByName(this.bundleConfig?.bundles?.routes, bundleName)
+         || this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, bundleName)
+      );
+   }
+
+   getVendorSharedBundleInfo() {
+      if (this.bundleConfig?.bundles?.vendorShared && typeof this.bundleConfig.bundles.vendorShared === 'object') {
+         return this.bundleConfig.bundles.vendorShared;
+      }
+
+      return this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, 'vendor-shared');
+   }
+
+   isVendorSharedAlias(bundleName) {
+      if (typeof bundleName !== 'string') {
+         return false;
+      }
+
+      const normalized = bundleName.toLowerCase();
+      return normalized === 'vendor-shared' || normalized === 'vendorshared';
+   }
+
+   registerVendorSharedDependencies(bundleModule, metadata, bundleName, registerResult) {
+      const isVendorShared = this.isVendorSharedBundleName(metadata?.bundleKey)
+         || this.isVendorSharedBundleName(bundleName)
+         || metadata?.registerVendorSharedDependencies === true;
+
+      if (!isVendorShared) {
+         return;
+       }
+
+       let sharedDeps = bundleModule?.SLICE_SHARED_DEPS;
+       if (!sharedDeps && registerResult && typeof registerResult === 'object') {
+          sharedDeps = registerResult.SLICE_SHARED_DEPS
+             || registerResult.SLICE_BUNDLE_DEPENDENCIES
+             || registerResult;
+       }
+
+       if (!sharedDeps || typeof sharedDeps !== 'object') {
+          return;
+       }
+
+      if (!window.__SLICE_SHARED_DEPS__ || typeof window.__SLICE_SHARED_DEPS__ !== 'object') {
+         window.__SLICE_SHARED_DEPS__ = {};
+      }
+
+      Object.assign(window.__SLICE_SHARED_DEPS__, sharedDeps);
+   }
+
+   isVendorSharedBundleName(bundleName) {
+      return typeof bundleName === 'string' && bundleName.toLowerCase() === 'vendor-shared';
+   }
+
+   /**
+    * 📦 Registers a bundle's components (called automatically by bundle files)
+    */
+   registerBundleLegacy(bundle) {
+      const { components, metadata } = bundle;
+
+      slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      // Phase 1: Register templates and CSS for all components first
+      for (const [componentName, componentData] of Object.entries(components)) {
+         try {
+            // Register HTML template
+            if (componentData.html !== undefined && !this.templates.has(componentName)) {
+               const template = document.createElement('template');
+               template.innerHTML = componentData.html || '';
+               this.templates.set(componentName, template);
+            }
+
+            // Register CSS styles
+            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+               // Use the existing stylesManager to register component styles
+               if (window.slice && window.slice.stylesManager) {
+                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                  this.requestedStyles.add(componentName);
+               }
+            }
+         } catch (error) {
+            slice.logger.logError('Controller', `❌ Failed to register assets for ${componentName}`, error);
+         }
+      }
+
+      // Phase 2: Evaluate all external file dependencies
+      const processedDeps = new Set();
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.dependencies) {
+            for (const [depName, depContent] of Object.entries(componentData.dependencies)) {
+               if (!processedDeps.has(depName)) {
+                  try {
+                     // Convert ES6 exports to global assignments
+                     let processedContent = depContent
+                        .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+var\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                        .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                           return exports
+                              .split(',')
+                              .map((exp) => {
+                                 const cleanExp = exp.trim();
+                                 const varName = cleanExp.split(' as ')[0].trim();
+                                 return `window.${varName} = ${varName};`;
+                              })
+                              .join('\n');
+                        })
+                        // Remove any remaining export keywords
+                        .replace(/^\s*export\s+/gm, '');
+
+                     // Evaluate the dependency
+                     try {
+                        new Function('slice', 'customElements', 'window', 'document', processedContent)(
+                           window.slice,
+                           window.customElements,
+                           window,
+                           window.document
+                        );
+                     } catch (evalError) {
+                         slice.logger.error('Controller', `Failed to evaluate processed dependency ${depName}`, evalError);
+                         slice.logger.warn('Controller', `Processed content preview: ${processedContent.substring(0, 200)}`);
+                         try {
+                            new Function('slice', 'customElements', 'window', 'document', depContent)(
+                               window.slice,
+                               window.customElements,
+                               window,
+                               window.document
+                            );
+                            slice.logger.info('Controller', `Fallback evaluation succeeded for ${depName}`);
+                         } catch (fallbackError) {
+                            slice.logger.error('Controller', `Fallback evaluation also failed for ${depName}`, fallbackError);
+                         }
+                      }
+
+                      processedDeps.add(depName);
+                      slice.logger.info('Controller', `Dependency loaded: ${depName}`);
+                   } catch (depError) {
+                      slice.logger.error('Controller', `Failed to load dependency ${depName} for ${componentName}`, depError);
+                   }
+               }
+            }
+         }
+      }
+
+      // Phase 3: Evaluate all component classes (now that dependencies are available)
+      for (const [componentName, componentData] of Object.entries(components)) {
+         // For JavaScript classes, we need to evaluate the code
+         if (componentData.js && !this.classes.has(componentName)) {
+            try {
+               // Create evaluation context with dependencies
+               let evalCode = componentData.js;
+
+               // Prepend dependencies to make them available
+               if (componentData.dependencies) {
+                  const depCode = Object.entries(componentData.dependencies)
+                     .map(([depName, depContent]) => {
+                        // Convert ES6 exports to global assignments
+                        return depContent
+                           .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                           .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                           .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                           .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                           .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                              return exports
+                                 .split(',')
+                                 .map((exp) => {
+                                    const cleanExp = exp.trim();
+                                    return `window.${cleanExp} = ${cleanExp};`;
+                                 })
+                                 .join('\n');
+                           });
+                     })
+                     .join('\n\n');
+
+                  evalCode = depCode + '\n\n' + evalCode;
+               }
+
+               // Evaluate the complete code
+               const componentClass = new Function(
+                  'slice',
+                  'customElements',
+                  'window',
+                  'document',
+                  `
+                     "use strict";
+                     ${evalCode}
+                     return ${componentName};
+                  `
+               )(window.slice, window.customElements, window, window.document);
+
+               if (componentClass) {
+                  this.classes.set(componentName, componentClass);
+                  slice.logger.logInfo('Controller', `📝 Class registered for: ${componentName}`);
+               }
+             } catch (error) {
+                slice.logger.error('Controller', `Failed to evaluate class for ${componentName}`, error);
+                slice.logger.warn('Controller', `Code that failed: ${componentData.js.substring(0, 200) + '...'}`);
+             }
+         }
+      }
+   }
+
+   /**
+    * 📦 New bundle registration method (simplified and robust)
+    */
+     registerBundle(bundle) {
+      const validation = this.validateBundle(bundle);
+        if (!validation.isValid) {
+           slice.logger.error('Controller', `Bundle validation failed: ${validation.error}`);
+          return Promise.resolve(false);
+       }
+
+     // Set tracking flags synchronously before any async work, so callers that
+     // await import() see the flags set immediately when the Promise resolves.
+     const { components, metadata } = bundle;
+     const bundleKey = metadata?.bundleKey;
+     if (bundleKey) {
+        this.loadedBundles.add(bundleKey);
+        if (metadata?.type === 'critical') {
+           this.criticalBundleLoaded = true;
+        }
+     }
+
+    slice.logger.logInfo('Controller', `📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      const entries = Object.entries(components);
+      const chunkSize = 50;
+      let index = 0;
+
+       return new Promise((resolve) => {
+          const processChunk = () => {
+             try {
+                const sliceEntries = entries.slice(index, index + chunkSize);
+
+                for (const [componentName, componentData] of sliceEntries) {
+                   try {
+                      if (componentData.html !== undefined && !this.templates.has(componentName)) {
+                         const template = document.createElement('template');
+                         template.innerHTML = componentData.html || '';
+                         this.templates.set(componentName, template);
+                      }
+
+                      if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+                         if (window.slice && window.slice.stylesManager) {
+                            window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                            this.requestedStyles.add(componentName);
+                         }
+                      }
+
+                       if (componentData.class && !this.classes.has(componentName)) {
+                          const registeredName = componentData.isFramework
+                             ? `Framework/Structural/${componentName}`
+                             : componentName;
+                          this.classes.set(registeredName, componentData.class);
+                          if (componentName === 'Loading') {
+                             slice.logger.logInfo('Controller', `Bundle class registered: Loading (registeredName=${registeredName})`);
+                          }
+                          if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
+                             slice.logger.logInfo('Controller', `Bundle class registered: ${componentName}`);
+                          }
+                       }
+                   } catch (error) {
+                      slice.logger.error('Controller', `Failed to register component ${componentName}`, error);
+                   }
+                }
+
+                index += chunkSize;
+                if (index < entries.length) {
+                   if (typeof requestIdleCallback === 'function') {
+                      requestIdleCallback(processChunk);
+                   } else {
+                      setTimeout(processChunk, 0);
+                   }
+                   return;
+                }
+
+                slice.logger.info('Controller', `Bundle registration completed: ${metadata.componentCount} components processed`);
+                resolve(true);
+             } catch (error) {
+                slice.logger.error('Controller', 'Fatal error in registerBundle chunk processing', error);
+                resolve(false);
+             }
+          };
+
+          processChunk();
+        });
+      }
+
+    /**
+     * Validates bundle structure before registering.
+     * @param {object} bundle
+     * @returns {{isValid: boolean, error?: string}}
+     */
+    validateBundle(bundle) {
+       if (!bundle || typeof bundle !== 'object') {
+          return { isValid: false, error: 'Bundle payload is invalid' };
+       }
+
+       if (!bundle.metadata || typeof bundle.metadata !== 'object') {
+          return { isValid: false, error: 'Bundle metadata missing' };
+       }
+
+       if (!bundle.components || typeof bundle.components !== 'object') {
+          return { isValid: false, error: 'Bundle components missing' };
+       }
+
+       if (typeof bundle.metadata.componentCount !== 'number') {
+          return { isValid: false, error: 'Bundle metadata missing componentCount' };
+       }
+
+       if (bundle.metadata.componentCount !== Object.keys(bundle.components).length) {
+          return { isValid: false, error: 'Bundle component count mismatch' };
+       }
+
+       const maxComponents = 5000;
+       if (bundle.metadata.componentCount > maxComponents) {
+          return { isValid: false, error: 'Bundle component count exceeds limit' };
+       }
+
+       return { isValid: true };
+    }
+
+   /**
+    * 📦 Determines which bundle to load for a component
+    */
+   getBundleForComponent(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Check if component is in critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return 'critical';
+      }
+
+      // Find component in route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return bundleName;
+            }
+         }
+      }
+
+      return null;
+   }
+
+   /**
+    * 📦 Checks if a component is available from loaded bundles
+    */
+   isComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return false;
+
+      // Check critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return this.criticalBundleLoaded;
+      }
+
+      // Check route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return this.loadedBundles.has(bundleName);
+            }
+         }
+      }
+
+      return false;
+   }
+
+   /**
+    * 📦 Gets component data from loaded bundles
+    */
+   getComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Find component in any loaded bundle
+      const allBundles = [
+         { name: 'critical', data: this.bundleConfig.bundles.critical },
+         ...Object.entries(this.bundleConfig.bundles.routes || {}).map(([name, data]) => ({ name, data })),
+      ];
+
+      for (const { name: bundleName, data: bundleData } of allBundles) {
+         if (bundleData?.components?.includes(componentName) && this.loadedBundles.has(bundleName)) {
+            // Find the bundle file and extract component data
+            // This is a simplified version - in practice you'd need to access the loaded bundle data
+            return { bundleName, componentName };
+         }
+      }
+
+      return null;
+   }
+
+   logActiveComponents() {
+      this.activeComponents.forEach((component) => {
+         let parent = component.parentComponent;
+         let parentName = parent ? parent.constructor.name : null;
+      });
+   }
+
+   getTopParentsLinkedToActiveComponents() {
+      let topParentsLinkedToActiveComponents = new Map();
+      this.activeComponents.forEach((component) => {
+         let parent = component.parentComponent;
+         while (parent && parent.parentComponent) {
+            parent = parent.parentComponent;
+         }
+         if (!topParentsLinkedToActiveComponents.has(parent)) {
+            topParentsLinkedToActiveComponents.set(parent, []);
+         }
+         topParentsLinkedToActiveComponents.get(parent).push(component);
+      });
+      return topParentsLinkedToActiveComponents;
+   }
+
+   verifyComponentIds(component) {
+      const htmlId = component.id;
+
+      if (htmlId && htmlId.trim() !== '') {
+         if (this.activeComponents.has(htmlId)) {
+            slice.logger.logError(
+               'Controller',
+               `A component with the same html id attribute is already registered: ${htmlId}`
+            );
+            return false;
+         }
+      }
+
+      let sliceId = component.sliceId;
+
+      if (sliceId && sliceId.trim() !== '') {
+         if (this.activeComponents.has(sliceId)) {
+            slice.logger.logError(
+               'Controller',
+               `A component with the same slice id attribute is already registered: ${sliceId}`
+            );
+            return false;
+         }
+      } else {
+         sliceId = `${component.constructor.name[0].toLowerCase()}${component.constructor.name.slice(1)}-${this.idCounter}`;
+         component.sliceId = sliceId;
+         this.idCounter++;
+      }
+
+      component.sliceId = sliceId;
+      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);
+
+      // Exponer sliceId como atributo HTML para búsqueda por DOM (destroyByContainer, etc.)
+      if (typeof component.setAttribute === 'function') {
+         component.setAttribute('slice-id', component.sliceId);
+      }
+
+      // Envolver update() propio (si lo define) con re-entrada + limpieza por
+      // liveness. Se hace aquí (post-registro) para que `alive()` funcione y para
+      // que un update() llamado dentro de init() corra sin envolver. (RFC §3.6)
+      this.installUpdate(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;
+   }
+
+   registerComponentsRecursively(component, parent = null) {
+      // Assign parent if not already set
+      if (!component.parentComponent) {
+         component.parentComponent = parent;
+      }
+
+      // Recursively assign parent to children
+      component.querySelectorAll('*').forEach((child) => {
+         if (child.tagName.startsWith('SLICE-')) {
+            // Only the call that establishes the DIRECT parent link feeds the
+            // index — the depth-first recursion sets a node's parent before an
+            // outer ancestor's forEach reaches it, so `component` here is the
+            // immediate enclosing component.
+            if (!child.parentComponent) {
+               child.parentComponent = component;
+               // 🔁 Maintain childrenIndex so destroyComponent(parent) cascades
+               // to children built via slice.build (which registers them WITHOUT
+               // a parent, leaving the index otherwise empty). Without this, a
+               // parent's destroy never finds — and never cleans up — its children.
+               if (child.sliceId && component.sliceId) {
+                  if (!this.childrenIndex.has(component.sliceId)) {
+                     this.childrenIndex.set(component.sliceId, new Set());
+                  }
+                  this.childrenIndex.get(component.sliceId).add(child.sliceId);
+                  child._depth = (component._depth || 0) + 1;
+               }
+            }
+            this.registerComponentsRecursively(child, component);
+         }
+      });
+   }
+
+   /**
+    * Envuelve el `update()` propio de un componente (si lo define) para darle, de
+    * forma transparente, dos garantías que el dev no tiene que escribir:
+    *
+    *  - Re-entrada (serializa + coalesce, "gana el último"): si llega otro
+    *    `update()` mientras uno async está en vuelo, se guarda SOLO el más nuevo y
+    *    se corre una vez al terminar. Nunca dos updates pisan el DOM a la vez.
+    *  - Liveness: si el componente se destruye a mitad de un `update()` async, al
+    *    resolver se limpian (`destroyByContainer`) los hijos que ese update alcanzó
+    *    a construir, evitando fugas. El destroy NO se difiere (rompería el reuso de
+    *    sliceId); se limpia después.
+    *
+    * Componentes sin `update()` no se tocan (no hay método fantasma). Ver RFC
+    * §3.5 / §3.6 / §8.
+    * @param {HTMLElement} component
+    * @returns {void}
+    */
+   installUpdate(component) {
+      if (typeof component.update !== 'function') return;
+
+      const controller = this;
+      const inner = component.update.bind(component);
+      const alive = () => controller.activeComponents.get(component.sliceId) === component;
+
+      let running = null;
+      let pending;
+      let hasPending = false;
+
+      component.update = function (next) {
+         if (!alive()) return;                       // ya destruido: nada
+         const args = next ?? component.props;       // sin args -> this.props (lo mantiene el Router)
+
+         if (running) {                              // coalesce: conserva solo lo último
+            pending = args;
+            hasPending = true;
+            return running;
+         }
+
+         running = Promise.resolve(inner(args))
+            .catch((error) => slice.logger.logError(component.constructor.name, 'update() failed', error))
+            .finally(() => {
+               running = null;
+               if (!alive()) {                       // destruido a mitad del await: limpiar lo construido
+                  controller.destroyByContainer(component);
+                  return;                            // y NO correr el pendiente
+               }
+               if (hasPending) {
+                  hasPending = false;
+                  const next = pending;
+                  pending = undefined;
+                  component.update(next);
+               }
+            });
+
+         return running;
+      };
+   }
+
+   /**
+    * Get a registered component by sliceId.
+    * @param {string} sliceId
+    * @returns {HTMLElement|undefined}
+    */
+   getComponent(sliceId) {
+      return this.activeComponents.get(sliceId);
+   }
+
+   /**
+    * Get-or-create a single instance keyed by sliceId, deduplicating concurrent
+    * builds. Returns the existing instance if already registered, the in-flight
+    * promise if a build is underway, or otherwise memoizes a fresh build via
+    * `builder` (an injected closure — the controller never builds by itself).
+    *
+    * The in-flight promise is removed once it settles, so a failed build (which
+    * resolves to `null` and never registers in activeComponents) can be retried
+    * by a later call and never poisons the registry.
+    *
+    * @param {string} sliceId
+    * @param {() => Promise<any>} builder
+    * @returns {any|Promise<any>} instance (sync) or Promise<instance>
+    */
+   getOrCreate(sliceId, builder) {
+      const existing = this.activeComponents.get(sliceId);
+      if (existing) return existing;
+
+      const pending = this._pendingBuilds.get(sliceId);
+      if (pending) return pending;
+
+      const promise = Promise.resolve(builder())
+         .finally(() => this._pendingBuilds.delete(sliceId));
+      this._pendingBuilds.set(sliceId, promise);
+      return promise;
+   }
+
+   loadTemplateToComponent(component) {
+      const className = component.constructor.name;
+      const template = this.templates.get(className);
+
+      if (!template) {
+         slice.logger.error('Controller', `Template not found for component: ${className}`);
+         return;
+      }
+
+      component.innerHTML = template.innerHTML;
+      return component;
+   }
+
+   getComponentCategory(componentSliceId) {
+      return this.componentCategories.get(componentSliceId);
+   }
+
+   /**
+    * Fetch component resources (html, css, styles, theme).
+    * @param {string} componentName
+    * @param {'html'|'css'|'theme'|'styles'} resourceType
+    * @param {string} [componentCategory]
+    * @param {string} [customPath]
+    * @returns {Promise<string>}
+    */
+   async fetchText(componentName, resourceType, componentCategory, customPath) {
+      try {
+         const baseUrl = window.location.origin;
+         let path;
+
+         if (!componentCategory) {
+            componentCategory = this.componentCategories.get(componentName);
+         }
+
+         let isVisual = resourceType === 'html' || resourceType === 'css';
+
+         if (isVisual) {
+            if (slice.paths.components[componentCategory]) {
+               path = `${baseUrl}${slice.paths.components[componentCategory].path}/${componentName}`;
+               resourceType === 'html' ? (path += `/${componentName}.html`) : (path += `/${componentName}.css`);
+            } else {
+               if (componentCategory === 'Structural') {
+                  path = `${baseUrl}/Slice/Components/Structural/${componentName}`;
+                  resourceType === 'html' ? (path += `/${componentName}.html`) : (path += `/${componentName}.css`);
+               } else {
+                  throw new Error(`Component category '${componentCategory}' not found in paths configuration`);
+               }
+            }
+         }
+
+         if (resourceType === 'theme') {
+            path = `${baseUrl}${slice.paths.themes}/${componentName}.css`;
+         }
+
+         if (resourceType === 'styles') {
+            path = `${baseUrl}${slice.paths.styles}/${componentName}.css`;
+         }
+
+         if (customPath) {
+            path = customPath;
+         }
+
+         slice.logger.logInfo('Controller', `Fetching ${resourceType} from: ${path}`);
+
+         const response = await fetch(path);
+
+         if (!response.ok) {
+            throw new Error(`Failed to fetch ${path}: ${response.statusText}`);
+         }
+
+         const content = await response.text();
+         slice.logger.logInfo('Controller', `Successfully fetched ${resourceType} for ${componentName}`);
+         return content;
+      } catch (error) {
+         slice.logger.logError('Controller', `Error fetching ${resourceType} for component ${componentName}:`, error);
+         throw error;
+      }
+   }
+
+   /**
+    * Apply props to a component using static defaults and setters.
+    * @param {HTMLElement} component
+    * @param {Object} props
+    * @returns {void}
+    */
+   setComponentProps(component, props) {
+      const ComponentClass = component.constructor;
+      const componentName = ComponentClass.name;
+
+      // ¿Refresco o build? En el constructor el componente aún NO está registrado
+      // bajo su sliceId (el framework lo registra después) -> build. Si ya está
+      // registrado como su propia instancia -> refresco. (RFC §3.8 — autodetección)
+      const isRefresh = !!component.sliceId && this.activeComponents.get(component.sliceId) === component;
+
+      // Defaults: solo en build. En refresco NO, para no pisar valores ya modificados.
+      if (ComponentClass.props && !isRefresh) {
+         this.applyDefaultProps(component, ComponentClass.props, props);
+      }
+
+      // Validar solo en desarrollo. En refresco (patch parcial) no se exige `required`.
+      if (ComponentClass.props && !slice.isProduction()) {
+         this.validatePropsInDevelopment(ComponentClass, props, componentName, { checkRequired: !isRefresh });
+      }
+
+      // Aplicar props. En build reseteamos el backing field para forzar el setter
+      // (primer render). En refresco NO lo reseteamos, así los diff-guards cortan.
+      for (const prop in props) {
+         if (!isRefresh) component[`_${prop}`] = null;
+         component[prop] = props[prop];
+      }
+   }
+
+   getComponentPropsForDebugger(component) {
+      const ComponentClass = component.constructor;
+
+      if (ComponentClass.props) {
+         return {
+            availableProps: Object.keys(ComponentClass.props),
+            propsConfig: ComponentClass.props,
+            usedProps: this.extractUsedProps(component, ComponentClass.props),
+         };
+      } else {
+         return {
+            availableProps: this.extractUsedProps(component),
+            propsConfig: null,
+            usedProps: this.extractUsedProps(component),
+         };
+      }
+   }
+
+   applyDefaultProps(component, staticProps, providedProps) {
+      Object.entries(staticProps).forEach(([prop, config]) => {
+         if (config.default !== undefined && !(prop in (providedProps || {}))) {
+            component[`_${prop}`] = null;
+            component[prop] = config.default;
+         }
+      });
+   }
+
+   validatePropsInDevelopment(ComponentClass, providedProps, componentName, options = {}) {
+      const { checkRequired = true } = options;
+      const staticProps = ComponentClass.props;
+      const usedProps = Object.keys(providedProps || {});
+
+      const availableProps = Object.keys(staticProps);
+      const unknownProps = usedProps.filter((prop) => !availableProps.includes(prop));
+
+      if (unknownProps.length > 0) {
+         slice.logger.logWarning(
+            'PropsValidator',
+            `${componentName}: Unknown props [${unknownProps.join(', ')}]. Available: [${availableProps.join(', ')}]`
+         );
+      }
+
+      // En un refresco (patch parcial) se omiten props a propósito: no exigir required.
+      if (checkRequired) {
+         const requiredProps = Object.entries(staticProps)
+            .filter(([_, config]) => config.required)
+            .map(([prop, _]) => prop);
+
+         const missingRequired = requiredProps.filter((prop) => !(prop in (providedProps || {})));
+         if (missingRequired.length > 0) {
+            slice.logger.logError(componentName, `Missing required props: [${missingRequired.join(', ')}]`);
+         }
+      }
+
+      const invalidAllowedValueProps = collectInvalidAllowedValueProps(staticProps, providedProps);
+      invalidAllowedValueProps.forEach(({ propName, value, allowedValues }) => {
+         const safeValue = (() => { try { return JSON.stringify(value); } catch { return String(value); } })();
+         slice.logger.error(
+            componentName,
+            `Invalid value for prop "${propName}": ${safeValue}. Allowed values: ${formatAllowedValuesForLog(allowedValues)}`
+         );
+      });
+   }
+
+   extractUsedProps(component, staticProps = null) {
+      const usedProps = {};
+
+      if (staticProps) {
+         Object.keys(staticProps).forEach((prop) => {
+            if (component[prop] !== undefined) {
+               usedProps[prop] = component[prop];
+            }
+         });
+      } else {
+         Object.getOwnPropertyNames(component).forEach((key) => {
+            if (key.startsWith('_') && key !== '_isActive') {
+               const propName = key.substring(1);
+               usedProps[propName] = component[propName];
+            }
+         });
+      }
+
+      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 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
+    * @returns {number} Cantidad de componentes destruidos (incluyendo hijos)
+    */
+   destroyComponent(components) {
+      const toDestroy = Array.isArray(components) ? components : [components];
+      const allSliceIdsToDestroy = new Set();
+
+      // PASO 1: Recolectar todos los componentes padres y sus hijos recursivamente
+      for (const item of toDestroy) {
+         let sliceId = null;
+
+         if (typeof item === 'string') {
+            if (!this.activeComponents.has(item)) {
+               slice.logger.logWarning('Controller', `Component with sliceId "${item}" not found`);
+               continue;
+            }
+            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 ${sliceId}`, error);
+            }
+         }
+
+         // Limpiar suscripciones de eventos del componente
+         if (slice.events) {
+            slice.events.cleanupComponent(sliceId);
+         }
+
+         // 🚀 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(sliceId);
+
+         // Remover del DOM si está conectado
+         if (component.isConnected) {
+            component.remove();
+         }
+
+         destroyedCount++;
+      }
+
+      if (destroyedCount > 0) {
+         slice.logger.logInfo('Controller', `Destroyed ${destroyedCount} component(s) recursively`);
+      }
+
+      return destroyedCount;
+   }
+
+   /**
+    * 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
+    */
+   destroyByContainer(container) {
+      if (!container) {
+         slice.logger.logWarning('Controller', 'No container provided to destroyByContainer');
+         return 0;
+      }
+
+      // 🚀 Recolectar componentes usando índice optimizado
+      const allSliceIds = this.findAllNestedComponentsInContainer(container);
+
+      if (allSliceIds.size === 0) {
+         return 0;
+      }
+
+      // 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 (including nested)`);
+      }
+
+      return count;
+   }
+
+   /**
+    * 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 = [];
+      const regex = pattern instanceof RegExp ? pattern : new RegExp(pattern);
+
+      for (const [sliceId, component] of this.activeComponents) {
+         if (regex.test(sliceId)) {
+            componentsToDestroy.push(component);
+         }
+      }
+
+      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} (including nested)`
+         );
+      }
+
+      return count;
+   }
+
+   // ============================================================
+   // 🔍 LEAK DETECTION (dev-only)
+   // A component is a candidate leak when it stays registered in
+   // activeComponents while detached from the live DOM and was not
+   // intentionally cached (Route/MultiRoute/Router). Read-only.
+   // ============================================================
+
+   /**
+    * Register a predicate that excludes a detached component from being flagged
+    * as a leak (e.g. caches that intentionally keep instances off-DOM).
+    * @param {(component: HTMLElement) => boolean} predicate
+    */
+   registerLeakExclusion(predicate) {
+      if (typeof predicate === 'function') {
+         this._leakExclusions.push(predicate);
+      }
+   }
+
+   /**
+    * Is this detached component intentionally retained (not a leak)?
+    * @param {HTMLElement} component
+    * @returns {boolean}
+    * @private
+    */
+   _isExcludedOrphan(component) {
+      // (1) Cache-owner marker — Route/MultiRoute flag their cached instances.
+      if (component.__sliceCached === true) return true;
+      // (2) Router-managed instances are reused across navigation by sliceId.
+      if (typeof component.sliceId === 'string' && /^route-/.test(component.sliceId)) return true;
+      // (3) App-provided predicates.
+      for (const predicate of this._leakExclusions) {
+         try {
+            if (predicate(component)) return true;
+         } catch (error) {
+            slice.logger.logError('Controller', 'Leak exclusion predicate threw', error);
+         }
+      }
+      return false;
+   }
+
+   /**
+    * Does an ancestor explain this component's detachment? If so we report only
+    * the detached root, not every descendant of a removed/cached subtree.
+    * @param {HTMLElement} component
+    * @param {Set<string>} detachedIds
+    * @returns {boolean}
+    * @private
+    */
+   _hasDetachedAncestor(component, detachedIds) {
+      let parent = component.parentComponent;
+      while (parent) {
+         if ((parent.sliceId && detachedIds.has(parent.sliceId)) || this._isExcludedOrphan(parent)) {
+            return true;
+         }
+         parent = parent.parentComponent;
+      }
+      return false;
+   }
+
+   /**
+    * Build a human-readable retain path (component → parent → …) for diagnosis.
+    * @param {HTMLElement} component
+    * @returns {string[]}
+    * @private
+    */
+   _retainPath(component) {
+      const path = [];
+      let node = component;
+      let guard = 0;
+      while (node && guard++ < 50) {
+         path.push(`${node.constructor?.name || 'Unknown'}(${node.sliceId || '?'})`);
+         node = node.parentComponent;
+      }
+      return path;
+   }
+
+   /**
+    * Find candidate leaks: components registered in activeComponents but detached
+    * from the live DOM and not intentionally cached. Pure read-only.
+    * @returns {Array<{ sliceId: string, name: string, reason: string, retainPath: string[] }>}
+    */
+   findOrphans() {
+      const detached = [];
+      for (const [sliceId, component] of this.activeComponents) {
+         if (component instanceof HTMLElement && !component.isConnected) {
+            detached.push([sliceId, component]);
+         }
+      }
+
+      const detachedIds = new Set(detached.map(([sliceId]) => sliceId));
+      const orphans = [];
+
+      for (const [sliceId, component] of detached) {
+         if (this._isExcludedOrphan(component)) continue;
+         if (this._hasDetachedAncestor(component, detachedIds)) continue;
+         orphans.push({
+            sliceId,
+            name: component.constructor?.name || 'Unknown',
+            reason: 'registered but detached from DOM without destroy',
+            retainPath: this._retainPath(component)
+         });
+      }
+
+      return orphans;
+   }
+
+   /**
+    * Record an activeComponents.size sample for the monotonic-growth heuristic.
+    * Called by the Leak Inspector on each refresh while it is open.
+    */
+   sampleComponentGrowth() {
+      this._growthSamples.push(this.activeComponents.size);
+      if (this._growthSamples.length > 20) this._growthSamples.shift();
+   }
+
+   /**
+    * Heuristic: has the active component count grown without ever shrinking
+    * across the sampled window? Suggests an accumulation leak.
+    * @returns {boolean}
+    */
+   isGrowthMonotonic() {
+      const samples = this._growthSamples;
+      if (samples.length < 5) return false;
+      for (let i = 1; i < samples.length; i++) {
+         if (samples[i] < samples[i - 1]) return false;
+      }
+      return samples[samples.length - 1] > samples[0];
+   }
+}