wu-framework 1.1.6 → 1.1.8

package/src/core/wu-sandbox.js

@@ -7,23 +7,19 @@
 import { WuStyleBridge } from './wu-style-bridge.js';
 import { WuProxySandbox } from './wu-proxy-sandbox.js';
 import { WuSnapshotSandbox } from './wu-snapshot-sandbox.js';
-import { WuScriptExecutor } from './wu-script-executor.js';
-import { WuHtmlParser } from './wu-html-parser.js';
+import { logger } from './wu-logger.js';
 
 export class WuSandbox {
   constructor() {
     // Registros existentes
     this.sandboxes = new Map();
-    this.globalState = new Map();
     this.styleBridge = new WuStyleBridge();
 
     // 🚀 NUEVOS SISTEMAS INTEGRADOS
     this.jsSandboxes = new Map(); // ProxySandbox o SnapshotSandbox por app
-    this.scriptExecutor = new WuScriptExecutor();
-    this.htmlParser = new WuHtmlParser();
     this.sandboxStrategy = this.detectSandboxStrategy();
 
-    console.log(`[WuSandbox] 🛡️ Advanced isolation system initialized (strategy: ${this.sandboxStrategy})`);
+    logger.wuDebug(`Advanced isolation system initialized (strategy: ${this.sandboxStrategy})`);
   }
 
   /**
@@ -40,15 +36,15 @@ export class WuSandbox {
         });
         testProxy.test = 'value';
 
-        console.log('[WuSandbox] ✅ Proxy available - using ProxySandbox strategy');
+        logger.wuDebug('Proxy available - using ProxySandbox strategy');
         return 'proxy';
       } catch (error) {
-        console.warn('[WuSandbox] ⚠️ Proxy not working - falling back to SnapshotSandbox');
+        logger.wuWarn('Proxy not working - falling back to SnapshotSandbox');
         return 'snapshot';
       }
     }
 
-    console.warn('[WuSandbox] ⚠️ Proxy not available - using SnapshotSandbox strategy');
+    logger.wuWarn('Proxy not available - using SnapshotSandbox strategy');
     return 'snapshot';
   }
 
@@ -60,7 +56,7 @@ export class WuSandbox {
    * @returns {Object} Sandbox con shadow root y container
    */
   create(appName, hostContainer, options = {}) {
-    console.log(`[WuSandbox] 🔨 Creating sandbox for: ${appName}`);
+    logger.wuDebug(`Creating sandbox for: ${appName}`);
 
     try {
       // 🔧 SHADOW DOM VERIFICATION
@@ -71,13 +67,13 @@ export class WuSandbox {
       // 🛠️ SMART CLEANUP: Handle existing shadow roots
       let shadowRoot;
       if (hostContainer.shadowRoot) {
-        console.log(`[WuSandbox] 🔄 Existing shadow root detected, performing cleanup...`);
+        logger.wuDebug(`Existing shadow root detected for ${appName}, performing cleanup...`);
 
         // Clear existing shadow root content
         hostContainer.shadowRoot.innerHTML = '';
         shadowRoot = hostContainer.shadowRoot;
 
-        console.log(`[WuSandbox] ✨ Existing shadow root cleaned and reused`);
+        logger.wuDebug(`Existing shadow root cleaned and reused for ${appName}`);
       } else {
         // Create new Shadow DOM
         shadowRoot = hostContainer.attachShadow({
@@ -85,7 +81,7 @@ export class WuSandbox {
           delegatesFocus: true
         });
 
-        console.log(`[WuSandbox] 🌟 New shadow root created`);
+        logger.wuDebug(`New shadow root created for ${appName}`);
       }
 
       // 🎯 Create app container with advanced features
@@ -103,12 +99,12 @@ export class WuSandbox {
       shadowRoot.appendChild(baseStyles);
       shadowRoot.appendChild(appContainer);
 
-      // 🚀 Create isolated JavaScript scope (LEGACY - backward compatibility)
-      const jsScope = this.createJSScope(appName);
-
-      // 🛡️ NUEVO: Crear JS Sandbox avanzado (ProxySandbox o SnapshotSandbox)
+      // Create JS Sandbox with container reference for DOM/storage scoping
       const jsSandbox = this.createAdvancedJSSandbox(appName);
-      const jsProxy = jsSandbox.activate(); // Activar sandbox y obtener proxy
+      if (jsSandbox.setContainer) {
+        jsSandbox.setContainer(appContainer, shadowRoot);
+      }
+      const jsProxy = jsSandbox.activate();
 
       // Verificar styleMode del manifest antes de inyectar estilos
       const styleMode = options.styleMode || options.manifest?.styleMode;
@@ -118,7 +114,6 @@ export class WuSandbox {
         shadowRoot,
         container: appContainer,
         hostContainer,
-        jsScope, // LEGACY: mantener para compatibilidad
         jsSandbox, // NUEVO: ProxySandbox o SnapshotSandbox
         jsProxy, // NUEVO: Proxy para ejecutar scripts
         styles: baseStyles,
@@ -137,42 +132,42 @@ export class WuSandbox {
       if (styleMode === 'isolated') {
         // 🔒 MODO ISOLATED: Encapsulamiento nativo del Shadow DOM
         // No se inyectan estilos externos - la app debe manejar sus propios estilos
-        console.log(`[WuSandbox] 🔒 Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation`);
+        logger.wuDebug(`Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation`);
         sandbox.stylesReady = Promise.resolve(0);
         // No configurar observer de estilos - la app es responsable de sus propios estilos
 
       } else if (styleMode === 'fully-isolated') {
-        console.log(`[WuSandbox] 🛡️ Style mode "fully-isolated" detected for ${appName}, using enhanced style injection`);
+        logger.wuDebug(`Style mode "fully-isolated" detected for ${appName}, using enhanced style injection`);
         // Registrar esta app como fully-isolated en el style bridge para filtrar sus estilos
         const appUrl = options.appUrl || (options.manifest?.name ? `/${options.manifest.name}/` : `/${appName}/`);
         this.styleBridge.registerFullyIsolatedApp(appName, appUrl);
-        
+
         // Guardar appUrl en sandbox para uso en reinjectStyles
         sandbox.appUrl = appUrl;
-        
+
         // Para fully-isolated, inyectar SOLO los estilos propios de la app en su Shadow DOM
         // Guardamos referencia a this para usar en el observer
         const self = this;
-        
+
         sandbox.stylesReady = new Promise((resolve) => {
           let resolved = false;
-          
+
           const tryInject = async () => {
             const count = await self.injectOwnStylesToShadow(shadowRoot, appName, appUrl);
-            
+
             if (count > 0) {
-              console.log(`[WuSandbox] 🎨 Injected ${count} own styles for ${appName} (fully-isolated)`);
+              logger.wuDebug(`Injected ${count} own styles for ${appName} (fully-isolated)`);
               if (!resolved) {
                 resolved = true;
                 resolve(count);
               }
             }
-            
+
             return count;
           };
-          
+
           // Usar MutationObserver PERSISTENTE para detectar cuando se inyectan estilos del app
-          console.log(`[WuSandbox] 👀 Setting up style observer for ${appName} (fully-isolated)`);
+          logger.wuDebug(`Setting up style observer for ${appName} (fully-isolated)`);
           const observer = new MutationObserver((mutations) => {
             let newStyleCount = 0;
             for (const m of mutations) {
@@ -182,27 +177,27 @@ export class WuSandbox {
                     newStyleCount++;
                     const viteId = n.getAttribute ? n.getAttribute('data-vite-dev-id') : null;
                     if (viteId && viteId.toLowerCase().includes(appName.toLowerCase())) {
-                      console.log(`[WuSandbox] 🆕 New ${appName} style detected: ${viteId.split('/').pop()}`);
+                      logger.wuDebug(`New ${appName} style detected: ${viteId.split('/').pop()}`);
                     }
                   }
                 }
               }
             }
             if (newStyleCount > 0) {
-              console.log(`[WuSandbox] 🔄 ${newStyleCount} new styles detected in head, checking for ${appName}...`);
+              logger.wuDebug(`${newStyleCount} new styles detected in head, checking for ${appName}...`);
               tryInject();
             }
           });
-          
+
           // Observar cambios en el head DE FORMA PERSISTENTE
           observer.observe(document.head, {
             childList: true,
             subtree: true
           });
-          
+
           // Guardar referencia al observer para poder desconectarlo cuando se desmonte la app
           sandbox.styleObserver = observer;
-          
+
           // Intento inicial con pequeño delay para que Vite procese los imports
           setTimeout(async () => {
             const count = await tryInject();
@@ -210,9 +205,9 @@ export class WuSandbox {
             if (!resolved) {
               setTimeout(() => {
                 if (!resolved) {
-                  console.warn(`[WuSandbox] ⚠️ No own styles found for ${appName} after timeout, using FALLBACK`);
+                  logger.wuWarn(`No own styles found for ${appName} after timeout, using FALLBACK`);
                   const fallbackCount = self.injectAllStylesToShadow(shadowRoot, appName);
-                  console.log(`[WuSandbox] 🎨 FALLBACK: Injected ${fallbackCount} styles for ${appName}`);
+                  logger.wuDebug(`FALLBACK: Injected ${fallbackCount} styles for ${appName}`);
                   resolved = true;
                   resolve(fallbackCount);
                 }
@@ -222,21 +217,21 @@ export class WuSandbox {
         });
       } else {
         // 🌐 MODO SHARED (default): Inyectar todos los estilos compartidos del documento
-        console.log(`[WuSandbox] 🌐 Style mode "shared" for ${appName}, injecting all shared styles...`);
+        logger.wuDebug(`Style mode "shared" for ${appName}, injecting all shared styles...`);
         sandbox.stylesReady = this.styleBridge.injectStylesIntoShadow(shadowRoot, appName, styleMode).then(count => {
-          console.log(`[WuSandbox] 🎨 Shared ${count} styles with ${appName}`);
+          logger.wuDebug(`Shared ${count} styles with ${appName}`);
 
           // 🔄 Observar cambios dinámicos de estilos (HMR de Vite)
           this.styleBridge.observeStyleChanges(() => {
-            console.log(`[WuSandbox] 🔄 Reinjecting styles for ${appName} due to changes`);
+            logger.wuDebug(`Reinjecting styles for ${appName} due to changes`);
             this.styleBridge.injectStylesIntoShadow(shadowRoot, appName, styleMode).catch(err => {
-              console.warn(`[WuSandbox] ⚠️ Failed to reinject styles:`, err);
+              logger.wuWarn(`Failed to reinject styles: ${err}`);
             });
           });
 
           return count;
         }).catch(error => {
-          console.warn(`[WuSandbox] ⚠️ Failed to inject styles:`, error);
+          logger.wuWarn(`Failed to inject styles: ${error}`);
           return 0;
         });
       }
@@ -244,11 +239,11 @@ export class WuSandbox {
       // 📊 Register in sandbox registry
       this.sandboxes.set(appName, sandbox);
 
-      console.log(`[WuSandbox] ✅ Enhanced sandbox created for ${appName}`);
+      logger.wuDebug(`Enhanced sandbox created for ${appName}`);
       return sandbox;
 
     } catch (error) {
-      console.error(`[WuSandbox] ❌ Failed to create sandbox for ${appName}:`, error);
+      logger.wuError(`Failed to create sandbox for ${appName}: ${error}`);
 
       // 🔧 FALLBACK RECOVERY: Create fallback sandbox when Shadow DOM fails
       if (error.message.includes('Shadow root cannot be created')) {
@@ -263,7 +258,7 @@ export class WuSandbox {
    * 🔧 FALLBACK SANDBOX: Create fallback container when Shadow DOM is not available
    */
   createFallbackSandbox(appName, hostContainer) {
-    console.log(`[WuSandbox] 🔧 Creating fallback sandbox for ${appName}...`);
+    logger.wuDebug(`Creating fallback sandbox for ${appName}...`);
 
     try {
       // 🛠️ Complete shadow DOM reset
@@ -291,7 +286,6 @@ export class WuSandbox {
         shadowRoot: null, // No shadow DOM in fallback mode
         container: fallbackContainer,
         hostContainer,
-        jsScope: this.createJSScope(appName),
         styles: null,
         created: Date.now(),
         sandbox_state: 'fallback_mode',
@@ -301,11 +295,11 @@ export class WuSandbox {
 
       this.sandboxes.set(appName, healedSandbox);
 
-      console.log(`[WuSandbox] ✨ Fallback sandbox created successfully for ${appName}`);
+      logger.wuDebug(`Fallback sandbox created successfully for ${appName}`);
       return healedSandbox;
 
     } catch (healingError) {
-      console.error(`[WuSandbox] 💥 Fallback sandbox creation failed:`, healingError);
+      logger.wuError(`Fallback sandbox creation failed: ${healingError}`);
       throw healingError;
     }
   }
@@ -409,10 +403,10 @@ export class WuSandbox {
 
     if (this.sandboxStrategy === 'proxy') {
       jsSandbox = new WuProxySandbox(appName);
-      console.log(`[WuSandbox] 🛡️ Created ProxySandbox for ${appName}`);
+      logger.wuDebug(`Created ProxySandbox for ${appName}`);
     } else {
       jsSandbox = new WuSnapshotSandbox(appName);
-      console.log(`[WuSandbox] 📸 Created SnapshotSandbox for ${appName}`);
+      logger.wuDebug(`Created SnapshotSandbox for ${appName}`);
     }
 
     // Registrar sandbox
@@ -421,178 +415,6 @@ export class WuSandbox {
     return jsSandbox;
   }
 
-  /**
-   * 📜 Ejecutar script en sandbox aislado
-   * @param {string} script - Código JavaScript
-   * @param {string} appName - Nombre de la app
-   * @param {string} strategy - 'function' | 'eval' | 'auto'
-   * @returns {*} Resultado de la ejecución
-   */
-  executeScript(script, appName, strategy = 'function') {
-    const sandbox = this.sandboxes.get(appName);
-    if (!sandbox || !sandbox.jsProxy) {
-      throw new Error(`Sandbox not found for ${appName}`);
-    }
-
-    console.log(`[WuSandbox] 📜 Executing script for ${appName}`);
-    return this.scriptExecutor.execute(script, appName, sandbox.jsProxy, strategy);
-  }
-
-  /**
-   * 📄 Parsear HTML de micro-app
-   * @param {string} html - HTML a parsear
-   * @param {string} appName - Nombre de la app
-   * @param {string} baseUrl - URL base
-   * @returns {Object} Resultado del parsing
-   */
-  parseHtml(html, appName, baseUrl) {
-    console.log(`[WuSandbox] 📄 Parsing HTML for ${appName}`);
-    return this.htmlParser.parse(html, appName, baseUrl);
-  }
-
-  /**
-   * 📄 Parsear HTML desde URL
-   * @param {string} url - URL de la app
-   * @param {string} appName - Nombre de la app
-   * @returns {Promise<Object>} Resultado del parsing
-   */
-  async parseHtmlFromUrl(url, appName) {
-    console.log(`[WuSandbox] 🌐 Parsing HTML from URL for ${appName}`);
-    return await this.htmlParser.parseFromUrl(url, appName);
-  }
-
-  /**
-   * Obtener estilos base para el sandbox
-   * @param {string} appName - Nombre de la aplicación
-   * @returns {string} CSS base
-   */
-  getBaseStyles(appName) {
-    return `
-      /* Wu Framework - Shadow DOM Base Styles */
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        contain: layout style paint;
-      }
-
-      .wu-app-root {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        isolation: isolate;
-      }
-
-      /* Reset básico para evitar conflictos */
-      * {
-        box-sizing: border-box;
-      }
-
-      /* Variables CSS aisladas para la app */
-      :host {
-        --wu-app-name: "${appName}";
-        --wu-isolation: true;
-      }
-
-      /* Prevenir scroll del host cuando no es necesario */
-      :host([wu-no-scroll]) {
-        overflow: hidden;
-      }
-
-      /* Estilos para debugging en desarrollo */
-      :host([wu-debug]) {
-        border: 2px dashed #ff6b6b;
-        background: rgba(255, 107, 107, 0.1);
-      }
-
-      :host([wu-debug])::before {
-        content: "Wu App: " attr(wu-app);
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: #ff6b6b;
-        color: white;
-        padding: 2px 6px;
-        font-size: 10px;
-        font-family: monospace;
-        z-index: 10000;
-      }
-    `;
-  }
-
-  /**
-   * Crear scope aislado para JavaScript
-   * @param {string} appName - Nombre de la aplicación
-   * @returns {Proxy} Proxy que aísla el scope global
-   */
-  createJSScope(appName) {
-    // Crear namespace aislado para la app
-    const appGlobals = Object.create(null);
-
-    // Proxy que intercepta acceso a variables globales
-    return new Proxy(window, {
-      set(target, prop, value) {
-        // Variables específicas de la app van al namespace aislado
-        if (this.isAppSpecific(prop)) {
-          appGlobals[prop] = value;
-          console.log(`[WuSandbox] 📝 App ${appName} set isolated global: ${String(prop)}`);
-          return true;
-        }
-
-        // Variables seguras pueden ir al global real
-        if (this.isSafeGlobal(prop)) {
-          target[prop] = value;
-          return true;
-        }
-
-        // Por defecto, aislar en el namespace de la app
-        appGlobals[prop] = value;
-        return true;
-      },
-
-      get(target, prop) {
-        // Primero buscar en namespace aislado
-        if (prop in appGlobals) {
-          return appGlobals[prop];
-        }
-
-        // Luego en el global real
-        return target[prop];
-      },
-
-      has(target, prop) {
-        return prop in appGlobals || prop in target;
-      },
-
-      ownKeys(target) {
-        return [...Object.keys(appGlobals), ...Object.keys(target)];
-      },
-
-      // Métodos auxiliares
-      isAppSpecific(prop) {
-        const appSpecificPatterns = [
-          /^app[A-Z]/,          // appData, appConfig, etc.
-          /^[a-z]+App$/,        // myApp, headerApp, etc.
-          /^__[a-zA-Z]/,        // variables privadas
-          /^_[A-Z]/             // variables de librerías
-        ];
-
-        return appSpecificPatterns.some(pattern => pattern.test(String(prop)));
-      },
-
-      isSafeGlobal(prop) {
-        const safeGlobals = new Set([
-          'console', 'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval',
-          'fetch', 'URL', 'URLSearchParams', 'FormData', 'Blob',
-          'Date', 'Math', 'JSON', 'Promise', 'Array', 'Object', 'String', 'Number'
-        ]);
-
-        return safeGlobals.has(String(prop));
-      }
-    });
-  }
-
   /**
    * Agregar estilos personalizados al sandbox
    * @param {string} appName - Nombre de la aplicación
@@ -601,7 +423,7 @@ export class WuSandbox {
   addStyles(appName, css) {
     const sandbox = this.sandboxes.get(appName);
     if (!sandbox) {
-      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      logger.wuWarn(`Sandbox not found for: ${appName}`);
       return;
     }
 
@@ -610,7 +432,7 @@ export class WuSandbox {
     styleElement.setAttribute('wu-custom-styles', '');
 
     sandbox.shadowRoot.appendChild(styleElement);
-    console.log(`[WuSandbox] 🎨 Custom styles added to ${appName}`);
+    logger.wuDebug(`Custom styles added to ${appName}`);
   }
 
   /**
@@ -621,7 +443,7 @@ export class WuSandbox {
   loadExternalStyles(appName, href) {
     const sandbox = this.sandboxes.get(appName);
     if (!sandbox) {
-      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      logger.wuWarn(`Sandbox not found for: ${appName}`);
       return;
     }
 
@@ -631,7 +453,7 @@ export class WuSandbox {
     linkElement.setAttribute('wu-external-styles', '');
 
     sandbox.shadowRoot.appendChild(linkElement);
-    console.log(`[WuSandbox] 🔗 External styles loaded in ${appName}: ${href}`);
+    logger.wuDebug(`External styles loaded in ${appName}: ${href}`);
   }
 
   /**
@@ -642,7 +464,7 @@ export class WuSandbox {
   setDebugMode(appName, enabled = true) {
     const sandbox = this.sandboxes.get(appName);
     if (!sandbox) {
-      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      logger.wuWarn(`Sandbox not found for: ${appName}`);
       return;
     }
 
@@ -654,7 +476,7 @@ export class WuSandbox {
       sandbox.hostContainer.removeAttribute('wu-app');
     }
 
-    console.log(`[WuSandbox] 🐛 Debug mode ${enabled ? 'enabled' : 'disabled'} for ${appName}`);
+    logger.wuDebug(`Debug mode ${enabled ? 'enabled' : 'disabled'} for ${appName}`);
   }
 
   /**
@@ -666,13 +488,13 @@ export class WuSandbox {
 
     const { appName, shadowRoot, hostContainer, jsSandbox } = sandbox;
 
-    console.log(`[WuSandbox] 🧹 Cleaning up sandbox for: ${appName}`);
+    logger.wuDebug(`Cleaning up sandbox for: ${appName}`);
 
     try {
       // 🛡️ NUEVO: Desactivar JS Sandbox
       if (jsSandbox && jsSandbox.isActive()) {
         jsSandbox.deactivate();
-        console.log(`[WuSandbox] 🛡️ JS Sandbox deactivated for ${appName}`);
+        logger.wuDebug(`JS Sandbox deactivated for ${appName}`);
       }
 
       // Limpiar eventos y observers
@@ -694,10 +516,10 @@ export class WuSandbox {
       this.sandboxes.delete(appName);
       this.jsSandboxes.delete(appName);
 
-      console.log(`[WuSandbox] ✅ Sandbox cleaned up: ${appName}`);
+      logger.wuDebug(`Sandbox cleaned up: ${appName}`);
 
     } catch (error) {
-      console.error(`[WuSandbox] ❌ Error cleaning up sandbox ${appName}:`, error);
+      logger.wuError(`Error cleaning up sandbox ${appName}: ${error}`);
     }
   }
 
@@ -748,8 +570,6 @@ export class WuSandbox {
       total: this.sandboxes.size,
       sandboxes: Array.from(this.sandboxes.keys()),
       jsSandboxes: Array.from(this.jsSandboxes.keys()),
-      htmlCacheSize: this.htmlParser.getStats().cacheSize,
-      scriptExecutor: this.scriptExecutor.getStats(),
       details: Array.from(this.sandboxes.entries()).map(([name, sandbox]) => ({
         name,
         uptime: Date.now() - sandbox.created,
@@ -764,20 +584,18 @@ export class WuSandbox {
    * Limpiar todos los sandboxes
    */
   cleanupAll() {
-    console.log(`[WuSandbox] 🧹 Cleaning up all ${this.sandboxes.size} sandboxes...`);
+    logger.wuDebug(`Cleaning up all ${this.sandboxes.size} sandboxes...`);
 
     for (const [appName, sandbox] of this.sandboxes) {
       this.cleanup(sandbox);
     }
 
-    this.globalState.clear();
-
     // Limpiar StyleBridge
     if (this.styleBridge) {
       this.styleBridge.cleanup();
     }
 
-    console.log(`[WuSandbox] ✅ All sandboxes cleaned up`);
+    logger.wuDebug('All sandboxes cleaned up');
   }
 
   /**
@@ -787,7 +605,7 @@ export class WuSandbox {
   configureStyleSharing(config) {
     if (this.styleBridge) {
       this.styleBridge.configure(config);
-      console.log(`[WuSandbox] 🎨 StyleBridge configured`);
+      logger.wuDebug('StyleBridge configured');
     }
   }
 
@@ -806,7 +624,7 @@ export class WuSandbox {
   async reinjectStyles(appName) {
     const sandbox = this.sandboxes.get(appName);
     if (!sandbox || !sandbox.shadowRoot) {
-      console.warn(`[WuSandbox] Cannot reinject styles for ${appName}`);
+      logger.wuWarn(`Cannot reinject styles for ${appName}`);
       return;
     }
 
@@ -814,27 +632,27 @@ export class WuSandbox {
 
     // 🔒 MODO ISOLATED: No reinyectar estilos - la app maneja sus propios estilos
     if (styleMode === 'isolated') {
-      console.log(`[WuSandbox] 🔒 Skipping reinject for ${appName} (isolated mode - app manages own styles)`);
+      logger.wuDebug(`Skipping reinject for ${appName} (isolated mode - app manages own styles)`);
       return;
     }
 
     // 🛡️ MODO FULLY-ISOLATED: Reinyectar SOLO estilos propios
     if (styleMode === 'fully-isolated') {
-      console.log(`[WuSandbox] 🔄 Reinjecting OWN styles for ${appName} (fully-isolated)...`);
+      logger.wuDebug(`Reinjecting OWN styles for ${appName} (fully-isolated)...`);
       const appUrl = sandbox.appUrl || sandbox.manifest?.name ? `/${sandbox.manifest.name}/` : `/${appName}/`;
       const count = await this.injectOwnStylesToShadow(sandbox.shadowRoot, appName, appUrl);
-      console.log(`[WuSandbox] ✅ Reinjected ${count} own styles for ${appName}`);
+      logger.wuDebug(`Reinjected ${count} own styles for ${appName}`);
       return;
     }
 
     // 🌐 MODO SHARED: Reinyectar todos los estilos compartidos
-    console.log(`[WuSandbox] 🔄 Reinjecting shared styles for ${appName}...`);
+    logger.wuDebug(`Reinjecting shared styles for ${appName}...`);
     const count = await this.styleBridge.injectStylesIntoShadow(
       sandbox.shadowRoot,
       appName,
       styleMode
     );
-    console.log(`[WuSandbox] ✅ Reinjected ${count} shared styles`);
+    logger.wuDebug(`Reinjected ${count} shared styles`);
   }
 
   /**
@@ -849,11 +667,11 @@ export class WuSandbox {
     if (!shadowRoot) return 0;
 
     let injectedCount = 0;
-    
+
     // Buscar TODOS los estilos en el head
     const allStyles = document.querySelectorAll('style');
     const normalizedAppName = appName.toLowerCase();
-    
+
     // Patrones para detectar estilos de esta app (Windows y Unix paths)
     // IMPORTANTE: Debe coincidir SOLO con packages/appName/ al inicio del path del paquete
     // NO debe coincidir con packages/shell/src/components/learning/ (eso es del shell)
@@ -862,9 +680,9 @@ export class WuSandbox {
       // El src/ es clave para asegurar que es el MFE, no un subdirectorio de otro package
       new RegExp(`packages[/\\\\]${normalizedAppName}[/\\\\]src[/\\\\]`, 'i')
     ];
-    
-    console.log(`[WuSandbox] 🔍 Searching own styles for ${appName}, found ${allStyles.length} style tags in head`);
-    
+
+    logger.wuDebug(`Searching own styles for ${appName}, found ${allStyles.length} style tags in head`);
+
     // Log para debug: mostrar estilos que contienen el nombre de la app
     let matchingCount = 0;
     for (const s of allStyles) {
@@ -874,18 +692,18 @@ export class WuSandbox {
       }
     }
     if (matchingCount > 0) {
-      console.log(`[WuSandbox] 📋 Found ${matchingCount} styles potentially matching ${appName}`);
+      logger.wuDebug(`Found ${matchingCount} styles potentially matching ${appName}`);
     }
-    
+
     for (const style of allStyles) {
       // NO saltar basándose en data-wu-injected del head - eso se pone en los clones del shadow DOM
-      
+
       const viteId = style.getAttribute('data-vite-dev-id') || '';
       const normalizedViteId = viteId.replace(/\\/g, '/').toLowerCase();
-      
+
       // Verificar si el estilo pertenece a esta app
       let belongsToApp = false;
-      
+
       // 1. Por data-vite-dev-id (la forma más confiable)
       if (viteId) {
         // Revisar si el path contiene packages/appName/
@@ -903,23 +721,23 @@ export class WuSandbox {
           }
         }
       }
-      
+
       if (belongsToApp) {
         // Verificar si ya existe en el Shadow DOM
         const existingStyle = shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`);
-          
+
         if (!existingStyle) {
           const clonedStyle = style.cloneNode(true);
           clonedStyle.setAttribute('data-wu-injected', 'true');
           shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
           injectedCount++;
           const styleName = viteId.substring(viteId.lastIndexOf('/') + 1) || viteId.substring(viteId.lastIndexOf('\\') + 1);
-          console.log(`[WuSandbox] ✅ Injected own style for ${appName}: ${styleName}`);
+          logger.wuDebug(`Injected own style for ${appName}: ${styleName}`);
         }
       }
     }
-    
-    console.log(`[WuSandbox] 🎨 Total own styles injected for ${appName}: ${injectedCount}`);
+
+    logger.wuDebug(`Total own styles injected for ${appName}: ${injectedCount}`);
     return injectedCount;
   }
 
@@ -935,27 +753,27 @@ export class WuSandbox {
 
     let injectedCount = 0;
     const normalizedAppName = appName.toLowerCase();
-    
+
     // Inyectar estilos que contengan el nombre de la app en su vite-id
     const allStyles = document.querySelectorAll('style');
     for (const style of allStyles) {
       const viteId = style.getAttribute('data-vite-dev-id') || '';
-      
+
       // Solo inyectar si contiene el nombre de la app
       if (!viteId.toLowerCase().includes(normalizedAppName)) continue;
-      
+
       // Verificar si ya existe en el shadow DOM
       if (shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) continue;
-      
+
       const clonedStyle = style.cloneNode(true);
       clonedStyle.setAttribute('data-wu-fallback', 'true');
       shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
       injectedCount++;
       const styleName = viteId.split('/').pop() || viteId.split('\\').pop();
-      console.log(`[WuSandbox] 📦 FALLBACK injected: ${styleName}`);
+      logger.wuDebug(`FALLBACK injected: ${styleName}`);
     }
-    
-    console.log(`[WuSandbox] 🎨 FALLBACK: Total ${injectedCount} styles injected for ${appName}`);
+
+    logger.wuDebug(`FALLBACK: Total ${injectedCount} styles injected for ${appName}`);
     return injectedCount;
   }
-}
+}