wu-framework 1.1.4 → 1.1.5

package/README.md

@@ -1,553 +1,1273 @@
-# 🚀 Wu Framework
+# Wu Framework
 
 **Universal Microfrontends Made Simple**
 
-Wu Framework es una librería de microfrontends con **Shadow DOM nativo**, **aislamiento CSS avanzado**, y **comunicación cross-MFE** integrada.
+Wu Framework es la libreria de microfrontends mas simple y poderosa del mercado. Framework agnostic, zero config, Shadow DOM nativo.
+
+## Por que Wu Framework?
+
+| Caracteristica | Module Federation | qiankun | single-spa | **Wu Framework** |
+|---|---|---|---|---|
+| **Setup** | Webpack config complejo | Configuracion manual | Config extensa | **Zero config** |
+| **Framework Support** | React-first | Multi framework | Multi framework | **8 frameworks nativos** |
+| **Bundler Required** | Solo Webpack 5 | Agnostico | Agnostico | **Ninguno requerido** |
+| **CSS Isolation** | Basico | CSS hacks | Manual | **Shadow DOM nativo** |
+| **JS Isolation** | No | Proxy basico | No | **Proxy + Snapshot Sandbox** |
+| **Style Modes** | No | No | No | **3 modos (shared/isolated/fully-isolated)** |
+| **Runtime Config** | No | Limitado | Limitado | **Completamente dinamico** |
+| **Self-Healing** | No | No | No | **Auto-recovery** |
+| **Build Protection** | No | No | No | **Minify + Obfuscate + Base64** |
+| **API Complexity** | Alta | Media | Alta | **1 linea de codigo** |
+
+## Instalacion
+
+```bash
+npm install wu-framework
+```
+
+Sin webpack config, sin plugins, sin configuracion adicional.
 
 ---
 
-## ✨ ¿Por qué Wu Framework?
+## Frameworks Soportados
 
-| 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** |
+Wu Framework incluye **adapters nativos** para los frameworks mas populares:
+
+| Framework | Adapter | Registro |
+|-----------|---------|----------|
+| React | `wuReact` | `wuReact.register('app', App)` |
+| Vue | `wuVue` | `wuVue.register('app', App)` |
+| Angular | `wuAngular` | `wuAngular.register('app', AppModule)` |
+| Angular Standalone | `wuAngular` | `wuAngular.registerStandalone('app', Component)` |
+| Angular Elements | `wuAngular` | `wuAngular.registerElement('app', Component)` |
+| 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)` |
 
 ---
 
-## 🛡️ CSS Isolation Modes (Feature Único)
+## Quick Start
+
+### 1. Micro App: Crear `wu.json`
 
-Wu Framework ofrece **4 modos de aislamiento CSS**. El modo `fully-isolated` es **único** - bloquea incluso las CSS variables del padre:
+Cada microfrontend necesita un archivo `wu.json` en su raiz:
 
 ```json
-// header/wu.json - Aislamiento total (bloquea CSS vars del padre)
 {
   "name": "header",
-  "entry": "src/main.ts",
-  "styleMode": "fully-isolated",
+  "version": "1.0.0",
+  "entry": "index.js",
+  "styleMode": "shared",
   "wu": {
+    "exports": {
+      "NavBar": "components/NavBar.js",
+      "UserMenu": "components/UserMenu.js"
+    },
+    "imports": [],
+    "routes": ["/", "/home"],
     "permissions": ["events", "store"]
   }
 }
 ```
 
+| Campo | Descripcion |
+|-------|-------------|
+| `name` | Nombre unico del microfrontend |
+| `version` | Version del microfrontend |
+| `entry` | Archivo JS principal (default: `index.js`) |
+| `styleMode` | Modo de estilos: `shared`, `isolated`, `fully-isolated` |
+| `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 linea)
+
+**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);
+```
+
+El adapter se encarga de todo: deteccion de contexto, modo standalone, cleanup automatico.
+
+### 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');
+```
+
+**Produccion:**
+```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' }
+  ]
+});
+```
+
+### 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
+```
+
+---
+
+## Modos de Inyeccion de Estilos
+
+Wu Framework soporta **3 modos de inyeccion de estilos** en Shadow DOM:
+
+| Modo | Descripcion | Riesgo Colision |
+|------|-------------|-----------------|
+| `shared` | Inyecta TODOS los estilos del documento padre | Alto |
+| `isolated` | NO inyecta estilos externos (Shadow DOM nativo) | Ninguno |
+| `fully-isolated` | Inyecta SOLO estilos propios de la app | Ninguno |
+
+### Configuracion en wu.json
+
 ```json
