microui-wc 0.1.0

package/demo/content/datatables.html

@@ -0,0 +1,149 @@
+<div class="page active">
+    <h1 class="page-title">DataTable</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-datatable&gt;</code> is an AI-First smart data table with
+        built-in sorting, pagination, filtering, and row selection.
+    </p>
+
+    <mu-tabs active="0" id="datatable-doc-tabs" style="margin-bottom: 24px;">
+        <mu-tab>OVERVIEW</mu-tab>
+        <mu-tab>API</mu-tab>
+        <mu-tab>STYLING</mu-tab>
+        <mu-tab>EXAMPLES</mu-tab>
+    </mu-tabs>
+
+    <div id="datatable-overview" class="doc-tab-content">
+        <mu-example title="Sortable DataTable with pagination">
+            <div slot="demo">
+                <mu-datatable id="demo-datatable" columns='[
+                        {"field": "name", "label": "Name", "sortable": true},
+                        {"field": "email", "label": "Email"},
+                        {"field": "role", "label": "Role", "sortable": true}
+                    ]' page-size="5" sortable filterable>
+                </mu-datatable>
+            </div>
+            <div slot="code">&lt;mu-datatable
+                columns='[{"field":"name","label":"Name","sortable":true},...]'
+                page-size="5"
+                sortable
+                filterable&gt;
+                &lt;/mu-datatable&gt;
+
+                &lt;script&gt;
+                document.querySelector('mu-datatable').setData(usersArray);
+                &lt;/script&gt;</div>
+        </mu-example>
+
+        <script>
+            // Initialize DataTable demo data after content loads
+            setTimeout(() => {
+                const usersData = [
+                    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+                    { name: 'Jane Smith', email: 'jane@example.com', role: 'Editor' },
+                    { name: 'Bob Johnson', email: 'bob@example.com', role: 'Viewer' },
+                    { name: 'Alice Brown', email: 'alice@example.com', role: 'Admin' },
+                    { name: 'Charlie Wilson', email: 'charlie@example.com', role: 'Editor' },
+                    { name: 'Diana Ross', email: 'diana@example.com', role: 'Viewer' },
+                    { name: 'Edward King', email: 'edward@example.com', role: 'Editor' }
+                ];
+                const productsData = [
+                    { product: 'Widget Pro', price: '$99.00', stock: 42 },
+                    { product: 'Gadget Max', price: '$149.00', stock: 18 },
+                    { product: 'Tool Kit', price: '$79.00', stock: 56 },
+                    { product: 'Device X', price: '$199.00', stock: 7 }
+                ];
+                const dt1 = document.getElementById('demo-datatable');
+                const dt2 = document.getElementById('demo-datatable-selectable');
+                if (dt1 && typeof dt1.setData === 'function') dt1.setData(usersData);
+                if (dt2 && typeof dt2.setData === 'function') dt2.setData(productsData);
+            }, 100);
+        </script>
+
+        <div class="component-section">
+            <h2 class="section-title">Key Features</h2>
+            <mu-stack gap="sm">
+                <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                    <strong>Sorting:</strong> Click column headers to sort ascending/descending
+                </p>
+                <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                    <strong>Pagination:</strong> Automatic page navigation with configurable page size
+                </p>
+                <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                    <strong>Filtering:</strong> Real-time search across all columns
+                </p>
+                <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                    <strong>Selection:</strong> Checkbox selection with "select all" support
+                </p>
+            </mu-stack>
+        </div>
+    </div>
+
+    <div id="datatable-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Attributes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="columns" type="JSON string" default="[]">Array of column definitions with field,
+                    label, sortable</mu-api-row>
+                <mu-api-row name="page-size" type="number" default="10">Rows per page</mu-api-row>
+                <mu-api-row name="sortable" type="boolean" default="false">Enable column sorting</mu-api-row>
+                <mu-api-row name="filterable" type="boolean" default="false">Enable search filtering</mu-api-row>
+                <mu-api-row name="selectable" type="boolean" default="false">Enable row selection</mu-api-row>
+                <mu-api-row name="empty-message" type="string" default="'No data available'">Message when table is
+                    empty</mu-api-row>
+            </mu-api-table>
+        </div>
+        <div class="component-section">
+            <h2 class="section-title">Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="setData(array)" type="void">Set table data programmatically</mu-api-row>
+                <mu-api-row name="getData()" type="Array">Get current data</mu-api-row>
+                <mu-api-row name="sortBy(field, dir)" type="void">Sort by field ('asc' or 'desc')</mu-api-row>
+                <mu-api-row name="filter(query)" type="void">Filter data by search query</mu-api-row>
+                <mu-api-row name="goToPage(n)" type="void">Navigate to page n</mu-api-row>
+                <mu-api-row name="getSelectedRows()" type="Array">Get selected row objects</mu-api-row>
+                <mu-api-row name="getPageInfo()" type="Object">Get {page, pageSize, totalPages, totalRows}</mu-api-row>
+            </mu-api-table>
+        </div>
+        <div class="component-section">
+            <h2 class="section-title">Events</h2>
+            <mu-api-table type="events">
+                <mu-api-row name="mu-sort-change" type="CustomEvent">Fired when sort state changes</mu-api-row>
+                <mu-api-row name="mu-page-change" type="CustomEvent">Fired when page changes</mu-api-row>
+                <mu-api-row name="mu-selection-change" type="CustomEvent">Fired when selection changes</mu-api-row>
+                <mu-api-row name="mu-data-change" type="CustomEvent">Fired when data is set</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="datatable-styling" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">CSS Classes</h2>
+            <mu-api-table type="tokens">
+                <mu-api-row name=".mu-datatable-wrapper" default="">Main container</mu-api-row>
+                <mu-api-row name=".mu-datatable-table" default="">Table element</mu-api-row>
+                <mu-api-row name=".mu-datatable-sortable" default="">Sortable header cell</mu-api-row>
+                <mu-api-row name=".mu-datatable-sorted" default="">Currently sorted column</mu-api-row>
+                <mu-api-row name=".mu-datatable-selected" default="">Selected row</mu-api-row>
+                <mu-api-row name=".mu-datatable-pagination" default="">Pagination container</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="datatable-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="With row selection">
+            <div slot="demo">
+                <mu-datatable id="demo-datatable-selectable" columns='[
+                        {"field": "product", "label": "Product"},
+                        {"field": "price", "label": "Price", "sortable": true},
+                        {"field": "stock", "label": "Stock", "sortable": true}
+                    ]' page-size="3" sortable selectable>
+                </mu-datatable>
+            </div>
+            <div slot="code">&lt;mu-datatable
+                columns='[...]'
+                sortable
+                selectable&gt;
+                &lt;/mu-datatable&gt;</div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/dividers.html

