wu-framework 1.1.6 → 1.1.8

package/src/core/wu-core.js

@@ -1,6 +1,6 @@
 /**
- * 🚀 WU-FRAMEWORK: UNIVERSAL MICROFRONTENDS
- * Motor principal agnóstico - Funciona con cualquier framework
+ * WU-FRAMEWORK: UNIVERSAL MICROFRONTENDS
+ * Motor principal agnostico - Funciona con cualquier framework
  */
 
 import { WuLoader } from './wu-loader.js';
@@ -16,8 +16,11 @@ 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';
+import { WuHtmlParser } from './wu-html-parser.js';
+import { WuScriptExecutor } from './wu-script-executor.js';
+import { WuIframeSandbox } from './wu-iframe-sandbox.js';
+import { WuPrefetch } from './wu-prefetch.js';
+import { WuOverrides } from './wu-overrides.js';
 
 export class WuCore {
   constructor(options = {}) {
@@ -26,6 +29,7 @@ export class WuCore {
     this.definitions = new Map();    // Definiciones de lifecycle
     this.manifests = new Map();      // Manifiestos cargados
     this.mounted = new Map();        // Apps montadas
+    this.hidden = new Map();         // Keep-alive hidden apps
 
     // Componentes core
     this.loader = new WuLoader();
@@ -33,451 +37,84 @@ export class WuCore {
     this.manifest = new WuManifest();
     this.store = store;
 
-    // 🚀 SISTEMAS ESENCIALES
+    // Strict sandbox support: HTML entry + script execution in proxy
+    this.htmlParser = new WuHtmlParser();
+    this.scriptExecutor = new WuScriptExecutor();
+
+    // Sistemas esenciales
     this.cache = new WuCache({ storage: 'localStorage', maxSize: 100 }); // 100MB cache
     this.eventBus = new WuEventBus();
     this.performance = new WuPerformance();
 
-    // 🎯 ADVANCED SYSTEMS
+    // 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
-    };
+    this.prefetcher = new WuPrefetch(this);
+    this.overrides = new WuOverrides();
 
     // 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: Observa SOLO los contenedores de apps montadas
-   * FIX: Ya no observa todo document.body (memory leak)
-   */
-  initializeMutationObserver() {
-    if (!window.MutationObserver) return;
-
-    // Map para trackear observers por contenedor (evita memory leak)
-    this.healthState.containerObservers = new Map();
-
-    // Callback compartido para todos los observers
-    this.healthState.mutationCallback = (mutations, observer) => {
-      let affectedAppName = null;
-
-      for (const mutation of mutations) {
-        if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
-          // Encontrar qué app fue afectada
-          for (const [appName, mounted] of this.mounted) {
-            const container = mounted.hostContainer || mounted.container;
-            if (mutation.target === container ||
-                mutation.target.contains?.(container)) {
-              affectedAppName = appName;
-              break;
-            }
-          }
-        }
-        if (affectedAppName) break;
-      }
-
-      if (affectedAppName) {
-        clearTimeout(this.healthState.mutationCheckTimeout);
-        this.healthState.mutationCheckTimeout = setTimeout(() => {
-          this.performHealthCheck();
-        }, 1000);
-      }
-    };
-
-    logger.wuDebug('🔍 MutationObserver system initialized (lazy per-container)');
-  }
-
-  /**
-   * 🔗 Observar contenedor específico cuando se monta una app
-   */
-  observeContainer(appName, container) {
-    if (!this.healthState.containerObservers || !container) return;
-
-    // No observar si ya existe
-    if (this.healthState.containerObservers.has(appName)) return;
-
-    const observer = new MutationObserver(this.healthState.mutationCallback);
-
-    // Observar solo el contenedor padre directo (no subtree profundo)
-    const parentToObserve = container.parentElement || container;
-    observer.observe(parentToObserve, {
-      childList: true,
-      subtree: false  // ✅ Solo hijos directos, no todo el árbol
-    });
-
-    this.healthState.containerObservers.set(appName, observer);
-    logger.wuDebug(`🔍 Observing container for ${appName}`);
-  }
-
-  /**
-   * 🔓 Dejar de observar contenedor cuando se desmonta
-   */
-  unobserveContainer(appName) {
-    if (!this.healthState.containerObservers) return;
-
-    const observer = this.healthState.containerObservers.get(appName);
-    if (observer) {
-      observer.disconnect();
-      this.healthState.containerObservers.delete(appName);
-      logger.wuDebug(`🔓 Stopped observing container for ${appName}`);
-    }
-  }
-
-  /**
-   * 💊 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);
-    }
+    logger.wuInfo('Wu Framework initialized - Universal Microfrontends');
   }
 
   /**
-   * 🕰️ 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}, ...] }
+   * Inicializar wu-framework con configuracion de apps
+   * @param {Object} config - Configuracion { apps: [{name, url}, ...] }
    */
   async init(config) {
     if (this.isInitialized) {
-      console.warn('[Wu] Framework already initialized');
+      logger.wuWarn('Framework already initialized');
       return;
     }
 
-    logger.wuDebug('🔧 Initializing with apps:', config.apps?.map(app => app.name));
+    // Global sandbox mode: 'module' (default) or 'strict'
+    this._sandboxMode = config.sandbox || 'module';
+
+    logger.wuDebug(`Initializing (sandbox: ${this._sandboxMode}) with apps:`, config.apps?.map(app => app.name));
 
     try {
-      // 🪝 Execute beforeInit hooks
+      // Execute beforeInit hooks
       const beforeInitResult = await this.hooks.execute('beforeInit', { config });
       if (beforeInitResult.cancelled) {
-        console.warn('[Wu] Initialization cancelled by beforeInit hook');
+        logger.wuWarn('Initialization cancelled by beforeInit hook');
         return;
       }
 
-      // 🔌 Call plugin beforeInit hooks
+      // Call plugin beforeInit hooks
       await this.pluginSystem.callHook('beforeInit', { config });
 
-      // 🏊 Initialize sandbox pool
-      await this.sandboxPool.init();
+      // Configure and apply cookie overrides (QA/testing: wu-override:<app>=<url>)
+      if (config.overrides) {
+        this.overrides.configure(config.overrides);
+      }
+      const apps = config.apps || [];
+      this.overrides.refresh();
+      this.overrides.applyToApps(apps);
 
       // Registrar todas las apps
-      for (const appConfig of config.apps || []) {
+      for (const appConfig of apps) {
         await this.registerApp(appConfig);
       }
 
-      // 🎯 Preload apps with eager/preload strategies
+      // Preload apps with eager/preload strategies
       await this.strategies.preload(config.apps || []);
 
       this.isInitialized = true;
 
-      // 🪝 Execute afterInit hooks
+      // Execute afterInit hooks
       await this.hooks.execute('afterInit', { config });
 
-      // 🔌 Call plugin afterInit hooks
+      // Call plugin afterInit hooks
       await this.pluginSystem.callHook('afterInit', { config });
 
-      logger.wuInfo('✅ Framework initialized successfully');
+      logger.wuInfo('Framework initialized successfully');
     } catch (error) {
-      console.error('[Wu] ❌ Initialization failed:', error);
+      logger.wuError('Initialization failed:', error);
 
-      // 🔌 Call plugin error hooks
+      // Call plugin error hooks
       await this.pluginSystem.callHook('onError', { phase: 'init', error });
 
       throw error;
@@ -485,14 +122,14 @@ export class WuCore {
   }
 
   /**
-   * Registrar una aplicación
+   * Registrar una aplicacion
    * @param {Object} appConfig - { name, url }
    */
   async registerApp(appConfig) {
     const { name, url } = appConfig;
 
     try {
-      logger.wuDebug(`📦 Registering app: ${name} from ${url}`);
+      logger.wuDebug(`Registering app: ${name} from ${url}`);
 
       // Cargar manifest
       const manifestData = await this.manifest.load(url);
@@ -506,9 +143,9 @@ export class WuCore {
         status: 'registered'
       });
 
-      logger.wuDebug(`✅ App ${name} registered successfully`);
+      logger.wuDebug(`App ${name} registered successfully`);
     } catch (error) {
-      console.error(`[Wu] ❌ Failed to register app ${name}:`, error);
+      logger.wuError(`Failed to register app ${name}:`, error);
       throw error;
     }
   }
@@ -525,79 +162,86 @@ export class WuCore {
 
     this.definitions.set(appName, lifecycle);
 
-    // 🔔 Notify registry that app is ready
-    this.registry.markAsRegistered(appName);
-
-    // 📡 Dispatch custom event for external listeners
+    // 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}`);
+    logger.wuDebug(`Lifecycle defined for: ${appName}`);
   }
 
   /**
-   * 🚀 MOUNT APP: Multi-retry app mounting with self-healing
+   * Mount app with multi-retry mounting and recovery.
+   * If the app is in keep-alive (hidden) state, shows it instantly.
+   *
    * @param {string} appName - Nombre de la app
    * @param {string} containerSelector - Selector del contenedor
    */
   async mount(appName, containerSelector) {
+    // Check if app is in keep-alive (hidden) state
+    const hiddenEntry = this.hidden.get(appName);
+    if (hiddenEntry) {
+      if (hiddenEntry.containerSelector === containerSelector) {
+        // Same container → instant show (no reload)
+        return await this.show(appName);
+      }
+      // Different container → destroy hidden state, remount normally
+      await this._destroyHidden(appName);
+    }
+
     return await this.mountWithRecovery(appName, containerSelector, 0);
   }
 
   /**
-   * 🔄 MOUNT WITH RECOVERY: Self-healing app mounting
+   * Mount with recovery: self-healing app mounting
    */
   async mountWithRecovery(appName, containerSelector, attempt = 0) {
     const maxAttempts = 3;
 
     try {
-      // ⚡ Start performance measurement
+      // Start performance measurement
       this.performance.startMeasure('mount', appName);
 
-      logger.wuDebug(`🔗 Mounting ${appName} in ${containerSelector} (attempt ${attempt + 1})`);
+      logger.wuDebug(`Mounting ${appName} in ${containerSelector} (attempt ${attempt + 1})`);
 
-      // 🪝 Execute beforeLoad hooks
+      // Execute beforeLoad hooks
       const beforeLoadResult = await this.hooks.execute('beforeLoad', { appName, containerSelector, attempt });
       if (beforeLoadResult.cancelled) {
-        console.warn('[Wu] Mount cancelled by beforeLoad hook');
+        logger.wuWarn('Mount cancelled by beforeLoad hook');
         return;
       }
 
-      // 🔌 Call plugin beforeMount hooks
+      // 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');
+        logger.wuWarn('Mount cancelled by plugin beforeMount hook');
         return;
       }
 
-      // 🔮 Quantum state verification
+      // Verify app is registered
       const app = this.apps.get(appName);
       if (!app) {
         throw new Error(`App ${appName} not registered. Call wu.init() first.`);
       }
 
-      // 🌟 Container reality check
+      // 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 - pasar manifest con styleMode y URL de la app
+      // Create sandbox - pasar manifest con styleMode y URL de la app
       const sandbox = this.sandbox.create(appName, container, {
         manifest: app.manifest,
         styleMode: app.manifest?.styleMode,
         appUrl: app.url // Pasar URL de la app para filtrar estilos de apps fully-isolated
       });
 
-      // 🪝 Execute afterLoad hooks
+      // Execute afterLoad hooks
       await this.hooks.execute('afterLoad', { appName, containerSelector, sandbox });
 
-      // 🚀 Transcendent lifecycle resolution
+      // Resolve lifecycle definition
       let lifecycle = this.definitions.get(appName);
       if (!lifecycle) {
         // Load remote app
@@ -609,56 +253,53 @@ export class WuCore {
         }
       }
 
-      // 🪝 Execute beforeMount hooks
+      // 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');
+        logger.wuWarn('Mount cancelled by beforeMount hook');
         return;
       }
 
-      // 🎨 Wait for styles to be ready before mounting
+      // Wait for styles to be ready before mounting
       if (sandbox.stylesReady) {
-        console.log(`[Wu] ⏳ Waiting for styles to be ready for ${appName}...`);
+        logger.wuDebug(`Waiting for styles to be ready for ${appName}...`);
         await sandbox.stylesReady;
-        console.log(`[Wu] ✅ Styles ready for ${appName}`);
+        logger.wuDebug(`Styles ready for ${appName}`);
       }
 
-      // ⚡ Quantum mounting execution
+      // Execute mount lifecycle
       await lifecycle.mount(sandbox.container);
 
-      // 🌌 Registration in mounted dimension
+      // Register mounted app
       this.mounted.set(appName, {
         app,
         sandbox,
-        poolSandbox,
         lifecycle,
         container: sandbox.container,
         hostContainer: container,
+        containerSelector,
         timestamp: Date.now(),
         state: 'stable'
       });
 
-      // 🔍 Observar contenedor para health monitoring (sin memory leak)
-      this.observeContainer(appName, container);
-
-      // ⚡ End performance measurement
+      // End performance measurement
       const mountTime = this.performance.endMeasure('mount', appName);
 
-      // 🪝 Execute afterMount hooks
+      // Execute afterMount hooks
       await this.hooks.execute('afterMount', { appName, containerSelector, sandbox, mountTime });
 
-      // 🔌 Call plugin afterMount hooks
+      // Call plugin afterMount hooks
       await this.pluginSystem.callHook('afterMount', { appName, containerSelector, mountTime });
 
-      // 📢 Emit mount event
+      // Emit mount event
       this.eventBus.emit('app:mounted', { appName, mountTime, attempt }, { appName });
 
-      logger.wuInfo(`✅ ${appName} mounted successfully in ${mountTime.toFixed(2)}ms`);
+      logger.wuInfo(`${appName} mounted successfully in ${mountTime.toFixed(2)}ms`);
 
     } catch (error) {
-      console.error(`[Wu] ❌ Mount attempt ${attempt + 1} failed for ${appName}:`, error);
+      logger.wuError(`Mount attempt ${attempt + 1} failed for ${appName}:`, error);
 
-      // 🛡️ Use error boundary for intelligent error handling
+      // Use error boundary for intelligent error handling
       const errorResult = await this.errorBoundary.handle(error, {
         appName,
         containerSelector,
@@ -666,54 +307,63 @@ export class WuCore {
         container: containerSelector
       });
 
-      // Si el error boundary recuperó el error, no necesitamos reintentar
+      // Si el error boundary recupero el error, no necesitamos reintentar
       if (errorResult.recovered) {
-        console.log(`[Wu] ✨ Error recovered by error boundary`);
+        logger.wuDebug('Error recovered by error boundary');
         return;
       }
 
-      // 🔄 RECOVERY PROTOCOL
+      // Recovery protocol
       if (attempt < maxAttempts - 1 && errorResult.action === 'retry') {
-        console.log(`[Wu] 🌟 Initiating recovery protocol...`);
+        logger.wuDebug('Initiating recovery protocol...');
 
-        // 🛠️ Clean app state
+        // Clean app state
         await this.appStateCleanup(appName, containerSelector);
 
-        // ⏱️ Temporal stabilization
+        // Temporal stabilization
         await new Promise(resolve => setTimeout(resolve, 1000 * (attempt + 1)));
 
-        // 🚀 Recursive mounting with recovery
+        // Recursive mounting with recovery
         return await this.mountWithRecovery(appName, containerSelector, attempt + 1);
       }
 
-      // 🔌 Call plugin error hooks
+      // Call plugin error hooks
       await this.pluginSystem.callHook('onError', { phase: 'mount', error, appName });
 
-      // 💥 Final mount failure - error boundary already handled fallback UI
+      // Final mount failure - error boundary already handled fallback UI
       throw error;
     }
   }
 
   /**
-   * 🛠️ APP STATE CLEANUP: Enhanced container cleanup with framework protection
+   * App state cleanup: Enhanced container cleanup with framework protection
    */
   async appStateCleanup(appName, containerSelector) {
     try {
-      console.log(`[Wu] 🧹 Starting app state cleanup for ${appName}...`);
+      logger.wuDebug(`Starting app state cleanup for ${appName}...`);
+
+      // Clear hidden (keep-alive) state if present
+      if (this.hidden.has(appName)) {
+        try {
+          await this._destroyHidden(appName);
+        } catch (hiddenError) {
+          logger.wuWarn('Hidden app cleanup failed:', hiddenError);
+        }
+      }
 
-      // 🚀 Clear any existing mounted state safely
+      // Clear any existing mounted state safely
       if (this.mounted.has(appName)) {
         try {
-          await this.unmount(appName);
+          await this.unmount(appName, { force: true });
         } catch (unmountError) {
-          console.warn(`[Wu] ⚠️ Unmount failed during cleanup:`, unmountError);
+          logger.wuWarn('Unmount failed during cleanup:', unmountError);
         }
       }
 
-      // 🌌 Enhanced container cleanup with Vue safety measures
+      // Enhanced container cleanup with Vue safety measures
       const container = document.querySelector(containerSelector);
       if (container) {
-        // 🛡️ Protect Vue's reactivity system
+        // Protect Vue's reactivity system
         if (container.shadowRoot) {
           try {
             // Clear shadow root content safely
@@ -722,43 +372,43 @@ export class WuCore {
               try {
                 child.remove();
               } catch (removeError) {
-                console.warn(`[Wu] ⚠️ Failed to remove shadow child:`, removeError);
+                logger.wuWarn('Failed to remove shadow child:', removeError);
               }
             });
           } catch (shadowError) {
-            console.warn(`[Wu] ⚠️ Shadow root cleanup failed:`, shadowError);
+            logger.wuWarn('Shadow root cleanup failed:', shadowError);
           }
         }
 
-        // 🔮 Clear any direct children if no shadow root
+        // 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);
+            logger.wuWarn('Container innerHTML cleanup failed:', htmlError);
           }
         }
 
-        // 🌟 Reset container attributes
+        // Reset container attributes
         container.removeAttribute('data-wu-app');
         container.removeAttribute('data-quantum-state');
         container.removeAttribute('wu-debug');
       }
 
-      // 🎯 Reset definition state
+      // Reset definition state
       this.definitions.delete(appName);
 
-      // 🚀 Clear sandbox registry
+      // Clear sandbox registry
       if (this.sandbox && this.sandbox.sandboxes) {
         this.sandbox.sandboxes.delete(appName);
       }
 
-      console.log(`[Wu] ✅ App state cleaned successfully for ${appName}`);
+      logger.wuDebug(`App state cleaned successfully for ${appName}`);
 
     } catch (cleanupError) {
-      console.warn(`[Wu] ⚠️ App cleanup partial failure for ${appName}:`, cleanupError);
+      logger.wuWarn(`App cleanup partial failure for ${appName}:`, cleanupError);
 
-      // 🌌 Emergency cleanup - force clear everything
+      // Emergency cleanup - force clear everything
       try {
         const container = document.querySelector(containerSelector);
         if (container) {
@@ -770,163 +420,239 @@ export class WuCore {
           }, 100);
         }
       } catch (emergencyError) {
-        console.error(`[Wu] 💥 Emergency cleanup failed:`, emergencyError);
+        logger.wuError('Emergency cleanup failed:', emergencyError);
       }
     }
   }
 
   /**
-   * 💥 ERROR STATE RENDERER: Visual error manifestation
+   * Remote app loader: Load app in the configured sandbox mode.
+   *
+   * Three modes:
+   *
+   * - module (default): ES6 import() + patchWindow for side-effect tracking.
+   *   Works with Vite, HMR, ES modules. App code runs in global scope.
+   *   Proxy is a cleanup tracker, not an isolation boundary.
+   *
+   * - strict: Hidden iframe + real import(). True JS isolation.
+   *   App code runs in iframe's window (separate global context).
+   *   Document operations proxied to Shadow DOM.
+   *   Preserves: tree shaking, source maps, HMR.
+   *   Falls back to eval mode if import() fails (CORS, etc.)
+   *
+   * - eval: Fetch HTML → parse scripts → execute with(proxy).
+   *   Maximum JS isolation via with(proxy) statement.
+   *   Requires bundled apps (UMD/IIFE), not ES modules.
+   *   No tree shaking, no source maps, no HMR.
+   *
+   * Set per-app: { name: 'app', url: '...', sandbox: 'strict' }
+   * Or globally: wu.init({ sandbox: 'strict', apps: [...] })
    */