-// container/wu.json - Aislamiento normal (hereda CSS vars)
 {
-  "name": "content",
-  "folder": "container",
-  "entry": "src/main.tsx",
-  "styleMode": "isolated",
-  "wu": {
-    "permissions": ["events", "store"]
-  }
+  "name": "my-app",
+  "styleMode": "isolated"
 }
 ```
 
-| 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. |
+### shared (default)
+
+- Inyecta estilos de librerias (Element Plus, Tailwind, Vue Flow, etc.)
+- Inyecta estilos globales del documento
+- Observer HMR para cambios en desarrollo
+- **Ideal para:** Apps que comparten un design system comun
+
+### isolated
+
+- NO inyecta ningun estilo externo
+- Usa encapsulamiento nativo del Shadow DOM
+- La app debe incluir sus propios estilos (CSS-in-JS, scoped, imports)
+- **Ideal para:** Apps con estilos completamente independientes
+
+### fully-isolated
+
+- Detecta y inyecta SOLO estilos propios de la app especifica
+- Patron de deteccion: `packages/appName/src/`
+- MutationObserver persistente para HMR de Vite
+- **Ideal para:** Apps que necesitan sus estilos pero no los globales
 
 ---
 
-## 🔥 Quick Start
+## React Adapter
 
-### 1. Shell (React + Vite)
+### Registro Basico
 
 ```tsx
-// shell/src/config/mfe.config.ts
-const isDev = import.meta.env.DEV
-
-const devUrls = {
-  header: 'http://localhost:3001',
-  content: 'http://localhost:3003'
-}
+import { wuReact } from 'wu-framework/adapters/react';
+import App from './App';
 
-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'
-}
+wuReact.register('my-app', App);
+```
 
-export const urls = isDev ? devUrls : prodUrls
+### Con Opciones
 
-export const enabledApps = [
-  { name: 'header', url: urls.header, enabled: true },
-  { name: 'content', url: urls.content, enabled: true }
-]
+```tsx
+wuReact.register('my-app', App, {
+  strictMode: true,           // Envolver en React.StrictMode
+  props: { theme: 'dark' },   // Props iniciales
+  standalone: true,           // Ejecutar independiente si Wu no esta
+  standaloneContainer: '#root',
+  onMount: (container) => console.log('Mounted!'),
+  onUnmount: (container) => console.log('Unmounted!')
+});
 ```
 
+### Hooks para React
+
 ```tsx
-// 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)
+import React from 'react';
+import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react';
 
-  useEffect(() => {
-    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 })
-      }
-    }
+const useWuEvents = createUseWuEvents(React);
+const useWuStore = createUseWuStore(React);
+
+function MyComponent() {
+  const { emit, on } = useWuEvents();
+  const { state, setState } = useWuStore('user');
 
-    initWu()
-  }, [])
+  useEffect(() => {
+    const unsub = on('cart:updated', (data) => {
+      console.log('Cart updated:', data);
+    });
+    return unsub;
+  }, [on]);
 
-  return { ...state, wu }
+  return (
+    <button onClick={() => emit('user:logout')}>
+      Logout {state?.name}
+    </button>
+  );
 }
 ```
 
-```tsx
-// shell/src/App.tsx
-import { useWuFramework, useWuEvents } from './hooks/useWuFramework'
-import WuSlot from './components/WuSlot'
-import ToastContainer from './components/ToastContainer'
+### Cargar Microfrontends en React (Shell)
 
