microui-wc 0.1.0 → 0.1.1

package/demo/shell.html

@@ -28,7 +28,7 @@
     <!-- Preload critical resources -->
     <link rel="preload" as="image" type="image/webp" href="../assets/logo-banner-400.webp"
         imagesrcset="../assets/logo-banner-400.webp 1x, ../assets/logo-banner-800.webp 2x" fetchpriority="high">
-    <link rel="preload" as="style" href="../dist/microui.css?v=2.0.196">
+    <link rel="preload" as="style" href="../dist/microui.css?v=2.0.197">
     <!-- Self-hosted fonts: Preload Roboto only (icons now use inline SVG) -->
     <link rel="preload" href="../assets/fonts/roboto-400.woff2" as="font" type="font/woff2" crossorigin>
 
@@ -78,9 +78,9 @@
         /* Material Symbols font removed - icons use inline SVG now */
     </style>
     <!-- Async CSS loading: media=print prevents blocking, onload switches to all -->
-    <link rel="stylesheet" href="../dist/microui.css?v=2.0.196" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="../dist/microui.css?v=2.0.197" media="print" onload="this.media='all'">
     <noscript>
-        <link rel="stylesheet" href="../dist/microui.css?v=2.0.196">
+        <link rel="stylesheet" href="../dist/microui.css?v=2.0.197">
     </noscript>
     <style>
         /* Size-adjusted Arial fallback to match Roboto metrics (from Capsize) */
@@ -467,7 +467,7 @@
             if (loadedRoutes.has(name)) return;
             loadedRoutes.add(name);
             const start = performance.now();
-            await import('../dist/routes/' + name + '.js?v=2.0.196');
+            await import('../dist/routes/' + name + '.js?v=2.0.197');
             console.log('[Shell] Route ' + name + '.js loaded in ' + (performance.now() - start).toFixed(0) + 'ms');
         }
 

package/dist/AGENTS.md

@@ -5,42 +5,42 @@
 ## 🚨 REGOLE INVIOLABILI
 
 > [!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:
+**microUI must NEVER use Shadow DOM.** All components must:
 - 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`
 
 ```javascript
-// ❌ VIETATO - Non usare MAI
+// ❌ FORBIDDEN - Non usare MAI
 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
 
-**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` diretto.
 
 ```bash
 # ❌ SBAGLIATO - Test falliscono per 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` e il registry dei custom elements. When tests are run in parallel in the same process, the registrations conflict.
 
 ---
 
@@ -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);
     }
 
@@ -186,35 +186,35 @@ if (!customElements.get('mu-example')) {
 }
 ```
 
-### ⚠️ ANTI-PATTERN: Cosa NON Fare Mai
+### ⚠️ ANTI-PATTERN: What NEVER to Do
 
 ```javascript
-// ❌ VIETATO: addEventListener diretto (memory leak)
+// ❌ FORBIDDEN: addEventListener diretto (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: Nessun super.connectedCallback() (AbortController non inizializzato)
 connectedCallback() {
     this.render();  // this.listen() non funzionerà!
 }
 
-// ❌ VIETATO: innerHTML senza escaping (XSS vulnerability)
+// ❌ FORBIDDEN: innerHTML senza escaping (XSS vulnerability)
 this.innerHTML = `<div>${userInput}</div>`;
 
-// ❌ VIETATO: removeEventListener con arrow function (non funziona mai)
+// ❌ FORBIDDEN: removeEventListener con arrow function (non funziona mai)
 window.removeEventListener('resize', () => this.handleResize());
 
-// ❌ VIETATO: Temporal dead zone con setTimeout
+// ❌ FORBIDDEN: Temporal dead zone con 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)),
+// ❌ FORBIDDEN: DOM Teleportation senza reset del flag listener (Bug Jan 2026)
+// When a component moves ITSELF in the DOM (e.g. appendChild(this)),
 // disconnectedCallback aborta i listener ma il flag impedisce ri-registrazione
 connectedCallback() {
     if (!this._listenerSetup) {  // ⚠️ Il flag resta true dopo disconnect!
@@ -222,7 +222,7 @@ connectedCallback() {
         this.listen(this, 'click', handler);  // Perso dopo teleportation
     }
 }
-// ✅ CORRETTO: Reset del flag in disconnectedCallback
+// ✅ CORRECT: Reset del flag in disconnectedCallback
 disconnectedCallback() {
     super.disconnectedCallback();
     this._listenerSetup = false;  // Permette ri-registrazione dopo move
@@ -231,7 +231,7 @@ disconnectedCallback() {
 
 ### ✅ PATTERN OBBLIGATORI
 
-| 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 |
@@ -243,9 +243,9 @@ disconnectedCallback() {
 
 ### 🚀 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:
 
@@ -319,8 +319,8 @@ I seguenti componenti potrebbero beneficiare della **Popover API**:
 Prima di completare un componente, verifica:
 
 - [ ] Tutti i contenuti user-facing usano `escapeHTML()`
-- [ ] Attributi interpolati in innerHTML sono escaped
-- [ ] Slot content controllato (developer-provided) o escaped
+- [ ] Interpolated attributes in innerHTML are escaped
+- [ ] Slot content controlled (developer-provided) or escaped
 - [ ] Nessun `eval()`, `Function()`, `document.write()`
 
 ### ♿ Accessibility Checklist
@@ -342,7 +342,7 @@ Prima di completare un componente, verifica:
 
 ## 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(() => {

package/dist/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="demo/icons/icon-192x192.png" alt="microUI" width="80">
+  <img src="assets/logo-icon-64.webp" alt="microUI" width="80">
 </p>
 
 <h1 align="center">microUI</h1>
@@ -40,14 +40,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="https://unpkg.com/microui/dist/microui.css">
+    <link rel="stylesheet" href="https://unpkg.com/microui-wc/dist/microui.css">
 </head>
 <body>
     <mu-card variant="elevated">
         <h2>Hello microUI! 👋</h2>
         <mu-button variant="filled">Get Started</mu-button>
     </mu-card>
-    <script type="module" src="https://unpkg.com/microui/dist/microui.esm.js"></script>
+    <script type="module" src="https://unpkg.com/microui-wc/dist/microui.esm.js"></script>
 </body>
 </html>
 ```
@@ -127,13 +127,13 @@ microUI is the **only framework designed specifically for AI coding agents**:
 
 ```javascript
 // Agent SDK - Query components semantically
-import { findByLabel, findByRole } from 'microui/agent-api';
+import { findByLabel, findByRole } from 'microui-wc/agent-api';
 
 const submitBtn = findByLabel('Submit')[0];
 const allInputs = findByRole('textbox');
 
 // MCP Protocol support for multi-agent orchestration
-import { registerWithCrossBus } from 'microui';
+import { registerWithCrossBus } from 'microui-wc';
 ```
 
 **Features for AI:**
@@ -156,7 +156,7 @@ microUI follows **Material Design 3 Window Size Classes** for adaptive layouts:
 
 ```javascript
 // Import the centralized breakpoints utility
-import { breakpoints } from 'microui/core/breakpoints';
+import { breakpoints } from 'microui-wc/core/breakpoints';
 
 // Reactive subscriptions
 breakpoints.subscribe((size) => {
@@ -197,7 +197,7 @@ npm install microui
 bun add microui
 
 # CDN (no install)
-<script type="module" src="https://unpkg.com/microui"></script>
+<script type="module" src="https://unpkg.com/microui-wc/dist/microui.esm.js"></script>
 ```
 
 ---