wu-framework 1.1.1 → 1.1.3

package/README.md

@@ -1,1033 +1,450 @@
-# 🚀 Wu Framework
+# 🚀 Wu Framework v1.1.1
 
 **Universal Microfrontends Made Simple**
 
-Wu Framework es la librería de microfrontends más simple y poderosa del mercado. **Framework agnostic, zero config, Shadow DOM nativo**.
-
-## ✨ ¿Por qué Wu Framework?
-
-| Característica | Module Federation | qiankun | **Wu Framework** |
-|---|---|---|---|
-| **Setup** | Webpack config complejo | Configuración manual | **Zero config** |
-| **Framework Support** | React-first | Multi framework | **8 frameworks nativos** |
-| **Bundler Required** | Solo Webpack 5 | Agnóstico pero complejo | **Ninguno** |
-| **CSS Isolation** | Básico | CSS hacks | **Shadow DOM nativo** |
-| **JS Isolation** | ❌ | Proxy básico | **Proxy Sandbox completo** |
-| **Runtime Config** | ❌ | Limitado | **✅ Completamente dinámico** |
-| **Self-Healing** | ❌ | ❌ | **✅ Auto-recovery** |
-| **API Complexity** | Alta | Media | **1 línea de código** |
-
-## 🎯 Instalación
-
-```bash
-npm install wu-framework
-```
-
-**¡Y ya está!** Sin webpack config, sin plugins, sin configuración.
+Wu Framework es una librería de microfrontends con **Shadow DOM nativo**, **aislamiento CSS avanzado**, y **comunicación cross-MFE** integrada.
 
 ---
 
-## 🎨 Frameworks Soportados
+## ✨ ¿Por qué Wu Framework?
 
-Wu Framework incluye **adapters nativos** para los frameworks más populares:
-
-| Framework | Adapter | Registro |
-|-----------|---------|----------|
-| ⚛️ React | `wuReact` | `wuReact.register('app', App)` |
-| 💚 Vue | `wuVue` | `wuVue.register('app', App)` |
-| 🅰️ Angular | `wuAngular` | `wuAngular.register('app', AppModule)` |
-| 🧡 Svelte | `wuSvelte` | `wuSvelte.register('app', App)` |
-| ⚡ Preact | `wuPreact` | `wuPreact.register('app', App)` |
-| 💎 Solid.js | `wuSolid` | `wuSolid.register('app', App)` |
-| 🔥 Lit | `wuLit` | `wuLit.register('app', MyElement)` |
-| 📦 Vanilla JS | `wuVanilla` | `wuVanilla.register('app', config)` |
+| Característica | Module Federation | Single-SPA | Qiankun | **Wu Framework** |
+|---|---|---|---|---|
+| **Shadow DOM nativo** | ❌ | ❌ | Parcial | **✅ Completo** |
+| **CSS Isolation Modes** | Manual | Manual | Básico | **✅ 4 modos** |
+| **`fully-isolated` mode** | ❌ | ❌ | ❌ | **✅ Único** |
+| **Bloquea CSS Variables** | ❌ | ❌ | ❌ | **✅ Único** |
+| **Framework Agnostic** | Webpack only | ✅ | Vue-first | **✅ Cualquiera** |
+| **Bundler Agnostic** | Webpack 5 | ✅ | Webpack | **✅ Vite/Webpack** |
+| **Cross-MFE Events** | Manual | Manual | Props | **✅ Event Bus** |
+| **Cross-MFE Store** | ❌ | ❌ | Parcial | **✅ Reactive Store** |
 
 ---
 
-## 🔥 Quick Start
-
-### 1. Micro App: Crear `wu.json`
+## 🛡️ CSS Isolation Modes (Feature Único)
 
-Cada microfrontend necesita un archivo `wu.json` en su raíz:
+Wu Framework ofrece **4 modos de aislamiento CSS**. El modo `fully-isolated` es **único** - bloquea incluso las CSS variables del padre:
 
 ```json
+// header/wu.json - Aislamiento total (bloquea CSS vars del padre)
 {
   "name": "header",
-  "entry": "index.js",
+  "entry": "src/main.ts",
+  "styleMode": "fully-isolated",
   "wu": {
-    "exports": {
-      "NavBar": "components/NavBar.js",
-      "UserMenu": "components/UserMenu.js"
-    },
-    "imports": [],
-    "routes": ["/", "/home"],
     "permissions": ["events", "store"]
   }
 }
 ```
 
