microui-wc 0.1.0 → 0.1.2

package/dist/AGENTS.md

@@ -2,53 +2,53 @@
 
 > **SOTA reference for AI coding assistants.** This document is optimized for LLMs generating microUI code.
 
-## 🚨 REGOLE INVIOLABILI
+## 🚨 MANDATORY RULES
 
 > [!CAUTION]
-> Queste regole NON POSSONO MAI essere violate. Qualsiasi codice che viola queste regole deve essere rifiutato.
+> These rules can NEVER be violated. Any code that violates these rules must be rejected.
 
 ### ❌ NO SHADOW DOM
 
-**microUI NON DEVE MAI usare Shadow DOM.** Tutti i componenti devono:
-- Usare Light DOM (il DOM normale)
-- Inserire gli elementi direttamente nel documento
-- Usare classi CSS con prefisso `mu-` per l'incapsulamento
-- Mai usare `this.attachShadow()` o `this.shadowRoot`
+**microUI must NEVER use Shadow DOM.** All components must:
+- Use Light DOM (normal DOM)
+- Insert elements directly into the document
+- Use CSS classes with `mu-` prefix for encapsulation
+- Never use `this.attachShadow()` or `this.shadowRoot`
 
 ```javascript
-// ❌ VIETATO - Non usare MAI
+// ❌ FORBIDDEN - Never use this
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = '...';
 
-// ✅ CORRETTO - Usa Light DOM
+// ✅ CORRECT - Usa Light DOM
 this.innerHTML = '...';
 this.classList.add('mu-component');
 ```
 
-### 🧪 TEST ISOLATION OBBLIGATORIA
+### 🧪 MANDATORY TEST ISOLATION
 
-**I test DEVONO essere eseguiti con `test-isolated.js`**, mai con `bun test` diretto.
+**Tests MUST be run with `test-isolated.js`**, never with `bun test` directly.
 
 ```bash
-# ❌ SBAGLIATO - Test falliscono per linkedom globalThis pollution
+# ❌ WRONG - Tests fail due to linkedom globalThis pollution
 bun test tests/components
 
-# ✅ CORRETTO - Ogni test in processo separato
+# ✅ CORRECT - Each test in separate process
 bun run scripts/test-isolated.js
 
-# ✅ CORRETTO - E2E tests
+# ✅ CORRECT - E2E tests
 bun run test:e2e
 ```
 
-**Perché?** linkedom (usato per simulare DOM in unit test) inquina `globalThis` e il registry dei custom elements. Quando i test vengono eseguiti in parallelo nello stesso processo, le registrazioni entrano in conflitto.
+**Why?** linkedom (used to simulate DOM in unit tests) pollutes `globalThis` and the custom elements registry. When tests are run in parallel in the same process, the registrations conflict.
 
 ---
 
 ## 🛠️ COMPONENT DEVELOPMENT GUIDELINES
 
-> **Linee guida obbligatorie per creare nuovi componenti microUI.** Seguire queste regole previene memory leak, crash e garantisce consistenza con il framework.
+> **Mandatory guidelines for creating new microUI components.** Following these rules prevents memory leaks, crashes, and ensures consistency with the framework.
 
-### 📋 Template Componente Completo
+### 📋 Complete Component Template
 
 ```javascript
 /**
@@ -59,7 +59,7 @@ bun run test:e2e
  */
 
 import { MuElement, define } from '../core/MuElement.js';
-import { escapeHTML } from '../core/utils.js';  // Per contenuti user-facing
+import { escapeHTML } from '../core/utils.js';  // For user-facing content
 
 export class MuExample extends MuElement {
     static get observedAttributes() {
@@ -75,17 +75,17 @@ export class MuExample extends MuElement {
     }
 
     // ========================
-    // LIFECYCLE (OBBLIGATORIO)
+    // LIFECYCLE (MANDATORY)
     // ========================
     
     connectedCallback() {
-        super.connectedCallback();  // ⚠️ OBBLIGATORIO - Inizializza AbortController
+        super.connectedCallback();  // ⚠️ MANDATORY - Initializes AbortController
         this.render();
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback();  // ⚠️ OBBLIGATORIO se usi timer/subscriptions
-        // Cleanup subscriptions manuali (es. breakpoints.subscribe)
+        super.disconnectedCallback();  // ⚠️ MANDATORY if using timer/subscriptions
+        // Cleanup manual subscriptions (e.g. breakpoints.subscribe)
     }
 
     attributeChangedCallback(name, oldVal, newVal) {
@@ -115,7 +115,7 @@ export class MuExample extends MuElement {
     // ========================
 
     render() {
-        // ✅ SEMPRE escapare contenuti user-facing
+        // ✅ ALWAYS escape user-facing content
         this.innerHTML = `
             <div class="mu-example">
                 <label>${escapeHTML(this.label)}</label>
