microui-wc 0.1.0

package/src/components/mu-error-boundary.js

@@ -0,0 +1,191 @@
+/**
+ * @fileoverview mu-error-boundary - Error Boundary Component
+ * 
+ * Catches rendering errors in child components and displays fallback UI.
+ * Critical for large-scale applications where one component error
+ * should not crash the entire application.
+ * 
+ * Based on 2024 enterprise error recovery patterns.
+ * 
+ * Usage:
+ * <mu-error-boundary fallback="<p>Something went wrong</p>">
+ *     <mu-complex-widget></mu-complex-widget>
+ * </mu-error-boundary>
+ * 
+ * With error handler:
+ * <mu-error-boundary onerror="customHandler(event.detail)">
+ *     <mu-data-table :items="${data}"></mu-data-table>
+ * </mu-error-boundary>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+/**
+ * Global error registry for agent observability
+ * @type {Array<{timestamp: number, component: string, error: Error, context: Object}>}
+ */
+const errorRegistry = [];
+
+/**
+ * Get all caught errors for agent debugging
+ * @returns {Array<Object>}
+ */
+export function getErrors() {
+    return [...errorRegistry];
+}
+
+/**
+ * Clear error registry
+ */
+export function clearErrors() {
+    errorRegistry.length = 0;
+}
+
+export class MuErrorBoundary extends MuElement {
+    static baseClass = 'mu-error-boundary';
+    static observedAttributes = ['fallback'];
+
+    #hasError = false;
+    #error = null;
+    #originalContent = '';
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Store original content for potential recovery
+        this.#originalContent = this.innerHTML;
+
+        // Listen for errors from child components
+        this.listen(this, 'error', this.#handleError.bind(this));
+
+        // Also catch unhandled errors from child scripts
+        this.#setupGlobalErrorHandler();
+    }
+
+    #setupGlobalErrorHandler() {
+        // Capture errors that occur within this boundary
+        const originalHandler = window.onerror;
+
+        window.onerror = (message, source, lineno, colno, error) => {
+            // Check if error originated from within this boundary
+            if (this.#isErrorFromChild(error)) {
+                this.#handleError({ detail: { error, message } });
+                return true; // Prevent propagation
+            }
+
+            // Call original handler if exists
+            if (originalHandler) {
+                return originalHandler(message, source, lineno, colno, error);
+            }
+            return false;
+        };
+    }
+
+    #isErrorFromChild(error) {
+        // Best-effort check if error is from child component
+        if (!error?.stack) return false;
+
+        const childTags = Array.from(this.querySelectorAll('*'))
+            .filter(el => el.tagName.startsWith('MU-'))
+            .map(el => el.tagName.toLowerCase());
+
+        return childTags.some(tag => error.stack.includes(tag));
+    }
+
+    #handleError(event) {
+        const error = event?.detail?.error || event?.error || event;
+
+        if (this.#hasError) return; // Already showing fallback
+
+        this.#hasError = true;
+        this.#error = error;
+
+        // Register error for agent observability
+        errorRegistry.push({
+            timestamp: Date.now(),
+            component: this.id || 'mu-error-boundary',
+            error: {
+                message: error?.message || String(error),
+                stack: error?.stack,
+                name: error?.name
+            },
+            context: {
+                originalContent: this.#originalContent.slice(0, 200),
+                parentUrl: window.location.href
+            }
+        });
+
+        // Keep only last 50 errors
+        if (errorRegistry.length > 50) {
+            errorRegistry.shift();
+        }
+
+        // Show fallback UI
+        this.#renderFallback();
+
+        // Emit event for custom handling
+        this.emit('mu-error', {
+            error,
+            boundary: this,
+            recover: () => this.recover()
+        });
+
+        // Prevent event propagation
+        event?.stopPropagation?.();
+    }
+
+    #renderFallback() {
+        const fallback = this.getAttribute('fallback');
+
+        if (fallback) {
+            this.innerHTML = fallback;
+        } else {
+            // Default fallback UI
+            this.innerHTML = `
+                <div class="mu-error-boundary__fallback" role="alert" aria-live="polite">
+                    <mu-icon name="error" style="--mu-icon-size: 48px; color: var(--md-sys-color-error);"></mu-icon>
+                    <p class="mu-error-boundary__title">Something went wrong</p>
+                    <p class="mu-error-boundary__message">${this.#error?.message || 'An unexpected error occurred'}</p>
+                    <mu-button variant="outlined" onclick="this.closest('mu-error-boundary').recover()">
+                        Try Again
+                    </mu-button>
+                </div>
+            `;
+        }
+
+        this.classList.add('has-error');
+    }
+
+    render() {
+        // Apply base styles
+        this.style.display = 'block';
+    }
+
+    /**
+     * Attempt to recover by restoring original content
+     */
+    recover() {
+        this.#hasError = false;
+        this.#error = null;
+        this.classList.remove('has-error');
+        this.innerHTML = this.#originalContent;
+
+        this.emit('mu-recover');
+    }
+
+    /**
+     * Check if boundary is currently showing error
+     */
+    get hasError() {
+        return this.#hasError;
+    }
+
+    /**
+     * Get the current error
+     */
+    get error() {
+        return this.#error;
+    }
+}
+
+define('mu-error-boundary', MuErrorBoundary);