-function App() {
-  const { initialized, loading, error } = useWuFramework()
-  const { emit } = useWuEvents()
+```tsx
+import React from 'react';
+import { createWuSlot } from 'wu-framework/adapters/react';
 
-  useEffect(() => {
-    if (initialized) {
-      emit('shell:ready', { timestamp: Date.now() })
-    }
-  }, [initialized, emit])
+const WuSlot = createWuSlot(React);
 
-  if (loading) return <div>Loading Wu Framework...</div>
-  if (error) return <div>Error: {error.message}</div>
+const HEADER_URL = process.env.REACT_APP_HEADER_URL || 'http://localhost:3001';
 
+function Shell() {
   return (
-    <>
-      <ToastContainer />
-      <WuSlot name="header" url={urls.header} />
-      <WuSlot name="content" url={urls.content} />
-    </>
-  )
+    <div>
+      <WuSlot
+        name="header"
+        url={HEADER_URL}
+        onLoad={() => console.log('Header loaded!')}
+        onError={(err) => console.error(err)}
+      />
+    </div>
+  );
 }
 ```
 
-### 2. MFE Header (Vue 3)
+---
 
-```json
-// header/wu.json
-{
-  "name": "header",
-  "entry": "src/main.ts",
-  "styleMode": "fully-isolated",
-  "wu": {
-    "exports": {
-      "NavBar": "src/components/NavBar.vue"
-    },
-    "permissions": ["events", "store"]
-  }
-}
+## Vue Adapter
+
+### Registro Basico
+
+```ts
+import { wuVue } from 'wu-framework/adapters/vue';
+import App from './App.vue';
+
+wuVue.register('my-app', App);
 ```
 
+### Con Plugins (Pinia, Router, etc.)
+
 ```ts
-// 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)
-})
+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);
+  }
+});
 ```
 
-```vue
-<!-- header/src/components/NavBar.vue -->
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue'
+### Composables para Vue
 
-const { emit, on } = useWuEvents()
-const { state: notificationState, setState } = useWuStore('notifications')
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue';
 
-const notificationCount = ref(0)
-let unsubscribe: (() => void) | null = null
+const { emit, on, cleanup } = useWuEvents();
+const { state, setState } = useWuStore('cart');
 
 onMounted(() => {
-  // Inicializar store compartido
-  if (!notificationState.value) {
-    setState({ count: 0, items: [] })
-  }
+  on('user:login', (data) => console.log('Login:', data));
+});
 
-  // 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'
-      }]
-    })
-  })
-})
+onUnmounted(() => cleanup());
+</script>
 
-onUnmounted(() => {
-  if (unsubscribe) unsubscribe()
-})
+<template>
+  <div>
+    <p>Items: {{ state?.items?.length }}</p>
+    <button @click="emit('cart:clear')">Clear Cart</button>
+  </div>
+</template>
+```
 
-const handleNavClick = (item: { id: string, label: string }) => {
-  emit('header:nav:click', { id: item.id, label: item.label })
-}
+### Cargar Microfrontends en Vue (Shell)
+
+```vue
+<script setup>
+import { WuSlot } from 'wu-framework/adapters/vue';
+
+const headerUrl = import.meta.env.VITE_HEADER_URL || 'http://localhost:3001';
 </script>
 
 <template>
