microui-wc 0.1.0

package/src/components/mu-progress.js

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview mu-progress - MD3 Linear Progress Indicator
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuProgress extends MuElement {
+    static baseClass = 'mu-progress';
+    static cssFile = 'progress';
+    static observedAttributes = ['value', 'max', 'variant'];
+
+    #bar = null;
+
+    render() {
+        // Idempotent: skip if already rendered  
+        if (this.querySelector('.mu-progress__bar')) {
+            this.#bar = this.querySelector('.mu-progress__bar');
+            return;
+        }
+
+        this.innerHTML = '<span class="mu-progress__bar"></span>';
+        this.#bar = this.querySelector('.mu-progress__bar');
+        this.setAttribute('role', 'progressbar');
+        this.#updateProgress();
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'value' || attr === 'max') {
+            this.#updateProgress();
+        }
+        this.#updateClasses();
+    }
+
+    #updateProgress() {
+        const value = parseFloat(this.attr('value', '0'));
+        const max = parseFloat(this.attr('max', '100'));
+        const percent = Math.min(100, Math.max(0, (value / max) * 100));
+
+        if (this.#bar) {
+            this.#bar.style.width = `${percent}%`;
+        }
+
+        this.setAttribute('aria-valuenow', value.toString());
+        this.setAttribute('aria-valuemax', max.toString());
+    }
+
+    #updateClasses() {
+        const variant = this.attr('variant', 'primary');
+        this.className = `mu-progress mu-progress--${variant}`;
+    }
+}
+
+define('mu-progress', MuProgress);

package/src/components/mu-prompt-ui.js