package/src/components/mu-example.js

@@ -0,0 +1,335 @@
+/**
+ * @fileoverview mu-example - Interactive Example Card Component
+ * 
+ * Usage:
+ * <mu-example title="Basic checkbox">
+ *   <div slot="demo">
+ *     <mu-checkbox checked>Example</mu-checkbox>
+ *   </div>
+ *   <div slot="code">
+ *     <mu-checkbox checked>Example</mu-checkbox>
+ *   </div>
+ * </mu-example>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuExample extends MuElement {
+    static baseClass = 'mu-example';
+    static observedAttributes = ['title'];
+
+    #showCode = false;
+
+    render() {
+        const title = this.attr('title', 'Example');
+        const demoSlot = this.querySelector('[slot="demo"]');
+        const codeSlot = this.querySelector('[slot="code"]');
+
+        // Extract content BEFORE modifying DOM
+        const demoContent = demoSlot ? demoSlot.innerHTML : '';
+        // For code, use textContent to get the decoded text (handles pre-escaped content)
+        // If there's a code slot, use it; otherwise use the demo slot's outerHTML
+        const codeContent = codeSlot
+            ? codeSlot.textContent
+            : (demoSlot ? demoSlot.innerHTML : '');
+
+        // Remove original slots to prevent duplicate event handlers
+        // The slots contain interactive elements (buttons with onclick) that would overlap
+        if (demoSlot) demoSlot.remove();
+        if (codeSlot) codeSlot.remove();
+
+        // CRITICAL: Pre-escape and prettify code content BEFORE creating mu-code element
+        // This ensures mu-code has content when connectedCallback runs (which triggers render)
+        const normalizedCode = this.#prettifyHTML(codeContent);
+        const escapedCode = escapeHTML(normalizedCode);
+
+        this.innerHTML = `
+            <div class="mu-example__card">
+                <div class="mu-example__header">
+                    <span class="mu-example__title">${title}</span>
+                    <div class="mu-example__actions">
+                        <button class="mu-example__btn" data-action="link" title="Copy link">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>
+                                <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
+                            </svg>
+                        </button>
+                        <button class="mu-example__btn" data-action="code" title="View source">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="16 18 22 12 16 6"/>
+                                <polyline points="8 6 2 12 8 18"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div class="mu-example__demo">
+                    ${demoContent}
+                </div>
+                <div class="mu-example__code" style="display: none;">
+                    <mu-code language="html">${escapedCode}</mu-code>
+                </div>
+            </div>
+        `;
+
+        this.#applyStyles();
+        // Event delegation handled by MuElement.#setupEventDelegation()
+        // See handleAction() method below
+    }
+
+
+    // Using centralized escapeHTML from core/utils.js for XSS safety
+
+    /**
+     * Pretty-prints HTML with proper indentation
+     * Lightweight implementation, no dependencies
+     * @param {string} html - The HTML string to format
+     * @returns {string} - Formatted HTML with proper indentation
+     */
+    #prettifyHTML(html) {
+        // Self-closing tags that don't need closing
+        const selfClosing = new Set([
+            'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+            'link', 'meta', 'param', 'source', 'track', 'wbr'
+        ]);
+
+        // Inline tags that shouldn't break to new line
+        const inline = new Set([
+            'a', 'abbr', 'b', 'bdo', 'br', 'cite', 'code', 'dfn', 'em',
+            'i', 'kbd', 'q', 's', 'samp', 'small', 'span', 'strong',
+            'sub', 'sup', 'u', 'var'
+        ]);
+
+        let result = '';
+        let indent = 0;
+        const indentStr = '    '; // 4 spaces
+
+        // Normalize: remove existing whitespace between tags
+        const normalized = html
+            .replace(/>\s+</g, '><')
+            .replace(/\s+/g, ' ')
+            .trim();
+
+        // Split by tags while keeping tags in result
+        const tokens = normalized.split(/(<[^>]+>)/g).filter(t => t.trim());
+
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i].trim();
+            if (!token) continue;
+
+            const isTag = token.startsWith('<');
+            const isClosing = token.startsWith('</');
+            const isSelfClosing = token.endsWith('/>') ||
+                (isTag && selfClosing.has(token.match(/<\/?(\w+)/)?.[1]?.toLowerCase()));
+
+            if (isClosing) {
+                indent = Math.max(0, indent - 1);
+            }
+
+            // Get tag name if it's a tag
+            const tagName = isTag ? token.match(/<\/?(\w+)/)?.[1]?.toLowerCase() : null;
+            const isInline = tagName && inline.has(tagName);
+
+            // Add content
+            if (isTag) {
+                if (!isInline || isClosing) {
+                    if (result && !result.endsWith('\n')) {
+                        result += '\n';
+                    }
+                    result += indentStr.repeat(indent) + token;
+                } else {
+                    result += token;
+                }
+            } else {
+                // Text content - add inline
+                result += token;
+            }
+
+            // Increase indent after opening tag (not self-closing, not inline)
+            if (isTag && !isClosing && !isSelfClosing && !isInline) {
+                indent++;
+            }
+        }
+
+        return result.trim();
+    }
+
+    #applyStyles() {
+        this.style.display = 'block';
+        this.style.marginBottom = '24px';
+
+        const card = this.querySelector('.mu-example__card');
+        if (card) {
+            card.style.background = 'var(--md-sys-color-surface)';
+            card.style.border = '1px solid var(--md-sys-color-outline-variant)';
+            card.style.borderRadius = 'var(--md-sys-shape-corner-large)';
+            // Note: Do NOT use overflow:hidden - it clips the code block
+        }
+
+        const header = this.querySelector('.mu-example__header');
+        if (header) {
+            header.style.display = 'flex';
+            header.style.justifyContent = 'space-between';
+            header.style.alignItems = 'center';
+            header.style.padding = '12px 16px';
+            header.style.borderBottom = '1px solid var(--md-sys-color-outline-variant)';
+            header.style.background = 'var(--md-sys-color-surface-container-low)';
+            header.style.borderRadius = 'var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0';
+        }
+
+        const title = this.querySelector('.mu-example__title');
+        if (title) {
+            title.style.fontWeight = '500';
+            title.style.fontSize = 'var(--md-sys-typescale-title-small-size)';
+            title.style.color = 'var(--md-sys-color-on-surface)';
+            // SOTA 2026: Proper text overflow handling
+            // min-width: 0 is CRITICAL for flexbox children to allow shrinking below content size
+            title.style.minWidth = '0';
+            title.style.overflow = 'hidden';
+            title.style.textOverflow = 'ellipsis';
+            title.style.whiteSpace = 'nowrap';
+        }
+
+        const actions = this.querySelector('.mu-example__actions');
+        if (actions) {
+            actions.style.display = 'flex';
+            actions.style.gap = '4px';
+        }
+
+        const btns = this.querySelectorAll('.mu-example__btn');
+        btns.forEach(btn => {
+            btn.style.background = 'transparent';
+            btn.style.border = 'none';
+            btn.style.cursor = 'pointer';
+            btn.style.padding = '8px';
+            btn.style.borderRadius = '50%';
+            btn.style.color = 'var(--md-sys-color-on-surface-variant)';
+            btn.style.display = 'flex';
+            btn.style.alignItems = 'center';
+            btn.style.justifyContent = 'center';
+            btn.style.transition = 'all 0.2s ease';
+        });
+
+        const demo = this.querySelector('.mu-example__demo');
+        if (demo) {
+            // SOTA 2026: Proper containment - demo area MUST contain its content
+            demo.style.boxSizing = 'border-box';
+            demo.style.width = '100%';
+            demo.style.maxWidth = '100%';
+            demo.style.padding = '24px';
+            // Flexbox with wrap for responsive layout
+            demo.style.display = 'flex';
+            demo.style.flexWrap = 'wrap';
+            demo.style.gap = '16px';
+            demo.style.alignItems = 'center';
+            demo.style.justifyContent = 'flex-start';
+            // No overflow clipping - content wraps naturally
+
+            // Force interactive children to wrap properly instead of shrinking
+            // IMPORTANT: Layout containers (mu-stack, mu-grid) must NOT have flex-shrink: 0
+            // They need to shrink to contain their children properly
+            const layoutContainers = new Set(['MU-STACK', 'MU-GRID', 'MU-LAYOUT']);
+            Array.from(demo.children).forEach(child => {
+                if (!layoutContainers.has(child.tagName)) {
+                    child.style.flexShrink = '0';
+                }
+            });
+        }
+
+        const codeBlock = this.querySelector('.mu-example__code');
+        if (codeBlock) {
+            codeBlock.style.borderTop = '1px solid var(--md-sys-color-outline-variant)';
+        }
+
+        // Style the mu-code element for seamless integration
+        const muCode = this.querySelector('.mu-example__code mu-code');
+        if (muCode) {
+            // Only zero TOP corners - bottom corners should stay rounded (set by mu-code itself)
+            muCode.style.borderTopLeftRadius = '0';
+            muCode.style.borderTopRightRadius = '0';
+            muCode.style.maxHeight = '400px';
+            muCode.style.overflow = 'auto';
+
+            // Also remove border-radius from the mu-code header (HTML badge area)
+            const muCodeHeader = muCode.querySelector('.mu-code__header');
+            if (muCodeHeader) {
+                muCodeHeader.style.borderRadius = '0';
+            }
+        }
+
+        // Add hover styles
+        const style = document.createElement('style');
+        style.textContent = `
+            .mu-example__btn:hover {
+                background: var(--md-sys-color-surface-container-high) !important;
+                color: var(--md-sys-color-primary) !important;
+            }
+            .mu-example__btn.active {
+                background: var(--md-sys-color-primary-container) !important;
+                color: var(--md-sys-color-on-primary-container) !important;
+            }
+        `;
+        if (!document.querySelector('#mu-example-styles')) {
+            style.id = 'mu-example-styles';
+            document.head.appendChild(style);
+        }
+    }
+
+    /**
+     * SOTA 2026: Handle delegated actions from MuElement.
+     * Called automatically by base class event delegation.
+     */
+    handleAction(action, target, event) {
+        if (action === 'code') {
+            const codeBlock = this.querySelector('.mu-example__code');
+            if (codeBlock) {
+                this.#showCode = !this.#showCode;
+                codeBlock.style.display = this.#showCode ? 'block' : 'none';
+                target.classList.toggle('active', this.#showCode);
+
+                // Scroll code block into view when shown
+                if (this.#showCode) {
+                    // SOTA: Double rAF ensures layout is complete before measuring
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            // Find the scrollable container (.mu-layout-main in demo)
+                            const scrollContainer = this.closest('.mu-layout-main') ||
+                                document.querySelector('.mu-layout-main') ||
+                                document.documentElement;
+
+                            const codeRect = codeBlock.getBoundingClientRect();
+                            const containerRect = scrollContainer.getBoundingClientRect?.() ||
+                                { top: 0, bottom: window.innerHeight };
+
+                            // Only scroll if code block is below viewport
+                            if (codeRect.bottom > containerRect.bottom) {
+                                const scrollOffset = codeRect.bottom - containerRect.bottom + 20;
+                                scrollContainer.scrollBy({
+                                    top: scrollOffset,
+                                    behavior: 'smooth'
+                                });
+                            }
+                        });
+                    });
+                }
+            }
+        } else if (action === 'link') {
+            this.#copyLink(target);
+        }
+    }
+
+    async #copyLink(btn) {
+        const url = window.location.href;
+        try {
+            await navigator.clipboard.writeText(url);
+            btn.style.color = 'var(--md-sys-color-primary)';
+            this.setTimeout(() => {
+                btn.style.color = '';
+            }, 2000);
+        } catch (e) {
+            console.error('Copy failed:', e);
+        }
+    }
+}
+
+define('mu-example', MuExample);