agentui-wc 0.1.52 → 0.1.56

package/AGENTS.md

@@ -448,7 +448,7 @@ AgentUI is optimized for AI Agents with deep introspection, runtime feedback, en
 A `custom-elements.json` manifest is included in the root. Agents can read this to understand:
 - Component Attributes (names, types, defaults)
 - Events and payloads
-- CSS Shadow Parts
+- CSS Custom Properties (theming)
 
 **2. Runtime Debugging (Agent Logger)**
 Components validate usage and log structured errors to `window.__MICROUI_ERRORS__`.
@@ -526,7 +526,7 @@ AgentUI.getErrors();                // All caught errors
 ```html
 <!-- === ERROR BOUNDARIES === -->
 <!-- Catch errors with fallback UI - one error doesn't crash everything -->
-<au-error-boundary fallback="<p>Something went wrong</p>">
+<au-error-boundary fallback="Something went wrong">
     <au-complex-widget></au-complex-widget>
 </au-error-boundary>
 
@@ -820,7 +820,7 @@ const current = Theme.get(); // 'dark' | 'light'
 **Why App Shell?**
 | Approach | Initial Load | Lighthouse | DX for Agents |
 |----------|--------------|------------|---------------|
-| Minimal (all-in-one) | ~59KB + content | 70-85 | Simple but suboptimal |
+| Minimal (all-in-one) | ~60KB + content | 70-85 | Simple but suboptimal |
 | **App Shell (lazy)** | ~20KB shell → routes lazy | **100/100** | Optimal performance |
 
 #### Architecture Overview
@@ -1316,7 +1316,7 @@ count.update(n => n + 1); // Update with function
 count.peek();           // Read without tracking
 ```
 
-### EventBus (CrossBus)
+### EventBus (LightBus)
 ```javascript
 import { bus } from 'agentui-wc';
 
@@ -1949,9 +1949,9 @@ element.innerHTML = `<span>${userName}</span>`; // XSS RISK!
 ## File Structure
 ```
 dist/
-├── agentui.esm.js       # Full ESM bundle (215 KB)
-├── agentui.min.js       # Full IIFE bundle (215 KB)
-├── agentui.css          # Combined CSS (64 KB)
+├── agentui.esm.js       # Full ESM bundle (174 KB)
+├── agentui.min.js       # Full IIFE bundle (175 KB)
+├── agentui.css          # Combined CSS (92 KB)
 ├── agentui.d.ts         # TypeScript definitions
 ├── routes/              # Route Bundles (Modern)
 │   ├── shell.js         # App Shell (Navbar, Theme, Bus) - 5 KB
@@ -2080,21 +2080,21 @@ For Modern performance, use the **App Shell** pattern. Load the critical shell f
 
 | Bundle | Content | Size (gzip) |
 |--------|---------|-------------|
-| `shell.js` | Navbar, Theme, CrossBus, Toasts | ~5 KB |
+| `shell.js` | Navbar, Theme, EventBus, Toasts | ~5 KB |
 | `home.js` | Landing page components | ~2 KB |
 | `forms.js` | (Example) Input, Button, Checkbox | ~7 KB |
 
 **Why this is Modern:** 
 - The user only downloads `shell.js` (small) to see the UI.
 - Page bundles (`home.js`) are only downloaded when navigating to that page.
-- Common code (CrossBus, BaseClass) is shared via `chunk-*.js` files automatically.
+- Common code (EventBus, BaseClass) is shared via `chunk-*.js` files automatically.
 
 ---
 
 ## Performance Metrics
-- **Bundle size:** 215 KB full / 8 KB route-based (gzipped: 75 KB / 3 KB)
+- **Bundle size:** 178 KB full / 8 KB route-based (gzipped: 61 KB / 3 KB)
 - **Lighthouse:** 100% Performance, 100% Accessibility, 100% SEO, 100% Best Practices
-- **EventBus:** 111M ops/sec (CrossBus emitSync)
+- **EventBus:** 111M ops/sec (LightBus emitSync)
 - **Virtual List:** Handles 10K+ items at 60fps
 - **First paint:** <100ms (precached assets)
 

package/README.md

@@ -17,8 +17,9 @@
   <a href="https://www.npmjs.com/package/agentui-wc"><img src="https://img.shields.io/npm/v/agentui-wc?color=6750A4" alt="npm version"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue" alt="License"></a>
   <img src="https://img.shields.io/badge/dependencies-0-brightgreen" alt="Zero Dependencies">
