wu-framework 1.0.0

package/src/core/wu-core.js

@@ -0,0 +1,1296 @@
+/**
+ * 🚀 WU-FRAMEWORK: UNIVERSAL MICROFRONTENDS
+ * Motor principal agnóstico - Funciona con cualquier framework
+ */
+
+import { WuLoader } from './wu-loader.js';
+import { WuSandbox } from './wu-sandbox.js';
+import { WuManifest } from './wu-manifest.js';
+import { logger } from './wu-logger.js';
+import { default as store } from './wu-store.js';
+import { WuApp } from './wu-app.js';
+import { WuCache } from './wu-cache.js';
+import { WuEventBus } from './wu-event-bus.js';
+import { WuPerformance } from './wu-performance.js';
+import { WuPluginSystem } from './wu-plugin.js';
+import { WuLoadingStrategy } from './wu-strategies.js';
+import { WuErrorBoundary } from './wu-error-boundary.js';
+import { WuLifecycleHooks } from './wu-hooks.js';
+import { WuSandboxPool } from './wu-sandbox-pool.js';
+import { WuRegistry } from './wu-registry.js';
+
+export class WuCore {
+  constructor(options = {}) {
+    // Registros principales
+    this.apps = new Map();           // Apps registradas
+    this.definitions = new Map();    // Definiciones de lifecycle
+    this.manifests = new Map();      // Manifiestos cargados
+    this.mounted = new Map();        // Apps montadas
+
+    // Componentes core
+    this.loader = new WuLoader();
+    this.sandbox = new WuSandbox();
+    this.manifest = new WuManifest();
+    this.store = store;
+
+    // 🚀 SISTEMAS ESENCIALES
+    this.cache = new WuCache({ storage: 'localStorage', maxSize: 100 }); // 100MB cache
+    this.eventBus = new WuEventBus();
+    this.performance = new WuPerformance();
+
+    // 🎯 ADVANCED SYSTEMS
+    this.pluginSystem = new WuPluginSystem(this);
+    this.strategies = new WuLoadingStrategy(this);
+    this.errorBoundary = new WuErrorBoundary(this);
+    this.hooks = new WuLifecycleHooks(this);
+    this.sandboxPool = new WuSandboxPool(this);
+    this.registry = new WuRegistry();
+
+    // 🔄 HEALTH MONITORING CONFIG
+    this.healthConfig = {
+      enabled: options.healthMonitoring !== false, // Default: enabled
+      autoHeal: options.autoHeal !== false,        // Default: enabled
+      agingThreshold: options.agingThreshold || Infinity, // Default: never refresh
+      checkInterval: options.healthCheckInterval || 60000 // Default: 60s
+    };
+
+    // 🔄 HEALTH MONITORING STATE
+    this.healthState = {
+      monitor: null,
+      healingInProgress: new Set(),
+      systemStable: true,
+      lastHealthCheck: Date.now(),
+      mutationObserver: null,
+      mutationCheckTimeout: null
+    };
+
+    // Estado
+    this.isInitialized = false;
+
+    // 🚀 Initialize self-healing system (ONLY if enabled)
+    if (this.healthConfig.enabled) {
+      this.initializeHealthMonitoring();
+      logger.wuInfo('🚀 Wu Framework initialized - Universal Microfrontends with Self-Healing');
+    } else {
+      logger.wuInfo('🚀 Wu Framework initialized - Universal Microfrontends (Health Monitoring Disabled)');
+    }
+  }
+
+  /**
+   * 🔄 HEALTH MONITORING INITIALIZATION
+   */
+  initializeHealthMonitoring() {
+    // 💫 Optimized health monitor with MutationObserver + reduced polling
+    this.healthState.monitor = setInterval(() => {
+      this.performHealthCheck();
+    }, this.healthConfig.checkInterval);
+
+    // 🔍 Smart MutationObserver for real-time DOM changes
+    this.initializeMutationObserver();
+
+    // 🛡️ Global error recovery (ONLY if autoHeal enabled)
+    if (this.healthConfig.autoHeal) {
+      window.addEventListener('error', (event) => {
+        this.handleErrorEvent(event);
+      });
+
+      // 🌟 Unhandled promise rejection recovery
+      window.addEventListener('unhandledrejection', (event) => {
+        this.handleRejection(event);
+      });
+    }
+
+    logger.wuInfo(`🔄 Health monitoring initialized - Interval: ${this.healthConfig.checkInterval}ms, AutoHeal: ${this.healthConfig.autoHeal}`);
+  }
+
+  /**
+   * 🔍 SMART MUTATION OBSERVER: Real-time DOM monitoring for efficiency
+   */
+  initializeMutationObserver() {
+    if (!window.MutationObserver) return; // Fallback for older browsers
+
+    this.healthState.mutationObserver = new MutationObserver((mutations) => {
+      let shouldCheckHealth = false;
+
+      for (const mutation of mutations) {
+        // Only check health if it affects our mounted apps
+        if (mutation.type === 'childList') {
+          const removedNodes = Array.from(mutation.removedNodes);
+          const affectedApps = removedNodes.some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              // Check if removed node contains any of our mounted apps
+              for (const [appName, mounted] of this.mounted) {
+                if (node.contains && node.contains(mounted.container)) {
+                  return true;
+                }
+                if (node === mounted.container) {
+                  return true;
+                }
+              }
+            }
+            return false;
+          });
+
+          if (affectedApps) {
+            shouldCheckHealth = true;
+            break;
+          }
+        }
+      }
+
+      // Debounced health check only when necessary
+      if (shouldCheckHealth) {
+        clearTimeout(this.healthState.mutationCheckTimeout);
+        this.healthState.mutationCheckTimeout = setTimeout(() => {
+          this.performHealthCheck();
+        }, 1000); // Wait 1 second to batch multiple mutations
+      }
+    });
+
+    // Observe the entire document but only care about child changes
+    this.healthState.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+
+    logger.wuDebug('🔍 MutationObserver initialized for smart DOM monitoring');
+  }
+
+  /**
+   * 💊 HEALTH CHECK: Continuous app monitoring
+   */
+  async performHealthCheck() {
+    try {
+      const now = Date.now();
+      const healthIssues = [];
+
+      // Check mounted apps vitality
+      for (const [appName, mountedApp] of this.mounted) {
+        const age = now - mountedApp.timestamp;
+        const container = mountedApp.container;
+
+        // 🛡️ ENHANCED CHECK: Verify container exists and is properly connected
+        // IMPORTANT: Check multiple conditions to avoid false positives
+        let isOrphaned = false;
+
+        try {
+          // Check 1: Direct DOM connection
+          const containerInDOM = document.contains(container);
+
+          // Check 2: Parent element connection (for shadow DOM)
+          const parentInDOM = container.parentElement && document.contains(container.parentElement);
+
+          // Check 3: Shadow root connection
+          const shadowHost = mountedApp.sandbox?.shadowRoot?.host;
+          const shadowHostInDOM = shadowHost && document.contains(shadowHost);
+
+          // Check 4: Container still has valid properties (not detached)
+          const hasValidParent = container.parentElement !== null || container.parentNode !== null;
+
+          // Only mark as orphaned if ALL checks fail
+          if (!containerInDOM && !parentInDOM && !shadowHostInDOM && !hasValidParent) {
+            isOrphaned = true;
+          }
+        } catch (error) {
+          // If checking fails, assume NOT orphaned (conservative approach)
+          console.warn(`[Wu] ⚠️ Container check failed for ${appName}:`, error);
+          isOrphaned = false;
+        }
+
+        if (isOrphaned) {
+          healthIssues.push({
+            type: 'orphaned_container',
+            appName,
+            severity: 'high'
+          });
+        }
+
+        // Check app state - ONLY if it's truly unstable, not 'refreshed'
+        // 'refreshed' is a normal state after aging refresh
+        if (mountedApp.state && mountedApp.state !== 'stable' && mountedApp.state !== 'refreshed') {
+          healthIssues.push({
+            type: 'unstable_state',
+            appName,
+            severity: 'medium'
+          });
+        }
+
+        // 🕰️ Check for long-running apps that might need refresh
+        // ONLY if agingThreshold is configured (default: Infinity = never)
+        if (age > this.healthConfig.agingThreshold) {
+          healthIssues.push({
+            type: 'aging_app',
+            appName,
+            severity: 'low',
+            age: age
+          });
+          console.log(`[Wu] ⏰ App ${appName} has been running for ${(age / 1000 / 60).toFixed(1)} minutes`);
+        }
+      }
+
+      // Process health issues
+      if (healthIssues.length > 0) {
+        await this.processHealthIssues(healthIssues);
+      }
+
+      this.healthState.lastHealthCheck = now;
+
+    } catch (error) {
+      console.warn('[Wu] ⚠️ Health check failed:', error);
+    }
+  }
+
+  /**
+   * 🛠️ HEALTH ISSUE PROCESSOR
+   */
+  async processHealthIssues(issues) {
+    for (const issue of issues) {
+      if (this.healthState.healingInProgress.has(issue.appName)) {
+        continue; // Already healing
+      }
+
+      console.log(`[Wu] 🩺 Health issue detected:`, issue);
+
+      switch (issue.type) {
+        case 'orphaned_container':
+          await this.healOrphanedContainer(issue.appName);
+          break;
+        case 'unstable_state':
+          await this.stabilizeAppState(issue.appName);
+          break;
+        case 'aging_app':
+          await this.refreshAgingApp(issue.appName);
+          break;
+      }
+    }
+  }
+
+  /**
+   * 🔄 ORPHANED CONTAINER HEALING
+   */
+  async healOrphanedContainer(appName) {
+    this.healthState.healingInProgress.add(appName);
+
+    try {
+      console.log(`[Wu] 🔄 Healing orphaned container for ${appName}`);
+
+      // Clean up orphaned state
+      await this.unmount(appName);
+
+      // 🔍 Find a suitable container to remount
+      const suitableContainers = [
+        document.querySelector(`[data-wu-app="${appName}"]`),
+        document.querySelector(`#${appName}-container`),
+        document.querySelector(`.${appName}-container`),
+        document.querySelector(`[id*="${appName}"]`)
+      ].filter(Boolean);
+
+      if (suitableContainers.length > 0) {
+        const container = suitableContainers[0];
+        const containerSelector = container.id ? `#${container.id}` : `.${container.className.split(' ')[0]}`;
+
+        // 🎯 Only attempt re-mount if selector is valid
+        if (containerSelector && containerSelector !== '#' && containerSelector !== '.') {
+          await this.mount(appName, containerSelector);
+          console.log(`[Wu] ✨ Successfully healed orphaned ${appName} in ${containerSelector}`);
+        } else {
+          console.warn(`[Wu] ⚠️ Could not determine valid selector for ${appName}`);
+        }
+      } else {
+        console.warn(`[Wu] ⚠️ No suitable container found for healing ${appName}`);
+      }
+
+    } catch (error) {
+      console.warn(`[Wu] ⚠️ Failed to heal orphaned ${appName}:`, error);
+    } finally {
+      this.healthState.healingInProgress.delete(appName);
+    }
+  }
+
+  /**
+   * ⚖️ APP STATE STABILIZATION
+   */
+  async stabilizeAppState(appName) {
+    this.healthState.healingInProgress.add(appName);
+
+    try {
+      console.log(`[Wu] ⚖️ Stabilizing app state for ${appName}`);
+
+      const mounted = this.mounted.get(appName);
+      if (mounted) {
+        mounted.state = 'stable';
+        // ⚠️ DO NOT RESET TIMESTAMP - preserves app age for aging checks
+        console.log(`[Wu] ✨ App state stabilized for ${appName}`);
+      }
+
+    } catch (error) {
+      console.warn(`[Wu] ⚠️ Failed to stabilize ${appName}:`, error);
+    } finally {
+      this.healthState.healingInProgress.delete(appName);
+    }
+  }
+
+  /**
+   * 🕰️ AGING APP REFRESH
+   * NOTE: This should ONLY trigger if agingThreshold is explicitly configured
+   */
+  async refreshAgingApp(appName) {
+    // Safety check: Don't refresh if aging is disabled (Infinity)
+    if (this.healthConfig.agingThreshold === Infinity) {
+      console.warn(`[Wu] ⚠️ refreshAgingApp called but agingThreshold is Infinity - skipping`);
+      return;
+    }
+
+    this.healthState.healingInProgress.add(appName);
+
+    try {
+      console.log(`[Wu] 🕰️ Refreshing aging app for ${appName}`);
+
+      const mounted = this.mounted.get(appName);
+      if (mounted) {
+        // Gentle refresh without full remount
+        // Reset timestamp ONLY when explicitly configured aging refresh
+        mounted.timestamp = Date.now();
+        mounted.state = 'refreshed';
+
+        // Trigger a soft refresh of the app if it supports it
+        if (mounted.lifecycle.refresh) {
+          await mounted.lifecycle.refresh(mounted.container);
+        }
+
+        console.log(`[Wu] ✨ App refreshed for ${appName}`);
+      }
+
+    } catch (error) {
+      console.warn(`[Wu] ⚠️ Failed to refresh ${appName}:`, error);
+    } finally {
+      this.healthState.healingInProgress.delete(appName);
+    }
+  }
+
+  /**
+   * 💥 ERROR EVENT HANDLER
+   */
+  handleErrorEvent(event) {
+    console.log('[Wu] 💥 Error event detected:', event.error);
+
+    // Check if error is related to any mounted apps
+    for (const [appName, mounted] of this.mounted) {
+      if (event.filename && event.filename.includes(mounted.app.url)) {
+        console.log(`[Wu] 🎯 Error traced to ${appName}, initiating recovery...`);
+
+        // Schedule healing
+        setTimeout(() => {
+          this.healOrphanedContainer(appName);
+        }, 1000);
+
+        break;
+      }
+    }
+  }
+
+  /**
+   * 🚫 REJECTION HANDLER
+   */
+  handleRejection(event) {
+    console.log('[Wu] 🚫 Promise rejection detected:', event.reason);
+
+    // Prevent default unhandled rejection
+    event.preventDefault();
+
+    // Mark system as unstable temporarily
+    this.healthState.systemStable = false;
+
+    // Schedule stability restoration
+    setTimeout(() => {
+      this.healthState.systemStable = true;
+      console.log('[Wu] ✨ System stability restored');
+    }, 5000);
+  }
+
+  /**
+   * Inicializar wu-framework con configuración de apps
+   * @param {Object} config - Configuración { apps: [{name, url}, ...] }
+   */
+  async init(config) {
+    if (this.isInitialized) {
+      console.warn('[Wu] Framework already initialized');
+      return;
+    }
+
+    logger.wuDebug('🔧 Initializing with apps:', config.apps?.map(app => app.name));
+
+    try {
+      // 🪝 Execute beforeInit hooks
+      const beforeInitResult = await this.hooks.execute('beforeInit', { config });
+      if (beforeInitResult.cancelled) {
+        console.warn('[Wu] Initialization cancelled by beforeInit hook');
+        return;
+      }
+
+      // 🔌 Call plugin beforeInit hooks
+      await this.pluginSystem.callHook('beforeInit', { config });
+
+      // 🏊 Initialize sandbox pool
+      await this.sandboxPool.init();
+
+      // Registrar todas las apps
+      for (const appConfig of config.apps || []) {
+        await this.registerApp(appConfig);
+      }
+
+      // 🎯 Preload apps with eager/preload strategies
+      await this.strategies.preload(config.apps || []);
+
+      this.isInitialized = true;
+
+      // 🪝 Execute afterInit hooks
+      await this.hooks.execute('afterInit', { config });
+
+      // 🔌 Call plugin afterInit hooks
+      await this.pluginSystem.callHook('afterInit', { config });
+
+      logger.wuInfo('✅ Framework initialized successfully');
+    } catch (error) {
+      console.error('[Wu] ❌ Initialization failed:', error);
+
+      // 🔌 Call plugin error hooks
+      await this.pluginSystem.callHook('onError', { phase: 'init', error });
+
+      throw error;
+    }
+  }
+
+  /**
+   * Registrar una aplicación
+   * @param {Object} appConfig - { name, url }
+   */
+  async registerApp(appConfig) {
+    const { name, url } = appConfig;
+
+    try {
+      logger.wuDebug(`📦 Registering app: ${name} from ${url}`);
+
+      // Cargar manifest
+      const manifestData = await this.manifest.load(url);
+      this.manifests.set(name, manifestData);
+
+      // Registrar la app
+      this.apps.set(name, {
+        name,
+        url,
+        manifest: manifestData,
+        status: 'registered'
+      });
+
+      logger.wuDebug(`✅ App ${name} registered successfully`);
+    } catch (error) {
+      console.error(`[Wu] ❌ Failed to register app ${name}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Definir lifecycle de una micro-app
+   * @param {string} appName - Nombre de la app
+   * @param {Object} lifecycle - { mount, unmount }
+   */
+  define(appName, lifecycle) {
+    if (!lifecycle.mount) {
+      throw new Error(`[Wu] Mount function required for app: ${appName}`);
+    }
+
+    this.definitions.set(appName, lifecycle);
+
+    // 🔔 Notify registry that app is ready
+    this.registry.markAsRegistered(appName);
+
+    // 📡 Dispatch custom event for external listeners
+    const event = new CustomEvent('wu:app:ready', {
+      detail: { appName, timestamp: Date.now() }
+    });
+    window.dispatchEvent(event);
+
+    logger.wuDebug(`📋 Lifecycle defined for: ${appName}`);
+  }
+
+  /**
+   * 🚀 MOUNT APP: Multi-retry app mounting with self-healing
+   * @param {string} appName - Nombre de la app
+   * @param {string} containerSelector - Selector del contenedor
+   */
+  async mount(appName, containerSelector) {
+    return await this.mountWithRecovery(appName, containerSelector, 0);
+  }
+
+  /**
+   * 🔄 MOUNT WITH RECOVERY: Self-healing app mounting
+   */
+  async mountWithRecovery(appName, containerSelector, attempt = 0) {
+    const maxAttempts = 3;
+
+    try {
+      // ⚡ Start performance measurement
+      this.performance.startMeasure('mount', appName);
+
+      logger.wuDebug(`🔗 Mounting ${appName} in ${containerSelector} (attempt ${attempt + 1})`);
+
+      // 🪝 Execute beforeLoad hooks
+      const beforeLoadResult = await this.hooks.execute('beforeLoad', { appName, containerSelector, attempt });
+      if (beforeLoadResult.cancelled) {
+        console.warn('[Wu] Mount cancelled by beforeLoad hook');
+        return;
+      }
+
+      // 🔌 Call plugin beforeMount hooks
+      const pluginBeforeMount = await this.pluginSystem.callHook('beforeMount', { appName, containerSelector });
+      if (pluginBeforeMount === false) {
+        console.warn('[Wu] Mount cancelled by plugin beforeMount hook');
+        return;
+      }
+
+      // 🔮 Quantum state verification
+      const app = this.apps.get(appName);
+      if (!app) {
+        throw new Error(`App ${appName} not registered. Call wu.init() first.`);
+      }
+
+      // 🌟 Container reality check
+      const container = document.querySelector(containerSelector);
+      if (!container) {
+        throw new Error(`Container not found: ${containerSelector}`);
+      }
+
+      // 🏊 Acquire sandbox from pool (if configured)
+      const poolSandbox = this.sandboxPool.acquire(appName);
+
+      // 🛡️ Quantum sandbox creation
+      const sandbox = this.sandbox.create(appName, container);
+
+      // 🪝 Execute afterLoad hooks
+      await this.hooks.execute('afterLoad', { appName, containerSelector, sandbox });
+
+      // 🚀 Transcendent lifecycle resolution
+      let lifecycle = this.definitions.get(appName);
+      if (!lifecycle) {
+        // Load remote app
+        await this.loadAndMountRemoteApp(app, sandbox);
+        lifecycle = this.definitions.get(appName);
+
+        if (!lifecycle) {
+          throw new Error(`App ${appName} did not register with wu.define()`);
+        }
+      }
+
+      // 🪝 Execute beforeMount hooks
+      const beforeMountResult = await this.hooks.execute('beforeMount', { appName, containerSelector, sandbox, lifecycle });
+      if (beforeMountResult.cancelled) {
+        console.warn('[Wu] Mount cancelled by beforeMount hook');
+        return;
+      }
+
+      // 🎨 Wait for styles to be ready before mounting
+      if (sandbox.stylesReady) {
+        console.log(`[Wu] ⏳ Waiting for styles to be ready for ${appName}...`);
+        await sandbox.stylesReady;
+        console.log(`[Wu] ✅ Styles ready for ${appName}`);
+      }
+
+      // ⚡ Quantum mounting execution
+      await lifecycle.mount(sandbox.container);
+
+      // 🌌 Registration in mounted dimension
+      this.mounted.set(appName, {
+        app,
+        sandbox,
+        poolSandbox,
+        lifecycle,
+        container: sandbox.container,
+        timestamp: Date.now(),
+        state: 'stable'
+      });
+
+      // ⚡ End performance measurement
+      const mountTime = this.performance.endMeasure('mount', appName);
+
+      // 🪝 Execute afterMount hooks
+      await this.hooks.execute('afterMount', { appName, containerSelector, sandbox, mountTime });
+
+      // 🔌 Call plugin afterMount hooks
+      await this.pluginSystem.callHook('afterMount', { appName, containerSelector, mountTime });
+
+      // 📢 Emit mount event
+      this.eventBus.emit('app:mounted', { appName, mountTime, attempt }, { appName });
+
+      logger.wuInfo(`✅ ${appName} mounted successfully in ${mountTime.toFixed(2)}ms`);
+
+    } catch (error) {
+      console.error(`[Wu] ❌ Mount attempt ${attempt + 1} failed for ${appName}:`, error);
+
+      // 🛡️ Use error boundary for intelligent error handling
+      const errorResult = await this.errorBoundary.handle(error, {
+        appName,
+        containerSelector,
+        retryCount: attempt,
+        container: containerSelector
+      });
+
+      // Si el error boundary recuperó el error, no necesitamos reintentar
+      if (errorResult.recovered) {
+        console.log(`[Wu] ✨ Error recovered by error boundary`);
+        return;
+      }
+
+      // 🔄 RECOVERY PROTOCOL
+      if (attempt < maxAttempts - 1 && errorResult.action === 'retry') {
+        console.log(`[Wu] 🌟 Initiating recovery protocol...`);
+
+        // 🛠️ Clean app state
+        await this.appStateCleanup(appName, containerSelector);
+
+        // ⏱️ Temporal stabilization
+        await new Promise(resolve => setTimeout(resolve, 1000 * (attempt + 1)));
+
+        // 🚀 Recursive mounting with recovery
+        return await this.mountWithRecovery(appName, containerSelector, attempt + 1);
+      }
+
+      // 🔌 Call plugin error hooks
+      await this.pluginSystem.callHook('onError', { phase: 'mount', error, appName });
+
+      // 💥 Final mount failure - error boundary already handled fallback UI
+      throw error;
+    }
+  }
+
+  /**
+   * 🛠️ APP STATE CLEANUP: Enhanced container cleanup with framework protection
+   */
+  async appStateCleanup(appName, containerSelector) {
+    try {
+      console.log(`[Wu] 🧹 Starting app state cleanup for ${appName}...`);
+
+      // 🚀 Clear any existing mounted state safely
+      if (this.mounted.has(appName)) {
+        try {
+          await this.unmount(appName);
+        } catch (unmountError) {
+          console.warn(`[Wu] ⚠️ Unmount failed during cleanup:`, unmountError);
+        }
+      }
+
+      // 🌌 Enhanced container cleanup with Vue safety measures
+      const container = document.querySelector(containerSelector);
+      if (container) {
+        // 🛡️ Protect Vue's reactivity system
+        if (container.shadowRoot) {
+          try {
+            // Clear shadow root content safely
+            const shadowChildren = Array.from(container.shadowRoot.children);
+            shadowChildren.forEach(child => {
+              try {
+                child.remove();
+              } catch (removeError) {
+                console.warn(`[Wu] ⚠️ Failed to remove shadow child:`, removeError);
+              }
+            });
+          } catch (shadowError) {
+            console.warn(`[Wu] ⚠️ Shadow root cleanup failed:`, shadowError);
+          }
+        }
+
+        // 🔮 Clear any direct children if no shadow root
+        if (!container.shadowRoot && container.children.length > 0) {
+          try {
+            container.innerHTML = '';
+          } catch (htmlError) {
+            console.warn(`[Wu] ⚠️ Container innerHTML cleanup failed:`, htmlError);
+          }
+        }
+
+        // 🌟 Reset container attributes
+        container.removeAttribute('data-wu-app');
+        container.removeAttribute('data-quantum-state');
+        container.removeAttribute('wu-debug');
+      }
+
+      // 🎯 Reset definition state
+      this.definitions.delete(appName);
+
+      // 🚀 Clear sandbox registry
+      if (this.sandbox && this.sandbox.sandboxes) {
+        this.sandbox.sandboxes.delete(appName);
+      }
+
+      console.log(`[Wu] ✅ App state cleaned successfully for ${appName}`);
+
+    } catch (cleanupError) {
+      console.warn(`[Wu] ⚠️ App cleanup partial failure for ${appName}:`, cleanupError);
+
+      // 🌌 Emergency cleanup - force clear everything
+      try {
+        const container = document.querySelector(containerSelector);
+        if (container) {
+          container.style.display = 'none';
+          setTimeout(() => {
+            if (container) {
+              container.style.display = '';
+            }
+          }, 100);
+        }
+      } catch (emergencyError) {
+        console.error(`[Wu] 💥 Emergency cleanup failed:`, emergencyError);
+      }
+    }
+  }
+
+  /**
+   * 💥 ERROR STATE RENDERER: Visual error manifestation
+   */
+  async renderErrorState(containerSelector, appName, error) {
+    try {
+      const container = document.querySelector(containerSelector);
+      if (!container) return;
+
+      // 🛡️ Clear container safely
+      container.innerHTML = '';
+
+      // 🌌 Create quantum error visualization with safe DOM manipulation
+      const errorContainer = document.createElement('div');
+      errorContainer.className = 'quantum-error-state';
+
+      // Apply styles programmatically
+      Object.assign(errorContainer.style, {
+        padding: '2rem',
+        borderRadius: '12px',
+        background: 'linear-gradient(135deg, #1a1a2e, #16213e)',
+        border: '2px solid #ff6b6b',
+        color: '#fff',
+        fontFamily: '"Courier New", monospace',
+        textAlign: 'center',
+        boxShadow: '0 0 20px rgba(255, 107, 107, 0.3)'
+      });
+
+      // Create elements safely
+      const icon = document.createElement('div');
+      icon.textContent = '🌌';
+      Object.assign(icon.style, {
+        fontSize: '3rem',
+        marginBottom: '1rem'
+      });
+
+      const title = document.createElement('h3');
+      title.textContent = 'MOUNT ERROR DETECTED';
+      Object.assign(title.style, {
+        color: '#ff6b6b',
+        margin: '0 0 1rem 0'
+      });
+
+      const description = document.createElement('p');
+      description.textContent = `App "${appName}" failed to mount in the container`;
+      Object.assign(description.style, {
+        margin: '0 0 1rem 0',
+        opacity: '0.8'
+      });
+
+      const details = document.createElement('details');
+      Object.assign(details.style, {
+        margin: '1rem 0',
+        textAlign: 'left'
+      });
+
+      const summary = document.createElement('summary');
+      summary.textContent = '🔍 Debug Info';
+      Object.assign(summary.style, {
+        cursor: 'pointer',
+        color: '#4ecdc4'
+      });
+
+      const pre = document.createElement('pre');
+      pre.textContent = error.message; // Safe text content, no HTML injection
+      Object.assign(pre.style, {
+        background: 'rgba(0,0,0,0.3)',
+        padding: '1rem',
+        borderRadius: '6px',
+        marginTop: '0.5rem',
+        overflow: 'auto',
+        fontSize: '0.8rem'
+      });
+
+      const button = document.createElement('button');
+      button.textContent = '🔄 Reload Page';
+      Object.assign(button.style, {
+        background: 'linear-gradient(45deg, #4ecdc4, #44a08d)',
+        border: 'none',
+        padding: '0.8rem 1.5rem',
+        borderRadius: '6px',
+        color: 'white',
+        cursor: 'pointer',
+        fontWeight: 'bold',
+        transition: 'transform 0.2s'
+      });
+
+      // Add safe event listeners
+      button.addEventListener('click', () => window.location.reload());
+      button.addEventListener('mouseenter', () => button.style.transform = 'scale(1.05)');
+      button.addEventListener('mouseleave', () => button.style.transform = 'scale(1)');
+
+      // Assemble DOM structure
+      details.appendChild(summary);
+      details.appendChild(pre);
+
+      errorContainer.appendChild(icon);
+      errorContainer.appendChild(title);
+      errorContainer.appendChild(description);
+      errorContainer.appendChild(details);
+      errorContainer.appendChild(button);
+
+      container.appendChild(errorContainer);
+
+    } catch (renderError) {
+      console.error(`[Wu] 💥 Failed to render error state:`, renderError);
+    }
+  }
+
+  /**
+   * 📦 REMOTE APP LOADER: Intelligent remote app loading with path resolution
+   * @param {Object} app - Información de la app
+   * @param {Object} sandbox - Sandbox creado
+   */
+  async loadAndMountRemoteApp(app, sandbox) {
+    // 🔍 SMART PATH RESOLUTION: Multi-path URL construction with validation
+    const moduleUrl = await this.resolveModulePath(app);
+
+    console.log(`[Wu] 📦 Loading ES module: ${moduleUrl}`);
+
+    try {
+      // 🌟 MODULE LOADING: Multi-path module resolution
+      await this.moduleLoader(moduleUrl, app.name);
+
+      console.log(`[Wu] ✅ ES module loaded: ${app.name}`);
+
+    } catch (error) {
+      console.error(`[Wu] ❌ Failed to load ES module ${moduleUrl}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 🔍 MODULE PATH RESOLVER: Intelligent URL construction with fallback
+   * Intelligently resolves module paths with real-time validation
+   */
+  async resolveModulePath(app) {
+    let entryFile = app.manifest?.entry || 'main.js';
+    const baseUrl = app.url.replace(/\/$/, ''); // Remove trailing slash
+
+    // 🔧 NORMALIZE PATH: Remove duplicated directories
+    // If entry already starts with 'src/', 'dist/', etc., use it as-is
+    const hasFolderPrefix = /^(src|dist|public|build|assets|lib|es)\//.test(entryFile);
+
+    if (hasFolderPrefix) {
+      console.log(`[Wu] 🔧 Entry already has folder prefix: ${entryFile}`);
+      // Entry already has folder, just use baseUrl + entryFile
+      const directPath = `${baseUrl}/${entryFile}`;
+      console.log(`[Wu] 🎯 Using direct path: ${directPath}`);
+      return directPath;
+    }
+
+    // 🔍 Multi-path candidates (in order of preference)
+    const pathCandidates = [
+      `${baseUrl}/src/${entryFile}`,           // Standard structure
+      `${baseUrl}/${entryFile}`,               // Root level
+      `${baseUrl}/dist/${entryFile}`,          // Built version
+      `${baseUrl}/public/${entryFile}`,        // Public folder
+      `${baseUrl}/build/${entryFile}`,         // Build folder
+      `${baseUrl}/assets/${entryFile}`,        // Assets folder
+      `${baseUrl}/lib/${entryFile}`,           // Library folder
+      `${baseUrl}/es/${entryFile}`             // ES modules folder
+    ];
+
+    console.log(`[Wu] 🔍 Attempting path resolution for ${app.name}...`);
+
+    // 🚀 SMART PATH DISCOVERY: Try each candidate with validation
+    for (let i = 0; i < pathCandidates.length; i++) {
+      const candidate = pathCandidates[i];
+
+      try {
+        console.log(`[Wu] 🎯 Testing path candidate ${i + 1}/${pathCandidates.length}: ${candidate}`);
+
+        // 🌟 Path validation with enhanced verification
+        const isValid = await this.validatePath(candidate);
+
+        if (isValid) {
+          console.log(`[Wu] ✅ Path resolved successfully: ${candidate}`);
+          return candidate;
+        } else {
+          console.log(`[Wu] ❌ Path candidate ${i + 1} failed validation: ${candidate}`);
+        }
+
+      } catch (error) {
+        console.log(`[Wu] ⚠️ Path candidate ${i + 1} threw error: ${candidate} - ${error.message}`);
+        continue;
+      }
+    }
+
+    // 🌌 FALLBACK: If all candidates fail, use the first one and let the error bubble up
+    const fallbackPath = pathCandidates[0];
+    console.warn(`[Wu] 🚨 All path candidates failed, using fallback: ${fallbackPath}`);
+    return fallbackPath;
+  }
+
+  /**
+   * 🔧 PATH VALIDATOR: Smart existence verification with module testing
+   * Validates if a path exists and can be loaded as an ES module
+   */
+  async validatePath(url) {
+    try {
+      // 🌟 ENHANCED VALIDATION: Try actual module import for reliable verification
+      console.log(`[Wu] 🔍 Testing path: ${url}`);
+
+      // 🚀 First, try a GET request to check if file exists and is accessible
+      const response = await fetch(url, {
+        method: 'GET',
+        cache: 'no-cache',
+        signal: AbortSignal.timeout(2000) // 2 second timeout
+      });
+
+      if (!response.ok) {
+        console.log(`[Wu] ❌ Path validation failed - HTTP ${response.status}: ${url}`);
+        return false;
+      }
+
+      // 🎯 Check content type and file extension
+      const contentType = response.headers.get('content-type') || '';
+      const isJavaScript =
+        contentType.includes('javascript') ||
+        contentType.includes('module') ||
+        contentType.includes('text/plain') || // Some servers serve JS as plain text
+        url.endsWith('.js') ||
+        url.endsWith('.mjs');
+
+      if (!isJavaScript) {
+        console.log(`[Wu] ❌ Path validation failed - Invalid content type '${contentType}': ${url}`);
+        return false;
+      }
+
+      // 🌌 FINAL VERIFICATION: Check if content looks like a valid module
+      const content = await response.text();
+
+      // 🚫 DETECT HTML FALLBACK: Check if server returned HTML instead of JS
+      const isHtmlFallback =
+        content.includes('<!doctype') ||
+        content.includes('<html') ||
+        content.includes('<head>') ||
+        content.includes('<body>') ||
+        (content.includes('<') && content.includes('>') && content.length > 200);
+
+      if (isHtmlFallback) {
+        console.log(`[Wu] ❌ Path validation failed - Server returned HTML fallback page: ${url}`);
+        return false;
+      }
+
+      // 🎯 Check for valid JavaScript module content
+      const hasModuleContent =
+        content.includes('export') ||
+        content.includes('import') ||
+        content.includes('wu.define') ||
+        content.includes('module.exports') ||
+        content.includes('console.log') ||
+        (content.includes('function') && content.length > 10);
+
+      if (!hasModuleContent) {
+        console.log(`[Wu] ❌ Path validation failed - No valid module content: ${url}`);
+        console.log(`[Wu] 🔍 Content preview: ${content.substring(0, 100)}...`);
+        return false;
+      }
+
+      console.log(`[Wu] ✅ Path validation successful: ${url} (${content.length} chars)`);
+      return true;
+
+    } catch (error) {
+      // 🚫 Network, timeout, or parsing error means path is invalid
+      console.log(`[Wu] ❌ Path validation failed for ${url}: ${error.message}`);
+      return false;
+    }
+  }
+
+  /**
+   * 📦 MODULE LOADER: Advanced registration patterns
+   * Handles asynchronous registration with timing synchronization
+   */
+  async moduleLoader(moduleUrl, appName) {
+    // ✅ Check if already registered
+    if (this.definitions.has(appName)) {
+      console.log(`[Wu] ⚡ App ${appName} already registered`);
+      return;
+    }
+
+    console.log(`[Wu] 📡 Using event-based registration for ${appName}`);
+
+    // 🔔 Use event-based waiting (no polling!)
+    const registrationPromise = this.registry.waitForApp(appName, 10000);
+
+    // 🚀 Load module asynchronously
+    const moduleLoadPromise = import(/* @vite-ignore */ moduleUrl);
+
+    // 🌌 Wait for both operations to complete
+    await Promise.all([moduleLoadPromise, registrationPromise]);
+
+    console.log(`[Wu] ✅ App ${appName} loaded and registered via events`);
+  }
+
+  /**
+   * Desmontar una aplicación
+   * @param {string} appName - Nombre de la app
+   */
+  async unmount(appName) {
+    try {
+      console.log(`[Wu] 🗑️ Unmounting ${appName}`);
+
+      const mounted = this.mounted.get(appName);
+      if (!mounted) {
+        console.warn(`[Wu] App ${appName} not mounted`);
+        return;
+      }
+
+      // 🪝 Execute beforeUnmount hooks
+      const beforeUnmountResult = await this.hooks.execute('beforeUnmount', { appName, mounted });
+      if (beforeUnmountResult.cancelled) {
+        console.warn('[Wu] Unmount cancelled by beforeUnmount hook');
+        return;
+      }
+
+      // 🔌 Call plugin beforeUnmount hooks
+      const pluginBeforeUnmount = await this.pluginSystem.callHook('beforeUnmount', { appName });
+      if (pluginBeforeUnmount === false) {
+        console.warn('[Wu] Unmount cancelled by plugin beforeUnmount hook');
+        return;
+      }
+
+      // Ejecutar unmount del lifecycle si existe
+      if (mounted.lifecycle?.unmount) {
+        await mounted.lifecycle.unmount(mounted.container);
+      }
+
+      // Limpiar sandbox
+      this.sandbox.cleanup(mounted.sandbox);
+
+      // 🏊 Release sandbox to pool
+      if (mounted.poolSandbox) {
+        this.sandboxPool.release(appName);
+      }
+
+      // Remover del registro de montadas
+      this.mounted.delete(appName);
+
+      // 🪝 Execute afterUnmount hooks
+      await this.hooks.execute('afterUnmount', { appName });
+
+      // 🔌 Call plugin afterUnmount hooks
+      await this.pluginSystem.callHook('afterUnmount', { appName });
+
+      // 📢 Emit unmount event
+      this.eventBus.emit('app:unmounted', { appName }, { appName });
+
+      console.log(`[Wu] ✅ ${appName} unmounted successfully`);
+    } catch (error) {
+      console.error(`[Wu] ❌ Failed to unmount ${appName}:`, error);
+
+      // 🔌 Call plugin error hooks
+      await this.pluginSystem.callHook('onError', { phase: 'unmount', error, appName });
+
+      // 📢 Emit error event
+      this.eventBus.emit('app:error', { appName, error: error.message }, { appName });
+      throw error;
+    }
+  }
+
+  /**
+   * Cargar componente compartido (para imports/exports)
+   * @param {string} componentPath - Ruta del componente (ej: "shared.Button")
+   */
+  async use(componentPath) {
+    const [appName, componentName] = componentPath.split('.');
+
+    if (!appName || !componentName) {
+      throw new Error(`Invalid component path: ${componentPath}. Use format "app.component"`);
+    }
+
+    const app = this.apps.get(appName);
+    if (!app) {
+      throw new Error(`App ${appName} not registered`);
+    }
+
+    const manifest = this.manifests.get(appName);
+    const exportPath = manifest?.wu?.exports?.[componentName];
+
+    if (!exportPath) {
+      throw new Error(`Component ${componentName} not exported by ${appName}`);
+    }
+
+    // Cargar componente
+    return await this.loader.loadComponent(app.url, exportPath);
+  }
+
+  /**
+   * Obtener información de una app
+   * @param {string} appName - Nombre de la app
+   */
+  getAppInfo(appName) {
+    return {
+      registered: this.apps.get(appName),
+      manifest: this.manifests.get(appName),
+      mounted: this.mounted.get(appName),
+      definition: this.definitions.get(appName)
+    };
+  }
+
+  /**
+   * Obtener estadísticas del framework
+   */
+  getStats() {
+    return {
+      registered: this.apps.size,
+      defined: this.definitions.size,
+      mounted: this.mounted.size,
+      apps: Array.from(this.apps.keys())
+    };
+  }
+
+  /**
+   * 🏪 STORE METHODS: Convenience methods for state management
+   */
+
+  /**
+   * Get value from global store
+   * @param {string} path - Dot notation path
+   * @returns {*} Value at path
+   */
+  getState(path) {
+    return this.store.get(path);
+  }
+
+  /**
+   * Set value in global store
+   * @param {string} path - Dot notation path
+   * @param {*} value - Value to set
+   * @returns {number} Sequence number
+   */
+  setState(path, value) {
+    return this.store.set(path, value);
+  }
+
+  /**
+   * Subscribe to state changes
+   * @param {string} pattern - Path or pattern
+   * @param {Function} callback - Callback function
+   * @returns {Function} Unsubscribe function
+   */
+  onStateChange(pattern, callback) {
+    return this.store.on(pattern, callback);
+  }
+
+  /**
+   * Batch set multiple state values
+   * @param {Object} updates - Object with path:value pairs
+   * @returns {Array} Sequence numbers
+   */
+  batchState(updates) {
+    return this.store.batch(updates);
+  }
+
+  /**
+   * Get store metrics
+   * @returns {Object} Performance metrics
+   */
+  getStoreMetrics() {
+    return this.store.getMetrics();
+  }
+
+  /**
+   * Clear all state
+   */
+  clearState() {
+    this.store.clear();
+  }
+
+  /**
+   * 🎯 SIMPLIFIED API: Create WuApp instance for declarative usage
+   * @param {string} name - App name
+   * @param {Object} config - Configuration { url, container, autoInit }
+   * @returns {WuApp} WuApp instance
+   */
+  app(name, config) {
+    return new WuApp(name, config, this);
+  }
+
+  /**
+   * Limpiar todo el framework
+   */
+  async destroy() {
+    console.log('[Wu] 🧹 Destroying framework...');
+
+    try {
+      // 🪝 Execute beforeDestroy hooks
+      await this.hooks.execute('beforeDestroy', {});
+
+      // 🔌 Call plugin onDestroy hooks
+      await this.pluginSystem.callHook('onDestroy', {});
+
+      // Limpiar health monitor
+      if (this.healthState.monitor) {
+        clearInterval(this.healthState.monitor);
+        this.healthState.monitor = null;
+      }
+
+      // Limpiar MutationObserver
+      if (this.healthState.mutationObserver) {
+        this.healthState.mutationObserver.disconnect();
+        this.healthState.mutationObserver = null;
+      }
+
+      // Limpiar timeouts pendientes
+      if (this.healthState.mutationCheckTimeout) {
+        clearTimeout(this.healthState.mutationCheckTimeout);
+      }
+
+      // Desmontar todas las apps
+      for (const appName of this.mounted.keys()) {
+        await this.unmount(appName);
+      }
+
+      // 🧹 Limpiar sistemas esenciales
+      this.cache.clear();
+      this.eventBus.removeAll();
+      this.eventBus.clearHistory();
+      this.performance.clearMetrics();
+
+      // 🧹 Limpiar advanced systems
+      this.pluginSystem.cleanup();
+      this.strategies.cleanup();
+      this.errorBoundary.cleanup();
+      this.hooks.cleanup();
+      this.sandboxPool.cleanup();
+      this.registry.cleanup();
+
+      // Limpiar registros
+      this.apps.clear();
+      this.definitions.clear();
+      this.manifests.clear();
+      this.mounted.clear();
+
+      // Limpiar store
+      this.store.clear();
+
+      this.isInitialized = false;
+
+      // 🪝 Execute afterDestroy hooks
+      await this.hooks.execute('afterDestroy', {});
+
+      console.log('[Wu] ✅ Framework destroyed');
+    } catch (error) {
+      console.error('[Wu] ❌ Error during destroy:', error);
+      throw error;
+    }
+  }
+}