-  <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>
+  <div>
+    <WuSlot
+      name="header"
+      :url="headerUrl"
+      @load="onLoad"
+      @error="onError"
+    />
+  </div>
 </template>
 ```
 
-### 3. MFE Content (React)
+### Plugin Global
 
-```json
-// container/wu.json
-{
-  "name": "content",
-  "folder": "container",
-  "entry": "src/main.tsx",
-  "styleMode": "isolated",
-  "wu": {
-    "exports": {
-      "Dashboard": "src/components/Dashboard.tsx"
-    },
-    "permissions": ["events", "store"]
+```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
+});
+```
+
+### Registro con Angular Elements (Web Components)
+
+Para proyectos que usan Angular Elements para crear Web Components:
+
+```ts
+import { wuAngular } from 'wu-framework/adapters/angular';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+wuAngular.registerElement('my-app', AppComponent, {
+  elementTag: 'my-app-element',  // Tag del custom element
+  appConfig,                      // Configuracion de Angular
+  standaloneContainer: '#root',   // Container para modo standalone
+  onMount: (container, element) => {
+    console.log('Angular Element mounted');
+  },
+  onUnmount: (container, element) => {
+    console.log('Angular Element unmounted');
   }
-}
+});
 ```
 
-```tsx
-// container/src/main.tsx
-import { wuReact } from 'wu-framework/adapters/react'
-import App from './App'
+El adapter se encarga de:
+- Crear la aplicacion Angular
+- Registrar el Custom Element con `customElements.define()`
+- Gestionar el ciclo de vida mount/unmount
+- Soportar modo standalone si Wu Framework no esta disponible
 
-wuReact.register('content', App, {
-  strictMode: true,
-  standalone: true,
-  standaloneContainer: '#root',
-  onMount: (container) => console.log('[Content] Mounted:', container),
-  onUnmount: (container) => console.log('[Content] Unmounted:', container)
+### Servicio para Componentes
+
+```ts
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { createWuService } from 'wu-framework/adapters/angular';
+
+@Component({
+  selector: 'app-root',
+  template: `<button (click)="sendEvent()">Send Event</button>`
 })
-```
+export class AppComponent implements OnInit, OnDestroy {
+  private wuService = createWuService();
 
-```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)
+  ngOnInit() {
+    this.wuService.on('user:login', (data) => {
+      console.log('User logged in:', data);
+    });
   }
 
-  return (
-    <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>
-  )
+  sendEvent() {
+    this.wuService.emit('app:ready', { timestamp: Date.now() });
+  }
+
+  ngOnDestroy() {
+    this.wuService.destroy();
+  }
 }
 ```
 
-### 4. Toast Container (Shell - escucha eventos de MFEs)
+---
 
-```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'
+## Svelte Adapter
+
+### Registro Basico
+
+```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';
+
+  const userStore = createWuStore('user');
+  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 Basico
+
+```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';
+
+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>;
 }
+```
+
+---
 
-export function ToastContainer() {
-  const [toasts, setToasts] = useState<Toast[]>([])
-  const { on } = useWuEvents()
+## Solid.js Adapter
 
-  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)
-  }, [])
+### Registro Basico
 
-  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])
+```jsx
+import { wuSolid } from 'wu-framework/adapters/solid';
+import App from './App';
+
+wuSolid.register('my-app', App);
+```
+
+### Stores Reactivos
+
+```jsx
+import { createWuStore, createWuEvent } from 'wu-framework/adapters/solid';
+
+function MyComponent() {
+  const [user, setUser] = createWuStore('user');
+  const lastEvent = createWuEvent('notification:*');
 
   return (
-    <div className="toast-container">
-      {toasts.map(toast => (
-        <div key={toast.id} className={`toast toast--${toast.type}`}>
-          {toast.message}
-        </div>
-      ))}
+    <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>
-  )
+  );
 }
 ```
 
 ---
 
-## 📡 Cross-MFE Communication
+## Lit Adapter (Web Components)
 
-### Event Bus
+### Registro con LitElement
 
-```ts
-import { emit, on, once, off } from 'wu-framework'
+```js
+import { LitElement, html, css } from 'lit';
+import { wuLit } from 'wu-framework/adapters/lit';
 
-// React MFE emite
-emit('notification:new', { message: 'Hello!', type: 'success' })
+class MyApp extends LitElement {
+  static styles = css`
+    :host { display: block; padding: 16px; }
+  `;
 
-// Vue MFE escucha
-const unsubscribe = on('notification:new', (event) => {
-  console.log(event.data.message) // 'Hello!'
-})
+  render() {
+    return html`<h1>Hello from Lit!</h1>`;
+  }
+}
 
-// Wildcards - escuchar todos los eventos de notificación
-on('notification:*', (event) => {
-  console.log('Event:', event.name, event.data)
-})
+wuLit.register('my-app', MyApp);
+```
+
+### Con WuMixin
 