-| Campo | Descripción |
-|-------|-------------|
-| `name` | Nombre único del microfrontend |
-| `entry` | Archivo JS principal (default: `index.js`) |
-| `wu.exports` | Componentes que expone a otros microfrontends |
-| `wu.imports` | Componentes que importa de otros microfrontends |
-| `wu.routes` | Rutas que maneja este microfrontend |
-| `wu.permissions` | Permisos requeridos (`events`, `store`, `dom`) |
-
-### 2. Micro App: Registrar con Adapter (1 línea)
-
-**React:**
-```tsx
-import { wuReact } from 'wu-framework/adapters/react';
-import App from './App';
-
-wuReact.register('header', App);
-```
-
-**Vue:**
-```ts
-import { wuVue } from 'wu-framework/adapters/vue';
-import App from './App.vue';
-
-wuVue.register('sidebar', App);
-```
-
-**Angular:**
-```ts
-import { wuAngular } from 'wu-framework/adapters/angular';
-import { AppModule } from './app/app.module';
-
-wuAngular.register('content', AppModule);
-```
-
-**¡Eso es todo!** El adapter se encarga de todo: detección de contexto, modo standalone, cleanup automático.
-
-### 3. Shell (Host Application)
-
-**Desarrollo:**
-```js
-import { wu } from 'wu-framework';
-
-await wu.init({
-  apps: [
-    { name: 'header', url: 'http://localhost:3001' },
-    { name: 'sidebar', url: 'http://localhost:3002' },
-    { name: 'content', url: 'http://localhost:3003' }
-  ]
-});
-
-await wu.mount('header', '#header-container');
-await wu.mount('sidebar', '#sidebar-container');
-await wu.mount('content', '#content-container');
-```
-
-**Producción:**
-```js
-import { wu } from 'wu-framework';
-
-await wu.init({
-  apps: [
-    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header' },
-    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar' },
-    { name: 'content', url: 'https://cdn.mycompany.com/mfe/content' }
-  ]
-});
-
-await wu.mount('header', '#header-container');
-await wu.mount('sidebar', '#sidebar-container');
-await wu.mount('content', '#content-container');
-```
-
-**Con configuración dinámica:**
-```js
-import { wu } from 'wu-framework';
-
-const isDev = process.env.NODE_ENV !== 'production';
-
-await wu.init({
-  apps: [
-    { name: 'header', url: isDev ? 'http://localhost:3001' : 'https://cdn.mycompany.com/mfe/header' },
-    { name: 'sidebar', url: isDev ? 'http://localhost:3002' : 'https://cdn.mycompany.com/mfe/sidebar' },
-    { name: 'content', url: isDev ? 'http://localhost:3003' : 'https://cdn.mycompany.com/mfe/content' }
-  ]
-});
+```json
+// container/wu.json - Aislamiento normal (hereda CSS vars)
+{
+  "name": "content",
+  "folder": "container",
+  "entry": "src/main.tsx",
+  "styleMode": "isolated",
+  "wu": {
+    "permissions": ["events", "store"]
+  }
+}
 ```
 
-### Estructura de Archivos (Microfrontend)
-
-```
-my-header-mfe/
-├── wu.json          # ← Manifest requerido
-├── index.js         # ← Entry point (registra con adapter)
-├── App.jsx          # ← Componente principal
-├── components/
-│   ├── NavBar.js
-│   └── UserMenu.js
-└── package.json
-```
+| Modo | CSS Variables | Estilos Padre | Caso de Uso |
+|------|--------------|---------------|-------------|
+| `isolated` | ✅ Heredadas | ❌ Bloqueados | MFE usa design system del host |
+| `fully-isolated` | ❌ **Bloqueadas** | ❌ Bloqueados | MFE de terceros con su propio theme |
+| `shared` | ✅ Heredadas | ✅ Compartidos | MFE necesita estilos del host |
+| `auto` | ✅ Heredadas | ⚡ Solo librerías | Compartir Element Plus, etc. |
 
 ---
 
-## ⚛️ React Adapter
+## 🔥 Quick Start
 
-### Registro Básico
+### 1. Shell (React + Vite)
 
 ```tsx
-import { wuReact } from 'wu-framework/adapters/react';
-import App from './App';
+// shell/src/config/mfe.config.ts
+const isDev = import.meta.env.DEV
 
-wuReact.register('my-app', App);
-```
+const devUrls = {
+  header: 'http://localhost:3001',
+  content: 'http://localhost:3003'
+}
 
-### Con Opciones
+const prodUrls = {
+  header: import.meta.env.VITE_HEADER_URL || 'https://cdn.example.com/mfe/header',
+  content: import.meta.env.VITE_CONTENT_URL || 'https://cdn.example.com/mfe/content'
+}
 
-```tsx
-wuReact.register('my-app', App, {
-  strictMode: true,           // Envolver en React.StrictMode
-  props: { theme: 'dark' },   // Props iniciales
-  standalone: true,           // Ejecutar independiente si Wu no está
-  standaloneContainer: '#root',
-  onMount: (container) => console.log('Mounted!'),
-  onUnmount: (container) => console.log('Unmounted!')
-});
-```
+export const urls = isDev ? devUrls : prodUrls
 
-### Hooks para React
+export const enabledApps = [
+  { name: 'header', url: urls.header, enabled: true },
+  { name: 'content', url: urls.content, enabled: true }
+]
+```
 
 ```tsx
-import React from 'react';
-import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react';
-
-const useWuEvents = createUseWuEvents(React);
-const useWuStore = createUseWuStore(React);
-
-function MyComponent() {
-  const { emit, on } = useWuEvents();
-  const { state, setState } = useWuStore('user');
+// shell/src/hooks/useWuFramework.ts
+import { useEffect, useState, useRef } from 'react'
+import { wu } from 'wu-framework'
+import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react'
+import React from 'react'
+import { enabledApps } from '../config/mfe.config'
+
+// Crear hooks reactivos para el shell
+export const useWuEvents = createUseWuEvents(React)
+export const useWuStore = createUseWuStore(React)
+
+export function useWuFramework() {
+  const [state, setState] = useState({
+    initialized: false,
+    loading: true,
+    error: null as Error | null
+  })
+  const initRef = useRef(false)
 
   useEffect(() => {
-    const unsub = on('cart:updated', (data) => {
-      console.log('Cart updated:', data);
-    });
-    return unsub;
-  }, [on]);
+    if (initRef.current) return
+    initRef.current = true
+
+    const initWu = async () => {
+      try {
+        await wu.init({
+          apps: enabledApps.map(({ name, url }) => ({ name, url }))
+        })
+        setState({ initialized: true, loading: false, error: null })
+      } catch (error) {
+        setState({ initialized: false, loading: false, error: error as Error })
+      }
+    }
 
-  return (
-    <button onClick={() => emit('user:logout')}>
-      Logout {state?.name}
-    </button>
-  );
+    initWu()
+  }, [])
+
+  return { ...state, wu }
 }
 ```
 
