@antglobal/copilot-cards-web 1.0.2 → 1.0.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getBuiltinIcon, normalizeSchema, validateSchema, parseSchema, createLifecycleManager, hasExpression, resolveExpression, resolveDeep, resolveExpressionValue, resolveActionRef, runActionSteps, StreamingParser, StreamingEngine, extractPartialSchema, runActionStep, registry } from '@antglobal/copilot-cards-core';
+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';
 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';
@@ -117,6 +117,57 @@ echarts.use([
 // ─── Entry ──────────────────────────────────────────────────────
 /** Attribute marking a DOM node that hosts an ECharts instance. */
 const CHART_ROOT_ATTR = 'data-echarts-root';
+const chartResizeRegistrations = new WeakMap();
+function toChartCSSSize(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    if (typeof value === 'string' && value.trim()) {
+        return value;
+    }
+    return `${fallback}px`;
+}
+function disconnectChartResize(chartRoot) {
+    const registration = chartResizeRegistrations.get(chartRoot);
+    if (!registration)
+        return;
+    registration.observer.disconnect();
+    if (registration.frameID !== null) {
+        cancelAnimationFrame(registration.frameID);
+    }
+    chartResizeRegistrations.delete(chartRoot);
+}
+function observeChartResize(chartRoot, chart) {
+    disconnectChartResize(chartRoot);
+    if (typeof ResizeObserver === 'undefined')
+        return;
+    const observer = new ResizeObserver(() => {
+        const registration = chartResizeRegistrations.get(chartRoot);
+        if (!registration)
+            return;
+        if (!chartRoot.isConnected || chart.isDisposed?.()) {
+            disconnectChartResize(chartRoot);
+            return;
+        }
+        if (registration.frameID !== null) {
+            cancelAnimationFrame(registration.frameID);
+        }
+        registration.frameID = requestAnimationFrame(() => {
+            registration.frameID = null;
+            if (chartResizeRegistrations.get(chartRoot) === registration &&
+                chartRoot.isConnected &&
+                !chart.isDisposed?.()) {
+                chart.resize();
+            }
+        });
+    });
+    const registration = {
+        observer,
+        frameID: null,
+    };
+    chartResizeRegistrations.set(chartRoot, registration);
+    observer.observe(chartRoot);
+}
 /**
  * Dispose every ECharts instance inside `container` and release their global
  * resize listeners. Call before clearing/detaching a card's DOM (re-render or
@@ -126,6 +177,7 @@ const CHART_ROOT_ATTR = 'data-echarts-root';
 function disposeChartsIn(container) {
     const roots = container.querySelectorAll(`[${CHART_ROOT_ATTR}]`);
     roots.forEach((node) => {
+        disconnectChartResize(node);
         const inst = echarts.getInstanceByDom(node);
         if (inst)
             inst.dispose();
@@ -135,10 +187,9 @@ function renderChartSlot(container, slotContent, actionContext) {
     const config = slotContent?.config;
     if (!config || !config.type)
         return;
-    const width = config.width ?? 340;
-    const height = config.height ?? 240;
     const chartDiv = document.createElement('div');
-    chartDiv.style.cssText = `width:${width}px;height:${height}px`;
+    chartDiv.style.width = toChartCSSSize(config.width, 340);
+    chartDiv.style.height = toChartCSSSize(config.height, 240);
     // Marker so disposeChartsIn() can find and tear down the ECharts instance
     // before its host DOM is detached (otherwise the instance and its global
     // resize listener leak on every re-render).
@@ -146,6 +197,8 @@ function renderChartSlot(container, slotContent, actionContext) {
     container.appendChild(chartDiv);
     // Defer init to next frame to ensure DOM is mounted
     requestAnimationFrame(() => {
+        if (!chartDiv.isConnected)
+            return;
         const chart = echarts.init(chartDiv, undefined, { renderer: 'svg' });
         let option;
         switch (config.type) {
@@ -171,6 +224,7 @@ function renderChartSlot(container, slotContent, actionContext) {
                 return;
         }
         chart.setOption(option);
+        observeChartResize(chartDiv, chart);
         // Click action
         if (config.action && actionContext) {
             chart.on('click', (params) => {
@@ -1447,12 +1501,24 @@ class BaseElement extends HTMLElement {
         const processed = isExpressionResult
             ? style
             : this.resolveSizeInStyle(style);
-        return buildStyleString(processed);
+        return this.escapeAttribute(buildStyleString(processed));
     }
     /** Resolve a single size value (number → px). */
     toCSS(value) {
         return resolveSize(value);
     }
+    /**
+     * Escape a value before interpolating it into a double-quoted HTML
+     * attribute. Browsers decode the entities before parsing inline CSS, so
+     * valid CSS strings keep working while quotes cannot create attributes.
+     */
+    escapeAttribute(value) {
+        return value
+            .replace(/&/g, '&')
+            .replace(/"/g, '"')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
     resolveSizeInStyle(style) {
         const resolved = {};
         for (const [key, value] of Object.entries(style)) {
@@ -2229,6 +2295,82 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardButton.is))
     customElements.define(CardButton.is, CardButton);
 }
 
+function escapeAttr$1(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function escapeText$1(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function sanitizeImageSrc(src) {
+    const trimmed = String(src ?? '').trim();
+    const scheme = trimmed.replace(/[\s\x00-\x1f]/g, '').toLowerCase();
+    if (/^(javascript|vbscript|file):/.test(scheme))
+        return '';
+    if (/^data:/.test(scheme) && !/^data:image\//.test(scheme))
+        return '';
+    return trimmed;
+}
+function renderIconContent(input) {
+    const size = Number(input.size) || 24;
+    const name = input.name == null ? undefined : String(input.name);
+    if (input.src) {
+        return `<img class="icon-img" src="${escapeAttr$1(sanitizeImageSrc(input.src))}" ` +
+            `width="${size}" height="${size}" 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'))}" ` +
+            `aria-hidden="true">${icon.body}</svg>`;
+    }
+    return `<span class="icon-text" style="font-size:${size}px; line-height:1;">` +
+        `${escapeText$1(name ?? '?')}</span>`;
+}
+
+function escapeText(value) {
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/**
+ * Normalizes the compact Input affix API into safe markup.
+ *
+ * A string is the common shorthand. Objects either render `text`, or reuse
+ * the shared Icon renderer for built-in icons and external images.
+ */
+function renderInputAffix(affix) {
+    if (affix == null || affix === '')
+        return undefined;
+    if (typeof affix === 'string') {
+        return {
+            content: escapeText(affix),
+            ariaLabel: affix,
+        };
+    }
+    if (affix.text != null) {
+        return {
+            content: escapeText(affix.text),
+            ariaLabel: affix.ariaLabel ?? String(affix.text),
+            style: affix.style,
+        };
+    }
+    if (affix.name == null && affix.src == null)
+        return undefined;
+    return {
+        content: renderIconContent(affix),
+        ariaLabel: affix.ariaLabel,
+        style: affix.style,
+    };
+}
+
 /**
  * CardInput — Custom Element for rendering input fields in a card.
  *
@@ -2246,12 +2388,11 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardButton.is))
  * {
  *   "type": "Input",
  *   "props": {
- *     "placeholder": "Enter your name",
- *     "inputType": "text",
- *     "variableKey": "userName",
- *     "label": "Name",
- *     "maxLength": 100,
- *     "disabled": false,
+ *     "placeholder": "Phone Number",
+ *     "inputType": "tel",
+ *     "variableKey": "phone",
+ *     "prefix": "+86",
+ *     "suffix": { "name": "info", "size": 18 },
  *     "style": { "width": 300 }
  *   },
  *   "events": {
@@ -2260,33 +2401,146 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardButton.is))
  * }
  * ```
  */
+function getNumberStepperDisabledState(input) {
+    const blocked = input.disabled || input.readOnly;
+    if (blocked) {
+        return { increase: true, decrease: true };
+    }
+    const value = input.valueAsNumber;
+    if (!Number.isFinite(value)) {
+        return { increase: false, decrease: false };
+    }
+    const min = input.min === '' ? undefined : Number(input.min);
+    const max = input.max === '' ? undefined : Number(input.max);
+    return {
+        increase: Number.isFinite(max) && value >= Number(max),
+        decrease: Number.isFinite(min) && value <= Number(min),
+    };
+}
+function stepNumberInput(input, direction) {
+    if (input.disabled || input.readOnly)
+        return false;
+    const previousValue = input.value;
+    try {
+        if (direction === 'increase') {
+            input.stepUp();
+        }
+        else {
+            input.stepDown();
+        }
+    }
+    catch {
+        return false;
+    }
+    if (input.value === previousValue)
+        return false;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    return true;
+}
+function normalizeNumberAttribute(value, options = {}) {
+    if (value == null || value === '')
+        return undefined;
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric))
+        return undefined;
+    if (options.positive && numeric <= 0)
+        return undefined;
+    return numeric;
+}
 class CardInput extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { placeholder = '', inputType = 'text', label, defaultValue = '', disabled = false, readonly: readOnly = false, maxLength, rows, style, isExpressionResultStyle, } = this._props;
+        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 inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
+        const legacyInputStyle = style && typeof style === 'object' && style.resize != null
+            ? { resize: style.resize }
+            : {};
+        const nativeInlineStyle = this.buildInlineStyle({ ...legacyInputStyle, ...inputStyle }, isExpressionResultStyle);
         const isMobile = this._isMobile;
         const isTextarea = inputType === 'textarea';
+        const isNumber = inputType === 'number';
+        const showNumberStepper = isNumber && controls !== false;
+        const normalizedMin = normalizeNumberAttribute(min);
+        const normalizedMax = normalizeNumberAttribute(max);
+        const normalizedStep = normalizeNumberAttribute(step, { positive: true }) ?? 1;
+        const inputId = `${this._domId(this._node.id)}-control`;
+        const describedByIds = [];
+        const prefixAffix = renderInputAffix(prefix);
+        const suffixAffix = renderInputAffix(suffix);
+        const renderAffix = (position, affix) => {
+            if (!affix)
+                return '';
+            const affixId = `${inputId}-${position}`;
+            const affixStyle = this.buildInlineStyle(affix.style, isExpressionResultStyle);
+            const accessibility = affix.ariaLabel
+                ? `id="${affixId}" aria-label="${this.escapeAttr(affix.ariaLabel)}"`
+                : 'aria-hidden="true"';
+            if (affix.ariaLabel)
+                describedByIds.push(affixId);
+            return `<span class="input-affix input-${position}" ${accessibility} style="${affixStyle}">${affix.content}</span>`;
+        };
+        const prefixHtml = renderAffix('prefix', prefixAffix);
+        const suffixHtml = renderAffix('suffix', suffixAffix);
+        const describedBy = describedByIds.length > 0
+            ? `aria-describedby="${describedByIds.join(' ')}"`
+            : '';
+        const numberAttributes = isNumber
+            ? [
+                normalizedMin == null ? '' : `min="${normalizedMin}"`,
+                normalizedMax == null ? '' : `max="${normalizedMax}"`,
+                `step="${normalizedStep}"`,
+            ].filter(Boolean).join(' ')
+            : '';
+        const numberStepperHtml = showNumberStepper
+            ? `<span class="number-stepper">
+          <button
+            class="number-step-button increase"
+            type="button"
+            aria-label="Increase value"
+            ${disabled || readOnly ? 'disabled' : ''}
+          >${renderIconContent({
+                name: 'caret_up',
+                size: 12,
+                color: 'currentColor',
+            })}</button>
+          <button
+            class="number-step-button decrease"
+            type="button"
+            aria-label="Decrease value"
+            ${disabled || readOnly ? 'disabled' : ''}
+          >${renderIconContent({
+                name: 'caret_down',
+                size: 12,
+                color: 'currentColor',
+            })}</button>
+        </span>`
+            : '';
         const inputTag = isTextarea
             ? `<textarea
+          id="${inputId}"
           class="card-input ${isMobile ? 'card-mobile' : 'card-desktop'}"
-          placeholder="${this.escapeAttr(placeholder)}"
+          placeholder="${this.escapeAttr(String(placeholder))}"
+          ${describedBy}
           ${disabled ? 'disabled' : ''}
           ${readOnly ? 'readonly' : ''}
-          ${maxLength ? `maxlength="${maxLength}"` : ''}
-          rows="${rows ?? 3}"
-          style="${inlineStyle}"
+          ${maxLength != null ? `maxlength="${Number(maxLength)}"` : ''}
+          rows="${Number(rows ?? 3)}"
+          style="${nativeInlineStyle}"
         >${this.escapeHtml(String(defaultValue))}</textarea>`
             : `<input
+          id="${inputId}"
           class="card-input ${isMobile ? 'card-mobile' : 'card-desktop'}"
-          type="${inputType}"
-          placeholder="${this.escapeAttr(placeholder)}"
+          type="${this.escapeAttr(String(inputType))}"
+          placeholder="${this.escapeAttr(String(placeholder))}"
           value="${this.escapeAttr(String(defaultValue))}"
+          ${describedBy}
           ${disabled ? 'disabled' : ''}
           ${readOnly ? 'readonly' : ''}
-          ${maxLength ? `maxlength="${maxLength}"` : ''}
-          style="${inlineStyle}"
+          ${maxLength != null ? `maxlength="${Number(maxLength)}"` : ''}
+          ${numberAttributes}
+          style="${nativeInlineStyle}"
         />`;
         this.shadowRoot.innerHTML = `
       <style>
@@ -2307,36 +2561,132 @@ class CardInput extends BaseElement {
           color: #666;
           line-height: 1.4;
         }
-        .card-input {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            'Helvetica Neue', Arial, sans-serif;
-          font-size: 14px;
-          line-height: 1.5;
+        .input-control {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          box-sizing: border-box;
+          width: 100%;
           padding: 8px 12px;
           border: 1px solid #d9d9d9;
           border-radius: 6px;
           outline: none;
           color: #333;
           background-color: #fff;
-          box-sizing: border-box;
-          width: 100%;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+            'Helvetica Neue', Arial, sans-serif;
+          font-size: 14px;
+          line-height: 1.5;
           transition: border-color 0.2s ease, box-shadow 0.2s ease;
         }
-        .card-input::placeholder {
-          color: #bfbfbf;
-        }
-        .card-input:focus {
+        .input-control:focus-within {
           border-color: #1677ff;
           box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
         }
-        .card-input:disabled {
+        .input-control.disabled {
           background-color: #f5f5f5;
           color: #bfbfbf;
           cursor: not-allowed;
         }
-        .card-input:read-only {
+        .input-control.readonly {
           background-color: #fafafa;
         }
+        .input-control.textarea-control {
+          align-items: flex-start;
+        }
+        .input-control.number-control {
+          overflow: hidden;
+        }
+        .card-input {
+          flex: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0;
+          border: 0;
+          outline: none;
+          color: inherit;
+          background: transparent;
+          font: inherit;
+          line-height: inherit;
+        }
+        .card-input::placeholder {
+          color: #bfbfbf;
+        }
+        .card-input:disabled {
+          cursor: not-allowed;
+        }
+        input.card-input[type='number'] {
+          -moz-appearance: textfield;
+          appearance: textfield;
+        }
+        input.card-input[type='number']::-webkit-inner-spin-button,
+        input.card-input[type='number']::-webkit-outer-spin-button {
+          margin: 0;
+          -webkit-appearance: none;
+          appearance: none;
+        }
+        .input-affix {
+          display: inline-flex;
+          flex: none;
+          align-items: center;
+          min-width: 0;
+          color: #666;
+          white-space: nowrap;
+          line-height: inherit;
+        }
+        .input-affix .icon-img,
+        .input-affix .icon-svg,
+        .input-affix .icon-text {
+          display: block;
+        }
+        .number-stepper {
+          display: flex;
+          flex: 0 0 32px;
+          align-self: stretch;
+          flex-direction: column;
+          margin: -8px -12px -8px 0;
+          border-left: 1px solid #d9d9d9;
+        }
+        .number-step-button {
+          display: inline-flex;
+          flex: 1 1 50%;
+          align-items: center;
+          justify-content: center;
+          min-width: 0;
+          min-height: 0;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          border-radius: 0;
+          outline: none;
+          color: #8c8c8c;
+          background: transparent;
+          font: inherit;
+          cursor: pointer;
+          transition: color 0.15s ease, background-color 0.15s ease;
+        }
+        .number-step-button + .number-step-button {
+          border-top: 1px solid #d9d9d9;
+        }
+        .number-step-button:hover:not(:disabled) {
+          color: #1677ff;
+          background-color: #e6f4ff;
+        }
+        .number-step-button:active:not(:disabled) {
+          background-color: #bae0ff;
+        }
+        .number-step-button:focus-visible {
+          color: #1677ff;
+          box-shadow: inset 0 0 0 2px rgba(22, 119, 255, 0.35);
+        }
+        .number-step-button:disabled {
+          color: #d9d9d9;
+          cursor: not-allowed;
+        }
+        .number-step-button .icon-svg {
+          display: block;
+        }
 
         /* ─── Textarea ──────────────────────────── */
         textarea.card-input {
@@ -2345,14 +2695,26 @@ class CardInput extends BaseElement {
         }
 
         /* ─── Mobile adjustments ───────────────── */
-        .card-input.card-mobile {
+        .input-control.card-mobile {
           font-size: 16px;
           padding: 10px 12px;
         }
+        .input-control.card-mobile .number-stepper {
+          margin-top: -10px;
+          margin-bottom: -10px;
+        }
       </style>
       <div class="card-input-wrapper">
-        ${label ? `<label class="card-input-label">${this.escapeHtml(String(label))}</label>` : ''}
-        ${inputTag}
+        ${label ? `<label class="card-input-label" for="${inputId}">${this.escapeHtml(String(label))}</label>` : ''}
+        <div
+          class="input-control ${isTextarea ? 'textarea-control' : ''} ${isNumber ? 'number-control' : ''} ${isMobile ? 'card-mobile' : 'card-desktop'} ${disabled ? 'disabled' : ''} ${readOnly ? 'readonly' : ''}"
+          style="${inlineStyle}"
+        >
+          ${prefixHtml}
+          ${inputTag}
+          ${suffixHtml}
+          ${numberStepperHtml}
+        </div>
       </div>
     `;
         // Wire up native input/change events that bubble out of Shadow DOM.
@@ -2376,6 +2738,31 @@ class CardInput extends BaseElement {
                     detail: { value: inputEl.value },
                 }));
             });
+            if (isNumber &&
+                showNumberStepper &&
+                inputEl instanceof HTMLInputElement) {
+                const increaseButton = this.shadowRoot.querySelector('.number-step-button.increase');
+                const decreaseButton = this.shadowRoot.querySelector('.number-step-button.decrease');
+                const refreshStepperState = () => {
+                    const state = getNumberStepperDisabledState(inputEl);
+                    if (increaseButton)
+                        increaseButton.disabled = state.increase;
+                    if (decreaseButton)
+                        decreaseButton.disabled = state.decrease;
+                };
+                inputEl.addEventListener('input', refreshStepperState);
+                increaseButton?.addEventListener('click', () => {
+                    stepNumberInput(inputEl, 'increase');
+                    inputEl.focus();
+                    refreshStepperState();
+                });
+                decreaseButton?.addEventListener('click', () => {
+                    stepNumberInput(inputEl, 'decrease');
+                    inputEl.focus();
+                    refreshStepperState();
+                });
+                refreshStepperState();
+            }
         }
     }
     // ─── Helpers ──────────────────────────────────────────────────
@@ -2394,6 +2781,10 @@ class CardInput extends BaseElement {
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
     }
+    _domId(value) {
+        const normalized = String(value).replace(/[^a-zA-Z0-9_-]/g, '-');
+        return normalized || 'input';
+    }
 }
 CardInput.is = 'ai-card-input';
 // Register the custom element (safe for SSR / non-browser envs)
@@ -2684,6 +3075,25 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardDivider.is)
     customElements.define(CardDivider.is, CardDivider);
 }
 