-  <img src="https://img.shields.io/badge/types-TypeScript-3178C6" alt="TypeScript">
-  <img src="https://img.shields.io/badge/web%20components-v1-E44D26" alt="Web Components">
+  <img src="https://img.shields.io/badge/60KB_gzipped-brightgreen" alt="Bundle Size">
+  <img src="https://img.shields.io/badge/Material_Design_3-6750A4?logo=materialdesign&logoColor=white" alt="MD3">
+  <a href="https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/"><img src="https://img.shields.io/badge/Lighthouse-100%2F100%2F100%2F100-brightgreen" alt="Lighthouse"></a>
   <a href="https://github.com/GiuseppeScottoLavina/AgentUI/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs Welcome"></a>
 </p>
 
@@ -67,6 +68,19 @@ AgentUI is built on four ideas:
 
 ---
 
+## Built Different
+
+| | AgentUI | Typical Framework |
+|---|---|---|
+| **Bundle** | 60KB gzipped (JS+CSS), all 50 components | Tree-shake to ~20KB, then add deps |
+| **Performance** | Lighthouse 100/100/100/100 ([verify](https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/)) | Varies |
+| **Dependencies** | Zero. Forever. | npm audit anxiety |
+| **Tests** | 1272 tests, 0 failures, isolated runner | Coverage varies |
+| **Memory** | Managed listeners (AbortController), zero leaks verified | Framework-dependent |
+| **Security** | Every component XSS-audited, CSP-compatible, no `eval()` | Trust your deps |
+| **Stability** | W3C Web Components — no migration treadmill | React 16→17→18→19... |
+| **Accessibility** | ARIA roles, 48px touch targets, keyboard navigation | Add-on library |
+
 ---
 
 ## Try It — Zero Setup
@@ -96,14 +110,32 @@ AgentUI is built on four ideas:
 AgentUI is in **alpha** (v0.1.x). Here's an honest look at where we are:
 
 ### What works today
-- 50 components (buttons, cards, inputs, modals, drawers, data tables, schema forms, virtual lists...)
-- Zero-build architecture (one `<script>` tag, no bundler needed)
-- Runtime component discovery (`describe()`, `discoverAll()`)
-- Lazy-loaded describe catalog — zero performance cost for end users
-- XSS-safe rendering with `escapeHTML` across all user-facing components
-- Agent-optimized documentation ([AGENTS.md](./AGENTS.md), [llms.txt](./llms.txt))
-- Real apps built with it: Kanban boards, multiplayer games, OS installers
-- 1272 tests (isolated runner), Lighthouse 100/100/100/100 on demo site
+
+**Components & Design**
+- 50 Material Design 3 components — buttons, cards, inputs, modals, drawers, data tables, schema forms, virtual lists, toasts, and more
+- Full MD3 token system with light/dark theming via CSS variables
+- ARIA roles, keyboard navigation, and 48px minimum touch targets
+
+**Performance**
+- 60KB total gzipped (48KB JS + 13KB CSS) — includes all 50 components
+- Route-based lazy loading with Speculation Rules API prefetching
+- Lighthouse 100/100/100/100 on demo site ([verify it yourself](https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/))
+- 500 component DOM instantiation in <8ms, 500 updates in <3ms
+
+**Engineering**
+- 1272 isolated tests, zero failures, across 75 test files
+- Every component XSS-audited — `escapeHTML()` on all user-facing content
+- Zero runtime dependencies — zero supply chain risk
+- Managed event listeners via AbortController — verified zero memory leaks
+- No `eval()`, no `document.write()`, CSP-compatible
+- Agent-optimized documentation ([AGENTS.md](./AGENTS.md), [llms.txt](./llms.txt), [component-schema.json](./component-schema.json))
+
+**Proven in Production**
+- Project management tools
+- Real-time multiplayer applications
+- Desktop system utilities (Electron)
+
+> 💡 **Long-term maintainability by design** — AgentUI is built on W3C Web Components, a browser standard — not a framework. There's no migration from v16 to v17. No breaking Hooks rewrite. No Composition API pivot. `querySelector` has worked the same since 1998 and will work the same in 2030. Zero dependencies means zero `npm audit` surprises, zero abandoned transitive packages, and zero "waiting for library X to support framework Y."
 
 ### What's missing (and we know it)
 - Larger community testing and feedback

package/dist/AGENTS.md

