wu-framework 1.1.7 → 1.1.9

package/README.md

@@ -1,1273 +1,408 @@
-# Wu Framework
+<p align="center">
+  <img src="https://wu-framework.dev/favicon.svg" width="80" alt="Wu Framework" />
+</p>
+
+<h1 align="center">Wu Framework</h1>
+
+<p align="center">
+  <strong>Universal microfrontends with built-in AI. Zero dependencies.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/wu-framework"><img src="https://img.shields.io/npm/v/wu-framework.svg?color=8b5cf6&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/wu-framework/wu-framework/actions"><img src="https://img.shields.io/github/actions/workflow/status/wu-framework/wu-framework/ci.yml?label=tests&color=10b981" alt="tests" /></a>
+  <img src="https://img.shields.io/badge/tests-650%20passed-10b981" alt="650 tests" />
+  <img src="https://img.shields.io/badge/dependencies-0-8b5cf6" alt="zero deps" />
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" /></a>
+</p>
+
+<p align="center">
+  <a href="https://wu-framework.dev">Documentation</a> &middot;
+  <a href="https://wu-framework.dev/docs/quick-start">Quick Start</a> &middot;
+  <a href="https://wu-framework.dev/docs/ai/overview">AI Integration</a> &middot;
+  <a href="#wucommerce--real-world-example">Live Example</a>
+</p>
 
-**Universal Microfrontends Made Simple**
-
-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** |
+Run **React, Vue, Angular, Svelte, Solid, Preact, Lit, and Vanilla JS** micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.
 
-## Instalacion
+Add AI to any app with one line. Connect your own LLM (OpenAI, Anthropic, Ollama) and your app gains context-aware tool calling, autonomous agents, and cross-app orchestration. **WebMCP ready** for Chrome 146+.
 
 ```bash
 npm install wu-framework
 ```
 
-Sin webpack config, sin plugins, sin configuracion adicional.
-
----
-
-## Frameworks Soportados
-
-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)` |
-
----
-
-## Quick Start
+## 30-Second Demo
 
-### 1. Micro App: Crear `wu.json`
-
-Cada microfrontend necesita un archivo `wu.json` en su raiz:
-
-```json
-{
-  "name": "header",
-  "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
+```js
+import { wu } from 'wu-framework';
 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';
+// Register micro-apps from different frameworks
+wuReact.register('cart', CartApp);
+wuVue.register('catalog', CatalogApp);
 
-wuAngular.register('content', AppModule);
-```
-
-El adapter se encarga de todo: deteccion de contexto, modo standalone, cleanup automatico.
+// Mount them — each gets its own Shadow DOM
+await wu.mount('cart', '#cart-container');
+await wu.mount('catalog', '#catalog-container');
 
-### 3. Shell (Host Application)
+// They talk to each other via events
+wu.emit('cart:item-added', { productId: 'SKU-42' });
+wu.on('catalog:product-selected', (e) => console.log(e.data));
 
-**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' }
-  ]
+// Add AI with one line — BYOL (Bring Your Own LLM)
+wu.ai.provider('openai', { endpoint: '/api/ai/chat', model: 'gpt-4o' });
+wu.ai.action('addToCart', {
+  description: 'Add a product to the shopping cart',
+  parameters: { productId: { type: 'string', required: true } },
+  handler: async (params) => wu.emit('cart:item-added', params),
 });
 
-await wu.mount('header', '#header-container');
-await wu.mount('sidebar', '#sidebar-container');
-await wu.mount('content', '#content-container');
+// Now the AI can control your app
+await wu.ai.send('Add product SKU-42 to the cart');
 ```
 
-**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' }
-  ]
-});
-```
+## Why Wu?
 