@@ -0,0 +1,119 @@
+<div class="page active">
+    <h1 class="page-title">Divider</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-divider&gt;</code> is a thin line that separates content into clear groups.
+        Supports horizontal and vertical orientations.
+    </p>
+
+    <mu-tabs active="0" id="divider-doc-tabs" style="margin-bottom: 24px;">
+        <mu-tab>OVERVIEW</mu-tab>
+        <mu-tab>API</mu-tab>
+        <mu-tab>STYLING</mu-tab>
+        <mu-tab>EXAMPLES</mu-tab>
+    </mu-tabs>
+
+    <div id="divider-overview" class="doc-tab-content">
+        <!-- Horizontal divider in list context -->
+        <mu-example title="List with dividers">
+            <div slot="demo">
+                <mu-card variant="outlined" style="max-width: 320px;">
+                    <mu-stack gap="0">
+                        <mu-stack direction="row" gap="md" align="center" style="padding: 12px 16px;">
+                            <mu-icon name="person" style="color: var(--md-sys-color-primary);"></mu-icon>
+                            <span>John Doe</span>
+                        </mu-stack>
+                        <mu-divider inset></mu-divider>
+                        <mu-stack direction="row" gap="md" align="center" style="padding: 12px 16px;">
+                            <mu-icon name="person" style="color: var(--md-sys-color-primary);"></mu-icon>
+                            <span>Jane Smith</span>
+                        </mu-stack>
+                        <mu-divider inset></mu-divider>
+                        <mu-stack direction="row" gap="md" align="center" style="padding: 12px 16px;">
+                            <mu-icon name="person" style="color: var(--md-sys-color-primary);"></mu-icon>
+                            <span>Bob Wilson</span>
+                        </mu-stack>
+                    </mu-stack>
+                </mu-card>
+            </div>
+            <div slot="code">&lt;mu-stack gap="0"&gt;
+                &lt;div&gt;Item 1&lt;/div&gt;
+                &lt;mu-divider inset&gt;&lt;/mu-divider&gt;
+                &lt;div&gt;Item 2&lt;/div&gt;
+                &lt;/mu-stack&gt;</div>
+        </mu-example>
+
+        <!-- Vertical divider in toolbar -->
+        <mu-example title="Toolbar with vertical divider">
+            <div slot="demo">
+                <mu-card variant="filled" style="display: inline-block; padding: 12px 16px;">
+                    <mu-stack direction="row" gap="lg" align="center">
+                        <mu-stack direction="row" gap="sm" align="center">
+                            <mu-icon name="edit" style="cursor: pointer;"></mu-icon>
+                            <mu-icon name="delete" style="cursor: pointer;"></mu-icon>
+                        </mu-stack>
+                        <mu-divider vertical></mu-divider>
+                        <mu-icon name="settings" style="cursor: pointer;"></mu-icon>
+                    </mu-stack>
+                </mu-card>
+            </div>
+            <div slot="code">&lt;mu-stack direction="row" align="center"&gt;
+                &lt;mu-icon name="edit"&gt;&lt;/mu-icon&gt;
+                &lt;mu-icon name="delete"&gt;&lt;/mu-icon&gt;
+                &lt;mu-divider vertical&gt;&lt;/mu-divider&gt;
+                &lt;mu-icon name="settings"&gt;&lt;/mu-icon&gt;
+                &lt;/mu-stack&gt;</div>
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">When to use</h2>
+            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                Use dividers to separate content into logical groups. They're ideal for lists,
+                toolbars, and card sections. Add the <code>inset</code> attribute when dividing
+                items with leading icons to align with the content.
+            </p>
+        </div>
+    </div>
+
+    <div id="divider-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Attributes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="vertical" type="boolean" default="false">Renders as vertical divider</mu-api-row>
+                <mu-api-row name="inset" type="boolean" default="false">Adds padding on sides</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="divider-styling" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">CSS Custom Properties</h2>
+            <mu-api-table type="tokens">
+                <mu-api-row name="--md-sys-color-outline-variant" default="#cac4d0">Divider color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="divider-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Inset divider">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <p>Content above</p>
+                    <mu-divider inset></mu-divider>
+                    <p>Content below with inset</p>
+                </mu-stack>
+            </div>
+            <div slot="code">&lt;mu-divider inset&gt;&lt;/mu-divider&gt;</div>
+        </mu-example>
+
+        <mu-example title="Vertical divider">
+            <div slot="demo">
+                <mu-stack direction="row" gap="md" align="center" style="height: 50px;">
+                    <span>Left</span>
+                    <mu-divider vertical></mu-divider>
+                    <span>Right</span>
+                </mu-stack>
+            </div>
+            <div slot="code">&lt;mu-divider vertical&gt;&lt;/mu-divider&gt;</div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/dropdowns.html