@@ -448,7 +448,7 @@ AgentUI is optimized for AI Agents with deep introspection, runtime feedback, en
 A `custom-elements.json` manifest is included in the root. Agents can read this to understand:
 - Component Attributes (names, types, defaults)
 - Events and payloads
-- CSS Shadow Parts
+- CSS Custom Properties (theming)
 
 **2. Runtime Debugging (Agent Logger)**
 Components validate usage and log structured errors to `window.__MICROUI_ERRORS__`.
@@ -526,7 +526,7 @@ AgentUI.getErrors();                // All caught errors
 ```html
 <!-- === ERROR BOUNDARIES === -->
 <!-- Catch errors with fallback UI - one error doesn't crash everything -->
-<au-error-boundary fallback="<p>Something went wrong</p>">
+<au-error-boundary fallback="Something went wrong">
     <au-complex-widget></au-complex-widget>
 </au-error-boundary>
 
@@ -820,7 +820,7 @@ const current = Theme.get(); // 'dark' | 'light'
 **Why App Shell?**
 | Approach | Initial Load | Lighthouse | DX for Agents |
 |----------|--------------|------------|---------------|
-| Minimal (all-in-one) | ~59KB + content | 70-85 | Simple but suboptimal |
+| Minimal (all-in-one) | ~60KB + content | 70-85 | Simple but suboptimal |
 | **App Shell (lazy)** | ~20KB shell → routes lazy | **100/100** | Optimal performance |
 
 #### Architecture Overview
@@ -1316,7 +1316,7 @@ count.update(n => n + 1); // Update with function
 count.peek();           // Read without tracking
 ```
 
-### EventBus (CrossBus)
+### EventBus (LightBus)
 ```javascript
 import { bus } from 'agentui-wc';
 
@@ -1949,9 +1949,9 @@ element.innerHTML = `<span>${userName}</span>`; // XSS RISK!
 ## File Structure
 ```
 dist/
-├── agentui.esm.js       # Full ESM bundle (215 KB)
-├── agentui.min.js       # Full IIFE bundle (215 KB)
-├── agentui.css          # Combined CSS (64 KB)
+├── agentui.esm.js       # Full ESM bundle (174 KB)
+├── agentui.min.js       # Full IIFE bundle (175 KB)
+├── agentui.css          # Combined CSS (92 KB)
 ├── agentui.d.ts         # TypeScript definitions
 ├── routes/              # Route Bundles (Modern)
 │   ├── shell.js         # App Shell (Navbar, Theme, Bus) - 5 KB
@@ -2080,21 +2080,21 @@ For Modern performance, use the **App Shell** pattern. Load the critical shell f
 
 | Bundle | Content | Size (gzip) |
 |--------|---------|-------------|
-| `shell.js` | Navbar, Theme, CrossBus, Toasts | ~5 KB |
+| `shell.js` | Navbar, Theme, EventBus, Toasts | ~5 KB |
 | `home.js` | Landing page components | ~2 KB |
 | `forms.js` | (Example) Input, Button, Checkbox | ~7 KB |
 
 **Why this is Modern:** 
 - The user only downloads `shell.js` (small) to see the UI.
 - Page bundles (`home.js`) are only downloaded when navigating to that page.
-- Common code (CrossBus, BaseClass) is shared via `chunk-*.js` files automatically.
+- Common code (EventBus, BaseClass) is shared via `chunk-*.js` files automatically.
 
 ---
 
 ## Performance Metrics
-- **Bundle size:** 215 KB full / 8 KB route-based (gzipped: 75 KB / 3 KB)
+- **Bundle size:** 178 KB full / 8 KB route-based (gzipped: 61 KB / 3 KB)
 - **Lighthouse:** 100% Performance, 100% Accessibility, 100% SEO, 100% Best Practices
-- **EventBus:** 111M ops/sec (CrossBus emitSync)
+- **EventBus:** 111M ops/sec (LightBus emitSync)
 - **Virtual List:** Handles 10K+ items at 60fps
 - **First paint:** <100ms (precached assets)
 

package/dist/README.md

@@ -17,8 +17,9 @@
   <a href="https://www.npmjs.com/package/agentui-wc"><img src="https://img.shields.io/npm/v/agentui-wc?color=6750A4" alt="npm version"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue" alt="License"></a>
   <img src="https://img.shields.io/badge/dependencies-0-brightgreen" alt="Zero Dependencies">