-### Estructura de Archivos (Microfrontend)
+| | **Wu Framework** | **single-spa** | **Module Federation** | **iframes** |
+|---|:---:|:---:|:---:|:---:|
+| Framework adapters | **8** | 4 | 1* | Any |
+| Shadow DOM isolation | Yes | No | No | Yes (heavy) |
+| Shared event bus | Built-in | Manual | Manual | postMessage |
+| Shared store | Built-in | Manual | Manual | No |
+| Standalone mode | Automatic | No | No | N/A |
+| AI integration | Built-in | No | No | No |
+| WebMCP (Chrome 146+) | Built-in | No | No | No |
+| MCP Server (dev tools) | Built-in | No | No | No |
+| Dependencies | **0** | 0 | Webpack 5 | N/A |
+| Bundle size (min) | ~174 KB | ~10 KB | Varies | N/A |
 
-```
-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
-```
+*Module Federation is Webpack-coupled; Wu is bundler-agnostic.
 
 ---
 
-## 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
-{
-  "name": "my-app",
-  "styleMode": "isolated"
-}
-```
-
-### 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
+## Features
 
-- 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
+### Core
 
-- 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
+- **8 Framework Adapters** — React, Vue, Angular, Svelte, Solid, Preact, Lit, Vanilla
+- **Shadow DOM Isolation** — CSS and DOM fully sandboxed per app
+- **3 Sandbox Strategies** — Shadow DOM, Proxy, iframe — choose per app
+- **3 CSS Isolation Modes** — `shared`, `isolated`, `fully-isolated` per app
+- **Event Bus** — Namespaced pub/sub with wildcards, replay, and middleware
+- **Shared Store** — Cross-app reactive state with dot-path notation and persistence
+- **Plugin System** — Extend Wu with lifecycle hooks
+- **Performance Monitor** — Mount time, memory, FPS tracking per app
+- **Error Boundaries** — Catch and recover from micro-app failures
+- **Keep-Alive** — Preserve app state when hiding/showing
+- **Prefetch** — Speculation Rules API with automatic fallback chain
+- **Cookie Overrides** — QA redirects individual apps to different URLs per-browser
+- **Standalone Mode** — Every micro-app works without a shell, zero lock-in
+
+### AI (BYOL — Bring Your Own LLM)
+
+- **4 Paradigms** — App→LLM, LLM→App, Autonomous Agent, Cross-App Orchestration
+- **Tool Calling** — Register actions the AI executes autonomously
+- **Streaming** — Async generator for real-time responses
+- **Multi-turn** — Namespaced conversations with history
+- **Reactive Triggers** — Events automatically invoke the AI
+- **Auto Context** — Store state, apps, events injected into the system prompt
+- **10 Browser Actions** — Screenshot, click, type, navigate, read console/network
+- **WebMCP** — `wu.ai.expose()` registers tools via `navigator.modelContext` (Chrome 146+)
+- **MCP Server** — Connect Claude Code, Cursor, or any MCP client to your live app
+- **4-Layer Security** — Permissions, rate limiting, circuit breaker, loop protection
+- **Workflows** — Reusable parameterized AI recipes
 
 ---
 
-## React Adapter
+## Quick Start
 
-### Registro Basico
+### 1. Register your micro-app
 
-```tsx
+```jsx
+// React
 import { wuReact } from 'wu-framework/adapters/react';
-import App from './App';
-
-wuReact.register('my-app', App);
-```
-
-### Con Opciones
-
-```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
+wuReact.register('orders', App);
 
-```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');
-
-  useEffect(() => {
-    const unsub = on('cart:updated', (data) => {
-      console.log('Cart updated:', data);
-    });
-    return unsub;
-  }, [on]);
-
-  return (
-    <button onClick={() => emit('user:logout')}>
-      Logout {state?.name}
-    </button>
-  );
-}
-```
-
-### Cargar Microfrontends en React (Shell)
-
-```tsx
-import React from 'react';
-import { createWuSlot } from 'wu-framework/adapters/react';
-
-const WuSlot = createWuSlot(React);
-
-const HEADER_URL = process.env.REACT_APP_HEADER_URL || 'http://localhost:3001';
-
-function Shell() {
-  return (
-    <div>
-      <WuSlot
-        name="header"
-        url={HEADER_URL}
-        onLoad={() => console.log('Header loaded!')}
-        onError={(err) => console.error(err)}
-      />
-    </div>
-  );
-}
-```
-
----
-
-## Vue Adapter
-
-### Registro Basico
-
-```ts
+// Vue
 import { wuVue } from 'wu-framework/adapters/vue';