-  async renderErrorState(containerSelector, appName, error) {
+  async loadAndMountRemoteApp(app, sandbox) {
+    const mode = app.sandbox || this._sandboxMode || 'module';
+
+    if (mode === 'strict') {
+      await this._loadStrict(app, sandbox);
+    } else if (mode === 'eval') {
+      await this._loadEval(app, sandbox);
+    } else {
+      await this._loadModule(app, sandbox);
+    }
+  }
+
+  /**
+   * MODULE MODE: import() + patchWindow (default).
+   * Side effects tracked during load, cleaned on unmount.
+   * App code runs in global scope.
+   */
+  async _loadModule(app, sandbox) {
+    const moduleUrl = await this.resolveModulePath(app);
+    logger.wuDebug(`[module] Loading ES module: ${moduleUrl}`);
+
+    const jsSandbox = sandbox.jsSandbox;
+    if (jsSandbox?.patchWindow) {
+      jsSandbox.patchWindow();
+    }
+
     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)'
-      });
+      await this.moduleLoader(moduleUrl, app.name);
+      logger.wuDebug(`[module] ES module loaded: ${app.name}`);
+    } catch (error) {
+      logger.wuError(`[module] Failed to load ${moduleUrl}:`, error);
+      throw error;
+    } finally {
+      if (jsSandbox?.unpatchWindow) {
+        jsSandbox.unpatchWindow();
+      }
+    }
+  }
 