-  <img src="https://img.shields.io/badge/types-TypeScript-3178C6" alt="TypeScript">
-  <img src="https://img.shields.io/badge/web%20components-v1-E44D26" alt="Web Components">
+  <img src="https://img.shields.io/badge/60KB_gzipped-brightgreen" alt="Bundle Size">
+  <img src="https://img.shields.io/badge/Material_Design_3-6750A4?logo=materialdesign&logoColor=white" alt="MD3">
+  <a href="https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/"><img src="https://img.shields.io/badge/Lighthouse-100%2F100%2F100%2F100-brightgreen" alt="Lighthouse"></a>
   <a href="https://github.com/GiuseppeScottoLavina/AgentUI/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs Welcome"></a>
 </p>
 
@@ -67,6 +68,19 @@ AgentUI is built on four ideas:
 
 ---
 
+## Built Different
+
+| | AgentUI | Typical Framework |
+|---|---|---|
+| **Bundle** | 60KB gzipped (JS+CSS), all 50 components | Tree-shake to ~20KB, then add deps |
+| **Performance** | Lighthouse 100/100/100/100 ([verify](https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/)) | Varies |
+| **Dependencies** | Zero. Forever. | npm audit anxiety |
+| **Tests** | 1272 tests, 0 failures, isolated runner | Coverage varies |
+| **Memory** | Managed listeners (AbortController), zero leaks verified | Framework-dependent |
+| **Security** | Every component XSS-audited, CSP-compatible, no `eval()` | Trust your deps |
+| **Stability** | W3C Web Components — no migration treadmill | React 16→17→18→19... |
+| **Accessibility** | ARIA roles, 48px touch targets, keyboard navigation | Add-on library |
+
 ---
 
 ## Try It — Zero Setup
@@ -96,14 +110,32 @@ AgentUI is built on four ideas:
 AgentUI is in **alpha** (v0.1.x). Here's an honest look at where we are:
 
 ### What works today
-- 50 components (buttons, cards, inputs, modals, drawers, data tables, schema forms, virtual lists...)
-- Zero-build architecture (one `<script>` tag, no bundler needed)
-- Runtime component discovery (`describe()`, `discoverAll()`)
-- Lazy-loaded describe catalog — zero performance cost for end users
-- XSS-safe rendering with `escapeHTML` across all user-facing components
-- Agent-optimized documentation ([AGENTS.md](./AGENTS.md), [llms.txt](./llms.txt))
-- Real apps built with it: Kanban boards, multiplayer games, OS installers
-- 1272 tests (isolated runner), Lighthouse 100/100/100/100 on demo site
+
+**Components & Design**
+- 50 Material Design 3 components — buttons, cards, inputs, modals, drawers, data tables, schema forms, virtual lists, toasts, and more
+- Full MD3 token system with light/dark theming via CSS variables
+- ARIA roles, keyboard navigation, and 48px minimum touch targets
+
+**Performance**
+- 60KB total gzipped (48KB JS + 13KB CSS) — includes all 50 components
+- Route-based lazy loading with Speculation Rules API prefetching
+- Lighthouse 100/100/100/100 on demo site ([verify it yourself](https://pagespeed.web.dev/analysis?url=https://giuseppescottolavina.github.io/AgentUI/demo/))
+- 500 component DOM instantiation in <8ms, 500 updates in <3ms
+
+**Engineering**
+- 1272 isolated tests, zero failures, across 75 test files
+- Every component XSS-audited — `escapeHTML()` on all user-facing content
+- Zero runtime dependencies — zero supply chain risk
+- Managed event listeners via AbortController — verified zero memory leaks
+- No `eval()`, no `document.write()`, CSP-compatible
+- Agent-optimized documentation ([AGENTS.md](./AGENTS.md), [llms.txt](./llms.txt), [component-schema.json](./component-schema.json))
+
+**Proven in Production**
+- Project management tools
+- Real-time multiplayer applications
+- Desktop system utilities (Electron)
+
+> 💡 **Long-term maintainability by design** — AgentUI is built on W3C Web Components, a browser standard — not a framework. There's no migration from v16 to v17. No breaking Hooks rewrite. No Composition API pivot. `querySelector` has worked the same since 1998 and will work the same in 2030. Zero dependencies means zero `npm audit` surprises, zero abandoned transitive packages, and zero "waiting for library X to support framework Y."
 
 ### What's missing (and we know it)
 - Larger community testing and feedback