wu-framework 1.0.0

package/src/core/wu-sandbox.js

@@ -0,0 +1,720 @@
+/**
+ * 🛡️ WU-SANDBOX: ADVANCED ISOLATION SYSTEM
+ * Shadow DOM + Proxy Sandbox + Script Execution + HTML Parsing
+ * Combina lo mejor de video-code con Shadow DOM nativo
+ */
+
+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';
+
+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})`);
+  }
+
+  /**
+   * Detectar estrategia de sandbox óptima
+   * @returns {'proxy' | 'snapshot'} Estrategia a usar
+   */
+  detectSandboxStrategy() {
+    // Verificar si Proxy está disponible
+    if (typeof Proxy !== 'undefined') {
+      try {
+        // Test básico de Proxy
+        const testProxy = new Proxy({}, {
+          get(target, prop) { return target[prop]; }
+        });
+        testProxy.test = 'value';
+
+        console.log('[WuSandbox] ✅ Proxy available - using ProxySandbox strategy');
+        return 'proxy';
+      } catch (error) {
+        console.warn('[WuSandbox] ⚠️ Proxy not working - falling back to SnapshotSandbox');
+        return 'snapshot';
+      }
+    }
+
+    console.warn('[WuSandbox] ⚠️ Proxy not available - using SnapshotSandbox strategy');
+    return 'snapshot';
+  }
+
+  /**
+   * 🔧 SMART SANDBOX: Advanced Shadow DOM creation with error recovery
+   * @param {string} appName - Nombre de la aplicación
+   * @param {HTMLElement} hostContainer - Contenedor host
+   * @returns {Object} Sandbox con shadow root y container
+   */
+  create(appName, hostContainer) {
+    console.log(`[WuSandbox] 🔨 Creating sandbox for: ${appName}`);
+
+    try {
+      // 🔧 SHADOW DOM VERIFICATION
+      if (!hostContainer.attachShadow) {
+        throw new Error('Shadow DOM not supported in this browser');
+      }
+
+      // 🛠️ SMART CLEANUP: Handle existing shadow roots
+      let shadowRoot;
+      if (hostContainer.shadowRoot) {
+        console.log(`[WuSandbox] 🔄 Existing shadow root detected, performing cleanup...`);
+
+        // Clear existing shadow root content
+        hostContainer.shadowRoot.innerHTML = '';
+        shadowRoot = hostContainer.shadowRoot;
+
+        console.log(`[WuSandbox] ✨ Existing shadow root cleaned and reused`);
+      } else {
+        // Create new Shadow DOM
+        shadowRoot = hostContainer.attachShadow({
+          mode: 'open',
+          delegatesFocus: true
+        });
+
+        console.log(`[WuSandbox] 🌟 New shadow root created`);
+      }
+
+      // 🎯 Create app container with advanced features
+      const appContainer = document.createElement('div');
+      appContainer.id = `wu-app-${appName}`;
+      appContainer.className = 'wu-app-root';
+      appContainer.setAttribute('data-wu-enhanced', 'true');
+      appContainer.setAttribute('data-wu-timestamp', Date.now().toString());
+
+      // 🎨 Enhanced base styles with advanced properties
+      const baseStyles = document.createElement('style');
+      baseStyles.textContent = this.generateSandboxStyles(appName);
+
+      // 🌟 Assemble enhanced Shadow DOM
+      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)
+      const jsSandbox = this.createAdvancedJSSandbox(appName);
+      const jsProxy = jsSandbox.activate(); // Activar sandbox y obtener proxy
+
+      const sandbox = {
+        appName,
+        shadowRoot,
+        container: appContainer,
+        hostContainer,
+        jsScope, // LEGACY: mantener para compatibilidad
+        jsSandbox, // NUEVO: ProxySandbox o SnapshotSandbox
+        jsProxy, // NUEVO: Proxy para ejecutar scripts
+        styles: baseStyles,
+        created: Date.now(),
+        sandbox_state: 'stable',
+        recovery_count: 0
+      };
+
+      // 🎨 INJECT SHARED STYLES: Store promise for await in mount
+      sandbox.stylesReady = this.styleBridge.injectStylesIntoShadow(shadowRoot, appName).then(count => {
+        console.log(`[WuSandbox] 🎨 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`);
+          this.styleBridge.injectStylesIntoShadow(shadowRoot, appName).catch(err => {
+            console.warn(`[WuSandbox] ⚠️ Failed to reinject styles:`, err);
+          });
+        });
+
+        return count;
+      }).catch(error => {
+        console.warn(`[WuSandbox] ⚠️ Failed to inject styles:`, error);
+        return 0;
+      });
+
+      // 📊 Register in sandbox registry
+      this.sandboxes.set(appName, sandbox);
+
+      console.log(`[WuSandbox] ✅ Enhanced sandbox created for ${appName}`);
+      return sandbox;
+
+    } catch (error) {
+      console.error(`[WuSandbox] ❌ 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')) {
+        return this.createFallbackSandbox(appName, hostContainer);
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * 🔧 FALLBACK SANDBOX: Create fallback container when Shadow DOM is not available
+   */
+  createFallbackSandbox(appName, hostContainer) {
+    console.log(`[WuSandbox] 🔧 Creating fallback sandbox for ${appName}...`);
+
+    try {
+      // 🛠️ Complete shadow DOM reset
+      if (hostContainer.shadowRoot) {
+        hostContainer.shadowRoot.innerHTML = '';
+      }
+
+      // 🌟 Create minimal container without shadow DOM if necessary
+      const fallbackContainer = document.createElement('div');
+      fallbackContainer.id = `wu-app-${appName}`;
+      fallbackContainer.className = 'wu-app-root wu-fallback';
+      fallbackContainer.style.cssText = `
+        width: 100%;
+        height: 100%;
+        isolation: isolate;
+        contain: layout style paint;
+      `;
+
+      // 🧹 Clear host container
+      hostContainer.innerHTML = '';
+      hostContainer.appendChild(fallbackContainer);
+
+      const healedSandbox = {
+        appName,
+        shadowRoot: null, // No shadow DOM in fallback mode
+        container: fallbackContainer,
+        hostContainer,
+        jsScope: this.createJSScope(appName),
+        styles: null,
+        created: Date.now(),
+        sandbox_state: 'fallback_mode',
+        recovery_count: 1,
+        fallback_mode: true
+      };
+
+      this.sandboxes.set(appName, healedSandbox);
+
+      console.log(`[WuSandbox] ✨ Fallback sandbox created successfully for ${appName}`);
+      return healedSandbox;
+
+    } catch (healingError) {
+      console.error(`[WuSandbox] 💥 Fallback sandbox creation failed:`, healingError);
+      throw healingError;
+    }
+  }
+
+  /**
+   * 🎨 SANDBOX STYLES: Generate CSS styles for Shadow DOM isolation
+   */
+  generateSandboxStyles(appName) {
+    return `
+      /* Wu Framework - Shadow DOM Isolation Styles */
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        contain: layout style paint;
+        --wu-sandbox-active: true;
+        --wu-isolation-state: stable;
+      }
+
+      .wu-app-root {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        isolation: isolate;
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* Loading animation for sandbox initialization */
+      .wu-app-root[data-wu-loading="true"] {
+        background: linear-gradient(45deg,
+          rgba(74, 144, 226, 0.1) 0%,
+          rgba(80, 227, 194, 0.1) 100%);
+        animation: sandboxPulse 2s ease-in-out infinite;
+      }
+
+      @keyframes sandboxPulse {
+        0%, 100% { opacity: 0.8; }
+        50% { opacity: 1; }
+      }
+
+      /* CSS reset for shadow DOM stability */
+      * {
+        box-sizing: border-box;
+      }
+
+      /* CSS custom properties for sandbox */
+      :host {
+        --wu-app-name: "${appName}";
+        --wu-isolation: true;
+        --wu-creation-timestamp: ${Date.now()};
+      }
+
+      /* 🛡️ Debug mode enhancements */
+      :host([wu-debug]) {
+        border: 2px dashed #4a90e2;
+        background: rgba(74, 144, 226, 0.05);
+        box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
+      }
+
+      :host([wu-debug])::before {
+        content: "Wu Framework: " attr(wu-app);
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: linear-gradient(45deg, #4a90e2, #50e3c2);
+        color: white;
+        padding: 4px 8px;
+        font-size: 11px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        z-index: 10000;
+        border-radius: 0 0 4px 0;
+        font-weight: 600;
+      }
+
+      /* Sandbox state indicators */
+      :host([data-sandbox-state="stable"]) {
+        --wu-isolation-state: stable;
+      }
+
+      :host([data-sandbox-state="healing"]) {
+        --wu-dimensional-stability: healing;
+        animation: sandboxHealing 1s ease-in-out infinite;
+      }
+
+      @keyframes sandboxHealing {
+        0%, 100% { filter: hue-rotate(0deg); }
+        50% { filter: hue-rotate(180deg); }
+      }
+    `;
+  }
+
+  /**
+   * 🛡️ Crear JS Sandbox avanzado (ProxySandbox o SnapshotSandbox)
+   * @param {string} appName - Nombre de la app
+   * @returns {WuProxySandbox|WuSnapshotSandbox} Sandbox JS
+   */
+  createAdvancedJSSandbox(appName) {
+    let jsSandbox;
+
+    if (this.sandboxStrategy === 'proxy') {
+      jsSandbox = new WuProxySandbox(appName);
+      console.log(`[WuSandbox] 🛡️ Created ProxySandbox for ${appName}`);
+    } else {
+      jsSandbox = new WuSnapshotSandbox(appName);
+      console.log(`[WuSandbox] 📸 Created SnapshotSandbox for ${appName}`);
+    }
+
+    // Registrar sandbox
+    this.jsSandboxes.set(appName, jsSandbox);
+
+    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
+   * @param {string} css - CSS a agregar
+   */
+  addStyles(appName, css) {
+    const sandbox = this.sandboxes.get(appName);
+    if (!sandbox) {
+      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      return;
+    }
+
+    const styleElement = document.createElement('style');
+    styleElement.textContent = css;
+    styleElement.setAttribute('wu-custom-styles', '');
+
+    sandbox.shadowRoot.appendChild(styleElement);
+    console.log(`[WuSandbox] 🎨 Custom styles added to ${appName}`);
+  }
+
+  /**
+   * Cargar estilos externos en el sandbox
+   * @param {string} appName - Nombre de la aplicación
+   * @param {string} href - URL del CSS
+   */
+  loadExternalStyles(appName, href) {
+    const sandbox = this.sandboxes.get(appName);
+    if (!sandbox) {
+      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      return;
+    }
+
+    const linkElement = document.createElement('link');
+    linkElement.rel = 'stylesheet';
+    linkElement.href = href;
+    linkElement.setAttribute('wu-external-styles', '');
+
+    sandbox.shadowRoot.appendChild(linkElement);
+    console.log(`[WuSandbox] 🔗 External styles loaded in ${appName}: ${href}`);
+  }
+
+  /**
+   * Establecer modo debug para un sandbox
+   * @param {string} appName - Nombre de la aplicación
+   * @param {boolean} enabled - Activar/desactivar debug
+   */
+  setDebugMode(appName, enabled = true) {
+    const sandbox = this.sandboxes.get(appName);
+    if (!sandbox) {
+      console.warn(`[WuSandbox] Sandbox not found for: ${appName}`);
+      return;
+    }
+
+    if (enabled) {
+      sandbox.hostContainer.setAttribute('wu-debug', '');
+      sandbox.hostContainer.setAttribute('wu-app', appName);
+    } else {
+      sandbox.hostContainer.removeAttribute('wu-debug');
+      sandbox.hostContainer.removeAttribute('wu-app');
+    }
+
+    console.log(`[WuSandbox] 🐛 Debug mode ${enabled ? 'enabled' : 'disabled'} for ${appName}`);
+  }
+
+  /**
+   * Limpiar y destruir sandbox
+   * @param {Object} sandbox - Sandbox a limpiar
+   */
+  cleanup(sandbox) {
+    if (!sandbox) return;
+
+    const { appName, shadowRoot, hostContainer, jsSandbox } = sandbox;
+
+    console.log(`[WuSandbox] 🧹 Cleaning up sandbox for: ${appName}`);
+
+    try {
+      // 🛡️ NUEVO: Desactivar JS Sandbox
+      if (jsSandbox && jsSandbox.isActive()) {
+        jsSandbox.deactivate();
+        console.log(`[WuSandbox] 🛡️ JS Sandbox deactivated for ${appName}`);
+      }
+
+      // Limpiar eventos y observers
+      this.cleanupEventListeners(sandbox);
+
+      // Limpiar contenido del Shadow DOM
+      if (shadowRoot) {
+        shadowRoot.innerHTML = '';
+      }
+
+      // Remover atributos del host
+      if (hostContainer) {
+        hostContainer.removeAttribute('wu-debug');
+        hostContainer.removeAttribute('wu-app');
+        hostContainer.removeAttribute('wu-no-scroll');
+      }
+
+      // Remover del registro
+      this.sandboxes.delete(appName);
+      this.jsSandboxes.delete(appName);
+
+      console.log(`[WuSandbox] ✅ Sandbox cleaned up: ${appName}`);
+
+    } catch (error) {
+      console.error(`[WuSandbox] ❌ Error cleaning up sandbox ${appName}:`, error);
+    }
+  }
+
+  /**
+   * Limpiar event listeners del sandbox
+   * @param {Object} sandbox - Sandbox a limpiar
+   */
+  cleanupEventListeners(sandbox) {
+    // Remover todos los event listeners del Shadow DOM
+    const { shadowRoot } = sandbox;
+    if (!shadowRoot) return;
+
+    // Clonar nodos para remover todos los event listeners
+    const elements = shadowRoot.querySelectorAll('*');
+    elements.forEach(element => {
+      if (element.cloneNode) {
+        const clone = element.cloneNode(true);
+        element.parentNode?.replaceChild(clone, element);
+      }
+    });
+  }
+
+  /**
+   * Obtener información de un sandbox
+   * @param {string} appName - Nombre de la aplicación
+   * @returns {Object} Información del sandbox
+   */
+  getSandboxInfo(appName) {
+    const sandbox = this.sandboxes.get(appName);
+    if (!sandbox) return null;
+
+    return {
+      appName: sandbox.appName,
+      created: sandbox.created,
+      hasContainer: !!sandbox.container,
+      hasShadowRoot: !!sandbox.shadowRoot,
+      elementCount: sandbox.shadowRoot?.children?.length || 0,
+      uptime: Date.now() - sandbox.created
+    };
+  }
+
+  /**
+   * Obtener estadísticas de todos los sandboxes
+   */
+  getStats() {
+    return {
+      strategy: this.sandboxStrategy,
+      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,
+        elements: sandbox.shadowRoot?.children?.length || 0,
+        hasJsSandbox: !!sandbox.jsSandbox,
+        jsSandboxActive: sandbox.jsSandbox?.isActive() || false
+      }))
+    };
+  }
+
+  /**
+   * Limpiar todos los sandboxes
+   */
+  cleanupAll() {
+    console.log(`[WuSandbox] 🧹 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`);
+  }
+
+  /**
+   * 🎨 CONFIGURAR STYLE BRIDGE: Configura el sistema de compartición de estilos
+   * @param {Object} config - Configuración del StyleBridge
+   */
+  configureStyleSharing(config) {
+    if (this.styleBridge) {
+      this.styleBridge.configure(config);
+      console.log(`[WuSandbox] 🎨 StyleBridge configured`);
+    }
+  }
+
+  /**
+   * 📊 OBTENER ESTADÍSTICAS DE ESTILOS: Info sobre estilos compartidos
+   * @returns {Object}
+   */
+  getStyleStats() {
+    return this.styleBridge ? this.styleBridge.getStats() : null;
+  }
+
+  /**
+   * 🔄 RE-INYECTAR ESTILOS: Vuelve a inyectar estilos en un sandbox
+   * @param {string} appName - Nombre de la aplicación
+   */
+  async reinjectStyles(appName) {
+    const sandbox = this.sandboxes.get(appName);
+    if (!sandbox || !sandbox.shadowRoot) {
+      console.warn(`[WuSandbox] Cannot reinject styles for ${appName}`);
+      return;
+    }
+
+    console.log(`[WuSandbox] 🔄 Reinjecting styles for ${appName}...`);
+    const count = await this.styleBridge.injectStylesIntoShadow(
+      sandbox.shadowRoot,
+      appName
+    );
+    console.log(`[WuSandbox] ✅ Reinjected ${count} styles`);
+  }
+}