-import App from './App.vue';
-
-wuVue.register('my-app', App);
-```
+wuVue.register('products', App);
 
-### 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);
-  }
-});
-```
-
-### 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');
-
-onMounted(() => {
-  on('user:login', (data) => console.log('Login:', data));
-});
-
-onUnmounted(() => cleanup());
-</script>
-
-<template>
-  <div>
-    <p>Items: {{ state?.items?.length }}</p>
-    <button @click="emit('cart:clear')">Clear Cart</button>
-  </div>
-</template>
-```
-
-### 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>
-  <div>
-    <WuSlot
-      name="header"
-      :url="headerUrl"
-      @load="onLoad"
-      @error="onError"
-    />
-  </div>
-</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
+// Angular (standalone)
 import { wuAngular } from 'wu-framework/adapters/angular';
-import { AppModule } from './app/app.module';
-
-wuAngular.register('my-app', AppModule);
-```
+wuAngular.registerStandalone('settings', AppComponent, { createApplication, createComponent });
 
-### 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');
-  }
-});
-```
-
-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
-
-### 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();
-
-  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();
-  }
-}
-```
-
----
-
-## Svelte Adapter
-
-### Registro Basico
-
-```js
+// Svelte 5
 import { wuSvelte } from 'wu-framework/adapters/svelte';
-import App from './App.svelte';
+wuSvelte.registerSvelte5('dashboard', App);
 
-wuSvelte.register('my-app', App);
+// Same pattern for Solid, Preact, Lit, Vanilla
 ```
 
-### Svelte 5 (con runes)
+### 2. Mount from the shell
 
 ```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);
-  });
+import { wu } from 'wu-framework';
 
-  onDestroy(cleanup);
-</script>
+await wu.init({
+  apps: [
+    { name: 'header',  url: 'http://localhost:3001' },
+    { name: 'sidebar', url: 'http://localhost:3002' },
+    { name: 'content', url: 'http://localhost:3003' },
+  ]
+});
 
-<p>Hello, {$userStore?.name}</p>
-<button on:click={() => emit('user:logout')}>Logout</button>
+await wu.mount('header',  '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
 ```
 
----
-
-## Preact Adapter
-
-### Registro Basico
+### 3. Cross-app communication
 
-```jsx
-import { wuPreact } from 'wu-framework/adapters/preact';
-import App from './App';
-
-wuPreact.register('my-app', App);
-```
-
-### Compatible con React (preact/compat)
+```js
+import { emit, on, getState, setState } from 'wu-framework';
 
-```jsx
-import { wuPreact } from 'wu-framework/adapters/preact';
-import App from './App';
+// Events
+emit('user:login', { userId: 123 });
+on('user:*', (event) => console.log(event.data));
 
-wuPreact.registerCompat('my-app', App);
+// Shared store
+setState('user.name', 'John');
+getState('user.name'); // 'John'
 ```
 
-### 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 });
+### 4. Add AI (optional)
 
-function MyComponent() {
-  const { emit, on } = useWuEvents();
-  const { state } = useWuStore('user');
+```js
+wu.ai.provider('ollama', {
+  endpoint: 'http://localhost:11434/api/chat',
+  model: 'llama3',
+});
 