-      // Create elements safely
-      const icon = document.createElement('div');
-      icon.textContent = '🌌';
-      Object.assign(icon.style, {
-        fontSize: '3rem',
-        marginBottom: '1rem'
-      });
+  /**
+   * STRICT MODE: Hidden iframe + real import().
+   *
+   * The iframe provides a separate window context. import() inside the iframe
+   * is a real ES module import — tree shaking, source maps, and HMR all work.
+   *
+   * Pipeline:
+   * 1. Create hidden iframe with <base href="appUrl">
+   * 2. Patch iframe's document → DOM operations go to Shadow DOM
+   * 3. import() the app module inside iframe
+   * 4. Wait for wu.define() registration
+   *
+   * If import() fails (CORS, network, etc.), falls back to eval mode
+   * with a console warning explaining why.
+   */
+  async _loadStrict(app, sandbox) {
+    logger.wuDebug(`[strict] Loading ${app.name} via iframe sandbox`);
 
-      const title = document.createElement('h3');
-      title.textContent = 'MOUNT ERROR DETECTED';
-      Object.assign(title.style, {
-        color: '#ff6b6b',
-        margin: '0 0 1rem 0'
-      });
+    // Create and activate iframe sandbox
+    const iframeSandbox = new WuIframeSandbox(app.name);
+    iframeSandbox.activate(app.url, sandbox.container, sandbox.shadowRoot);
+    sandbox.iframeSandbox = iframeSandbox;
 
-      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'
-      });
+    try {
+      // Resolve module path (same logic as module mode)
+      const moduleUrl = await this.resolveModulePath(app);
+      logger.wuDebug(`[strict] Importing module in iframe: ${moduleUrl}`);
+
+      // Import module inside iframe — real import()!
+      await iframeSandbox.importModule(moduleUrl);
+      logger.wuDebug(`[strict] Module imported for ${app.name}`);
+
+    } catch (importError) {
+      // import() failed — likely CORS or module error.
+      // Fall back to eval mode (fetch + parse + with(proxy)).
+      logger.wuWarn(
+        `[strict] iframe import failed for ${app.name}: ${importError.message}\n` +
+        `Falling back to eval mode (fetch + parse + execute with proxy).\n` +
+        `To fix: ensure the app's dev server sets Access-Control-Allow-Origin: * headers,\n` +
+        `or use sandbox: 'eval' explicitly for UMD/IIFE bundles.`
+      );
+
+      // Destroy failed iframe
+      iframeSandbox.destroy();
+      sandbox.iframeSandbox = null;
+
+      // Fallback to eval mode
+      await this._loadEval(app, sandbox);
+      return;
+    }
 