@@ -0,0 +1,89 @@
+<!-- Dropdowns Content Fragment -->
+<div id="page-dropdowns" class="page active">
+    <h1 class="page-title">Select / Dropdown</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-dropdown&gt;</code> allows users to choose from a predefined list of options.
+        Similar to a native select, with MD3 styling and animations.
+    </p>
+
+    <mu-tabs active="0" id="dropdown-doc-tabs" style="margin-bottom: 24px;">
+        <mu-tab>OVERVIEW</mu-tab>
+        <mu-tab>API</mu-tab>
+        <mu-tab>STYLING</mu-tab>
+        <mu-tab>EXAMPLES</mu-tab>
+    </mu-tabs>
+
+    <div id="dropdown-overview" class="doc-tab-content">
+        <mu-example title="Basic dropdown">
+            <div slot="demo">
+                <mu-dropdown placeholder="Select a fruit">
+                    <mu-option value="apple">Apple</mu-option>
+                    <mu-option value="banana">Banana</mu-option>
+                    <mu-option value="cherry">Cherry</mu-option>
+                </mu-dropdown>
+            </div>
+
+        </mu-example>
+
+        <div class="component-section"
+            style="background: var(--md-sys-color-primary-container); border-left: 4px solid var(--md-sys-color-primary);">
+            <h2 class="section-title" style="color: var(--md-sys-color-on-primary-container);">Accessibility
+            </h2>
+            <p style="color: var(--md-sys-color-on-primary-container); line-height: 1.6;">
+                Uses <code>role="listbox"</code> with arrow key navigation.
+                Options have <code>role="option"</code> with proper aria-selected states.
+            </p>
+        </div>
+    </div>
+
+    <div id="dropdown-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Attributes (mu-dropdown)</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="placeholder" type="string" default="">Placeholder text when no
+                    selection</mu-api-row>
+                <mu-api-row name="value" type="string" default="">Currently selected value</mu-api-row>
+                <mu-api-row name="disabled" type="boolean" default="false">Whether dropdown is
+                    disabled</mu-api-row>
+            </mu-api-table>
+        </div>
+        <div class="component-section">
+            <h2 class="section-title">Attributes (mu-option)</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="value" type="string" default="">Option value</mu-api-row>
+            </mu-api-table>
+        </div>
+        <div class="component-section">
+            <h2 class="section-title">Events</h2>
+            <mu-api-table type="events">
+                <mu-api-row name="mu-change" detail="{ value: string, label: string }">Emitted when
+                    selection changes</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="dropdown-styling" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">CSS Custom Properties</h2>
+            <mu-api-table type="tokens">
+                <mu-api-row name="--md-sys-color-surface-container" default="#f3edf7">Dropdown
+                    background</mu-api-row>
+                <mu-api-row name="--md-sys-color-primary" default="#6750a4">Focus/selected
+                    color</mu-api-row>
+                <mu-api-row name="--md-sys-color-outline" default="#79747e">Border color</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="dropdown-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="With preselected value">
+            <div slot="demo">
+                <mu-dropdown value="medium" placeholder="Size">
+                    <mu-option value="small">Small</mu-option>
+                    <mu-option value="medium">Medium</mu-option>
+                    <mu-option value="large">Large</mu-option>
+                </mu-dropdown>
+            </div>
+        </mu-example>
+    </div>
+</div>

