@antglobal/copilot-cards-web 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getBuiltinIcon, cloneJsonData, createLifecycleManager, materializeCard, resolveActionRef, createA2UIParameterResolver, createExpressionContext, resolveA2UIDeep, hasExpression, resolveExpression, resolveDeep, resolveExpressionValue, replaceRootContents, isBoundRenderTreeNode, runActionSteps, normalizeSchema, validateSchema, requiresBindingMaterialization, parseSchema, StreamingParser, StreamingEngine, findAffectedRepeatOwners, bindingTopologyFingerprint, findTemplateRepeatOwners, extractPartialSchema, runActionStep, registry } from '@antglobal/copilot-cards-core';
+import { getBuiltinIcon, cloneJsonData, createLifecycleManager, materializeCard, createA2UIParameterResolver, createExpressionContext, resolveActionRef, replaceRootContents, resolveA2UIDeep, hasExpression, resolveExpression, resolveDeep, resolveExpressionValue, isBoundRenderTreeNode, runActionSteps, normalizeSchema, validateSchema, requiresBindingMaterialization, parseSchema, StreamingParser, StreamingEngine, findAffectedRepeatOwners, bindingTopologyFingerprint, findTemplateRepeatOwners, extractPartialSchema, runActionStep, registry } from '@antglobal/copilot-cards-core';
 export { ActionRegistry, a2uiComponentToElement, a2uiToCommand, convertLegacySchema, createLifecycleManager, hasExpression, isA2UIEnvelope, isLegacySchema, normalizeSchema, parseSchema, registerActionHandler, registry, resolveActionRef, resolveDeep, resolveExpression, resolveExpressionValue, runActionStep, runActionSteps, validateSchema } from '@antglobal/copilot-cards-core';
 import * as echarts from 'echarts/core';
 import { LineChart, BarChart, PieChart, ScatterChart, FunnelChart, HeatmapChart } from 'echarts/charts';
@@ -96,6 +96,207 @@ function buildStyleString(styles) {
         .join(';');
 }
 
+/** Reusable REM preset; applied only when passed explicitly as `responsive.mobile`. */
+const DEFAULT_MOBILE_RESPONSIVE = Object.freeze({
+    unit: 'rem',
+    rootValue: 100,
+});
+function formatRem(value) {
+    return Number(value.toFixed(6)).toString();
+}
+function isIdentifierChar(value) {
+    if (value == null)
+        return false;
+    const codePoint = value.codePointAt(0) ?? 0;
+    return /[a-zA-Z0-9_-]/.test(value) || value === '\\' || codePoint >= 0x80;
+}
+function quotedEnd(value, start) {
+    const quote = value[start];
+    let cursor = start + 1;
+    while (cursor < value.length) {
+        if (value[cursor] === '\\') {
+            cursor += 2;
+            continue;
+        }
+        if (value[cursor] === quote)
+            return cursor + 1;
+        cursor++;
+    }
+    return value.length;
+}
+function identifierEscape(value, start) {
+    if (value[start] !== '\\' || start + 1 >= value.length)
+        return undefined;
+    let cursor = start + 1;
+    if (/[\n\r\f]/.test(value[cursor]))
+        return undefined;
+    let hex = '';
+    while (cursor < value.length && hex.length < 6 && /[0-9a-f]/i.test(value[cursor])) {
+        hex += value[cursor];
+        cursor++;
+    }
+    if (hex) {
+        const codePoint = Number.parseInt(hex, 16);
+        if (/\s/.test(value[cursor] ?? ''))
+            cursor++;
+        return {
+            decoded: codePoint === 0 || codePoint > 0x10ffff
+                ? '\uFFFD'
+                : String.fromCodePoint(codePoint),
+            end: cursor,
+        };
+    }
+    return { decoded: value[cursor], end: cursor + 1 };
+}
+function urlEnd(value, start) {
+    if (value[start]?.toLowerCase() !== 'u' && value[start] !== '\\') {
+        return undefined;
+    }
+    if (isIdentifierChar(value[start - 1]))
+        return undefined;
+    let cursor = start;
+    let name = '';
+    while (cursor < value.length) {
+        const char = value[cursor];
+        if (/[a-zA-Z0-9_-]/.test(char) || (char.codePointAt(0) ?? 0) >= 0x80) {
+            name += char;
+            cursor++;
+            continue;
+        }
+        const escaped = identifierEscape(value, cursor);
+        if (!escaped)
+            break;
+        name += escaped.decoded;
+        cursor = escaped.end;
+    }
+    if (name.toLowerCase() !== 'url')
+        return undefined;
+    while (/\s/.test(value[cursor] ?? ''))
+        cursor++;
+    if (value[cursor] !== '(')
+        return undefined;
+    cursor++;
+    let depth = 1;
+    while (cursor < value.length && depth > 0) {
+        const char = value[cursor];
+        if (char === '"' || char === "'") {
+            cursor = quotedEnd(value, cursor);
+            continue;
+        }
+        if (char === '\\') {
+            cursor += 2;
+            continue;
+        }
+        if (char === '(')
+            depth++;
+        if (char === ')')
+            depth--;
+        cursor++;
+    }
+    return cursor;
+}
+/** Convert CSS px lengths while preserving strings, comments, and URLs. */
+function convertPixelTokens(value, rootValue) {
+    let result = '';
+    let cursor = 0;
+    while (cursor < value.length) {
+        const char = value[cursor];
+        if (char === '"' || char === "'") {
+            const end = quotedEnd(value, cursor);
+            result += value.slice(cursor, end);
+            cursor = end;
+            continue;
+        }
+        if (value.startsWith('/*', cursor)) {
+            const closing = value.indexOf('*/', cursor + 2);
+            const end = closing < 0 ? value.length : closing + 2;
+            result += value.slice(cursor, end);
+            cursor = end;
+            continue;
+        }
+        const protectedUrlEnd = urlEnd(value, cursor);
+        if (protectedUrlEnd !== undefined) {
+            result += value.slice(cursor, protectedUrlEnd);
+            cursor = protectedUrlEnd;
+            continue;
+        }
+        const canStartPixel = /[\d.]/.test(char)
+            || (char === '-' && /[\d.]/.test(value[cursor + 1] ?? ''));
+        const pixel = canStartPixel && !isIdentifierChar(value[cursor - 1])
+            ? /^(-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)px/i.exec(value.slice(cursor))
+            : null;
+        const pixelEnd = pixel ? cursor + pixel[0].length : cursor;
+        if (pixel && !isIdentifierChar(value[pixelEnd])) {
+            result += `${formatRem(Number(pixel[1]) / rootValue)}rem`;
+            cursor += pixel[0].length;
+            continue;
+        }
+        result += char;
+        cursor++;
+    }
+    return result;
+}
+function createResponsiveContext(isMobile, responsive) {
+    const mobile = responsive?.mobile;
+    const unit = mobile?.unit;
+    const rootValue = mobile?.rootValue ?? DEFAULT_MOBILE_RESPONSIVE.rootValue;
+    if (mobile && (!Number.isFinite(rootValue) || rootValue <= 0)) {
+        throw new Error('[renderCard] responsive.mobile.rootValue must be a positive number');
+    }
+    const active = isMobile && unit === 'rem';
+    const context = {
+        active,
+        rootValue,
+        resolveLength(value) {
+            if (typeof value === 'number') {
+                return active
+                    ? `${formatRem(value / rootValue)}rem`
+                    : `${value}px`;
+            }
+            return active ? convertPixelTokens(value, rootValue) : value;
+        },
+        convertCSS(value) {
+            return active ? convertPixelTokens(value, rootValue) : value;
+        },
+    };
+    return Object.freeze(context);
+}
+/** Convert CSS declarations without touching element text or SVG geometry. */
+function applyResponsiveStyles(root, context) {
+    if (!context.active)
+        return;
+    const isPreservedContentDescendant = (element) => {
+        const boundary = element.closest('[data-responsive-content="preserve"]');
+        if (boundary == null || boundary === element)
+            return false;
+        const boundaryBelongsToRoot = root instanceof Element
+            ? root.contains(boundary)
+            : boundary.getRootNode() === root;
+        return boundaryBelongsToRoot;
+    };
+    const convertElement = (element) => {
+        if (isPreservedContentDescendant(element))
+            return;
+        if (element instanceof SVGElement
+            && !element.classList.contains('icon-svg'))
+            return;
+        const cssText = element.getAttribute('style');
+        if (cssText?.includes('px')) {
+            element.setAttribute('style', context.convertCSS(cssText));
+        }
+    };
+    if (root instanceof HTMLElement)
+        convertElement(root);
+    root.querySelectorAll('[style]').forEach(convertElement);
+    root.querySelectorAll('style').forEach((style) => {
+        if (isPreservedContentDescendant(style))
+            return;
+        if (style.textContent?.includes('px')) {
+            style.textContent = context.convertCSS(style.textContent);
+        }
+    });
+}
+
 /**
  * Chart renderer using ECharts (tree-shaken import).
  * Supports: line, bar, pie/donut, scatter, funnel, heatmap.
@@ -1447,7 +1648,7 @@ function renderTableSlot(container, slotContent) {
  * common style helpers. Designed to be used by `renderCard` which
  * passes resolved props via `setData()`.
  *
- * Note: lifecycle management, event binding, and viewport detection
+ * Note: lifecycle management, event binding, and mobile-mode selection
  * are handled externally by `renderCard` / the render pipeline.
  * BaseElement keeps itself lightweight and focused on DOM rendering.
  */