@@ -0,0 +1,382 @@
+/**
+ * mu-prompt-ui.js - AI Agent Prompt UI Components
+ * 
+ * Specialized components for AI agent interfaces:
+ * - mu-prompt-input: Enhanced text input with submit button and loading states
+ * - mu-code-block: Syntax-highlighted code display with copy button
+ * - mu-agent-toolbar: Action buttons for AI responses (copy, regenerate, etc.)
+ * - mu-message-bubble: Chat message bubbles with role-based styling
+ * 
+ * @example
+ * <mu-prompt-input placeholder="Ask anything..." loading></mu-prompt-input>
+ * 
+ * <mu-message-bubble role="user">
+ *   How do I sort an array?
+ * </mu-message-bubble>
+ * 
+ * <mu-message-bubble role="assistant">
+ *   Here's how to sort an array:
+ *   <mu-code-block language="javascript">
+ *     const sorted = array.sort((a, b) => a - b);
+ *   </mu-code-block>
+ *   <mu-agent-toolbar></mu-agent-toolbar>
+ * </mu-message-bubble>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+// ============================================
+// MU-PROMPT-INPUT
+// ============================================
+export class MuPromptInput extends MuElement {
+    static get observedAttributes() {
+        return ['placeholder', 'loading', 'disabled', 'multiline'];
+    }
+
+    static baseClass = 'mu-prompt-input';
+    static cssFile = 'prompt-ui';
+
+    constructor() {
+        super();
+        this._value = '';
+    }
+
+    get placeholder() {
+        return this.getAttribute('placeholder') || 'Type a message...';
+    }
+
+    get loading() {
+        return this.hasAttribute('loading');
+    }
+
+    set loading(val) {
+        if (val) this.setAttribute('loading', '');
+        else this.removeAttribute('loading');
+    }
+
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+
+    get multiline() {
+        return this.hasAttribute('multiline');
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        this._value = val;
+        const input = this.querySelector('.mu-prompt-input-field');
+        if (input) input.value = val;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (this.isConnected && oldVal !== newVal) {
+            this.render();
+        }
+    }
+
+    _submit() {
+        if (this.loading || this.disabled || !this._value.trim()) return;
+
+        this.dispatchEvent(new CustomEvent('mu-submit', {
+            bubbles: true,
+            detail: { value: this._value.trim() }
+        }));
+    }
+
+    _handleKeydown(e) {
+        if (e.key === 'Enter' && !e.shiftKey && !this.multiline) {
+            e.preventDefault();
+            this._submit();
+        } else if (e.key === 'Enter' && e.metaKey) {
+            e.preventDefault();
+            this._submit();
+        }
+    }
+
+    render() {
+        const isTextarea = this.multiline;
+
+        this.innerHTML = `
+            <div class="mu-prompt-input-container ${this.loading ? 'mu-prompt-input-loading' : ''}">
+                ${isTextarea
+                ? `<textarea class="mu-prompt-input-field" placeholder="${this.placeholder}" ${this.disabled ? 'disabled' : ''}></textarea>`
+                : `<input class="mu-prompt-input-field" type="text" placeholder="${this.placeholder}" ${this.disabled ? 'disabled' : ''} />`
+            }
+                <button class="mu-prompt-input-submit" ${this.disabled || this.loading ? 'disabled' : ''}>
+                    ${this.loading
+                ? '<div class="mu-prompt-input-spinner"></div>'
+                : '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>'
+            }
+                </button>
+            </div>
+        `;
+
+        const input = this.querySelector('.mu-prompt-input-field');
+        const submitBtn = this.querySelector('.mu-prompt-input-submit');
+
+        input.value = this._value;
+        this.listen(input, 'input', (e) => {
+            this._value = e.target.value;
+            this.dispatchEvent(new CustomEvent('mu-input', {
+                bubbles: true,
+                detail: { value: this._value }
+            }));
+        });
+        this.listen(input, 'keydown', (e) => this._handleKeydown(e));
+        this.listen(submitBtn, 'click', () => this._submit());
+    }
+}
+
+// ============================================
+// MU-CODE-BLOCK
+// ============================================
+export class MuCodeBlock extends MuElement {
+    static get observedAttributes() {
+        return ['language', 'filename'];
+    }
+
+    static baseClass = 'mu-code-block';
+
+    constructor() {
+        super();
+    }
+
+    get language() {
+        return this.getAttribute('language') || 'text';
+    }
+
+    get filename() {
+        return this.getAttribute('filename');
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (this.isConnected && oldVal !== newVal) {
+            this.render();
+        }
+    }
+
+    async _copy() {
+        const code = this.textContent.trim();
+        try {
+            await navigator.clipboard.writeText(code);
+            const btn = this.querySelector('.mu-code-block-copy-btn');
+            btn.textContent = '✓ Copied';
+            this.setTimeout(() => {
+                btn.textContent = 'Copy';
+            }, 2000);
+        } catch (e) {
+            console.error('Failed to copy:', e);
+        }
+    }
+
+    render() {
+        const code = this.textContent.trim();
+
+        this.innerHTML = `
+            <div class="mu-code-block-container">
+                <div class="mu-code-block-header">
+                    ${this.filename
+                ? `<span class="mu-code-block-filename">${this.filename}</span>`
+                : `<span class="mu-code-block-language">${this.language}</span>`
+            }
+                    <button class="mu-code-block-copy-btn">Copy</button>
+                </div>
+                <pre class="mu-code-block-pre"><code>${escapeHTML(code)}</code></pre>
+            </div>
+        `;
+
+        this.listen(this.querySelector('.mu-code-block-copy-btn'), 'click', () => this._copy());
+    }
+
+    // Using centralized escapeHTML from core/utils.js for XSS safety
+}
+
+// ============================================
+// MU-AGENT-TOOLBAR
+// ============================================
+export class MuAgentToolbar extends MuElement {
+    static get observedAttributes() {
+        return ['actions'];
+    }
+
+    static baseClass = 'mu-agent-toolbar';
+
+    constructor() {
+        super();
+    }
+
+    get actions() {
+        const attr = this.getAttribute('actions');
+        return attr ? attr.split(',').map(a => a.trim()) : ['copy', 'regenerate', 'thumbsUp', 'thumbsDown'];
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+
+
+
+    render() {
+        const actionButtons = {
+            copy: { icon: '📋', label: 'Copy' },
+            regenerate: { icon: '🔄', label: 'Regenerate' },
+            thumbsUp: { icon: '👍', label: 'Good response' },
+            thumbsDown: { icon: '👎', label: 'Poor response' },
+            edit: { icon: '✏️', label: 'Edit' },
+            share: { icon: '↗️', label: 'Share' }
+        };
+
+        const buttons = this.actions
+            .filter(a => actionButtons[a])
+            .map(a => `
+                <button class="mu-agent-toolbar-btn" data-action="${a}" title="${actionButtons[a].label}">
+                    ${actionButtons[a].icon}
+                </button>
+            `).join('');
+
+        this.innerHTML = buttons;
+    }
+
+    /**
+     * Handle actions from MuElement's centralized event delegation
+     */
+    handleAction(action, target, event) {
+        this.dispatchEvent(new CustomEvent('mu-action', {
+            bubbles: true,
+            detail: { action }
+        }));
+    }
+}
+
+// ============================================
+// MU-MESSAGE-BUBBLE
+// ============================================
+export class MuMessageBubble extends MuElement {
+    static get observedAttributes() {
+        return ['role', 'avatar', 'name', 'timestamp'];
+    }
+
+    static baseClass = 'mu-message-bubble';
+
+    constructor() {
+        super();
+        this._originalContent = null;
+    }
+
+    get role() {
+        return this.getAttribute('role') || 'user';
+    }
+
+    get avatar() {
+        return this.getAttribute('avatar');
+    }
+
+    get name() {
+        return this.getAttribute('name') || (this.role === 'user' ? 'You' : 'Assistant');
+    }
+
+    get timestamp() {
+        return this.getAttribute('timestamp');
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture original children before render
+        if (!this._originalContent) {
+            this._originalContent = Array.from(this.childNodes);
+        }
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (this.isConnected && oldVal !== newVal) {
+            this.render();
+        }
+    }
+
+    render() {
+        const isUser = this.role === 'user';
+        const defaultAvatar = isUser ? '👤' : '🤖';
+        const roleClass = isUser ? 'mu-message-bubble-user' : 'mu-message-bubble-assistant';
+
+        // Create structure
+        const message = document.createElement('div');
+        message.className = `mu-message-bubble-message ${roleClass}`;
+
+        // Avatar
+        const avatar = document.createElement('div');
+        avatar.className = `mu-message-bubble-avatar ${roleClass}`;
+        if (this.avatar) {
+            const img = document.createElement('img');
+            img.src = this.avatar;
+            img.alt = this.name;
+            avatar.appendChild(img);
+        } else {
+            avatar.textContent = defaultAvatar;
+        }
+        message.appendChild(avatar);
+
+        // Content wrapper
+        const content = document.createElement('div');
+        content.className = 'mu-message-bubble-content';
+
+        // Header
+        const header = document.createElement('div');
+        header.className = `mu-message-bubble-header ${roleClass}`;
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'mu-message-bubble-name';
+        nameSpan.textContent = this.name;
+        header.appendChild(nameSpan);
+        if (this.timestamp) {
+            const timestampSpan = document.createElement('span');
+            timestampSpan.className = 'mu-message-bubble-timestamp';
+            timestampSpan.textContent = this.timestamp;
+            header.appendChild(timestampSpan);
+        }
+        content.appendChild(header);
+
+        // Bubble with original content
+        const bubble = document.createElement('div');
+        bubble.className = `mu-message-bubble-bubble ${roleClass}`;
+        if (this._originalContent) {
+            this._originalContent.forEach(child => bubble.appendChild(child.cloneNode(true)));
+        }
+        content.appendChild(bubble);
+
+        message.appendChild(content);
+
+        // Set HTML
+        this.innerHTML = '';
+        this.appendChild(message);
+    }
+}
+
+// Register all components
+if (!customElements.get('mu-prompt-input')) {
+    customElements.define('mu-prompt-input', MuPromptInput);
+}
+if (!customElements.get('mu-code-block')) {
+    customElements.define('mu-code-block', MuCodeBlock);
+}
+if (!customElements.get('mu-agent-toolbar')) {
+    customElements.define('mu-agent-toolbar', MuAgentToolbar);
+}
+if (!customElements.get('mu-message-bubble')) {
+    customElements.define('mu-message-bubble', MuMessageBubble);
+}