-      const details = document.createElement('details');
-      Object.assign(details.style, {
-        margin: '1rem 0',
-        textAlign: 'left'
-      });
+    // Wait for wu.define()
+    await this._waitForDefine(app.name, 'strict');
 
-      const summary = document.createElement('summary');
-      summary.textContent = '🔍 Debug Info';
-      Object.assign(summary.style, {
-        cursor: 'pointer',
-        color: '#4ecdc4'
-      });
+    logger.wuDebug(`[strict] ${app.name} loaded and registered via iframe`);
+  }
 
-      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'
-      });
+  /**
+   * EVAL MODE: Fetch HTML → parse → execute scripts inside proxy.
+   *
+   * Maximum JS isolation via with(proxy) statement — all unqualified
+   * identifiers (setTimeout, document, fetch) go through proxy traps.
+   *
+   * Requires bundled apps (UMD/IIFE). ES modules cannot be eval'd.
+   * No tree shaking, no source maps, no HMR.
+   *
+   * Pipeline:
+   * 1. Fetch HTML from app URL
+   * 2. Parse: extract scripts (inline + external), styles, clean DOM
+   * 3. Inject DOM + styles into Shadow DOM
+   * 4. Execute all scripts inside the proxy via WuScriptExecutor
+   * 5. Wait for wu.define()
+   */
+  async _loadEval(app, sandbox) {
+    logger.wuDebug(`[eval] Loading ${app.name} from ${app.url}`);
 
-      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'
-      });
+    const jsSandbox = sandbox.jsSandbox;
+    const proxy = jsSandbox.getProxy();
 