package/demo/content/enterprise.html

@@ -0,0 +1,252 @@
+<!-- Enterprise Features Content Fragment -->
+<div id="page-enterprise" class="page active">
+    <h1 class="page-title">Enterprise Features</h1>
+    <p class="page-subtitle">
+        Infrastructure for building large-scale, multi-team applications with microUI.
+    </p>
+
+    <!-- Documentation Tabs -->
+    <mu-tabs active="0" id="enterprise-doc-tabs" style="margin-bottom: 24px;">
+        <mu-tab>OVERVIEW</mu-tab>
+        <mu-tab>API</mu-tab>
+        <mu-tab>EXAMPLES</mu-tab>
+    </mu-tabs>
+
+    <!-- OVERVIEW Tab Content -->
+    <div id="enterprise-overview" class="doc-tab-content">
+        <div class="component-section"
+            style="background: linear-gradient(135deg, var(--md-sys-color-tertiary-container), var(--md-sys-color-secondary-container));">
+            <h2 class="section-title" style="color: var(--md-sys-color-on-tertiary-container);">🏗️ Built for Scale</h2>
+            <mu-grid cols="2" gap="md" style="max-width: 800px;">
+                <mu-card variant="elevated">
+                    <mu-stack direction="row" gap="sm" align="center">
+                        <mu-icon name="folder_managed"
+                            style="font-size: 32px; color: var(--md-sys-color-primary);"></mu-icon>
+                        <div>
+                            <strong>Namespaced Stores</strong>
+                            <p
+                                style="font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 4px 0 0 0;">
+                                Isolated state per feature/team</p>
+                        </div>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="elevated">
+                    <mu-stack direction="row" gap="sm" align="center">
+                        <mu-icon name="shield" style="font-size: 32px; color: var(--md-sys-color-primary);"></mu-icon>
+                        <div>
+                            <strong>Error Boundaries</strong>
+                            <p
+                                style="font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 4px 0 0 0;">
+                                Graceful degradation</p>
+                        </div>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="elevated">
+                    <mu-stack direction="row" gap="sm" align="center">
+                        <mu-icon name="apps" style="font-size: 32px; color: var(--md-sys-color-primary);"></mu-icon>
+                        <div>
+                            <strong>Feature Registry</strong>
+                            <p
+                                style="font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 4px 0 0 0;">
+                                Multi-team organization</p>
+                        </div>
+                    </mu-stack>
+                </mu-card>
+                <mu-card variant="elevated">
+                    <mu-stack direction="row" gap="sm" align="center">
+                        <mu-icon name="monitoring"
+                            style="font-size: 32px; color: var(--md-sys-color-primary);"></mu-icon>
+                        <div>
+                            <strong>Observability</strong>
+                            <p
+                                style="font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 4px 0 0 0;">
+                                State history & debugging</p>
+                        </div>
+                    </mu-stack>
+                </mu-card>
+            </mu-grid>
+        </div>
+
+        <div class="component-section"
+            style="background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(124, 77, 255, 0.1)); border: 2px solid rgba(0, 188, 212, 0.3);">
+            <h2 class="section-title" style="display: flex; align-items: center; gap: 12px;">
+                <mu-icon name="smart_toy" style="font-size: 28px;"></mu-icon>
+                Agent Automation (v0.1.0)
+            </h2>
+            <p style="margin-bottom: 16px; color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                2026 features for multimodal AI agents: Visual Markers for screenshot parsing,
+                Component Schema for type-safe code gen, and MCP Actions for standard protocols.
+            </p>
+            <mu-stack direction="row" gap="sm" style="flex-wrap: wrap;">
+                <mu-chip variant="outlined">📸 Visual Markers</mu-chip>
+                <mu-chip variant="outlined">📋 Component Schema</mu-chip>
+                <mu-chip variant="outlined">📜 MCP Actions</mu-chip>
+            </mu-stack>
+        </div>
+
+        <div class="component-section"
+            style="background: var(--md-sys-color-primary-container); border-left: 4px solid var(--md-sys-color-primary);">
+            <h2 class="section-title" style="color: var(--md-sys-color-on-primary-container);">When to Use</h2>
+            <p style="color: var(--md-sys-color-on-primary-container); line-height: 1.6;">
+                Enterprise features are designed for <strong>large-scale applications</strong> with multiple teams.
+                Use namespaced stores to avoid state conflicts, error boundaries to prevent cascading failures,
+                and the feature registry to organize code by domain.
+            </p>
+        </div>
+    </div>
+
+    <!-- API Tab Content -->
+    <div id="enterprise-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Store Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="createNamespacedStore(name, initial)" type="function" returns="Store">
+                    Creates an isolated store with the given namespace and initial state
+                </mu-api-row>
+                <mu-api-row name="getStore(name)" type="function" returns="Store | undefined">
+                    Retrieves a store by its namespace name
+                </mu-api-row>
+                <mu-api-row name="getAllStores()" type="function" returns="Record&lt;string, Store&gt;">
+                    Returns all registered namespaced stores
+                </mu-api-row>
+                <mu-api-row name="captureAppState()" type="function" returns="object">
+                    Serializes all store states for debugging or persistence
+                </mu-api-row>
+                <mu-api-row name="restoreAppState(snapshot)" type="function" returns="void">
+                    Restores all stores from a previously captured snapshot
+                </mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Observability Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="enableObservability()" type="function" returns="void">
+                    Starts tracking state changes for all stores
+                </mu-api-row>
+                <mu-api-row name="disableObservability()" type="function" returns="void">
+                    Stops tracking state changes
+                </mu-api-row>
+                <mu-api-row name="getStateHistory(namespace)" type="function" returns="Array&lt;{timestamp, state}&gt;">
+                    Returns the change history for a specific store
+                </mu-api-row>
+                <mu-api-row name="getErrors()" type="function" returns="Array&lt;Error&gt;">
+                    Returns all errors caught by error boundaries
+                </mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Feature Registry Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="createFeature(name, config)" type="function" returns="Feature">
+                    Registers a feature with routes, store, and components
+                </mu-api-row>
+                <mu-api-row name="getFeatures()" type="function" returns="Record&lt;string, Feature&gt;">
+                    Returns all registered features
+                </mu-api-row>
+                <mu-api-row name="getFeatureSummary()" type="function" returns="object">
+                    Returns an overview with stats for all features
+                </mu-api-row>
+                <mu-api-row name="getFeatureComponents(name)" type="function" returns="string[]">
+                    Returns component names registered to a feature
+                </mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Agent Automation Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="enableVisualMarkers(options)" type="function" returns="void">
+                    Adds visual markers (badges) to interactive elements for AI parsing
+                </mu-api-row>
+                <mu-api-row name="getMarkerElement(id)" type="function" returns="HTMLElement">
+                    Returns the element associated with a marker ID (e.g., 'B1')
+                </mu-api-row>
+                <mu-api-row name="getMarkerMap()" type="function" returns="Record&lt;string, MarkerInfo&gt;">
+                    Returns all marker-to-element mappings
+                </mu-api-row>
+                <mu-api-row name="getComponentSchema(tagName)" type="function" returns="JSONSchema">
+                    Returns the JSON schema for a component's properties and actions
+                </mu-api-row>
+                <mu-api-row name="getMCPActions()" type="function" returns="MCPAction[]">
+                    Returns standardized MCP actions for the current page
+                </mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <!-- EXAMPLES Tab Content -->
+    <div id="enterprise-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Namespaced Store Demo">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-stack direction="row" gap="md">
+                        <mu-button variant="filled" id="demo-create-store">Create Stores</mu-button>
+                        <mu-button variant="outlined" id="demo-capture-state">Capture State</mu-button>
+                        <mu-button variant="text" id="demo-clear-stores">Clear</mu-button>
+                    </mu-stack>
+                    <mu-card variant="outlined" id="store-demo-output"
+                        style="display: none; font-family: var(--md-sys-typescale-body-medium-font); padding: 16px; max-height: 200px; overflow: auto;">
+                    </mu-card>
+                </mu-stack>
+            </div>
+            <div slot="code">// Create isolated stores for each feature
+                const userStore = microUI.createNamespacedStore('user', {
+                profile: { name: 'Demo User' },
+                preferences: { theme: 'dark' }
+                });
+
+                const cartStore = microUI.createNamespacedStore('cart', {
+                items: ['Item A', 'Item B'],
+                total: 29.99
+                });
+
+                // Capture entire app state
+                const snapshot = microUI.captureAppState();</div>
+        </mu-example>
+
+        <mu-example title="Visual Markers for AI Agents">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-stack direction="row" gap="md" style="flex-wrap: wrap;">
+                        <mu-button variant="tonal" id="demo-visual-markers">📸 Enable Markers</mu-button>
+                        <mu-button variant="outlined" id="demo-get-schema">📋 Get Schema</mu-button>
+                        <mu-button variant="outlined" id="demo-mcp-actions">📜 MCP Actions</mu-button>
+                    </mu-stack>
+                    <mu-card variant="outlined" id="agent-demo-output"
+                        style="display: none; font-family: var(--md-sys-typescale-body-medium-font); padding: 16px; max-height: 200px; overflow: auto;">
+                    </mu-card>
+                </mu-stack>
+            </div>
+            <div slot="code">// Enable visual markers for screenshot-based agents
+                microUI.enableVisualMarkers({ style: 'badge' });
+                // Agent sees: [B1] Save, [B2] Cancel, [I1] Email
+
+                // Reference elements by marker ID
+                microUI.getMarkerElement('B1').click();
+
+                // Get component schema for code generation
+                microUI.getComponentSchema('mu-button');
+                // { properties: { variant: { enum: [...] } }, actions: ['click'] }</div>
+        </mu-example>
+
+        <mu-example title="Error Boundary">
+            <div slot="demo">
+                <mu-error-boundary
+                    fallback="<mu-alert severity='error'><strong>Error caught!</strong> The widget crashed but the app continues.</mu-alert>"
+                    id="demo-error-boundary">
+                    <mu-card variant="outlined" id="error-prone-card">
+                        <mu-stack direction="row" gap="md" align="center">
+                            <mu-icon name="verified" style="color: var(--md-sys-color-primary);"></mu-icon>
+                            <span>This component is protected by an error boundary</span>
+                        </mu-stack>
+                    </mu-card>
+                </mu-error-boundary>
+            </div>
+            <div slot="code">&lt;mu-error-boundary fallback="&lt;p&gt;Something went wrong&lt;/p&gt;"&gt;
+                &lt;mu-complex-widget&gt;&lt;/mu-complex-widget&gt;
+                &lt;/mu-error-boundary&gt;</div>
+        </mu-example>
+    </div>
+</div>