-  return <div>Hello {state?.name}</div>;
-}
+const response = await wu.ai.send('What apps are mounted?');
 ```
 
 ---
 
-## Solid.js Adapter
-
-### Registro Basico
+## WuCommerce — Real-World Example
 
-```jsx
-import { wuSolid } from 'wu-framework/adapters/solid';
-import App from './App';
-
-wuSolid.register('my-app', App);
-```
+Wu ships with **WuCommerce**, a Shopify-like merchant dashboard where every section is a real micro-app built with a different framework.
 
-### Stores Reactivos
+| Micro-app | Framework | What it does |
+|-----------|-----------|-------------|
+| **Topbar** | Preact | Store name, nav tabs, search, notifications, theme toggle |
+| **Dashboard** | Svelte 5 | KPI cards, sparklines, recent orders, revenue chart |
+| **Orders** | React | Order table with filters, search, status badges |
+| **Products** | Vue 3 | Product catalog grid, stock badges, category filter |
+| **Customers** | Solid.js | Customer list, segment badges, click-to-filter-orders |
+| **Analytics** | Lit | Revenue bar chart, traffic donut, top products |
+| **Chat** | Vanilla JS | Floating chat widget with conversations and messages |
+| **Settings** | Angular 21 | Store config form, shipping zones, payment methods |
 
-```jsx
-import { createWuStore, createWuEvent } from 'wu-framework/adapters/solid';
-
-function MyComponent() {
-  const [user, setUser] = createWuStore('user');
-  const lastEvent = createWuEvent('notification:*');
-
-  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>
-  );
-}
-```
+All 8 apps communicate through Wu's event bus and shared store. Click a customer → orders filter. Toggle theme → all 8 apps update. Change store name in settings → topbar updates.
 
 ---
 
-## 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);
-```
+## 3 Sandbox Strategies
 
-### Con WuMixin
+| Mode | How it works | Tree shaking | Source maps | HMR | JS isolation |
+|------|-------------|:---:|:---:|:---:|:---:|
+| `module` (default) | `import()` + Proxy side-effect tracking | Yes | Yes | Yes | Side effects only |
+| `strict` | Hidden iframe + real `import()` | Yes | Yes | Yes | **Full** (separate window) |
+| `eval` | Fetch HTML → parse → `with(proxy){}` | No | No | No | **Full** (proxy traps) |
 
 ```js
-import { LitElement, html } from 'lit';
-import { WuMixin } from 'wu-framework/adapters/lit';
-
-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);
+await wu.init({
+  apps: [
+    { name: 'header',    url: '...', sandbox: 'module' },
+    { name: 'analytics', url: '...', sandbox: 'strict' },
+    { name: 'legacy',    url: '...', sandbox: 'eval' },
+  ]
+});
 ```
 
-### 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);
-```
+**Auto-cleaned on unmount:** timers, intervals, rAF, event listeners, localStorage keys, DOM mutations.
 
 ---
 
-## Vanilla JS Adapter
+## 3 CSS Isolation Modes
 
-### Registro con Objeto
+| Mode | What happens | When to use |
+|------|-------------|-------------|
+| `shared` | Host styles injected into Shadow DOM | Apps sharing a design system (Tailwind) |
+| `isolated` | Pure Shadow DOM — no external styles | Fully independent apps |
+| `fully-isolated` | Only the app's own styles | Apps that need their CSS but not global CSS |
 
-```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 = '';
-  }
-});
+```json
+{ "name": "my-app", "entry": "index.js", "styleMode": "isolated" }
 ```
 
-### 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);
-```
+## AI Paradigms
 
-### Registro con Template
+### 1. App → LLM → App
 
 ```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' } }
-);
+const response = await wu.ai.send('What items are in the cart?');
 ```
 
-### Componente Reactivo
+### 2. LLM → App → LLM (WebMCP)
 
 ```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);
+wu.ai.expose(); // Registers all tools via navigator.modelContext (Chrome 146+)
 ```
 
----
-
-## Event Bus
-
-Sistema de eventos para comunicacion entre microfrontends con soporte para wildcards y replay.
+### 3. Autonomous Agent
 
 ```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);
-});
+for await (const step of wu.ai.agent('Find the top customer and show their profile')) {
+  console.log(`Step ${step.step}: ${step.content}`);
+}
 ```
 
----
-
-## Store (State Management)
-
-Store de alto rendimiento con pattern matching.
+### 4. Cross-App Orchestration
 
 ```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': 'Jane',
-  'user.email': 'jane@example.com',
-  'settings.notifications': true
-});
-
-// Metricas de performance
-const metrics = getStoreMetrics();
+const result = await wu.ai.intent('Find customer Emma and refund order #4821');
+console.log(result.appsInvolved); // ['customers', 'orders']
 ```
 
 ---
 
-## Sistema de Plugins
+## Plugins & Hooks
 
 ```js