+function emitValueChange(host, value, previousValue, source, extra = {}) {
+    const detail = {
+        ...extra,
+        value,
+        previousValue,
+        source,
+    };
+    host.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        composed: true,
+        detail,
+    }));
+    host.dispatchEvent(new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail,
+    }));
+}
+
 /**
  * CardRate — Custom Element for star rating display/input.
  *
@@ -2712,29 +3122,59 @@ class CardRate extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { value = 0, count = 5, readonly: readOnly = false, allowHalf = false, size = 24, gap = 4, color = '#fadb14', inactiveColor = '#e8e8e8', style, isExpressionResultStyle, } = this._props;
+        const { value, defaultValue = 0, count: rawCount = 5, readonly: readOnly = false, disabled = false, allowHalf = false, allowClear = true, size = 24, gap = 4, color = '#fadb14', inactiveColor = '#e8e8e8', ariaLabel = 'Rating', style, starStyle, activeStarStyle, inactiveStarStyle, isExpressionResultStyle, } = this._props;
         const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
-        const displayValue = this._currentValue ?? (Number(value) || 0);
+        const count = Math.max(1, Math.min(100, Math.round(Number(rawCount) || 5)));
+        const step = allowHalf ? 0.5 : 1;
+        const externalValue = this.normalizeValue(value ?? defaultValue, count, step);
+        const displayValue = this._currentValue ?? externalValue;
         const starSize = Number(size) || 24;
         const starGap = Number(gap) || 4;
+        const interactive = !disabled && !readOnly;
         const stars = Array.from({ length: count }, (_, i) => {
             const starIndex = i + 1;
             const isFull = displayValue >= starIndex;
             const isHalf = !isFull && allowHalf && displayValue >= starIndex - 0.5;
+            const stateStyle = isFull || isHalf
+                ? activeStarStyle || {}
+                : inactiveStarStyle || {};
+            const itemInline = this.buildInlineStyle({
+                ...(starStyle || {}),
+                ...stateStyle,
+            }, isExpressionResultStyle);
             if (allowHalf) {
+                const wrapperInline = this.buildInlineStyle({
+                    fontSize: starSize,
+                    position: 'relative',
+                    display: 'inline-block',
+                    width: '1em',
+                    height: '1em',
+                    cursor: interactive ? 'pointer' : 'default',
+                });
+                const backgroundInline = this.buildInlineStyle({
+                    color: inactiveColor,
+                });
+                const fillInline = this.buildInlineStyle({
+                    color,
+                    width: isFull ? '100%' : isHalf ? '50%' : '0%',
+                });
                 // Two clickable halves per star
                 return `
-          <span class="star-wrapper" style="font-size:${starSize}px; position:relative; display:inline-block; width:1em; height:1em; cursor:${readOnly ? 'default' : 'pointer'};">
-            <span class="star-bg" style="color:${inactiveColor};">★</span>
-            <span class="star-fill" style="color:${color}; width:${isFull ? '100%' : isHalf ? '50%' : '0%'};">★</span>
+          <span class="star-wrapper" style="${wrapperInline};${itemInline}">
+            <span class="star-bg" style="${backgroundInline}">★</span>
+            <span class="star-fill" style="${fillInline}">★</span>
             <span class="star-left" data-value="${starIndex - 0.5}"></span>
             <span class="star-right" data-value="${starIndex}"></span>
           </span>`;
             }
+            const starInline = this.buildInlineStyle({
+                fontSize: starSize,
+                color: isFull ? color : inactiveColor,
+                cursor: interactive ? 'pointer' : 'default',
+            });
             // Whole star mode
             return `<span class="star ${isFull ? 'filled' : ''}" data-value="${starIndex}"
-        style="font-size:${starSize}px; color:${isFull ? color : inactiveColor};
-               cursor:${readOnly ? 'default' : 'pointer'};">★</span>`;
+        style="${starInline};${itemInline}">★</span>`;
         }).join('');
         this.shadowRoot.innerHTML = `
       <style>
@@ -2742,6 +3182,7 @@ class CardRate extends BaseElement {
           display: inline-flex;
           align-items: center;
           box-sizing: border-box;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
         .rate-wrapper {
           display: inline-flex;
@@ -2780,31 +3221,80 @@ class CardRate extends BaseElement {
         .star-left { left: 0; cursor: pointer; }
         .star-right { right: 0; cursor: pointer; }
       </style>
-      <div class="rate-wrapper" style="${inlineStyle}">${stars}</div>
+      <div
+        class="rate-wrapper"
+        role="slider"
+        tabindex="${disabled ? '-1' : '0'}"
+        aria-label="${this.escapeAttr(String(ariaLabel))}"
+        aria-valuemin="0"
+        aria-valuemax="${count}"
+        aria-valuenow="${displayValue}"
+        aria-valuetext="${displayValue} of ${count}"
+        aria-disabled="${Boolean(disabled)}"
+        aria-readonly="${Boolean(readOnly)}"
+        style="${inlineStyle}"
+      >${stars}</div>
     `;
-        if (readOnly)
+        if (!interactive)
             return;
         // Bind click handlers
         const clickTargets = this.shadowRoot.querySelectorAll('[data-value]');
         clickTargets.forEach((el) => {
             el.addEventListener('click', () => {
                 const val = Number(el.dataset.value);
-                // Toggle: click same value to clear
-                this._currentValue = (this._currentValue === val) ? 0 : val;
-                this.render();
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: this._currentValue },
-                }));
+                const previousValue = displayValue;
+                const nextValue = allowClear && previousValue === val ? 0 : val;
+                this.commit(nextValue, previousValue, 'pointer', count, step);
             });
         });
+        this.shadowRoot
+            .querySelector('.rate-wrapper')
+            ?.addEventListener('keydown', (event) => {
+            let nextValue = null;
+            if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+                nextValue = displayValue + step;
+            }
+            else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+                nextValue = displayValue - step;
+            }
+            else if (event.key === 'Home') {
+                nextValue = 0;
+            }
+            else if (event.key === 'End') {
+                nextValue = count;
+            }
+            if (nextValue == null)
+                return;
+            event.preventDefault();
+            this.commit(nextValue, displayValue, 'keyboard', count, step);
+        });
     }
     /** Reset internal state when props update externally */
     updateProps(props, isMobile) {
         this._currentValue = null;
         super.updateProps(props, isMobile);
     }
