microui-wc 0.1.1 → 0.1.2

package/demo/content/datatables.html

@@ -1,149 +0,0 @@
-<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

@@ -1,119 +0,0 @@
-<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

@@ -1,89 +0,0 @@
-<!-- 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

@@ -1,252 +0,0 @@
-<!-- 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>