@@ -1459,6 +1660,7 @@ class BaseElement extends HTMLElement {
         this._node = null;
         this._props = {};
         this._isMobile = false;
+        this._responsive = createResponsiveContext(false);
         this.attachShadow({ mode: 'open' });
     }
     // ─── Data Interface ─────────────────────────────────────────
@@ -1466,10 +1668,12 @@ class BaseElement extends HTMLElement {
      * Set component data and trigger render.
      * Called by the component renderer (from `renderCard` pipeline).
      */
-    setData(node, props, isMobile) {
+    setData(node, props, isMobile, responsive) {
         this._node = node;
         this._props = props;
         this._isMobile = isMobile;
+        this._responsiveOptions = responsive;
+        this._responsive = createResponsiveContext(isMobile, responsive);
         // Expose identity on the host element for querying / debugging
         this.setAttribute('data-card-id', node.id);
         this.setAttribute('data-card-type', node.type);
@@ -1478,10 +1682,13 @@ class BaseElement extends HTMLElement {
     /**
      * Update props only (e.g. on variable change + re-render).
      */
-    updateProps(props, isMobile) {
+    updateProps(props, isMobile, responsive) {
         this._props = props;
         if (isMobile !== undefined)
             this._isMobile = isMobile;
+        if (responsive !== undefined)
+            this._responsiveOptions = responsive;
+        this._responsive = createResponsiveContext(this._isMobile, this._responsiveOptions);
         this.render();
     }
     // ─── Helpers ────────────────────────────────────────────────
@@ -1501,11 +1708,18 @@ class BaseElement extends HTMLElement {
         const processed = isExpressionResult
             ? style
             : this.resolveSizeInStyle(style);
-        return this.escapeAttribute(buildStyleString(processed));
+        return this.escapeAttribute(this._responsive.convertCSS(buildStyleString(processed)));
     }
     /** Resolve a single size value (number → px). */
     toCSS(value) {
-        return resolveSize(value);
+        return this._responsive.resolveLength(value);
+    }
+    /** Assign component markup and convert only its CSS declarations. */
+    setShadowHTML(html) {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.innerHTML = html;
+        applyResponsiveStyles(this.shadowRoot, this._responsive);
     }
     /**
      * Escape a value before interpolating it into a double-quoted HTML
@@ -1531,13 +1745,13 @@ class BaseElement extends HTMLElement {
                 // line-height is ambiguous: numbers < 4 are CSS multipliers
                 // (1.5 = 1.5×font-size), larger numbers keep the SDK-wide
                 // number→px convention (22 = 22px) for schema compat.
-                resolved[key] = value < 4 ? value : resolveSize(value);
+                resolved[key] = value < 4 ? value : this.toCSS(value);
             }
             else if (BaseElement.UNITLESS_PROPS.has(prop)) {
                 resolved[key] = value;
             }
             else {
-                resolved[key] = resolveSize(value);
+                resolved[key] = this.toCSS(value);
             }
         }
         return resolved;
@@ -1600,7 +1814,7 @@ class CardText extends BaseElement {
         this._tooltipTimer = 0;
     }
     // ─── setData override: reset streaming state on re-bindé ─────
-    setData(node, props, isMobile) {
+    setData(node, props, isMobile, responsive) {
         // Reset streaming state so full re-render is triggered
         if (this._streamTimer) {
             clearInterval(this._streamTimer);
@@ -1611,12 +1825,7 @@ class CardText extends BaseElement {
         this._displayedContent = '';
         this._contentEl = null;
         this._cursorEl = null;
-        this._node = node;
-        this._props = props;
-        this._isMobile = isMobile;
-        this.setAttribute('data-card-id', node.id);
-        this.setAttribute('data-card-type', node.type);
-        this.render();
+        super.setData(node, props, isMobile, responsive);
     }
     render() {
         if (!this.shadowRoot || !this._node)
@@ -1670,7 +1879,7 @@ class CardText extends BaseElement {
                 : rawText;
         // Use <span> for plain text (legacy compat), <div> for markdown (block elements)
         const tag = isMarkdown || isStreaming ? 'div' : 'span';
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-block;
@@ -1782,8 +1991,8 @@ class CardText extends BaseElement {
       <${tag}
         class="card-text ${isMobile ? 'card-mobile' : 'card-desktop'}${maxLines ? ' clamped' : ''}"
         style="${combinedStyle}"
-      ><span class="card-text-content">${initialHTML}</span>${isStreaming ? '<span class="streaming-cursor"></span>' : ''}</${tag}>
-    `;
+      ><span class="card-text-content" data-responsive-content="preserve">${initialHTML}</span>${isStreaming ? '<span class="streaming-cursor"></span>' : ''}</${tag}>
+    `);
         // Cache DOM references for streaming updates
         this._contentEl = this.shadowRoot.querySelector('.card-text-content');
         this._cursorEl = this.shadowRoot.querySelector('.streaming-cursor');
@@ -1907,7 +2116,12 @@ class CardText extends BaseElement {
      * Remove cursor when streaming ends.
      * Called externally when streaming prop changes to false.
      */
-    updateProps(props, isMobile) {
+    updateProps(props, isMobile, responsive) {
+        if (isMobile !== undefined)
+            this._isMobile = isMobile;
+        if (responsive !== undefined)
+            this._responsiveOptions = responsive;
+        this._responsive = createResponsiveContext(this._isMobile, this._responsiveOptions);
         const wasStreaming = this._props.streaming === true || this._props.streaming === 'true';
         const willStream = props.streaming === true || props.streaming === 'true';
         // If streaming just ended, remove cursor and stop animation
@@ -1928,13 +2142,9 @@ class CardText extends BaseElement {
                     : this._escapeHTML(rawText);
             }
             this._props = props;
-            if (isMobile !== undefined)
-                this._isMobile = isMobile;
             return;
         }
         this._props = props;
-        if (isMobile !== undefined)
-            this._isMobile = isMobile;
         this.render();
     }
     // ─── Helpers ──────────────────────────────────────────────────
@@ -2141,7 +2351,7 @@ class CardButton extends BaseElement {
             large: { padding: '12px 28px', fontSize: '16px' },
         };
         const sizeConfig = sizeMap[size] ?? sizeMap.medium;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: ${block ? 'block' : 'inline-block'};
@@ -2286,7 +2496,7 @@ class CardButton extends BaseElement {
         ${disabled ? 'disabled' : ''}
         style="${inlineStyle}"
       ><span class="card-btn-content">${icon ? `<span class="card-btn-icon">${sanitizeIconHtml(String(icon))}</span>` : ''}${displayText}</span></button>
-    `;
+    `);
     }
 }
 CardButton.is = 'ai-card-button';
@@ -2317,20 +2527,40 @@ function sanitizeImageSrc(src) {
         return '';
     return trimmed;
 }
+function normalizeIconSize(value) {
+    if (typeof value === 'number') {
+        const size = Number.isFinite(value) && value > 0 ? value : 24;
+        return { css: `${size}px`, intrinsic: size };
+    }
+    const raw = String(value ?? '').trim();
+    if (/^(?:\d+\.?\d*|\.\d+)$/.test(raw)) {
+        const size = Number(raw) || 24;
+        return { css: `${size}px`, intrinsic: size };
+    }
+    if (/^(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vw|vh|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/.test(raw)) {
+        return { css: raw };
+    }
+    return { css: '24px', intrinsic: 24 };
+}
 function renderIconContent(input) {
-    const size = Number(input.size) || 24;
+    const normalizedSize = normalizeIconSize(input.size);
+    const size = normalizedSize.css;
     const name = input.name == null ? undefined : String(input.name);
+    const sizeStyle = `width:${escapeAttr$1(size)};height:${escapeAttr$1(size)};`;
+    const intrinsicAttrs = normalizedSize.intrinsic == null
+        ? ''
+        : `width="${normalizedSize.intrinsic}" height="${normalizedSize.intrinsic}" `;
     if (input.src) {
         return `<img class="icon-img" src="${escapeAttr$1(sanitizeImageSrc(input.src))}" ` +
-            `width="${size}" height="${size}" alt="${escapeAttr$1(name ?? 'icon')}" />`;
+            `${intrinsicAttrs}style="${sizeStyle}" alt="${escapeAttr$1(name ?? 'icon')}" />`;
     }
     const icon = getBuiltinIcon(name);
     if (icon) {
-        return `<svg class="icon-svg" viewBox="${escapeAttr$1(icon.viewBox)}" width="${size}" ` +
-            `height="${size}" color="${escapeAttr$1(String(input.color ?? 'currentColor'))}" ` +
+        return `<svg class="icon-svg" viewBox="${escapeAttr$1(icon.viewBox)}" ${intrinsicAttrs}style="${sizeStyle}" ` +
+            `color="${escapeAttr$1(String(input.color ?? 'currentColor'))}" ` +
             `aria-hidden="true">${icon.body}</svg>`;
     }
-    return `<span class="icon-text" style="font-size:${size}px; line-height:1;">` +
+    return `<span class="icon-text" style="font-size:${escapeAttr$1(size)};line-height:1;">` +
         `${escapeText$1(name ?? '?')}</span>`;
 }
 
@@ -2452,7 +2682,7 @@ class CardInput extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { placeholder = '', inputType = 'text', label, defaultValue = '', disabled = false, readonly: readOnly = false, maxLength, rows, min, max, step = 1, controls = true, prefix, suffix, style, inputStyle, isExpressionResultStyle, } = this._props;
+        const { placeholder = '', autoFocus = false, inputType = 'text', label, defaultValue = '', disabled = false, readonly: readOnly = false, maxLength, rows, min, max, step = 1, controls = true, prefix, suffix, style, inputStyle, isExpressionResultStyle, } = this._props;
         const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
         const legacyInputStyle = style && typeof style === 'object' && style.resize != null
             ? { resize: style.resize }
@@ -2542,7 +2772,7 @@ class CardInput extends BaseElement {
           ${numberAttributes}
           style="${nativeInlineStyle}"
         />`;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -2716,7 +2946,7 @@ class CardInput extends BaseElement {
           ${numberStepperHtml}
         </div>
       </div>
-    `;
+    `);
         // Wire up native input/change events that bubble out of Shadow DOM.
         // renderCard listens for these standard event names (mapped from onInput / onChange).
         // The `detail.value` carries the current input value so that:
@@ -2738,6 +2968,14 @@ class CardInput extends BaseElement {
                     detail: { value: inputEl.value },
                 }));
             });
+            if (autoFocus && !disabled) {
+                queueMicrotask(() => {
+                    const control = this.getAutoFocusControl();
+                    if (control && this.isFirstAvailableAutoFocusInput()) {
+                        control.focus();
+                    }
+                });
+            }
             if (isNumber &&
                 showNumberStepper &&
                 inputEl instanceof HTMLInputElement) {
@@ -2766,6 +3004,22 @@ class CardInput extends BaseElement {
         }
     }
     // ─── Helpers ──────────────────────────────────────────────────
+    getAutoFocusControl() {
+        if (!this.isConnected
+            || !this._props.autoFocus
+            || this.hasAttribute('data-disabled')) {
+            return null;
+        }
+        const control = this.shadowRoot?.querySelector('.card-input');
+        return control && !control.disabled ? control : null;
+    }
+    isFirstAvailableAutoFocusInput() {
+        const root = this.getRootNode();
+        if (!('querySelectorAll' in root))
+            return false;
+        const firstAvailable = Array.from(root.querySelectorAll(CardInput.is)).find(input => input.getAutoFocusControl() !== null);
+        return firstAvailable === this;
+    }
     /** Escape HTML entities for safe insertion. */
     escapeHtml(str) {
         return str
@@ -2839,7 +3093,7 @@ class CardImage extends BaseElement {
             imgStyles.push(`object-fit:${objectFit}`);
         if (inlineStyle)
             imgStyles.push(inlineStyle);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-block;
@@ -2948,7 +3202,7 @@ class CardImage extends BaseElement {
         <button class="lightbox-close" aria-label="Close">&times;</button>
         <img class="lightbox-image" src="${imgSrc}" alt="${imgAlt}" />
       </div>
-    `;
+    `);
         this.bindEvents(preview);
     }
     bindEvents(preview) {
@@ -3040,7 +3294,7 @@ class CardDivider extends BaseElement {
         const isVertical = direction === 'vertical';
         const borderStyle = dashed ? 'dashed' : 'solid';
         const displayText = text ? this.resolveContent(text) : '';
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: ${isVertical ? 'inline-flex' : 'flex'};
@@ -3064,7 +3318,7 @@ class CardDivider extends BaseElement {
       </style>
       <div class="divider-line"></div>
       ${displayText ? `<span class="divider-text">${displayText}</span><div class="divider-line"></div>` : ''}
-    `;
+    `);
         if (inlineStyle) {
             this.style.cssText += ';' + inlineStyle;
         }
@@ -3176,7 +3430,7 @@ class CardRate extends BaseElement {
             return `<span class="star ${isFull ? 'filled' : ''}" data-value="${starIndex}"
         style="${starInline};${itemInline}">★</span>`;
         }).join('');
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -3234,7 +3488,7 @@ class CardRate extends BaseElement {
         aria-readonly="${Boolean(readOnly)}"
         style="${inlineStyle}"
       >${stars}</div>
-    `;
+    `);
         if (!interactive)
             return;
         // Bind click handlers
@@ -3383,7 +3637,7 @@ class CardCounter extends BaseElement {
         const numInline = this.buildInlineStyle(valueStyle, isExpressionResultStyle);
         const minusContent = this.renderIcon(minusIcon, this.defaultMinusGlyph(btnSize), btnSize);
         const plusContent = this.renderIcon(plusIcon, this.defaultPlusGlyph(btnSize), btnSize);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -3458,7 +3712,7 @@ class CardCounter extends BaseElement {
           ${plusDisabled ? 'disabled' : ''} aria-label="${this.escapeAttr(String(increaseAriaLabel))}"
           style="${plusInline}">${plusContent}</button>
       </div>
-    `;
+    `);
         if (disabled || readOnly)
             return;
         const minusBtn = this.shadowRoot.querySelector('.c-minus');
@@ -3573,7 +3827,7 @@ class CardTag extends BaseElement {
         const bgColor = isCustomColor ? color + '1a' : preset.bg;
         const borderColor = isCustomColor ? color : preset.border;
         const textColor = isCustomColor ? color : preset.text;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -3609,7 +3863,7 @@ class CardTag extends BaseElement {
         ${text}
         ${closable ? '<span class="close-btn">✕</span>' : ''}
       </span>
-    `;
+    `);
         if (closable) {
             this.shadowRoot.querySelector('.close-btn')?.addEventListener('click', () => {
                 this.dispatchEvent(new CustomEvent('close', {
@@ -3664,7 +3918,7 @@ class CardSelect extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { options = [], placeholder = '请选择', value: externalValue, defaultValue = '', disabled = false, readonly: readOnly = false, ariaLabel = placeholder, size = 'medium', variant = 'outlined', accentColor = '#1677ff', style, styles = {}, isExpressionResultStyle, } = this._props;
+        const { options = [], placeholder = '请选择', value: externalValue, defaultValue = '', disabled = false, readonly: readOnly = false, ariaLabel = placeholder, size = 'medium', variant = 'outlined', accentColor = '#1677ff', arrowSize, style, styles = {}, isExpressionResultStyle, } = this._props;
         const propValue = String(externalValue ?? defaultValue ?? '');
         const resolvedSize = (['small', 'medium', 'large'].includes(size)
             ? size
@@ -3702,6 +3956,7 @@ class CardSelect extends BaseElement {
                 optionPadding: '5px 12px',
             },
         }[resolvedSize];
+        const resolvedArrowSize = arrowSize ?? sizePreset.arrowSize;
         const variantPreset = {
             outlined: {
                 background: '#fff',
@@ -3725,13 +3980,14 @@ class CardSelect extends BaseElement {
         this.applyHostStyles(style, isExpressionResultStyle, String(accentColor));
         const triggerInline = this.buildInlineStyle(semanticStyles.trigger, isExpressionResultStyle);
         const dropdownInline = this.buildInlineStyle(semanticStyles.dropdown, isExpressionResultStyle);
+        const arrowInline = this.buildInlineStyle(semanticStyles.arrow, isExpressionResultStyle);
         const selectedOption = options.find((o) => o.value === value);
         const displayText = selectedOption ? selectedOption.label : placeholder;
         const isPlaceholder = !selectedOption;
         const openClass = this._open ? 'open' : '';
         const arrowIcon = renderIconContent({
             name: 'caret_down',
-            size: sizePreset.arrowSize,
+            size: this.toCSS(resolvedArrowSize),
             color: 'currentColor',
         });
         const listboxId = `${this._node.id}-listbox`;
@@ -3740,7 +3996,7 @@ class CardSelect extends BaseElement {
             && this._activeIndex < options.length)
             ? `${this._node.id}-option-${this._activeIndex}`
             : '';
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-block;
@@ -3797,8 +4053,8 @@ class CardSelect extends BaseElement {
           flex: none;
           align-items: center;
           justify-content: center;
-          width: ${sizePreset.arrowSize}px;
-          height: ${sizePreset.arrowSize}px;
+          width: ${this.toCSS(resolvedArrowSize)};
+          height: ${this.toCSS(resolvedArrowSize)};
           margin-left: 8px;
           color: ${disabled ? '#bfbfbf' : '#999'};
           transition: transform 0.2s;
@@ -3885,7 +4141,7 @@ class CardSelect extends BaseElement {
         style="${triggerInline}"
       >
         <span class="select-text">${this.escapeText(String(displayText))}</span>
-        <span class="select-arrow ${openClass}">${arrowIcon}</span>
+        <span class="select-arrow ${openClass}" style="${arrowInline}">${arrowIcon}</span>
       </div>
       <div
         class="dropdown ${openClass}"
@@ -3911,7 +4167,7 @@ class CardSelect extends BaseElement {
           ><span class="option-label">${this.escapeText(String(opt.label))}</span></div>`);
         }).join('')}
       </div>
-    `;
+    `);
         if (disabled)
             return;
         const trigger = this.shadowRoot.querySelector('.select-trigger');