-import { usePlugin, createPlugin, uninstallPlugin } from 'wu-framework';
+import { usePlugin, createPlugin, useHook } from 'wu-framework';
 
-const analyticsPlugin = createPlugin({
+usePlugin(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
+  install: (api) => api.on('app:mounted', (e) => track(e)),
+  afterMount: async (ctx) => log('mounted in', ctx.mountTime, 'ms')
+}));
 
-```js
-import { useHook, createGuardHook, createTimedHook } from 'wu-framework';
-
-// Hook basico
 useHook('beforeMount', async (context, next) => {
-  console.log('Before mounting:', context.appName);
+  console.log('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 |
+Phases: `beforeInit` → `afterInit` → `beforeLoad` → `afterLoad` → `beforeMount` → `afterMount` → `beforeUnmount` → `afterUnmount`
 
 ---
 
-## Loading Strategies
+## Prefetch (Speculation Rules API)
 
 ```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' }
-  ]
-});
+wu.prefetch(['sidebar', 'analytics']);
+wu.prefetch(['sidebar'], { trigger: 'hover', action: 'prerender' });
+wu.prefetchAll();
 ```
 
-| 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 |
+Fallback chain: Speculation Rules API (Chrome 121+) → `<link rel="modulepreload">` → `<link rel="prefetch">`
 
 ---
 
-## Performance Monitoring
+## Cookie Overrides for QA
 
 ```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();
+wu.override('sidebar', 'http://localhost:5174');
+wu.getOverrides();   // { sidebar: 'http://localhost:5174' }
+wu.removeOverride('sidebar');
 ```
 
----
-
-## 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
-});
-```
+QA sets a cookie → only **their browser** sees the override. Everyone else sees production. 3-layer security: environment gate, domain allowlist, visual indicator.
 
 ---
 
-## 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
+## Project Stats
 
-const health = await header.verify();
-await header.destroy();
-```
+| Metric | Value |
+|---|---|
+| Source files | 79 |
+| Lines of code | 23,442 |
+| Test cases | **650** |
+| Framework adapters | 8 |
+| AI modules | 12 |
+| Core modules | 23 |
+| Runtime dependencies | **0** |
+| Bundle (ESM, minified) | ~174 KB |
 
 ---
 
-## Sistema de Build
-
-Wu Framework incluye un sistema de build completo para proteger el codigo.
-
-### Comandos Disponibles
+## Build
 
 ```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