-// Una sola vez
-once('app:ready', () => console.log('Ready!'))
+```js
+import { LitElement, html } from 'lit';
+import { WuMixin } from 'wu-framework/adapters/lit';
 
-// Limpiar
-unsubscribe()
+class MyApp extends WuMixin(LitElement) {
+  connectedCallback() {
+    super.connectedCallback();
+    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);
 ```
 
-### Store Reactivo
+### Web Component Vanilla (sin Lit)
 
-```ts
-import { getState, setState, onStateChange, batchState } from 'wu-framework'
+```js
+import { wuLit } from 'wu-framework/adapters/lit';
 
-// Vue MFE escribe
-setState('notifications.count', 5)
-setState('user.theme', 'dark')
+class MyComponent extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = '<h1>Hello Web Component!</h1>';
+  }
+}
 
-// React MFE lee
-const count = getState('notifications.count') // 5
+wuLit.registerWebComponent('my-component', MyComponent);
+```
 
-// Angular MFE se suscribe
-const unsub = onStateChange('notifications.*', (value, path) => {
-  console.log(`${path} changed:`, value)
-})
+---
+
+## 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++;
+    };
+  },
+
+  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();
+    };
+  }
+
+  destroy() {
+    this.container.innerHTML = '';
+  }
+}
+
+wuVanilla.registerClass('todo-app', TodoApp);
+```
+
+### 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 dinamico
+wuVanilla.registerTemplate('greeting',
+  (data) => `<h1>Hello, ${data.name}!</h1>`,
+  { data: { name: 'World' } }
+);
+```
+
+### Componente Reactivo
+
+```js
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
+
+const Counter = wuVanilla.createComponent({
+  state: { count: 0 },
+
+  template: (state) => `
+    <div>
+      <h1>Count: ${state.count}</h1>
+      <button data-action="increment">+</button>
+      <button data-action="decrement">-</button>
+    </div>
+  `,
+
+  actions: {
+    increment: (state) => ({ count: state.count + 1 }),
+    decrement: (state) => ({ count: state.count - 1 })
+  }
+});
+
+wuVanilla.register('counter', Counter);
+```
+
+---
 
-// Batch updates
+## Event Bus
+
+Sistema de eventos para comunicacion entre microfrontends con soporte para wildcards y replay.
+
+```js
+import { emit, on, once, off, replayEvents } from 'wu-framework';
+
+// Emitir evento
+emit('user:login', { userId: 123, name: 'John' });
+
+// Suscribirse a evento
+const unsubscribe = on('user:login', (event) => {
+  console.log('User logged in:', event.data);
+});
+
+// Suscribirse con wildcards
+on('user:*', (event) => {
+  console.log('User event:', event.name, event.data);
+});
+
+// Suscribirse una sola vez
+once('app:ready', (event) => {
+  console.log('App is ready!');
+});
+
+// Desuscribirse
+off('user:login', callback);
+unsubscribe();
+
+// Replay eventos del historial
+replayEvents('user:*', (event) => {
+  console.log('Past event:', event);
+});
+```
+
+---
+
+## Store (State Management)
+
+Store de alto rendimiento con pattern matching.
+
+```js
+import {
+  getState,
+  setState,
+  onStateChange,
+  batchState,
+  clearState,
+  getStoreMetrics
+} from 'wu-framework';
+
+// Establecer estado (dot notation)
+setState('user.name', 'John');
+setState('user.preferences.theme', 'dark');
+
+// Obtener estado
+const name = getState('user.name'); // 'John'
+const user = getState('user');      // { name: 'John', preferences: { theme: 'dark' } }
+
+// Suscribirse a cambios
+const unsubscribe = onStateChange('user.name', (value, path) => {
+  console.log(`${path} changed to:`, value);
+});
+
+// Suscribirse con wildcards
+onStateChange('user.*', (value, path) => {
+  console.log(`User property changed: ${path} =`, value);
+});
+
+// Batch updates (mas eficiente)
 batchState({
-  'user.name': 'John',
-  'notifications.count': 0
-})
+  'user.name': 'Jane',
+  'user.email': 'jane@example.com',
+  'settings.notifications': true
+});
+
+// Metricas de performance
+const metrics = getStoreMetrics();
 ```
 
-### Hooks por Framework
+---
 
-**React:**
-```tsx
-import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react'
+## Sistema de Plugins
 