@@ -3938,13 +4194,13 @@ class CardSelect extends BaseElement {
     disconnectedCallback() {
         document.removeEventListener('click', this._onDocClick);
     }
-    updateProps(props, isMobile) {
+    updateProps(props, isMobile, responsive) {
         if (Object.prototype.hasOwnProperty.call(props, 'value')
             || Object.prototype.hasOwnProperty.call(props, 'defaultValue')) {
             this._localValue = null;
             this._propValue = undefined;
         }
-        super.updateProps(props, isMobile);
+        super.updateProps(props, isMobile, responsive);
     }
     _setOpen(open) {
         if (this._open === open)
@@ -4092,7 +4348,7 @@ class CardPasscodeInput extends BaseElement {
         autocomplete="one-time-code"
         ${disabled ? 'disabled' : ''}
       />`).join('');
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -4128,7 +4384,7 @@ class CardPasscodeInput extends BaseElement {
         }
       </style>
       <div class="passcode-wrapper">${inputs}</div>
-    `;
+    `);
         if (disabled)
             return;
         const cells = this.shadowRoot.querySelectorAll('.passcode-cell');
@@ -4211,10 +4467,10 @@ class CardIcon extends BaseElement {
         const iconContent = renderIconContent({
             name,
             src,
-            size: iconSize,
+            size: this.toCSS(iconSize),
             color,
         });
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -4237,7 +4493,7 @@ class CardIcon extends BaseElement {
         }
       </style>
       <span class="icon-wrapper" style="${inlineStyle}">${iconContent}</span>
-    `;
+    `);
     }
 }
 CardIcon.is = 'ai-card-icon';
@@ -4319,7 +4575,7 @@ class CardForm extends BaseElement {
         const fieldItems = fields
             .map((field, index) => this._renderField(field, index))
             .join('');
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -4479,13 +4735,13 @@ class CardForm extends BaseElement {
         ${fieldItems}
         <button class="submit-btn" ${disabled ? 'disabled' : ''} style="${isHorizontal ? `margin-left: 84px;` : ''}">${submitText}</button>
       </div>
-    `;
+    `);
         this._initializeSelectFields(fields, disabled);
         this._initializeRateFields(fields, disabled);
         this._bindEvents(fields, disabled);
     }
     _renderField(field, index) {
-        const { name, label, type = 'text', placeholder = '', required = false, rules = [], prefix, suffix, options = [], length = 6, } = field;
+        const { name, label, type = 'text', placeholder = '', required = false, rules = [], prefix, suffix, length = 6, } = field;
         const val = this._values[name] ?? '';
         const error = this._errors[name] || '';
         const errorClass = error ? 'error' : '';
@@ -4600,7 +4856,7 @@ class CardForm extends BaseElement {
                 events: undefined,
                 directives: undefined,
             };
-            selectElement.setData(node, props, this._isMobile);
+            selectElement.setData(node, props, this._isMobile, this._responsiveOptions);
             const label = selectElement
                 .closest('.form-field')
                 ?.querySelector('.field-label');
@@ -4653,7 +4909,7 @@ class CardForm extends BaseElement {
                 events: undefined,
                 directives: undefined,
             };
-            rateElement.setData(node, props, this._isMobile);
+            rateElement.setData(node, props, this._isMobile, this._responsiveOptions);
             const label = rateElement
                 .closest('.form-field')
                 ?.querySelector('.field-label');
@@ -4964,7 +5220,7 @@ class CardLoading extends BaseElement {
         const displayText = text ? this.resolveContent(text) : '';
         const px = typeof size === 'number' ? `${size}px` : size;
         const dur = typeof duration === 'number' ? `${duration}s` : duration;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -4993,7 +5249,7 @@ class CardLoading extends BaseElement {
       </style>
       <div class="spinner"></div>
       ${displayText ? `<span class="loading-text">${displayText}</span>` : ''}
-    `;
+    `);
         if (inlineStyle) {
             this.style.cssText += ';' + inlineStyle;
         }
@@ -5185,6 +5441,7 @@ class CardProgress extends BaseElement {
                 track.setAttribute('aria-valuetext', valueText);
         }
         this.shadowRoot.replaceChildren(styleElement, wrapper);
+        applyResponsiveStyles(this.shadowRoot, this._responsive);
     }
     buildLegend(segments, position, style, isExpressionResultStyle) {
         const labeled = segments.filter((segment) => segment.label?.trim());
@@ -5378,7 +5635,7 @@ class CardSteps extends BaseElement {
         </div>
       `;
         }).join('');
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -5483,7 +5740,7 @@ class CardSteps extends BaseElement {
         }
       </style>
       <div class="steps-wrapper" style="${inlineStyle}">${stepsHTML}</div>
-    `;
+    `);
         // Bind click only on clickable steps → dispatch `step-click` event
         this.shadowRoot.querySelectorAll('.step-clickable').forEach((el) => {
             el.addEventListener('click', (e) => {
@@ -5577,10 +5834,12 @@ class CardCollapse extends BaseElement {
         // Arrow HTML: custom image or built-in SVG
         const arrowHTML = arrowIconUrl
             ? `<img src="${arrowIconUrl}" width="7" height="7" style="display:block" />`
-            : `<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-              <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>`;
-        this.shadowRoot.innerHTML = `
+            : renderIconContent({
+                name: 'caret_down',
+                size: this.toCSS(12),
+                color: 'currentColor',
+            });
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -5703,11 +5962,13 @@ class CardCollapse extends BaseElement {
           </span>
         </div>
         <div class="collapse-body ${this._expanded ? 'expanded' : ''}" style="${bodyInlineStyle}">
-          <div class="collapse-content" style="${contentInlineStyle}">${bodyHTML ? bodyHTML : ''}</div>
+          <div class="collapse-content" style="${contentInlineStyle}">
+            <div class="collapse-markdown" data-responsive-content="preserve">${bodyHTML ? bodyHTML : ''}</div>
+          </div>
           <div class="collapse-slot"><slot></slot></div>
         </div>
       </div>
-    `;
+    `);
         // Bind click event
         const header = this.shadowRoot.querySelector('.collapse-header');
         header?.addEventListener('click', () => this._toggle());
@@ -5879,7 +6140,7 @@ class CardHtml extends BaseElement {
         }
         if (inlineStyle)
             wrapperStyles.push(inlineStyle);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         /* Functional styles ONLY — content presentation is owned by the HTML
            itself (browser semantic defaults + the model's inline styles).
@@ -5899,9 +6160,10 @@ class CardHtml extends BaseElement {
       </style>
       <div
         class="card-html ${isMobile ? 'card-mobile' : 'card-desktop'}"
+        data-responsive-content="preserve"
         style="${wrapperStyles.join(';')}"
       >${safeHtml}</div>
-    `;
+    `);
         // Restore scroll state after replacement (only relevant with maxHeight)
         if (maxHeight != null) {
             const wrapper = this.shadowRoot.querySelector('.card-html');
@@ -6072,7 +6334,7 @@ class CardDatePicker extends BaseElement {
             displayText = showTodayPrefix && isToday(date) ? `${todayText}, ${formatted}` : formatted;
         }
         const hostWidth = width != null && width !== '' ? `width: ${this.toCSS(width)};` : '';
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-block;
@@ -6175,7 +6437,7 @@ class CardDatePicker extends BaseElement {
         <span class="trigger-arrow ${this._open ? 'open' : ''}">${CHEVRON_ICON}</span>
       </div>
       <div class="panel ${this._open ? 'open' : ''}"><div class="panel-calendar"></div></div>
-    `;
+    `);
         if (disabled)
             return;
         const trigger = this.shadowRoot.querySelector('.trigger');
@@ -6407,7 +6669,7 @@ class CardAudio extends BaseElement {
         const valid = isSafeMediaSrc(src);
         // Audible autoplay is blocked by browsers — only ever autoplay muted
         const effectiveMuted = muted || autoplay;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -6438,7 +6700,7 @@ class CardAudio extends BaseElement {
             style="${inlineStyle}"
           ></audio>`
             : `<div class="placeholder" style="${inlineStyle}">暂无可播放的媒体源</div>`}
-    `;
+    `);
         const media = this.shadowRoot.querySelector('audio');
         if (media) {
             // The `muted` content attribute only applies before load — set the
@@ -6492,7 +6754,7 @@ class CardVideo extends BaseElement {
         const videoHeight = height != null && height !== '' ? `height: ${this.toCSS(height)};` : '';
         const valid = isSafeMediaSrc(src);
         const effectiveMuted = muted || autoplay;
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -6530,7 +6792,7 @@ class CardVideo extends BaseElement {
             style="${inlineStyle}"
           ></video>`
             : `<div class="placeholder" style="${inlineStyle}">暂无可播放的媒体源</div>`}
-    `;
+    `);
         const media = this.shadowRoot.querySelector('video');
         if (media) {
             media.muted = effectiveMuted;
@@ -6574,7 +6836,7 @@ class CardSwitch extends BaseElement {
             ...(thumbStyle || {}),
             backgroundColor: thumbColor,
         }, isExpressionResultStyle);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: inline-flex;
@@ -6642,7 +6904,7 @@ class CardSwitch extends BaseElement {
           <span class="switch-thumb" part="thumb" style="${thumbInline}"></span>
         </button>
       </div>
-    `;
+    `);
         const button = this.shadowRoot.querySelector('.switch-track');
         button?.addEventListener('click', () => {
             if (disabled || readOnly)
@@ -6761,7 +7023,7 @@ class CardChoiceItem extends BaseElement {
         this.setAttribute('data-selected', String(selected));
         this.toggleAttribute('data-disabled', fullyDisabled);
         this.toggleAttribute('data-selection-blocked', selectionBlocked);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -6852,7 +7114,7 @@ class CardChoiceItem extends BaseElement {
         </div>
         ${indicatorPosition === 'end' ? this.renderIndicator(indicatorRole, selected, selectionUnavailable, tabIndex, ariaLabel, indicatorInline, checkedMark) : ''}
       </div>
-    `;
+    `);
         const root = this.shadowRoot.querySelector('.choice-item');
         const indicator = this.shadowRoot.querySelector('.choice-indicator');
         indicator?.addEventListener('click', (event) => {
@@ -6993,7 +7255,7 @@ class CardChoiceList extends BaseElement {
         this.addEventListener('choice-request-change', this._onChoiceRequest);
         this.removeEventListener('choice-navigate', this._onChoiceNavigate);
         this.addEventListener('choice-navigate', this._onChoiceNavigate);
-        this.shadowRoot.innerHTML = `
+        this.setShadowHTML(`
       <style>
         :host {
           display: block;
@@ -7016,7 +7278,7 @@ class CardChoiceList extends BaseElement {
       >
         <slot></slot>
       </div>
-    `;
+    `);
         this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this.syncItems());
         queueMicrotask(() => this.syncItems());
     }
@@ -7227,159 +7489,159 @@ if (typeof customElements !== 'undefined'
  * Render a Text node as an `<ai-card-text>` Custom Element.
  * All text styling is scoped inside Shadow DOM.
  */
-function renderText(node, props, isMobile) {
+function renderText(node, props, isMobile, responsive) {
     const el = document.createElement(CardText.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render a Button node as an `<ai-card-button>` Custom Element.
  * Supports variants (primary/secondary/text/danger), sizes, disabled state.
  */
-function renderButton(node, props, isMobile) {
+function renderButton(node, props, isMobile, responsive) {
     const el = document.createElement(CardButton.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render an Input node as an `<ai-card-input>` Custom Element.
  * Supports text/password/number/textarea, label, placeholder, validation.
  */
-function renderInput(node, props, isMobile) {
+function renderInput(node, props, isMobile, responsive) {
     const el = document.createElement(CardInput.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render an Image node as an `<ai-card-image>` Custom Element.
  * Supports click-to-zoom lightbox preview.
  */
-function renderImage(node, props, isMobile) {
+function renderImage(node, props, isMobile, responsive) {
     const el = document.createElement(CardImage.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Divider node. */
-function renderDivider(node, props, isMobile) {
+function renderDivider(node, props, isMobile, responsive) {
     const el = document.createElement(CardDivider.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Rate node. */
-function renderRate(node, props, isMobile) {
+function renderRate(node, props, isMobile, responsive) {
     const el = document.createElement(CardRate.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Counter node. */
-function renderCounter(node, props, isMobile) {
+function renderCounter(node, props, isMobile, responsive) {
     const el = document.createElement(CardCounter.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Tag node. */
-function renderTag(node, props, isMobile) {
+function renderTag(node, props, isMobile, responsive) {
     const el = document.createElement(CardTag.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Select node. */
-function renderSelect(node, props, isMobile) {
+function renderSelect(node, props, isMobile, responsive) {
     const el = document.createElement(CardSelect.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a PasscodeInput node. */
-function renderPasscodeInput(node, props, isMobile) {
+function renderPasscodeInput(node, props, isMobile, responsive) {
     const el = document.createElement(CardPasscodeInput.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render an Icon node. */
-function renderIcon(node, props, isMobile) {
+function renderIcon(node, props, isMobile, responsive) {
     const el = document.createElement(CardIcon.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Form node. */
-function renderForm(node, props, isMobile) {
+function renderForm(node, props, isMobile, responsive) {
     const el = document.createElement(CardForm.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Loading node. */
-function renderLoading(node, props, isMobile) {
+function renderLoading(node, props, isMobile, responsive) {
     const el = document.createElement(CardLoading.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Progress node. */
-function renderProgress(node, props, isMobile) {
+function renderProgress(node, props, isMobile, responsive) {
     const el = document.createElement(CardProgress.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Steps node. */
-function renderSteps(node, props, isMobile) {
+function renderSteps(node, props, isMobile, responsive) {
     const el = document.createElement(CardSteps.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render a Collapse node as an `<ai-card-collapse>` Custom Element.
  * Expandable/collapsible panel for AI thinking content.
  */
-function renderCollapse(node, props, isMobile) {
+function renderCollapse(node, props, isMobile, responsive) {
     const el = document.createElement(CardCollapse.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render an Html node as an `<ai-card-html>` Custom Element.
  * Model-emitted HTML fragments, allow-list sanitized before display.
  */
-function renderHtml(node, props, isMobile) {
+function renderHtml(node, props, isMobile, responsive) {
     const el = document.createElement(CardHtml.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
  * Render a DatePicker node as an `<ai-card-date-picker>` Custom Element.
  * Trigger + popup calendar panel (vanilla-calendar-pro).
  */
-function renderDatePicker(node, props, isMobile) {
+function renderDatePicker(node, props, isMobile, responsive) {
     const el = document.createElement(CardDatePicker.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render an Audio node as an `<ai-card-audio>` Custom Element. */
-function renderAudio(node, props, isMobile) {
+function renderAudio(node, props, isMobile, responsive) {
     const el = document.createElement(CardAudio.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Video node as an `<ai-card-video>` Custom Element. */
-function renderVideo(node, props, isMobile) {
+function renderVideo(node, props, isMobile, responsive) {
     const el = document.createElement(CardVideo.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a Switch node. */
-function renderSwitch(node, props, isMobile) {
+function renderSwitch(node, props, isMobile, responsive) {
     const el = document.createElement(CardSwitch.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a ChoiceList node. */
-function renderChoiceList(node, props, isMobile) {
+function renderChoiceList(node, props, isMobile, responsive) {
     const el = document.createElement(CardChoiceList.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /** Render a ChoiceItem node. */
-function renderChoiceItem(node, props, isMobile) {
+function renderChoiceItem(node, props, isMobile, responsive) {
     const el = document.createElement(CardChoiceItem.is);
-    el.setData(node, props, isMobile);
+    el.setData(node, props, isMobile, responsive);
     return el;
 }
 /**
@@ -7389,7 +7651,7 @@ function renderChoiceItem(node, props, isMobile) {
  *
  * Layout is handled by the slot system in slots.ts (called from renderCard).
  */
-function renderDefault(node, props, isMobile) {
+function renderDefault(node, props, isMobile, responsive) {
     const div = document.createElement('div');
     div.className = `card-element card-${node.type.toLowerCase()} ${isMobile ? 'card-mobile' : 'card-desktop'}`;
     div.setAttribute('data-card-id', node.id);
@@ -7401,6 +7663,7 @@ function renderDefault(node, props, isMobile) {
         if (resolvedStyle)
             div.style.cssText += ';' + resolvedStyle;
     }
+    applyResponsiveStyles(div, createResponsiveContext(isMobile, responsive));
     return div;
 }
 // ─── Registry ────────────────────────────────────────────────────
@@ -7475,18 +7738,9 @@ function renderBoundCard(container, schema, options) {
     let currentMaterialized;
     let revision = 0;
     let disposed = false;
-    let isMobile = options.isMobile ?? isMobileViewport();
+    const isMobile = options.isMobile === true;
     let actionQueue = Promise.resolve();
     let lifecycleQueue = Promise.resolve();
-    const removeViewportListener = options.isMobile == null
-        ? onViewportChange((mobile) => {
-            if (disposed)
-                return;
-            isMobile = mobile;
-            const candidate = prepareCandidate(variables);
-            publishDOM(candidate, false);
-        })
-        : () => { };
     function expressionContextFor(node) {
         return isBoundRenderTreeNode(node)
             ? createExpressionContext(node.scope)
@@ -7545,7 +7799,7 @@ function renderBoundCard(container, schema, options) {
                 || resolved === 1);
         }
         const renderer = (componentRenderers[node.type] ?? componentRenderers._default);
-        const el = renderer(node, resolvedProps, isMobile);
+        const el = renderer(node, resolvedProps, isMobile, options.responsive);
         if (isDisabled) {
             el.setAttribute('data-disabled', 'true');
             el.style.background = '#F5F5F5';
@@ -7608,6 +7862,7 @@ function renderBoundCard(container, schema, options) {
                 htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
             });
         }
+        applyResponsiveStyles(el, createResponsiveContext(isMobile, options.responsive));
         return el;
     }
     function prepareCandidate(draft) {
@@ -7636,9 +7891,13 @@ function renderBoundCard(container, schema, options) {
         return selected;
     }
     function createLifecycleActionContext(node) {
-        const writeLiveVariable = (key, value) => {
+        const writeLiveVariable = (key, value, silent = false) => {
             if (disposed)
                 return;
+            if (silent) {
+                writeDraftVariable(variables, key, cloneJsonData(value));
+                return;
+            }
             updateVariables({ [key]: value });
         };
         return {
@@ -7652,7 +7911,9 @@ function renderBoundCard(container, schema, options) {
             parameterResolver: node.bindingDialect === 'a2ui'
                 ? createA2UIParameterResolver(variables, node.dataPath)
                 : undefined,
-            variableWriter: (key, value) => writeLiveVariable(key, value),
+            variableWriter: (key, value, options) => {
+                writeLiveVariable(key, value, options.silent);
+            },
             botId: options.botId,
             inflightRequests,
         };
@@ -7796,7 +8057,6 @@ function renderBoundCard(container, schema, options) {
                 return;
             disposed = true;
             abortController.abort();
-            removeViewportListener();
             disposeChartsIn(container);
             container.replaceChildren();
             const lifecycleNodes = [...activeLifecycleNodes.entries()];
@@ -7947,13 +8207,7 @@ function renderStaticCard(container, schema, options) {
     }
     let actionContext = buildActionContext();
     // 5. Responsive
-    let isMobile = options.isMobile ?? isMobileViewport();
-    const removeViewportListener = options.isMobile == null
-        ? onViewportChange((mobile) => {
-            isMobile = mobile;
-            rerender();
-        })
-        : () => { };
+    const isMobile = options.isMobile === true;
     // 6. Schema-level action definitions (for string references in events)
     const schemaActions = schema.actions ?? {};
     // 7. Render function
@@ -7962,7 +8216,7 @@ function renderStaticCard(container, schema, options) {
         const mediaStates = captureMediaStates(container);
         disposeChartsIn(container); // tear down old chart instances before clearing
         container.innerHTML = '';
-        const dom = renderNode(tree, variables, actionContext, isMobile, lifecycleManager, schemaActions);
+        const dom = renderNode(tree, variables, actionContext, isMobile, options.responsive, lifecycleManager, schemaActions);
         container.appendChild(dom);
         restoreScrollPositions(container, scrollPositions);
         restoreMediaStates(container, mediaStates);
@@ -7977,7 +8231,6 @@ function renderStaticCard(container, schema, options) {
     return {
         dispose() {
             abortController.abort();
-            removeViewportListener();
             lifecycleManager.dispose(actionContext);
             disposeChartsIn(container);
             container.innerHTML = '';
@@ -8060,7 +8313,7 @@ function restoreMediaStates(root, states) {
     });
 }
 // ─── Recursive Node Renderer ─────────────────────────────────────
-function renderNode(node, variables, actionContext, isMobile, lifecycleManager, schemaActions) {
+function renderNode(node, variables, actionContext, isMobile, responsive, lifecycleManager, schemaActions) {
     // Check directives.visible
     if (node.directives?.visible) {
         const visibleExpr = node.directives.visible;
@@ -8092,7 +8345,7 @@ function renderNode(node, variables, actionContext, isMobile, lifecycleManager,
     }
     // Lookup component renderer
     const renderer = componentRenderers[node.type] ?? componentRenderers['_default'];
-    const el = renderer(node, resolvedProps, isMobile);
+    const el = renderer(node, resolvedProps, isMobile, responsive);
     // Apply disabled styling & attribute
     if (isDisabled) {
         el.setAttribute('data-disabled', 'true');
@@ -8154,7 +8407,7 @@ function renderNode(node, variables, actionContext, isMobile, lifecycleManager,
         lifecycleManager.mount(node.id, actionContext);
     }
     // Render children — use slot layout if applicable, otherwise flat append
-    const renderChild = (child) => renderNode(child, variables, actionContext, isMobile, lifecycleManager, schemaActions);
+    const renderChild = (child) => renderNode(child, variables, actionContext, isMobile, responsive, lifecycleManager, schemaActions);
     // Build children-by-id map for layouts that reference IDs (columns groups, float overlays)
     const childrenMap = {};
     for (const child of node.children) {
@@ -8175,6 +8428,7 @@ function renderNode(node, variables, actionContext, isMobile, lifecycleManager,
             htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
         });
     }
+    applyResponsiveStyles(el, createResponsiveContext(isMobile, responsive));
     return el;
 }
 /** Map schema event names → DOM event names */
@@ -8249,7 +8503,7 @@ function renderStreamingCard(container, options = {}) {
     let partialVariablesSent = false;
     let partialFinalized = false;
     let variables = { ...options.variables };
-    let isMobile = options.isMobile ?? isMobileViewport();
+    const isMobile = options.isMobile === true;
     let currentSchema = null;
     let currentSurfaceId = null;
     let currentMaterialized = null;
@@ -8261,16 +8515,6 @@ function renderStreamingCard(container, options = {}) {
     const activeBoundLifecycles = new Map();
     const mountedBoundLifecycles = new Map();
     const boundLifecycleGenerations = new Map();
-    // Responsive viewport detection
-    const removeViewportListener = options.isMobile == null
-        ? onViewportChange((mobile) => {
-            isMobile = mobile;
-            // Re-render all elements with new mobile state if schema exists
-            if (currentSchema) {
-                rerenderAll();
-            }
-        })
-        : () => { };
     // ─── Action Context ─────────────────────────────────────────────
     function buildActionContext() {
         return {
@@ -8410,7 +8654,7 @@ function renderStreamingCard(container, options = {}) {
         indexes.props.set(node.id, boundNodeFingerprint(node, renderVariables, resolvedProps));
         const isDisabled = computeBoundDisabled(node, renderVariables);
         const renderer = (componentRenderers[node.type] ?? componentRenderers._default);
-        const element = renderer(node, resolvedProps, isMobile);
+        const element = renderer(node, resolvedProps, isMobile, options.responsive);
         if (isDisabled) {
             element.setAttribute('data-disabled', 'true');
             element.style.background = '#F5F5F5';
@@ -8461,6 +8705,7 @@ function renderStreamingCard(container, options = {}) {
                 element.appendChild(renderChild(child));
             }
         }
+        applyResponsiveStyles(element, createResponsiveContext(isMobile, options.responsive));
         return element;
     }
     /**
@@ -8502,7 +8747,7 @@ function renderStreamingCard(container, options = {}) {
         }
         // Create element
         const renderer = componentRenderers[node.type] ?? componentRenderers['_default'];
-        const el = renderer(node, resolvedProps, isMobile);
+        const el = renderer(node, resolvedProps, isMobile, options.responsive);
         // Apply disabled
         if (isDisabled) {
             el.setAttribute('data-disabled', 'true');
@@ -8559,6 +8804,7 @@ function renderStreamingCard(container, options = {}) {
                 el.appendChild(renderChild(child));
             }
         }
+        applyResponsiveStyles(el, createResponsiveContext(isMobile, options.responsive));
         return el;
     }
     // ─── Incremental Rendering Helpers ──────────────────────────────
@@ -8689,7 +8935,7 @@ function renderStreamingCard(container, options = {}) {
             if (propsCache.get(id) === key)
                 continue;
             if ('updateProps' in el) {
-                el.updateProps(resolved, isMobile);
+                el.updateProps(resolved, isMobile, options.responsive);
                 propsCache.set(id, key);
             }
             else if (!replaceSubtree(schema, id, el)) {
@@ -9640,17 +9886,24 @@ function renderStreamingCard(container, options = {}) {
             console.warn('[renderStreamingCard] Deferred render (incomplete schema):', error);
         }
     }
-    /**
-     * Re-render all elements (viewport changes — isMobile affects every renderer's
-     * output, so the incremental diff cache cannot be reused here).
-     */
-    function rerenderAll() {
-        actionContext = buildActionContext();
-        safeRenderFull();
-    }
     // ─── Engine Event Handlers ──────────────────────────────────────
     const engine = new StreamingEngine({
         onSurfaceCreated(surfaceId, schemaInput) {
+            if (schemaInput) {
+                const nextSchema = engine.getSchema(surfaceId)
+                    ?? normalizeSchema(schemaInput);
+                if (requiresBindingMaterialization(nextSchema)) {
+                    const baseRevision = boundRevision;
+                    const draft = cloneJsonData({
+                        ...nextSchema.variables,
+                        ...options.variables,
+                    });
+                    const prepared = prepareBoundFull(nextSchema, cloneJsonData(draft));
+                    commitBoundFull(prepared, nextSchema, draft, baseRevision, () => replaceRootContents(nextSchema.variables, draft));
+                    currentSurfaceId = surfaceId;
+                    return;
+                }
+            }
             teardownBoundLifecycles();
             boundRevision += 1;
             currentSurfaceId = surfaceId;
@@ -9840,7 +10093,7 @@ function renderStreamingCard(container, options = {}) {
                         continue;
                     const typeChanged = el.getAttribute('data-card-type') !== element.type;
                     if (!typeChanged && 'updateProps' in el) {
-                        el.updateProps(resolved, isMobile);
+                        el.updateProps(resolved, isMobile, options.responsive);
                         propsCache.set(id, key);
                     }
                     else if (!typeChanged && isChildrenOnlyChange(propsCache.get(id), key, element)) {
@@ -9950,7 +10203,7 @@ function renderStreamingCard(container, options = {}) {
                 const node = indexBoundNodes(nextMaterialized.root).get(elementId);
                 if (node && node.id === node.sourceId && 'updateProps' in el) {
                     const resolved = resolveBoundNodeProps(node, variables);
-                    el.updateProps(resolved, isMobile);
+                    el.updateProps(resolved, isMobile, options.responsive);
                     propsCache.set(elementId, boundNodeFingerprint(node, variables, resolved));
                     currentMaterialized = nextMaterialized;
                     boundRevision += 1;
@@ -9977,7 +10230,7 @@ function renderStreamingCard(container, options = {}) {
                 }
             }
         },
-        onSurfaceDeleted(surfaceId) {
+        onSurfaceDeleted(_surfaceId) {
             disposeChartsIn(container); // release old ECharts instances before clearing
             container.innerHTML = '';
             elementMap.clear();
@@ -10072,7 +10325,6 @@ function renderStreamingCard(container, options = {}) {
             disposed = true;
             boundRevision += 1;
             abortController.abort();
-            removeViewportListener();
             teardownBoundLifecycles();
             lifecycleManager.dispose(actionContext);
             disposeChartsIn(container); // release ECharts instances before clearing
@@ -10241,7 +10493,7 @@ class BotSDK {
         this._instances = [];
         /** Declarative action chains loaded from actionProvider */
         this._actionChains = new Map();
-        this.botId = options.botId;
+        this.botId = options.botId ?? '';
         this.baseUrl = options.baseUrl ?? '';
         // Source B: Batch-register action handler functions (sync, immediate)
         if (options.onAction) {
@@ -10422,4 +10674,4 @@ class RemoteActionConfigProvider {
     }
 }
 
-export { BaseElement, BotSDK, CardButton, CardChoiceItem, CardChoiceList, CardCollapse, CardCounter, CardDivider, CardForm, CardHtml, CardIcon, CardImage, CardInput, CardLoading, CardPasscodeInput, CardProgress, CardRate, CardSelect, CardSteps, CardSwitch, CardTag, CardText, LocalActionConfigProvider, RemoteActionConfigProvider, buildStyleString, componentRenderers, connectSSE, connectStreaming, createWebActionContext, isMobileViewport, onViewportChange, pxToRem, pxToVw, registerComponent, renderCard, renderStreamingCard, resolveSize, sanitizeHtml, trimIncompleteTag };
+export { BaseElement, BotSDK, CardButton, CardChoiceItem, CardChoiceList, CardCollapse, CardCounter, CardDivider, CardForm, CardHtml, CardIcon, CardImage, CardInput, CardLoading, CardPasscodeInput, CardProgress, CardRate, CardSelect, CardSteps, CardSwitch, CardTag, CardText, DEFAULT_MOBILE_RESPONSIVE, LocalActionConfigProvider, RemoteActionConfigProvider, buildStyleString, componentRenderers, connectSSE, connectStreaming, convertPixelTokens, createResponsiveContext, createWebActionContext, isMobileViewport, onViewportChange, pxToRem, pxToVw, registerComponent, renderCard, renderStreamingCard, resolveSize, sanitizeHtml, trimIncompleteTag };