-      // 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)');
+    if (!proxy) {
+      throw new Error(`[eval] No active proxy for ${app.name}. Sandbox must be activated first.`);
+    }
 
-      // Assemble DOM structure
-      details.appendChild(summary);
-      details.appendChild(pre);
+    // 1. Fetch and parse HTML
+    const parsed = await this.htmlParser.fetchAndParse(app.url, app.name);
 
-      errorContainer.appendChild(icon);
-      errorContainer.appendChild(title);
-      errorContainer.appendChild(description);
-      errorContainer.appendChild(details);
-      errorContainer.appendChild(button);
+    // 2. Inject clean DOM into container
+    if (parsed.dom) {
+      sandbox.container.innerHTML = parsed.dom;
+    }
 
-      container.appendChild(errorContainer);
+    // 3. Inject styles into shadow root
+    const styleTarget = sandbox.shadowRoot || sandbox.container;
 
-    } catch (renderError) {
-      console.error(`[Wu] 💥 Failed to render error state:`, renderError);
+    for (const cssText of parsed.styles.inline) {
+      const style = document.createElement('style');
+      style.textContent = cssText;
+      styleTarget.appendChild(style);
     }
-  }
 
-  /**
-   * 📦 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);
+    for (const href of parsed.styles.external) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      styleTarget.appendChild(link);
+    }
 
-    console.log(`[Wu] 📦 Loading ES module: ${moduleUrl}`);
+    // 4. Build and execute scripts inside the proxy
+    const scripts = [];
+    for (const content of parsed.scripts.inline) {
+      scripts.push({ content });
+    }
+    for (const src of parsed.scripts.external) {
+      scripts.push({ src });
+    }
 
-    try {
-      // 🌟 MODULE LOADING: Multi-path module resolution
-      await this.moduleLoader(moduleUrl, app.name);
+    await this.scriptExecutor.executeAll(scripts, app.name, proxy);
+    logger.wuDebug(`[eval] Scripts executed for ${app.name}`);
 
-      console.log(`[Wu] ✅ ES module loaded: ${app.name}`);
+    // 5. Wait for wu.define()
+    await this._waitForDefine(app.name, 'eval');
 
-    } catch (error) {
-      console.error(`[Wu] ❌ Failed to load ES module ${moduleUrl}:`, error);
-      throw error;
+    logger.wuDebug(`[eval] ${app.name} loaded and registered`);
+  }
+
+  /**
+   * Wait for an app to call wu.define() with a timeout.
+   * Shared by strict and eval modes.
+   */
+  async _waitForDefine(appName, mode) {
+    const maxWaitTime = 10000;
+    const checkInterval = 50;
+    const startTime = Date.now();
+
+    while (!this.definitions.has(appName)) {
+      if (Date.now() - startTime >= maxWaitTime) {
+        throw new Error(
+          `[${mode}] App '${appName}' loaded but wu.define() was not called within ${maxWaitTime}ms.\n` +
+          `Make sure your app calls: window.wu.define('${appName}', { mount, unmount })`
+        );
+      }
+      await new Promise(resolve => setTimeout(resolve, checkInterval));
     }
   }
 
   /**
-   * 🔍 MODULE PATH RESOLVER: Intelligent URL construction with fallback
+   * 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
+    // 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}`);
+      logger.wuDebug(`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}`);
+      logger.wuDebug(`Using direct path: ${directPath}`);
       return directPath;
     }
 
-    // 🔍 Multi-path candidates (in order of preference)
+    // Multi-path candidates (in order of preference)
     const pathCandidates = [
       `${baseUrl}/src/${entryFile}`,           // Standard structure
       `${baseUrl}/${entryFile}`,               // Root level
@@ -938,47 +664,47 @@ export class WuCore {
       `${baseUrl}/es/${entryFile}`             // ES modules folder
     ];
 
-    console.log(`[Wu] 🔍 Attempting path resolution for ${app.name}...`);
+    logger.wuDebug(`Attempting path resolution for ${app.name}...`);
 
-    // 🚀 SMART PATH DISCOVERY: Try each candidate with validation
+    // 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}`);
+        logger.wuDebug(`Testing path candidate ${i + 1}/${pathCandidates.length}: ${candidate}`);
 
-        // 🌟 Path validation with enhanced verification
+        // Path validation with enhanced verification
         const isValid = await this.validatePath(candidate);
 
         if (isValid) {
-          console.log(`[Wu] ✅ Path resolved successfully: ${candidate}`);
+          logger.wuDebug(`Path resolved successfully: ${candidate}`);
           return candidate;
         } else {
-          console.log(`[Wu] ❌ Path candidate ${i + 1} failed validation: ${candidate}`);
+          logger.wuDebug(`Path candidate ${i + 1} failed validation: ${candidate}`);
         }
 
       } catch (error) {
-        console.log(`[Wu] ⚠️ Path candidate ${i + 1} threw error: ${candidate} - ${error.message}`);
+        logger.wuDebug(`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
+    // 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}`);
+    logger.wuWarn(`All path candidates failed, using fallback: ${fallbackPath}`);
     return fallbackPath;
   }
 
   /**
-   * 🔧 PATH VALIDATOR: Smart existence verification with module testing
+   * 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}`);
+      // Enhanced validation: Try actual module import for reliable verification
+      logger.wuDebug(`Testing path: ${url}`);
 
-      // 🚀 First, try a GET request to check if file exists and is accessible
+      // First, try a GET request to check if file exists and is accessible
       const response = await fetch(url, {
         method: 'GET',
         cache: 'no-cache',
@@ -986,11 +712,11 @@ export class WuCore {
       });
 
       if (!response.ok) {
-        console.log(`[Wu] ❌ Path validation failed - HTTP ${response.status}: ${url}`);
+        logger.wuDebug(`Path validation failed - HTTP ${response.status}: ${url}`);
         return false;
       }
 
-      // 🎯 Check content type and file extension
+      // Check content type and file extension
       const contentType = response.headers.get('content-type') || '';
       const isJavaScript =
         contentType.includes('javascript') ||
@@ -1000,14 +726,14 @@ export class WuCore {
         url.endsWith('.mjs');
 
       if (!isJavaScript) {
-        console.log(`[Wu] ❌ Path validation failed - Invalid content type '${contentType}': ${url}`);
+        logger.wuDebug(`Path validation failed - Invalid content type '${contentType}': ${url}`);
         return false;
       }
 
-      // 🌌 FINAL VERIFICATION: Check if content looks like a valid module
+      // 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
+      // Detect HTML fallback: Check if server returned HTML instead of JS
       // Only check if content STARTS with HTML markers (trimmed), not if it contains them anywhere
       // This avoids false positives for Angular/React bundles that contain template strings
       const trimmedContent = content.trim().toLowerCase();
@@ -1019,11 +745,11 @@ export class WuCore {
         trimmedContent.startsWith('<!-');
 
       if (isHtmlFallback) {
-        console.log(`[Wu] ❌ Path validation failed - Server returned HTML fallback page: ${url}`);
+        logger.wuDebug(`Path validation failed - Server returned HTML fallback page: ${url}`);
         return false;
       }
 
-      // 🎯 Check for valid JavaScript module content
+      // Check for valid JavaScript module content
       const hasModuleContent =
         content.includes('export') ||
         content.includes('import') ||
@@ -1033,44 +759,44 @@ export class WuCore {
         (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)}...`);
+        logger.wuDebug(`Path validation failed - No valid module content: ${url}`);
+        logger.wuDebug(`Content preview: ${content.substring(0, 100)}...`);
         return false;
       }
 
-      console.log(`[Wu] ✅ Path validation successful: ${url} (${content.length} chars)`);
+      logger.wuDebug(`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}`);
+      // Network, timeout, or parsing error means path is invalid
+      logger.wuDebug(`Path validation failed for ${url}: ${error.message}`);
       return false;
     }
   }
 
   /**
-   * 📦 MODULE LOADER: Advanced registration patterns
+   * Module loader: Advanced registration patterns
    * Handles asynchronous registration with timing synchronization
-   * FIX: Verifica que definitions tenga el lifecycle después de cargar
+   * Verifica que definitions tenga el lifecycle despues de cargar
    */
   async moduleLoader(moduleUrl, appName) {
-    // ✅ Check if already registered
+    // Check if already registered
     if (this.definitions.has(appName)) {
-      console.log(`[Wu] ⚡ App ${appName} already registered`);
+      logger.wuDebug(`App ${appName} already registered`);
       return;
     }
 
-    console.log(`[Wu] 📡 Using event-based registration for ${appName}`);
+    logger.wuDebug(`Using event-based registration for ${appName}`);
 
-    // 🚀 Load module first
+    // Load module first
     try {
       await import(/* @vite-ignore */ moduleUrl);
     } catch (loadError) {
-      console.error(`[Wu] ❌ Failed to import module ${moduleUrl}:`, loadError);
+      logger.wuError(`Failed to import module ${moduleUrl}:`, loadError);
       throw loadError;
     }
 
-    // 🛡️ FIX: Esperar a que wu.define() se ejecute con verificación real
+    // Wait for wu.define() to be called with real verification
     const maxWaitTime = 10000; // 10 segundos
     const checkInterval = 50; // Verificar cada 50ms
     const startTime = Date.now();
@@ -1092,34 +818,62 @@ export class WuCore {
       await new Promise(resolve => setTimeout(resolve, checkInterval));
     }
 
-    console.log(`[Wu] ✅ App ${appName} loaded and registered (verified in definitions)`);
+    logger.wuDebug(`App ${appName} loaded and registered (verified in definitions)`);
   }
 
   /**
-   * Desmontar una aplicación
+   * Desmontar una aplicacion.
+   *
+   * With keepAlive, the app is hidden instead of destroyed.
+   * All DOM, JS state, timers, and iframe are preserved.
+   * Re-mounting shows the app instantly.
+   *
+   * keepAlive is resolved from (in priority order):
+   * 1. options.keepAlive (per-call override)
+   * 2. app config keepAlive (set via wu.app() or registerApp)
+   * 3. false (default: destroy)
+   *
+   * Use options.force = true to destroy even if keepAlive is set.
+   *
    * @param {string} appName - Nombre de la app
+   * @param {Object} [options] - Unmount options
+   * @param {boolean} [options.keepAlive] - Preserve state for instant re-mount
+   * @param {boolean} [options.force] - Force destroy even if keepAlive
    */