-const useWuEvents = createUseWuEvents(React)
-const useWuStore = createUseWuStore(React)
+```js
+import { usePlugin, createPlugin, uninstallPlugin } from 'wu-framework';
 
-function MyComponent() {
-  const { emit, on } = useWuEvents()
-  const { state, setState } = useWuStore('notifications')
+const analyticsPlugin = createPlugin({
+  name: 'analytics',
+  permissions: ['events', 'store'],
 
-  useEffect(() => {
-    return on('user:login', (e) => console.log(e.data))
-  }, [])
+  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 basico
+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 | Descripcion |
+|------|-------------|
+| `beforeInit` | Antes de inicializar framework |
+| `afterInit` | Despues de inicializar |
+| `beforeLoad` | Antes de cargar una app |
+| `afterLoad` | Despues de cargar |
+| `beforeMount` | Antes de montar |
+| `afterMount` | Despues de montar |
+| `beforeUnmount` | Antes de desmontar |
+| `afterUnmount` | Despues de desmontar |
+
+---
+
+## Loading Strategies
+
+```js
+await wu.init({
+  apps: [
+    { name: 'header', url: '/mfe/header', strategy: 'lazy' },
+    { name: 'sidebar', url: '/mfe/sidebar', strategy: 'eager' },
+    { name: 'footer', url: '/mfe/footer', strategy: 'preload' },
+    { name: 'analytics', url: '/mfe/analytics', strategy: 'idle' }
+  ]
+});
+```
+
+| Estrategia | Descripcion | Uso recomendado |
+|------------|-------------|-----------------|
+| `lazy` | Carga cuando se monta (default) | Contenido below-the-fold |
+| `eager` | Precarga inmediata | Componentes criticos |
+| `preload` | Usa `<link rel="prefetch">` | Navegacion anticipada |
+| `idle` | Usa `requestIdleCallback` | Analytics, features secundarias |
+
+---
 
-  return <span>Count: {state?.count || 0}</span>
+## Performance Monitoring
+
+```js
+import {
+  startMeasure,
+  endMeasure,
+  getPerformanceMetrics,
+  generatePerformanceReport
+} from 'wu-framework';
+
+// Medicion 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';
+
+const header = wu.app('header', {
+  url: 'http://localhost:3001',
+  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();
+```
+
+---
+
+## Sistema de Build
+
+Wu Framework incluye un sistema de build completo para proteger el codigo.
+
+### Comandos Disponibles
+
+```bash
+# Instalar dependencias
+npm install
+
+# Build completo (todos los formatos)
+npm run build
+
+# Builds individuales
+npm run build:dev        # Desarrollo (sin minificar)
+npm run build:prod       # Produccion (minificado)
+npm run build:obf        # Ofuscado
+npm run build:umd        # UMD para browsers
+npm run build:cjs        # CommonJS para Node
+
+# Build protegido (pipeline completo)
+npm run build:protected  # Bundle -> Minify -> Obfuscate -> Base64
+```
+
+### Pipeline de Proteccion
+
+```
+Source Code
+    |
+    v
+[1] Bundle (Rollup)      -> Empaqueta todos los modulos
+    |
+    v
+[2] Minify (Terser)      -> Reduce ~60% del tamanio
+    |
+    v
+[3] Obfuscate            -> Codigo ilegible
+    |
+    v
+[4] Base64 Encode        -> Capa adicional de proteccion
+    |
+    v
+Output: wu-framework.protected.js (~250KB)
+```
+
+### Archivos Generados
+
+| Archivo | Formato | Uso |
+|---------|---------|-----|
+| `wu-framework.dev.js` | ES Module | Desarrollo |
+| `wu-framework.min.js` | ES Module | Produccion |
+| `wu-framework.obf.js` | ES Module | Produccion protegida |
+| `wu-framework.protected.js` | ES Module | Maxima proteccion |
+| `wu-framework.umd.js` | UMD | Browsers via CDN |
+| `wu-framework.cjs.js` | CommonJS | Node.js |
+
+---
+
+## Sandbox System
+
+Wu Framework usa dos estrategias de aislamiento JS:
+
+### Proxy Sandbox (Default)
+
+- Usa ES6 Proxy para interceptar acceso a globales
+- Aislamiento completo sin side effects
+- Requiere soporte de Proxy (navegadores modernos)
+
+### Snapshot Sandbox (Fallback)
+
+- Toma snapshots del estado global
+- Restaura al desmontar
+- Compatible con navegadores legacy
+
+```js
+// El framework detecta automaticamente la mejor estrategia
+const stats = wu.sandbox.getStats();
+console.log(stats.strategy); // 'proxy' o 'snapshot'
+```
+
+---
+
+## Deployment
+
+### Estructura de Produccion
+
+```
+https://cdn.mycompany.com/
+├── mfe/
+│   ├── header/
+│   │   ├── wu.json
+│   │   ├── index.js
+│   │   └── assets/
+│   ├── sidebar/
+│   │   ├── wu.json
+│   │   ├── index.js
+│   │   └── assets/
+│   └── content/
+│       ├── wu.json
+│       ├── index.js
+│       └── assets/
+```
+
+### Configuracion por Entorno
+
+```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
+
+```nginx
+location /mfe/ {
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Allow-Methods "GET, OPTIONS";
+    add_header Access-Control-Allow-Headers "Content-Type";
 }
 ```
 
-**Vue:**
-```vue
-<script setup>
-import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue'
+### Versionado
 
-const { emit, on } = useWuEvents()
-const { state, setState } = useWuStore('cart')
+```json
+{
+  "name": "header",
+  "version": "1.2.0",
+  "entry": "index.js"
+}
+```
 
-onMounted(() => {
-  on('cart:updated', (data) => console.log(data))
-})
-</script>
+```js
+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' }
+  ]
+});
 ```
 
 ---
 
-## 🏗️ Arquitectura
+## Arquitectura
 
 ```
 ┌─────────────────────────────────────────────────────────────┐