+npm run build          # ESM + CJS + UMD + Dev
+npm run test           # 650 tests (Vitest)
+npm run test:coverage  # Coverage report
 ```
 
-### 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 |
+| Output | Format | Use |
+|--------|--------|-----|
+| `wu-framework.esm.js` | ES Module | Bundler imports |
+| `wu-framework.cjs.js` | CommonJS | Node.js require |
+| `wu-framework.umd.js` | UMD | CDN / script tag |
+| `wu-framework.dev.js` | ES Module | Development |
 
 ---
 
-## 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'
+## Architecture
+
+```
+┌───────────────────────────────────────────────────────────────────────┐
+│                       SHELL (any framework)                          │
+├──────────┬──────────┬──────────┬──────────┬──────────┬───────────────┤
+│ Shadow   │ Shadow   │ Shadow   │ Shadow   │ Shadow   │ Shadow   ...  │
+│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐    │
+│ │Topbar│ │ │Dashbd│ │ │Orders│ │ │Produc│ │ │Custo.│ │ │Analyt│    │
+│ │Preact│ │ │Svelte│ │ │React │ │ │Vue 3 │ │ │Solid │ │ │ Lit  │    │
+│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘    │
+├──────────┴──────────┴──────────┴──────────┴──────────┴───────────────┤
+│                       WU FRAMEWORK CORE                              │
+│  Sandbox (module/strict/eval) · EventBus (wildcards, replay)         │
+│  Store (dot-paths, batch) · StyleBridge (shared/isolated/fully-iso)  │
+│  Loader · Hooks · Plugins · Cache · Prefetch · Overrides             │
+├──────────────────────────────────────────────────────────────────────┤
+│                       WU AI (BYOL)                                   │
+│  Provider · Actions · Agent · Orchestrate · Triggers · Context       │
+│  Browser Actions · WebMCP · MCP Server · Workflows · Security        │
+└──────────────────────────────────────────────────────────────────────┘
 ```
 
 ---
 
-## Deployment
+## Documentation
 
-### 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/
-```
+Full documentation at **[wu-framework.dev](https://wu-framework.dev)**
 
-### 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";
-}
-```
-
-### Versionado
-
-```json
-{
-  "name": "header",
-  "version": "1.2.0",
-  "entry": "index.js"
-}
-```
-
-```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' }
-  ]
-});
-```
+- [Quick Start](https://wu-framework.dev/docs/quick-start) — Get running in 5 minutes
+- [Getting Started](https://wu-framework.dev/docs/getting-started) — Deeper tutorial with cross-app communication
+- [API Reference](https://wu-framework.dev/docs/core/api) — Full API docs
+- [Event Bus](https://wu-framework.dev/docs/core/event-bus) — Inter-app communication
+- [Shared Store](https://wu-framework.dev/docs/core/store) — Cross-app reactive state
+- [Sandbox](https://wu-framework.dev/docs/core/sandbox) — JS isolation strategies
+- [AI Overview](https://wu-framework.dev/docs/ai/overview) — 4 AI paradigms
+- [AI Actions](https://wu-framework.dev/docs/ai/actions) — Register tools for the LLM
+- [Browser Actions](https://wu-framework.dev/docs/ai/browser-actions) — 10 built-in browser tools
+- [MCP Server](https://wu-framework.dev/docs/ai/mcp-server) — Connect AI agents to live apps
+- [CSS Isolation](https://wu-framework.dev/docs/guides/css-isolation) — Shadow DOM style modes
+- [Deployment](https://wu-framework.dev/docs/guides/deployment) — Production deployment guide
 
 ---
 
-## Arquitectura
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                     HOST APPLICATION                         │
-├─────────────────────────────────────────────────────────────┤
-│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────┐  │
-│  │  #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   │ │ Plugins  │ │ Sandbox Pool   │  │
-│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
-│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
-│  │  Loader  │ │ Manifest │ │  Hooks   │ │ Style Bridge   │  │
-│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
-└─────────────────────────────────────────────────────────────┘
-```
+## Browser Support
 
----
-
-## API Reference
-
-### Core
-
-```js
-import { wu, init, mount, unmount, destroy, getStats } from 'wu-framework';
-```
-
-### Event Bus
-
-```js
-import { emit, on, once, off, replayEvents, getEventBusStats } from 'wu-framework';
-```
-
-### Store
-
-```js
-import { getState, setState, onStateChange, batchState, clearState } 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';
-```
-
-### Utilities
-
-```js
-import { presets, dev, events } from 'wu-framework';
-
-// Presets
-await wu.init(presets.development([{ name: 'app', port: 3001 }]));
-await wu.init(presets.production([{ name: 'app', url: 'https://...' }]));
-
-// Dev tools
-dev.enableDebug();
-dev.inspect();
-await dev.reload('app');
-
-// Silenciar logs
-wu.silence();
-wu.verbose();
-```
-
----
+Chrome 80+, Firefox 78+, Safari 14+, Edge 80+. Shadow DOM v1 required.
 
 ## 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
-
----
+Contributions welcome. Please open an issue first to discuss what you'd like to change.
 
 ## License
 
-MIT License - Copyright (c) 2025 Wu Framework Team
-
----
-
-**Wu Framework - Universal Microfrontends Made Simple**
+[MIT](./LICENSE) — Free for personal and commercial use.
 
-*Zero dependencies - 8 Frameworks - Shadow DOM - Proxy Sandbox - Self-Healing - Build Protection*
+See [LICENSE-COMMERCIAL.md](./LICENSE-COMMERCIAL.md) for optional enterprise support and consulting.