-  async unmount(appName) {
+  async unmount(appName, options = {}) {
     try {
-      console.log(`[Wu] 🗑️ Unmounting ${appName}`);
+      logger.wuDebug(`Unmounting ${appName}`);
 
       const mounted = this.mounted.get(appName);
       if (!mounted) {
-        console.warn(`[Wu] App ${appName} not mounted`);
+        // Check if it's hidden (keep-alive) — force destroy if requested
+        if (options.force && this.hidden.has(appName)) {
+          return await this._destroyHidden(appName);
+        }
+        logger.wuWarn(`App ${appName} not mounted`);
         return;
       }
 
-      // 🪝 Execute beforeUnmount hooks
+      // Resolve keepAlive: per-call > per-app config > default false
+      const keepAlive = options.force
+        ? false
+        : (options.keepAlive ?? mounted.app?.keepAlive ?? false);
+
+      if (keepAlive) {
+        return await this.hide(appName);
+      }
+
+      // Execute beforeUnmount hooks
       const beforeUnmountResult = await this.hooks.execute('beforeUnmount', { appName, mounted });
       if (beforeUnmountResult.cancelled) {
-        console.warn('[Wu] Unmount cancelled by beforeUnmount hook');
+        logger.wuWarn('Unmount cancelled by beforeUnmount hook');
         return;
       }
 
-      // 🔌 Call plugin beforeUnmount hooks
+      // Call plugin beforeUnmount hooks
       const pluginBeforeUnmount = await this.pluginSystem.callHook('beforeUnmount', { appName });
       if (pluginBeforeUnmount === false) {
-        console.warn('[Wu] Unmount cancelled by plugin beforeUnmount hook');
+        logger.wuWarn('Unmount cancelled by plugin beforeUnmount hook');
         return;
       }
 
@@ -1128,42 +882,197 @@ export class WuCore {
         await mounted.lifecycle.unmount(mounted.container);
       }
 
-      // Limpiar sandbox
-      this.sandbox.cleanup(mounted.sandbox);
-
-      // 🏊 Release sandbox to pool
-      if (mounted.poolSandbox) {
-        this.sandboxPool.release(appName);
+      // Destroy iframe sandbox if present (strict mode)
+      if (mounted.sandbox.iframeSandbox) {
+        mounted.sandbox.iframeSandbox.destroy();
+        mounted.sandbox.iframeSandbox = null;
       }
 
-      // 🔓 Dejar de observar contenedor (evita memory leak)
-      this.unobserveContainer(appName);
+      // Limpiar sandbox
+      this.sandbox.cleanup(mounted.sandbox);
 
       // Remover del registro de montadas
       this.mounted.delete(appName);
 
-      // 🪝 Execute afterUnmount hooks
+      // Execute afterUnmount hooks
       await this.hooks.execute('afterUnmount', { appName });
 
-      // 🔌 Call plugin afterUnmount hooks
+      // Call plugin afterUnmount hooks
       await this.pluginSystem.callHook('afterUnmount', { appName });
 
-      // 📢 Emit unmount event
+      // Emit unmount event
       this.eventBus.emit('app:unmounted', { appName }, { appName });
 
-      console.log(`[Wu] ✅ ${appName} unmounted successfully`);
+      logger.wuDebug(`${appName} unmounted successfully`);
     } catch (error) {
-      console.error(`[Wu] ❌ Failed to unmount ${appName}:`, error);
+      logger.wuError(`Failed to unmount ${appName}:`, error);
 
-      // 🔌 Call plugin error hooks
+      // Call plugin error hooks
       await this.pluginSystem.callHook('onError', { phase: 'unmount', error, appName });
 
-      // 📢 Emit error event
+      // Emit error event
       this.eventBus.emit('app:error', { appName, error: error.message }, { appName });
       throw error;
     }
   }
 
+  /**
+   * Hide a mounted app (keep-alive).
+   *
+   * Preserves all state: DOM in Shadow DOM, JS in iframe, timers, listeners.
+   * The app's optional `deactivate()` lifecycle hook is called.
+   * Re-show with `show()` or `mount()` with the same container.
+   *
+   * @param {string} appName - App to hide
+   */
+  async hide(appName) {
+    const mounted = this.mounted.get(appName);
+    if (!mounted) {
+      logger.wuWarn(`Cannot hide ${appName}: not mounted`);
+      return;
+    }
+
+    logger.wuDebug(`Hiding ${appName} (keep-alive)`);
+
+    // Call optional deactivate lifecycle hook
+    if (mounted.lifecycle?.deactivate) {
+      try {
+        await mounted.lifecycle.deactivate(mounted.container);
+      } catch (err) {
+        logger.wuWarn(`deactivate() failed for ${appName}:`, err);
+      }
+    }
+
+    // Execute beforeUnmount hooks (so plugins know)
+    await this.hooks.execute('beforeUnmount', { appName, mounted, keepAlive: true });
+    await this.pluginSystem.callHook('beforeUnmount', { appName, keepAlive: true });
+
+    // Hide the host container — all Shadow DOM content stays intact
+    mounted.hostContainer.style.display = 'none';
+    mounted.state = 'hidden';
+    mounted.hiddenAt = Date.now();
+
+    // Move from mounted → hidden
+    this.hidden.set(appName, mounted);
+    this.mounted.delete(appName);
+
+    // Execute afterUnmount hooks
+    await this.hooks.execute('afterUnmount', { appName, keepAlive: true });
+    await this.pluginSystem.callHook('afterUnmount', { appName, keepAlive: true });
+
+    // Emit event
+    this.eventBus.emit('app:hidden', { appName }, { appName });
+
+    logger.wuInfo(`${appName} hidden (keep-alive) — state preserved`);
+  }
+
+  /**
+   * Show a hidden (keep-alive) app.
+   *
+   * Restores visibility instantly — no reload, no remount.
+   * The app's optional `activate()` lifecycle hook is called.
+   *
+   * @param {string} appName - App to show
+   */
+  async show(appName) {
+    const hidden = this.hidden.get(appName);
+    if (!hidden) {
+      logger.wuWarn(`Cannot show ${appName}: not in keep-alive state`);
+      return;
+    }
+
+    this.performance.startMeasure('show', appName);
+    logger.wuDebug(`Showing ${appName} from keep-alive`);
+
+    // Execute beforeMount hooks
+    await this.hooks.execute('beforeMount', {
+      appName,
+      containerSelector: hidden.containerSelector,
+      sandbox: hidden.sandbox,
+      lifecycle: hidden.lifecycle,
+      keepAlive: true
+    });
+    await this.pluginSystem.callHook('beforeMount', {
+      appName,
+      containerSelector: hidden.containerSelector,
+      keepAlive: true
+    });
+
+    // Show the host container
+    hidden.hostContainer.style.display = '';
+    hidden.state = 'stable';
+    delete hidden.hiddenAt;
+
+    // Move from hidden → mounted
+    this.mounted.set(appName, hidden);
+    this.hidden.delete(appName);
+
+    // Call optional activate lifecycle hook
+    if (hidden.lifecycle?.activate) {
+      try {
+        await hidden.lifecycle.activate(hidden.container);
+      } catch (err) {
+        logger.wuWarn(`activate() failed for ${appName}:`, err);
+      }
+    }
+
+    const showTime = this.performance.endMeasure('show', appName);
+
+    // Execute afterMount hooks
+    await this.hooks.execute('afterMount', {
+      appName,
+      containerSelector: hidden.containerSelector,
+      sandbox: hidden.sandbox,
+      mountTime: showTime,
+      keepAlive: true
+    });
+    await this.pluginSystem.callHook('afterMount', {
+      appName,
+      containerSelector: hidden.containerSelector,
+      mountTime: showTime,
+      keepAlive: true
+    });
+
+    // Emit event
+    this.eventBus.emit('app:shown', { appName, showTime }, { appName });
+
+    logger.wuInfo(`${appName} shown from keep-alive in ${showTime.toFixed(2)}ms`);
+  }
+
+  /**
+   * Force-destroy a hidden (keep-alive) app.
+   * Runs full cleanup: lifecycle unmount, iframe destroy, sandbox cleanup.
+   *
+   * @param {string} appName
+   * @private
+   */
+  async _destroyHidden(appName) {
+    const hidden = this.hidden.get(appName);
+    if (!hidden) return;
+
+    logger.wuDebug(`Force-destroying hidden app: ${appName}`);
+
+    // Show first (so unmount sees the container)
+    hidden.hostContainer.style.display = '';
+    hidden.state = 'stable';
+
+    // Move back to mounted temporarily
+    this.mounted.set(appName, hidden);
+    this.hidden.delete(appName);
+
+    // Now do a full unmount
+    await this.unmount(appName, { force: true });
+  }
+
+  /**
+   * Check if an app is in keep-alive (hidden) state.
+   * @param {string} appName
+   * @returns {boolean}
+   */
+  isHidden(appName) {
+    return this.hidden.has(appName);
+  }
+
   /**
    * Cargar componente compartido (para imports/exports)
    * @param {string} componentPath - Ruta del componente (ej: "shared.Button")
@@ -1192,7 +1101,7 @@ export class WuCore {
   }
 
   /**
-   * Obtener información de una app
+   * Obtener informacion de una app
    * @param {string} appName - Nombre de la app
    */
   getAppInfo(appName) {
@@ -1205,19 +1114,20 @@ export class WuCore {
   }
 
   /**
-   * Obtener estadísticas del framework
+   * Obtener estadisticas del framework
    */
   getStats() {
     return {
       registered: this.apps.size,
       defined: this.definitions.size,
       mounted: this.mounted.size,
+      hidden: this.hidden.size,
       apps: Array.from(this.apps.keys())
     };
   }
 
   /**
-   * 🏪 STORE METHODS: Convenience methods for state management
+   * Store methods: Convenience methods for state management
    */
 
   /**
@@ -1274,7 +1184,79 @@ export class WuCore {
   }
 
   /**
-   * 🎯 SIMPLIFIED API: Create WuApp instance for declarative usage
+   * Set a URL override for an app (QA/testing).
+   * Sets a cookie so the override persists across page reloads.
+   * Only affects the current browser — no one else sees it.
+   *
+   * @param {string} appName - App to override
+   * @param {string} url - Override URL (e.g., 'http://localhost:5173')
+   * @param {Object} [options]
+   * @param {number} [options.maxAge=86400] - Cookie lifetime in seconds (default: 24h)
+   *
+   * @example
+   * wu.override('cart', 'http://localhost:5173');
+   * wu.override('header', 'https://preview-abc123.vercel.app');
+   */
+  override(appName, url, options) {
+    this.overrides.set(appName, url, options);
+  }
+
+  /**
+   * Remove URL override for an app.
+   * @param {string} appName
+   */
+  removeOverride(appName) {
+    this.overrides.remove(appName);
+  }
+
+  /**
+   * Get all active overrides.
+   * @returns {Object} { appName: url, ... }
+   */
+  getOverrides() {
+    return this.overrides.getAll();
+  }
+
+  /**
+   * Remove all overrides.
+   */
+  clearOverrides() {
+    this.overrides.clearAll();
+  }
+
+  /**
+   * Prefetch one or more apps before they're needed.
+   *
+   * Uses Speculation Rules API (Chrome 121+), falls back to
+   * <link rel="modulepreload"> or <link rel="prefetch">.
+   *
+   * @param {string|string[]} appNames - App name(s) to prefetch
+   * @param {Object} [options]
+   * @param {'immediate'|'hover'|'visible'|'idle'} [options.on='immediate'] - When to trigger
+   * @param {string|Element} [options.target] - Element for hover/visible triggers
+   * @param {'conservative'|'moderate'|'eager'} [options.eagerness='moderate'] - Speculation eagerness
+   * @returns {Promise<void>|Function} Promise or cleanup function
+   *
+   * @example
+   * wu.prefetch('cart');
+   * wu.prefetch('cart', { on: 'hover', target: '#cart-link' });
+   * wu.prefetch('cart', { on: 'visible', target: '#cart-section' });
+   * wu.prefetch(['profile', 'settings'], { on: 'idle' });
+   */
+  prefetch(appNames, options) {
+    return this.prefetcher.prefetch(appNames, options);
+  }
+
+  /**
+   * Prefetch all registered but not-yet-mounted apps.
+   * @param {Object} [options] - Same options as prefetch()
+   */
+  prefetchAll(options) {
+    return this.prefetcher.prefetchAll(options);
+  }
+
+  /**
+   * Create WuApp instance for declarative usage
    * @param {string} name - App name
    * @param {Object} config - Configuration { url, container, autoInit }
    * @returns {WuApp} WuApp instance
@@ -1287,71 +1269,57 @@ export class WuCore {
    * Limpiar todo el framework
    */
   async destroy() {
-    console.log('[Wu] 🧹 Destroying framework...');
+    logger.wuDebug('Destroying framework...');
 
     try {
-      // 🪝 Execute beforeDestroy hooks
+      // Execute beforeDestroy hooks
       await this.hooks.execute('beforeDestroy', {});
 
-      // 🔌 Call plugin onDestroy hooks
+      // 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 todos los MutationObservers por contenedor
-      if (this.healthState.containerObservers) {
-        for (const [appName, observer] of this.healthState.containerObservers) {
-          observer.disconnect();
-        }
-        this.healthState.containerObservers.clear();
-      }
-
-      // Limpiar timeouts pendientes
-      if (this.healthState.mutationCheckTimeout) {
-        clearTimeout(this.healthState.mutationCheckTimeout);
+      // Force-destroy all hidden (keep-alive) apps first
+      for (const appName of [...this.hidden.keys()]) {
+        await this._destroyHidden(appName);
       }
 
       // Desmontar todas las apps
-      for (const appName of this.mounted.keys()) {
-        await this.unmount(appName);
+      for (const appName of [...this.mounted.keys()]) {
+        await this.unmount(appName, { force: true });
       }
 
-      // 🧹 Limpiar sistemas esenciales
+      // Limpiar sistemas esenciales
       this.cache.clear();
       this.eventBus.removeAll();
       this.eventBus.clearHistory();
       this.performance.clearMetrics();
 
-      // 🧹 Limpiar advanced systems
+      // Limpiar advanced systems
       this.pluginSystem.cleanup();
       this.strategies.cleanup();
       this.errorBoundary.cleanup();
       this.hooks.cleanup();
-      this.sandboxPool.cleanup();
-      this.registry.cleanup();
+      this.prefetcher.cleanup();
 
       // Limpiar registros
       this.apps.clear();
       this.definitions.clear();
       this.manifests.clear();
       this.mounted.clear();
+      this.hidden.clear();
 
       // Limpiar store
       this.store.clear();
 
       this.isInitialized = false;
 
-      // 🪝 Execute afterDestroy hooks
+      // Execute afterDestroy hooks
       await this.hooks.execute('afterDestroy', {});
 
-      console.log('[Wu] ✅ Framework destroyed');
+      logger.wuDebug('Framework destroyed');
     } catch (error) {
-      console.error('[Wu] ❌ Error during destroy:', error);
+      logger.wuError('Error during destroy:', error);
       throw error;
     }
   }
-}
+}