-│                     SHELL (React)                           │
-│  ┌──────────────────────────────────────────────────────┐  │
-│  │  ToastContainer (escucha notification:new)           │  │
-│  └──────────────────────────────────────────────────────┘  │
+│                     HOST APPLICATION                         │
 ├─────────────────────────────────────────────────────────────┤
-│  ┌─────────────────┐            ┌─────────────────────┐    │
-│  │  #shadow-root   │            │  #shadow-root       │    │
-│  │  ┌───────────┐  │            │  ┌───────────────┐  │    │
-│  │  │  Header   │  │  ──────▶   │  │   Content     │  │    │
-│  │  │  (Vue)    │  │  events    │  │   (React)     │  │    │
-│  │  │           │  │  ◀──────   │  │               │  │    │
-│  │  │ 🔔 badge  │  │  store     │  │ [Send Notif]  │  │    │
-│  │  └───────────┘  │            │  └───────────────┘  │    │
-│  │ fully-isolated  │            │  isolated           │    │
-│  └─────────────────┘            └─────────────────────┘    │
+│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────┐  │
+│  │  #shadow-root   │  │  #shadow-root   │  │ #shadow-root│  │
+│  │  ┌───────────┐  │  │  ┌───────────┐  │  │ ┌─────────┐ │  │
+│  │  │  Header   │  │  │  │  Sidebar  │  │  │ │ Content │ │  │
+│  │  │  (React)  │  │  │  │  (Vue)    │  │  │ │(Angular)│ │  │
+│  │  └───────────┘  │  │  └───────────┘  │  │ └─────────┘ │  │
+│  │  CSS Isolated   │  │  CSS Isolated   │  │ CSS Isolated│  │
+│  │  JS Sandboxed   │  │  JS Sandboxed   │  │ JS Sandboxed│  │
+│  └─────────────────┘  └─────────────────┘  └─────────────┘  │
 ├─────────────────────────────────────────────────────────────┤