-### Cargar Microfrontends en React (Shell)
-
 ```tsx
-import React from 'react';
-import { createWuSlot } from 'wu-framework/adapters/react';
+// shell/src/App.tsx
+import { useWuFramework, useWuEvents } from './hooks/useWuFramework'
+import WuSlot from './components/WuSlot'
+import ToastContainer from './components/ToastContainer'
+
+function App() {
+  const { initialized, loading, error } = useWuFramework()
+  const { emit } = useWuEvents()
 
-const WuSlot = createWuSlot(React);
+  useEffect(() => {
+    if (initialized) {
+      emit('shell:ready', { timestamp: Date.now() })
+    }
+  }, [initialized, emit])
 
-// URLs pueden ser localhost (dev) o CDN (prod)
-const HEADER_URL = process.env.REACT_APP_HEADER_URL || 'http://localhost:3001';
-const CONTENT_URL = process.env.REACT_APP_CONTENT_URL || 'http://localhost:3002';
+  if (loading) return <div>Loading Wu Framework...</div>
+  if (error) return <div>Error: {error.message}</div>
 
-function Shell() {
   return (
-    <div>
-      <WuSlot
-        name="header"
-        url={HEADER_URL}
-        onLoad={() => console.log('Header loaded!')}
-        onError={(err) => console.error(err)}
-      />
-      <WuSlot name="content" url={CONTENT_URL} />
-    </div>
-  );
+    <>
+      <ToastContainer />
+      <WuSlot name="header" url={urls.header} />
+      <WuSlot name="content" url={urls.content} />
+    </>
+  )
 }
 ```
 
----
-
-## 💚 Vue Adapter
-
-### Registro Básico
-
-```ts
-import { wuVue } from 'wu-framework/adapters/vue';
-import App from './App.vue';
+### 2. MFE Header (Vue 3)
 
-wuVue.register('my-app', App);
+```json
+// header/wu.json
+{
+  "name": "header",
+  "entry": "src/main.ts",
+  "styleMode": "fully-isolated",
+  "wu": {
+    "exports": {
+      "NavBar": "src/components/NavBar.vue"
+    },
+    "permissions": ["events", "store"]
+  }
+}
 ```
 
-### Con Plugins (Pinia, Router, etc.)
-
 ```ts
-import { wuVue } from 'wu-framework/adapters/vue';
-import { createPinia } from 'pinia';
-import router from './router';
-import App from './App.vue';
-
-wuVue.register('my-app', App, {
-  setup: (app) => {
-    app.use(createPinia());
-    app.use(router);
-  }
-});
+// header/src/main.ts
+import { createApp } from 'vue'
+import { wuVue } from 'wu-framework/adapters/vue'
+import App from './App.vue'
+
+// Registrar con Wu Framework
+wuVue.register('header', App, {
+  standalone: true,
+  standaloneContainer: '#app',
+  onMount: (container) => console.log('[Header] Mounted:', container),
+  onUnmount: (container) => console.log('[Header] Unmounted:', container)
+})
 ```
 
-### Composables para Vue
-
 ```vue
-<script setup>
-import { onMounted, onUnmounted } from 'vue';
-import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue';
-
-const { emit, on, cleanup } = useWuEvents();
-const { state, setState } = useWuStore('cart');
+<!-- header/src/components/NavBar.vue -->
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue'
 
-onMounted(() => {
-  on('user:login', (data) => console.log('Login:', data));
-});
+const { emit, on } = useWuEvents()
+const { state: notificationState, setState } = useWuStore('notifications')
 
-onUnmounted(() => cleanup());
-</script>
+const notificationCount = ref(0)
+let unsubscribe: (() => void) | null = null
 
-<template>
-  <div>
-    <p>Items: {{ state?.items?.length }}</p>
-    <button @click="emit('cart:clear')">Clear Cart</button>
-  </div>
-</template>
-```
+onMounted(() => {
+  // Inicializar store compartido
+  if (!notificationState.value) {
+    setState({ count: 0, items: [] })
+  }
 
-### Cargar Microfrontends en Vue (Shell)
+  // Escuchar notificaciones desde CUALQUIER MFE (React, Angular, etc.)
+  unsubscribe = on('notification:new', (event) => {
+    notificationCount.value++
+
+    // Actualizar store compartido
+    const current = notificationState.value || { count: 0, items: [] }
+    setState({
+      count: current.count + 1,
+      items: [...current.items, {
+        id: Date.now(),
+        message: event.data?.message,
+        type: event.data?.type || 'info'
+      }]
+    })
+  })
+})
 
-```vue
-<script setup>
-import { WuSlot } from 'wu-framework/adapters/vue';
+onUnmounted(() => {
+  if (unsubscribe) unsubscribe()
+})
 
-// URLs: localhost en dev, CDN en prod
-const headerUrl = import.meta.env.VITE_HEADER_URL || 'http://localhost:3001';
-const sidebarUrl = import.meta.env.VITE_SIDEBAR_URL || 'http://localhost:3002';
+const handleNavClick = (item: { id: string, label: string }) => {
+  emit('header:nav:click', { id: item.id, label: item.label })
+}
 </script>
 
 <template>
-  <div>
-    <WuSlot
-      name="header"
-      :url="headerUrl"
-      @load="onLoad"
-      @error="onError"
-    />
-    <WuSlot name="sidebar" :url="sidebarUrl" />
-  </div>
+  <nav class="navbar">
+    <button class="navbar__notifications" @click="emit('header:notifications:open')">
+      🔔
+      <span v-if="notificationCount > 0" class="navbar__badge">
+        {{ notificationCount > 99 ? '99+' : notificationCount }}
+      </span>
+    </button>
+  </nav>
 </template>
 ```
 
-### Plugin Global
-
-```ts
-import { createApp } from 'vue';
-import { wuVuePlugin } from 'wu-framework/adapters/vue';
-
-const app = createApp(App);
-app.use(wuVuePlugin); // Registra <WuSlot> globalmente
-```
-
----
-
-## 🅰️ Angular Adapter
-
-### Registro con NgModule
-
-```ts
-import { wuAngular } from 'wu-framework/adapters/angular';
-import { AppModule } from './app/app.module';
-
-wuAngular.register('my-app', AppModule);
-```
-
-### Registro con Standalone Components (Angular 14+)
-
-```ts
-import { wuAngular } from 'wu-framework/adapters/angular';
-import { AppComponent } from './app/app.component';
-import { appConfig } from './app/app.config';
-
-wuAngular.registerStandalone('my-app', AppComponent, {
-  appConfig
-});
-```
-
-### Servicio para Componentes
-
-```ts
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { createWuService } from 'wu-framework/adapters/angular';
+### 3. MFE Content (React)
 