package/src/components/mu-radio.js

@@ -0,0 +1,200 @@
+/**
+ * @fileoverview mu-radio - Radio Button Group Component
+ * 
+ * Usage:
+ * <mu-radio-group name="size" value="md">
+ *   <mu-radio value="sm">Small</mu-radio>
+ *   <mu-radio value="md">Medium</mu-radio>
+ *   <mu-radio value="lg">Large</mu-radio>
+ * </mu-radio-group>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+import { createRipple } from '../core/ripple.js';
+
+export class MuRadioGroup extends MuElement {
+    static baseClass = 'mu-radio-group';
+    static cssFile = 'radio';
+    static observedAttributes = ['name', 'value'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Accessibility: set role
+        this.setAttribute('role', 'radiogroup');
+
+        // Ripple effect on pointerdown
+        this.listen(this, 'pointerdown', (e) => {
+            let radio = e.target;
+            while (radio && radio.tagName !== 'MU-RADIO') {
+                radio = radio.parentElement;
+            }
+            if (radio && !radio.hasAttribute('disabled')) {
+                createRipple(radio, e);
+            }
+        });
+
+        this.listen(this, 'click', (e) => {
+            // Find the clicked radio - could be nested span
+            let radio = e.target;
+            while (radio && radio.tagName !== 'MU-RADIO') {
+                radio = radio.parentElement;
+            }
+
+            if (radio && !radio.hasAttribute('disabled')) {
+                this.select(radio.getAttribute('value'));
+            }
+        });
+    }
+
+    render() {
+        this.style.display = 'flex';
+        this.style.flexDirection = 'column';
+        this.style.gap = '8px';
+
+        // Defer selection update to ensure children are fully upgraded
+        // Use setTimeout(0) instead of queueMicrotask - microtasks run before
+        // custom element upgrades, setTimeout runs after
+        this.setTimeout(() => this.#updateSelection(), 0);
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'value') {
+            this.#updateSelection();
+        }
+    }
+
+    #updateSelection() {
+        const currentValue = this.attr('value', '');
+        this.querySelectorAll('mu-radio').forEach(radio => {
+            const isSelected = radio.attr('value') === currentValue;
+            if (isSelected) {
+                radio.setAttribute('checked', '');
+            } else {
+                radio.removeAttribute('checked');
+            }
+        });
+    }
+
+    select(value) {
+        this.setAttribute('value', value);
+        this.emit('mu-change', { value });
+    }
+
+    get value() {
+        return this.attr('value', '');
+    }
+
+    set value(v) {
+        this.setAttribute('value', v);
+    }
+}
+
+export class MuRadio extends MuElement {
+    static baseClass = 'mu-radio';
+    static observedAttributes = ['value', 'checked', 'disabled', 'label'];
+
+    #labelText = '';
+    #rendered = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Accessibility: set role and keyboard navigation
+        this.setAttribute('role', 'radio');
+        this.setupActivation(() => {
+            const group = this.closest('mu-radio-group');
+            if (group) group.select(this.getAttribute('value'));
+        });
+    }
+
+    render() {
+        // Read label only once to avoid losing it after innerHTML
+        if (!this.#rendered) {
+            this.#labelText = escapeHTML(this.attr('label', '') || this.textContent.trim());
+            this.#rendered = true;
+        }
+
+        this.innerHTML = `
+            <span class="mu-radio__circle">
+                <span class="mu-radio__dot"></span>
+            </span>
+            <span class="mu-radio__label">${this.#labelText}</span>
+        `;
+
+        this.style.display = 'inline-flex';
+        this.style.alignItems = 'center';
+        this.style.gap = '12px';  /* MD3: 12dp gap */
+        this.style.cursor = this.has('disabled') ? 'not-allowed' : 'pointer';
+        this.style.userSelect = 'none';
+        this.style.minHeight = '48px';  /* MD3: 48dp touch target */
+        this.style.padding = '0 4px';  /* Touch-friendly padding */
+
+        this.#updateState();
+    }
+
+    update(attr, newValue, oldValue) {
+        // For checked changes, just update visuals without full re-render
+        if (attr === 'checked' || attr === 'disabled') {
+            this.#updateState();
+        } else if (attr === 'label') {
+            this.#labelText = newValue;
+            const labelEl = this.querySelector('.mu-radio__label');
+            if (labelEl) labelEl.textContent = newValue;
+        }
+    }
+
+    #updateState() {
+        const circle = this.querySelector('.mu-radio__circle');
+        const dot = this.querySelector('.mu-radio__dot');
+        const label = this.querySelector('.mu-radio__label');
+        const isChecked = this.has('checked');
+        const isDisabled = this.has('disabled');
+
+        // Update cursor
+        this.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
+
+        if (circle) {
+            circle.style.width = '20px';
+            circle.style.height = '20px';
+            circle.style.borderRadius = '50%';
+            circle.style.display = 'flex';
+            circle.style.alignItems = 'center';
+            circle.style.justifyContent = 'center';
+            circle.style.transition = 'border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)';
+
+            // MD3 disabled state
+            if (isDisabled) {
+                circle.style.border = '2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)';
+            } else {
+                circle.style.border = `2px solid ${isChecked ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'}`;
+            }
+        }
+
+        if (dot) {
+            dot.style.width = '10px';
+            dot.style.height = '10px';
+            dot.style.borderRadius = '50%';
+            dot.style.transform = isChecked ? 'scale(0.5)' : 'scale(0)';
+            dot.style.transition = 'transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)';
+
+            // MD3 disabled state
+            if (isDisabled) {
+                dot.style.background = 'color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)';
+            } else {
+                dot.style.background = 'var(--md-sys-color-primary)';
+            }
+        }
+
+        if (label) {
+            label.style.color = isDisabled ? 'color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)' : 'var(--md-sys-color-on-surface)';
+        }
+
+        // Accessibility: update ARIA states
+        this.setAttribute('aria-checked', String(isChecked));
+        this.setAttribute('aria-disabled', String(isDisabled));
+        this.setAttribute('tabindex', isDisabled ? '-1' : '0');
+    }
+}
+
+define('mu-radio-group', MuRadioGroup);
+define('mu-radio', MuRadio);