+    commit(next, previous, source, count, step) {
+        const normalized = this.normalizeValue(next, count, step);
+        if (normalized === previous)
+            return;
+        this._currentValue = normalized;
+        this.render();
+        emitValueChange(this, normalized, previous, source);
+    }
+    normalizeValue(value, count, step) {
+        const numeric = Number(value);
+        const safe = Number.isFinite(numeric) ? numeric : 0;
+        const clamped = Math.min(count, Math.max(0, safe));
+        return Math.round(clamped / step) * step;
+    }
+    escapeAttr(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
 }
 CardRate.is = 'ai-card-rate';
 if (typeof customElements !== 'undefined' && !customElements.get(CardRate.is)) {
@@ -2862,13 +3352,26 @@ class CardCounter extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { defaultValue, value, min = 0, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly: readOnly = false, size = 28, valueWidth = 32, minusIcon, plusIcon, style, buttonStyle, minusStyle, plusStyle, valueStyle, isExpressionResultStyle, } = this._props;
-        const minVal = Number(min);
-        const maxVal = Number(max);
-        const stepVal = Number(step) || 1;
-        const btnSize = Number(size) || 28;
-        const numWidth = Number(valueWidth) || 32;
-        const initial = this.clamp(Number(defaultValue ?? value ?? minVal) || 0, minVal, maxVal);
+        const { defaultValue, value, min = 0, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly: readOnly = false, size = 28, valueWidth = 32, decreaseAriaLabel = 'decrease', increaseAriaLabel = 'increase', minusIcon, plusIcon, style, buttonStyle, minusStyle, plusStyle, valueStyle, isExpressionResultStyle, } = this._props;
+        const rawMin = Number(min);
+        const rawMax = Number(max);
+        let minVal = Number.isFinite(rawMin) ? rawMin : 0;
+        let maxVal = Number.isNaN(rawMax)
+            ? Number.POSITIVE_INFINITY
+            : rawMax;
+        if (minVal > maxVal) {
+            [minVal, maxVal] = [maxVal, minVal];
+        }
+        const rawStep = Number(step);
+        const stepVal = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : 1;
+        const rawSize = Number(size);
+        const btnSize = Number.isFinite(rawSize) && rawSize > 0 ? rawSize : 28;
+        const rawValueWidth = Number(valueWidth);
+        const numWidth = Number.isFinite(rawValueWidth) && rawValueWidth > 0
+            ? rawValueWidth
+            : 32;
+        const rawInitial = Number(value ?? defaultValue ?? minVal);
+        const initial = this.clamp(Number.isFinite(rawInitial) ? rawInitial : minVal, minVal, maxVal);
         const current = this._currentValue ?? initial;
         const atMin = current <= minVal;
         const atMax = current >= maxVal;
@@ -2944,7 +3447,7 @@ class CardCounter extends BaseElement {
       </style>
       <div class="counter" style="${wrapperStyle}">
         <button type="button" class="c-btn c-minus" part="minus"
-          ${minusDisabled ? 'disabled' : ''} aria-label="decrease"
+          ${minusDisabled ? 'disabled' : ''} aria-label="${this.escapeAttr(String(decreaseAriaLabel))}"
           style="${minusInline}">${minusContent}</button>
         <span class="c-value" part="value" role="spinbutton"
           aria-valuenow="${current}"
@@ -2952,7 +3455,7 @@ class CardCounter extends BaseElement {
           ${Number.isFinite(maxVal) ? `aria-valuemax="${maxVal}"` : ''}
           style="${numInline}">${current}</span>
         <button type="button" class="c-btn c-plus" part="plus"
-          ${plusDisabled ? 'disabled' : ''} aria-label="increase"
+          ${plusDisabled ? 'disabled' : ''} aria-label="${this.escapeAttr(String(increaseAriaLabel))}"
           style="${plusInline}">${plusContent}</button>
       </div>
     `;
@@ -2960,27 +3463,17 @@ class CardCounter extends BaseElement {
             return;
         const minusBtn = this.shadowRoot.querySelector('.c-minus');
         const plusBtn = this.shadowRoot.querySelector('.c-plus');
-        minusBtn?.addEventListener('click', () => this.commit(current - stepVal, minVal, maxVal));
-        plusBtn?.addEventListener('click', () => this.commit(current + stepVal, minVal, maxVal));
+        minusBtn?.addEventListener('click', (event) => this.commit(current - stepVal, current, minVal, maxVal, event.detail === 0 ? 'keyboard' : 'pointer'));
+        plusBtn?.addEventListener('click', (event) => this.commit(current + stepVal, current, minVal, maxVal, event.detail === 0 ? 'keyboard' : 'pointer'));
     }
     /** Clamp, de-dup, update internal value and emit input + change. */
-    commit(next, min, max) {
+    commit(next, previous, min, max, source) {
         const clamped = this.round(this.clamp(next, min, max));
-        if (clamped === this._currentValue)
+        if (clamped === previous)
             return; // no-op at a bound
         this._currentValue = clamped;
         this.render();
-        // `input` drives variableKey auto-sync (no re-render); `change` fires actions.
-        this.dispatchEvent(new CustomEvent('input', {
-            bubbles: true,
-            composed: true,
-            detail: { value: clamped },
-        }));
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: { value: clamped },
-        }));
+        emitValueChange(this, clamped, previous, source);
     }
     clamp(v, min, max) {
         return Math.min(max, Math.max(min, v));
@@ -3008,11 +3501,18 @@ class CardCounter extends BaseElement {
      */
     renderIcon(icon, fallback, size) {
         if (icon?.src) {
-            const safeSrc = this.escapeAttr(this.sanitizeImageSrc(icon.src));
-            return `<img src="${safeSrc}" width="${Math.round(size * 0.6)}" height="${Math.round(size * 0.6)}" alt="" />`;
+            return renderIconContent({
+                src: icon.src,
+                name: icon.name,
+                size: Math.round(size * 0.6),
+            });
+        }
+        if (icon?.name) {
+            return renderIconContent({
+                name: icon.name,
+                size: Math.round(size * 0.6),
+            });
         }
-        if (icon?.name)
-            return this.escapeText(String(icon.name));
         return fallback;
     }
     /** Reset internal state when props update externally. */
@@ -3028,22 +3528,6 @@ class CardCounter extends BaseElement {
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
     }
-    escapeText(str) {
-        return str
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-    }
-    /** Reject script-bearing / non-image data URIs; pass legit image URLs through. */
-    sanitizeImageSrc(src) {
-        const trimmed = String(src).trim();
-        const scheme = trimmed.replace(/[\s\x00-\x1f]/g, '').toLowerCase();
-        if (/^(javascript|vbscript|file):/.test(scheme))
-            return '';
-        if (/^data:/.test(scheme) && !/^data:image\//.test(scheme))
-            return '';
-        return trimmed;
-    }
 }
 CardCounter.is = 'ai-card-counter';
 if (typeof customElements !== 'undefined' && !customElements.get(CardCounter.is)) {
@@ -3168,28 +3652,94 @@ class CardSelect extends BaseElement {
     constructor() {
         super(...arguments);
         this._open = false;
+        this._activeIndex = -1;
         /** Option picked locally; shown until props.value changes externally. */
         this._localValue = null;
         this._onDocClick = (e) => {
-            if (!this.contains(e.target))
+            const includesHost = e.composedPath().includes(this);
+            if (!includesHost)
                 this._setOpen(false);
         };
     }
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { options = [], placeholder = '请选择', value: propValue = '', disabled = false, style, isExpressionResultStyle, } = this._props;
+        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 propValue = String(externalValue ?? defaultValue ?? '');
+        const resolvedSize = (['small', 'medium', 'large'].includes(size)
+            ? size
+            : 'medium');
+        const resolvedVariant = (['outlined', 'filled', 'borderless'].includes(variant)
+            ? variant
+            : 'outlined');
+        const semanticStyles = (styles && typeof styles === 'object' ? styles : {});
+        const sizePreset = {
+            small: {
+                triggerHeight: 24,
+                triggerPadding: '0 7px',
+                fontSize: 12,
+                arrowSize: 12,
+                optionFontSize: 12,
+                optionHeight: 24,
+                optionPadding: '1px 8px',
+            },
+            medium: {
+                triggerHeight: 32,
+                triggerPadding: '3px 8px',
+                fontSize: 14,
+                arrowSize: 14,
+                optionFontSize: 14,
+                optionHeight: 32,
+                optionPadding: '5px 12px',
+            },
+            large: {
+                triggerHeight: 40,
+                triggerPadding: '7px 11px',
+                fontSize: 14,
+                arrowSize: 14,
+                optionFontSize: 14,
+                optionHeight: 32,
+                optionPadding: '5px 12px',
+            },
+        }[resolvedSize];
+        const variantPreset = {
+            outlined: {
+                background: '#fff',
+                borderColor: '#d9d9d9',
+            },
+            filled: {
+                background: '#f5f5f5',
+                borderColor: 'transparent',
+            },
+            borderless: {
+                background: 'transparent',
+                borderColor: 'transparent',
+            },
+        }[resolvedVariant];
         // External value change (controlled usage) overrides the local pick
         if (propValue !== this._propValue) {
             this._propValue = propValue;
             this._localValue = null;
         }
         const value = this._localValue ?? propValue;
-        const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
+        this.applyHostStyles(style, isExpressionResultStyle, String(accentColor));
+        const triggerInline = this.buildInlineStyle(semanticStyles.trigger, isExpressionResultStyle);
+        const dropdownInline = this.buildInlineStyle(semanticStyles.dropdown, 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,
+            color: 'currentColor',
+        });
+        const listboxId = `${this._node.id}-listbox`;
+        const activeOptionId = (this._open
+            && this._activeIndex >= 0
+            && this._activeIndex < options.length)
+            ? `${this._node.id}-option-${this._activeIndex}`
+            : '';
         this.shadowRoot.innerHTML = `
       <style>
         :host {
@@ -3204,33 +3754,59 @@ class CardSelect extends BaseElement {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 6px 12px;
-          border: 1px solid #d9d9d9;
+          box-sizing: border-box;
+          width: 100%;
+          min-height: ${sizePreset.triggerHeight}px;
+          padding: ${sizePreset.triggerPadding};
+          font-size: ${sizePreset.fontSize}px;
+          border: 1px solid ${disabled ? '#e5e7eb' : variantPreset.borderColor};
           border-radius: 6px;
-          background: ${disabled ? '#f5f5f5' : '#fff'};
+          outline: none;
+          background: ${disabled ? '#f5f5f5' : variantPreset.background};
+          color: ${disabled ? '#bfbfbf' : isPlaceholder ? '#bfbfbf' : '#333'};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
-          transition: border-color 0.2s;
+          transition:
+            border-color 0.2s,
+            box-shadow 0.2s,
+            background-color 0.2s;
           user-select: none;
         }
         .select-trigger:hover {
-          ${!disabled ? 'border-color: #1677ff;' : ''}
+          ${!disabled ? 'border-color: var(--select-accent);' : ''}
         }
+        .select-trigger:focus-visible,
         .select-trigger.open {
-          border-color: #1677ff;
-          box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
+          border-color: var(--select-accent);
+          box-shadow: 0 0 0 2px rgba(5,145,255,0.1);
+          box-shadow: 0 0 0 2px color-mix(
+            in srgb,
+            var(--select-accent) 10%,
+            transparent
+          );
         }
         .select-text {
           flex: 1;
+          min-width: 0;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          color: ${isPlaceholder ? '#bfbfbf' : '#333'};
+          color: inherit;
         }
         .select-arrow {
+          display: inline-flex;
+          flex: none;
+          align-items: center;
+          justify-content: center;
+          width: ${sizePreset.arrowSize}px;
+          height: ${sizePreset.arrowSize}px;
           margin-left: 8px;
-          font-size: 10px;
-          color: #999;
+          color: ${disabled ? '#bfbfbf' : '#999'};
           transition: transform 0.2s;
+          transform-origin: center;
+          pointer-events: none;
+        }
+        .select-arrow .icon-svg {
+          display: block;
         }
         .select-arrow.open { transform: rotate(180deg); }
         .dropdown {
@@ -3240,63 +3816,242 @@ class CardSelect extends BaseElement {
           left: 0;
           right: 0;
           background: #fff;
-          border: 1px solid #e8e8e8;
-          border-radius: 6px;
-          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-          max-height: 200px;
+          box-sizing: border-box;
+          padding: 4px;
+          border: 0;
+          border-radius: 8px;
+          box-shadow:
+            0 6px 16px 0 rgba(0,0,0,0.08),
+            0 3px 6px -4px rgba(0,0,0,0.12),
+            0 9px 28px 8px rgba(0,0,0,0.05);
+          max-height: 256px;
           overflow-y: auto;
           z-index: 1000;
         }
         .dropdown.open { display: block; }
         .option {
-          padding: 6px 12px;
+          display: flex;
+          align-items: center;
+          box-sizing: border-box;
+          min-width: 0;
+          min-height: ${sizePreset.optionHeight}px;
+          padding: ${sizePreset.optionPadding};
+          font-size: ${sizePreset.optionFontSize}px;
+          border-radius: 4px;
+          color: rgba(0,0,0,0.88);
           cursor: pointer;
           transition: background 0.15s;
+        }
+        .option-label {
+          flex: 1;
+          min-width: 0;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
-        .option:hover { background: #f5f5f5; }
-        .option.selected { color: #1677ff; font-weight: 500; }
+        .option:hover,
+        .option.active { background: #f5f5f5; }
+        .option.selected {
+          background: #e6f4ff;
+          background: color-mix(
+            in srgb,
+            var(--select-accent) 10%,
+            #fff
+          );
+          color: rgba(0,0,0,0.88);
+          font-weight: 600;
+        }
+        .option.disabled {
+          color: #bfbfbf;
+          cursor: not-allowed;
+        }
+        .option.disabled:hover {
+          background: transparent;
+        }
       </style>
-      <div class="select-trigger ${openClass}" style="${inlineStyle}">
-        <span class="select-text">${displayText}</span>
-        <span class="select-arrow ${openClass}">▼</span>
+      <div
+        class="select-trigger ${openClass}"
+        role="combobox"
+        tabindex="${disabled ? '-1' : '0'}"
+        aria-label="${this.escapeAttr(String(ariaLabel))}"
+        aria-haspopup="listbox"
+        aria-controls="${this.escapeAttr(listboxId)}"
+        ${activeOptionId
+            ? `aria-activedescendant="${this.escapeAttr(activeOptionId)}"`
+            : ''}
+        aria-expanded="${this._open}"
+        aria-disabled="${Boolean(disabled)}"
+        aria-readonly="${Boolean(readOnly)}"
+        style="${triggerInline}"
+      >
+        <span class="select-text">${this.escapeText(String(displayText))}</span>
+        <span class="select-arrow ${openClass}">${arrowIcon}</span>
       </div>
-      <div class="dropdown ${openClass}">
-        ${options.map((opt) => `<div class="option ${opt.value === value ? 'selected' : ''}" data-value="${opt.value}">${opt.label}</div>`).join('')}
+      <div
+        class="dropdown ${openClass}"
+        id="${this.escapeAttr(listboxId)}"
+        role="listbox"
+        style="${dropdownInline}"
+      >
+        ${options.map((opt, index) => {
+            const optionInline = this.buildInlineStyle({
+                ...(semanticStyles.option || {}),
+                ...(opt.value === value ? semanticStyles.selectedOption || {} : {}),
+            }, isExpressionResultStyle);
+            return (`<div
+            id="${this.escapeAttr(`${this._node.id}-option-${index}`)}"
+            class="option ${opt.value === value ? 'selected' : ''} ${opt.disabled ? 'disabled' : ''} ${index === this._activeIndex ? 'active' : ''}"
+            role="option"
+            aria-selected="${opt.value === value}"
+            aria-disabled="${Boolean(opt.disabled)}"
+            data-index="${index}"
+            data-value="${this.escapeAttr(String(opt.value))}"
+            data-disabled="${opt.disabled ? 'true' : 'false'}"
+            style="${optionInline}"
+          ><span class="option-label">${this.escapeText(String(opt.label))}</span></div>`);
+        }).join('')}
       </div>
     `;
         if (disabled)
             return;
         const trigger = this.shadowRoot.querySelector('.select-trigger');
-        trigger.addEventListener('click', () => this._setOpen(!this._open));
+        trigger.addEventListener('click', (event) => {
+            if (readOnly)
+                return;
+            event.stopPropagation();
+            this.openWithCurrentOption(options, value);
+        });
+        trigger.addEventListener('keydown', (event) => {
+            if (readOnly)
+                return;
+            this.handleKeydown(event, options, value);
+        });
         this.shadowRoot.querySelectorAll('.option').forEach((opt) => {
             opt.addEventListener('click', () => {
+                if (opt.dataset.disabled === 'true')
+                    return;
                 const val = opt.dataset.value ?? '';
-                this._localValue = val;
-                this._setOpen(false);
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: val },
-                }));
+                this.commit(val, value, 'pointer');
             });
         });
     }
     disconnectedCallback() {
         document.removeEventListener('click', this._onDocClick);
     }
+    updateProps(props, isMobile) {
+        if (Object.prototype.hasOwnProperty.call(props, 'value')
+            || Object.prototype.hasOwnProperty.call(props, 'defaultValue')) {
+            this._localValue = null;
+            this._propValue = undefined;
+        }
+        super.updateProps(props, isMobile);
+    }
     _setOpen(open) {
         if (this._open === open)
             return;
         this._open = open;
-        if (open)
-            document.addEventListener('click', this._onDocClick);
-        else
+        if (open) {
+            queueMicrotask(() => {
+                if (this._open && this.isConnected) {
+                    document.addEventListener('click', this._onDocClick);
+                }
+            });
+        }
+        else {
             document.removeEventListener('click', this._onDocClick);
+        }
         this.render();
     }
+    openWithCurrentOption(options, value) {
+        if (this._open) {
+            this._setOpen(false);
+            return;
+        }
+        const selectedIndex = options.findIndex((option) => !option.disabled && String(option.value) === value);
+        this._activeIndex = selectedIndex >= 0
+            ? selectedIndex
+            : this.findNextEnabled(options, -1, 1);
+        this._setOpen(true);
+    }
+    handleKeydown(event, options, value) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this._setOpen(false);
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowDown' ? 1 : -1;
+            if (!this._open) {
+                const selectedIndex = options.findIndex((option) => !option.disabled && String(option.value) === value);
+                this._activeIndex = this.findNextEnabled(options, selectedIndex, direction);
+                this._setOpen(true);
+            }
+            else {
+                this._activeIndex = this.findNextEnabled(options, this._activeIndex, direction);
+                this.render();
+            }
+            return;
+        }
+        if ((event.key === 'Enter' || event.key === ' ') && this._open) {
+            event.preventDefault();
+            const option = options[this._activeIndex];
+            if (option && !option.disabled) {
+                this.commit(String(option.value), value, 'keyboard');
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openWithCurrentOption(options, value);
+        }
+    }
+    findNextEnabled(options, start, direction) {
+        if (options.length === 0)
+            return -1;
+        for (let offset = 1; offset <= options.length; offset += 1) {
+            const index = (start + direction * offset + options.length) % options.length;
+            if (!options[index]?.disabled)
+                return index;
+        }
+        return -1;
+    }
+    commit(value, previousValue, source) {
+        if (value === previousValue) {
+            this._setOpen(false);
+            return;
+        }
+        this._localValue = value;
+        this._activeIndex = -1;
+        if (this._open)
+            this._setOpen(false);
+        else
+            this.render();
+        emitValueChange(this, value, previousValue, source);
+    }
+    escapeAttr(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    escapeText(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    applyHostStyles(style, isExpressionResultStyle, accentColor) {
+        const serialized = this.buildInlineStyle(style, isExpressionResultStyle);
+        const parser = document.createElement('div');
+        parser.innerHTML = `<span style="${serialized}"></span>`;
+        const parsedStyle = parser.firstElementChild instanceof HTMLElement
+            ? parser.firstElementChild.style.cssText
+            : '';
+        this.style.cssText = parsedStyle;
+        this.style.setProperty('--select-accent', accentColor || '#1677ff');
+    }
 }
 CardSelect.is = 'ai-card-select';
 if (typeof customElements !== 'undefined' && !customElements.get(CardSelect.is)) {
@@ -3428,45 +4183,6 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardPasscodeInp
     customElements.define(CardPasscodeInput.is, CardPasscodeInput);
 }
 
-function escapeAttr$1(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-function escapeText(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-function sanitizeImageSrc(src) {
-    const trimmed = String(src ?? '').trim();
-    const scheme = trimmed.replace(/[\s\x00-\x1f]/g, '').toLowerCase();
-    if (/^(javascript|vbscript|file):/.test(scheme))
-        return '';
-    if (/^data:/.test(scheme) && !/^data:image\//.test(scheme))
-        return '';
-    return trimmed;
-}
-function renderIconContent(input) {
-    const size = Number(input.size) || 24;
-    const name = input.name == null ? undefined : String(input.name);
-    if (input.src) {
-        return `<img class="icon-img" src="${escapeAttr$1(sanitizeImageSrc(input.src))}" ` +
-            `width="${size}" height="${size}" 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'))}" ` +
-            `aria-hidden="true">${icon.body}</svg>`;
-    }
-    return `<span class="icon-text" style="font-size:${size}px; line-height:1;">` +
-        `${escapeText(name ?? '?')}</span>`;
-}
-
 /**
  * CardIcon — Custom Element for rendering icons.
  *
@@ -3554,6 +4270,31 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardIcon.is)) {
  * }
  * ```
  */
+const MAX_VALIDATION_PATTERN_LENGTH = 256;
+const MAX_PATTERN_INPUT_LENGTH = 4096;
+/**
+ * Restricts schema-provided patterns to a predictable subset.
+ *
+ * Nested quantified groups, quantified alternations, backreferences, and
+ * lookarounds are rejected because they can introduce catastrophic
+ * backtracking in JavaScript's synchronous RegExp engine.
+ */
+function isSafeValidationPattern(pattern) {
+    if (pattern.length === 0 || pattern.length > MAX_VALIDATION_PATTERN_LENGTH) {
+        return false;
+    }
+    if (/\\[1-9]/.test(pattern))
+        return false;
+    if (/\(\?(?:[=!]|<[=!])/.test(pattern))
+        return false;
+    if (/\((?:\\.|[^)])*(?:[+*]|\{\d+(?:,\d*)?\})(?:\\.|[^)])*\)(?:[+*]|\{\d+(?:,\d*)?\})/.test(pattern)) {
+        return false;
+    }
+    if (/\((?:\\.|[^)])*\|(?:\\.|[^)])*\)(?:[+*]|\{\d+(?:,\d*)?\})/.test(pattern)) {
+        return false;
+    }
+    return true;
+}
 class CardForm extends BaseElement {
     constructor() {
         super(...arguments);
@@ -3564,8 +4305,10 @@ class CardForm extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { fields = [], submitText = '提交', layout = 'vertical', disabled = false, style, isExpressionResultStyle, } = this._props;
+        const { fields = [], submitText = '提交', layout = 'vertical', disabled = false, invalidStyle, errorStyle, style, isExpressionResultStyle, } = this._props;
         const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
+        const invalidInlineStyle = this.buildInlineStyle(invalidStyle, isExpressionResultStyle);
+        const errorInlineStyle = this.buildInlineStyle(errorStyle, isExpressionResultStyle);
         const isHorizontal = layout === 'horizontal';
         // Init default values on first render
         if (!this._submitted && Object.keys(this._values).length === 0) {
@@ -3573,7 +4316,9 @@ class CardForm extends BaseElement {
                 this._values[f.name] = f.defaultValue ?? '';
             });
         }
-        const fieldItems = fields.map((field) => this._renderField(field)).join('');
+        const fieldItems = fields
+            .map((field, index) => this._renderField(field, index))
+            .join('');
         this.shadowRoot.innerHTML = `
       <style>
         :host {
@@ -3604,7 +4349,12 @@ class CardForm extends BaseElement {
           color: #ff4d4f;
           margin-right: 2px;
         }
-        .field-input {
+        .field-control {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          box-sizing: border-box;
+          width: 100%;
           padding: 6px 12px;
           border: 1px solid #d9d9d9;
           border-radius: 6px;
@@ -3614,35 +4364,73 @@ class CardForm extends BaseElement {
           font-family: inherit;
           background: #fff;
         }
-        .field-input:focus {
+        .field-control.textarea-control {
+          align-items: flex-start;
+        }
+        .field-control:focus-within {
           border-color: #1677ff;
           box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
         }
-        .field-input.error {
+        .field-control.error {
           border-color: #ff4d4f;
+          ${invalidInlineStyle}
+        }
+        .field-input {
+          flex: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0;
+          border: 0;
+          outline: none;
+          color: inherit;
+          background: transparent;
+          font: inherit;
+          line-height: 1.5;
         }
         .field-input:disabled {
-          background: #f5f5f5;
           cursor: not-allowed;
         }
+        .field-affix {
+          display: inline-flex;
+          flex: none;
+          align-items: center;
+          color: #666;
+          white-space: nowrap;
+          line-height: 1.5;
+        }
+        .field-affix .icon-img,
+        .field-affix .icon-svg,
+        .field-affix .icon-text {
+          display: block;
+        }
         .field-input-wrapper {
           flex: 1;
           display: flex;
           flex-direction: column;
           min-width: 0;
         }
+        .form-select {
+          display: block;
+          width: 100%;
+          min-width: 0;
+        }
+        .form-rate {
+          display: inline-flex;
+          width: fit-content;
+        }
         textarea.field-input {
           min-height: 60px;
           resize: vertical;
         }
-        select.field-input {
-          cursor: pointer;
-          appearance: auto;
-        }
         .field-error {
           font-size: 12px;
           color: #ff4d4f;
-          min-height: 18px;
+          line-height: 18px;
+          ${errorInlineStyle}
+        }
+        .field-error:empty {
+          display: none;
         }
         /* Passcode */
         .passcode-row {
@@ -3664,20 +4452,10 @@ class CardForm extends BaseElement {
           border-color: #1677ff;
           box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
         }
-        .passcode-cell.error { border-color: #ff4d4f; }
-        /* Rate */
-        .rate-row {
-          display: flex;
-          gap: 4px;
-        }
-        .rate-star {
-          font-size: 24px;
-          cursor: pointer;
-          user-select: none;
-          transition: transform 0.15s;
-          line-height: 1;
+        .passcode-cell.error {
+          border-color: #ff4d4f;
+          ${invalidInlineStyle}
         }
-        .rate-star:hover { transform: scale(1.15); }
         /* Submit */
         .submit-btn {
           padding: 8px 24px;
@@ -3702,71 +4480,268 @@ class CardForm extends BaseElement {
         <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) {
-        const { name, label, type = 'text', placeholder = '', required = false, options = [], length = 6 } = field;
+    _renderField(field, index) {
+        const { name, label, type = 'text', placeholder = '', required = false, rules = [], prefix, suffix, options = [], length = 6, } = field;
         const val = this._values[name] ?? '';
         const error = this._errors[name] || '';
         const errorClass = error ? 'error' : '';
-        const labelHtml = label ? `<label class="field-label">${required ? '<span class="required">*</span>' : ''}${label}</label>` : '';
+        const escapedName = this._escapeAttr(name);
+        const idBase = `${this._domId(this._node?.id || 'form')}-field-${index}`;
+        const controlId = `${idBase}-control`;
+        const labelId = `${idBase}-label`;
+        const errorId = `${idBase}-error`;
+        const supportsAffixes = type !== 'passcode'
+            && type !== 'rate'
+            && type !== 'select';
+        const prefixAffix = supportsAffixes
+            ? this._renderAffix('prefix', prefix, `${idBase}-prefix`)
+            : undefined;
+        const suffixAffix = supportsAffixes
+            ? this._renderAffix('suffix', suffix, `${idBase}-suffix`)
+            : undefined;
+        const affixDescriptionIds = [
+            prefixAffix?.descriptionId,
+            suffixAffix?.descriptionId,
+        ].filter((id) => Boolean(id));
+        const describedByIds = [
+            ...affixDescriptionIds,
+            ...(error ? [errorId] : []),
+        ];
+        const ariaDescription = describedByIds.length > 0
+            ? `aria-describedby="${describedByIds.join(' ')}"`
+            : '';
+        const affixDescriptionData = affixDescriptionIds.length > 0
+            ? `data-affix-describedby="${affixDescriptionIds.join(' ')}"`
+            : '';
+        const ariaError = `aria-invalid="${Boolean(error)}" ${ariaDescription} ${affixDescriptionData}`;
+        const ariaLabel = label ? `aria-labelledby="${labelId}"` : '';
+        const isRequired = required || rules.some((rule) => rule.required);
+        const labelHtml = label
+            ? `<label class="field-label" id="${labelId}" for="${type === 'passcode' ? `${controlId}-0` : controlId}">${isRequired ? '<span class="required">*</span>' : ''}${this._escapeHtml(label)}</label>`
+            : '';
+        const prefixHtml = prefixAffix?.html ?? '';
+        const suffixHtml = suffixAffix?.html ?? '';
         let inputHtml = '';
+        let usesFieldControl = false;
         switch (type) {
             case 'textarea':
-                inputHtml = `<textarea class="field-input ${errorClass}" data-name="${name}" placeholder="${placeholder}">${val}</textarea>`;
+                usesFieldControl = true;
+                inputHtml = `<textarea id="${controlId}" class="field-input" data-name="${escapedName}" placeholder="${this._escapeAttr(placeholder)}" ${ariaLabel} ${ariaError}>${this._escapeHtml(String(val))}</textarea>`;
                 break;
             case 'select':
-                inputHtml = `<select class="field-input ${errorClass}" data-name="${name}">
-          <option value="" ${!val ? 'selected' : ''}>${placeholder || '请选择'}</option>
-          ${options.map((o) => `<option value="${o.value}" ${val === o.value ? 'selected' : ''}>${o.label}</option>`).join('')}
-        </select>`;
+                inputHtml = `<${CardSelect.is}
+          id="${controlId}"
+          class="form-select"
+          data-name="${escapedName}"
+          ${ariaError}
+        ></${CardSelect.is}>`;
                 break;
             case 'passcode': {
                 const cells = Array.from({ length }, (_, i) => {
                     const cellVal = typeof val === 'string' ? (val[i] || '') : '';
-                    return `<input class="passcode-cell ${errorClass}" type="text" inputmode="numeric" maxlength="1" data-name="${name}" data-index="${i}" value="${cellVal}" />`;
+                    return `<input id="${controlId}-${i}" class="passcode-cell ${errorClass}" type="text" inputmode="numeric" maxlength="1" data-name="${escapedName}" data-index="${i}" value="${this._escapeAttr(cellVal)}" ${ariaLabel} ${ariaError} />`;
                 }).join('');
-                inputHtml = `<div class="passcode-row" data-passcode-name="${name}">${cells}</div>`;
+                inputHtml = `<div class="passcode-row" data-passcode-name="${escapedName}">${cells}</div>`;
                 break;
             }
             case 'rate': {
-                const count = 5;
-                const rateVal = Number(val) || 0;
-                const stars = Array.from({ length: count }, (_, i) => `<span class="rate-star" data-name="${name}" data-value="${i + 1}" style="color:${i < rateVal ? '#fadb14' : '#e8e8e8'};">★</span>`).join('');
-                inputHtml = `<div class="rate-row">${stars}</div>`;
+                inputHtml = `<${CardRate.is}
+          id="${controlId}"
+          class="form-rate"
+          data-name="${escapedName}"
+          ${ariaError}
+        ></${CardRate.is}>`;
                 break;
             }
-            default:
-                inputHtml = `<input class="field-input ${errorClass}" type="${type === 'password' ? 'password' : 'text'}" data-name="${name}" placeholder="${placeholder}" value="${val}" />`;
+            default: {
+                usesFieldControl = true;
+                const nativeType = type === 'password' || type === 'number'
+                    ? type
+                    : 'text';
+                inputHtml = `<input id="${controlId}" class="field-input" type="${nativeType}" data-name="${escapedName}" placeholder="${this._escapeAttr(placeholder)}" value="${this._escapeAttr(String(val))}" ${ariaLabel} ${ariaError} />`;
+            }
+        }
+        if (usesFieldControl) {
+            inputHtml = `
+        <div class="field-control ${type === 'textarea' ? 'textarea-control' : ''} ${errorClass}">
+          ${prefixHtml}
+          ${inputHtml}
+          ${suffixHtml}
+        </div>`;
         }
         return `
       <div class="form-field">
         ${labelHtml}
         <div class="field-input-wrapper">
           ${inputHtml}
-          <div class="field-error">${error}</div>
+          <div class="field-error" id="${errorId}" role="alert">${this._escapeHtml(error)}</div>
         </div>
       </div>`;
     }
+    _initializeSelectFields(fields, disabled) {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.querySelectorAll('.form-select').forEach((selectElement) => {
+            const name = selectElement.dataset.name;
+            const field = fields.find((item) => item.name === name);
+            if (!field)
+                return;
+            const props = this._selectProps(field, this._errors[field.name] || '', disabled);
+            const node = {
+                id: selectElement.id,
+                type: 'Select',
+                props,
+                children: [],
+                lifecycle: undefined,
+                events: undefined,
+                directives: undefined,
+            };
+            selectElement.setData(node, props, this._isMobile);
+            const label = selectElement
+                .closest('.form-field')
+                ?.querySelector('.field-label');
+            label?.addEventListener('click', () => {
+                selectElement.shadowRoot
+                    ?.querySelector('.select-trigger')
+                    ?.focus();
+            });
+        });
+    }
+    _selectProps(field, error, disabled) {
+        return {
+            options: field.options ?? [],
+            placeholder: field.placeholder || '请选择',
+            value: String(this._values[field.name] ?? ''),
+            disabled,
+            ariaLabel: field.label || field.placeholder || '请选择',
+            size: field.size,
+            variant: field.variant,
+            accentColor: field.accentColor,
+            style: {
+                width: '100%',
+            },
+            styles: {
+                ...(field.styles ?? {}),
+                trigger: {
+                    ...(field.style ?? {}),
+                    ...(field.styles?.trigger ?? {}),
+                    ...(error ? this._props.invalidStyle ?? {} : {}),
+                },
+            },
+            isExpressionResultStyle: this._props.isExpressionResultStyle,
+        };
+    }
+    _initializeRateFields(fields, disabled) {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.querySelectorAll('.form-rate').forEach((rateElement) => {
+            const name = rateElement.dataset.name;
+            const field = fields.find((item) => item.name === name);
+            if (!field)
+                return;
+            const props = this._rateProps(field, this._errors[field.name] || '', disabled);
+            const node = {
+                id: rateElement.id,
+                type: 'Rate',
+                props,
+                children: [],
+                lifecycle: undefined,
+                events: undefined,
+                directives: undefined,
+            };
+            rateElement.setData(node, props, this._isMobile);
+            const label = rateElement
+                .closest('.form-field')
+                ?.querySelector('.field-label');
+            label?.addEventListener('click', () => {
+                rateElement.shadowRoot
+                    ?.querySelector('.rate-wrapper')
+                    ?.focus();
+            });
+        });
+    }
+    _rateProps(field, error, disabled) {
+        return {
+            value: Number(this._values[field.name]) || 0,
+            disabled,
+            ariaLabel: field.label || 'Rating',
+            style: {
+                padding: '3px',
+                border: '1px solid transparent',
+                borderRadius: '6px',
+                ...(field.style ?? {}),
+                ...(error ? this._props.invalidStyle ?? {} : {}),
+            },
+            isExpressionResultStyle: this._props.isExpressionResultStyle,
+        };
+    }
+    _renderAffix(position, affix, id) {
+        const rendered = renderInputAffix(affix);
+        if (!rendered)
+            return undefined;
+        const style = this.buildInlineStyle(rendered.style, this._props.isExpressionResultStyle);
+        const accessibility = rendered.ariaLabel
+            ? `id="${id}" aria-label="${this._escapeAttr(rendered.ariaLabel)}"`
+            : 'aria-hidden="true"';
+        return {
+            html: `<span class="field-affix field-${position}" ${accessibility} style="${style}">${rendered.content}</span>`,
+            descriptionId: rendered.ariaLabel ? id : undefined,
+        };
+    }
     _bindEvents(fields, disabled) {
         if (!this.shadowRoot || disabled)
             return;
-        // Text / textarea / select
+        // Text / textarea
         this.shadowRoot.querySelectorAll('.field-input').forEach((el) => {
             const handler = () => {
                 const name = el.dataset.name;
                 this._values[name] = el.value;
-                if (this._errors[name]) {
-                    this._errors[name] = '';
-                    const errEl = el.closest('.form-field')?.querySelector('.field-error');
-                    if (errEl)
-                        errEl.textContent = '';
-                    el.classList.remove('error');
-                }
+                if (!this._submitted)
+                    return;
+                const field = fields.find((item) => item.name === name);
+                if (!field)
+                    return;
+                this._updateFieldValidation(field, this._validateField(field));
             };
             el.addEventListener('input', handler);
             el.addEventListener('change', handler);
         });
+        // Select
+        this.shadowRoot.querySelectorAll('.form-select').forEach((selectElement) => {
+            selectElement.addEventListener('change', (event) => {
+                const name = selectElement.dataset.name;
+                const value = event instanceof CustomEvent
+                    ? event.detail?.value
+                    : undefined;
+                this._values[name] = value ?? '';
+                if (!this._submitted)
+                    return;
+                const field = fields.find((item) => item.name === name);
+                if (!field)
+                    return;
+                this._updateFieldValidation(field, this._validateField(field));
+            });
+        });
+        // Rate
+        this.shadowRoot.querySelectorAll('.form-rate').forEach((rateElement) => {
+            rateElement.addEventListener('change', (event) => {
+                const name = rateElement.dataset.name;
+                const value = event instanceof CustomEvent
+                    ? event.detail?.value
+                    : undefined;
+                this._values[name] = Number(value) || 0;
+                if (!this._submitted)
+                    return;
+                const field = fields.find((item) => item.name === name);
+                if (!field)
+                    return;
+                this._updateFieldValidation(field, this._validateField(field));
+            });
+        });
         // Passcode
         this.shadowRoot.querySelectorAll('.passcode-cell').forEach((cell) => {
             const name = cell.dataset.name;
@@ -3776,45 +4751,35 @@ class CardForm extends BaseElement {
             cell.addEventListener('input', () => {
                 const v = cell.value.replace(/[^0-9]/g, '');
                 cell.value = v.slice(0, 1);
-                const full = Array.from(cells).map((c) => c.value).join('');
-                this._values[name] = full;
+                this._syncPasscodeValue(name, cells, fields);
                 if (v && idx < cells.length - 1)
                     cells[idx + 1].focus();
             });
             cell.addEventListener('keydown', (e) => {
                 if (e.key === 'Backspace' && !cell.value && idx > 0) {
+                    e.preventDefault();
                     cells[idx - 1].focus();
                     cells[idx - 1].value = '';
+                    this._syncPasscodeValue(name, cells, fields);
                 }
             });
             cell.addEventListener('paste', (e) => {
                 e.preventDefault();
                 const paste = (e.clipboardData?.getData('text') || '').replace(/[^0-9]/g, '');
+                cells.forEach((item) => {
+                    item.value = '';
+                });
                 for (let j = 0; j < cells.length && j < paste.length; j++)
                     cells[j].value = paste[j];
-                this._values[name] = Array.from(cells).map((c) => c.value).join('');
+                this._syncPasscodeValue(name, cells, fields);
                 cells[Math.min(paste.length, cells.length - 1)].focus();
             });
             cell.addEventListener('focus', () => cell.select());
         });
-        // Rate
-        this.shadowRoot.querySelectorAll('.rate-star').forEach((star) => {
-            star.addEventListener('click', () => {
-                const name = star.dataset.name;
-                const val = Number(star.dataset.value);
-                this._values[name] = this._values[name] === val ? 0 : val;
-                // Re-color siblings
-                const row = star.parentElement;
-                row.querySelectorAll('.rate-star').forEach((s) => {
-                    const sv = Number(s.dataset.value);
-                    s.style.color = sv <= this._values[name] ? '#fadb14' : '#e8e8e8';
-                });
-            });
-        });
         // Submit
         this.shadowRoot.querySelector('.submit-btn')?.addEventListener('click', () => {
+            this._submitted = true;
             if (this._validate(fields)) {
-                this._submitted = true;
                 this.dispatchEvent(new CustomEvent('submit', {
                     bubbles: true,
                     composed: true,
@@ -3823,29 +4788,147 @@ class CardForm extends BaseElement {
             }
         });
     }
+    _syncPasscodeValue(name, cells, fields) {
+        this._values[name] = Array.from(cells).map((item) => item.value).join('');
+        if (!this._submitted)
+            return;
+        const field = fields.find((item) => item.name === name);
+        if (field) {
+            this._updateFieldValidation(field, this._validateField(field));
+        }
+    }
     _validate(fields) {
         this._errors = {};
         let valid = true;
         for (const f of fields) {
-            if (f.required) {
-                const val = this._values[f.name];
-                const isEmpty = val === '' || val === undefined || val === null || val === 0;
-                if (isEmpty) {
-                    this._errors[f.name] = `${f.label || f.name}不能为空`;
-                    valid = false;
-                }
-                if (f.type === 'passcode' && typeof val === 'string' && val.length < (f.length || 6)) {
-                    this._errors[f.name] = `请输入完整的${f.label || '验证码'}`;
-                    valid = false;
-                }
+            const error = this._validateField(f);
+            if (error) {
+                this._errors[f.name] = error;
+                valid = false;
             }
         }
         if (!valid)
             this.render();
         return valid;
     }
+    _validateField(field) {
+        const value = this._values[field.name];
+        const rules = [...(field.rules ?? [])];
+        if (field.required && !rules.some((rule) => rule.required)) {
+            rules.unshift({ required: true });
+        }
+        const empty = value === undefined
+            || value === null
+            || value === 0
+            || (typeof value === 'string' && value.trim() === '');
+        for (const rule of rules) {
+            const message = this._ruleMessage(field, rule);
+            if (rule.required && empty)
+                return message;
+            if (empty)
+                continue;
+            const text = String(value);
+            if (rule.pattern != null) {
+                if (text.length > MAX_PATTERN_INPUT_LENGTH
+                    || !isSafeValidationPattern(rule.pattern)) {
+                    return message;
+                }
+                try {
+                    if (!new RegExp(rule.pattern).test(text))
+                        return message;
+                }
+                catch {
+                    return message;
+                }
+            }
+            if (rule.minLength != null && text.length < rule.minLength) {
+                return message;
+            }
+            if (rule.maxLength != null && text.length > rule.maxLength) {
+                return message;
+            }
+        }
+        const requiresValue = field.required || rules.some((rule) => rule.required);
+        if (requiresValue
+            && field.type === 'passcode'
+            && typeof value === 'string'
+            && value.length < (field.length || 6)) {
+            return `请输入完整的${field.label || '验证码'}`;
+        }
+        return '';
+    }
+    _ruleMessage(field, rule) {
+        if (rule.message)
+            return rule.message;
+        const label = field.label || field.name;
+        if (rule.required)
+            return `${label}不能为空`;
+        if (rule.pattern != null)
+            return `${label}格式不正确`;
+        if (rule.minLength != null) {
+            return `${label}至少输入${rule.minLength}个字符`;
+        }
+        if (rule.maxLength != null) {
+            return `${label}最多输入${rule.maxLength}个字符`;
+        }
+        return `${label}输入不正确`;
+    }
+    _updateFieldValidation(field, error) {
+        if (!this.shadowRoot)
+            return;
+        this._errors[field.name] = error;
+        const fieldElement = Array.from(this.shadowRoot.querySelectorAll('.form-field')).find((element) => {
+            const control = element.querySelector('[data-name]');
+            return control?.dataset.name === field.name;
+        });
+        if (!fieldElement)
+            return;
+        const errorElement = fieldElement.querySelector('.field-error');
+        const fieldControl = fieldElement.querySelector('.field-control');
+        const formSelect = fieldElement.querySelector('.form-select');
+        const formRate = fieldElement.querySelector('.form-rate');
+        const controls = fieldElement.querySelectorAll('.field-input, .form-select, .form-rate, .passcode-cell');
+        errorElement.textContent = error;
+        fieldControl?.classList.toggle('error', Boolean(error));
+        if (formSelect) {
+            formSelect.updateProps(this._selectProps(field, error, Boolean(this._props.disabled)), this._isMobile);
+        }
+        if (formRate) {
+            formRate.updateProps(this._rateProps(field, error, Boolean(this._props.disabled)), this._isMobile);
+        }
+        controls.forEach((control) => {
+            if (control.classList.contains('passcode-cell')) {
+                control.classList.toggle('error', Boolean(error));
+            }
+            control.setAttribute('aria-invalid', String(Boolean(error)));
+            const descriptionIds = [
+                control.dataset.affixDescribedby,
+                error ? errorElement.id : '',
+            ].filter(Boolean).join(' ');
+            if (descriptionIds) {
+                control.setAttribute('aria-describedby', descriptionIds);
+            }
+            else {
+                control.removeAttribute('aria-describedby');
+            }
+        });
+    }
+    _escapeHtml(value) {
+        return String(value)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    _escapeAttr(value) {
+        return this._escapeHtml(value).replace(/"/g, '&quot;');
+    }
+    _domId(value) {
+        const normalized = String(value).replace(/[^a-zA-Z0-9_-]/g, '-');
+        return normalized || 'form';
+    }
     updateProps(props, isMobile) {
         this._errors = {};
+        this._submitted = false;
         super.updateProps(props, isMobile);
     }
 }
@@ -4150,6 +5233,7 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardProgress.is
  *       { "title": "Final review", "status": "pending" }
  *     ],
  *     "iconSize": 28,
+ *     "textLayout": "vertical",
  *     "titleProps": { "fontSize": "14px", "fontWeight": 500, "color": "#1a1a1a" },
  *     "descriptionProps": { "fontSize": "12px", "color": "#8c8c8c" },
  *     "connector": { "width": 2, "minHeight": 24, "style": "solid", "color": "#e8e8e8", "completedColor": "#52c41a" }
@@ -4217,12 +5301,13 @@ class CardSteps extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { items = [], iconSize: iconSizeProp = 28, titleProps = {}, descriptionProps = {}, connector = {}, style, 
+        const { items = [], iconSize: iconSizeProp = 28, textLayout: textLayoutProp = 'vertical', titleProps = {}, descriptionProps = {}, connector = {}, style, 
         // Keep backward compat: old "size" prop
         size, isExpressionResultStyle, } = this._props;
         const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
         // iconSize: prefer iconSize prop, fallback to legacy "size" prop
         const iconSize = Number(iconSizeProp != null ? iconSizeProp : size) || 28;
+        const textLayout = textLayoutProp === 'horizontal' ? 'horizontal' : 'vertical';
         // Runtime guard: items must be an array
         const stepItems = Array.isArray(items) ? items : [];
         if (!Array.isArray(items)) {
@@ -4284,7 +5369,7 @@ class CardSteps extends BaseElement {
         <div class="step-item" data-status="${status}">
           <div class="step-head${item.clickable ? ' step-clickable' : ''}" data-index="${index}">
             <div class="step-icon"${iconStyle}>${iconHTML}</div>
-            <div class="step-text">
+            <div class="step-text step-text-${textLayout}">
               <div class="step-title">${title}</div>
               ${descHTML}
             </div>
@@ -4344,11 +5429,28 @@ class CardSteps extends BaseElement {
           line-height: 1;
           user-select: none;
         }
-        .step-text {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          min-height: ${iconSize}px;
+        .step-text {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+          min-width: 0;
+          min-height: ${iconSize}px;
+        }
+        .step-text-horizontal {
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+        }
+        .step-text-horizontal .step-title {
+          min-width: 0;
+        }
+        .step-text-horizontal .step-description {
+          flex-shrink: 0;
+          margin-top: 0;
+          text-align: right;
+          white-space: nowrap;
         }
         .step-title {
           font-size: ${titleFontSize};
@@ -5437,9 +6539,680 @@ class CardVideo extends BaseElement {
         }
     }
 }
-CardVideo.is = 'ai-card-video';
-if (typeof customElements !== 'undefined' && !customElements.get(CardVideo.is)) {
-    customElements.define(CardVideo.is, CardVideo);
+CardVideo.is = 'ai-card-video';
+if (typeof customElements !== 'undefined' && !customElements.get(CardVideo.is)) {
+    customElements.define(CardVideo.is, CardVideo);
+}
+
+class CardSwitch extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this._currentChecked = null;
+    }
+    render() {
+        if (!this.shadowRoot || !this._node)
+            return;
+        const { checked, defaultChecked = false, disabled = false, readonly: readOnly = false, size = 22, activeColor = '#626a78', inactiveColor = '#a9afb9', thumbColor = '#ffffff', ariaLabel = 'Switch', style, trackStyle, thumbStyle, isExpressionResultStyle, } = this._props;
+        const initial = Boolean(checked ?? defaultChecked);
+        const current = this._currentChecked ?? initial;
+        const numericSize = Number(size);
+        const trackHeight = Number.isFinite(numericSize) && numericSize > 0
+            ? numericSize
+            : 22;
+        const trackWidth = Math.round(trackHeight * 2);
+        const thumbSize = Math.max(8, trackHeight - 4);
+        const rootInline = this.buildInlineStyle(style, isExpressionResultStyle);
+        const trackInline = this.buildInlineStyle({
+            width: trackWidth,
+            height: trackHeight,
+            ...(trackStyle || {}),
+            backgroundColor: current ? activeColor : inactiveColor,
+        }, isExpressionResultStyle);
+        const thumbInline = this.buildInlineStyle({
+            width: thumbSize,
+            height: thumbSize,
+            ...(thumbStyle || {}),
+            backgroundColor: thumbColor,
+        }, isExpressionResultStyle);
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          box-sizing: border-box;
+          vertical-align: middle;
+          -webkit-tap-highlight-color: transparent;
+        }
+        .switch-root {
+          display: inline-flex;
+          box-sizing: border-box;
+        }
+        .switch-track {
+          position: relative;
+          display: inline-block;
+          box-sizing: border-box;
+          min-width: 28px;
+          min-height: 16px;
+          padding: 0;
+          margin: 0;
+          border: none;
+          border-radius: 999px;
+          cursor: pointer;
+          transition: background-color 0.2s ease, box-shadow 0.2s ease;
+        }
+        .switch-track:focus-visible {
+          outline: 2px solid #1677ff;
+          outline-offset: 2px;
+        }
+        .switch-track:disabled {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .switch-track[aria-readonly="true"] {
+          cursor: default;
+        }
+        .switch-thumb {
+          position: absolute;
+          top: 50%;
+          left: 2px;
+          display: block;
+          box-sizing: border-box;
+          border-radius: 50%;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+          transform: translateY(-50%);
+          transition: left 0.2s ease, transform 0.2s ease;
+          pointer-events: none;
+        }
+        .switch-track.checked .switch-thumb {
+          left: calc(100% - 2px);
+          transform: translate(-100%, -50%);
+        }
+      </style>
+      <div class="switch-root" style="${rootInline}">
+        <button
+          type="button"
+          class="switch-track ${current ? 'checked' : ''}"
+          part="track"
+          role="switch"
+          aria-checked="${current}"
+          aria-label="${this.escapeAttr(String(ariaLabel))}"
+          aria-readonly="${Boolean(readOnly)}"
+          ${disabled ? 'disabled' : ''}
+          style="${trackInline}"
+        >
+          <span class="switch-thumb" part="thumb" style="${thumbInline}"></span>
+        </button>
+      </div>
+    `;
+        const button = this.shadowRoot.querySelector('.switch-track');
+        button?.addEventListener('click', () => {
+            if (disabled || readOnly)
+                return;
+            this.commit(!current, current, 'pointer');
+        });
+        button?.addEventListener('keydown', (event) => {
+            if (disabled
+                || readOnly
+                || (event.key !== ' ' && event.key !== 'Enter')) {
+                return;
+            }
+            event.preventDefault();
+            this.commit(!current, current, 'keyboard');
+        });
+    }
+    updateProps(props, isMobile) {
+        this._currentChecked = null;
+        super.updateProps(props, isMobile);
+    }
+    commit(next, previous, source) {
+        if (next === previous)
+            return;
+        this._currentChecked = next;
+        this.render();
+        emitValueChange(this, next, previous, source, { checked: next });
+    }
+    escapeAttr(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+CardSwitch.is = 'ai-card-switch';
+if (typeof customElements !== 'undefined' && !customElements.get(CardSwitch.is)) {
+    customElements.define(CardSwitch.is, CardSwitch);
+}
+
+const INTERACTIVE_TAGS = new Set([
+    'A',
+    'AUDIO',
+    'BUTTON',
+    'INPUT',
+    'SELECT',
+    'TEXTAREA',
+    'VIDEO',
+]);
+const INTERACTIVE_CARD_TYPES = new Set([
+    'Button',
+    'Counter',
+    'DatePicker',
+    'Input',
+    'PasscodeInput',
+    'Rate',
+    'Select',
+    'Switch',
+]);
+class CardChoiceItem extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this._context = {
+            selectionMode: 'single',
+            variant: 'plain',
+            selected: false,
+            listDisabled: false,
+            listReadonly: false,
+            selectionBlocked: false,
+            tabIndex: 0,
+            indicatorPosition: 'start',
+        };
+    }
+    get value() {
+        return String(this._props.value ?? '');
+    }
+    get itemDisabled() {
+        return Boolean(this._props.disabled);
+    }
+    setSelectionContext(context) {
+        this._context = context;
+        this.render();
+    }
+    focusIndicator() {
+        this.shadowRoot
+            ?.querySelector('.choice-indicator')
+            ?.focus();
+    }
+    render() {
+        if (!this.shadowRoot || !this._node)
+            return;
+        const { disabled = false, ariaLabel = this.value || 'Choice', style, selectedStyle, indicatorStyle, selectedIndicatorStyle, checkedIcon, isExpressionResultStyle, } = this._props;
+        const { selectionMode, variant, selected, listDisabled, listReadonly, selectionBlocked, tabIndex, indicatorPosition, itemStyle, selectedItemStyle, indicatorStyle: listIndicatorStyle, selectedIndicatorStyle: listSelectedIndicatorStyle, checkedIcon: listCheckedIcon, } = this._context;
+        const fullyDisabled = Boolean(disabled || listDisabled);
+        const selectionUnavailable = fullyDisabled || listReadonly;
+        const rootInline = this.buildInlineStyle({
+            ...(itemStyle || {}),
+            ...(style || {}),
+            ...(selected ? selectedItemStyle || {} : {}),
+            ...(selected ? selectedStyle || {} : {}),
+        }, isExpressionResultStyle);
+        const indicatorInline = this.buildInlineStyle({
+            ...(listIndicatorStyle || {}),
+            ...(indicatorStyle || {}),
+            ...(selected ? listSelectedIndicatorStyle || {} : {}),
+            ...(selected ? selectedIndicatorStyle || {} : {}),
+        }, isExpressionResultStyle);
+        const indicatorRole = selectionMode === 'single' ? 'radio' : 'checkbox';
+        const resolvedCheckedIcon = checkedIcon ?? listCheckedIcon ?? {
+            name: 'check_bold',
+            size: 12,
+        };
+        const checkedMark = selectionMode === 'multiple'
+            ? `<span class="choice-icon" aria-hidden="true">${renderIconContent(resolvedCheckedIcon)}</span>`
+            : '<span class="radio-dot" aria-hidden="true"></span>';
+        this.setAttribute('data-selected', String(selected));
+        this.toggleAttribute('data-disabled', fullyDisabled);
+        this.toggleAttribute('data-selection-blocked', selectionBlocked);
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+        }
+        .choice-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          box-sizing: border-box;
+          min-width: 0;
+          padding: 6px 0;
+          border: 1px solid transparent;
+          border-radius: 8px;
+          background: transparent;
+          color: #343b4a;
+          cursor: pointer;
+          transition: border-color 0.15s ease, box-shadow 0.15s ease,
+            background-color 0.15s ease;
+        }
+        .choice-item.outlined {
+          padding: 10px 12px;
+          border-color: #d9dce2;
+          background: #fff;
+        }
+        .choice-item.outlined.selected {
+          border-color: #626a78;
+          background: #f6f7f9;
+        }
+        .choice-item.disabled {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
+        .choice-item.readonly {
+          cursor: default;
+        }
+        .choice-indicator {
+          width: 20px;
+          height: 20px;
+          min-width: 20px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          padding: 0;
+          border: 2px solid #c9cdd4;
+          border-radius: ${selectionMode === 'single' ? '50%' : '5px'};
+          background: #fff;
+          color: #fff;
+          cursor: pointer;
+        }
+        .choice-indicator.checked {
+          border-color: #626a78;
+          background: #626a78;
+        }
+        .choice-indicator[aria-disabled="true"] {
+          cursor: not-allowed;
+        }
+        .choice-indicator:focus-visible {
+          outline: 2px solid #1677ff;
+          outline-offset: 2px;
+        }
+        .radio-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: currentColor;
+        }
+        .choice-icon,
+        .choice-icon svg,
+        .choice-icon img {
+          display: block;
+          flex: none;
+        }
+        .choice-content {
+          flex: 1;
+          min-width: 0;
+        }
+      </style>
+      <div
+        class="choice-item ${variant} ${selected ? 'selected' : ''} ${fullyDisabled ? 'disabled' : ''} ${listReadonly ? 'readonly' : ''}"
+        part="item"
+        style="${rootInline}"
+      >
+        ${indicatorPosition === 'start' ? this.renderIndicator(indicatorRole, selected, selectionUnavailable, tabIndex, ariaLabel, indicatorInline, checkedMark) : ''}
+        <div class="choice-content" part="content" ${fullyDisabled ? 'inert' : ''}>
+          <slot></slot>
+        </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) => {
+            event.stopPropagation();
+            this.requestChange('pointer');
+        });
+        indicator?.addEventListener('keydown', (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.requestChange('keyboard');
+                return;
+            }
+            if (event.key === 'ArrowDown'
+                || event.key === 'ArrowRight'
+                || event.key === 'ArrowUp'
+                || event.key === 'ArrowLeft'
+                || event.key === 'Home'
+                || event.key === 'End') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.dispatchEvent(new CustomEvent('choice-navigate', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: this.value,
+                        key: event.key,
+                    },
+                }));
+            }
+        });
+        root?.addEventListener('click', (event) => {
+            if (this.hasInteractiveTarget(event))
+                return;
+            this.requestChange('pointer');
+        });
+    }
+    renderIndicator(role, selected, unavailable, tabIndex, ariaLabel, inlineStyle, mark) {
+        return `
+      <button
+        type="button"
+        class="choice-indicator ${selected ? 'checked' : ''}"
+        part="indicator"
+        role="${role}"
+        aria-checked="${selected}"
+        aria-disabled="${unavailable}"
+        tabindex="${unavailable ? -1 : tabIndex}"
+        ${unavailable ? 'disabled' : ''}
+        aria-label="${this.escapeAttr(String(ariaLabel))}"
+        style="${inlineStyle}"
+      >${selected ? mark : ''}</button>
+    `;
+    }
+    requestChange(source) {
+        if (this.itemDisabled
+            || this._context.listDisabled
+            || this._context.listReadonly) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('choice-request-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value,
+                source,
+            },
+        }));
+    }
+    hasInteractiveTarget(event) {
+        for (const target of event.composedPath()) {
+            if (target === this)
+                break;
+            if (!(target instanceof HTMLElement))
+                continue;
+            if (INTERACTIVE_TAGS.has(target.tagName))
+                return true;
+            if (target.isContentEditable)
+                return true;
+            const cardType = target.getAttribute('data-card-type');
+            if (cardType && INTERACTIVE_CARD_TYPES.has(cardType))
+                return true;
+        }
+        return false;
+    }
+    escapeAttr(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+CardChoiceItem.is = 'ai-card-choice-item';
+if (typeof customElements !== 'undefined'
+    && !customElements.get(CardChoiceItem.is)) {
+    customElements.define(CardChoiceItem.is, CardChoiceItem);
+}
+
+class CardChoiceList extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this._onChoiceRequest = (event) => {
+            const sourceItem = event.target;
+            if (!(sourceItem instanceof CardChoiceItem)
+                || sourceItem.parentElement !== this) {
+                return;
+            }
+            const customEvent = event;
+            event.stopPropagation();
+            this.commitRequest(customEvent.detail.value, customEvent.detail.source);
+        };
+        this._onChoiceNavigate = (event) => {
+            const sourceItem = event.target;
+            if (!(sourceItem instanceof CardChoiceItem)
+                || sourceItem.parentElement !== this) {
+                return;
+            }
+            const customEvent = event;
+            event.stopPropagation();
+            this.navigateFrom(customEvent.detail.value, customEvent.detail.key);
+        };
+    }
+    render() {
+        if (!this.shadowRoot || !this._node)
+            return;
+        const { selectionMode = 'single', value, defaultValue, disabled = false, readonly: readOnly = false, direction = 'vertical', gap = 8, ariaLabel = 'Choices', style, isExpressionResultStyle, } = this._props;
+        const mode = selectionMode === 'multiple' ? 'multiple' : 'single';
+        if (this._currentValue === undefined) {
+            this._currentValue = this.normalizeValue(value !== undefined ? value : defaultValue, mode);
+        }
+        const inlineStyle = this.buildInlineStyle({
+            display: 'flex',
+            flexDirection: direction === 'horizontal' ? 'row' : 'column',
+            gap,
+            ...(style || {}),
+        }, isExpressionResultStyle);
+        this.removeEventListener('choice-request-change', this._onChoiceRequest);
+        this.addEventListener('choice-request-change', this._onChoiceRequest);
+        this.removeEventListener('choice-navigate', this._onChoiceNavigate);
+        this.addEventListener('choice-navigate', this._onChoiceNavigate);
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          min-width: 0;
+        }
+        .choice-list {
+          box-sizing: border-box;
+          min-width: 0;
+        }
+      </style>
+      <div
+        class="choice-list"
+        part="list"
+        role="${mode === 'single' ? 'radiogroup' : 'group'}"
+        aria-label="${this.escapeAttr(String(ariaLabel))}"
+        aria-disabled="${Boolean(disabled)}"
+        aria-readonly="${Boolean(readOnly)}"
+        style="${inlineStyle}"
+      >
+        <slot></slot>
+      </div>
+    `;
+        this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this.syncItems());
+        queueMicrotask(() => this.syncItems());
+    }
+    updateProps(props, isMobile) {
+        this._currentValue = undefined;
+        super.updateProps(props, isMobile);
+    }
+    commitRequest(value, source) {
+        if (this._props.disabled || this._props.readonly)
+            return;
+        const mode = this.mode;
+        const previousValue = this.cloneValue(this.currentValue);
+        let nextValue;
+        let checked;
+        if (mode === 'multiple') {
+            const current = this.values;
+            const index = current.indexOf(value);
+            if (index >= 0) {
+                nextValue = current.filter((entry) => entry !== value);
+                checked = false;
+            }
+            else {
+                const maxSelected = this.maxSelected;
+                if (maxSelected != null && current.length >= maxSelected) {
+                    this.dispatchEvent(new CustomEvent('max-reached', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            maxSelected,
+                            attemptedValue: value,
+                            values: current,
+                        },
+                    }));
+                    return;
+                }
+                nextValue = [...current, value];
+                checked = true;
+            }
+        }
+        else {
+            const current = typeof this.currentValue === 'string'
+                ? this.currentValue
+                : null;
+            if (current === value) {
+                if (!this._props.allowClear)
+                    return;
+                nextValue = null;
+                checked = false;
+            }
+            else {
+                nextValue = value;
+                checked = true;
+            }
+        }
+        this._currentValue = nextValue;
+        this.syncItems();
+        const values = this.values;
+        emitValueChange(this, nextValue, previousValue, source, {
+            values,
+            changedValue: value,
+            checked,
+            selectionMode: mode,
+        });
+    }
+    syncItems() {
+        if (!this._node)
+            return;
+        const seen = new Set();
+        const selected = new Set(this.values);
+        const maxSelected = this.maxSelected;
+        const maxReached = (this.mode === 'multiple'
+            && maxSelected != null
+            && selected.size >= maxSelected);
+        const { disabled = false, readonly: readOnly = false, variant = 'plain', indicatorPosition = 'start', itemStyle, selectedItemStyle, indicatorStyle, selectedIndicatorStyle, checkedIcon, } = this._props;
+        const items = Array.from(this.children).filter((child) => child instanceof CardChoiceItem);
+        const selectedFocusable = items.find((item) => selected.has(item.value) && !item.itemDisabled);
+        const firstFocusable = items.find((item) => !item.itemDisabled);
+        const tabStop = selectedFocusable ?? firstFocusable;
+        for (const child of items) {
+            if (!(child instanceof CardChoiceItem))
+                continue;
+            const duplicate = seen.has(child.value);
+            seen.add(child.value);
+            const isSelected = selected.has(child.value);
+            const context = {
+                selectionMode: this.mode,
+                variant: variant === 'outlined' ? 'outlined' : 'plain',
+                selected: isSelected,
+                listDisabled: Boolean(disabled || duplicate),
+                listReadonly: Boolean(readOnly),
+                selectionBlocked: Boolean(maxReached && !isSelected),
+                tabIndex: (!disabled
+                    && !readOnly
+                    && !duplicate
+                    && child === tabStop) ? 0 : -1,
+                indicatorPosition: indicatorPosition === 'end' ? 'end' : 'start',
+                itemStyle,
+                selectedItemStyle,
+                indicatorStyle,
+                selectedIndicatorStyle,
+                checkedIcon,
+            };
+            child.setSelectionContext(context);
+        }
+    }
+    navigateFrom(value, key) {
+        if (this._props.disabled || this._props.readonly)
+            return;
+        const seen = new Set();
+        const items = Array.from(this.children).filter((child) => {
+            if (!(child instanceof CardChoiceItem) || child.itemDisabled) {
+                return false;
+            }
+            if (seen.has(child.value))
+                return false;
+            seen.add(child.value);
+            return true;
+        });
+        if (items.length === 0)
+            return;
+        const currentIndex = Math.max(0, items.findIndex((item) => item.value === value));
+        let nextIndex = currentIndex;
+        if (key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (key === 'End') {
+            nextIndex = items.length - 1;
+        }
+        else if (key === 'ArrowDown' || key === 'ArrowRight') {
+            nextIndex = (currentIndex + 1) % items.length;
+        }
+        else if (key === 'ArrowUp' || key === 'ArrowLeft') {
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+        }
+        const target = items[nextIndex];
+        if (!target || target.value === value) {
+            target?.focusIndicator();
+            return;
+        }
+        if (this.mode === 'single') {
+            this.commitRequest(target.value, 'keyboard');
+        }
+        queueMicrotask(() => target.focusIndicator());
+    }
+    get mode() {
+        return this._props.selectionMode === 'multiple' ? 'multiple' : 'single';
+    }
+    get currentValue() {
+        if (this._currentValue === undefined) {
+            this._currentValue = this.normalizeValue(this._props.value !== undefined
+                ? this._props.value
+                : this._props.defaultValue, this.mode);
+        }
+        return this._currentValue;
+    }
+    get values() {
+        const value = this.currentValue;
+        if (Array.isArray(value))
+            return [...value];
+        return typeof value === 'string' && value ? [value] : [];
+    }
+    get maxSelected() {
+        if (this.mode !== 'multiple')
+            return null;
+        const value = Number(this._props.maxSelected);
+        return Number.isInteger(value) && value > 0 ? value : null;
+    }
+    normalizeValue(input, mode) {
+        if (mode === 'multiple') {
+            const source = Array.isArray(input)
+                ? input
+                : input == null || input === ''
+                    ? []
+                    : [input];
+            return Array.from(new Set(source.map((entry) => String(entry))));
+        }
+        if (Array.isArray(input)) {
+            return input.length > 0 ? String(input[0]) : null;
+        }
+        return input == null || input === '' ? null : String(input);
+    }
+    cloneValue(value) {
+        return Array.isArray(value) ? [...value] : value;
+    }
+    escapeAttr(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+CardChoiceList.is = 'ai-card-choice-list';
+if (typeof customElements !== 'undefined'
+    && !customElements.get(CardChoiceList.is)) {
+    customElements.define(CardChoiceList.is, CardChoiceList);
 }
 
 /**
@@ -5591,6 +7364,24 @@ function renderVideo(node, props, isMobile) {
     el.setData(node, props, isMobile);
     return el;
 }
+/** Render a Switch node. */
+function renderSwitch(node, props, isMobile) {
+    const el = document.createElement(CardSwitch.is);
+    el.setData(node, props, isMobile);
+    return el;
+}
+/** Render a ChoiceList node. */
+function renderChoiceList(node, props, isMobile) {
+    const el = document.createElement(CardChoiceList.is);
+    el.setData(node, props, isMobile);
+    return el;
+}
+/** Render a ChoiceItem node. */
+function renderChoiceItem(node, props, isMobile) {
+    const el = document.createElement(CardChoiceItem.is);
+    el.setData(node, props, isMobile);
+    return el;
+}
 /**
  * Fallback renderer for unknown / container component types.
  * Uses a plain `<div>` (no Shadow DOM) so that child elements
@@ -5634,6 +7425,9 @@ const componentRenderers = {
     DatePicker: renderDatePicker,
     Audio: renderAudio,
     Video: renderVideo,
+    Switch: renderSwitch,
+    ChoiceList: renderChoiceList,
+    ChoiceItem: renderChoiceItem,
     _default: renderDefault,
 };
 /**
@@ -5661,6 +7455,438 @@ function resolveSizeInStyle(style) {
     return resolved;
 }
 
+/**
+ * Render the scoped/materialized branch of a card.
+ *
+ * This implementation deliberately owns its state independently from the
+ * legacy static renderer. Bound writes happen in isolated drafts and publish
+ * only after materialization and detached DOM construction both succeed.
+ */
+function renderBoundCard(container, schema, options) {
+    const variables = cloneJsonData({
+        ...schema.variables,
+        ...options.variables,
+    });
+    const schemaActions = schema.actions ?? {};
+    const lifecycleManager = createLifecycleManager();
+    const abortController = new AbortController();
+    const inflightRequests = new Map();
+    const activeLifecycleNodes = new Map();
+    let currentMaterialized;
+    let revision = 0;
+    let disposed = false;
+    let isMobile = options.isMobile ?? isMobileViewport();
+    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)
+            : variables;
+    }
+    function resolveNodeValue(value, node, renderVariables) {
+        if (node.bindingDialect === 'a2ui') {
+            return resolveA2UIDeep(value, renderVariables, node.dataPath);
+        }
+        if (typeof value === 'string' && hasExpression(value)) {
+            return resolveExpression(value, expressionContextFor(node));
+        }
+        return value;
+    }
+    function resolveNodeProps(node, renderVariables) {
+        const resolvedProps = (node.bindingDialect === 'a2ui'
+            ? resolveA2UIDeep(node.props, renderVariables, node.dataPath)
+            : resolveDeep(node.props, expressionContextFor(node)));
+        if (resolvedProps.content
+            && typeof resolvedProps.content === 'object'
+            && 'type' in resolvedProps.content) {
+            resolvedProps.content = resolveExpressionValue(resolvedProps.content, expressionContextFor(node));
+        }
+        return resolvedProps;
+    }
+    function createPassiveActionContext(renderVariables) {
+        return {
+            ...createWebActionContext({
+                ...options,
+                abortSignal: abortController.signal,
+            }),
+            variables: renderVariables,
+            botId: options.botId,
+            inflightRequests,
+        };
+    }
+    function renderNode(node, renderVariables, lifecycleIds) {
+        if (node.directives?.visible) {
+            const resolved = resolveNodeValue(node.directives.visible, node, renderVariables);
+            if (resolved === false
+                || resolved === 'false'
+                || resolved === ''
+                || resolved === 0) {
+                const placeholder = document.createElement('div');
+                placeholder.style.display = 'none';
+                placeholder.setAttribute('data-card-id', node.id);
+                return placeholder;
+            }
+        }
+        const resolvedProps = resolveNodeProps(node, renderVariables);
+        let isDisabled = false;
+        if (node.directives?.disabled) {
+            const resolved = resolveNodeValue(node.directives.disabled, node, renderVariables);
+            isDisabled = (resolved === true
+                || resolved === 'true'
+                || resolved === 1);
+        }
+        const renderer = (componentRenderers[node.type] ?? componentRenderers._default);
+        const el = renderer(node, resolvedProps, isMobile);
+        if (isDisabled) {
+            el.setAttribute('data-disabled', 'true');
+            el.style.background = '#F5F5F5';
+            el.style.color = '#C0C0C0';
+            el.style.setProperty('--card-disabled-color', '#C0C0C0');
+            el.style.pointerEvents = 'none';
+            el.style.cursor = 'default';
+        }
+        const variableKey = resolvedProps.variableKey;
+        if (variableKey) {
+            el.addEventListener('input', ((event) => {
+                if (event.target !== el || disposed)
+                    return;
+                const value = event.detail?.value
+                    ?? event.target?.value;
+                if (value !== undefined) {
+                    // Keep the existing focus-preserving, no-rerender behavior. Bumping
+                    // the revision prevents an older async action from overwriting it.
+                    variables[variableKey] = value;
+                    revision += 1;
+                }
+            }));
+        }
+        if (node.events && !isDisabled) {
+            for (const [eventName, eventValue] of Object.entries(node.events)) {
+                if (!eventValue || !resolveActionRef(eventValue, schemaActions)) {
+                    continue;
+                }
+                const domEvent = EVENT_MAP[eventName] ?? eventName;
+                el.addEventListener(domEvent, ((event) => {
+                    const ownsValueEvent = ((domEvent === 'input' || domEvent === 'change')
+                        && VALUE_CONTROL_TYPES$1.has(node.type));
+                    if (ownsValueEvent && event.target !== el)
+                        return;
+                    const eventDetail = (event instanceof CustomEvent && event.detail != null)
+                        ? event.detail
+                        : undefined;
+                    enqueueBoundEvent(node.id, eventName, eventDetail);
+                }));
+            }
+        }
+        if (node.lifecycle) {
+            lifecycleIds.add(node.id);
+        }
+        const renderChild = (child) => renderNode(child, renderVariables, lifecycleIds);
+        const childrenMap = {};
+        for (const child of node.children) {
+            childrenMap[child.id] = child;
+        }
+        const layoutApplied = renderSlotLayout(el, node.children, resolvedProps, child => renderChild(child), childrenMap, createPassiveActionContext(renderVariables));
+        if (!layoutApplied) {
+            for (const child of node.children) {
+                el.appendChild(renderChild(child));
+            }
+        }
+        if (isDisabled) {
+            el.querySelectorAll('*').forEach((child) => {
+                const htmlChild = child;
+                htmlChild.setAttribute('data-disabled', 'true');
+                htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
+            });
+        }
+        return el;
+    }
+    function prepareCandidate(draft) {
+        const materialized = materializeCard(schema, draft);
+        const lifecycleIds = new Set();
+        const dom = renderNode(materialized.root, draft, lifecycleIds);
+        return { materialized, dom, lifecycleIds };
+    }
+    function indexNodes(root) {
+        const nodes = new Map();
+        const visit = (node) => {
+            nodes.set(node.id, node);
+            node.children.forEach(visit);
+        };
+        visit(root);
+        return nodes;
+    }
+    function selectLifecycleNodes(materialized, ids) {
+        const indexed = indexNodes(materialized.root);
+        const selected = new Map();
+        for (const id of ids) {
+            const node = indexed.get(id);
+            if (node)
+                selected.set(id, node);
+        }
+        return selected;
+    }
+    function createLifecycleActionContext(node) {
+        const writeLiveVariable = (key, value) => {
+            if (disposed)
+                return;
+            updateVariables({ [key]: value });
+        };
+        return {
+            ...createWebActionContext({
+                ...options,
+                setVariable: writeLiveVariable,
+                abortSignal: abortController.signal,
+            }),
+            variables,
+            expressionContext: createExpressionContext(node.scope),
+            parameterResolver: node.bindingDialect === 'a2ui'
+                ? createA2UIParameterResolver(variables, node.dataPath)
+                : undefined,
+            variableWriter: (key, value) => writeLiveVariable(key, value),
+            botId: options.botId,
+            inflightRequests,
+        };
+    }
+    function reconcileLifecycles(nextNodes) {
+        const removed = [...activeLifecycleNodes.entries()]
+            .filter(([id]) => !nextNodes.has(id));
+        const added = [...nextNodes.entries()]
+            .filter(([id]) => !activeLifecycleNodes.has(id));
+        activeLifecycleNodes.clear();
+        for (const [id, node] of nextNodes) {
+            activeLifecycleNodes.set(id, node);
+        }
+        lifecycleQueue = lifecycleQueue.then(async () => {
+            for (const [id, node] of removed) {
+                await lifecycleManager.destroy(id, createLifecycleActionContext(node));
+                lifecycleManager.unregister(id);
+            }
+            if (disposed)
+                return;
+            for (const [id, node] of added) {
+                lifecycleManager.register(id, node.lifecycle);
+                await lifecycleManager.mount(id, createLifecycleActionContext(node));
+            }
+        }).catch((error) => {
+            console.error('[renderCard] Bound lifecycle action failed', error);
+        });
+    }
+    function publishDOM(candidate, incrementRevision) {
+        const scrollPositions = captureScrollPositions$1(container);
+        const mediaStates = captureMediaStates$1(container);
+        disposeChartsIn(container);
+        container.replaceChildren(candidate.dom);
+        currentMaterialized = candidate.materialized;
+        if (incrementRevision)
+            revision += 1;
+        reconcileLifecycles(selectLifecycleNodes(currentMaterialized, candidate.lifecycleIds));
+        restoreScrollPositions$1(container, scrollPositions);
+        restoreMediaStates$1(container, mediaStates);
+    }
+    function assertCurrentRevision(baseRevision) {
+        if (disposed || revision !== baseRevision) {
+            const error = new Error('[renderCard] BOUND_TRANSACTION_CONFLICT');
+            error.code = 'BOUND_TRANSACTION_CONFLICT';
+            throw error;
+        }
+    }
+    function commitDraft(draft, candidate, baseRevision) {
+        assertCurrentRevision(baseRevision);
+        replaceRootContents(variables, draft);
+        // Re-materialize against the stable public variables root. The detached
+        // DOM already represents the exact same validated JSON data.
+        candidate.materialized = materializeCard(schema, variables);
+        publishDOM(candidate, true);
+    }
+    function writeDraftVariable(draft, key, value) {
+        Object.defineProperty(draft, String(key), {
+            value,
+            enumerable: true,
+            configurable: true,
+            writable: true,
+        });
+    }
+    function createDraftActionContext(node, draft) {
+        const write = (key, value) => {
+            writeDraftVariable(draft, key, value);
+        };
+        return {
+            ...createWebActionContext({
+                ...options,
+                setVariable: write,
+                abortSignal: abortController.signal,
+            }),
+            variables: draft,
+            expressionContext: createExpressionContext(node.scope),
+            parameterResolver: node.bindingDialect === 'a2ui'
+                ? createA2UIParameterResolver(draft, node.dataPath)
+                : undefined,
+            variableWriter: (key, value) => write(key, value),
+            botId: options.botId,
+            inflightRequests,
+        };
+    }
+    async function runBoundEvent(runtimeId, eventName, eventDetail) {
+        if (disposed)
+            return;
+        const baseRevision = revision;
+        const draft = cloneJsonData(variables);
+        if (eventDetail !== undefined) {
+            writeDraftVariable(draft, '_event', cloneJsonData(eventDetail));
+        }
+        const freshMaterialized = materializeCard(schema, draft);
+        const freshNode = indexNodes(freshMaterialized.root).get(runtimeId);
+        if (!freshNode) {
+            throw new Error(`[renderCard] Bound runtime node "${runtimeId}" no longer exists`);
+        }
+        const eventValue = freshNode.events?.[eventName];
+        const steps = eventValue
+            ? resolveActionRef(eventValue, schemaActions)
+            : undefined;
+        if (!steps)
+            return;
+        await runActionSteps(steps, createDraftActionContext(freshNode, draft));
+        assertCurrentRevision(baseRevision);
+        const candidate = prepareCandidate(draft);
+        commitDraft(draft, candidate, baseRevision);
+    }
+    function enqueueBoundEvent(runtimeId, eventName, eventDetail) {
+        if (disposed)
+            return;
+        actionQueue = actionQueue
+            .then(() => runBoundEvent(runtimeId, eventName, eventDetail))
+            .catch((error) => {
+            if (error
+                && typeof error === 'object'
+                && error.code
+                    === 'BOUND_TRANSACTION_CONFLICT') {
+                return;
+            }
+            console.error('[renderCard] Bound action failed', error);
+        });
+    }
+    function updateVariables(newVariables) {
+        if (disposed)
+            return;
+        const baseRevision = revision;
+        const draft = cloneJsonData(variables);
+        const patch = cloneJsonData(newVariables);
+        for (const key of Object.keys(patch)) {
+            writeDraftVariable(draft, key, patch[key]);
+        }
+        const candidate = prepareCandidate(draft);
+        commitDraft(draft, candidate, baseRevision);
+    }
+    const initialCandidate = prepareCandidate(variables);
+    currentMaterialized = initialCandidate.materialized;
+    publishDOM(initialCandidate, false);
+    return {
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            abortController.abort();
+            removeViewportListener();
+            disposeChartsIn(container);
+            container.replaceChildren();
+            const lifecycleNodes = [...activeLifecycleNodes.entries()];
+            activeLifecycleNodes.clear();
+            lifecycleQueue = lifecycleQueue
+                .then(async () => {
+                for (const [id, node] of lifecycleNodes) {
+                    await lifecycleManager.destroy(id, createLifecycleActionContext(node));
+                    lifecycleManager.unregister(id);
+                }
+                await lifecycleManager.dispose(createPassiveActionContext(variables));
+            })
+                .catch((error) => {
+                console.error('[renderCard] Bound lifecycle dispose failed', error);
+            });
+        },
+        updateVariables,
+    };
+}
+function captureScrollPositions$1(root) {
+    const positions = new Map();
+    root.querySelectorAll('[data-scroll-id]').forEach((element) => {
+        const id = element.getAttribute('data-scroll-id');
+        if (id && element.scrollLeft > 0) {
+            positions.set(id, element.scrollLeft);
+        }
+    });
+    return positions;
+}
+function restoreScrollPositions$1(root, positions) {
+    if (positions.size === 0)
+        return;
+    root.querySelectorAll('[data-scroll-id]').forEach((element) => {
+        const id = element.getAttribute('data-scroll-id');
+        const saved = id ? positions.get(id) : undefined;
+        if (saved == null)
+            return;
+        const scroller = element;
+        scroller.dataset.restoreScrollLeft = String(saved);
+        const previousSnap = scroller.style.scrollSnapType;
+        scroller.style.scrollSnapType = 'none';
+        scroller.scrollLeft = saved;
+        requestAnimationFrame(() => {
+            scroller.style.scrollSnapType = previousSnap;
+        });
+    });
+}
+function captureMediaStates$1(root) {
+    const states = new Map();
+    root.querySelectorAll('ai-card-audio, ai-card-video').forEach((element) => {
+        const id = element.getAttribute('data-card-id');
+        const media = element.shadowRoot?.querySelector('audio, video');
+        const snapshot = snapshotMedia(media);
+        if (id && snapshot)
+            states.set(id, snapshot);
+    });
+    return states;
+}
+function restoreMediaStates$1(root, states) {
+    if (states.size === 0)
+        return;
+    root.querySelectorAll('ai-card-audio, ai-card-video').forEach((element) => {
+        const id = element.getAttribute('data-card-id');
+        const snapshot = id ? states.get(id) : undefined;
+        if (!snapshot)
+            return;
+        const media = element.shadowRoot?.querySelector('audio, video');
+        restoreMedia(media, snapshot);
+    });
+}
+const EVENT_MAP = {
+    onClick: 'click',
+    onChange: 'change',
+    onInput: 'input',
+    onSubmit: 'submit',
+    onStepClick: 'step-click',
+    onPlay: 'play',
+    onPause: 'pause',
+    onEnded: 'ended',
+    onMaxReached: 'max-reached',
+};
+const VALUE_CONTROL_TYPES$1 = new Set([
+    'ChoiceList',
+    'Counter',
+    'Input',
+    'Rate',
+    'Select',
+    'Switch',
+]);
+
 /**
  * renderCard — the primary public API for @antglobal/copilot-cards-web.
  *
@@ -5688,6 +7914,12 @@ function renderCard(container, schemaInput, options = {}) {
     if (errors.length > 0) {
         throw new Error(`[renderCard] Invalid schema:\n${errors.join('\n')}`);
     }
+    if (!requiresBindingMaterialization(schema)) {
+        return renderStaticCard(container, schema, options);
+    }
+    return renderBoundCard(container, schema, options);
+}
+function renderStaticCard(container, schema, options) {
     // 2. Parse into render tree
     const tree = parseSchema(schema);
     // 3. Reactive variables store (mutable copy, merged with external variables)
@@ -5878,6 +8110,10 @@ function renderNode(node, variables, actionContext, isMobile, lifecycleManager,
     const variableKey = resolvedProps.variableKey;
     if (variableKey) {
         el.addEventListener('input', ((e) => {
+            // Nested value controls own their variableKey. Only a value event
+            // dispatched by this component may update this component's variable.
+            if (e.target !== el)
+                return;
             const value = e.detail?.value
                 ?? e.target?.value;
             if (value !== undefined) {
@@ -5896,6 +8132,14 @@ function renderNode(node, variables, actionContext, isMobile, lifecycleManager,
                 continue;
             const domEvent = eventMap[event] ?? event;
             el.addEventListener(domEvent, ((e) => {
+                // Value controls own their input/change handlers; a nested control's
+                // same-named event must not trigger the parent's schema action.
+                // Other component/event pairs keep the renderer's existing bubbling
+                // behavior (for example a Container-level click handler).
+                const ownsValueEvent = ((domEvent === 'input' || domEvent === 'change')
+                    && VALUE_CONTROL_TYPES.has(node.type));
+                if (ownsValueEvent && e.target !== el)
+                    return;
                 // Write event.detail to _event variable so action params can use ${_event.xxx}
                 if (e instanceof CustomEvent && e.detail != null) {
                     variables._event = e.detail;
@@ -5943,7 +8187,16 @@ const eventMap = {
     onPlay: 'play',
     onPause: 'pause',
     onEnded: 'ended',
+    onMaxReached: 'max-reached',
 };
+const VALUE_CONTROL_TYPES = new Set([
+    'ChoiceList',
+    'Counter',
+    'Input',
+    'Rate',
+    'Select',
+    'Switch',
+]);
 
 /**
  * Streaming Card Renderer — enables progressive card rendering via streaming commands.
@@ -5999,6 +8252,15 @@ function renderStreamingCard(container, options = {}) {
     let isMobile = options.isMobile ?? isMobileViewport();
     let currentSchema = null;
     let currentSurfaceId = null;
+    let currentMaterialized = null;
+    let boundRevision = 0;
+    let boundActionQueue = Promise.resolve();
+    let boundLifecycleEpoch = 0;
+    let disposed = false;
+    const sourceOccurrences = new Map();
+    const activeBoundLifecycles = new Map();
+    const mountedBoundLifecycles = new Map();
+    const boundLifecycleGenerations = new Map();
     // Responsive viewport detection
     const removeViewportListener = options.isMobile == null
         ? onViewportChange((mobile) => {
@@ -6007,35 +8269,200 @@ function renderStreamingCard(container, options = {}) {
             if (currentSchema) {
                 rerenderAll();
             }
-        })
-        : () => { };
-    // ─── Action Context ─────────────────────────────────────────────
-    function buildActionContext() {
-        return {
-            ...createWebActionContext({
-                ...options,
-                setVariable: (key, value) => {
-                    variables[key] = value;
-                    // On variable change, patch only affected elements (keyed diff)
-                    diffAllElements();
-                },
-                abortSignal: abortController.signal,
-            }),
-            variables,
-            botId: options.botId,
-            inflightRequests,
-        };
+        })
+        : () => { };
+    // ─── Action Context ─────────────────────────────────────────────
+    function buildActionContext() {
+        return {
+            ...createWebActionContext({
+                ...options,
+                setVariable: (key, value) => {
+                    variables[key] = value;
+                    // On variable change, patch only affected elements (keyed diff)
+                    diffAllElements();
+                },
+                abortSignal: abortController.signal,
+            }),
+            variables,
+            botId: options.botId,
+            inflightRequests,
+        };
+    }
+    let actionContext = buildActionContext();
+    // ─── Rendering Helpers ──────────────────────────────────────────
+    /** Event name map: schema events → DOM events */
+    const eventMap = {
+        onClick: 'click',
+        onChange: 'change',
+        onInput: 'input',
+        onSubmit: 'submit',
+        onStepClick: 'step-click',
+        onPlay: 'play',
+        onPause: 'pause',
+        onEnded: 'ended',
+        onMaxReached: 'max-reached',
+    };
+    const valueControlTypes = new Set([
+        'ChoiceList',
+        'Counter',
+        'Input',
+        'Rate',
+        'Select',
+        'Switch',
+    ]);
+    function createBoundIndexes() {
+        return {
+            elements: new Map(),
+            props: new Map(),
+            hidden: new Set(),
+            sources: new Map(),
+        };
+    }
+    function addSourceOccurrence(indexes, node) {
+        const occurrences = indexes.sources.get(node.sourceId);
+        if (occurrences) {
+            occurrences.add(node.id);
+        }
+        else {
+            indexes.sources.set(node.sourceId, new Set([node.id]));
+        }
+    }
+    function boundExpressionContext(node) {
+        return isBoundRenderTreeNode(node)
+            ? createExpressionContext(node.scope)
+            : variables;
+    }
+    function resolveBoundValue(value, node, renderVariables) {
+        if (node.bindingDialect === 'a2ui') {
+            return resolveA2UIDeep(value, renderVariables, node.dataPath);
+        }
+        if (typeof value === 'string' && hasExpression(value)) {
+            return resolveExpression(value, boundExpressionContext(node));
+        }
+        return value;
+    }
+    function resolveBoundNodeProps(node, renderVariables) {
+        const resolved = (node.bindingDialect === 'a2ui'
+            ? resolveA2UIDeep(node.props, renderVariables, node.dataPath)
+            : resolveDeep(node.props, boundExpressionContext(node)));
+        if (resolved.content
+            && typeof resolved.content === 'object'
+            && 'type' in resolved.content) {
+            resolved.content = resolveExpressionValue(resolved.content, boundExpressionContext(node));
+        }
+        return resolved;
+    }
+    function computeBoundVisible(node, renderVariables) {
+        const visible = node.directives?.visible;
+        if (!visible)
+            return true;
+        const resolved = resolveBoundValue(visible, node, renderVariables);
+        return !(resolved === false
+            || resolved === 'false'
+            || resolved === ''
+            || resolved === 0);
+    }
+    function computeBoundDisabled(node, renderVariables) {
+        const disabled = node.directives?.disabled;
+        if (!disabled)
+            return false;
+        const resolved = resolveBoundValue(disabled, node, renderVariables);
+        return resolved === true || resolved === 'true' || resolved === 1;
+    }
+    function boundNodeFingerprint(node, renderVariables, resolvedProps = resolveBoundNodeProps(node, renderVariables)) {
+        return fingerprint(resolvedProps, {
+            visible: computeBoundVisible(node, renderVariables),
+            disabled: computeBoundDisabled(node, renderVariables),
+        });
+    }
+    function writeLiveBoundVariable(key, value) {
+        Object.defineProperty(variables, String(key), {
+            value,
+            enumerable: true,
+            configurable: true,
+            writable: true,
+        });
+        const schema = currentSurfaceId
+            ? engine.getSchema(currentSurfaceId)
+            : currentSchema;
+        if (schema) {
+            Object.defineProperty(schema.variables, String(key), {
+                value: cloneJsonData(value),
+                enumerable: true,
+                configurable: true,
+                writable: true,
+            });
+        }
+        boundRevision += 1;
+    }
+    function renderBoundNode(node, schema, renderVariables, indexes, lifecycleCollector) {
+        addSourceOccurrence(indexes, node);
+        if (!computeBoundVisible(node, renderVariables)) {
+            const placeholder = document.createElement('div');
+            placeholder.style.display = 'none';
+            placeholder.setAttribute('data-card-id', node.id);
+            indexes.elements.set(node.id, placeholder);
+            indexes.hidden.add(node.id);
+            return placeholder;
+        }
+        const resolvedProps = resolveBoundNodeProps(node, renderVariables);
+        indexes.hidden.delete(node.id);
+        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);
+        if (isDisabled) {
+            element.setAttribute('data-disabled', 'true');
+            element.style.background = '#F5F5F5';
+            element.style.color = '#C0C0C0';
+            element.style.setProperty('--card-disabled-color', '#C0C0C0');
+            element.style.pointerEvents = 'none';
+        }
+        const variableKey = resolvedProps.variableKey;
+        if (variableKey) {
+            element.addEventListener('input', ((event) => {
+                if (event.target !== element || !currentMaterialized)
+                    return;
+                const value = event.detail?.value
+                    ?? event.target?.value;
+                if (value !== undefined)
+                    writeLiveBoundVariable(variableKey, value);
+            }));
+        }
+        if (node.events && !isDisabled) {
+            for (const [eventName, eventValue] of Object.entries(node.events)) {
+                if (!eventValue || !resolveActionRef(eventValue, schema.actions ?? {})) {
+                    continue;
+                }
+                const domEvent = eventMap[eventName] ?? eventName;
+                element.addEventListener(domEvent, ((event) => {
+                    const ownsValueEvent = ((domEvent === 'input' || domEvent === 'change')
+                        && valueControlTypes.has(node.type));
+                    if (ownsValueEvent && event.target !== element)
+                        return;
+                    const detail = (event instanceof CustomEvent && event.detail != null)
+                        ? event.detail
+                        : undefined;
+                    enqueueBoundEvent(node.id, eventName, detail);
+                }));
+            }
+        }
+        if (node.lifecycle) {
+            lifecycleCollector.set(node.id, node);
+        }
+        indexes.elements.set(node.id, element);
+        const renderChild = (child) => renderBoundNode(child, schema, renderVariables, indexes, lifecycleCollector);
+        const childrenMap = {};
+        for (const child of node.children)
+            childrenMap[child.id] = child;
+        const layoutApplied = renderSlotLayout(element, node.children, resolvedProps, child => renderChild(child), childrenMap, actionContext);
+        if (!layoutApplied) {
+            for (const child of node.children) {
+                element.appendChild(renderChild(child));
+            }
+        }
+        return element;
     }
-    let actionContext = buildActionContext();
-    // ─── Rendering Helpers ──────────────────────────────────────────
-    /** Event name map: schema events → DOM events */
-    const eventMap = {
-        onClick: 'click',
-        onChange: 'change',
-        onInput: 'input',
-        onSubmit: 'submit',
-        onStepClick: 'step-click',
-    };
     /**
      * Render a single node and register it in elementMap.
      */
@@ -6271,6 +8698,540 @@ function renderStreamingCard(container, options = {}) {
             }
         }
     }
+    function captureBoundScrollPositions(root) {
+        const positions = new Map();
+        root.querySelectorAll('[data-scroll-id]').forEach((element) => {
+            const id = element.getAttribute('data-scroll-id');
+            if (id && element.scrollLeft > 0) {
+                positions.set(id, element.scrollLeft);
+            }
+        });
+        return positions;
+    }
+    function restoreBoundScrollPositions(root, positions) {
+        if (positions.size === 0)
+            return;
+        root.querySelectorAll('[data-scroll-id]').forEach((element) => {
+            const id = element.getAttribute('data-scroll-id');
+            const saved = id ? positions.get(id) : undefined;
+            if (saved == null)
+                return;
+            const scroller = element;
+            scroller.dataset.restoreScrollLeft = String(saved);
+            const previousSnap = scroller.style.scrollSnapType;
+            scroller.style.scrollSnapType = 'none';
+            scroller.scrollLeft = saved;
+            requestAnimationFrame(() => {
+                if (scroller.isConnected) {
+                    scroller.style.scrollSnapType = previousSnap;
+                }
+            });
+        });
+    }
+    function captureBoundMediaStates(root) {
+        const states = new Map();
+        root.querySelectorAll('ai-card-audio, ai-card-video')
+            .forEach((element) => {
+            const id = element.getAttribute('data-card-id');
+            const media = element.shadowRoot?.querySelector('audio, video');
+            const snapshot = snapshotMedia(media);
+            if (id && snapshot)
+                states.set(id, snapshot);
+        });
+        return states;
+    }
+    function restoreBoundMediaStates(root, states) {
+        if (states.size === 0)
+            return;
+        root.querySelectorAll('ai-card-audio, ai-card-video')
+            .forEach((element) => {
+            const id = element.getAttribute('data-card-id');
+            const snapshot = id ? states.get(id) : undefined;
+            if (!snapshot)
+                return;
+            const media = element.shadowRoot?.querySelector('audio, video');
+            restoreMedia(media, snapshot);
+        });
+    }
+    class IncompleteBoundSchemaError extends Error {
+        constructor() {
+            super(...arguments);
+            this.code = 'INCOMPLETE_BOUND_SCHEMA';
+        }
+    }
+    class InvalidBoundSchemaError extends Error {
+        constructor() {
+            super(...arguments);
+            this.code = 'INVALID_BOUND_SCHEMA';
+        }
+    }
+    class BoundPatchPreconditionError extends Error {
+        constructor() {
+            super(...arguments);
+            this.code = 'BOUND_PATCH_PRECONDITION';
+        }
+    }
+    function indexBoundNodes(root) {
+        const nodes = new Map();
+        const visit = (node) => {
+            nodes.set(node.id, node);
+            node.children.forEach(visit);
+        };
+        visit(root);
+        return nodes;
+    }
+    function collectBoundNodeIds(root, output = new Set()) {
+        output.add(root.id);
+        for (const child of root.children)
+            collectBoundNodeIds(child, output);
+        return output;
+    }
+    function assertCompleteBoundDefinitions(schema, materialized) {
+        for (const owner of materialized.repeatOwners.values()) {
+            if (!schema.elements[owner.templateId]) {
+                throw new IncompleteBoundSchemaError(`[renderStreamingCard] Missing repeat template "${owner.templateId}"`);
+            }
+        }
+    }
+    function materializeStreamingCard(schema, renderVariables) {
+        try {
+            const materialized = materializeCard(schema, renderVariables);
+            assertCompleteBoundDefinitions(schema, materialized);
+            const validationErrors = validateSchema(schema);
+            if (validationErrors.length > 0) {
+                throw new InvalidBoundSchemaError(`[renderStreamingCard] Invalid bound schema:\n${validationErrors.join('\n')}`);
+            }
+            return materialized;
+        }
+        catch (error) {
+            if (error instanceof Error
+                && /Missing element for id/.test(error.message)) {
+                throw new IncompleteBoundSchemaError(error.message);
+            }
+            throw error;
+        }
+    }
+    function selectLifecycleNodes(materialized, ids) {
+        const indexed = indexBoundNodes(materialized.root);
+        const selected = new Map();
+        for (const id of ids) {
+            const node = indexed.get(id);
+            if (node)
+                selected.set(id, node);
+        }
+        return selected;
+    }
+    async function runBoundLifecycleStepsAtomically(node, steps) {
+        if (!steps?.length)
+            return;
+        const baseRevision = boundRevision;
+        const before = cloneJsonData(variables);
+        const draft = cloneJsonData(variables);
+        await runBoundSteps(steps, node, createBoundActionContext(node, draft));
+        if (topLevelChangedPaths(before, draft).length === 0)
+            return;
+        try {
+            commitBoundDraftTransaction(before, draft, baseRevision);
+        }
+        catch (error) {
+            if (error
+                && typeof error === 'object'
+                && error.code
+                    === 'BOUND_TRANSACTION_CONFLICT') {
+                return;
+            }
+            throw error;
+        }
+    }
+    function boundLifecycleFingerprint(node) {
+        try {
+            return JSON.stringify({
+                sourceId: node.sourceId,
+                lifecycle: node.lifecycle ?? null,
+                dataPath: node.dataPath ?? null,
+                bindingDialect: node.bindingDialect ?? null,
+            });
+        }
+        catch {
+            return `${node.id}:${node.sourceId}`;
+        }
+    }
+    function sameBoundLifecycle(left, right) {
+        return !!left
+            && !!right
+            && boundLifecycleFingerprint(left) === boundLifecycleFingerprint(right);
+    }
+    function enqueueBoundOperation(operation, failureLabel) {
+        boundActionQueue = boundActionQueue
+            .then(operation)
+            .catch((error) => {
+            if (error
+                && typeof error === 'object'
+                && error.code
+                    === 'BOUND_TRANSACTION_CONFLICT') {
+                return;
+            }
+            console.error(failureLabel, error);
+        });
+    }
+    async function destroyMountedBoundLifecycle(id, fallbackNode) {
+        const mountedNode = mountedBoundLifecycles.get(id);
+        if (!mountedNode)
+            return;
+        mountedBoundLifecycles.delete(id);
+        const node = mountedNode ?? fallbackNode;
+        await runBoundLifecycleStepsAtomically(node, node.lifecycle?.onDestroy);
+    }
+    async function mountDesiredBoundLifecycle(id, node, epoch, generation) {
+        const desired = activeBoundLifecycles.get(id);
+        if (disposed
+            || epoch !== boundLifecycleEpoch
+            || boundLifecycleGenerations.get(id) !== generation
+            || !sameBoundLifecycle(desired, node)) {
+            return;
+        }
+        await runBoundLifecycleStepsAtomically(node, node.lifecycle?.onMount);
+        const stillDesired = activeBoundLifecycles.get(id);
+        if (disposed
+            || epoch !== boundLifecycleEpoch
+            || boundLifecycleGenerations.get(id) !== generation
+            || !sameBoundLifecycle(stillDesired, node)) {
+            await runBoundLifecycleStepsAtomically(node, node.lifecycle?.onDestroy);
+            return;
+        }
+        mountedBoundLifecycles.set(id, node);
+    }
+    function reconcileBoundLifecycles(next, forceReplaceIds = new Set()) {
+        const previous = new Map(activeBoundLifecycles);
+        const replacedIds = new Set(forceReplaceIds);
+        for (const [id, nextNode] of next) {
+            const previousNode = previous.get(id);
+            if (previousNode
+                && !sameBoundLifecycle(previousNode, nextNode)) {
+                replacedIds.add(id);
+            }
+        }
+        const removed = [...previous.entries()]
+            .filter(([id]) => !next.has(id) || replacedIds.has(id));
+        const added = [...next.entries()]
+            .filter(([id]) => !previous.has(id) || replacedIds.has(id));
+        const touchedGenerations = new Map();
+        for (const id of new Set([
+            ...removed.map(([id]) => id),
+            ...added.map(([id]) => id),
+        ])) {
+            const generation = (boundLifecycleGenerations.get(id) ?? 0) + 1;
+            boundLifecycleGenerations.set(id, generation);
+            touchedGenerations.set(id, generation);
+        }
+        activeBoundLifecycles.clear();
+        for (const [id, node] of next)
+            activeBoundLifecycles.set(id, node);
+        const epoch = boundLifecycleEpoch;
+        enqueueBoundOperation(async () => {
+            for (const [id, node] of removed) {
+                await destroyMountedBoundLifecycle(id, node);
+            }
+            for (const [id, node] of added) {
+                const generation = touchedGenerations.get(id);
+                if (generation != null) {
+                    await mountDesiredBoundLifecycle(id, node, epoch, generation);
+                }
+            }
+            for (const [id] of removed) {
+                const generation = touchedGenerations.get(id);
+                if (generation != null
+                    && boundLifecycleGenerations.get(id) === generation
+                    && !activeBoundLifecycles.has(id)
+                    && !mountedBoundLifecycles.has(id)) {
+                    boundLifecycleGenerations.delete(id);
+                }
+            }
+        }, '[renderStreamingCard] Bound lifecycle action failed');
+    }
+    function teardownBoundLifecycles() {
+        if (activeBoundLifecycles.size === 0
+            && mountedBoundLifecycles.size === 0) {
+            boundLifecycleEpoch += 1;
+            return;
+        }
+        const nodes = new Map(activeBoundLifecycles);
+        const invalidatedGenerations = new Map();
+        for (const id of new Set([
+            ...activeBoundLifecycles.keys(),
+            ...mountedBoundLifecycles.keys(),
+        ])) {
+            const generation = (boundLifecycleGenerations.get(id) ?? 0) + 1;
+            boundLifecycleGenerations.set(id, generation);
+            invalidatedGenerations.set(id, generation);
+        }
+        activeBoundLifecycles.clear();
+        boundLifecycleEpoch += 1;
+        enqueueBoundOperation(async () => {
+            const ids = new Set([
+                ...nodes.keys(),
+                ...mountedBoundLifecycles.keys(),
+            ]);
+            for (const id of ids) {
+                await destroyMountedBoundLifecycle(id, nodes.get(id));
+                if (boundLifecycleGenerations.get(id)
+                    === invalidatedGenerations.get(id)
+                    && !activeBoundLifecycles.has(id)
+                    && !mountedBoundLifecycles.has(id)) {
+                    boundLifecycleGenerations.delete(id);
+                }
+            }
+        }, '[renderStreamingCard] Bound lifecycle dispose failed');
+    }
+    function replaceProductionIndexes(indexes) {
+        elementMap.clear();
+        propsCache.clear();
+        hiddenSet.clear();
+        sourceOccurrences.clear();
+        for (const [id, element] of indexes.elements) {
+            elementMap.set(id, element);
+        }
+        for (const [id, value] of indexes.props)
+            propsCache.set(id, value);
+        for (const id of indexes.hidden)
+            hiddenSet.add(id);
+        for (const [sourceId, ids] of indexes.sources) {
+            sourceOccurrences.set(sourceId, new Set(ids));
+        }
+    }
+    function mergeProductionIndexes(indexes) {
+        for (const [id, element] of indexes.elements) {
+            elementMap.set(id, element);
+        }
+        for (const [id, value] of indexes.props)
+            propsCache.set(id, value);
+        for (const id of indexes.hidden)
+            hiddenSet.add(id);
+        for (const [sourceId, ids] of indexes.sources) {
+            const occurrences = sourceOccurrences.get(sourceId)
+                ?? new Set();
+            for (const id of ids)
+                occurrences.add(id);
+            sourceOccurrences.set(sourceId, occurrences);
+        }
+    }
+    function unindexBoundSubtree(node) {
+        const visit = (current) => {
+            elementMap.delete(current.id);
+            propsCache.delete(current.id);
+            hiddenSet.delete(current.id);
+            const occurrences = sourceOccurrences.get(current.sourceId);
+            occurrences?.delete(current.id);
+            if (occurrences?.size === 0) {
+                sourceOccurrences.delete(current.sourceId);
+            }
+            current.children.forEach(visit);
+        };
+        visit(node);
+    }
+    function prepareBoundFull(schema, draft) {
+        const materialized = materializeStreamingCard(schema, draft);
+        const indexes = createBoundIndexes();
+        const lifecycles = new Map();
+        const dom = renderBoundNode(materialized.root, schema, draft, indexes, lifecycles);
+        return {
+            materialized,
+            dom,
+            indexes,
+            lifecycleIds: new Set(lifecycles.keys()),
+        };
+    }
+    function assertBoundRevision(baseRevision) {
+        if (boundRevision !== baseRevision) {
+            const error = new Error('[renderStreamingCard] BOUND_TRANSACTION_CONFLICT');
+            error.code = 'BOUND_TRANSACTION_CONFLICT';
+            throw error;
+        }
+    }
+    function commitBoundFull(prepared, schema, draft, baseRevision, commitAuthoritativeVariables) {
+        assertBoundRevision(baseRevision);
+        commitAuthoritativeVariables?.();
+        replaceRootContents(variables, draft);
+        const stableMaterialized = materializeStreamingCard(schema, variables);
+        const scrollPositions = captureBoundScrollPositions(container);
+        const mediaStates = captureBoundMediaStates(container);
+        disposeChartsIn(container);
+        container.replaceChildren(prepared.dom);
+        replaceProductionIndexes(prepared.indexes);
+        currentSchema = schema;
+        currentMaterialized = stableMaterialized;
+        boundRevision += 1;
+        actionContext = buildActionContext();
+        const nextLifecycles = selectLifecycleNodes(stableMaterialized, prepared.lifecycleIds);
+        reconcileBoundLifecycles(nextLifecycles, new Set([
+            ...activeBoundLifecycles.keys(),
+            ...nextLifecycles.keys(),
+        ]));
+        restoreBoundScrollPositions(container, scrollPositions);
+        restoreBoundMediaStates(container, mediaStates);
+    }
+    function ownerKeysWithoutNestedDuplicates(materialized, owners) {
+        const selected = new Set(owners.map(owner => owner.key));
+        return owners.filter((owner) => {
+            let parentKey = owner.parentKey;
+            while (parentKey) {
+                if (selected.has(parentKey))
+                    return false;
+                parentKey = materialized.repeatOwners.get(parentKey)?.parentKey;
+            }
+            return true;
+        });
+    }
+    function prepareBoundIncremental(schema, draft, requestedOwners, changedSourceIds = new Set()) {
+        if (!currentMaterialized) {
+            throw new BoundPatchPreconditionError('[renderStreamingCard] Bound metadata is unavailable');
+        }
+        const materialized = materializeStreamingCard(schema, draft);
+        const oldNodes = indexBoundNodes(currentMaterialized.root);
+        const nextNodes = indexBoundNodes(materialized.root);
+        const owners = ownerKeysWithoutNestedDuplicates(currentMaterialized, requestedOwners);
+        const ownerPatches = [];
+        const coveredIds = new Set();
+        const lifecycleIds = new Set(activeBoundLifecycles.keys());
+        const replacedLifecycleIds = new Set();
+        for (const owner of owners) {
+            const oldNode = oldNodes.get(owner.runtimeOwnerId);
+            const nextNode = nextNodes.get(owner.runtimeOwnerId);
+            const oldElement = elementMap.get(owner.runtimeOwnerId);
+            if (!oldNode
+                || !nextNode
+                || !oldElement
+                || !oldElement.isConnected
+                || !oldElement.parentNode) {
+                throw new BoundPatchPreconditionError(`[renderStreamingCard] Missing repeat owner "${owner.runtimeOwnerId}"`);
+            }
+            const indexes = createBoundIndexes();
+            const lifecycles = new Map();
+            const nextElement = renderBoundNode(nextNode, schema, draft, indexes, lifecycles);
+            const oldIds = collectBoundNodeIds(oldNode);
+            const nextIds = collectBoundNodeIds(nextNode);
+            for (const id of oldIds) {
+                lifecycleIds.delete(id);
+                if (activeBoundLifecycles.has(id)) {
+                    replacedLifecycleIds.add(id);
+                }
+            }
+            for (const id of lifecycles.keys()) {
+                lifecycleIds.add(id);
+                replacedLifecycleIds.add(id);
+            }
+            for (const id of nextIds)
+                coveredIds.add(id);
+            ownerPatches.push({
+                oldNode,
+                oldElement,
+                nextNode,
+                nextElement,
+                indexes,
+                lifecycleIds: new Set(lifecycles.keys()),
+            });
+        }
+        const staticPatches = [];
+        for (const nextNode of nextNodes.values()) {
+            if (nextNode.id !== nextNode.sourceId || coveredIds.has(nextNode.id)) {
+                continue;
+            }
+            const oldNode = oldNodes.get(nextNode.id);
+            const oldElement = elementMap.get(nextNode.id);
+            if (!oldNode || !oldElement || !oldElement.isConnected)
+                continue;
+            const nextVisible = computeBoundVisible(nextNode, draft);
+            const nextProps = nextVisible
+                ? resolveBoundNodeProps(nextNode, draft)
+                : undefined;
+            const nextFingerprint = nextVisible
+                ? boundNodeFingerprint(nextNode, draft, nextProps)
+                : undefined;
+            const wasHidden = hiddenSet.has(nextNode.id);
+            const definitionChanged = changedSourceIds.has(nextNode.sourceId);
+            if (!definitionChanged
+                && ((!nextVisible && wasHidden)
+                    || (nextVisible && !wasHidden
+                        && propsCache.get(nextNode.id) === nextFingerprint))) {
+                continue;
+            }
+            const indexes = createBoundIndexes();
+            const lifecycles = new Map();
+            const nextElement = renderBoundNode(nextNode, schema, draft, indexes, lifecycles);
+            const oldIds = collectBoundNodeIds(oldNode);
+            const nextIds = collectBoundNodeIds(nextNode);
+            for (const id of oldIds) {
+                lifecycleIds.delete(id);
+                if (activeBoundLifecycles.has(id)) {
+                    replacedLifecycleIds.add(id);
+                }
+            }
+            for (const id of lifecycles.keys()) {
+                lifecycleIds.add(id);
+                replacedLifecycleIds.add(id);
+            }
+            for (const id of nextIds)
+                coveredIds.add(id);
+            staticPatches.push({
+                oldNode,
+                oldElement,
+                nextNode,
+                nextElement,
+                indexes,
+                lifecycleIds: new Set(lifecycles.keys()),
+            });
+        }
+        return {
+            materialized,
+            owners: ownerPatches,
+            statics: staticPatches,
+            lifecycleIds,
+            replacedLifecycleIds,
+        };
+    }
+    function commitBoundIncremental(prepared, schema, draft, baseRevision, commitAuthoritativeVariables) {
+        assertBoundRevision(baseRevision);
+        commitAuthoritativeVariables?.();
+        replaceRootContents(variables, draft);
+        const stableMaterialized = materializeStreamingCard(schema, variables);
+        const scrollPositions = captureBoundScrollPositions(container);
+        const mediaStates = captureBoundMediaStates(container);
+        for (const patch of prepared.owners) {
+            disposeChartsIn(patch.oldElement);
+            unindexBoundSubtree(patch.oldNode);
+        }
+        for (const patch of prepared.statics) {
+            disposeChartsIn(patch.oldElement);
+            unindexBoundSubtree(patch.oldNode);
+        }
+        for (const patch of prepared.owners) {
+            patch.oldElement.replaceWith(patch.nextElement);
+            mergeProductionIndexes(patch.indexes);
+        }
+        for (const patch of prepared.statics) {
+            patch.oldElement.replaceWith(patch.nextElement);
+            mergeProductionIndexes(patch.indexes);
+        }
+        currentSchema = schema;
+        currentMaterialized = stableMaterialized;
+        boundRevision += 1;
+        actionContext = buildActionContext();
+        reconcileBoundLifecycles(selectLifecycleNodes(stableMaterialized, prepared.lifecycleIds), prepared.replacedLifecycleIds);
+        restoreBoundScrollPositions(container, scrollPositions);
+        restoreBoundMediaStates(container, mediaStates);
+    }
+    function prepareAndCommitBoundUpdate(schema, draft, owners, baseRevision, commitAuthoritativeVariables, changedSourceIds = new Set()) {
+        try {
+            const prepared = prepareBoundIncremental(schema, draft, owners, changedSourceIds);
+            commitBoundIncremental(prepared, schema, draft, baseRevision, commitAuthoritativeVariables);
+        }
+        catch (error) {
+            if (!(error instanceof BoundPatchPreconditionError))
+                throw error;
+            const full = prepareBoundFull(schema, draft);
+            commitBoundFull(full, schema, draft, baseRevision, commitAuthoritativeVariables);
+        }
+    }
     // ─── Action Steps (A2UI `action` support) ───────────────────────
     /**
      * Run an action-step chain. Steps of type `action` are emitted through
@@ -6305,6 +9266,174 @@ function renderStreamingCard(container, options = {}) {
             }
         }
     }
+    function writeDraftVariable(draft, key, value) {
+        Object.defineProperty(draft, String(key), {
+            value,
+            enumerable: true,
+            configurable: true,
+            writable: true,
+        });
+    }
+    function createBoundActionContext(node, draft) {
+        const write = (key, value) => {
+            writeDraftVariable(draft, key, value);
+        };
+        return {
+            ...createWebActionContext({
+                ...options,
+                setVariable: write,
+                abortSignal: abortController.signal,
+            }),
+            variables: draft,
+            expressionContext: createExpressionContext(node.scope),
+            parameterResolver: node.bindingDialect === 'a2ui'
+                ? createA2UIParameterResolver(draft, node.dataPath)
+                : undefined,
+            variableWriter: (key, value) => write(key, value),
+            botId: options.botId,
+            inflightRequests,
+        };
+    }
+    function resolveActionParams(params, context) {
+        if (context.parameterResolver) {
+            return context.parameterResolver(params);
+        }
+        const resolutionContext = (context.expressionContext ?? context.variables);
+        return resolutionContext
+            ? resolveDeep(params, resolutionContext)
+            : params;
+    }
+    async function runBoundSteps(steps, sourceNode, context) {
+        for (const step of steps) {
+            if (step.type !== 'action') {
+                await runActionStep(step, context);
+                continue;
+            }
+            const params = resolveActionParams(step.params ?? {}, context);
+            const payload = {
+                name: typeof params.name === 'string' ? params.name : 'action',
+                surfaceId: currentSurfaceId,
+                sourceComponentId: sourceNode.sourceId,
+                timestamp: new Date().toISOString(),
+                context: (params.context && typeof params.context === 'object')
+                    ? params.context
+                    : {},
+            };
+            try {
+                options.onAction?.(payload);
+                if (step.onSuccess) {
+                    await runBoundSteps(step.onSuccess, sourceNode, context);
+                }
+            }
+            catch (error) {
+                if (step.onFail) {
+                    await runBoundSteps(step.onFail, sourceNode, context);
+                }
+                else {
+                    throw error;
+                }
+            }
+        }
+    }
+    function topLevelChangedPaths(before, after) {
+        const keys = new Set([
+            ...Object.keys(before),
+            ...Object.keys(after),
+        ]);
+        const paths = [];
+        for (const key of keys) {
+            let equal = false;
+            try {
+                equal = JSON.stringify(before[key]) === JSON.stringify(after[key]);
+            }
+            catch {
+                equal = false;
+            }
+            if (!equal) {
+                paths.push(`/${key.replace(/~/g, '~0').replace(/\//g, '~1')}`);
+            }
+        }
+        return paths;
+    }
+    function affectedOwnersForPaths(materialized, paths) {
+        const owners = new Map();
+        for (const path of paths) {
+            for (const owner of findAffectedRepeatOwners(materialized, path)) {
+                owners.set(owner.key, owner);
+            }
+        }
+        return ownerKeysWithoutNestedDuplicates(materialized, [...owners.values()]);
+    }
+    function commitBoundDraftTransaction(before, draft, baseRevision) {
+        assertBoundRevision(baseRevision);
+        if (disposed
+            || !currentMaterialized
+            || !currentSchema
+            || !currentSurfaceId) {
+            const error = new Error('[renderStreamingCard] BOUND_TRANSACTION_CONFLICT');
+            error.code = 'BOUND_TRANSACTION_CONFLICT';
+            throw error;
+        }
+        const changedPaths = topLevelChangedPaths(before, draft);
+        if (changedPaths.length === 0)
+            return;
+        const owners = currentMaterialized.unresolvedRepeatOwners.size > 0
+            ? []
+            : affectedOwnersForPaths(currentMaterialized, changedPaths);
+        const schema = currentSchema;
+        const surfaceId = currentSurfaceId;
+        const commitAuthoritative = () => {
+            const authoritative = engine.getSchema(surfaceId);
+            if (!authoritative || authoritative !== schema) {
+                const error = new Error('[renderStreamingCard] BOUND_TRANSACTION_CONFLICT');
+                error.code = 'BOUND_TRANSACTION_CONFLICT';
+                throw error;
+            }
+            replaceRootContents(authoritative.variables, draft);
+        };
+        if (currentMaterialized.unresolvedRepeatOwners.size > 0) {
+            const full = prepareBoundFull(schema, draft);
+            commitBoundFull(full, schema, draft, baseRevision, commitAuthoritative);
+            return;
+        }
+        prepareAndCommitBoundUpdate(schema, draft, owners, baseRevision, commitAuthoritative);
+    }
+    async function runBoundEvent(runtimeId, eventName, eventDetail) {
+        if (!currentMaterialized || !currentSchema || !currentSurfaceId)
+            return;
+        const baseRevision = boundRevision;
+        const before = cloneJsonData(variables);
+        const draft = cloneJsonData(variables);
+        if (eventDetail !== undefined) {
+            writeDraftVariable(draft, '_event', cloneJsonData(eventDetail));
+        }
+        const fresh = materializeStreamingCard(currentSchema, draft);
+        const sourceNode = indexBoundNodes(fresh.root).get(runtimeId);
+        if (!sourceNode) {
+            throw new Error(`[renderStreamingCard] Bound runtime node "${runtimeId}" no longer exists`);
+        }
+        const eventValue = sourceNode.events?.[eventName];
+        const steps = eventValue
+            ? resolveActionRef(eventValue, currentSchema.actions ?? {})
+            : undefined;
+        if (!steps)
+            return;
+        await runBoundSteps(steps, sourceNode, createBoundActionContext(sourceNode, draft));
+        commitBoundDraftTransaction(before, draft, baseRevision);
+    }
+    function enqueueBoundEvent(runtimeId, eventName, eventDetail) {
+        boundActionQueue = boundActionQueue
+            .then(() => runBoundEvent(runtimeId, eventName, eventDetail))
+            .catch((error) => {
+            if (error
+                && typeof error === 'object'
+                && error.code
+                    === 'BOUND_TRANSACTION_CONFLICT') {
+                return;
+            }
+            console.error('[renderStreamingCard] Bound action failed', error);
+        });
+    }
     // ─── Partial-Schema Progressive Rendering ───────────────────────
     /** Lock the instance to one feeding style; mixing the two corrupts state. */
     function lockMode(mode) {
@@ -6327,6 +9456,8 @@ function renderStreamingCard(container, options = {}) {
             if (slot.groups)
                 for (const g of slot.groups)
                     out.push(...g);
+            if (slot.repeat?.template)
+                out.push(slot.repeat.template);
             const overlays = slot.config?.overlays;
             if (Array.isArray(overlays)) {
                 for (const o of overlays)
@@ -6372,6 +9503,9 @@ function renderStreamingCard(container, options = {}) {
             return root;
         const prunedSlots = {};
         for (const [k, slot] of Object.entries(slots)) {
+            if (slot.repeat?.template && !mountable.has(slot.repeat.template)) {
+                continue;
+            }
             const s = { ...slot };
             if (s.children)
                 s.children = s.children.filter((id) => mountable.has(id));
@@ -6395,7 +9529,16 @@ function renderStreamingCard(container, options = {}) {
         if (!root)
             return; // root 未到齐 —— 首块出现前的占位由宿主负责
         if (!partialSurfaceCreated) {
-            engine.apply({ type: 'createSurface', surfaceId: PARTIAL_SURFACE_ID });
+            engine.apply({
+                type: 'createSurface',
+                surfaceId: PARTIAL_SURFACE_ID,
+                schema: {
+                    version: result.version ?? '1.0',
+                    rootID,
+                    variables: {},
+                    elements: {},
+                },
+            });
             partialSurfaceCreated = true;
         }
         if (!partialVariablesSent && result.variables && Object.keys(result.variables).length > 0) {
@@ -6461,6 +9604,16 @@ function renderStreamingCard(container, options = {}) {
         if (!schema)
             return;
         currentSchema = schema; // keep local ref pointing at the live engine schema
+        if (requiresBindingMaterialization(schema)) {
+            const baseRevision = boundRevision;
+            const draft = cloneJsonData(variables);
+            const prepared = prepareBoundFull(schema, draft);
+            commitBoundFull(prepared, schema, draft, baseRevision, () => replaceRootContents(schema.variables, draft));
+            return;
+        }
+        currentMaterialized = null;
+        sourceOccurrences.clear();
+        teardownBoundLifecycles();
         disposeChartsIn(container); // release old ECharts instances before clearing
         container.innerHTML = '';
         elementMap.clear();
@@ -6482,6 +9635,8 @@ function renderStreamingCard(container, options = {}) {
             renderFull();
         }
         catch (error) {
+            if (error instanceof InvalidBoundSchemaError)
+                throw error;
             console.warn('[renderStreamingCard] Deferred render (incomplete schema):', error);
         }
     }
@@ -6496,6 +9651,8 @@ function renderStreamingCard(container, options = {}) {
     // ─── Engine Event Handlers ──────────────────────────────────────
     const engine = new StreamingEngine({
         onSurfaceCreated(surfaceId, schemaInput) {
+            teardownBoundLifecycles();
+            boundRevision += 1;
             currentSurfaceId = surfaceId;
             if (schemaInput) {
                 currentSchema = normalizeSchema(schemaInput);
@@ -6505,6 +9662,8 @@ function renderStreamingCard(container, options = {}) {
             else {
                 // Empty surface (A2UI-style): structure arrives via updateComponents
                 currentSchema = null;
+                currentMaterialized = null;
+                sourceOccurrences.clear();
                 variables = { ...options.variables };
                 disposeChartsIn(container); // release old ECharts instances before clearing
                 container.innerHTML = '';
@@ -6517,6 +9676,71 @@ function renderStreamingCard(container, options = {}) {
             const schema = engine.getSchema(surfaceId);
             if (!schema)
                 return;
+            const previousSchema = currentSchema;
+            const previousBound = currentMaterialized !== null
+                || (previousSchema !== null
+                    && requiresBindingMaterialization(previousSchema));
+            const nextBound = requiresBindingMaterialization(schema);
+            if (previousBound || nextBound) {
+                const baseRevision = boundRevision;
+                if (!nextBound) {
+                    teardownBoundLifecycles();
+                    variables = {
+                        ...schema.variables,
+                        ...variables,
+                    };
+                    currentSchema = schema;
+                    currentMaterialized = null;
+                    boundRevision += 1;
+                    renderFull();
+                    return;
+                }
+                const draft = cloneJsonData(currentMaterialized
+                    ? schema.variables
+                    : {
+                        ...schema.variables,
+                        ...variables,
+                    });
+                const previousFingerprint = previousSchema
+                    ? bindingTopologyFingerprint(previousSchema)
+                    : '';
+                const nextFingerprint = bindingTopologyFingerprint(schema);
+                const topologyChanged = (!previousBound
+                    || previousFingerprint !== nextFingerprint);
+                const rootMissing = (!elementMap.get(schema.rootID)?.isConnected);
+                const commitAuthoritative = () => {
+                    replaceRootContents(schema.variables, draft);
+                };
+                try {
+                    if (!currentMaterialized
+                        || topologyChanged
+                        || rootMissing) {
+                        const full = prepareBoundFull(schema, draft);
+                        commitBoundFull(full, schema, draft, baseRevision, commitAuthoritative);
+                        return;
+                    }
+                    const changedSourceIds = changes.map(change => change.elementId);
+                    const hasTemplateDependency = changedSourceIds.some(sourceId => currentMaterialized.dependencies.has(`component:${sourceId}`));
+                    const owners = findTemplateRepeatOwners(currentMaterialized, changedSourceIds);
+                    if (hasTemplateDependency && owners.length === 0) {
+                        const full = prepareBoundFull(schema, draft);
+                        commitBoundFull(full, schema, draft, baseRevision, commitAuthoritative);
+                        return;
+                    }
+                    prepareAndCommitBoundUpdate(schema, draft, owners, baseRevision, commitAuthoritative, new Set(changedSourceIds));
+                }
+                catch (error) {
+                    if (error instanceof IncompleteBoundSchemaError) {
+                        // Progressive component streams keep their authoritative candidate
+                        // until the missing template/descendant arrives.
+                        currentSchema = schema;
+                        boundRevision += 1;
+                        return;
+                    }
+                    throw error;
+                }
+                return;
+            }
             currentSchema = schema;
             schema.actions ?? {};
             let needFull = false;
@@ -6631,9 +9855,64 @@ function renderStreamingCard(container, options = {}) {
             if (needFull)
                 safeRenderFull();
         },
-        onDataModelUpdated(surfaceId, path, value) {
+        onDataModelUpdated(surfaceId, path, value, pathDialect) {
             if (!currentSchema && !engine.getSchema(surfaceId))
                 return;
+            const candidateSchema = engine.getSchema(surfaceId);
+            if (candidateSchema
+                && (currentMaterialized !== null
+                    || requiresBindingMaterialization(candidateSchema))) {
+                const baseRevision = boundRevision;
+                const draft = cloneJsonData(currentMaterialized
+                    ? candidateSchema.variables
+                    : {
+                        ...candidateSchema.variables,
+                        ...variables,
+                    });
+                const commitAuthoritative = () => {
+                    replaceRootContents(candidateSchema.variables, draft);
+                };
+                try {
+                    if (!currentMaterialized) {
+                        const full = prepareBoundFull(candidateSchema, draft);
+                        commitBoundFull(full, candidateSchema, draft, baseRevision, commitAuthoritative);
+                        return;
+                    }
+                    if (currentMaterialized.unresolvedRepeatOwners.size > 0) {
+                        const full = prepareBoundFull(candidateSchema, draft);
+                        commitBoundFull(full, candidateSchema, draft, baseRevision, commitAuthoritative);
+                        return;
+                    }
+                    const normalizedPath = pathDialect === 'a2ui'
+                        ? path
+                        : path === '/' || path === ''
+                            ? ''
+                            : `/${path.replace(/^\//, '')
+                                .split('/')
+                                .filter(Boolean)
+                                .join('/')}`;
+                    const owners = findAffectedRepeatOwners(currentMaterialized, normalizedPath);
+                    prepareAndCommitBoundUpdate(candidateSchema, draft, owners, baseRevision, commitAuthoritative);
+                }
+                catch (error) {
+                    if (error instanceof IncompleteBoundSchemaError) {
+                        currentSchema = candidateSchema;
+                        boundRevision += 1;
+                        return;
+                    }
+                    throw error;
+                }
+                return;
+            }
+            if (pathDialect === 'a2ui') {
+                const authoritative = engine.getSchema(surfaceId);
+                if (authoritative) {
+                    variables = cloneJsonData(authoritative.variables);
+                    actionContext = buildActionContext();
+                }
+                diffAllElements();
+                return;
+            }
             // Update the local variables copy (JSON Pointer-style path).
             // Mirror the engine's setByPath prototype-pollution guard: reject any
             // __proto__ / constructor / prototype segment (stream is untrusted).
@@ -6666,6 +9945,18 @@ function renderStreamingCard(container, options = {}) {
         },
         onContentAppended(surfaceId, elementId, content) {
             const el = elementMap.get(elementId);
+            if (currentMaterialized && currentSchema && el) {
+                const nextMaterialized = materializeStreamingCard(currentSchema, variables);
+                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);
+                    propsCache.set(elementId, boundNodeFingerprint(node, variables, resolved));
+                    currentMaterialized = nextMaterialized;
+                    boundRevision += 1;
+                    return;
+                }
+            }
             if (el && 'updateProps' in el) {
                 // Append content to Text component via updateProps
                 const currentProps = el._props ?? {};
@@ -6694,6 +9985,10 @@ function renderStreamingCard(container, options = {}) {
             hiddenSet.clear();
             currentSchema = null;
             currentSurfaceId = null;
+            currentMaterialized = null;
+            sourceOccurrences.clear();
+            teardownBoundLifecycles();
+            boundRevision += 1;
             lifecycleManager.dispose(actionContext);
         },
     });
@@ -6735,18 +10030,55 @@ function renderStreamingCard(container, options = {}) {
             return surfaceId ? engine.getSchema(surfaceId) : currentSchema ?? undefined;
         },
         updateVariables(newVars) {
+            if (currentMaterialized && currentSchema && currentSurfaceId) {
+                const baseRevision = boundRevision;
+                const before = cloneJsonData(variables);
+                const draft = cloneJsonData(variables);
+                const patch = cloneJsonData(newVars);
+                for (const key of Object.keys(patch)) {
+                    writeDraftVariable(draft, key, patch[key]);
+                }
+                const changedPaths = topLevelChangedPaths(before, draft);
+                const owners = currentMaterialized.unresolvedRepeatOwners.size > 0
+                    ? []
+                    : affectedOwnersForPaths(currentMaterialized, changedPaths);
+                const schema = currentSchema;
+                const commitAuthoritative = () => {
+                    const authoritative = engine.getSchema(currentSurfaceId);
+                    if (!authoritative || authoritative !== schema) {
+                        const error = new Error('[renderStreamingCard] BOUND_TRANSACTION_CONFLICT');
+                        error.code = 'BOUND_TRANSACTION_CONFLICT';
+                        throw error;
+                    }
+                    replaceRootContents(authoritative.variables, draft);
+                };
+                if (currentMaterialized.unresolvedRepeatOwners.size > 0) {
+                    const full = prepareBoundFull(schema, draft);
+                    commitBoundFull(full, schema, draft, baseRevision, commitAuthoritative);
+                }
+                else {
+                    prepareAndCommitBoundUpdate(schema, draft, owners, baseRevision, commitAuthoritative);
+                }
+                return;
+            }
             variables = { ...variables, ...newVars };
             if (currentSchema || (currentSurfaceId && engine.getSchema(currentSurfaceId))) {
                 diffAllElements();
             }
         },
         dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            boundRevision += 1;
             abortController.abort();
             removeViewportListener();
+            teardownBoundLifecycles();
             lifecycleManager.dispose(actionContext);
             disposeChartsIn(container); // release ECharts instances before clearing
             container.innerHTML = '';
             elementMap.clear();
+            sourceOccurrences.clear();
             engine.dispose();
             parser.reset();
         },
@@ -7090,4 +10422,4 @@ class RemoteActionConfigProvider {
     }
 }
 
-export { BaseElement, BotSDK, CardButton, CardCollapse, CardDivider, CardForm, CardHtml, CardIcon, CardImage, CardInput, CardLoading, CardPasscodeInput, CardProgress, CardRate, CardSelect, CardSteps, 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, LocalActionConfigProvider, RemoteActionConfigProvider, buildStyleString, componentRenderers, connectSSE, connectStreaming, createWebActionContext, isMobileViewport, onViewportChange, pxToRem, pxToVw, registerComponent, renderCard, renderStreamingCard, resolveSize, sanitizeHtml, trimIncompleteTag };