-@Component({
-  selector: 'app-root',
-  template: `<button (click)="sendEvent()">Send Event</button>`
-})
-export class AppComponent implements OnInit, OnDestroy {
-  private wuService = createWuService();
-
-  ngOnInit() {
-    this.wuService.on('user:login', (data) => {
-      console.log('User logged in:', data);
-    });
-  }
-
-  sendEvent() {
-    this.wuService.emit('app:ready', { timestamp: Date.now() });
-  }
-
-  ngOnDestroy() {
-    this.wuService.destroy();
+```json
+// container/wu.json
+{
+  "name": "content",
+  "folder": "container",
+  "entry": "src/main.tsx",
+  "styleMode": "isolated",
+  "wu": {
+    "exports": {
+      "Dashboard": "src/components/Dashboard.tsx"
+    },
+    "permissions": ["events", "store"]
   }
 }
 ```
 
----
-
-## 🧡 Svelte Adapter
-
-### Registro Básico
-
-```js
-import { wuSvelte } from 'wu-framework/adapters/svelte';
-import App from './App.svelte';
-
-wuSvelte.register('my-app', App);
-```
-
-### Svelte 5 (con runes)
-
-```js
-import { wuSvelte } from 'wu-framework/adapters/svelte';
-import App from './App.svelte';
-
-wuSvelte.registerSvelte5('my-app', App);
-```
-
-### Stores Reactivos
-
-```svelte
-<script>
-  import { createWuStore, useWuEvents } from 'wu-framework/adapters/svelte';
-  import { onDestroy } from 'svelte';
-
-  // Store reactivo (compatible con $store)
-  const userStore = createWuStore('user');
-
-  // Eventos
-  const { emit, on, cleanup } = useWuEvents();
-
-  on('cart:updated', (data) => {
-    console.log('Cart updated:', data);
-  });
-
-  onDestroy(cleanup);
-</script>
-
-<p>Hello, {$userStore?.name}</p>
-<button on:click={() => emit('user:logout')}>Logout</button>
-```
-
----
-
-## ⚡ Preact Adapter
-
-### Registro Básico
-
-```jsx
-import { wuPreact } from 'wu-framework/adapters/preact';
-import App from './App';
-
-wuPreact.register('my-app', App);
-```
-
-### Compatible con React (preact/compat)
-
-```jsx
-import { wuPreact } from 'wu-framework/adapters/preact';
-import App from './App'; // Componente estilo React
-
-wuPreact.registerCompat('my-app', App);
-```
-
-### Hooks
-
-```jsx
-import { h } from 'preact';
-import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
-import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/preact';
-
-const useWuEvents = createUseWuEvents({ useCallback, useEffect, useRef });
-const useWuStore = createUseWuStore({ useState, useCallback, useEffect });
-
-function MyComponent() {
-  const { emit, on } = useWuEvents();
-  const { state } = useWuStore('user');
-
-  return <div>Hello {state?.name}</div>;
-}
-```
-
----
-
-## 💎 Solid.js Adapter
-
-### Registro Básico
-
-```jsx
-import { wuSolid } from 'wu-framework/adapters/solid';
-import App from './App';
+```tsx
+// container/src/main.tsx
+import { wuReact } from 'wu-framework/adapters/react'
+import App from './App'
 
-wuSolid.register('my-app', App);
+wuReact.register('content', App, {
+  strictMode: true,
+  standalone: true,
+  standaloneContainer: '#root',
+  onMount: (container) => console.log('[Content] Mounted:', container),
+  onUnmount: (container) => console.log('[Content] Unmounted:', container)
+})
 ```
 
-### Stores Reactivos
-
-```jsx
-import { createWuStore, createWuEvent } from 'wu-framework/adapters/solid';
-
-function MyComponent() {
-  // Store reactivo
-  const [user, setUser] = createWuStore('user');
-
-  // Eventos reactivos
-  const lastEvent = createWuEvent('notification:*');
+```tsx
+// container/src/components/Dashboard.tsx
+import { useState } from 'react'
+import { useWuEvents } from '../hooks/useWu'
+
+export function Dashboard() {
+  const { emit } = useWuEvents()
+  const [sent, setSent] = useState(0)
+
+  // Enviar notificación que el Header (Vue) y Shell (React) recibirán
+  const sendNotification = (type: 'success' | 'warning' | 'error' | 'info', message: string) => {
+    emit('notification:new', { message, type })
+    setSent(prev => prev + 1)
+  }
 
   return (
-    <div>
-      <p>Hello, {user()?.name}</p>
-      <Show when={lastEvent()}>
-        <p>Last notification: {lastEvent()?.data}</p>
-      </Show>
-      <button onClick={() => setUser('name', 'John')}>
-        Set Name
-      </button>
+    <div className="dashboard">
+      <h2>Cross-MFE Communication Demo</h2>
+      <p>Notifications sent: <strong>{sent}</strong></p>
+
+      <div className="notification-buttons">
+        <button onClick={() => sendNotification('success', 'Operation completed!')}>
+          ✅ Success
+        </button>
+        <button onClick={() => sendNotification('warning', 'Check your settings')}>
+          ⚠️ Warning
+        </button>
+        <button onClick={() => sendNotification('error', 'Something went wrong!')}>
+          ❌ Error
+        </button>
+        <button onClick={() => sendNotification('info', 'New message received')}>
+          💬 Info
+        </button>
+      </div>
     </div>
-  );
-}
-```
-
----
-
-## 🔥 Lit Adapter (Web Components)
-
-### Registro con LitElement
-
-```js
-import { LitElement, html, css } from 'lit';
-import { wuLit } from 'wu-framework/adapters/lit';
-
-class MyApp extends LitElement {
-  static styles = css`
-    :host { display: block; padding: 16px; }
-  `;
-
-  render() {
-    return html`<h1>Hello from Lit!</h1>`;
-  }
-}
-
-wuLit.register('my-app', MyApp);
-```
-
-### Con WuMixin
-
-```js
-import { LitElement, html } from 'lit';
-import { WuMixin } from 'wu-framework/adapters/lit';
-
-class MyApp extends WuMixin(LitElement) {
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Usar eventos de Wu
-    this.wuOn('user:login', (data) => {
-      console.log('User logged in:', data);
-    });
-  }
-
-  handleClick() {
-    this.wuEmit('button:clicked', { id: 'my-button' });
-  }
-
-  render() {
-    return html`
-      <button @click=${this.handleClick}>Click me</button>
-    `;
-  }
+  )
 }
-
-wuLit.register('my-app', MyApp);
-```
-
-### Web Component Vanilla (sin Lit)
-
-```js
-import { wuLit } from 'wu-framework/adapters/lit';
-
-class MyComponent extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = '<h1>Hello Web Component!</h1>';
-  }
-}
-
-wuLit.registerWebComponent('my-component', MyComponent);
-```
-
----
-
-## 📦 Vanilla JS Adapter
-
-### Registro con Objeto
-
-```js
-import { wuVanilla } from 'wu-framework/adapters/vanilla';
-
-wuVanilla.register('my-app', {
-  state: { count: 0 },
-
-  render: (container, state) => {
-    container.innerHTML = `
-      <div>
-        <h1>Count: ${state.count}</h1>
-        <button id="increment">+</button>
-      </div>
-    `;
-    container.querySelector('#increment').onclick = () => {
-      state.count++;
-      // Re-render manual
-    };
-  },
-
-  destroy: (container) => {
-    container.innerHTML = '';
-  }
-});
 ```
 
-### Registro con Clase
-
-```js
-import { wuVanilla } from 'wu-framework/adapters/vanilla';
-
-class TodoApp {
-  constructor(container) {
-    this.container = container;
-    this.todos = [];
-  }
-
-  render() {
-    this.container.innerHTML = `
-      <ul>
-        ${this.todos.map(t => `<li>${t}</li>`).join('')}
-      </ul>
-      <input type="text" id="input" />
-      <button id="add">Add</button>
-    `;
-
-    this.container.querySelector('#add').onclick = () => {
-      const input = this.container.querySelector('#input');
-      this.todos.push(input.value);
-      this.render();
-    };
-  }
+### 4. Toast Container (Shell - escucha eventos de MFEs)
 
-  destroy() {
-    this.container.innerHTML = '';
-  }
+```tsx
+// shell/src/components/ToastContainer.tsx
+import { useState, useEffect, useCallback } from 'react'
+import { useWuEvents } from '../hooks/useWuFramework'
+
+interface Toast {
+  id: string
+  message: string
+  type: 'success' | 'warning' | 'error' | 'info'
 }
 
-wuVanilla.registerClass('todo-app', TodoApp);
-```
+export function ToastContainer() {
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const { on } = useWuEvents()
 
-### Registro con Template
-
-```js
-import { wuVanilla } from 'wu-framework/adapters/vanilla';
-
-wuVanilla.registerTemplate('header', `
-  <header>
-    <h1>My Header</h1>
-    <nav>
-      <a href="/">Home</a>
-      <a href="/about">About</a>
-    </nav>
-  </header>
-`);
-
-// Template dinámico
-wuVanilla.registerTemplate('greeting',
-  (data) => `<h1>Hello, ${data.name}!</h1>`,
-  { data: { name: 'World' } }
-);
-```
+  const addToast = useCallback((message: string, type: Toast['type']) => {
+    const id = `toast-${Date.now()}`
+    setToasts(prev => [...prev, { id, message, type }])
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000)
+  }, [])
 
-### Componente Reactivo
-
-```js
-import { wuVanilla } from 'wu-framework/adapters/vanilla';
-
-const Counter = wuVanilla.createComponent({
-  state: { count: 0 },
+  useEffect(() => {
+    // Escuchar notificaciones de CUALQUIER MFE
+    const unsubscribe = on('notification:new', (event) => {
+      const { message, type } = event.data || {}
+      if (message) addToast(message, type || 'info')
+    })
+    return () => unsubscribe?.()
+  }, [on, addToast])
 
-  template: (state) => `
-    <div>
-      <h1>Count: ${state.count}</h1>
-      <button data-action="increment">+</button>
-      <button data-action="decrement">-</button>
+  return (
+    <div className="toast-container">
+      {toasts.map(toast => (
+        <div key={toast.id} className={`toast toast--${toast.type}`}>
+          {toast.message}
+        </div>
+      ))}
     </div>
-  `,
-
-  actions: {
-    increment: (state) => ({ count: state.count + 1 }),
-    decrement: (state) => ({ count: state.count - 1 })
-  }
-});
-
-wuVanilla.register('counter', Counter);
+  )
+}
 ```
 
 ---
 
-## 📡 Event Bus
-
-Sistema de eventos para comunicación entre microfrontends con soporte para wildcards y replay.
+## 📡 Cross-MFE Communication
 
-```js
-import { emit, on, once, off, replayEvents } from 'wu-framework';
+### Event Bus
 
-// Emitir evento
-emit('user:login', { userId: 123, name: 'John' });
+```ts
+import { emit, on, once, off } from 'wu-framework'
 
-// Suscribirse a evento
-const unsubscribe = on('user:login', (event) => {
-  console.log('User logged in:', event.data);
-});
+// React MFE emite
+emit('notification:new', { message: 'Hello!', type: 'success' })
 
-// Suscribirse con wildcards
-on('user:*', (event) => {
-  console.log('User event:', event.name, event.data);
-});
+// Vue MFE escucha
+const unsubscribe = on('notification:new', (event) => {
+  console.log(event.data.message) // 'Hello!'
+})
 
-// Suscribirse una sola vez
-once('app:ready', (event) => {
-  console.log('App is ready!');
-});
+// Wildcards - escuchar todos los eventos de notificación
+on('notification:*', (event) => {
+  console.log('Event:', event.name, event.data)
+})
 
-// Desuscribirse
-off('user:login', callback);
-unsubscribe(); // También funciona
+// Una sola vez
+once('app:ready', () => console.log('Ready!'))
 
-// Replay eventos del historial
-replayEvents('user:*', (event) => {
-  console.log('Past event:', event);
-});
+// Limpiar
+unsubscribe()
 ```
 
----
-
-## 🗄️ Store (State Management)
-
-Store de alto rendimiento con pattern matching.
-
-```js
-import {
-  getState,
-  setState,
-  onStateChange,
-  batchState,
-  clearState,
-  getStoreMetrics
-} from 'wu-framework';
+### Store Reactivo
 
-// Establecer estado (dot notation)
-setState('user.name', 'John');
-setState('user.preferences.theme', 'dark');
+```ts
+import { getState, setState, onStateChange, batchState } from 'wu-framework'
 
-// Obtener estado
-const name = getState('user.name'); // 'John'
-const user = getState('user');      // { name: 'John', preferences: { theme: 'dark' } }
+// Vue MFE escribe
+setState('notifications.count', 5)
+setState('user.theme', 'dark')
 
-// Suscribirse a cambios
-const unsubscribe = onStateChange('user.name', (value, path) => {
-  console.log(`${path} changed to:`, value);
-});
+// React MFE lee
+const count = getState('notifications.count') // 5
 
-// Suscribirse con wildcards
-onStateChange('user.*', (value, path) => {
-  console.log(`User property changed: ${path} =`, value);
-});
+// Angular MFE se suscribe
+const unsub = onStateChange('notifications.*', (value, path) => {
+  console.log(`${path} changed:`, value)
+})
 
-// Batch updates (más eficiente)
+// Batch updates
 batchState({
-  'user.name': 'Jane',
-  'user.email': 'jane@example.com',
-  'settings.notifications': true
-});
-
-// Métricas de performance
-const metrics = getStoreMetrics();
-```
-
----
-
-## 🔌 Sistema de Plugins
-
-```js
-import { usePlugin, createPlugin, uninstallPlugin } from 'wu-framework';
-
-const analyticsPlugin = createPlugin({
-  name: 'analytics',
-  permissions: ['events', 'store'],
-
-  install: (api, options) => {
-    api.on('app:mounted', (event) => {
-      trackEvent('mount', event.data.appName);
-    });
-  },
-
-  beforeMount: async (context) => {
-    console.log('Before mount:', context.appName);
-  },
-
-  afterMount: async (context) => {
-    console.log('Mounted in', context.mountTime, 'ms');
-  }
-});
-
-usePlugin(analyticsPlugin, { trackingId: 'UA-123456' });
-```
-
----
-
-## 🪝 Lifecycle Hooks
-
-```js
-import { useHook, createGuardHook, createTimedHook } from 'wu-framework';
-
-// Hook básico
-useHook('beforeMount', async (context, next) => {
-  console.log('Before mounting:', context.appName);
-  await next();
-}, { name: 'my-hook', priority: 10 });
-
-// Guard hook (puede cancelar)
-const authGuard = createGuardHook(async (ctx) => {
-  return await isUserAuthenticated();
-});
-useHook('beforeMount', authGuard);
-
-// Hook con timeout
-const timedHook = createTimedHook(async (ctx) => {
-  await slowOperation();
-}, 5000);
-```
-
-### Fases Disponibles
-
-| Fase | Descripción |
-|------|-------------|
-| `beforeInit` | Antes de inicializar framework |
-| `afterInit` | Después de inicializar |
-| `beforeLoad` | Antes de cargar una app |
-| `afterLoad` | Después de cargar |
-| `beforeMount` | Antes de montar |
-| `afterMount` | Después de montar |
-| `beforeUnmount` | Antes de desmontar |
-| `afterUnmount` | Después de desmontar |
-
----
-
-## 🎯 Loading Strategies
-
-```js
-await wu.init({
-  apps: [
-    { name: 'header', url: '/mfe/header', strategy: 'lazy' },      // Default - carga cuando se monta
-    { name: 'sidebar', url: '/mfe/sidebar', strategy: 'eager' },   // Precarga inmediata
-    { name: 'footer', url: '/mfe/footer', strategy: 'preload' },   // <link prefetch>
-    { name: 'analytics', url: '/mfe/analytics', strategy: 'idle' } // requestIdleCallback
-  ]
-});
-```
-
-| Estrategia | Descripción | Uso recomendado |
-|------------|-------------|-----------------|
-| `lazy` | Carga cuando se monta (default) | Contenido below-the-fold |
-| `eager` | Precarga inmediata | Componentes críticos |
-| `preload` | Usa `<link rel="prefetch">` | Navegación anticipada |
-| `idle` | Usa `requestIdleCallback` | Analytics, features secundarias |
-
----
-
-## ⚡ Performance Monitoring
-
-```js
-import {
-  startMeasure,
-  endMeasure,
-  getPerformanceMetrics,
-  generatePerformanceReport
-} from 'wu-framework';
-
-// Medición personalizada
-startMeasure('data-fetch', 'my-app');
-await fetchData();
-const duration = endMeasure('data-fetch', 'my-app');
-
-// Reporte completo
-const report = generatePerformanceReport();
-```
-
----
-
-## 🛡️ Error Handling
-
-```js
-import { registerErrorHandler, configureErrorBoundary } from 'wu-framework';
-
-registerErrorHandler({
-  name: 'api-error',
-  canHandle: (error) => error.message.includes('API'),
-  handle: async (error, context) => {
-    if (context.retryCount < 3) {
-      return { recovered: true, action: 'retry' };
-    }
-    return { recovered: false, action: 'fallback' };
-  }
-});
-
-configureErrorBoundary({
-  maxRetries: 3,
-  retryDelay: 1000,
-  showErrorUI: true
-});
-```
-
----
-
-## 🎯 API Simplificada (wu.app)
-
-```js
-import { wu } from 'wu-framework';
-
-// URL puede ser localhost (dev) o CDN (prod)
-const header = wu.app('header', {
-  url: 'http://localhost:3001',  // o 'https://cdn.mycompany.com/mfe/header'
-  container: '#header-container'
-});
-
-await header.mount();
-console.log(header.isMounted); // true
-
-await header.unmount();
-await header.remount();
-await header.reload();  // Limpia cache
-
-const health = await header.verify();
-await header.destroy();
+  'user.name': 'John',
+  'notifications.count': 0
+})
 ```
 
----
-
-## 🚀 Deployment
-
-### Estructura de Producción
+### Hooks por Framework
 
-Cada microfrontend se despliega de forma independiente:
+**React:**
+```tsx
+import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react'
 