-│                      WU FRAMEWORK CORE                      │
-│  ┌──────────┐ ┌──────────┐ ┌───────────┐ ┌──────────────┐  │
-│  │ EventBus │ │  Store   │ │StyleBridge│ │ Sandbox Pool │  │
-│  └──────────┘ └──────────┘ └───────────┘ └──────────────┘  │
+│                      WU FRAMEWORK CORE                       │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
+│  │ EventBus │ │  Store   │ │ Plugins  │ │ Sandbox Pool   │  │
+│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
+│  │  Loader  │ │ Manifest │ │  Hooks   │ │ Style Bridge   │  │
+│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
 └─────────────────────────────────────────────────────────────┘
 ```
 
-**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`
-
 ---
 
-## 🎨 Adapters
+## API Reference
 
-| 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)` |
+### Core
 
----
+```js
+import { wu, init, mount, unmount, destroy, getStats } from 'wu-framework';
+```
 
-## ⚙️ Core Systems
+### Event Bus
 
-| 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 |
+```js
+import { emit, on, once, off, replayEvents, getEventBusStats } from 'wu-framework';
+```
 
----
+### Store
 
-## 📋 API Reference
+```js
+import { getState, setState, onStateChange, batchState, clearState } from 'wu-framework';
+```
 
-```ts
-// Core
-import { wu, init, mount, unmount, destroy } from 'wu-framework'
+### Plugins & Hooks
+
+```js
+import { usePlugin, createPlugin, useHook, removeHook } from 'wu-framework';
+```
+
+### Performance & Errors
+
+```js
+import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework';
+import { registerErrorHandler, configureErrorBoundary } from 'wu-framework';
+```
+
+### Style Management
+
+```js
+import { configureStyleSharing, reinjectStyles, getStyleStats } from 'wu-framework';
+```
+
+### 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';
+```
 
-// Events
-import { emit, on, once, off, replayEvents } from 'wu-framework'
+### Utilities
 
-// Store
-import { getState, setState, onStateChange, batchState } from 'wu-framework'
+```js
+import { presets, dev, events } from 'wu-framework';
 
-// Performance
-import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework'
+// Presets
+await wu.init(presets.development([{ name: 'app', port: 3001 }]));
+await wu.init(presets.production([{ name: 'app', url: 'https://...' }]));
 
-// Plugins
-import { usePlugin, createPlugin, useHook } from 'wu-framework'
+// Dev tools
+dev.enableDebug();
+dev.inspect();
+await dev.reload('app');
 
-// Adapters
-import { wuReact } from 'wu-framework/adapters/react'
-import { wuVue } from 'wu-framework/adapters/vue'
+// Silenciar logs
+wu.silence();
+wu.verbose();
 ```
 
 ---
 
-## 📄 License
+## 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
 
 ---
 
-<p align="center">
-  <b>🚀 Wu Framework - Universal Microfrontends Made Simple</b>
-  <br><br>
-  <i>Shadow DOM • 4 CSS Isolation Modes • Cross-MFE Events & Store • Zero Config</i>
-</p>
+**Wu Framework - Universal Microfrontends Made Simple**
+
+*Zero dependencies - 8 Frameworks - Shadow DOM - Proxy Sandbox - Self-Healing - Build Protection*