@@ -137,7 +137,7 @@ export class MuExample extends MuElement {
     _attachEventListeners() {
         const input = this.querySelector('input');
         
-        // ✅ CORRETTO: Usa this.listen() per auto-cleanup
+        // ✅ CORRECT: Usa this.listen() per auto-cleanup
         this.listen(input, 'input', (e) => {
             this.dispatchEvent(new CustomEvent('mu-input', {
                 bubbles: true,
@@ -145,10 +145,10 @@ export class MuExample extends MuElement {
             }));
         });
 
-        // ✅ CORRETTO: this.listen() per eventi window/document
+        // ✅ CORRECT: this.listen() per eventi window/document
         this.listen(window, 'resize', () => this._handleResize());
         
-        // ✅ CORRETTO: Keyboard accessibility
+        // ✅ CORRECT: Keyboard accessibility
         if (!this.disabled) {
             this.setupActivation(() => this._handleClick());
         }
@@ -159,12 +159,12 @@ export class MuExample extends MuElement {
     // ========================
 
     _startPolling() {
-        // ✅ CORRETTO: Usa this.setInterval() per auto-cleanup
+        // ✅ CORRECT: Usa this.setInterval() per auto-cleanup
         this.setInterval(() => this._poll(), 5000);
     }
 
     _debounce() {
-        // ✅ CORRETTO: Usa this.setTimeout() per auto-cleanup
+        // ✅ CORRECT: Usa this.setTimeout() per auto-cleanup
         this.setTimeout(() => this._doSomething(), 300);
     }
 
@@ -174,7 +174,7 @@ export class MuExample extends MuElement {
 
     _validate() {
         if (!this.label) {
-            // ✅ Segnala errori per AI agent debugging
+            // ✅ Report errors for AI agent debugging
             this.logError('MISSING_LABEL', 'mu-example requires a label attribute');
         }
     }
@@ -186,76 +186,76 @@ if (!customElements.get('mu-example')) {
 }
 ```
 
-### ⚠️ ANTI-PATTERN: Cosa NON Fare Mai
+### ⚠️ ANTI-PATTERN: What NEVER to Do
 
 ```javascript
-// ❌ VIETATO: addEventListener diretto (memory leak)
+// ❌ FORBIDDEN: Direct addEventListener (memory leak)
 this.querySelector('button').addEventListener('click', handler);
 
-// ❌ VIETATO: setTimeout/setInterval raw (memory leak)
+// ❌ FORBIDDEN: setTimeout/setInterval raw (memory leak)
 setTimeout(() => this.update(), 1000);
 setInterval(() => this.poll(), 5000);
 
-// ❌ VIETATO: Nessun super.connectedCallback() (AbortController non inizializzato)
+// ❌ FORBIDDEN: No super.connectedCallback() (AbortController not initialized)
 connectedCallback() {
-    this.render();  // this.listen() non funzionerà!
+    this.render();  // this.listen() won't work!
 }
 
-// ❌ VIETATO: innerHTML senza escaping (XSS vulnerability)
+// ❌ FORBIDDEN: innerHTML without escaping (XSS vulnerability)
 this.innerHTML = `<div>${userInput}</div>`;
 
-// ❌ VIETATO: removeEventListener con arrow function (non funziona mai)
+// ❌ FORBIDDEN: removeEventListener with arrow function (never works)
 window.removeEventListener('resize', () => this.handleResize());
 
-// ❌ VIETATO: Temporal dead zone con setTimeout
+// ❌ FORBIDDEN: Temporal dead zone with setTimeout
 const id = setTimeout(() => { this._timers.delete(id); }, delay);
 
-// ❌ VIETATO: Shadow DOM
+// ❌ FORBIDDEN: Shadow DOM
 this.attachShadow({ mode: 'open' });
 
-// ❌ VIETATO: DOM Teleportation senza reset del flag listener (Bug Jan 2026)
-// Quando un componente sposta SE STESSO nel DOM (es. appendChild(this)),
-// disconnectedCallback aborta i listener ma il flag impedisce ri-registrazione
+// ❌ FORBIDDEN: DOM Teleportation without resetting listener flag (Bug Jan 2026)
+// When a component moves ITSELF in the DOM (e.g. appendChild(this)),
+// disconnectedCallback aborts listeners but the flag prevents re-registration
 connectedCallback() {
-    if (!this._listenerSetup) {  // ⚠️ Il flag resta true dopo disconnect!
+    if (!this._listenerSetup) {  // ⚠️ Flag stays true after disconnect!
         this._listenerSetup = true;
-        this.listen(this, 'click', handler);  // Perso dopo teleportation
+        this.listen(this, 'click', handler);  // Lost after teleportation
     }
 }
-// ✅ CORRETTO: Reset del flag in disconnectedCallback
+// ✅ CORRECT: Reset flag in disconnectedCallback
 disconnectedCallback() {
     super.disconnectedCallback();
-    this._listenerSetup = false;  // Permette ri-registrazione dopo move
+    this._listenerSetup = false;  // Allows re-registration after move
 }
 ```
 
-### ✅ PATTERN OBBLIGATORI
+### ✅ MANDATORY PATTERNS
 
-| Pattern | Metodo | Perché |
+| Pattern | Method | Why |
 |---------|--------|--------|
 | **Event Listeners** | `this.listen(target, type, handler)` | Auto-cleanup via AbortController |
-| **Timers** | `this.setTimeout()` / `this.setInterval()` | Auto-cleanup su disconnectedCallback |
-| **XSS Prevention** | `escapeHTML(userInput)` | Previene injection in innerHTML |
-| **Keyboard A11y** | `this.setupActivation(callback)` | Gestisce Enter/Space per elementi interattivi |
-| **AI Debugging** | `this.logError(code, message)` | Errori strutturati per AI agents |
-| **Lifecycle** | `super.connectedCallback()` | Inizializza AbortController per this.listen() |
-| **DOM Teleportation** | Reset flag in `disconnectedCallback()` | Previene listener orfani dopo move |
+| **Timers** | `this.setTimeout()` / `this.setInterval()` | Auto-cleanup on disconnectedCallback |
+| **XSS Prevention** | `escapeHTML(userInput)` | Prevents injection in innerHTML |
+| **Keyboard A11y** | `this.setupActivation(callback)` | Handles Enter/Space for interactive elements |
+| **AI Debugging** | `this.logError(code, message)` | Structured errors for AI agents |
+| **Lifecycle** | `super.connectedCallback()` | Initializes AbortController for this.listen() |
+| **DOM Teleportation** | Reset flag in `disconnectedCallback()` | Prevents orphan listeners after move |
 
 ### 🚀 SOTA Patterns (Feb 2026)
 
-Pattern moderni che dovrebbero essere usati per nuovi componenti e per migrazioni.
+Modern patterns that should be used for new components and migrations.
 
-#### ✅ Performance CSS (COMPLETATO - v3.5.28)
+#### ✅ Performance CSS (Implemented)
 
-Il framework applica **by default** le seguenti ottimizzazioni:
+The framework applies **by default** the following optimizations:
 
-| Tecnica | File | Beneficio |
+| Technique | File | Benefit |
 |---------|------|-----------|
-| `will-change` | animations.css | GPU compositor hints per 13+ classi animazione |
-| `CSS contain` | layout.css, components.css | Isola repaint scope per mu-layout, modals |
-| `content-visibility: auto` | components.css | Skip rendering off-screen per mu-example |
-| Speculation Rules API | shell.html | Prefetch route bundle predittivo |
-| View Transitions API | shell.html | Animazioni smooth tra pagine SPA |
+| `will-change` | animations.css | GPU compositor hints for 13+ animation classes |
+| `CSS contain` | layout.css, components.css | Isolates repaint scope for mu-layout, modals |
+| `content-visibility: auto` | components.css | Skip rendering off-screen for mu-example |
+| Speculation Rules API | shell.html | Predictive route bundle prefetch |
+| View Transitions API | shell.html | Smooth page transitions in SPA |
 
 **Lighthouse Score**: 98/100 Performance, 100/100 Accessibility/BP/SEO
 
@@ -276,37 +276,37 @@ mu-layout {
 }
 ```
 
-#### ✅ Native `<dialog>` per Modal (COMPLETATO)
-**mu-modal** usa ora `<dialog>` nativo con `showModal()`:
-- Top-layer automatico (niente z-index manuali)
-- Focus trap built-in
-- ESC key gestito nativamente
-- `::backdrop` per scrim animato
-- `margin: auto` per centrare
+#### ✅ Native `<dialog>` for Modal (COMPLETED)
+**mu-modal** now uses native `<dialog>` with `showModal()`:
+- Automatic top-layer (no manual z-index)
+- Built-in focus trap
+- Native ESC key handling
+- Animated `::backdrop` scrim
+- `margin: auto` for centering
 
 ```javascript
 // ✅ SOTA: Native dialog
 this.#dialog = document.createElement('dialog');
 this.#dialog.showModal();
 
-// ❌ VECCHIO: Position fixed + z-index + manual focus trap
+// ❌ OLD: Position fixed + z-index + manual focus trap
 this.style.cssText = 'position:fixed;z-index:9999;';
 document.body.appendChild(this);
 ```
 
-#### 🔜 Popover API (CANDIDATI)
-I seguenti componenti potrebbero beneficiare della **Popover API**:
+#### 🔜 Popover API (CANDIDATES)
+The following components could benefit from the **Popover API**:
 
-| Componente | Pattern Attuale | SOTA Migration |
+| Component | Current Pattern | SOTA Migration |
 |------------|----------------|----------------|
 | `mu-dropdown` | Portal container + z-index | `popover` attribute |
 | `mu-tooltip` | Position fixed + z-index | `popover` attribute |
 
-**Benefici Popover API**:
-- Light-dismiss automatico (click outside)
-- Top-layer (niente z-index issues)
+**Popover API Benefits**:
+- Automatic light-dismiss (click outside)
+- Top-layer (no z-index issues)
 - `showPopover()` / `hidePopover()` / `togglePopover()`
-- Keyboard accessibility built-in
+- Built-in keyboard accessibility
 
 ```html
 <!-- SOTA: Declarative popover -->
@@ -316,33 +316,33 @@ I seguenti componenti potrebbero beneficiare della **Popover API**:
 
 ### 🔒 Security Checklist
 
-Prima di completare un componente, verifica:
+Before completing a component, verify:
 
-- [ ] Tutti i contenuti user-facing usano `escapeHTML()`
-- [ ] Attributi interpolati in innerHTML sono escaped
-- [ ] Slot content controllato (developer-provided) o escaped
-- [ ] Nessun `eval()`, `Function()`, `document.write()`
+- [ ] All user-facing content uses `escapeHTML()`
+- [ ] Interpolated attributes in innerHTML are escaped
+- [ ] Slot content controlled (developer-provided) or escaped
+- [ ] No `eval()`, `Function()`, `document.write()`
 
 ### ♿ Accessibility Checklist
 
-- [ ] Elementi interattivi hanno `tabindex="0"`
-- [ ] Role ARIA appropriato (`role="button"`, `role="menuitem"`, etc.)
-- [ ] `setupActivation()` per attivazione via keyboard (Enter/Space)
-- [ ] `aria-label` o label associata per screen reader
-- [ ] Stati (`aria-checked`, `aria-expanded`, etc.) aggiornati dinamicamente
+- [ ] Interactive elements have `tabindex="0"`
+- [ ] Appropriate ARIA role (`role="button"`, `role="menuitem"`, etc.)
+- [ ] `setupActivation()` for keyboard activation (Enter/Space)
+- [ ] `aria-label` or associated label for screen readers
+- [ ] States (`aria-checked`, `aria-expanded`, etc.) dynamically updated
 
 ### 🧪 Testing Checklist
 
-- [ ] Unit test con `bun run scripts/test-isolated.js`
-- [ ] E2E test per interazioni browser reali
+- [ ] Unit test with `bun run scripts/test-isolated.js`
+- [ ] E2E test for real browser interactions
 - [ ] Coverage ≥97%
-- [ ] Test memory leak: componente aggiunto/rimosso dal DOM non lascia listener
+- [ ] Test memory leak: component added/removed from DOM leaves no listeners
 
 ---
 
 ## TL;DR - Copy-Paste Templates
 
-### Agent-First Features (v3.5)
+### Agent-First Features 
 microUI is optimized for AI Agents with deep introspection, runtime feedback, enterprise-scale infrastructure, and 2026 multimodal/MCP support.
 
 **1. Introspection (Metadata)**
@@ -359,7 +359,7 @@ const errors = await page.evaluate(() => window.__MICROUI_ERRORS__);
 if (errors.length > 0) console.error('microUI Errors:', errors);
 ```
 
-**3. Agent API (v3.3) - LLM-Friendly Component Access**
+**3. Agent API  - LLM-Friendly Component Access**
 Direct API for LLM agents to introspect and interact with components:
 
 ```javascript
@@ -385,7 +385,7 @@ const components = microUI.getRegisteredComponents();
 // Returns: Map<tag, constructor>
 ```
 
-**4. Enterprise-Scale Features (v3.4) - Large Application Infrastructure**
+**4. Enterprise-Scale Features  - Large Application Infrastructure**
 
 For building complex, multi-team applications:
 
@@ -437,7 +437,7 @@ microUI.getErrors();                // All caught errors
 </mu-error-boundary>
 ```
 
-**5. Agent Automation (v3.5) - 2026 Multimodal & MCP Support**
+**5. Agent Automation  - 2026 Multimodal & MCP Support**
 
 Based on UI-TARS, A2UI, and Anthropic MCP research (2025-2026):
 
@@ -726,7 +726,7 @@ microUI follows **Material Design 3 Window Size Classes** for adaptive layouts:
 
 ### Breakpoints API
 ```javascript
-import { breakpoints } from 'microui/core/breakpoints';
+import { breakpoints } from 'microui-wc/core/breakpoints';
 
 // Reactive subscriptions (for components that need to react to changes)
 const unsubscribe = breakpoints.subscribe((size) => {
@@ -789,7 +789,7 @@ class MyComponent extends MuElement {
 
 ### Signals (Reactive State)
 ```javascript
-import { signal, computed, effect } from 'microui';
+import { signal, computed, effect } from 'microui-wc';
 
 const count = signal(0, 'my-counter');  // name for debugging
 const doubled = computed(() => count() * 2);
@@ -805,7 +805,7 @@ count.peek();           // Read without tracking
 
 ### EventBus (CrossBus)
 ```javascript
-import { bus } from 'microui';
+import { bus } from 'microui-wc';
 
 // Subscribe
 const unsub = bus.on('my:event', (data) => console.log(data));
@@ -822,7 +822,7 @@ unsub();
 Centralized LIFO stack for handling ESC key in modal-like components. When multiple modals/dropdowns are open, ESC closes only the **topmost** one.
 
 ```javascript
-import { keyboard } from 'microui/core/keyboard';
+import { keyboard } from 'microui-wc/core/keyboard';
 
 class MuMyModal extends MuElement {
     #unsubEsc = null;
@@ -859,7 +859,7 @@ class MuMyModal extends MuElement {
 Centralized z-index constants to avoid magic numbers. Auto-injected as CSS custom properties.
 
 ```javascript
-import { Z_INDEX } from 'microui/core/layers';
+import { Z_INDEX } from 'microui-wc/core/layers';
 
 // Use in JavaScript
 this.style.zIndex = Z_INDEX.modal;
@@ -886,7 +886,7 @@ this.style.zIndex = Z_INDEX.modal;
 
 ### Confirm Dialog (Agent-Friendly)
 ```javascript
-import { muConfirm } from 'microui';
+import { muConfirm } from 'microui-wc';
 
 // Simple confirm - returns Promise<boolean>
 const ok = await muConfirm('Delete this item?');
@@ -934,7 +934,7 @@ fetcher.addEventListener('mu-success', (e) => {
 
 ### Form State Management
 ```javascript
-import { createFormState } from 'microui';
+import { createFormState } from 'microui-wc';
 
 const form = document.querySelector('mu-form');
 const state = createFormState(form, {
@@ -963,7 +963,7 @@ state.reset();                  // Reset to initial values
 
 ### Toast Notifications
 ```javascript
-import { showToast } from 'microui';
+import { showToast } from 'microui-wc';
 
 showToast('Operation successful', {
     variant: 'success',  // 'info' | 'success' | 'warning' | 'error'
@@ -973,7 +973,7 @@ showToast('Operation successful', {
 
 ### Theme Control
 ```javascript
-import { Theme } from 'microui';
+import { Theme } from 'microui-wc';
 
 Theme.init();           // Auto-detect or use saved
 Theme.set('dark');      // 'light' | 'dark' | 'system'
@@ -983,7 +983,7 @@ const current = Theme.get();
 
 ### View Transitions
 ```javascript
-import { transition } from 'microui';
+import { transition } from 'microui-wc';
 
 await transition(() => {
     document.querySelector('#content').innerHTML = newHTML;
@@ -1002,7 +1002,7 @@ await microUICache.clear();
 
 // Get cache status
 await microUICache.status();
-// Returns: { version: "2.0.18", caches: { "microui-precache-2.0.18": 5 } }
+// Returns: { version: "0.1.0", caches: { "microui-precache-2.0.18": 5 } }
 
 // Force check for updates
 await microUICache.update();
@@ -1269,7 +1269,7 @@ microUI provides centralized utilities for safe HTML rendering. **Always use the
 
 ```javascript
 // Import centralized utility
-import { escapeHTML } from 'microui';
+import { escapeHTML } from 'microui-wc';
 
 // ✅ SAFE: Escape user-provided content
 const userName = '<script>alert("xss")</script>';
@@ -1307,7 +1307,7 @@ dist/
 ├── microui.min.js       # Full IIFE bundle (231 KB)
 ├── microui.css          # Combined CSS (64 KB)
 ├── microui.d.ts         # TypeScript definitions
-├── routes/              # v3.5 Route Bundles (SOTA)
+├── routes/              # Route Bundles (SOTA)
 │   ├── shell.js         # App Shell (Navbar, Theme, Bus) - 5 KB
 │   ├── home.js          # Home route components
 │   ├── chunk-*.js       # Shared dependencies (deduplicated)
@@ -1318,7 +1318,7 @@ dist/
 
 ---
 
-## Automatic Bundle Dependencies (v3.5)
+## Automatic Bundle Dependencies 
 
 > **Build-time static analysis** detects which components each page uses.
 
@@ -1376,7 +1376,7 @@ const routes = componentsToRoutes(["mu-tabs", "mu-button"]);
 // [\"buttons\", \"tabs\"]
 ```
 
-### Auto-Versioning (v3.5.2)
+### Auto-Versioning
 
 The build script automatically increments the version cache buster in `demo/shell.html`:
 
@@ -1384,12 +1384,12 @@ The build script automatically increments the version cache buster in `demo/shel
 bun run build:framework
 # Output:
 #   🔄 Updating version cache buster...
-#   ✅ Version updated to 2.0.23
+#   ✅ Version updated
 ```
 
 **How it works:**
 - Extracts current version from `?v=X.X.X` pattern
-- Increments patch version (e.g., `2.0.21` → `2.0.22`)
+- Increments patch version (e.g., `0.1.0 → 0.1.1`)
 - Replaces all occurrences in demo/shell.html
 
 **Benefits:**
@@ -1400,7 +1400,7 @@ bun run build:framework
 
 ---
 
-## App Shell Architecture (v3.2)
+## App Shell Architecture 
 
 For SOTA performance, use the **App Shell** pattern. Load the critical shell first, then lazily load routes.
 
@@ -1562,7 +1562,7 @@ Add to `<head>` for faster loading:
 Use the View Transitions API for cinematic page changes:
 
 ```javascript
-import { transition, transitionNamed } from 'microui';
+import { transition, transitionNamed } from 'microui-wc';
 
 // Basic transition
 await transition(() => {
@@ -1720,7 +1720,7 @@ btn.render?.();
 
 ---
 
-## Page-Based App Development (v3.2)
+## Page-Based App Development 
 
 > **For AI Agents building apps with microUI.** This is the recommended architecture.
 
@@ -1905,7 +1905,7 @@ bun run build:framework
 ### Global Store Pattern
 ```javascript
 // store/index.js - Centralized reactive state
-import { signal, computed, effect } from 'microui';
+import { signal, computed, effect } from 'microui-wc';
 
 export const store = {
     // Core state
@@ -1952,7 +1952,7 @@ if (savedUser) store.user.set(JSON.parse(savedUser));
 ### Binding State to Components
 ```javascript
 import { store } from './store/index.js';
-import { effect } from 'microui';
+import { effect } from 'microui-wc';
 
 // Auto-update UI when state changes
 effect(() => {