-```
-https://cdn.mycompany.com/
-├── mfe/
-│   ├── header/
-│   │   ├── wu.json        # Manifest
-│   │   ├── index.js       # Entry point
-│   │   └── assets/
-│   ├── sidebar/
-│   │   ├── wu.json
-│   │   ├── index.js
-│   │   └── assets/
-│   └── content/
-│       ├── wu.json
-│       ├── index.js
-│       └── assets/
-```
+const useWuEvents = createUseWuEvents(React)
+const useWuStore = createUseWuStore(React)
 
-### Configuración por Entorno
-
-```js
-// config.js
-const config = {
-  development: {
-    header: 'http://localhost:3001',
-    sidebar: 'http://localhost:3002',
-    content: 'http://localhost:3003'
-  },
-  staging: {
-    header: 'https://staging-cdn.mycompany.com/mfe/header',
-    sidebar: 'https://staging-cdn.mycompany.com/mfe/sidebar',
-    content: 'https://staging-cdn.mycompany.com/mfe/content'
-  },
-  production: {
-    header: 'https://cdn.mycompany.com/mfe/header',
-    sidebar: 'https://cdn.mycompany.com/mfe/sidebar',
-    content: 'https://cdn.mycompany.com/mfe/content'
-  }
-};
-
-const env = process.env.NODE_ENV || 'development';
-const urls = config[env];
-
-await wu.init({
-  apps: [
-    { name: 'header', url: urls.header },
-    { name: 'sidebar', url: urls.sidebar },
-    { name: 'content', url: urls.content }
-  ]
-});
-```
-
-### CORS Configuration
+function MyComponent() {
+  const { emit, on } = useWuEvents()
+  const { state, setState } = useWuStore('notifications')
 
-Los microfrontends deben permitir CORS desde el shell:
+  useEffect(() => {
+    return on('user:login', (e) => console.log(e.data))
+  }, [])
 
-```nginx
-# nginx.conf para CDN
-location /mfe/ {
-    add_header Access-Control-Allow-Origin *;
-    add_header Access-Control-Allow-Methods "GET, OPTIONS";
-    add_header Access-Control-Allow-Headers "Content-Type";
+  return <span>Count: {state?.count || 0}</span>
 }
 ```
 
-### Versionado
+**Vue:**
+```vue
+<script setup>
+import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue'
 
-```json
-// wu.json con versión
-{
-  "name": "header",
-  "version": "1.2.0",
-  "entry": "index.js"
-}
-```
+const { emit, on } = useWuEvents()
+const { state, setState } = useWuStore('cart')
 
-```js
-// Shell con versiones específicas
-await wu.init({
-  apps: [
-    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header/v1.2.0' },
-    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar/v2.0.0' }
-  ]
-});
+onMounted(() => {
+  on('cart:updated', (data) => console.log(data))
+})
+</script>
 ```
 
 ---
@@ -1036,106 +453,93 @@ await wu.init({
 
 ```
 ┌─────────────────────────────────────────────────────────────┐
-│                     HOST APPLICATION                         │
+│                     SHELL (React)                           │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  ToastContainer (escucha notification:new)           │  │
+│  └──────────────────────────────────────────────────────┘  │
 ├─────────────────────────────────────────────────────────────┤
-│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────┐  │
-│  │  #shadow-root   │  │  #shadow-root   │  │ #shadow-root│  │
-│  │  ┌───────────┐  │  │  ┌───────────┐  │  │ ┌─────────┐ │  │
-│  │  │  Header   │  │  │  │  Sidebar  │  │  │ │ Content │ │  │
-│  │  │  (React)  │  │  │  │  (Vue)    │  │  │ │(Angular)│ │  │
-│  │  └───────────┘  │  │  └───────────┘  │  │ └─────────┘ │  │
-│  │  CSS Isolated   │  │  CSS Isolated   │  │ CSS Isolated│  │
-│  │  JS Sandboxed   │  │  JS Sandboxed   │  │ JS Sandboxed│  │
-│  └─────────────────┘  └─────────────────┘  └─────────────┘  │
+│  ┌─────────────────┐            ┌─────────────────────┐    │
+│  │  #shadow-root   │            │  #shadow-root       │    │
+│  │  ┌───────────┐  │            │  ┌───────────────┐  │    │
+│  │  │  Header   │  │  ──────▶   │  │   Content     │  │    │
+│  │  │  (Vue)    │  │  events    │  │   (React)     │  │    │
+│  │  │           │  │  ◀──────   │  │               │  │    │
+│  │  │ 🔔 badge  │  │  store     │  │ [Send Notif]  │  │    │
+│  │  └───────────┘  │            │  └───────────────┘  │    │
+│  │ fully-isolated  │            │  isolated           │    │
+│  └─────────────────┘            └─────────────────────┘    │
 ├─────────────────────────────────────────────────────────────┤
-│                      WU FRAMEWORK CORE                       │
-│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
-│  │ EventBus │ │  Store   │ │ Plugins  │ │ Sandbox Pool   │  │
-│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
+│                      WU FRAMEWORK CORE                      │
+│  ┌──────────┐ ┌──────────┐ ┌───────────┐ ┌──────────────┐  │
+│  │ EventBus │ │  Store   │ │StyleBridge│ │ Sandbox Pool │  │
+│  └──────────┘ └──────────┘ └───────────┘ └──────────────┘  │
 └─────────────────────────────────────────────────────────────┘
 ```
 
----
-
-## 📋 API Reference
+**Flujo de datos:**
+1. React Dashboard (content) llama `emit('notification:new', {...})`
+2. Wu EventBus propaga a todos los suscriptores
+3. Vue NavBar (header) incrementa badge
+4. React ToastContainer (shell) muestra toast flotante
+5. Store compartido actualiza `notifications.count`
 
-### Core
+---
 
-```js
-import { wu, init, mount, unmount, destroy, getStats } from 'wu-framework';
-```
+## 🎨 Adapters
 
-### Event Bus
-
-```js
-import { emit, on, once, off, replayEvents, getEventBusStats } from 'wu-framework';
-```
-
-### Store
+| Framework | Adapter | Registro |
+|-----------|---------|----------|
+| ⚛️ React | `wuReact` | `wuReact.register('app', App)` |
+| 💚 Vue 3 | `wuVue` | `wuVue.register('app', App)` |
+| 🅰️ Angular | `wuAngular` | `wuAngular.register('app', AppModule)` |
+| 🧡 Svelte | `wuSvelte` | `wuSvelte.register('app', App)` |
+| ⚡ Preact | `wuPreact` | `wuPreact.register('app', App)` |
+| 💎 Solid.js | `wuSolid` | `wuSolid.register('app', App)` |
+| 🔥 Lit | `wuLit` | `wuLit.register('app', MyElement)` |
+| 📦 Vanilla | `wuVanilla` | `wuVanilla.register('app', config)` |
 
-```js
-import { getState, setState, onStateChange, batchState, clearState } from 'wu-framework';
-```
+---
 
-### Plugins & Hooks
+## ⚙️ Core Systems
 
-```js
-import { usePlugin, createPlugin, useHook, removeHook } from 'wu-framework';
-```
+| Sistema | Descripción |
+|---------|-------------|
+| **WuStyleBridge** | Detecta estilos por puerto/carpeta, inyecta en Shadow DOM, genera reset de CSS vars |
+| **WuSandbox** | Proxy Sandbox para JS isolation, cleanup automático |
+| **WuEventBus** | Wildcards, replay, métricas |
+| **WuStore** | Dot notation, wildcard subscriptions, batch |
+| **WuCache** | Cache de manifests y módulos |
+| **WuPerformance** | Tiempos de mount/unmount, reportes |
+| **WuErrorBoundary** | Auto-retry, fallback UI |
+| **WuPluginSystem** | Lifecycle hooks, middleware |
 
-### Performance & Errors
+---
 
-```js
-import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework';
-import { registerErrorHandler, configureErrorBoundary } from 'wu-framework';
-```
+## 📋 API Reference
 
-### Adapters
-
-```js
-import { wuReact } from 'wu-framework/adapters/react';
-import { wuVue } from 'wu-framework/adapters/vue';
-import { wuAngular } from 'wu-framework/adapters/angular';
-import { wuSvelte } from 'wu-framework/adapters/svelte';
-import { wuPreact } from 'wu-framework/adapters/preact';
-import { wuSolid } from 'wu-framework/adapters/solid';
-import { wuLit } from 'wu-framework/adapters/lit';
-import { wuVanilla } from 'wu-framework/adapters/vanilla';
-```
+```ts
+// Core
+import { wu, init, mount, unmount, destroy } from 'wu-framework'
 
-### Utilities
+// Events
+import { emit, on, once, off, replayEvents } from 'wu-framework'
 
-```js
-import { presets, dev, events } from 'wu-framework';
+// Store
+import { getState, setState, onStateChange, batchState } from 'wu-framework'
 
-// Presets
-await wu.init(presets.development([{ name: 'app', port: 3001 }]));
-await wu.init(presets.production([{ name: 'app', url: 'https://...' }]));
+// Performance
+import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework'
 
-// Dev tools
-dev.enableDebug();
-dev.inspect();
-await dev.reload('app');
+// Plugins
+import { usePlugin, createPlugin, useHook } from 'wu-framework'
 
-// Silenciar logs
-wu.silence();
-wu.verbose();
+// Adapters
+import { wuReact } from 'wu-framework/adapters/react'
+import { wuVue } from 'wu-framework/adapters/vue'
 ```
 
 ---
 
-## 🤝 Contributing
-
-¡Las contribuciones son bienvenidas!
-
-1. **Fork** el repositorio
-2. **Crear** branch (`git checkout -b feature/amazing-feature`)
-3. **Commit** tus cambios (`git commit -m 'Add amazing feature'`)
-4. **Push** al branch (`git push origin feature/amazing-feature`)
-5. **Abrir** un Pull Request
-
----
-
 ## 📄 License
 
 MIT License - Copyright (c) 2025 Wu Framework Team
@@ -1145,5 +549,5 @@ MIT License - Copyright (c) 2025 Wu Framework Team
 <p align="center">
   <b>🚀 Wu Framework - Universal Microfrontends Made Simple</b>
   <br><br>
-  <i>Zero dependencies • 8 Frameworks • Shadow DOM • Proxy Sandbox • Self-Healing</i>
+  <i>Shadow DOM • 4 CSS Isolation Modes • Cross-MFE Events & Store • Zero Config</i>
 </p>