@antglobal/copilot-cards-web 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getBuiltinIcon, cloneJsonData, createLifecycleManager, materializeCard, createA2UIParameterResolver, createExpressionContext, resolveActionRef, replaceRootContents, resolveA2UIDeep, hasExpression, resolveExpression, resolveDeep, resolveExpressionValue, isBoundRenderTreeNode, runActionSteps, normalizeSchema, validateSchema, requiresBindingMaterialization, parseSchema, StreamingParser, StreamingEngine, findAffectedRepeatOwners, bindingTopologyFingerprint, findTemplateRepeatOwners, extractPartialSchema, runActionStep, registry } from '@antglobal/copilot-cards-core';
+import { getBuiltinIcon, cloneJsonData, createLifecycleManager, materializeCard, findAffectedRepeatOwners, createA2UIParameterResolver, createExpressionContext, replaceRootContents, resolveA2UIDeep, resolveDeep, resolveExpressionValue, resolveActionRef, isBoundRenderTreeNode, hasExpression, resolveExpression, runActionSteps, normalizeSchema, validateSchema, requiresBindingMaterialization, parseSchema, StreamingParser, StreamingEngine, 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';
@@ -332,11 +332,21 @@ function disconnectChartResize(chartRoot) {
     const registration = chartResizeRegistrations.get(chartRoot);
     if (!registration)
         return;
-    registration.observer.disconnect();
+    chartResizeRegistrations.delete(chartRoot);
+    try {
+        registration.observer.disconnect();
+    }
+    catch (error) {
+        console.error('[renderCard] Chart observer cleanup failed', error);
+    }
     if (registration.frameID !== null) {
-        cancelAnimationFrame(registration.frameID);
+        try {
+            cancelAnimationFrame(registration.frameID);
+        }
+        catch (error) {
+            console.error('[renderCard] Chart frame cleanup failed', error);
+        }
     }
-    chartResizeRegistrations.delete(chartRoot);
 }
 function observeChartResize(chartRoot, chart) {
     disconnectChartResize(chartRoot);
@@ -376,12 +386,20 @@ function observeChartResize(chartRoot, chart) {
  * host node, so skipping this leaks one instance per chart per re-render.
  */
 function disposeChartsIn(container) {
-    const roots = container.querySelectorAll(`[${CHART_ROOT_ATTR}]`);
+    const roots = [];
+    if (container.hasAttribute?.(CHART_ROOT_ATTR))
+        roots.push(container);
+    roots.push(...container.querySelectorAll(`[${CHART_ROOT_ATTR}]`));
     roots.forEach((node) => {
         disconnectChartResize(node);
-        const inst = echarts.getInstanceByDom(node);
-        if (inst)
-            inst.dispose();
+        try {
+            const inst = echarts.getInstanceByDom(node);
+            if (inst)
+                inst.dispose();
+        }
+        catch (error) {
+            console.error('[renderCard] Chart instance cleanup failed', error);
+        }
     });
 }
 function renderChartSlot(container, slotContent, actionContext) {
@@ -706,6 +724,8 @@ function buildHeatmapOption(config) {
  */
 // ─── Slot Layout Constants ──────────────────────────────────────
 const SLOT_LAYOUT = {
+    DEFAULT: 'default',
+    FLEX: 'flex',
     COLUMNS: 'columns',
     GRID: 'grid',
     HORIZONTAL_SCROLL: 'horizontalScroll',
@@ -716,16 +736,411 @@ const SLOT_LAYOUT = {
     TABLE: 'table',
     CHART: 'chart',
 };
+const EMPTY_HOST_PRESENTATION_OWNERSHIP = {
+    attributes: [],
+    styleProperties: [],
+};
+const CAROUSEL_SCROLL_ID_ATTRIBUTE = 'data-scroll-id';
+function carouselHostStyles(gap) {
+    return {
+        display: 'flex',
+        flexDirection: 'row',
+        overflowX: 'auto',
+        scrollSnapType: 'x mandatory',
+        WebkitOverflowScrolling: 'touch',
+        gap: `${gap}px`,
+        paddingTop: '16px',
+        paddingBottom: '16px',
+        scrollbarWidth: 'none',
+        cursor: 'grab',
+        position: 'relative',
+    };
+}
+function toCSSPropertyName(property) {
+    return property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+}
+const CAROUSEL_HOST_PRESENTATION_OWNERSHIP = {
+    attributes: [CAROUSEL_SCROLL_ID_ATTRIBUTE],
+    styleProperties: Object.keys(carouselHostStyles(0)).map(toCSSPropertyName),
+};
+function findSpecialSlotKey(props) {
+    const slots = props.slots;
+    return slots && Object.keys(slots).find(key => key !== SLOT_LAYOUT.DEFAULT);
+}
+/** Host attributes/styles owned by the active slot renderer after shell render. */
+function getSlotHostPresentationOwnership(props) {
+    return findSpecialSlotKey(props) === SLOT_LAYOUT.CAROUSEL
+        ? CAROUSEL_HOST_PRESENTATION_OWNERSHIP
+        : EMPTY_HOST_PRESENTATION_OWNERSHIP;
+}
+/** Resolve the exact carousel values consumed by the renderer. */
+function resolveCarouselConfig(props, childCount) {
+    const slotContent = props.slots?.[SLOT_LAYOUT.CAROUSEL];
+    const config = slotContent?.config ?? {};
+    const itemWidthPx = config.itemWidthPx;
+    return {
+        scale: config.scale ?? props.carouselScale ?? 0.85,
+        opacity: config.opacity ?? props.carouselOpacity ?? 0.4,
+        overlayColor: config.overlayColor
+            ?? props.carouselOverlayColor
+            ?? 'rgba(255,255,255,0.5)',
+        gap: config.gap ?? props.carouselGap ?? 16,
+        itemWidthPercent: config.itemWidthPercent
+            ?? props.carouselItemWidth
+            ?? 70,
+        itemWidthPx: itemWidthPx ? itemWidthPx : null,
+        initialIndex: Math.max(0, Math.min(childCount - 1, config.initialIndex ?? props.carouselInitialIndex ?? 0)),
+        autoplay: config.autoplay ?? props.carouselAutoplay ?? false,
+        autoplayInterval: config.autoplayInterval
+            ?? props.carouselAutoplayInterval
+            ?? 3000,
+    };
+}
+function carouselNumericFingerprint(value) {
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : String(numeric);
+}
+function carouselLayoutFingerprint(config) {
+    const autoplay = Boolean(config.autoplay);
+    return {
+        scale: carouselNumericFingerprint(config.scale),
+        opacity: carouselNumericFingerprint(config.opacity),
+        overlayColor: String(config.overlayColor),
+        gap: `${config.gap}px`,
+        itemBasis: config.itemWidthPx
+            ? `${config.itemWidthPx}px`
+            : `${config.itemWidthPercent}%`,
+        initialIndex: carouselNumericFingerprint(config.initialIndex),
+        autoplay,
+        autoplayInterval: autoplay
+            ? carouselNumericFingerprint(config.autoplayInterval)
+            : null,
+    };
+}
+/** JSON-like layout dependencies used by the static incremental boundary. */
+function getSlotLayoutFingerprintInput(props, children, resolveChildProps) {
+    const slotKey = findSpecialSlotKey(props);
+    if (slotKey === SLOT_LAYOUT.CAROUSEL) {
+        return {
+            slotKey,
+            childOccurrences: children.map((child, index) => ({
+                index,
+                id: child.id,
+            })),
+            carousel: carouselLayoutFingerprint(resolveCarouselConfig(props, children.length)),
+        };
+    }
+    const input = {
+        childIds: children.map(child => child.id),
+        slots: props.slots ?? null,
+    };
+    if (slotKey === SLOT_LAYOUT.GRID) {
+        input.gridPlacements = children.map((child, index) => {
+            const placement = gridPlacementStyles(resolveChildProps?.(child) ?? child.props);
+            return {
+                index,
+                id: child.id,
+                gridColumn: placement['grid-column'] ?? null,
+                gridRow: placement['grid-row'] ?? null,
+                gridArea: placement['grid-area'] ?? null,
+            };
+        });
+    }
+    return input;
+}
+const slotItemBindings = new WeakMap();
+const slotOwnerBindings = new WeakMap();
+function clearSlotOwnerBehavior(element) {
+    slotOwnerBindings.get(element)?.cleanup();
+}
+function createSlotOwnerCleanup(element) {
+    clearSlotOwnerBehavior(element);
+    const cleanups = [];
+    let disposed = false;
+    const binding = {
+        cleanup() {
+            if (disposed)
+                return;
+            disposed = true;
+            if (slotOwnerBindings.get(element) === binding) {
+                slotOwnerBindings.delete(element);
+            }
+            for (const cleanup of cleanups.splice(0).reverse()) {
+                try {
+                    cleanup();
+                }
+                catch {
+                    // Teardown is best-effort; one browser resource cannot block others.
+                }
+            }
+        },
+    };
+    slotOwnerBindings.set(element, binding);
+    return {
+        add(cleanup) {
+            if (disposed)
+                cleanup();
+            else
+                cleanups.push(cleanup);
+        },
+        dispose: binding.cleanup,
+    };
+}
+function addSlotOwnerListener(controller, target, type, listener, options) {
+    target.addEventListener(type, listener, options);
+    controller.add(() => target.removeEventListener(type, listener, options));
+}
+function clearSlotItemPresentation(element) {
+    const binding = slotItemBindings.get(element);
+    if (!binding)
+        return;
+    try {
+        binding.cleanup?.();
+    }
+    finally {
+        slotItemBindings.delete(element);
+    }
+}
+function bindSlotItemPresentation(element, descriptor) {
+    clearSlotItemPresentation(element);
+    const behavior = descriptor.apply(element) ?? {};
+    slotItemBindings.set(element, { descriptor, ...behavior });
+}
+function stylePropertyNames(style) {
+    const names = new Set();
+    for (let index = 0; index < style.length; index += 1) {
+        const name = style.item(index);
+        if (name)
+            names.add(name);
+    }
+    return names;
+}
+function captureSlotItemPresentation(element, ownership) {
+    const styleNames = stylePropertyNames(element.style);
+    return {
+        attributes: ownership.attributes.map(name => ({
+            name,
+            present: element.hasAttribute(name),
+            value: element.getAttribute(name) ?? '',
+        })),
+        styles: ownership.styleProperties.map(name => ({
+            name,
+            present: styleNames.has(name),
+            value: element.style.getPropertyValue(name),
+            priority: element.style.getPropertyPriority(name),
+        })),
+    };
+}
+function restoreSlotItemPresentation(element, snapshot) {
+    for (const attribute of snapshot.attributes) {
+        if (attribute.present)
+            element.setAttribute(attribute.name, attribute.value);
+        else
+            element.removeAttribute(attribute.name);
+    }
+    for (const style of snapshot.styles) {
+        if (style.present) {
+            element.style.setProperty(style.name, style.value, style.priority);
+        }
+        else {
+            element.style.removeProperty(style.name);
+        }
+    }
+}
+function slotItemOwnership(styles) {
+    return {
+        attributes: [],
+        styleProperties: Object.keys(styles),
+    };
+}
+function applySlotItemStyles(element, styles) {
+    for (const [name, value] of Object.entries(styles)) {
+        element.style.setProperty(name, value);
+    }
+}
+/** Copy an immediate parent's slot-item decoration onto a detached replacement. */
+function transferSlotItemPresentation(current, replacement) {
+    const binding = slotItemBindings.get(current);
+    if (!binding)
+        return;
+    const resume = binding.suspend?.();
+    try {
+        const snapshot = captureSlotItemPresentation(current, binding.descriptor.ownership);
+        bindSlotItemPresentation(replacement, binding.descriptor);
+        restoreSlotItemPresentation(replacement, snapshot);
+        binding.descriptor.transfer?.(current, replacement);
+    }
+    finally {
+        resume?.();
+    }
+}
+/** Item styles owned by the live parent slot, used by shallow shell updates. */
+function getSlotItemPresentationOwnership(element) {
+    return slotItemBindings.get(element)?.descriptor.ownership
+        ?? EMPTY_HOST_PRESENTATION_OWNERSHIP;
+}
+/** Preserve parent-owned presentation and transient behavior around an item update. */
+function updateSlotItemShellPresentation(element, update, additionalOwnership = EMPTY_HOST_PRESENTATION_OWNERSHIP) {
+    const binding = slotItemBindings.get(element);
+    const ownership = mergePresentationOwnership(binding?.descriptor.ownership ?? EMPTY_HOST_PRESENTATION_OWNERSHIP, additionalOwnership);
+    if (!binding
+        && ownership.attributes.length === 0
+        && ownership.styleProperties.length === 0) {
+        update();
+        return;
+    }
+    const resume = binding?.suspend?.();
+    try {
+        const snapshot = captureSlotItemPresentation(element, ownership);
+        try {
+            update();
+        }
+        finally {
+            restoreSlotItemPresentation(element, snapshot);
+        }
+    }
+    finally {
+        resume?.();
+    }
+}
+function mergePresentationOwnership(...ownership) {
+    return {
+        attributes: Array.from(new Set(ownership.flatMap(value => value.attributes))),
+        styleProperties: Array.from(new Set(ownership.flatMap(value => value.styleProperties))),
+    };
+}
+/** Patch renderer-owned shell presentation without overwriting layout state. */
+function patchElementShellPresentation(current, previous, desired, ...preservedOwnership) {
+    const ownership = mergePresentationOwnership(...preservedOwnership);
+    const layoutAttributes = new Set(ownership.attributes);
+    const layoutStyleProperties = new Set(ownership.styleProperties);
+    const attributeNames = new Set([
+        ...Array.from(previous.attributes, attribute => attribute.name),
+        ...Array.from(desired.attributes, attribute => attribute.name),
+    ]);
+    attributeNames.delete('style');
+    for (const name of attributeNames) {
+        if (layoutAttributes.has(name))
+            continue;
+        const previousHas = previous.hasAttribute(name);
+        const desiredHas = desired.hasAttribute(name);
+        const previousValue = previous.getAttribute(name);
+        const desiredValue = desired.getAttribute(name);
+        if (previousHas === desiredHas
+            && previousValue === desiredValue) {
+            continue;
+        }
+        if (previousHas) {
+            if (!current.hasAttribute(name)
+                || current.getAttribute(name) !== previousValue) {
+                continue;
+            }
+        }
+        else if (current.hasAttribute(name)) {
+            continue;
+        }
+        if (desiredHas)
+            current.setAttribute(name, desiredValue);
+        else
+            current.removeAttribute(name);
+    }
+    const previousPropertyNames = stylePropertyNames(previous.style);
+    const desiredPropertyNames = stylePropertyNames(desired.style);
+    const propertyNames = new Set([
+        ...previousPropertyNames,
+        ...desiredPropertyNames,
+    ]);
+    const currentPropertyNames = stylePropertyNames(current.style);
+    for (const name of propertyNames) {
+        if (layoutStyleProperties.has(name))
+            continue;
+        const previousHas = previousPropertyNames.has(name);
+        const desiredHas = desiredPropertyNames.has(name);
+        const previousValue = previous.style.getPropertyValue(name);
+        const desiredValue = desired.style.getPropertyValue(name);
+        const previousPriority = previous.style.getPropertyPriority(name);
+        const desiredPriority = desired.style.getPropertyPriority(name);
+        if (previousHas === desiredHas
+            && previousValue === desiredValue
+            && previousPriority === desiredPriority) {
+            continue;
+        }
+        if (previousHas) {
+            if (!currentPropertyNames.has(name)
+                || current.style.getPropertyValue(name) !== previousValue
+                || current.style.getPropertyPriority(name) !== previousPriority) {
+                continue;
+            }
+        }
+        else if (currentPropertyNames.has(name)) {
+            continue;
+        }
+        if (desiredHas) {
+            current.style.setProperty(name, desiredValue, desiredPriority);
+        }
+        else {
+            current.style.removeProperty(name);
+        }
+    }
+}
+/** Release slot-owned item listeners within a disposed subtree. */
+function clearSlotItemPresentationsIn(root) {
+    let hasError = false;
+    let firstError;
+    const clear = (element) => {
+        try {
+            clearSlotItemPresentation(element);
+        }
+        catch (error) {
+            if (!hasError)
+                firstError = error;
+            hasError = true;
+        }
+    };
+    clear(root);
+    root.querySelectorAll('*').forEach(clear);
+    if (hasError)
+        throw firstError;
+}
+/** Release slot-owner listeners, timers, frames, and observers in a subtree. */
+function clearSlotOwnerBehaviorsIn(root) {
+    clearSlotOwnerBehavior(root);
+    root.querySelectorAll('*').forEach(clearSlotOwnerBehavior);
+}
+// ─── Dispatcher ─────────────────────────────────────────────────
+/**
+ * Apply host-level layout styles based on the slot key.
+ * Called from renderDefault BEFORE props.style so explicit styles can override.
+ * Layouts that require wrapper DOM continue to render in renderSlotLayout.
+ */
+function applySlotBaseStyle(container, props) {
+    const flex = props.slots?.[SLOT_LAYOUT.FLEX];
+    if (!flex || typeof flex !== 'object')
+        return;
+    const config = flex.config && typeof flex.config === 'object' ? flex.config : {};
+    container.style.display = 'flex';
+    container.style.flexDirection = config.direction ?? 'column';
+    container.style.alignItems = config.align ?? 'flex-start';
+    container.style.justifyContent = config.justify ?? 'flex-start';
+    container.style.flexWrap = config.wrap ?? 'nowrap';
+    container.style.gap = resolveFlexGap(config.gap);
+}
+function resolveFlexGap(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    return typeof value === 'string' && value.length > 0 ? value : '0px';
+}
 /**
  * Render children into a container using the slot layout strategy.
  * Returns true if a special layout was applied (children already appended).
  * Returns false for `default` — caller uses original append loop.
  */
-function renderSlotLayout(container, children, props, renderChild, childrenMap, actionContext) {
+function renderSlotLayout(container, children, props, renderChild, childrenMap, actionContext, resolveChildProps) {
     const slots = props.slots;
     if (!slots)
         return false;
-    const slotKey = Object.keys(slots).find((k) => k !== 'default');
+    const slotKey = findSpecialSlotKey(props);
     if (!slotKey)
         return false;
     const slotContent = slots[slotKey];
@@ -734,7 +1149,7 @@ function renderSlotLayout(container, children, props, renderChild, childrenMap,
             renderColumnsSlot(container, slotContent, childrenMap, renderChild);
             return true;
         case SLOT_LAYOUT.GRID:
-            renderGridSlot(container, children, slotContent, renderChild);
+            renderGridSlot(container, children, slotContent, renderChild, resolveChildProps);
             return true;
         case SLOT_LAYOUT.HORIZONTAL_SCROLL:
             renderHorizontalScrollSlot(container, children, slotContent, renderChild);
@@ -808,7 +1223,7 @@ function renderColumnsSlot(container, slotContent, childrenMap, renderChild) {
  *
  * Schema: `slots: { grid: { children: [...], config: { columns: 2, gap: '8px', rows?: 3, rowHeight?: '48px' } } }`
  */
-function renderGridSlot(container, children, slotContent, renderChild) {
+function renderGridSlot(container, children, slotContent, renderChild, resolveChildProps) {
     const columns = slotContent?.config?.columns ?? 2;
     const gap = slotContent?.config?.gap ?? '8px';
     const rows = slotContent?.config?.rows;
@@ -826,7 +1241,7 @@ function renderGridSlot(container, children, slotContent, renderChild) {
         // regardless of whether the child component applies props.style to its host
         // or to an inner shadow-DOM node. No-op for children without placement, so
         // auto-flow cards are unaffected.
-        applyGridPlacement(el, child);
+        bindSlotItemPresentation(el, gridItemDescriptor(resolveChildProps?.(child) ?? child.props));
         grid.appendChild(el);
     }
     container.appendChild(grid);
@@ -839,54 +1254,41 @@ function renderGridSlot(container, children, slotContent, renderChild) {
  * unresolved expression object) is ignored. Children that declare no placement
  * are left untouched — preserving auto-flow behaviour for legacy cards.
  */
-function applyGridPlacement(el, child) {
-    const style = child?.props?.style;
-    if (!style || typeof style !== 'object')
-        return;
-    if (isCssPlacement(style.gridColumn))
-        el.style.gridColumn = String(style.gridColumn);
-    if (isCssPlacement(style.gridRow))
-        el.style.gridRow = String(style.gridRow);
-    if (isCssPlacement(style.gridArea))
-        el.style.gridArea = String(style.gridArea);
+function gridPlacementStyles(props) {
+    const style = props?.style;
+    const placement = {};
+    if (style && typeof style === 'object') {
+        if (isCssPlacement(style.gridColumn)) {
+            placement['grid-column'] = String(style.gridColumn);
+        }
+        if (isCssPlacement(style.gridRow)) {
+            placement['grid-row'] = String(style.gridRow);
+        }
+        if (isCssPlacement(style.gridArea)) {
+            placement['grid-area'] = String(style.gridArea);
+        }
+    }
+    return placement;
+}
+function gridItemDescriptor(props) {
+    const placement = gridPlacementStyles(props);
+    return {
+        kind: 'grid',
+        ownership: slotItemOwnership(placement),
+        apply(element) {
+            applySlotItemStyles(element, placement);
+        },
+    };
 }
 function isCssPlacement(value) {
     return typeof value === 'string' || typeof value === 'number';
 }
-// ─── Horizontal Scroll ──────────────────────────────────────────
-/**
- * Horizontal scrollable row with mouse drag support.
- *
- * Schema: `slots: { horizontalScroll: { children: [...], config: { gap, itemWidth, snap, arrows, arrowStyle, scrollStep, mask, maskWidth, maskColor, itemHoverStyle, autoScroll, autoScrollInterval, autoScrollLoop } } }`
- *
- * Optional config:
- * - `arrows`         — show prev/next arrow buttons; each is only visible while
- *                      the track can actually scroll in that direction (default false)
- * - `arrowStyle`     — free-form CSS object merged onto both arrow buttons; every
- *                      default (circle, background, shadow…) can be overridden
- * - `arrowIcon`      — replaces the built-in chevron on both buttons: an image URL
- *                      (http/https/data:image) or a text glyph/emoji. The left
- *                      button gets a mirrored copy.
- * - `arrowIconLeft` / `arrowIconRight` — per-side icon, same formats, never
- *                      mirrored; takes precedence over `arrowIcon`
- * - `arrowOffset`    — distance of each arrow from its own edge (default '8px');
- *                      number = px, negative values push the arrows outside /
- *                      straddling the container edge
- * - `scrollStep`     — px scrolled per arrow click (default 80% of the visible width)
- * - `mask`           — show translucent edge-fade masks hinting at more content;
- *                      follows the same can-scroll state as the arrows (default false)
- * - `maskWidth`      — width of each edge mask (default '48px')
- * - `maskColor`      — base color the mask fades out from; any CSS color incl.
- *                      rgba for translucency (default '#fff')
- * - `maskOpacity`    — opacity of a mask while visible (default 1)
- * - `itemHoverStyle` — CSS object applied to an item on hover and reverted on
- *                      leave; pure inline-style swap, never triggers a re-render
- * - `autoScroll`     — while the pointer hovers the track, auto-advance one item
- *                      every `autoScrollInterval` ms (default false)
- * - `autoScrollInterval` — ms each item stays before advancing (default 2000)
- * - `autoScrollLoop` — loop back to the first item after the last (default true);
- *                      when false it stops on the last item until re-hovered
- */
+function resolveScrollbarMode(value) {
+    if (value === 'auto' || value === 'hidden' || value === 'visible') {
+        return value;
+    }
+    return undefined;
+}
 function renderHorizontalScrollSlot(container, children, slotContent, renderChild) {
     const config = slotContent?.config ?? {};
     const gap = config.gap ?? '8px';
@@ -898,13 +1300,23 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
     const autoScroll = config.autoScroll === true;
     const autoScrollInterval = typeof config.autoScrollInterval === 'number' ? config.autoScrollInterval : 2000;
     const autoScrollLoop = config.autoScrollLoop !== false;
+    const scrollbar = resolveScrollbarMode(config.scrollbar);
+    const hidesScrollbar = scrollbar == null || scrollbar === 'hidden';
+    const itemDescriptor = horizontalScrollItemDescriptor(itemWidth, snap, itemHoverStyle);
     const track = document.createElement('div');
+    const ownerCleanup = createSlotOwnerCleanup(track);
+    let ownerDisposed = false;
+    let wheelTimer = 0;
+    let autoTimer = 0;
+    let overlayFrame = 0;
+    let resizeObserver = null;
     track.style.cssText = [
         'display:flex',
         'overflow-x:auto',
         'overflow-y:hidden',
         '-webkit-overflow-scrolling:touch',
-        'scrollbar-width:none',
+        hidesScrollbar ? 'scrollbar-width:none' : '',
+        scrollbar === 'visible' ? 'scrollbar-width:auto' : '',
         `gap:${gap}`,
         'cursor:grab',
         snap ? 'scroll-snap-type:x mandatory' : '',
@@ -913,27 +1325,21 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
     // across variable-driven re-renders (see captureScrollPositions/restoreScrollPositions).
     const cardId = container.getAttribute('data-card-id') ?? 'x';
     track.setAttribute('data-scroll-id', cardId);
-    // Hide scrollbar for WebKit
-    const styleEl = document.createElement('style');
-    const trackClass = `card-scroll-${cardId}`;
-    styleEl.textContent = `.${trackClass}::-webkit-scrollbar{display:none}`;
-    track.classList.add(trackClass);
+    if (scrollbar)
+        track.dataset.scrollbar = scrollbar;
     for (const child of children) {
         const item = renderChild(child);
-        item.style.flexShrink = '0';
-        if (itemWidth)
-            item.style.width = itemWidth;
-        if (snap)
-            item.style.scrollSnapAlign = 'start';
-        if (itemHoverStyle)
-            applyHoverStyle(item, itemHoverStyle);
+        bindSlotItemPresentation(item, itemDescriptor);
         track.appendChild(item);
     }
     // Mouse drag (desktop)
     let isDragging = false;
     let startX = 0;
     let scrollLeft = 0;
-    track.addEventListener('mousedown', (e) => {
+    const handleMouseDown = (event) => {
+        if (ownerDisposed)
+            return;
+        const e = event;
         if (e.button !== 0)
             return; // left button only — keep middle/right clicks out of drag state
         // Nested scrollers: consume the gesture so an enclosing horizontalScroll doesn't
@@ -947,8 +1353,11 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         track.style.userSelect = 'none';
         if (snap)
             track.style.scrollSnapType = 'none';
-    });
-    track.addEventListener('mousemove', (e) => {
+    };
+    const handleMouseMove = (event) => {
+        if (ownerDisposed)
+            return;
+        const e = event;
         if (!isDragging)
             return;
         // Only swallow the move while THIS track owns the drag — otherwise an in-progress
@@ -957,7 +1366,7 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         e.stopPropagation();
         e.preventDefault();
         track.scrollLeft = scrollLeft - (e.pageX - startX);
-    });
+    };
     const stopDrag = () => {
         if (!isDragging)
             return;
@@ -967,15 +1376,19 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         if (snap)
             track.style.scrollSnapType = 'x mandatory';
     };
-    track.addEventListener('mouseup', stopDrag);
-    track.addEventListener('mouseleave', stopDrag);
+    addSlotOwnerListener(ownerCleanup, track, 'mousedown', handleMouseDown);
+    addSlotOwnerListener(ownerCleanup, track, 'mousemove', handleMouseMove);
+    addSlotOwnerListener(ownerCleanup, track, 'mouseup', stopDrag);
+    addSlotOwnerListener(ownerCleanup, track, 'mouseleave', stopDrag);
     // Wheel / trackpad → horizontal scroll.
     // Mandatory snap would swallow small wheel deltas (each increment snaps right
     // back to the same item, so the wheel appears dead) — suspend snap while
     // wheeling and restore it shortly after the last tick, which also re-aligns
     // the track to the nearest snap point.
-    let wheelTimer = 0;
-    track.addEventListener('wheel', (e) => {
+    const handleWheel = (event) => {
+        if (ownerDisposed)
+            return;
+        const e = event;
         e.preventDefault();
         // Consume the wheel so a nested horizontalScroll scrolls only itself instead of
         // also driving an enclosing scroller (simplest nested model — no edge hand-off
@@ -988,12 +1401,16 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
         track.scrollLeft += delta;
         if (snap) {
-            clearTimeout(wheelTimer);
+            window.clearTimeout(wheelTimer);
             wheelTimer = window.setTimeout(() => {
+                wheelTimer = 0;
+                if (ownerDisposed)
+                    return;
                 track.style.scrollSnapType = 'x mandatory';
             }, 150);
         }
-    }, { passive: false });
+    };
+    addSlotOwnerListener(ownerCleanup, track, 'wheel', handleWheel, { passive: false });
     // Hover autoplay (desktop): while the pointer is over the track, glide to the next
     // item every `autoScrollInterval` ms, looping back to the first at the end when
     // `autoScrollLoop`. Opt-in via `autoScroll`. Manual drag pauses it (resumes on the
@@ -1002,9 +1419,10 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
     // chrome. Targets are item starts (= snap points), so mandatory snap won't fight the
     // glide — same reason the arrow buttons can scrollBy smoothly without suspending snap.
     if (autoScroll) {
-        let autoTimer = 0;
         const glideTo = (left) => track.scrollTo({ left, behavior: 'smooth' });
         const advance = () => {
+            if (ownerDisposed)
+                return stopAuto();
             // A variable-driven re-render rebuilds the track; bail and clear so the interval
             // doesn't keep driving a detached node (mirrors the ResizeObserver self-teardown).
             if (!track.isConnected)
@@ -1025,6 +1443,8 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
             glideTo(track.scrollLeft + (next.getBoundingClientRect().left - trackLeft));
         };
         const startAuto = () => {
+            if (ownerDisposed)
+                return;
             if (autoTimer)
                 return;
             if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
@@ -1034,14 +1454,45 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         function stopAuto() {
             if (!autoTimer)
                 return;
-            clearInterval(autoTimer);
+            window.clearInterval(autoTimer);
             autoTimer = 0;
         }
-        track.addEventListener('mouseenter', startAuto);
-        track.addEventListener('mouseleave', stopAuto);
-        track.addEventListener('mousedown', stopAuto);
+        addSlotOwnerListener(ownerCleanup, track, 'mouseenter', startAuto);
+        addSlotOwnerListener(ownerCleanup, track, 'mouseleave', stopAuto);
+        addSlotOwnerListener(ownerCleanup, track, 'mousedown', stopAuto);
+    }
+    ownerCleanup.add(() => {
+        ownerDisposed = true;
+        stopDrag();
+        if (wheelTimer) {
+            window.clearTimeout(wheelTimer);
+            wheelTimer = 0;
+        }
+        if (autoTimer) {
+            window.clearInterval(autoTimer);
+            autoTimer = 0;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
+        if (overlayFrame) {
+            cancelAnimationFrame(overlayFrame);
+            overlayFrame = 0;
+        }
+    });
+    if (hidesScrollbar) {
+        const trackClass = `card-scroll-${cardId}`;
+        track.classList.add(trackClass);
+        const styleEl = document.createElement('style');
+        styleEl.textContent = `.${trackClass}::-webkit-scrollbar{display:none}`;
+        container.appendChild(styleEl);
+    }
+    else if (scrollbar === 'visible') {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = '[data-scroll-id][data-scrollbar="visible"]::-webkit-scrollbar{display:block}';
+        container.appendChild(styleEl);
     }
-    container.appendChild(styleEl);
     // Plain track — no overlay chrome requested
     if (!arrows && !mask) {
         container.appendChild(track);
@@ -1074,13 +1525,25 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
             : typeof config.arrowOffset === 'number' ? `${config.arrowOffset}px` : String(config.arrowOffset);
         leftArrow = createArrowButton('left', arrowStyle, arrowOffset, config.arrowIconLeft ?? config.arrowIcon, config.arrowIconLeft == null);
         rightArrow = createArrowButton('right', arrowStyle, arrowOffset, config.arrowIconRight ?? config.arrowIcon, false);
-        leftArrow.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
-        rightArrow.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
+        const scrollLeft = () => {
+            if (!ownerDisposed) {
+                track.scrollBy({ left: -step(), behavior: 'smooth' });
+            }
+        };
+        const scrollRight = () => {
+            if (!ownerDisposed) {
+                track.scrollBy({ left: step(), behavior: 'smooth' });
+            }
+        };
+        addSlotOwnerListener(ownerCleanup, leftArrow, 'click', scrollLeft);
+        addSlotOwnerListener(ownerCleanup, rightArrow, 'click', scrollRight);
         wrapper.appendChild(leftArrow);
         wrapper.appendChild(rightArrow);
     }
     // Show each arrow/mask only while the track can scroll in that direction.
     const updateOverlays = () => {
+        if (ownerDisposed)
+            return;
         const canLeft = track.scrollLeft > 1;
         const canRight = track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
         if (leftArrow)
@@ -1092,37 +1555,125 @@ function renderHorizontalScrollSlot(container, children, slotContent, renderChil
         if (rightMask)
             rightMask.style.opacity = canRight ? maskOpacity : '0';
     };
-    track.addEventListener('scroll', updateOverlays, { passive: true });
+    addSlotOwnerListener(ownerCleanup, track, 'scroll', updateOverlays, { passive: true });
     // ResizeObserver fires once on observe (covers initial layout) and again on
     // any size change; it self-disconnects once the track leaves the DOM.
     if (typeof ResizeObserver !== 'undefined') {
-        const ro = new ResizeObserver(() => {
+        resizeObserver = new ResizeObserver(() => {
+            if (ownerDisposed)
+                return;
             if (!track.isConnected) {
-                ro.disconnect();
+                resizeObserver?.disconnect();
+                resizeObserver = null;
                 return;
             }
             updateOverlays();
         });
-        ro.observe(track);
+        resizeObserver.observe(track);
     }
     else {
-        requestAnimationFrame(updateOverlays);
+        overlayFrame = requestAnimationFrame(() => {
+            overlayFrame = 0;
+            updateOverlays();
+        });
     }
 }
+function horizontalScrollItemDescriptor(itemWidth, snap, hoverStyle) {
+    const styles = {
+        'flex-shrink': '0',
+    };
+    if (itemWidth)
+        styles.width = itemWidth;
+    if (snap)
+        styles['scroll-snap-align'] = 'start';
+    return {
+        kind: 'horizontalScroll',
+        ownership: slotItemOwnership(styles),
+        apply(element) {
+            applySlotItemStyles(element, styles);
+            return hoverStyle ? applyHoverStyle(element, hoverStyle) : undefined;
+        },
+    };
+}
 /** Apply `hoverStyle` on mouseenter and restore the previous inline values on leave. */
 function applyHoverStyle(item, hoverStyle) {
     const previous = {};
-    item.addEventListener('mouseenter', () => {
+    let hovered = false;
+    const enter = () => {
+        if (hovered)
+            return;
+        hovered = true;
         for (const [key, value] of Object.entries(hoverStyle)) {
-            previous[key] = item.style[key];
-            item.style[key] = value;
+            if (key.startsWith('--')) {
+                const previousValue = item.style.getPropertyValue(key);
+                const previousPriority = item.style.getPropertyPriority(key);
+                previous[key] = {
+                    value: previousValue,
+                    priority: previousPriority,
+                    wasPresent: previousValue !== '' || previousPriority !== '',
+                    isCustomProperty: true,
+                };
+                item.style.setProperty(key, String(value));
+            }
+            else {
+                previous[key] = {
+                    value: item.style[key],
+                    priority: '',
+                    wasPresent: true,
+                    isCustomProperty: false,
+                };
+                item.style[key] = value;
+            }
         }
-    });
-    item.addEventListener('mouseleave', () => {
-        for (const [key, value] of Object.entries(previous)) {
-            item.style[key] = value;
+    };
+    const leave = () => {
+        if (!hovered)
+            return;
+        hovered = false;
+        for (const [key, state] of Object.entries(previous)) {
+            if (state.isCustomProperty) {
+                if (state.wasPresent) {
+                    item.style.setProperty(key, state.value, state.priority);
+                }
+                else {
+                    item.style.removeProperty(key);
+                }
+            }
+            else {
+                item.style[key] = state.value;
+            }
+            delete previous[key];
         }
-    });
+    };
+    item.addEventListener('mouseenter', enter);
+    item.addEventListener('mouseleave', leave);
+    return {
+        cleanup() {
+            let hasError = false;
+            let firstError;
+            const cleanup = (operation) => {
+                try {
+                    operation();
+                }
+                catch (error) {
+                    if (!hasError)
+                        firstError = error;
+                    hasError = true;
+                }
+            };
+            cleanup(leave);
+            cleanup(() => item.removeEventListener('mouseenter', enter));
+            cleanup(() => item.removeEventListener('mouseleave', leave));
+            if (hasError)
+                throw firstError;
+        },
+        suspend() {
+            if (!hovered)
+                return;
+            leave();
+            return enter;
+        },
+    };
 }
 /** Translucent edge-fade mask hinting that more content is available in that direction. */
 function createEdgeMask(side, width, color) {
@@ -1202,6 +1753,66 @@ function createArrowButton(side, arrowStyle, offset, icon, mirror = false) {
     return btn;
 }
 // ─── Carousel ───────────────────────────────────────────────────
+function carouselOverlay(item) {
+    for (let index = item.children.length - 1; index >= 0; index -= 1) {
+        const child = item.children.item(index);
+        if (child instanceof HTMLElement
+            && child.classList.contains('carousel-overlay')) {
+            return child;
+        }
+    }
+    return undefined;
+}
+function carouselItems(container) {
+    return Array.from(container.children).filter((child) => (child instanceof HTMLElement
+        && slotItemBindings.get(child)?.descriptor.kind === 'carousel'));
+}
+function carouselItemDescriptor(index, itemCount, itemBasis, overlayColor) {
+    const baseStyles = {
+        'flex-grow': '0',
+        'flex-shrink': '0',
+        'flex-basis': itemBasis,
+        'scroll-snap-align': 'center',
+        'transform-origin': 'center center',
+        position: 'relative',
+        overflow: 'hidden',
+    };
+    const ownedStyles = {
+        ...baseStyles,
+        transform: '',
+        opacity: '',
+    };
+    if (index === 0)
+        ownedStyles['margin-left'] = '';
+    if (index === itemCount - 1)
+        ownedStyles['margin-right'] = '';
+    return {
+        kind: 'carousel',
+        ownership: slotItemOwnership(ownedStyles),
+        apply(element) {
+            applySlotItemStyles(element, baseStyles);
+            const overlay = document.createElement('div');
+            overlay.className = 'carousel-overlay';
+            Object.assign(overlay.style, {
+                position: 'absolute',
+                inset: '0',
+                background: overlayColor,
+                opacity: '0',
+                pointerEvents: 'none',
+                borderRadius: 'inherit',
+                zIndex: '1',
+            });
+            element.appendChild(overlay);
+        },
+        transfer(current, replacement) {
+            const currentOverlay = carouselOverlay(current);
+            const replacementOverlay = carouselOverlay(replacement);
+            if (currentOverlay && replacementOverlay) {
+                replacementOverlay.style.opacity = currentOverlay.style.opacity;
+            }
+        },
+    };
+}
 /**
  * Center-focused carousel with scale/opacity/overlay effects and snap.
  *
@@ -1212,65 +1823,57 @@ function createArrowButton(side, arrowStyle, offset, icon, mirror = false) {
  *                        to the first after the last (default false)
  * - `autoplayInterval` — ms between auto-advances (default 3000)
  */
-function renderCarouselSlot(container, children, slotContent, props, renderChild) {
-    const config = slotContent?.config ?? {};
-    const inactiveScale = config.scale ?? props.carouselScale ?? 0.85;
-    const inactiveOpacity = config.opacity ?? props.carouselOpacity ?? 0.4;
-    const overlayColor = config.overlayColor ?? props.carouselOverlayColor ?? 'rgba(255,255,255,0.5)';
-    const gap = config.gap ?? props.carouselGap ?? 16;
-    const itemWidth = config.itemWidthPercent ?? props.carouselItemWidth ?? 70;
-    const itemWidthPx = config.itemWidthPx;
-    const initialIndex = Math.max(0, Math.min(children.length - 1, config.initialIndex ?? props.carouselInitialIndex ?? 0));
-    const autoplay = config.autoplay ?? props.carouselAutoplay ?? false;
-    const autoplayInterval = config.autoplayInterval ?? props.carouselAutoplayInterval ?? 3000;
-    Object.assign(container.style, {
-        display: 'flex',
-        flexDirection: 'row',
-        overflowX: 'auto',
-        scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch',
-        gap: `${gap}px`,
-        paddingTop: '16px',
-        paddingBottom: '16px',
-        scrollbarWidth: 'none',
-        cursor: 'grab',
-        position: 'relative',
-    });
-    // Hide scrollbar
-    const styleEl = document.createElement('style');
+function renderCarouselSlot(container, children, _slotContent, props, renderChild) {
+    const effectiveConfig = resolveCarouselConfig(props, children.length);
+    const inactiveScale = effectiveConfig.scale;
+    const inactiveOpacity = effectiveConfig.opacity;
+    const overlayColor = effectiveConfig.overlayColor;
+    const gap = effectiveConfig.gap;
+    const itemWidth = effectiveConfig.itemWidthPercent;
+    const itemWidthPx = effectiveConfig.itemWidthPx;
+    const initialIndex = effectiveConfig.initialIndex;
+    const autoplay = effectiveConfig.autoplay;
+    const autoplayInterval = effectiveConfig.autoplayInterval;
+    const ownerCleanup = createSlotOwnerCleanup(container);
+    let ownerDisposed = false;
+    const pendingFrames = new Set();
+    const requestOwnerFrame = (callback) => {
+        let frameId = 0;
+        let completedSynchronously = false;
+        frameId = requestAnimationFrame((timestamp) => {
+            completedSynchronously = true;
+            pendingFrames.delete(frameId);
+            if (!ownerDisposed)
+                callback(timestamp);
+        });
+        if (!completedSynchronously)
+            pendingFrames.add(frameId);
+        return completedSynchronously ? 0 : frameId;
+    };
+    const cancelOwnerFrame = (frameId) => {
+        if (!frameId)
+            return;
+        cancelAnimationFrame(frameId);
+        pendingFrames.delete(frameId);
+    };
+    Object.assign(container.style, carouselHostStyles(gap));
+    // Hide scrollbar
+    const styleEl = document.createElement('style');
     const id = container.getAttribute('data-card-id') ?? '';
     styleEl.textContent = `[data-card-id="${id}"]{scrollbar-width:none}[data-card-id="${id}"]::-webkit-scrollbar{display:none}`;
     container.appendChild(styleEl);
     // The carousel element scrolls itself — tag it so renderCard can snapshot/restore
     // its scrollLeft across variable-driven re-renders (see captureScrollPositions/restoreScrollPositions).
-    container.setAttribute('data-scroll-id', id || 'x');
+    container.setAttribute(CAROUSEL_SCROLL_ID_ATTRIBUTE, id || 'x');
     // Render children
-    const items = [];
     for (let i = 0; i < children.length; i++) {
         const child = children[i];
         const item = renderChild(child);
-        item.style.flex = itemWidthPx ? `0 0 ${itemWidthPx}px` : `0 0 ${itemWidth}%`;
-        item.style.scrollSnapAlign = 'center';
-        item.style.transformOrigin = 'center center';
-        item.style.position = 'relative';
-        item.style.overflow = 'hidden';
-        const overlay = document.createElement('div');
-        overlay.className = 'carousel-overlay';
-        Object.assign(overlay.style, {
-            position: 'absolute',
-            inset: '0',
-            background: overlayColor,
-            opacity: '0',
-            pointerEvents: 'none',
-            borderRadius: 'inherit',
-            zIndex: '1',
-        });
-        item.appendChild(overlay);
+        bindSlotItemPresentation(item, carouselItemDescriptor(i, children.length, itemWidthPx ? `${itemWidthPx}px` : `${itemWidth}%`, overlayColor));
         container.appendChild(item);
-        items.push(item);
     }
     // Index of the item whose center is closest to the viewport center
-    const nearestIndex = () => {
+    const nearestIndex = (items) => {
         const centerX = container.scrollLeft + container.offsetWidth / 2;
         let idx = 0;
         let minDist = Infinity;
@@ -1284,9 +1887,29 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
         });
         return idx;
     };
+    let pendingSnapScrollEnd = null;
+    let pendingSnapTimer = 0;
+    const clearPendingSnap = () => {
+        if (pendingSnapScrollEnd) {
+            container.removeEventListener('scrollend', pendingSnapScrollEnd);
+            pendingSnapScrollEnd = null;
+        }
+        if (pendingSnapTimer) {
+            window.clearTimeout(pendingSnapTimer);
+            pendingSnapTimer = 0;
+        }
+    };
+    const restoreSnap = () => {
+        clearPendingSnap();
+        if (!ownerDisposed)
+            container.style.scrollSnapType = 'x mandatory';
+    };
     // Center a given item. 'smooth' animates and restores CSS snap afterwards;
     // 'auto' jumps instantly (used for initial positioning).
     const centerItem = (item, behavior = 'smooth') => {
+        if (ownerDisposed)
+            return;
+        clearPendingSnap();
         const target = item.offsetLeft - (container.offsetWidth - item.offsetWidth) / 2;
         if (behavior === 'auto') {
             // Disable mandatory snap for the instant jump — a mandatory-snap container
@@ -1294,7 +1917,7 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
             // Restore snap next frame once the scroll offset is committed.
             container.style.scrollSnapType = 'none';
             container.scrollLeft = target;
-            requestAnimationFrame(() => {
+            requestOwnerFrame(() => {
                 container.style.scrollSnapType = 'x mandatory';
             });
             return;
@@ -1302,12 +1925,12 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
         // Disable CSS snap during the smooth animation, restore after for pixel-perfect alignment
         container.style.scrollSnapType = 'none';
         container.scrollTo({ left: target, behavior: 'smooth' });
-        container.addEventListener('scrollend', () => {
-            container.style.scrollSnapType = 'x mandatory';
-        }, { once: true });
+        pendingSnapScrollEnd = restoreSnap;
+        container.addEventListener('scrollend', pendingSnapScrollEnd, { once: true });
         // Fallback for browsers without scrollend event
-        setTimeout(() => {
-            container.style.scrollSnapType = 'x mandatory';
+        pendingSnapTimer = window.setTimeout(() => {
+            pendingSnapTimer = 0;
+            restoreSnap();
         }, 400);
     };
     // Snap helper
@@ -1316,7 +1939,10 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
     let isDragging = false;
     let startX = 0;
     let scrollStart = 0;
-    container.addEventListener('mousedown', (e) => {
+    const handleMouseDown = (event) => {
+        if (ownerDisposed)
+            return;
+        const e = event;
         if (e.button !== 0)
             return; // left button only — keep middle/right clicks out of drag state
         isDragging = true;
@@ -1325,35 +1951,52 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
         container.style.cursor = 'grabbing';
         container.style.scrollSnapType = 'none';
         e.preventDefault();
-    });
-    document.addEventListener('mousemove', (e) => {
-        if (!isDragging)
+    };
+    const handleMouseMove = (event) => {
+        if (ownerDisposed || !isDragging)
             return;
+        const e = event;
         container.scrollLeft = scrollStart - (e.pageX - startX);
-    });
-    document.addEventListener('mouseup', () => {
-        if (!isDragging)
+    };
+    const handleMouseUp = () => {
+        if (ownerDisposed || !isDragging)
             return;
         isDragging = false;
         container.style.cursor = 'grab';
         snapToNearest();
-    });
-    container.addEventListener('touchend', () => {
-        snapToNearest();
-    }, { passive: true });
+    };
+    const handleTouchEnd = () => {
+        if (!ownerDisposed)
+            snapToNearest();
+    };
+    addSlotOwnerListener(ownerCleanup, container, 'mousedown', handleMouseDown);
+    addSlotOwnerListener(ownerCleanup, document, 'mousemove', handleMouseMove);
+    addSlotOwnerListener(ownerCleanup, document, 'mouseup', handleMouseUp);
+    addSlotOwnerListener(ownerCleanup, container, 'touchend', handleTouchEnd, { passive: true });
     // Wheel support
     let wheelTimer = 0;
-    container.addEventListener('wheel', (e) => {
+    const handleWheel = (event) => {
+        if (ownerDisposed)
+            return;
+        const e = event;
         if (Math.abs(e.deltaX) < Math.abs(e.deltaY)) {
             e.preventDefault();
             container.style.scrollSnapType = 'none';
             container.scrollLeft += e.deltaY;
-            clearTimeout(wheelTimer);
-            wheelTimer = window.setTimeout(() => snapToNearest(), 150);
+            window.clearTimeout(wheelTimer);
+            wheelTimer = window.setTimeout(() => {
+                wheelTimer = 0;
+                if (!ownerDisposed)
+                    snapToNearest();
+            }, 150);
         }
-    }, { passive: false });
+    };
+    addSlotOwnerListener(ownerCleanup, container, 'wheel', handleWheel, { passive: false });
     // Scale/opacity effects
     const updateEffects = () => {
+        if (ownerDisposed)
+            return;
+        const items = carouselItems(container);
         const containerWidth = container.offsetWidth;
         const scrollCenter = container.scrollLeft + containerWidth / 2;
         items.forEach((item) => {
@@ -1366,20 +2009,27 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
             const opacity = 1 - ratio * (1 - inactiveOpacity);
             item.style.transform = `scale3d(${scale},${scale},1)`;
             item.style.opacity = `${opacity}`;
-            const overlayEl = item.querySelector('.carousel-overlay');
+            const overlayEl = carouselOverlay(item);
             if (overlayEl)
                 overlayEl.style.opacity = `${ratio}`;
         });
     };
     let rafId = 0;
-    container.addEventListener('scroll', () => {
-        cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(updateEffects);
-    }, { passive: true });
+    const handleScroll = () => {
+        if (ownerDisposed)
+            return;
+        cancelOwnerFrame(rafId);
+        rafId = requestOwnerFrame(() => {
+            rafId = 0;
+            updateEffects();
+        });
+    };
+    addSlotOwnerListener(ownerCleanup, container, 'scroll', handleScroll, { passive: true });
     // Smooth snap to nearest item center + restore scrollSnapType for pixel-perfect final position
     snapToNearest = () => {
+        const items = carouselItems(container);
         if (items.length > 0)
-            centerItem(items[nearestIndex()]);
+            centerItem(items[nearestIndex(items)]);
     };
     // Autoplay — advance to the next item on an interval, looping back to the
     // first after the last. Pauses while the user hovers or interacts.
@@ -1387,33 +2037,64 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
     let autoplayTimer = 0;
     const stopAutoplay = () => {
         if (autoplayTimer) {
-            clearInterval(autoplayTimer);
+            window.clearInterval(autoplayTimer);
             autoplayTimer = 0;
         }
     };
     const startAutoplay = () => {
-        if (!autoplay || items.length < 2)
+        const items = carouselItems(container);
+        if (ownerDisposed
+            || !container.isConnected
+            || !autoplay
+            || items.length < 2)
             return;
         stopAutoplay();
         autoplayTimer = window.setInterval(() => {
-            // Self-clean once the carousel leaves the DOM (no teardown hook is available here)
-            if (!container.isConnected) {
+            if (ownerDisposed || !container.isConnected) {
                 stopAutoplay();
                 return;
             }
             if (paused || isDragging)
                 return;
-            centerItem(items[(nearestIndex() + 1) % items.length]);
+            const items = carouselItems(container);
+            if (items.length < 2)
+                return;
+            centerItem(items[(nearestIndex(items) + 1) % items.length]);
         }, autoplayInterval);
     };
     if (autoplay) {
-        container.addEventListener('mouseenter', () => { paused = true; });
-        container.addEventListener('mouseleave', () => { paused = false; });
-        container.addEventListener('touchstart', () => { paused = true; }, { passive: true });
-        container.addEventListener('touchend', () => { paused = false; }, { passive: true });
-    }
+        const pauseAutoplay = () => {
+            if (!ownerDisposed)
+                paused = true;
+        };
+        const resumeAutoplay = () => {
+            if (!ownerDisposed)
+                paused = false;
+        };
+        addSlotOwnerListener(ownerCleanup, container, 'mouseenter', pauseAutoplay);
+        addSlotOwnerListener(ownerCleanup, container, 'mouseleave', resumeAutoplay);
+        addSlotOwnerListener(ownerCleanup, container, 'touchstart', pauseAutoplay, { passive: true });
+        addSlotOwnerListener(ownerCleanup, container, 'touchend', resumeAutoplay, { passive: true });
+    }
+    ownerCleanup.add(() => {
+        ownerDisposed = true;
+        paused = true;
+        isDragging = false;
+        container.style.cursor = 'grab';
+        if (wheelTimer) {
+            window.clearTimeout(wheelTimer);
+            wheelTimer = 0;
+        }
+        clearPendingSnap();
+        stopAutoplay();
+        for (const frameId of pendingFrames)
+            cancelAnimationFrame(frameId);
+        pendingFrames.clear();
+        rafId = 0;
+    });
     // Initial position & effects — deferred until element is in DOM and laid out
-    requestAnimationFrame(() => {
+    requestOwnerFrame(() => {
+        const items = carouselItems(container);
         if (items.length > 0) {
             // Use ACTUAL rendered width (includes padding in content-box mode) for perfect centering
             const containerWidth = container.offsetWidth;
@@ -1428,13 +2109,13 @@ function renderCarouselSlot(container, children, slotContent, props, renderChild
                 delete container.dataset.restoreScrollLeft;
                 container.style.scrollSnapType = 'none';
                 container.scrollLeft = parseFloat(saved);
-                requestAnimationFrame(() => {
+                requestOwnerFrame(() => {
                     container.style.scrollSnapType = 'x mandatory';
                 });
             }
             else {
                 // Jump to the configured initial item (defaults to the first) — CSS snap maintains alignment
-                centerItem(items[initialIndex], 'auto');
+                centerItem(items[Math.min(initialIndex, items.length - 1)], 'auto');
             }
         }
         updateEffects();
@@ -1721,6 +2402,97 @@ class BaseElement extends HTMLElement {
         this.shadowRoot.innerHTML = html;
         applyResponsiveStyles(this.shadowRoot, this._responsive);
     }
+    /**
+     * Patch freshly rendered markup around an existing interactive element.
+     *
+     * Replacing a focused native control through `shadowRoot.innerHTML` resets
+     * its selection and, on mobile WebViews, can also recreate the soft
+     * keyboard with a different layout. This helper keeps the selected element
+     * connected while reconciling its surrounding markup.
+     */
+    patchShadowHTMLPreservingElement(html, preserved, selector) {
+        if (!this.shadowRoot || !this.shadowRoot.contains(preserved))
+            return false;
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        const desiredPreserved = template.content.querySelector(selector);
+        if (!desiredPreserved
+            || desiredPreserved.tagName !== preserved.tagName
+            || (preserved instanceof HTMLInputElement
+                && desiredPreserved instanceof HTMLInputElement
+                && desiredPreserved.type !== preserved.type)) {
+            return false;
+        }
+        this.reconcilePreservedTree(this.shadowRoot, template.content, preserved);
+        applyResponsiveStyles(this.shadowRoot, this._responsive);
+        return this.shadowRoot.contains(preserved);
+    }
+    reconcilePreservedTree(currentParent, desiredParent, preserved) {
+        const desiredChildren = Array.from(desiredParent.children);
+        const currentChildren = Array.from(currentParent.children);
+        const matches = new Map();
+        const claimed = new Set();
+        for (const desired of desiredChildren) {
+            const desiredKey = this.reconcileKey(desired);
+            const current = currentChildren.find(candidate => (!claimed.has(candidate)
+                && this.reconcileKey(candidate) === desiredKey));
+            if (current) {
+                claimed.add(current);
+                matches.set(desired, current);
+            }
+        }
+        for (const current of currentChildren) {
+            if (!claimed.has(current))
+                current.remove();
+        }
+        desiredChildren.forEach((desired, index) => {
+            let current = matches.get(desired);
+            if (!current) {
+                current = desired.cloneNode(true);
+            }
+            const childAtIndex = currentParent.children.item(index);
+            if (childAtIndex !== current) {
+                currentParent.insertBefore(current, childAtIndex);
+            }
+            this.patchPreservedElement(current, desired, preserved);
+        });
+    }
+    patchPreservedElement(current, desired, preserved) {
+        for (const attribute of Array.from(current.attributes)) {
+            if (!desired.hasAttribute(attribute.name)) {
+                current.removeAttribute(attribute.name);
+            }
+        }
+        for (const attribute of Array.from(desired.attributes)) {
+            current.setAttribute(attribute.name, attribute.value);
+        }
+        if (current === preserved)
+            return;
+        if (current.contains(preserved)) {
+            this.reconcilePreservedTree(current, desired, preserved);
+            return;
+        }
+        current.innerHTML = desired.innerHTML;
+    }
+    reconcileKey(element) {
+        if (element.classList.contains('card-input'))
+            return 'card-input';
+        if (element.classList.contains('card-input-wrapper')) {
+            return 'card-input-wrapper';
+        }
+        if (element.classList.contains('card-input-label')) {
+            return 'card-input-label';
+        }
+        if (element.classList.contains('input-control'))
+            return 'input-control';
+        if (element.classList.contains('input-prefix'))
+            return 'input-prefix';
+        if (element.classList.contains('input-suffix'))
+            return 'input-suffix';
+        if (element.classList.contains('number-stepper'))
+            return 'number-stepper';
+        return element.tagName;
+    }
     /**
      * Escape a value before interpolating it into a double-quoted HTML
      * attribute. Browsers decode the entities before parsing inline CSS, so
@@ -2336,6 +3108,30 @@ function sanitizeIconHtml(icon) {
     walk(tpl.content);
     return tpl.innerHTML;
 }
+function escapeIconAttribute(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function isDirectImageUrl(icon) {
+    const normalized = icon.replace(/[\s\x00-\x1f]/g, '').toLowerCase();
+    return /^(?:https?:\/\/|\/\/|data:image\/)/.test(normalized)
+        || /^(?:\.{0,2}\/).+\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(icon);
+}
+/**
+ * Button.icon historically accepts sanitized HTML or text. A direct image URL
+ * is a common shorthand, so convert only recognizable image URLs to markup and
+ * leave inline SVG, <img> HTML, emoji, and other text on the existing path.
+ */
+function renderButtonIcon(icon) {
+    const value = String(icon ?? '').trim();
+    if (isDirectImageUrl(value)) {
+        return `<img class="card-btn-url-icon" src="${escapeIconAttribute(value)}" alt="" aria-hidden="true" />`;
+    }
+    return sanitizeIconHtml(value);
+}
 class CardButton extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
@@ -2490,12 +3286,18 @@ class CardButton extends BaseElement {
           width: 1em;
           height: 1em;
         }
+        .card-btn-url-icon {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
       </style>
       <button
         class="card-btn ${variant} ${isMobile ? 'card-mobile' : 'card-desktop'}"
         ${disabled ? 'disabled' : ''}
         style="${inlineStyle}"
-      ><span class="card-btn-content">${icon ? `<span class="card-btn-icon">${sanitizeIconHtml(String(icon))}</span>` : ''}${displayText}</span></button>
+      ><span class="card-btn-content">${icon ? `<span class="card-btn-icon">${renderButtonIcon(icon)}</span>` : ''}${displayText}</span></button>
     `);
     }
 }
@@ -2679,10 +3481,18 @@ function normalizeNumberAttribute(value, options = {}) {
     return numeric;
 }
 class CardInput extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.wiredInputs = new WeakSet();
+        this.wiredNumberInputs = new WeakSet();
+    }
     render() {
         if (!this.shadowRoot || !this._node)
             return;
-        const { placeholder = '', autoFocus = false, inputType = 'text', label, defaultValue = '', disabled = false, readonly: readOnly = false, maxLength, rows, min, max, step = 1, controls = true, prefix, suffix, style, inputStyle, isExpressionResultStyle, } = this._props;
+        const activeControl = this.shadowRoot.activeElement?.matches('.card-input')
+            ? this.shadowRoot.activeElement
+            : null;
+        const { placeholder = '', inputType = 'text', inputMode, 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 }
@@ -2752,6 +3562,7 @@ class CardInput extends BaseElement {
           id="${inputId}"
           class="card-input ${isMobile ? 'card-mobile' : 'card-desktop'}"
           placeholder="${this.escapeAttr(String(placeholder))}"
+          ${inputMode ? `inputmode="${this.escapeAttr(String(inputMode))}"` : ''}
           ${describedBy}
           ${disabled ? 'disabled' : ''}
           ${readOnly ? 'readonly' : ''}
@@ -2763,6 +3574,7 @@ class CardInput extends BaseElement {
           id="${inputId}"
           class="card-input ${isMobile ? 'card-mobile' : 'card-desktop'}"
           type="${this.escapeAttr(String(inputType))}"
+          ${inputMode ? `inputmode="${this.escapeAttr(String(inputMode))}"` : ''}
           placeholder="${this.escapeAttr(String(placeholder))}"
           value="${this.escapeAttr(String(defaultValue))}"
           ${describedBy}
@@ -2772,7 +3584,7 @@ class CardInput extends BaseElement {
           ${numberAttributes}
           style="${nativeInlineStyle}"
         />`;
-        this.setShadowHTML(`
+        const markup = `
       <style>
         :host {
           display: block;
@@ -2946,7 +3758,11 @@ class CardInput extends BaseElement {
           ${numberStepperHtml}
         </div>
       </div>
-    `);
+    `;
+        if (!activeControl
+            || !this.patchShadowHTMLPreservingElement(markup, activeControl, '.card-input')) {
+            this.setShadowHTML(markup);
+        }
         // Wire up native input/change events that bubble out of Shadow DOM.
         // renderCard listens for these standard event names (mapped from onInput / onChange).
         // The `detail.value` carries the current input value so that:
@@ -2954,41 +3770,41 @@ class CardInput extends BaseElement {
         //   2. action handlers can access it if needed
         const inputEl = this.shadowRoot.querySelector('.card-input');
         if (inputEl) {
-            inputEl.addEventListener('input', () => {
-                this.dispatchEvent(new CustomEvent('input', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: inputEl.value },
-                }));
-            });
-            inputEl.addEventListener('change', () => {
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: inputEl.value },
-                }));
-            });
-            if (autoFocus && !disabled) {
-                queueMicrotask(() => {
-                    const control = this.getAutoFocusControl();
-                    if (control && this.isFirstAvailableAutoFocusInput()) {
-                        control.focus();
-                    }
+            if (!this.wiredInputs.has(inputEl)) {
+                this.wiredInputs.add(inputEl);
+                inputEl.addEventListener('input', () => {
+                    this.dispatchEvent(new CustomEvent('input', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { value: inputEl.value },
+                    }));
+                });
+                inputEl.addEventListener('change', () => {
+                    this.dispatchEvent(new CustomEvent('change', {
+                        bubbles: true,
+                        composed: true,
+                        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);
+                    const increaseButton = this.shadowRoot?.querySelector('.number-step-button.increase');
+                    const decreaseButton = this.shadowRoot?.querySelector('.number-step-button.decrease');
                     if (increaseButton)
                         increaseButton.disabled = state.increase;
                     if (decreaseButton)
                         decreaseButton.disabled = state.decrease;
                 };
-                inputEl.addEventListener('input', refreshStepperState);
+                if (!this.wiredNumberInputs.has(inputEl)) {
+                    this.wiredNumberInputs.add(inputEl);
+                    inputEl.addEventListener('input', refreshStepperState);
+                }
+                const increaseButton = this.shadowRoot.querySelector('.number-step-button.increase');
+                const decreaseButton = this.shadowRoot.querySelector('.number-step-button.decrease');
                 increaseButton?.addEventListener('click', () => {
                     stepNumberInput(inputEl, 'increase');
                     inputEl.focus();
@@ -3004,21 +3820,25 @@ class CardInput extends BaseElement {
         }
     }
     // ─── Helpers ──────────────────────────────────────────────────
-    getAutoFocusControl() {
+    /**
+     * Consume an interaction-driven focus request from the card renderer.
+     * Mounts and ordinary updates never call this method.
+     */
+    requestAutoFocus() {
         if (!this.isConnected
             || !this._props.autoFocus
             || this.hasAttribute('data-disabled')) {
-            return null;
+            return false;
         }
         const control = this.shadowRoot?.querySelector('.card-input');
-        return control && !control.disabled ? control : null;
-    }
-    isFirstAvailableAutoFocusInput() {
-        const root = this.getRootNode();
-        if (!('querySelectorAll' in root))
+        if (!control
+            || control.disabled
+            || control.readOnly
+            || control.value !== '') {
             return false;
-        const firstAvailable = Array.from(root.querySelectorAll(CardInput.is)).find(input => input.getAutoFocusControl() !== null);
-        return firstAvailable === this;
+        }
+        control.focus({ preventScroll: true });
+        return this.shadowRoot?.activeElement === control;
     }
     /** Escape HTML entities for safe insertion. */
     escapeHtml(str) {
@@ -3080,15 +3900,37 @@ class CardImage extends BaseElement {
         if (!this.shadowRoot || !this._node)
             return;
         const { src, alt = '', width, height, objectFit = 'cover', preview = true, style, isExpressionResultStyle, } = this._props;
-        const inlineStyle = this.buildInlineStyle(style, isExpressionResultStyle);
         const imgSrc = this.resolveContent(src);
         const imgAlt = this.resolveContent(alt);
+        // Keep the custom-element box independent from the image's intrinsic
+        // dimensions. A failed image has different intrinsic sizing rules, so
+        // sizing only the inner <img> makes flex/grid layouts jump on error.
+        const hostWidth = this.applyHostDimension('width', style?.width, width);
+        const hostHeight = this.applyHostDimension('height', style?.height, height);
+        const ownsWidth = hostWidth != null;
+        const ownsHeight = hostHeight != null;
+        const reservesWidth = ownsWidth && hostWidth !== 'auto';
+        const reservesHeight = ownsHeight && hostHeight !== 'auto';
+        // Width and height belong to the host layout box. Remove them from the
+        // inner style so relative lengths (for example 50%) are not applied twice.
+        const imageStyle = style && typeof style === 'object' ? { ...style } : style;
+        if (imageStyle && typeof imageStyle === 'object') {
+            if (ownsWidth)
+                delete imageStyle.width;
+            if (ownsHeight)
+                delete imageStyle.height;
+        }
+        const inlineStyle = this.buildInlineStyle(imageStyle, isExpressionResultStyle);
         // Build image inline styles
         const imgStyles = [];
-        if (width)
-            imgStyles.push(`width:${width}`);
-        if (height)
-            imgStyles.push(`height:${height}`);
+        if (ownsWidth)
+            imgStyles.push(`width:${reservesWidth ? '100%' : 'auto'}`);
+        if (ownsHeight)
+            imgStyles.push(`height:${reservesHeight ? '100%' : 'auto'}`);
+        if (reservesWidth)
+            imgStyles.push('min-width:0');
+        if (reservesHeight)
+            imgStyles.push('min-height:0');
         if (objectFit)
             imgStyles.push(`object-fit:${objectFit}`);
         if (inlineStyle)
@@ -3104,9 +3946,12 @@ class CardImage extends BaseElement {
           position: relative;
           display: inline-block;
           max-width: 100%;
+          ${reservesWidth ? 'width: 100%;' : ''}
+          ${reservesHeight ? 'height: 100%;' : ''}
         }
         .card-image {
           display: block;
+          box-sizing: border-box;
           max-width: 100%;
           height: auto;
           transition: transform 0.2s ease, opacity 0.2s ease;
@@ -3127,8 +3972,8 @@ class CardImage extends BaseElement {
           100% { background-position: -200% 0; }
         }
         .card-image.error {
-          min-width: 100px;
-          min-height: 60px;
+          min-width: ${reservesWidth ? '0' : '100px'};
+          min-height: ${reservesHeight ? '0' : '60px'};
           background: #f5f5f5;
           display: flex;
           align-items: center;
@@ -3205,6 +4050,26 @@ class CardImage extends BaseElement {
     `);
         this.bindEvents(preview);
     }
+    applyHostDimension(property, styleValue, propValue) {
+        this.style.removeProperty(property);
+        for (const value of [styleValue, propValue]) {
+            const resolved = this.resolveDeclaredDimension(value);
+            if (resolved == null)
+                continue;
+            this.style.setProperty(property, resolved);
+            const applied = this.style.getPropertyValue(property);
+            if (applied)
+                return applied;
+        }
+        return undefined;
+    }
+    resolveDeclaredDimension(value) {
+        if (typeof value === 'number' && Number.isFinite(value))
+            return this.toCSS(value);
+        if (typeof value === 'string' && value.trim() !== '')
+            return this.toCSS(value.trim());
+        return undefined;
+    }
     bindEvents(preview) {
         if (!this.shadowRoot)
             return;
@@ -3319,9 +4184,7 @@ class CardDivider extends BaseElement {
       <div class="divider-line"></div>
       ${displayText ? `<span class="divider-text">${displayText}</span><div class="divider-line"></div>` : ''}
     `);
-        if (inlineStyle) {
-            this.style.cssText += ';' + inlineStyle;
-        }
+        this.style.cssText = inlineStyle;
     }
 }
 CardDivider.is = 'ai-card-divider';
@@ -5250,9 +6113,7 @@ class CardLoading extends BaseElement {
       <div class="spinner"></div>
       ${displayText ? `<span class="loading-text">${displayText}</span>` : ''}
     `);
-        if (inlineStyle) {
-            this.style.cssText += ';' + inlineStyle;
-        }
+        this.style.cssText = inlineStyle;
     }
 }
 CardLoading.is = 'ai-card-loading';
@@ -7013,11 +7874,12 @@ class CardChoiceItem extends BaseElement {
             ...(selected ? selectedIndicatorStyle || {} : {}),
         }, isExpressionResultStyle);
         const indicatorRole = selectionMode === 'single' ? 'radio' : 'checkbox';
-        const resolvedCheckedIcon = checkedIcon ?? listCheckedIcon ?? {
+        const configuredCheckedIcon = checkedIcon ?? listCheckedIcon;
+        const resolvedCheckedIcon = configuredCheckedIcon ?? {
             name: 'check_bold',
             size: 12,
         };
-        const checkedMark = selectionMode === 'multiple'
+        const checkedMark = selectionMode === 'multiple' || configuredCheckedIcon
             ? `<span class="choice-icon" aria-hidden="true">${renderIconContent(resolvedCheckedIcon)}</span>`
             : '<span class="radio-dot" aria-hidden="true"></span>';
         this.setAttribute('data-selected', String(selected));
@@ -7656,6 +8518,8 @@ function renderDefault(node, props, isMobile, responsive) {
     div.className = `card-element card-${node.type.toLowerCase()} ${isMobile ? 'card-mobile' : 'card-desktop'}`;
     div.setAttribute('data-card-id', node.id);
     div.setAttribute('data-card-type', node.type);
+    // Apply slot base styles FIRST (so props.style can override)
+    applySlotBaseStyle(div, props);
     if (props.style && typeof props.style === 'object') {
         const resolvedStyle = buildStyleString(props.isExpressionResultStyle
             ? props.style
@@ -7718,158 +8582,936 @@ 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;
-    const isMobile = options.isMobile === true;
-    let actionQueue = Promise.resolve();
-    let lifecycleQueue = Promise.resolve();
-    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;
+const states = new WeakMap();
+function dispatchCurrent(element, state, domEvent, event) {
+    const config = state.current;
+    if (!config.isActive())
+        return;
+    if (domEvent === 'input'
+        && config.variableKey
+        && config.writeVariable
+        && event.target === element) {
+        const value = event instanceof CustomEvent
+            && event.detail?.value !== undefined
+            ? event.detail.value
+            : event.target?.value;
+        if (value !== undefined) {
+            config.writeVariable(config.variableKey, value);
+        }
+    }
+    for (const binding of config.events) {
+        if (binding.domEvent !== domEvent)
+            continue;
+        if (binding.ownsValueEvent && event.target !== element)
+            continue;
+        binding.dispatch(event);
     }
-    function createPassiveActionContext(renderVariables) {
-        return {
-            ...createWebActionContext({
-                ...options,
-                abortSignal: abortController.signal,
-            }),
-            variables: renderVariables,
-            botId: options.botId,
-            inflightRequests,
+}
+function syncElementBindings(element, config) {
+    let state = states.get(element);
+    if (!state) {
+        state = {
+            current: config,
+            listeners: new Map(),
         };
+        states.set(element, state);
+    }
+    state.current = config;
+    const desiredEvents = new Set(config.events.map(event => event.domEvent));
+    if (config.variableKey)
+        desiredEvents.add('input');
+    for (const [name, listener] of state.listeners) {
+        if (desiredEvents.has(name))
+            continue;
+        element.removeEventListener(name, listener);
+        state.listeners.delete(name);
     }
-    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;
+    for (const name of desiredEvents) {
+        if (state.listeners.has(name))
+            continue;
+        const listener = event => {
+            const latest = states.get(element);
+            if (latest) {
+                dispatchCurrent(element, latest, name, event);
             }
+        };
+        element.addEventListener(name, listener);
+        state.listeners.set(name, listener);
+    }
+}
+function clearElementBindings(element) {
+    const state = states.get(element);
+    if (!state)
+        return;
+    let hasError = false;
+    let firstError;
+    for (const [name, listener] of state.listeners) {
+        try {
+            element.removeEventListener(name, listener);
         }
-        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);
+        catch (error) {
+            if (!hasError)
+                firstError = error;
+            hasError = true;
         }
-        const renderer = (componentRenderers[node.type] ?? componentRenderers._default);
-        const el = renderer(node, resolvedProps, isMobile, options.responsive);
-        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';
+    }
+    state.listeners.clear();
+    states.delete(element);
+    if (hasError)
+        throw firstError;
+}
+function clearElementBindingsIn(root) {
+    let hasError = false;
+    let firstError;
+    const clear = (element) => {
+        try {
+            clearElementBindings(element);
         }
-        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;
-                }
-            }));
+        catch (error) {
+            if (!hasError)
+                firstError = error;
+            hasError = true;
         }
-        if (node.events && !isDisabled) {
-            for (const [eventName, eventValue] of Object.entries(node.events)) {
-                if (!eventValue || !resolveActionRef(eventValue, schemaActions)) {
-                    continue;
+    };
+    clear(root);
+    root.querySelectorAll('*').forEach(clear);
+    if (hasError)
+        throw firstError;
+}
+
+let unserializableFingerprint = 0;
+function nextUnserializableFingerprint() {
+    unserializableFingerprint += 1;
+    return `__unserializable__${unserializableFingerprint}`;
+}
+function serializeJsonLike(value, ancestors) {
+    if (value === null)
+        return 'null';
+    switch (typeof value) {
+        case 'string':
+            return JSON.stringify(value);
+        case 'boolean':
+            return value ? 'true' : 'false';
+        case 'number':
+            if (!Number.isFinite(value))
+                throw new TypeError('Non-finite number');
+            return JSON.stringify(value);
+        case 'object':
+            break;
+        default:
+            throw new TypeError('Unsupported JSON value');
+    }
+    if (ancestors.has(value))
+        throw new TypeError('Circular JSON value');
+    ancestors.add(value);
+    try {
+        if (Array.isArray(value)) {
+            if (Object.getPrototypeOf(value) !== Array.prototype) {
+                throw new TypeError('Unsupported array prototype');
+            }
+            const ownKeys = Reflect.ownKeys(value);
+            const expectedKeys = new Set(['length']);
+            for (let index = 0; index < value.length; index += 1) {
+                expectedKeys.add(String(index));
+            }
+            if (ownKeys.some(key => typeof key !== 'string' || !expectedKeys.has(key))
+                || ownKeys.length !== expectedKeys.size) {
+                throw new TypeError('Unsupported array shape');
+            }
+            const values = [];
+            for (let index = 0; index < value.length; index += 1) {
+                const descriptor = Object.getOwnPropertyDescriptor(value, String(index));
+                if (!descriptor?.enumerable || !('value' in descriptor)) {
+                    throw new TypeError('Unsupported array item');
                 }
-                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);
-                }));
+                values.push(serializeJsonLike(descriptor.value, ancestors));
             }
+            return `[${values.join(',')}]`;
         }
-        if (node.lifecycle) {
-            lifecycleIds.add(node.id);
+        const prototype = Object.getPrototypeOf(value);
+        if (prototype !== Object.prototype && prototype !== null) {
+            throw new TypeError('Unsupported object prototype');
         }
-        const renderChild = (child) => renderNode(child, renderVariables, lifecycleIds);
-        const childrenMap = {};
-        for (const child of node.children) {
-            childrenMap[child.id] = child;
+        const ownKeys = Reflect.ownKeys(value);
+        if (ownKeys.some(key => typeof key !== 'string')) {
+            throw new TypeError('Unsupported symbol key');
         }
-        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));
+        const entries = ownKeys.sort().map(key => {
+            const descriptor = Object.getOwnPropertyDescriptor(value, key);
+            if (!descriptor?.enumerable || !('value' in descriptor)) {
+                throw new TypeError('Unsupported object property');
             }
+            return `${JSON.stringify(key)}:${serializeJsonLike(descriptor.value, ancestors)}`;
+        });
+        return `{${entries.join(',')}}`;
+    }
+    finally {
+        ancestors.delete(value);
+    }
+}
+function stableFingerprint(value) {
+    try {
+        return serializeJsonLike(value, new Set());
+    }
+    catch {
+        return nextUnserializableFingerprint();
+    }
+}
+function disposeWithoutThrow(mounted, hooks) {
+    try {
+        hooks.dispose(mounted);
+    }
+    catch {
+        // DOM ownership has already been decided; cleanup errors cannot change it.
+    }
+}
+function reportUnreconciled(hooks, error) {
+    try {
+        hooks.onUnreconciled?.(error);
+    }
+    catch {
+        // Reporting cannot change which DOM tree is live.
+    }
+}
+function replaceIncrementalNode(current, next, hooks) {
+    const parent = current.element.parentNode;
+    if (!parent) {
+        reportUnreconciled(hooks);
+        return current;
+    }
+    let replacement;
+    try {
+        replacement = hooks.mountReplacement(next);
+    }
+    catch (error) {
+        reportUnreconciled(hooks, error);
+        return current;
+    }
+    if (replacement.element === current.element
+        || replacement.element.parentNode !== null) {
+        reportUnreconciled(hooks);
+        return current;
+    }
+    let adopted = false;
+    let adoptionError;
+    try {
+        parent.replaceChild(replacement.element, current.element);
+        adopted = replacement.element.parentNode === parent
+            && current.element.parentNode !== parent;
+    }
+    catch (error) {
+        adoptionError = error;
+        adopted = replacement.element.parentNode === parent
+            && current.element.parentNode !== parent;
+    }
+    if (!adopted) {
+        if (replacement.element.parentNode === null) {
+            disposeWithoutThrow(replacement, hooks);
+        }
+        reportUnreconciled(hooks, adoptionError);
+        return current;
+    }
+    disposeWithoutThrow(current, hooks);
+    return replacement;
+}
+function reconcileIncrementalNode(current, next, hooks) {
+    const parent = current.element.parentNode;
+    const sameChildren = current.children.length === next.children.length
+        && current.children.every((child, index) => (child.occurrenceKey === next.children[index].occurrenceKey));
+    let decision = 'replace';
+    if (sameChildren) {
+        try {
+            decision = hooks.decide(current, next);
+        }
+        catch {
+            return replaceIncrementalNode(current, next, hooks);
+        }
+        if (current.element.parentNode !== parent) {
+            reportUnreconciled(hooks);
+            return current;
+        }
+    }
+    if (decision === 'replace') {
+        return replaceIncrementalNode(current, next, hooks);
+    }
+    if (decision === 'update') {
+        try {
+            hooks.update(current, next);
+        }
+        catch {
+            return replaceIncrementalNode(current, next, hooks);
+        }
+        if (current.element.parentNode !== parent) {
+            reportUnreconciled(hooks);
+            return current;
+        }
+    }
+    try {
+        hooks.syncBindings(current, next);
+    }
+    catch {
+        return replaceIncrementalNode(current, next, hooks);
+    }
+    if (current.element.parentNode !== parent) {
+        reportUnreconciled(hooks);
+        return current;
+    }
+    const children = current.children.map((child, index) => (reconcileIncrementalNode(child, next.children[index], hooks)));
+    return { ...next, element: current.element, children };
+}
+
+const CARD_NODE_SELECTOR = '[data-card-id][data-card-type]';
+const FOCUS_TARGET_SELECTOR = [
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'button:not([disabled])',
+    '[contenteditable="true"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Add logical node access to one rendered card without depending on whether
+ * its renderer retains or replaces DOM elements between updates.
+ */
+function createCardNodeAccess(container) {
+    const handles = new Map();
+    const listeners = new Set();
+    let focusedId = null;
+    let focusSyncScheduled = false;
+    let observing = false;
+    let observationEpoch = 0;
+    let observer = null;
+    let disposed = false;
+    const resolveElement = (id) => {
+        if (disposed)
+            return null;
+        return Array.from(container.querySelectorAll(CARD_NODE_SELECTOR)).find(element => element.getAttribute('data-card-id') === id) ?? null;
+    };
+    const getNode = (id) => {
+        const existing = handles.get(id);
+        if (existing)
+            return existing;
+        const handle = {
+            id,
+            get type() {
+                return resolveElement(id)?.getAttribute('data-card-type') ?? null;
+            },
+            get current() {
+                return resolveElement(id);
+            },
+            getRect() {
+                return resolveElement(id)?.getBoundingClientRect() ?? null;
+            },
+            focus(options) {
+                const element = resolveElement(id);
+                if (!element || element.hasAttribute('data-disabled'))
+                    return false;
+                const target = element.shadowRoot
+                    ?.querySelector(FOCUS_TARGET_SELECTOR) ?? element;
+                target.focus(options);
+                return document.activeElement === element
+                    || element.shadowRoot?.activeElement != null;
+            },
+            blur() {
+                const element = resolveElement(id);
+                if (!element)
+                    return false;
+                const active = element.shadowRoot?.activeElement;
+                if (active instanceof HTMLElement) {
+                    active.blur();
+                }
+                else {
+                    element.blur();
+                }
+                return true;
+            },
+            scrollIntoView(options) {
+                const element = resolveElement(id);
+                if (!element || typeof element.scrollIntoView !== 'function') {
+                    return false;
+                }
+                element.scrollIntoView(options);
+                return true;
+            },
+        };
+        handles.set(id, handle);
+        return handle;
+    };
+    const resolveFocusedId = () => {
+        let active = document.activeElement;
+        if (!active || !container.contains(active))
+            return null;
+        while (active) {
+            if (active instanceof HTMLElement
+                && active.matches(CARD_NODE_SELECTOR)) {
+                return active.getAttribute('data-card-id');
+            }
+            active = active.shadowRoot?.activeElement ?? null;
+        }
+        return null;
+    };
+    const syncFocus = () => {
+        if (disposed || !observing)
+            return;
+        const nextId = resolveFocusedId();
+        if (nextId === focusedId)
+            return;
+        const previousNode = focusedId ? getNode(focusedId) : null;
+        const node = nextId ? getNode(nextId) : null;
+        focusedId = nextId;
+        for (const listener of [...listeners]) {
+            try {
+                listener({ node, previousNode });
+            }
+            catch (error) {
+                console.error('[CardInstance] focus-change listener failed', error);
+            }
+        }
+    };
+    const scheduleFocusSync = () => {
+        if (disposed || !observing || focusSyncScheduled)
+            return;
+        focusSyncScheduled = true;
+        const scheduledEpoch = observationEpoch;
+        queueMicrotask(() => {
+            if (scheduledEpoch !== observationEpoch)
+                return;
+            focusSyncScheduled = false;
+            syncFocus();
+        });
+    };
+    const startObserving = () => {
+        if (disposed || observing)
+            return;
+        observing = true;
+        observationEpoch += 1;
+        focusedId = resolveFocusedId();
+        container.addEventListener('focusin', scheduleFocusSync, true);
+        container.addEventListener('focusout', scheduleFocusSync, true);
+        if (typeof MutationObserver !== 'undefined') {
+            observer ?? (observer = new MutationObserver(scheduleFocusSync));
+            observer.observe(container, { childList: true, subtree: true });
+        }
+    };
+    const stopObserving = () => {
+        if (!observing)
+            return;
+        observing = false;
+        observationEpoch += 1;
+        focusSyncScheduled = false;
+        const cleanupSteps = [
+            () => container.removeEventListener('focusin', scheduleFocusSync, true),
+            () => container.removeEventListener('focusout', scheduleFocusSync, true),
+            () => observer?.disconnect(),
+        ];
+        for (const cleanup of cleanupSteps) {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('[CardInstance] Focus observation cleanup failed', error);
+            }
+        }
+        focusedId = null;
+    };
+    return {
+        getNode,
+        onFocusChange(listener) {
+            if (disposed)
+                return () => { };
+            listeners.add(listener);
+            if (listeners.size === 1)
+                startObserving();
+            let subscribed = true;
+            return () => {
+                if (!subscribed)
+                    return;
+                subscribed = false;
+                listeners.delete(listener);
+                if (listeners.size === 0)
+                    stopObserving();
+            };
+        },
+        dispose() {
+            if (disposed)
+                return;
+            stopObserving();
+            disposed = true;
+            listeners.clear();
+            handles.clear();
+        },
+    };
+}
+
+const FORCE_REPLACE = Symbol('bound-force-replace');
+/**
+ * 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 nodeAccess = createCardNodeAccess(container);
+    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 currentMountedTree = null;
+    let lastPublishedVariables = cloneJsonData(variables);
+    let revision = 0;
+    let disposed = false;
+    let disposeRequested = false;
+    let publishing = false;
+    const isMobile = options.isMobile === true;
+    let actionQueue = Promise.resolve();
+    let queuedActionCount = 0;
+    let lifecycleQueue = Promise.resolve();
+    const repeatIdentityCountCache = new WeakMap();
+    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 childOccurrenceKey(parentKey, id, sameIdOrdinal) {
+        return `${parentKey}/${encodeURIComponent(id)}#${sameIdOrdinal}`;
+    }
+    function isNodeDisabled(node, renderVariables) {
+        if (!node.directives?.disabled)
+            return false;
+        const resolved = resolveNodeValue(node.directives.disabled, node, renderVariables);
+        return resolved === true || resolved === 'true' || resolved === 1;
+    }
+    function nodeBindingFingerprint(node, resolvedProps, disabled) {
+        const binding = { disabled };
+        if (resolvedProps?.variableKey !== undefined) {
+            binding.variableKey = resolvedProps.variableKey;
+        }
+        if (!disabled && node.events !== undefined)
+            binding.events = node.events;
+        return stableFingerprint(binding);
+    }
+    function resolveBoundMetadata(node, occurrenceKey, renderVariables) {
+        const visible = isVisible(node, renderVariables);
+        const rendererToken = componentRenderers[node.type]
+            ?? componentRenderers._default;
+        if (!visible) {
+            return {
+                occurrenceKey,
+                node,
+                nodeId: node.id,
+                nodeType: node.type,
+                rendererToken,
+                visible: false,
+                disabled: false,
+                resolvedProps: null,
+                propsFingerprint: stableFingerprint(null),
+                layoutFingerprint: stableFingerprint(null),
+                bindingFingerprint: stableFingerprint(null),
+            };
+        }
+        const resolvedProps = resolveNodeProps(node, renderVariables);
+        const disabled = isNodeDisabled(node, renderVariables);
+        return {
+            occurrenceKey,
+            node,
+            nodeId: node.id,
+            nodeType: node.type,
+            rendererToken,
+            visible: true,
+            disabled,
+            resolvedProps,
+            propsFingerprint: stableFingerprint(resolvedProps),
+            layoutFingerprint: stableFingerprint(getSlotLayoutFingerprintInput(resolvedProps, node.children, child => resolveNodeProps(child, renderVariables))),
+            bindingFingerprint: nodeBindingFingerprint(node, resolvedProps, disabled),
+        };
+    }
+    function applyDisabledState(element, disabled) {
+        if (!disabled)
+            return;
+        element.setAttribute('data-disabled', 'true');
+        element.style.background = '#F5F5F5';
+        element.style.color = '#C0C0C0';
+        element.style.setProperty('--card-disabled-color', '#C0C0C0');
+        element.style.pointerEvents = 'none';
+        element.style.cursor = 'default';
+    }
+    function applyDisabledDescendants(element, disabled) {
+        if (!disabled)
+            return;
+        element.querySelectorAll('*').forEach((child) => {
+            const htmlChild = child;
+            htmlChild.setAttribute('data-disabled', 'true');
+            htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
+        });
+    }
+    function disposeBoundElement(element) {
+        const cleanupSteps = [
+            () => clearSlotOwnerBehaviorsIn(element),
+            () => clearSlotItemPresentationsIn(element),
+            () => clearElementBindingsIn(element),
+            () => disposeChartsIn(element),
+        ];
+        for (const cleanup of cleanupSteps) {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('[renderCard] Bound element cleanup failed', error);
+            }
+        }
+    }
+    function disposeUncoveredBoundBranches(current, coverageRoot) {
+        for (const child of current.children) {
+            if (coverageRoot.contains(child.element)) {
+                disposeUncoveredBoundBranches(child, coverageRoot);
+            }
+            else {
+                disposeBoundSubtree(child);
+            }
+        }
+    }
+    function disposeBoundSubtree(current) {
+        disposeBoundElement(current.element);
+        disposeUncoveredBoundBranches(current, current.element);
+    }
+    function disposeBoundBranchesOutsideContainer(current, disposedCoverage = null) {
+        if (container.contains(current.element)) {
+            for (const child of current.children) {
+                disposeBoundBranchesOutsideContainer(child);
+            }
+            return;
+        }
+        let nextCoverage = disposedCoverage;
+        if (!disposedCoverage?.contains(current.element)) {
+            try {
+                disposeBoundElement(current.element);
+                nextCoverage = current.element;
+            }
+            catch {
+                nextCoverage = null;
+            }
+        }
+        for (const child of current.children) {
+            disposeBoundBranchesOutsideContainer(child, nextCoverage);
+        }
+    }
+    function disposeBoundSubtreeWithoutThrow(current) {
+        try {
+            disposeBoundSubtree(current);
+        }
+        catch {
+            // Cleanup cannot change which candidate owns the live DOM.
+        }
+    }
+    function mountBoundSubtree(node, occurrenceKey, renderVariables) {
+        const metadata = resolveBoundMetadata(node, occurrenceKey, renderVariables);
+        if (!metadata.visible) {
+            const placeholder = document.createElement('div');
+            placeholder.style.display = 'none';
+            placeholder.setAttribute('data-card-id', node.id);
+            return { ...metadata, element: placeholder, children: [] };
+        }
+        const renderer = metadata.rendererToken;
+        const element = renderer(node, metadata.resolvedProps, isMobile, options.responsive);
+        const children = [];
+        try {
+            applyDisabledState(element, metadata.disabled);
+            const sameIdOrdinals = new Map();
+            const renderChild = (child) => {
+                const sameIdOrdinal = sameIdOrdinals.get(child.id) ?? 0;
+                sameIdOrdinals.set(child.id, sameIdOrdinal + 1);
+                const mounted = mountBoundSubtree(child, childOccurrenceKey(occurrenceKey, child.id, sameIdOrdinal), renderVariables);
+                children.push(mounted);
+                return mounted.element;
+            };
+            const childrenMap = {};
+            for (const child of node.children)
+                childrenMap[child.id] = child;
+            const layoutApplied = renderSlotLayout(element, node.children, metadata.resolvedProps, child => renderChild(child), childrenMap, createPassiveActionContext(renderVariables), child => resolveNodeProps(child, renderVariables));
+            if (!layoutApplied) {
+                for (const child of node.children) {
+                    element.appendChild(renderChild(child));
+                }
+            }
+            applyDisabledDescendants(element, metadata.disabled);
+            applyResponsiveStyles(element, createResponsiveContext(isMobile, options.responsive));
+            return { ...metadata, element, children };
+        }
+        catch (error) {
+            disposeBoundSubtreeWithoutThrow({ ...metadata, element, children });
+            throw error;
+        }
+    }
+    function syncBoundBindings(element, node) {
+        const events = [];
+        if (node.visible && !node.disabled && node.node.events) {
+            const repeatTargetFingerprint = getRepeatTargetFingerprint(node.node);
+            for (const [schemaEvent, eventValue] of Object.entries(node.node.events)) {
+                if (!eventValue || !resolveActionRef(eventValue, schemaActions)) {
+                    continue;
+                }
+                const domEvent = EVENT_MAP[schemaEvent] ?? schemaEvent;
+                events.push({
+                    schemaEvent,
+                    domEvent,
+                    ownsValueEvent: ((domEvent === 'input' || domEvent === 'change')
+                        && VALUE_CONTROL_TYPES$1.has(node.nodeType)),
+                    dispatch: (event) => {
+                        const detail = event instanceof CustomEvent && event.detail != null
+                            ? event.detail
+                            : undefined;
+                        enqueueBoundEvent(node.nodeId, schemaEvent, detail, repeatTargetFingerprint);
+                    },
+                });
+            }
+        }
+        const variableKey = node.resolvedProps?.variableKey;
+        syncElementBindings(element, {
+            variableKey: typeof variableKey === 'string' ? variableKey : undefined,
+            writeVariable: (key, value) => {
+                if (disposed || publishing || !container.contains(element))
+                    return;
+                variables[key] = value;
+                revision += 1;
+            },
+            events,
+            isActive: () => (!disposed
+                && !publishing
+                && container.contains(element)),
+        });
+    }
+    function syncMountedBindings(current) {
+        syncBoundBindings(current.element, current);
+        for (const child of current.children)
+            syncMountedBindings(child);
+    }
+    function collectMountedOccurrences(current, occurrences) {
+        occurrences.set(current.occurrenceKey, current);
+        for (const child of current.children) {
+            collectMountedOccurrences(child, occurrences);
+        }
+    }
+    function prepareBoundNode(node, occurrenceKey, renderVariables, forcedOwnerIds, current) {
+        const metadata = resolveBoundMetadata(node, occurrenceKey, renderVariables);
+        const forceReplace = forcedOwnerIds.has(node.id);
+        if (!metadata.visible || forceReplace) {
+            return {
+                ...metadata,
+                ...(forceReplace ? { [FORCE_REPLACE]: true } : {}),
+                children: [],
+            };
+        }
+        if (!current)
+            return { ...metadata, children: [] };
+        const nextChildrenById = new Map();
+        for (const child of node.children) {
+            const matching = nextChildrenById.get(child.id) ?? [];
+            matching.push(child);
+            nextChildrenById.set(child.id, matching);
+        }
+        const nextChildOrdinals = new Map();
+        const children = [];
+        for (const currentChild of current.children) {
+            const matching = nextChildrenById.get(currentChild.nodeId);
+            if (!matching?.length) {
+                return { ...metadata, [FORCE_REPLACE]: true, children: [] };
+            }
+            const ordinal = nextChildOrdinals.get(currentChild.nodeId) ?? 0;
+            nextChildOrdinals.set(currentChild.nodeId, ordinal + 1);
+            const child = matching[Math.min(ordinal, matching.length - 1)];
+            children.push(prepareBoundNode(child, currentChild.occurrenceKey, renderVariables, forcedOwnerIds, currentChild));
+        }
+        return {
+            ...metadata,
+            children,
+        };
+    }
+    function decideBoundUpdate(current, next) {
+        if (next[FORCE_REPLACE]
+            || current.occurrenceKey !== next.occurrenceKey
+            || current.nodeId !== next.nodeId
+            || current.nodeType !== next.nodeType
+            || current.rendererToken !== next.rendererToken
+            || current.visible !== next.visible
+            || current.disabled !== next.disabled
+            || current.layoutFingerprint !== next.layoutFingerprint) {
+            return 'replace';
+        }
+        if (current.propsFingerprint === next.propsFingerprint)
+            return 'retain';
+        return (current.element instanceof BaseElement
+            || current.rendererToken === componentRenderers._default) ? 'update' : 'replace';
+    }
+    function updateBoundNode(current, next) {
+        const element = current.element;
+        if (element instanceof BaseElement) {
+            updateSlotItemShellPresentation(element, () => {
+                element.updateProps(next.resolvedProps, isMobile, options.responsive);
+                applyResponsiveStyles(element, createResponsiveContext(isMobile, options.responsive));
+            }, getSlotHostPresentationOwnership(next.resolvedProps));
+            return;
+        }
+        if (current.rendererToken !== componentRenderers._default) {
+            throw new Error('[renderCard] Bound node cannot update in place');
+        }
+        const previous = componentRenderers._default(current.node, current.resolvedProps, isMobile, options.responsive);
+        const desired = componentRenderers._default(next.node, next.resolvedProps, isMobile, options.responsive);
+        applyDisabledState(previous, current.disabled);
+        applyDisabledState(desired, next.disabled);
+        const hostOwnership = getSlotHostPresentationOwnership(next.resolvedProps);
+        updateSlotItemShellPresentation(element, () => {
+            patchElementShellPresentation(element, previous, desired, hostOwnership, getSlotItemPresentationOwnership(element));
+        }, hostOwnership);
+    }
+    function collectChangedPointers(before, after, path = '') {
+        if (Object.is(before, after))
+            return [];
+        if (before === null
+            || after === null
+            || typeof before !== 'object'
+            || typeof after !== 'object') {
+            return [path];
+        }
+        if (Array.isArray(before) || Array.isArray(after)) {
+            if (!Array.isArray(before) || !Array.isArray(after))
+                return [path];
+            if (before.length !== after.length)
+                return [path];
+        }
+        const left = before;
+        const right = after;
+        const keys = new Set([...Object.keys(left), ...Object.keys(right)]);
+        const changed = [];
+        for (const key of keys) {
+            const token = key.replace(/~/g, '~0').replace(/\//g, '~1');
+            changed.push(...collectChangedPointers(left[key], right[key], `${path}/${token}`));
+        }
+        return changed;
+    }
+    function selectForcedRepeatOwnerIds(before, draft) {
+        if (currentMaterialized.unresolvedRepeatOwners.size > 0) {
+            return new Set([currentMaterialized.root.id]);
+        }
+        const selectedKeys = new Set();
+        for (const pointer of collectChangedPointers(before, draft)) {
+            for (const owner of findAffectedRepeatOwners(currentMaterialized, pointer)) {
+                selectedKeys.add(owner.key);
+            }
+        }
+        for (const key of [...selectedKeys]) {
+            let parentKey = currentMaterialized.repeatOwners.get(key)?.parentKey;
+            while (parentKey) {
+                if (selectedKeys.has(parentKey)) {
+                    selectedKeys.delete(key);
+                    break;
+                }
+                parentKey = currentMaterialized.repeatOwners.get(parentKey)?.parentKey;
+            }
+        }
+        return new Set([...selectedKeys].flatMap((key) => {
+            const id = currentMaterialized.repeatOwners.get(key)?.runtimeOwnerId;
+            return id ? [id] : [];
+        }));
+    }
+    function collectMountedLifecycleIds(root) {
+        const ids = new Set();
+        const visit = (node) => {
+            if (!node.visible)
+                return;
+            if (node.node.lifecycle)
+                ids.add(node.nodeId);
+            for (const child of node.children)
+                visit(child);
+        };
+        if (root)
+            visit(root);
+        return ids;
+    }
+    function prepareReplacementRoots(current, next, draft, replacements) {
+        const sameChildren = current.children.length === next.children.length
+            && current.children.every((child, index) => (child.occurrenceKey === next.children[index].occurrenceKey));
+        const decision = sameChildren
+            ? decideBoundUpdate(current, next)
+            : 'replace';
+        if (decision === 'replace'
+            || (decision === 'update' && next.children.length === 0)) {
+            replacements.set(next.occurrenceKey, mountBoundSubtree(next.node, next.occurrenceKey, draft));
+        }
+        if (decision === 'replace')
+            return;
+        for (let index = 0; index < next.children.length; index += 1) {
+            prepareReplacementRoots(current.children[index], next.children[index], draft, replacements);
         }
-        if (isDisabled) {
-            el.querySelectorAll('*').forEach((child) => {
-                const htmlChild = child;
-                htmlChild.setAttribute('data-disabled', 'true');
-                htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
-            });
-        }
-        applyResponsiveStyles(el, createResponsiveContext(isMobile, options.responsive));
-        return el;
     }
-    function prepareCandidate(draft) {
+    function prepareIncrementalCandidate(before, draft) {
         const materialized = materializeCard(schema, draft);
-        const lifecycleIds = new Set();
-        const dom = renderNode(materialized.root, draft, lifecycleIds);
-        return { materialized, dom, lifecycleIds };
+        const forcedOwnerIds = currentMountedTree
+            ? materialized.unresolvedRepeatOwners.size > 0
+                ? new Set([materialized.root.id])
+                : selectForcedRepeatOwnerIds(before, draft)
+            : new Set();
+        const preparedRoot = prepareBoundNode(materialized.root, `${materialized.root.id}#0`, draft, forcedOwnerIds, currentMountedTree);
+        const replacementRoots = new Map();
+        try {
+            if (currentMountedTree) {
+                prepareReplacementRoots(currentMountedTree, preparedRoot, draft, replacementRoots);
+            }
+            else {
+                replacementRoots.set(preparedRoot.occurrenceKey, mountBoundSubtree(materialized.root, preparedRoot.occurrenceKey, draft));
+            }
+            return {
+                materialized,
+                preparedRoot,
+                replacementRoots,
+                autoFocusIds: currentMountedTree
+                    ? collectAutoFocusRevealIds(currentMaterialized, materialized, draft)
+                    : new Set(),
+            };
+        }
+        catch (error) {
+            for (const replacement of replacementRoots.values()) {
+                disposeBoundSubtreeWithoutThrow(replacement);
+            }
+            throw error;
+        }
     }
     function indexNodes(root) {
         const nodes = new Map();
@@ -7880,6 +9522,93 @@ function renderBoundCard(container, schema, options) {
         visit(root);
         return nodes;
     }
+    function getRepeatTargetFingerprint(node) {
+        const identityToken = (key, value) => {
+            if (value === null)
+                return `${key}:null`;
+            if (typeof value === 'string')
+                return `${key}:string:${value}`;
+            if (typeof value === 'boolean')
+                return `${key}:boolean:${value}`;
+            return `${key}:number:${Object.is(value, -0) ? '-0' : String(value)}`;
+        };
+        const identityCountsFor = (root) => {
+            const cached = repeatIdentityCountCache.get(root);
+            if (cached)
+                return cached;
+            const counts = new Map();
+            const visited = new Set();
+            const visit = (candidate) => {
+                if (candidate === null || typeof candidate !== 'object')
+                    return;
+                if (visited.has(candidate))
+                    return;
+                visited.add(candidate);
+                if (!Array.isArray(candidate)) {
+                    for (const key of ['id', 'key']) {
+                        const descriptor = Object.getOwnPropertyDescriptor(candidate, key);
+                        if (!descriptor || !('value' in descriptor))
+                            continue;
+                        const identity = descriptor.value;
+                        if (identity === null
+                            || (typeof identity !== 'string'
+                                && typeof identity !== 'number'
+                                && typeof identity !== 'boolean')) {
+                            continue;
+                        }
+                        const token = identityToken(key, identity);
+                        counts.set(token, (counts.get(token) ?? 0) + 1);
+                    }
+                }
+                for (const nested of Object.values(candidate))
+                    visit(nested);
+            };
+            visit(root);
+            repeatIdentityCountCache.set(root, counts);
+            return counts;
+        };
+        const identityFor = (value, root) => {
+            if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+                return value;
+            }
+            const record = value;
+            for (const key of ['id', 'key']) {
+                const descriptor = Object.getOwnPropertyDescriptor(record, key);
+                if (!descriptor || !('value' in descriptor))
+                    continue;
+                const identity = descriptor.value;
+                if (identity === null
+                    || (typeof identity !== 'string'
+                        && typeof identity !== 'number'
+                        && typeof identity !== 'boolean')) {
+                    continue;
+                }
+                const matches = identityCountsFor(root).get(identityToken(key, identity)) ?? 0;
+                if (matches === 1)
+                    return { [key]: identity };
+            }
+            return value;
+        };
+        const targets = [];
+        let scope = node.scope;
+        while (scope) {
+            const scopeRoot = scope.root;
+            const localEntries = Object.entries(scope.locals);
+            if (localEntries.length > 0) {
+                targets.push(Object.fromEntries(localEntries.map(([key, value]) => [
+                    key,
+                    identityFor(value, scopeRoot),
+                ])));
+            }
+            else if (scope.bindingDialect === 'a2ui' && scope.dataPath !== '') {
+                targets.push(identityFor(resolveA2UIDeep({ path: '' }, scopeRoot, scope.dataPath), scopeRoot));
+            }
+            scope = scope.parent;
+        }
+        if (targets.length === 0)
+            return undefined;
+        return stableFingerprint({ sourceId: node.sourceId, targets });
+    }
     function selectLifecycleNodes(materialized, ids) {
         const indexed = indexNodes(materialized.root);
         const selected = new Map();
@@ -7890,26 +9619,80 @@ function renderBoundCard(container, schema, options) {
         }
         return selected;
     }
-    function createLifecycleActionContext(node) {
+    function isVisible(node, renderVariables) {
+        if (!node.directives?.visible)
+            return true;
+        const resolved = resolveNodeValue(node.directives.visible, node, renderVariables);
+        return !(resolved === false
+            || resolved === 'false'
+            || resolved === ''
+            || resolved === 0);
+    }
+    function collectAutoFocusRevealIds(previous, next, draft) {
+        const previousNodes = indexNodes(previous.root);
+        const requested = new Set();
+        const visit = (nextNode, previousParentVisible, nextParentVisible) => {
+            const previousNode = previousNodes.get(nextNode.id);
+            const wasVisible = Boolean(previousNode
+                && previousParentVisible
+                && isVisible(previousNode, variables));
+            const nowVisible = nextParentVisible && isVisible(nextNode, draft);
+            if (nextNode.type === 'Input'
+                && !wasVisible
+                && nowVisible
+                && resolveNodeProps(nextNode, draft).autoFocus === true) {
+                requested.add(nextNode.id);
+            }
+            nextNode.children.forEach(child => visit(child, wasVisible, nowVisible));
+        };
+        visit(next.root, true, true);
+        return requested;
+    }
+    function applyAutoFocus(candidate) {
+        if (candidate.autoFocusIds.size === 0)
+            return;
+        const inputs = container.querySelectorAll(CardInput.is);
+        for (const input of inputs) {
+            const id = input.getAttribute('data-card-id');
+            if (id && candidate.autoFocusIds.has(id) && input.requestAutoFocus()) {
+                break;
+            }
+        }
+    }
+    function createLifecycleActionSession(node) {
+        const lifecycleVariables = cloneJsonData(variables);
+        const rebaseScope = (scope) => ({
+            ...scope,
+            root: lifecycleVariables,
+            parent: scope.parent ? rebaseScope(scope.parent) : undefined,
+        });
+        const lifecycleScope = rebaseScope(node.scope);
+        let authorityRevision = revision;
         const writeLiveVariable = (key, value, silent = false) => {
-            if (disposed)
+            const nextValue = cloneJsonData(value);
+            writeDraftVariable(lifecycleVariables, key, nextValue);
+            repeatIdentityCountCache.delete(lifecycleVariables);
+            if (disposed || authorityRevision !== revision)
                 return;
             if (silent) {
-                writeDraftVariable(variables, key, cloneJsonData(value));
+                writeDraftVariable(variables, key, nextValue);
                 return;
             }
-            updateVariables({ [key]: value });
+            // Publish the complete lifecycle draft so direct additions, changes,
+            // and deletions join this explicit write in one authoritative render.
+            commitDraft(cloneJsonData(lastPublishedVariables), lifecycleVariables, authorityRevision);
+            authorityRevision = revision;
         };
-        return {
+        const context = {
             ...createWebActionContext({
                 ...options,
                 setVariable: writeLiveVariable,
                 abortSignal: abortController.signal,
             }),
-            variables,
-            expressionContext: createExpressionContext(node.scope),
+            variables: lifecycleVariables,
+            expressionContext: createExpressionContext(lifecycleScope),
             parameterResolver: node.bindingDialect === 'a2ui'
-                ? createA2UIParameterResolver(variables, node.dataPath)
+                ? createA2UIParameterResolver(lifecycleVariables, node.dataPath)
                 : undefined,
             variableWriter: (key, value, options) => {
                 writeLiveVariable(key, value, options.silent);
@@ -7917,6 +9700,20 @@ function renderBoundCard(container, schema, options) {
             botId: options.botId,
             inflightRequests,
         };
+        return {
+            context,
+            publishDirectMutations() {
+                if (disposed
+                    || authorityRevision !== revision
+                    || !hasVariableChanges(variables, lifecycleVariables)) {
+                    return;
+                }
+                // Direct custom-handler mutations historically updated the live
+                // variables without rendering. Preserve that behavior while keeping
+                // a stale async lifecycle detached after a newer revision wins.
+                replaceRootContents(variables, lifecycleVariables);
+            },
+        };
     }
     function reconcileLifecycles(nextNodes) {
         const removed = [...activeLifecycleNodes.entries()]
@@ -7929,45 +9726,263 @@ function renderBoundCard(container, schema, options) {
         }
         lifecycleQueue = lifecycleQueue.then(async () => {
             for (const [id, node] of removed) {
-                await lifecycleManager.destroy(id, createLifecycleActionContext(node));
-                lifecycleManager.unregister(id);
+                if (disposed)
+                    return;
+                const session = createLifecycleActionSession(node);
+                try {
+                    await lifecycleManager.destroy(id, session.context);
+                    session.publishDirectMutations();
+                }
+                catch (error) {
+                    console.error('[renderCard] Bound lifecycle action failed', error);
+                }
+                finally {
+                    lifecycleManager.unregister(id);
+                }
             }
-            if (disposed)
-                return;
             for (const [id, node] of added) {
+                if (disposed)
+                    return;
                 lifecycleManager.register(id, node.lifecycle);
-                await lifecycleManager.mount(id, createLifecycleActionContext(node));
+                const session = createLifecycleActionSession(node);
+                try {
+                    await lifecycleManager.mount(id, session.context);
+                    session.publishDirectMutations();
+                }
+                catch (error) {
+                    lifecycleManager.unregister(id);
+                    console.error('[renderCard] Bound lifecycle action failed', error);
+                }
             }
         }).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 disposeCandidate(candidate) {
+        for (const replacement of candidate.replacementRoots.values()) {
+            disposeBoundSubtreeWithoutThrow(replacement);
+        }
+        candidate.replacementRoots.clear();
+    }
+    function restoreChangedSubtreeState(previous, next, scrollPositions, mediaStates) {
+        if (previous.element !== next.element) {
+            restoreScrollPositions$1(next.element, scrollPositions);
+            restoreMediaStates$1(next.element, mediaStates);
+            return;
+        }
+        if (previous.propsFingerprint !== next.propsFingerprint
+            && (next.nodeType === 'Audio' || next.nodeType === 'Video')) {
+            restoreMediaStates$1(next.element, mediaStates);
+        }
+        for (let index = 0; index < next.children.length; index += 1) {
+            const previousChild = previous.children[index];
+            const nextChild = next.children[index];
+            if (previousChild
+                && previousChild.occurrenceKey === nextChild.occurrenceKey) {
+                restoreChangedSubtreeState(previousChild, nextChild, scrollPositions, mediaStates);
+            }
+        }
+    }
+    function restoreDisabledDescendantPresentation(current) {
+        if (current.disabled) {
+            applyDisabledState(current.element, true);
+            applyDisabledDescendants(current.element, true);
+        }
+        for (const child of current.children) {
+            restoreDisabledDescendantPresentation(child);
+        }
+    }
+    function replaceContainerRoot(element, failureMessage) {
+        let adoptionThrew = false;
+        let adoptionError;
+        try {
+            container.replaceChildren(element);
+        }
+        catch (error) {
+            adoptionThrew = true;
+            adoptionError = error;
+        }
+        const adopted = (element.parentNode === container
+            && container.firstChild === element
+            && container.childNodes.length === 1);
+        if (adopted)
+            return;
+        if (adoptionThrew)
+            throw adoptionError;
+        throw new Error(failureMessage);
+    }
+    function commitIncrementalCandidate(candidate, renderVariables) {
+        const replacements = candidate.replacementRoots;
+        try {
+            if (!currentMountedTree) {
+                const initial = replacements.get(candidate.preparedRoot.occurrenceKey);
+                if (!initial) {
+                    throw new Error('[renderCard] Missing bound root candidate');
+                }
+                syncMountedBindings(initial);
+                disposeChartsIn(container);
+                replaceContainerRoot(initial.element, '[renderCard] Bound root candidate was not adopted');
+                replacements.delete(candidate.preparedRoot.occurrenceKey);
+                restoreDisabledDescendantPresentation(initial);
+                return initial;
+            }
+            const previous = currentMountedTree;
+            const replacementSources = new Map();
+            collectMountedOccurrences(previous, replacementSources);
+            const scrollPositions = captureScrollPositions$1(container);
+            const mediaStates = captureMediaStates$1(container);
+            let unreconciled = false;
+            const next = reconcileIncrementalNode(previous, candidate.preparedRoot, {
+                decide: (current, prepared) => decideBoundUpdate(current, prepared),
+                update: (current, prepared) => updateBoundNode(current, prepared),
+                mountReplacement: (prepared) => {
+                    const candidateReplacement = replacements.get(prepared.occurrenceKey);
+                    const replacement = candidateReplacement ?? mountBoundSubtree(prepared.node, prepared.occurrenceKey, renderVariables);
+                    const current = replacementSources.get(prepared.occurrenceKey);
+                    let staged = false;
+                    try {
+                        if (replacement.element.parentNode !== null) {
+                            throw new Error(`[renderCard] Bound replacement "${prepared.occurrenceKey}" is not detached`);
+                        }
+                        syncMountedBindings(replacement);
+                        if (current && replacement.element !== current.element) {
+                            transferSlotItemPresentation(current.element, replacement.element);
+                        }
+                        staged = true;
+                    }
+                    finally {
+                        if (!staged && !candidateReplacement) {
+                            disposeBoundSubtreeWithoutThrow(replacement);
+                        }
+                    }
+                    if (candidateReplacement) {
+                        replacements.delete(prepared.occurrenceKey);
+                    }
+                    return replacement;
+                },
+                dispose: disposeBoundSubtree,
+                syncBindings: () => { },
+                onUnreconciled: () => {
+                    unreconciled = true;
+                },
+            });
+            if (!unreconciled
+                && (next.element.parentNode !== container
+                    || container.firstElementChild !== next.element)) {
+                unreconciled = true;
+            }
+            if (!unreconciled) {
+                try {
+                    syncMountedBindings(next);
+                }
+                catch {
+                    unreconciled = true;
+                }
+            }
+            if (unreconciled) {
+                let emergency;
+                try {
+                    emergency = mountBoundSubtree(candidate.materialized.root, candidate.preparedRoot.occurrenceKey, renderVariables);
+                }
+                catch (error) {
+                    disposeBoundBranchesOutsideContainer(next);
+                    throw error;
+                }
+                let adopted = false;
+                try {
+                    syncMountedBindings(emergency);
+                    replaceContainerRoot(emergency.element, '[renderCard] Bound emergency root was not adopted');
+                    adopted = true;
+                }
+                finally {
+                    if (!adopted) {
+                        disposeBoundSubtreeWithoutThrow(emergency);
+                        disposeBoundBranchesOutsideContainer(next);
+                    }
+                }
+                disposeBoundSubtreeWithoutThrow(next);
+                try {
+                    restoreChangedSubtreeState(previous, emergency, scrollPositions, mediaStates);
+                }
+                catch {
+                    // Presentation restoration cannot roll back an adopted next root.
+                }
+                restoreDisabledDescendantPresentation(emergency);
+                return emergency;
+            }
+            try {
+                restoreChangedSubtreeState(previous, next, scrollPositions, mediaStates);
+            }
+            catch {
+                // Presentation restoration does not affect published data ownership.
+            }
+            restoreDisabledDescendantPresentation(next);
+            return next;
+        }
+        finally {
+            disposeCandidate(candidate);
+        }
     }
     function assertCurrentRevision(baseRevision) {
-        if (disposed || revision !== baseRevision) {
+        if (disposed || publishing || revision !== baseRevision) {
             const error = new Error('[renderCard] BOUND_TRANSACTION_CONFLICT');
             error.code = 'BOUND_TRANSACTION_CONFLICT';
             throw error;
         }
     }
-    function commitDraft(draft, candidate, baseRevision) {
+    function commitDraft(before, draft, 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);
+        const validationRoot = cloneJsonData(variables);
+        replaceRootContents(validationRoot, draft);
+        const candidate = prepareIncrementalCandidate(before, draft);
+        try {
+            assertCurrentRevision(baseRevision);
+        }
+        catch (error) {
+            disposeCandidate(candidate);
+            throw error;
+        }
+        publishing = true;
+        let publishingFailed = false;
+        let publishingError;
+        let deferredDisposeFailed = false;
+        let deferredDisposeError;
+        try {
+            const nextMounted = commitIncrementalCandidate(candidate, draft);
+            replaceRootContents(variables, draft);
+            currentMaterialized = materializeCard(schema, variables);
+            currentMountedTree = nextMounted;
+            lastPublishedVariables = cloneJsonData(variables);
+            revision += 1;
+        }
+        catch (error) {
+            publishingFailed = true;
+            publishingError = error;
+        }
+        finally {
+            publishing = false;
+            if (disposeRequested) {
+                try {
+                    disposeNow();
+                }
+                catch (error) {
+                    deferredDisposeFailed = true;
+                    deferredDisposeError = error;
+                }
+            }
+        }
+        if (publishingFailed) {
+            if (deferredDisposeFailed) {
+                console.error('[renderCard] Bound deferred dispose failed', deferredDisposeError);
+            }
+            throw publishingError;
+        }
+        if (deferredDisposeFailed)
+            throw deferredDisposeError;
+        if (disposed)
+            return;
+        reconcileLifecycles(selectLifecycleNodes(currentMaterialized, collectMountedLifecycleIds(currentMountedTree)));
+        applyAutoFocus(candidate);
     }
     function writeDraftVariable(draft, key, value) {
         Object.defineProperty(draft, String(key), {
@@ -7977,6 +9992,33 @@ function renderBoundCard(container, schema, options) {
             writable: true,
         });
     }
+    function jsonDataEqual(before, after) {
+        if (Object.is(before, after))
+            return true;
+        if (Array.isArray(before) || Array.isArray(after)) {
+            if (!Array.isArray(before) || !Array.isArray(after))
+                return false;
+            return before.length === after.length
+                && before.every((value, index) => jsonDataEqual(value, after[index]));
+        }
+        if (before === null
+            || after === null
+            || typeof before !== 'object'
+            || typeof after !== 'object') {
+            return false;
+        }
+        const beforeRecord = before;
+        const afterRecord = after;
+        const beforeKeys = Object.keys(beforeRecord);
+        const afterKeys = Object.keys(afterRecord);
+        return beforeKeys.length === afterKeys.length
+            && beforeKeys.every(key => Object.prototype.hasOwnProperty.call(afterRecord, key)
+                && jsonDataEqual(beforeRecord[key], afterRecord[key]));
+    }
+    function hasVariableChanges(before, after) {
+        const validatedAfter = cloneJsonData(after);
+        return !jsonDataEqual(before, validatedAfter);
+    }
     function createDraftActionContext(node, draft) {
         const write = (key, value) => {
             writeDraftVariable(draft, key, value);
@@ -7997,19 +10039,27 @@ function renderBoundCard(container, schema, options) {
             inflightRequests,
         };
     }
-    async function runBoundEvent(runtimeId, eventName, eventDetail) {
+    async function runBoundEvent(runtimeId, eventName, eventDetail, baseRevision, repeatTargetFingerprint) {
         if (disposed)
             return;
-        const baseRevision = revision;
-        const draft = cloneJsonData(variables);
+        assertCurrentRevision(baseRevision);
+        const transactionBefore = cloneJsonData(variables);
+        const draft = cloneJsonData(transactionBefore);
         if (eventDetail !== undefined) {
             writeDraftVariable(draft, '_event', cloneJsonData(eventDetail));
         }
+        const actionBaseline = cloneJsonData(draft);
         const freshMaterialized = materializeCard(schema, draft);
         const freshNode = indexNodes(freshMaterialized.root).get(runtimeId);
         if (!freshNode) {
+            if (repeatTargetFingerprint !== undefined)
+                return;
             throw new Error(`[renderCard] Bound runtime node "${runtimeId}" no longer exists`);
         }
+        if (repeatTargetFingerprint !== undefined
+            && getRepeatTargetFingerprint(freshNode) !== repeatTargetFingerprint) {
+            return;
+        }
         const eventValue = freshNode.events?.[eventName];
         const steps = eventValue
             ? resolveActionRef(eventValue, schemaActions)
@@ -8018,14 +10068,21 @@ function renderBoundCard(container, schema, options) {
             return;
         await runActionSteps(steps, createDraftActionContext(freshNode, draft));
         assertCurrentRevision(baseRevision);
-        const candidate = prepareCandidate(draft);
-        commitDraft(draft, candidate, baseRevision);
+        if (!hasVariableChanges(actionBaseline, draft))
+            return;
+        // The target check above may have cached identity counts before action
+        // steps changed the draft. Recount once when binding the published tree.
+        repeatIdentityCountCache.delete(draft);
+        commitDraft(cloneJsonData(lastPublishedVariables), draft, baseRevision);
     }
-    function enqueueBoundEvent(runtimeId, eventName, eventDetail) {
+    function enqueueBoundEvent(runtimeId, eventName, eventDetail, repeatTargetFingerprint) {
         if (disposed)
             return;
+        const enqueueRevision = revision;
+        const queuedBehindAnotherAction = queuedActionCount > 0;
+        queuedActionCount += 1;
         actionQueue = actionQueue
-            .then(() => runBoundEvent(runtimeId, eventName, eventDetail))
+            .then(() => runBoundEvent(runtimeId, eventName, eventDetail, queuedBehindAnotherAction ? revision : enqueueRevision, repeatTargetFingerprint))
             .catch((error) => {
             if (error
                 && typeof error === 'object'
@@ -8034,44 +10091,87 @@ function renderBoundCard(container, schema, options) {
                 return;
             }
             console.error('[renderCard] Bound action failed', error);
+        })
+            .finally(() => {
+            queuedActionCount -= 1;
         });
     }
     function updateVariables(newVariables) {
         if (disposed)
             return;
         const baseRevision = revision;
+        const before = cloneJsonData(lastPublishedVariables);
         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);
+        commitDraft(before, draft, baseRevision);
     }
-    const initialCandidate = prepareCandidate(variables);
-    currentMaterialized = initialCandidate.materialized;
-    publishDOM(initialCandidate, false);
-    return {
-        dispose() {
-            if (disposed)
-                return;
-            disposed = true;
-            abortController.abort();
+    function disposeNow() {
+        if (disposed)
+            return;
+        disposed = true;
+        disposeRequested = false;
+        nodeAccess.dispose();
+        abortController.abort();
+        if (currentMountedTree) {
+            disposeBoundSubtree(currentMountedTree);
+            currentMountedTree = null;
+        }
+        else {
             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));
+        }
+        container.replaceChildren();
+        const lifecycleNodes = [...activeLifecycleNodes.entries()];
+        activeLifecycleNodes.clear();
+        lifecycleQueue = lifecycleQueue
+            .then(async () => {
+            for (const [id, node] of lifecycleNodes) {
+                const session = createLifecycleActionSession(node);
+                try {
+                    await lifecycleManager.destroy(id, session.context);
+                    session.publishDirectMutations();
+                }
+                catch (error) {
+                    console.error('[renderCard] Bound lifecycle dispose failed', error);
+                }
+                finally {
                     lifecycleManager.unregister(id);
                 }
+            }
+            try {
                 await lifecycleManager.dispose(createPassiveActionContext(variables));
-            })
-                .catch((error) => {
+            }
+            catch (error) {
                 console.error('[renderCard] Bound lifecycle dispose failed', error);
-            });
+            }
+        })
+            .catch((error) => {
+            console.error('[renderCard] Bound lifecycle dispose failed', error);
+        });
+    }
+    const initialCandidate = prepareIncrementalCandidate(variables, variables);
+    publishing = true;
+    try {
+        currentMountedTree = commitIncrementalCandidate(initialCandidate, variables);
+        currentMaterialized = materializeCard(schema, variables);
+    }
+    finally {
+        publishing = false;
+    }
+    reconcileLifecycles(selectLifecycleNodes(currentMaterialized, collectMountedLifecycleIds(currentMountedTree)));
+    return {
+        getNode: nodeAccess.getNode,
+        onFocusChange: nodeAccess.onFocusChange,
+        dispose() {
+            if (disposed || disposeRequested)
+                return;
+            if (publishing) {
+                disposeRequested = true;
+                return;
+            }
+            disposeNow();
         },
         updateVariables,
     };
@@ -8089,7 +10189,11 @@ function captureScrollPositions$1(root) {
 function restoreScrollPositions$1(root, positions) {
     if (positions.size === 0)
         return;
-    root.querySelectorAll('[data-scroll-id]').forEach((element) => {
+    const scrollers = [];
+    if (root.matches('[data-scroll-id]'))
+        scrollers.push(root);
+    scrollers.push(...root.querySelectorAll('[data-scroll-id]'));
+    scrollers.forEach((element) => {
         const id = element.getAttribute('data-scroll-id');
         const saved = id ? positions.get(id) : undefined;
         if (saved == null)
@@ -8118,7 +10222,11 @@ function captureMediaStates$1(root) {
 function restoreMediaStates$1(root, states) {
     if (states.size === 0)
         return;
-    root.querySelectorAll('ai-card-audio, ai-card-video').forEach((element) => {
+    const mediaHosts = [];
+    if (root.matches('ai-card-audio, ai-card-video'))
+        mediaHosts.push(root);
+    mediaHosts.push(...root.querySelectorAll('ai-card-audio, ai-card-video'));
+    mediaHosts.forEach((element) => {
         const id = element.getAttribute('data-card-id');
         const snapshot = id ? states.get(id) : undefined;
         if (!snapshot)
@@ -8180,64 +10288,759 @@ function renderCard(container, schemaInput, options = {}) {
     return renderBoundCard(container, schema, options);
 }
 function renderStaticCard(container, schema, options) {
+    const nodeAccess = createCardNodeAccess(container);
     // 2. Parse into render tree
     const tree = parseSchema(schema);
     // 3. Reactive variables store (mutable copy, merged with external variables)
     let variables = { ...schema.variables, ...options.variables };
-    // 4. Create action context with setVariable wired into re-render
-    const lifecycleManager = createLifecycleManager();
+    let disposed = false;
+    let publishing = false;
+    let disposeRequested = false;
+    let hostAuthorityEpoch = 0;
+    let nextStaticEventSequence = 0;
+    const latestStaticEventWriterByKey = new Map();
+    const lifecycleRecords = new Map();
     const abortController = new AbortController();
     // Per-instance request dedup map (isolated from other cards on the page).
     const inflightRequests = new Map();
-    function buildActionContext() {
-        return {
+    function isVisible(node, renderVariables, parentVisible) {
+        if (!parentVisible)
+            return false;
+        if (!node.directives?.visible)
+            return true;
+        const visible = node.directives.visible;
+        const resolved = hasExpression(visible)
+            ? resolveExpression(visible, renderVariables)
+            : visible;
+        return !(resolved === false
+            || resolved === 'false'
+            || resolved === ''
+            || resolved === 0);
+    }
+    function collectAutoFocusRevealIds(previousVariables, nextVariables) {
+        const requested = new Set();
+        const visit = (node, previousParentVisible, nextParentVisible) => {
+            const wasVisible = isVisible(node, previousVariables, previousParentVisible);
+            const nowVisible = isVisible(node, nextVariables, nextParentVisible);
+            if (node.type === 'Input'
+                && !wasVisible
+                && nowVisible
+                && resolveDeep(node.props, nextVariables).autoFocus === true) {
+                requested.add(node.id);
+            }
+            node.children.forEach(child => visit(child, wasVisible, nowVisible));
+        };
+        visit(tree, true, true);
+        return requested;
+    }
+    function applyAutoFocus(requested) {
+        if (requested.size === 0)
+            return;
+        for (const input of container.querySelectorAll(CardInput.is)) {
+            const id = input.getAttribute('data-card-id');
+            if (id && requested.has(id) && input.requestAutoFocus())
+                break;
+        }
+    }
+    function buildActionContext(pendingAutoFocusIds, initialVariables = variables, eventSequence) {
+        const baseAuthorityEpoch = hostAuthorityEpoch;
+        let context;
+        const writeVariable = (key, value, { silent }) => {
+            let actionVariables = context.variables;
+            const latestWriter = latestStaticEventWriterByKey.get(key);
+            if (disposed
+                || publishing
+                || baseAuthorityEpoch !== hostAuthorityEpoch
+                || (eventSequence !== undefined
+                    && latestWriter !== undefined
+                    && latestWriter > eventSequence)) {
+                if (actionVariables === variables) {
+                    actionVariables = { ...actionVariables };
+                    context.variables = actionVariables;
+                }
+                actionVariables[key] = value;
+                return;
+            }
+            const previousVariables = !silent && pendingAutoFocusIds
+                ? { ...actionVariables }
+                : null;
+            const liveVariables = variables;
+            const hadLiveValue = Object.prototype.hasOwnProperty.call(liveVariables, key);
+            const previousLiveValue = liveVariables[key];
+            actionVariables[key] = value;
+            if (silent)
+                return;
+            // Event actions use a private snapshot so a later event cannot replace
+            // their `_event` detail while they await. Publish only the key written by
+            // this step, preserving concurrent actions that update different keys.
+            if (actionVariables !== variables) {
+                variables[key] = value;
+            }
+            if (previousVariables && pendingAutoFocusIds) {
+                for (const id of collectAutoFocusRevealIds(previousVariables, actionVariables)) {
+                    pendingAutoFocusIds.add(id);
+                }
+            }
+            try {
+                rerender();
+            }
+            catch (error) {
+                if (variables === liveVariables) {
+                    if (hadLiveValue)
+                        liveVariables[key] = previousLiveValue;
+                    else
+                        Reflect.deleteProperty(liveVariables, key);
+                    if (eventSequence !== undefined
+                        && latestStaticEventWriterByKey.get(key) === eventSequence) {
+                        if (latestWriter === undefined) {
+                            latestStaticEventWriterByKey.delete(key);
+                        }
+                        else {
+                            latestStaticEventWriterByKey.set(key, latestWriter);
+                        }
+                    }
+                    pendingAutoFocusIds?.clear();
+                    if (!disposed)
+                        actionContext = buildActionContext();
+                }
+                throw error;
+            }
+        };
+        context = {
             ...createWebActionContext({
                 ...options,
                 setVariable: (key, value) => {
-                    variables[key] = value;
-                    // Trigger re-render after variable change
-                    rerender();
+                    writeVariable(key, value, { silent: false});
                 },
                 abortSignal: abortController.signal,
             }),
-            variables,
+            variables: initialVariables,
+            variableWriter: writeVariable,
             botId: options.botId,
             inflightRequests,
         };
+        return context;
     }
     let actionContext = buildActionContext();
     // 5. Responsive
     const isMobile = options.isMobile === true;
     // 6. Schema-level action definitions (for string references in events)
     const schemaActions = schema.actions ?? {};
-    // 7. Render function
+    function destroyLifecycle(record) {
+        if (record.state !== 'mounted')
+            return;
+        record.state = 'destroying';
+        void runActionSteps(record.lifecycle.onDestroy ?? [], buildActionContext())
+            .catch((error) => {
+            console.error('[renderCard] Static lifecycle destroy failed', error);
+        })
+            .finally(() => {
+            record.state = 'destroyed';
+        });
+    }
+    function startLifecycleMount(id, lifecycle) {
+        if (disposed || lifecycleRecords.has(id))
+            return;
+        const record = { lifecycle, state: 'mounting' };
+        lifecycleRecords.set(id, record);
+        void runActionSteps(lifecycle.onMount ?? [], buildActionContext())
+            .then(() => {
+            record.state = 'mounted';
+            if (disposed)
+                destroyLifecycle(record);
+        })
+            .catch((error) => {
+            console.error('[renderCard] Static lifecycle mount failed', error);
+            if (disposed) {
+                record.state = 'destroyed';
+            }
+            else if (lifecycleRecords.get(id) === record) {
+                lifecycleRecords.delete(id);
+            }
+        });
+    }
+    let mountedTree = null;
+    let renderGeneration = 0;
+    function childOccurrenceKey(parentKey, id, sameIdOrdinal) {
+        return `${parentKey}/${encodeURIComponent(id)}#${sameIdOrdinal}`;
+    }
+    function resolveNodeProps(node) {
+        const resolvedProps = resolveDeep(node.props, variables);
+        if (resolvedProps.content
+            && typeof resolvedProps.content === 'object'
+            && 'type' in resolvedProps.content) {
+            resolvedProps.content = resolveExpressionValue(resolvedProps.content, variables);
+        }
+        return resolvedProps;
+    }
+    function isNodeDisabled(node) {
+        if (!node.directives?.disabled)
+            return false;
+        const disabled = node.directives.disabled;
+        const resolved = hasExpression(disabled)
+            ? resolveExpression(disabled, variables)
+            : disabled;
+        return resolved === true || resolved === 'true' || resolved === 1;
+    }
+    function nodeBindingFingerprint(node, resolvedProps, disabled) {
+        const binding = { disabled };
+        if (resolvedProps && resolvedProps.variableKey !== undefined) {
+            binding.variableKey = resolvedProps.variableKey;
+        }
+        if (!disabled && node.events !== undefined) {
+            binding.events = node.events;
+        }
+        return stableFingerprint(binding);
+    }
+    function resolveStaticMetadata(node, occurrenceKey) {
+        const visible = isVisible(node, variables, true);
+        const rendererToken = componentRenderers[node.type]
+            ?? componentRenderers._default;
+        if (!visible) {
+            return {
+                occurrenceKey,
+                node,
+                nodeId: node.id,
+                nodeType: node.type,
+                rendererToken,
+                visible: false,
+                disabled: false,
+                resolvedProps: null,
+                propsFingerprint: stableFingerprint(null),
+                layoutFingerprint: stableFingerprint(null),
+                bindingFingerprint: stableFingerprint(null),
+            };
+        }
+        const resolvedProps = resolveNodeProps(node);
+        const disabled = isNodeDisabled(node);
+        return {
+            occurrenceKey,
+            node,
+            nodeId: node.id,
+            nodeType: node.type,
+            rendererToken,
+            visible: true,
+            disabled,
+            resolvedProps,
+            propsFingerprint: stableFingerprint(resolvedProps),
+            layoutFingerprint: stableFingerprint(getSlotLayoutFingerprintInput(resolvedProps, node.children, resolveNodeProps)),
+            bindingFingerprint: nodeBindingFingerprint(node, resolvedProps, disabled),
+        };
+    }
+    function applyDisabledState(element, disabled) {
+        if (!disabled)
+            return;
+        element.setAttribute('data-disabled', 'true');
+        element.style.background = '#F5F5F5';
+        element.style.color = '#C0C0C0';
+        element.style.setProperty('--card-disabled-color', '#C0C0C0');
+        element.style.pointerEvents = 'none';
+        element.style.cursor = 'default';
+    }
+    function applyDisabledDescendants(element, disabled) {
+        if (!disabled)
+            return;
+        element.querySelectorAll('*').forEach((child) => {
+            const htmlChild = child;
+            htmlChild.setAttribute('data-disabled', 'true');
+            htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
+        });
+    }
+    function runStaticEventActions(steps, detail) {
+        if (disposed)
+            return;
+        if (detail != null)
+            variables._event = detail;
+        const sourceVariables = variables;
+        const actionAuthorityEpoch = hostAuthorityEpoch;
+        const eventSequence = ++nextStaticEventSequence;
+        const localVariables = Object.create(null);
+        if (Object.prototype.hasOwnProperty.call(sourceVariables, '_event')) {
+            localVariables._event = sourceVariables._event;
+        }
+        const deletedProperties = new Set();
+        let frozenVariables = null;
+        const eventVariables = new Proxy(localVariables, {
+            get(target, property) {
+                if (frozenVariables)
+                    return Reflect.get(frozenVariables, property);
+                if (deletedProperties.has(property))
+                    return undefined;
+                return Object.prototype.hasOwnProperty.call(target, property)
+                    ? Reflect.get(target, property)
+                    : Reflect.get(sourceVariables, property);
+            },
+            set(target, property, value) {
+                if (frozenVariables) {
+                    Reflect.set(frozenVariables, property, value);
+                    return true;
+                }
+                deletedProperties.delete(property);
+                Reflect.set(target, property, value);
+                if (property !== '_event'
+                    && !disposed
+                    && !publishing
+                    && variables === sourceVariables
+                    && actionAuthorityEpoch === hostAuthorityEpoch
+                    && (latestStaticEventWriterByKey.get(property) === undefined
+                        || latestStaticEventWriterByKey.get(property) <= eventSequence)) {
+                    latestStaticEventWriterByKey.set(property, eventSequence);
+                    Reflect.set(sourceVariables, property, value);
+                }
+                return true;
+            },
+            deleteProperty(target, property) {
+                if (frozenVariables) {
+                    return Reflect.deleteProperty(frozenVariables, property);
+                }
+                deletedProperties.add(property);
+                Reflect.deleteProperty(target, property);
+                if (property !== '_event'
+                    && !disposed
+                    && !publishing
+                    && variables === sourceVariables
+                    && actionAuthorityEpoch === hostAuthorityEpoch
+                    && (latestStaticEventWriterByKey.get(property) === undefined
+                        || latestStaticEventWriterByKey.get(property) <= eventSequence)) {
+                    latestStaticEventWriterByKey.set(property, eventSequence);
+                    Reflect.deleteProperty(sourceVariables, property);
+                }
+                return true;
+            },
+            has(target, property) {
+                if (!frozenVariables && deletedProperties.has(property))
+                    return false;
+                return frozenVariables
+                    ? property in frozenVariables
+                    : property in target || property in sourceVariables;
+            },
+            ownKeys(target) {
+                return Reflect.ownKeys(frozenVariables ?? { ...sourceVariables, ...target }).filter(property => !deletedProperties.has(property));
+            },
+            getOwnPropertyDescriptor(target, property) {
+                if (!frozenVariables && deletedProperties.has(property)) {
+                    return undefined;
+                }
+                const owner = frozenVariables
+                    ?? (Object.prototype.hasOwnProperty.call(target, property)
+                        ? target
+                        : sourceVariables);
+                const descriptor = Object.getOwnPropertyDescriptor(owner, property);
+                return descriptor ? { ...descriptor, configurable: true } : undefined;
+            },
+        });
+        const pendingAutoFocusIds = new Set();
+        void runActionSteps(steps, buildActionContext(pendingAutoFocusIds, eventVariables, eventSequence))
+            .catch((error) => {
+            console.error('[renderCard] Static action failed', error);
+        })
+            .finally(() => {
+            const snapshot = {
+                ...sourceVariables,
+                ...localVariables,
+            };
+            for (const property of deletedProperties) {
+                Reflect.deleteProperty(snapshot, property);
+            }
+            frozenVariables = snapshot;
+            if (disposed || actionAuthorityEpoch !== hostAuthorityEpoch)
+                return;
+            applyAutoFocus(pendingAutoFocusIds);
+        });
+    }
+    function syncStaticBindings(element, node) {
+        const resolvedEventBindings = [];
+        if (node.visible && !node.disabled && node.node.events) {
+            for (const [schemaEvent, eventValue] of Object.entries(node.node.events)) {
+                if (!eventValue)
+                    continue;
+                const steps = resolveActionRef(eventValue, schemaActions);
+                if (!steps)
+                    continue;
+                const domEvent = eventMap[schemaEvent] ?? schemaEvent;
+                resolvedEventBindings.push({
+                    schemaEvent,
+                    domEvent,
+                    ownsValueEvent: ((domEvent === 'input' || domEvent === 'change')
+                        && VALUE_CONTROL_TYPES.has(node.nodeType)),
+                    dispatch: (event) => {
+                        const detail = event instanceof CustomEvent
+                            ? event.detail
+                            : undefined;
+                        runStaticEventActions(steps, detail);
+                    },
+                });
+            }
+        }
+        const variableKey = node.resolvedProps?.variableKey;
+        syncElementBindings(element, {
+            variableKey: typeof variableKey === 'string' ? variableKey : undefined,
+            writeVariable: (key, value) => {
+                if (disposed
+                    || publishing
+                    || !container.contains(element)) {
+                    return;
+                }
+                variables[key] = value;
+                hostAuthorityEpoch += 1;
+            },
+            events: resolvedEventBindings,
+            isActive: () => (!disposed
+                && !publishing
+                && container.contains(element)),
+        });
+    }
+    function mountStaticSubtree(node, occurrenceKey) {
+        const metadata = resolveStaticMetadata(node, occurrenceKey);
+        if (!metadata.visible) {
+            const placeholder = document.createElement('div');
+            placeholder.style.display = 'none';
+            placeholder.setAttribute('data-card-id', node.id);
+            syncStaticBindings(placeholder, { ...metadata});
+            return { ...metadata, element: placeholder, children: [] };
+        }
+        const renderer = metadata.rendererToken;
+        const element = renderer(node, metadata.resolvedProps, isMobile, options.responsive);
+        try {
+            applyDisabledState(element, metadata.disabled);
+            syncStaticBindings(element, { ...metadata, children: [] });
+            const children = [];
+            const sameIdOrdinals = new Map();
+            const renderChild = (child) => {
+                const sameIdOrdinal = sameIdOrdinals.get(child.id) ?? 0;
+                sameIdOrdinals.set(child.id, sameIdOrdinal + 1);
+                const mounted = mountStaticSubtree(child, childOccurrenceKey(occurrenceKey, child.id, sameIdOrdinal));
+                children.push(mounted);
+                return mounted.element;
+            };
+            const childrenMap = {};
+            for (const child of node.children)
+                childrenMap[child.id] = child;
+            const layoutApplied = renderSlotLayout(element, node.children, metadata.resolvedProps, renderChild, childrenMap, actionContext, resolveNodeProps);
+            if (!layoutApplied) {
+                for (const child of node.children) {
+                    element.appendChild(renderChild(child));
+                }
+            }
+            applyDisabledDescendants(element, metadata.disabled);
+            applyResponsiveStyles(element, createResponsiveContext(isMobile, options.responsive));
+            return { ...metadata, element, children };
+        }
+        catch (error) {
+            disposeStaticElement(element);
+            throw error;
+        }
+    }
+    function prepareStaticNode(current) {
+        const metadata = resolveStaticMetadata(current.node, current.occurrenceKey);
+        if (current.visible !== metadata.visible
+            || current.layoutFingerprint !== metadata.layoutFingerprint) {
+            return { ...metadata, children: [] };
+        }
+        return {
+            ...metadata,
+            children: current.children.map(prepareStaticNode),
+        };
+    }
+    function mountStaticReplacement(current, next) {
+        const replacement = mountStaticSubtree(next.node, next.occurrenceKey);
+        try {
+            if (replacement.element !== current.element
+                && replacement.element.parentNode === null) {
+                transferSlotItemPresentation(current.element, replacement.element);
+            }
+            return replacement;
+        }
+        catch (error) {
+            disposeStaticSubtree(replacement);
+            throw error;
+        }
+    }
+    /**
+     * Build every renderer-owned replacement before touching the mounted DOM.
+     * This preserves the old committed card when a later business renderer
+     * rejects the same host update. Retained BaseElements are intentionally not
+     * instantiated here: their native controls must stay untouched unless the
+     * live update actually needs its existing replacement fallback.
+     */
+    function stageStaticReplacements(current, next, staged) {
+        const sameChildren = current.children.length === next.children.length
+            && current.children.every((child, index) => (child.occurrenceKey === next.children[index].occurrenceKey));
+        const decision = sameChildren
+            ? decideStaticUpdate(current, next)
+            : 'replace';
+        if (decision === 'replace') {
+            staged.set(next.occurrenceKey, mountStaticReplacement(current, next));
+        }
+        if (decision === 'replace')
+            return;
+        current.children.forEach((child, index) => {
+            stageStaticReplacements(child, next.children[index], staged);
+        });
+    }
+    function decideStaticUpdate(current, next) {
+        if (current.occurrenceKey !== next.occurrenceKey
+            || current.nodeId !== next.nodeId
+            || current.nodeType !== next.nodeType
+            || current.rendererToken !== next.rendererToken
+            || current.visible !== next.visible
+            || current.disabled !== next.disabled
+            || current.layoutFingerprint !== next.layoutFingerprint) {
+            return 'replace';
+        }
+        if (current.propsFingerprint === next.propsFingerprint
+            && current.bindingFingerprint === next.bindingFingerprint) {
+            return 'retain';
+        }
+        if (current.element instanceof BaseElement
+            || current.rendererToken === componentRenderers._default) {
+            return 'update';
+        }
+        return 'replace';
+    }
+    function updateStaticNode(current, next) {
+        const element = current.element;
+        if (element instanceof BaseElement) {
+            updateSlotItemShellPresentation(element, () => {
+                element.updateProps(next.resolvedProps, isMobile, options.responsive);
+                applyResponsiveStyles(element, createResponsiveContext(isMobile, options.responsive));
+            }, getSlotHostPresentationOwnership(next.resolvedProps));
+            return;
+        }
+        const previous = componentRenderers._default(current.node, current.resolvedProps, isMobile, options.responsive);
+        const desired = componentRenderers._default(next.node, next.resolvedProps, isMobile, options.responsive);
+        applyDisabledState(previous, current.disabled);
+        applyDisabledState(desired, next.disabled);
+        const hostOwnership = getSlotHostPresentationOwnership(next.resolvedProps);
+        updateSlotItemShellPresentation(current.element, () => {
+            patchElementShellPresentation(current.element, previous, desired, hostOwnership, getSlotItemPresentationOwnership(current.element));
+        }, hostOwnership);
+    }
+    function disposeStaticElement(element) {
+        const cleanupSteps = [
+            () => clearSlotOwnerBehaviorsIn(element),
+            () => clearSlotItemPresentationsIn(element),
+            () => clearElementBindingsIn(element),
+            () => disposeChartsIn(element),
+        ];
+        for (const cleanup of cleanupSteps) {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('[renderCard] Static element cleanup failed', error);
+            }
+        }
+    }
+    function disposeStaticSubtree(current) {
+        disposeStaticElement(current.element);
+    }
+    function collectMountedOccurrences(current, occurrences) {
+        occurrences.set(current.occurrenceKey, current);
+        for (const child of current.children) {
+            collectMountedOccurrences(child, occurrences);
+        }
+    }
+    function collectMountedLifecycles(current, collection) {
+        if (!current.visible
+            || !container.contains(current.element)) {
+            return;
+        }
+        if (current.node.lifecycle) {
+            collection.push({
+                id: current.nodeId,
+                lifecycle: current.node.lifecycle,
+            });
+        }
+        for (const child of current.children) {
+            collectMountedLifecycles(child, collection);
+        }
+    }
+    function restoreDisabledDescendantPresentation(current) {
+        if (current.disabled) {
+            applyDisabledState(current.element, true);
+            applyDisabledDescendants(current.element, true);
+        }
+        for (const child of current.children) {
+            restoreDisabledDescendantPresentation(child);
+        }
+    }
+    function restoreChangedSubtreeState(previous, next, scrollPositions, mediaStates) {
+        if (previous.element !== next.element) {
+            restoreScrollPositions(next.element, scrollPositions);
+            restoreMediaStates(next.element, mediaStates);
+            return;
+        }
+        if (previous.propsFingerprint !== next.propsFingerprint
+            && (next.nodeType === 'Audio' || next.nodeType === 'Video')) {
+            restoreMediaStates(next.element, mediaStates);
+        }
+        for (let index = 0; index < next.children.length; index += 1) {
+            const previousChild = previous.children[index];
+            const nextChild = next.children[index];
+            if (previousChild
+                && previousChild.occurrenceKey === nextChild.occurrenceKey) {
+                restoreChangedSubtreeState(previousChild, nextChild, scrollPositions, mediaStates);
+            }
+        }
+    }
     function render() {
+        if (disposed)
+            return;
+        const generation = ++renderGeneration;
+        const collectedLifecycles = [];
         const scrollPositions = captureScrollPositions(container);
         const mediaStates = captureMediaStates(container);
-        disposeChartsIn(container); // tear down old chart instances before clearing
-        container.innerHTML = '';
-        const dom = renderNode(tree, variables, actionContext, isMobile, options.responsive, lifecycleManager, schemaActions);
-        container.appendChild(dom);
-        restoreScrollPositions(container, scrollPositions);
-        restoreMediaStates(container, mediaStates);
+        let previousTree = null;
+        if (!mountedTree) {
+            const initialTree = mountStaticSubtree(tree, `${tree.id}#0`);
+            if (disposed || generation !== renderGeneration) {
+                disposeStaticSubtree(initialTree);
+                return;
+            }
+            disposeChartsIn(container);
+            container.replaceChildren(initialTree.element);
+            mountedTree = initialTree;
+        }
+        else {
+            previousTree = mountedTree;
+            let unreconciled = false;
+            let unreconciledError;
+            const replacementSources = new Map();
+            collectMountedOccurrences(mountedTree, replacementSources);
+            const preparedTree = prepareStaticNode(mountedTree);
+            if (disposed || generation !== renderGeneration)
+                return;
+            const stagedReplacements = new Map();
+            publishing = true;
+            try {
+                stageStaticReplacements(mountedTree, preparedTree, stagedReplacements);
+                if (disposeRequested)
+                    return;
+                mountedTree = reconcileIncrementalNode(mountedTree, preparedTree, {
+                    decide: decideStaticUpdate,
+                    update: updateStaticNode,
+                    mountReplacement: next => {
+                        const staged = stagedReplacements.get(next.occurrenceKey);
+                        if (staged) {
+                            stagedReplacements.delete(next.occurrenceKey);
+                            return staged;
+                        }
+                        const replacement = mountStaticSubtree(next.node, next.occurrenceKey);
+                        const current = replacementSources.get(next.occurrenceKey);
+                        if (current
+                            && replacement.element !== current.element
+                            && replacement.element.parentNode === null) {
+                            transferSlotItemPresentation(current.element, replacement.element);
+                        }
+                        return replacement;
+                    },
+                    dispose: disposeStaticSubtree,
+                    syncBindings: (current, next) => {
+                        syncStaticBindings(current.element, next);
+                    },
+                    onUnreconciled: (error) => {
+                        if (unreconciled)
+                            return;
+                        unreconciled = true;
+                        unreconciledError = error ?? new Error('[renderCard] Static incremental update could not be reconciled');
+                    },
+                });
+            }
+            finally {
+                for (const replacement of stagedReplacements.values()) {
+                    disposeStaticSubtree(replacement);
+                }
+                stagedReplacements.clear();
+                publishing = false;
+                if (disposeRequested)
+                    disposeNow();
+            }
+            if (unreconciled)
+                throw unreconciledError;
+            if (disposed)
+                return;
+        }
+        restoreDisabledDescendantPresentation(mountedTree);
+        collectMountedLifecycles(mountedTree, collectedLifecycles);
+        if (previousTree) {
+            restoreChangedSubtreeState(previousTree, mountedTree, scrollPositions, mediaStates);
+        }
+        else {
+            restoreScrollPositions(container, scrollPositions);
+            restoreMediaStates(container, mediaStates);
+        }
+        if (disposed || generation !== renderGeneration)
+            return;
+        for (const { id, lifecycle } of collectedLifecycles) {
+            if (disposed || generation !== renderGeneration)
+                break;
+            startLifecycleMount(id, lifecycle);
+        }
     }
     function rerender() {
+        if (disposed)
+            return;
         actionContext = buildActionContext();
         render();
     }
+    function disposeNow() {
+        if (disposed)
+            return;
+        disposed = true;
+        disposeRequested = false;
+        hostAuthorityEpoch += 1;
+        nodeAccess.dispose();
+        abortController.abort();
+        if (mountedTree) {
+            disposeStaticSubtree(mountedTree);
+            mountedTree = null;
+        }
+        else {
+            disposeChartsIn(container);
+        }
+        container.replaceChildren();
+        for (const record of lifecycleRecords.values())
+            destroyLifecycle(record);
+    }
     // 7. Initial render
     render();
     // 8. Return instance handle
     return {
+        getNode: nodeAccess.getNode,
+        onFocusChange: nodeAccess.onFocusChange,
         dispose() {
-            abortController.abort();
-            lifecycleManager.dispose(actionContext);
-            disposeChartsIn(container);
-            container.innerHTML = '';
+            if (disposed || disposeRequested)
+                return;
+            if (publishing) {
+                disposeRequested = true;
+                return;
+            }
+            disposeNow();
         },
         updateVariables(newVars) {
+            if (disposed)
+                return;
+            if (publishing) {
+                const error = new Error('[renderCard] STATIC_TRANSACTION_CONFLICT');
+                error.code = 'STATIC_TRANSACTION_CONFLICT';
+                throw error;
+            }
+            const previousVariables = variables;
+            const previousAuthorityEpoch = hostAuthorityEpoch;
+            hostAuthorityEpoch += 1;
             variables = { ...variables, ...newVars };
-            rerender();
+            try {
+                rerender();
+            }
+            catch (error) {
+                if (!disposed) {
+                    variables = previousVariables;
+                    hostAuthorityEpoch = previousAuthorityEpoch;
+                    actionContext = buildActionContext();
+                }
+                throw error;
+            }
         },
     };
 }
@@ -8263,7 +11066,11 @@ function captureScrollPositions(root) {
 function restoreScrollPositions(root, positions) {
     if (positions.size === 0)
         return;
-    root.querySelectorAll('[data-scroll-id]').forEach((el) => {
+    const scrollers = [];
+    if (root.matches('[data-scroll-id]'))
+        scrollers.push(root);
+    scrollers.push(...root.querySelectorAll('[data-scroll-id]'));
+    scrollers.forEach((el) => {
         const id = el.getAttribute('data-scroll-id');
         const saved = id ? positions.get(id) : undefined;
         if (saved == null)
@@ -8303,7 +11110,11 @@ function captureMediaStates(root) {
 function restoreMediaStates(root, states) {
     if (states.size === 0)
         return;
-    root.querySelectorAll('ai-card-audio, ai-card-video').forEach((el) => {
+    const mediaHosts = [];
+    if (root.matches('ai-card-audio, ai-card-video'))
+        mediaHosts.push(root);
+    mediaHosts.push(...root.querySelectorAll('ai-card-audio, ai-card-video'));
+    mediaHosts.forEach((el) => {
         const id = el.getAttribute('data-card-id');
         const snap = id ? states.get(id) : undefined;
         if (!snap)
@@ -8312,125 +11123,6 @@ function restoreMediaStates(root, states) {
         restoreMedia(media, snap);
     });
 }
-// ─── Recursive Node Renderer ─────────────────────────────────────
-function renderNode(node, variables, actionContext, isMobile, responsive, lifecycleManager, schemaActions) {
-    // Check directives.visible
-    if (node.directives?.visible) {
-        const visibleExpr = node.directives.visible;
-        const resolved = hasExpression(visibleExpr)
-            ? resolveExpression(visibleExpr, variables)
-            : visibleExpr;
-        if (resolved === false || resolved === 'false' || resolved === '' || resolved === 0) {
-            // Hidden element — return empty placeholder
-            const placeholder = document.createElement('div');
-            placeholder.style.display = 'none';
-            placeholder.setAttribute('data-card-id', node.id);
-            return placeholder;
-        }
-    }
-    // Resolve props with variable expressions
-    const resolvedProps = resolveDeep(node.props, variables);
-    // Resolve content if it's an ExpressionValue
-    if (resolvedProps.content && typeof resolvedProps.content === 'object' && 'type' in resolvedProps.content) {
-        resolvedProps.content = resolveExpressionValue(resolvedProps.content, variables);
-    }
-    // Check directives.disabled
-    let isDisabled = false;
-    if (node.directives?.disabled) {
-        const disabledExpr = node.directives.disabled;
-        const resolved = hasExpression(disabledExpr)
-            ? resolveExpression(disabledExpr, variables)
-            : disabledExpr;
-        isDisabled = resolved === true || resolved === 'true' || resolved === 1;
-    }
-    // Lookup component renderer
-    const renderer = componentRenderers[node.type] ?? componentRenderers['_default'];
-    const el = renderer(node, resolvedProps, isMobile, responsive);
-    // Apply disabled styling & attribute
-    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';
-    }
-    // ── variableKey auto-sync for Input components ──────────────
-    // When an Input element declares `variableKey`, its value is
-    // automatically written into the reactive variables store on
-    // every `input` event (without triggering a full re-render).
-    // The value is then available as `${variableKey}` in action params.
-    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) {
-                // Write silently — do NOT trigger rerender (avoids losing focus)
-                variables[variableKey] = value;
-            }
-        }));
-    }
-    // ── Bind events (skip if disabled) ──
-    if (node.events && !isDisabled) {
-        for (const [event, eventValue] of Object.entries(node.events)) {
-            if (!eventValue)
-                continue;
-            const resolvedSteps = resolveActionRef(eventValue, schemaActions);
-            if (!resolvedSteps)
-                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;
-                }
-                runActionSteps(resolvedSteps, actionContext);
-            }));
-        }
-    }
-    // Register lifecycle
-    if (node.lifecycle) {
-        lifecycleManager.register(node.id, node.lifecycle);
-        lifecycleManager.mount(node.id, actionContext);
-    }
-    // Render children — use slot layout if applicable, otherwise flat append
-    const renderChild = (child) => renderNode(child, variables, actionContext, isMobile, responsive, lifecycleManager, schemaActions);
-    // Build children-by-id map for layouts that reference IDs (columns groups, float overlays)
-    const childrenMap = {};
-    for (const child of node.children) {
-        childrenMap[child.id] = child;
-    }
-    const layoutApplied = renderSlotLayout(el, node.children, resolvedProps, renderChild, childrenMap, actionContext);
-    if (!layoutApplied) {
-        for (const child of node.children) {
-            el.appendChild(renderChild(child));
-        }
-    }
-    // Apply disabled grey text to all descendants (after children are appended)
-    // Propagate disabled state to child elements (including Shadow DOM custom elements)
-    if (isDisabled) {
-        el.querySelectorAll('*').forEach((child) => {
-            const htmlChild = child;
-            htmlChild.setAttribute('data-disabled', 'true');
-            htmlChild.style.setProperty('--card-disabled-color', '#C0C0C0');
-        });
-    }
-    applyResponsiveStyles(el, createResponsiveContext(isMobile, responsive));
-    return el;
-}
 /** Map schema event names → DOM event names */
 const eventMap = {
     onClick: 'click',
@@ -8484,6 +11176,7 @@ const VALUE_CONTROL_TYPES = new Set([
  * ```
  */
 function renderStreamingCard(container, options = {}) {
+    const nodeAccess = createCardNodeAccess(container);
     // ─── State ──────────────────────────────────────────────────────
     const parser = new StreamingParser(options.parserOptions);
     const elementMap = new Map(); // elementId → DOM element
@@ -8511,19 +11204,32 @@ function renderStreamingCard(container, options = {}) {
     let boundActionQueue = Promise.resolve();
     let boundLifecycleEpoch = 0;
     let disposed = false;
+    let userActionDepth = 0;
     const sourceOccurrences = new Map();
     const activeBoundLifecycles = new Map();
     const mountedBoundLifecycles = new Map();
     const boundLifecycleGenerations = new Map();
+    function applyAutoFocusIds(ids) {
+        if (ids.size === 0)
+            return;
+        for (const id of ids) {
+            const input = elementMap.get(id);
+            if (input instanceof CardInput && input.requestAutoFocus())
+                break;
+        }
+    }
     // ─── Action Context ─────────────────────────────────────────────
     function buildActionContext() {
         return {
             ...createWebActionContext({
                 ...options,
                 setVariable: (key, value) => {
+                    const previousVariables = userActionDepth > 0
+                        ? { ...variables }
+                        : undefined;
                     variables[key] = value;
                     // On variable change, patch only affected elements (keyed diff)
-                    diffAllElements();
+                    diffAllElements(previousVariables);
                 },
                 abortSignal: abortController.signal,
             }),
@@ -8606,6 +11312,27 @@ function renderStreamingCard(container, options = {}) {
             || resolved === ''
             || resolved === 0);
     }
+    function collectBoundAutoFocusRevealIds(previous, next, previousVariables, nextVariables) {
+        const previousNodes = indexBoundNodes(previous.root);
+        const requested = new Set();
+        const visit = (nextNode, previousParentVisible, nextParentVisible) => {
+            const previousNode = previousNodes.get(nextNode.id);
+            const wasVisible = Boolean(previousNode
+                && previousParentVisible
+                && computeBoundVisible(previousNode, previousVariables));
+            const nowVisible = nextParentVisible
+                && computeBoundVisible(nextNode, nextVariables);
+            if (nextNode.type === 'Input'
+                && !wasVisible
+                && nowVisible
+                && resolveBoundNodeProps(nextNode, nextVariables).autoFocus === true) {
+                requested.add(nextNode.id);
+            }
+            nextNode.children.forEach(child => visit(child, wasVisible, nowVisible));
+        };
+        visit(next.root, true, true);
+        return requested;
+    }
     function computeBoundDisabled(node, renderVariables) {
         const disabled = node.directives?.disabled;
         if (!disabled)
@@ -8781,7 +11508,10 @@ function renderStreamingCard(container, options = {}) {
                     if (e instanceof CustomEvent && e.detail != null) {
                         variables._event = e.detail;
                     }
-                    runSteps(resolvedSteps, node.id);
+                    userActionDepth += 1;
+                    void runSteps(resolvedSteps, node.id).finally(() => {
+                        userActionDepth -= 1;
+                    });
                 }));
             }
         }
@@ -8836,6 +11566,43 @@ function renderStreamingCard(container, options = {}) {
             : visibleExpr;
         return !(resolved === false || resolved === 'false' || resolved === '' || resolved === 0);
     }
+    function collectLegacyAutoFocusRevealIds(schema, previousVariables) {
+        let tree;
+        try {
+            tree = parseSchema(schema);
+        }
+        catch {
+            return new Set();
+        }
+        const requested = new Set();
+        const ownVisibility = (node, renderVariables) => {
+            const expression = node.directives?.visible;
+            if (!expression)
+                return true;
+            const resolved = hasExpression(expression)
+                ? resolveExpression(expression, renderVariables)
+                : expression;
+            return !(resolved === false
+                || resolved === 'false'
+                || resolved === ''
+                || resolved === 0);
+        };
+        const visit = (node, previousParentVisible, nextParentVisible) => {
+            const wasVisible = previousParentVisible
+                && ownVisibility(node, previousVariables);
+            const nowVisible = nextParentVisible && ownVisibility(node, variables);
+            if (node.type === 'Input'
+                && !wasVisible
+                && nowVisible
+                && resolveDeep(node.props, variables)
+                    .autoFocus === true) {
+                requested.add(node.id);
+            }
+            node.children.forEach(child => visit(child, wasVisible, nowVisible));
+        };
+        visit(tree, true, true);
+        return requested;
+    }
     /** Entrance transition for blocks streamed in incrementally. */
     function animateEnter(el) {
         if (options.appearTransition === false)
@@ -8909,11 +11676,14 @@ function renderStreamingCard(container, options = {}) {
      * (visibility flips / container shape changes) re-render only their subtree.
      * Falls back to a full render solely when a subtree can't be rebuilt.
      */
-    function diffAllElements() {
+    function diffAllElements(previousVariables) {
         actionContext = buildActionContext();
         const schema = (currentSurfaceId ? engine.getSchema(currentSurfaceId) : undefined) ?? currentSchema;
         if (!schema)
             return;
+        const autoFocusIds = previousVariables
+            ? collectLegacyAutoFocusRevealIds(schema, previousVariables)
+            : new Set();
         for (const [id, element] of Object.entries(schema.elements)) {
             const el = elementMap.get(id);
             if (!el)
@@ -8924,6 +11694,7 @@ function renderStreamingCard(container, options = {}) {
                 // Visibility flipped (either direction) → rebuild this subtree in place
                 if (!replaceSubtree(schema, id, el)) {
                     safeRenderFull();
+                    applyAutoFocusIds(autoFocusIds);
                     return;
                 }
                 continue;
@@ -8940,9 +11711,11 @@ function renderStreamingCard(container, options = {}) {
             }
             else if (!replaceSubtree(schema, id, el)) {
                 safeRenderFull();
+                applyAutoFocusIds(autoFocusIds);
                 return;
             }
         }
+        applyAutoFocusIds(autoFocusIds);
     }
     function captureBoundScrollPositions(root) {
         const positions = new Map();
@@ -9665,7 +12438,10 @@ function renderStreamingCard(container, options = {}) {
         if (!steps)
             return;
         await runBoundSteps(steps, sourceNode, createBoundActionContext(sourceNode, draft));
+        const nextMaterialized = materializeStreamingCard(currentSchema, draft);
+        const autoFocusIds = collectBoundAutoFocusRevealIds(currentMaterialized, nextMaterialized, before, draft);
         commitBoundDraftTransaction(before, draft, baseRevision);
+        applyAutoFocusIds(autoFocusIds);
     }
     function enqueueBoundEvent(runtimeId, eventName, eventDetail) {
         boundActionQueue = boundActionQueue
@@ -10247,6 +13023,8 @@ function renderStreamingCard(container, options = {}) {
     });
     // ─── Public API ─────────────────────────────────────────────────
     return {
+        getNode: nodeAccess.getNode,
+        onFocusChange: nodeAccess.onFocusChange,
         applyCommand(command) {
             if (!lockMode('commands'))
                 return;
@@ -10323,6 +13101,7 @@ function renderStreamingCard(container, options = {}) {
             if (disposed)
                 return;
             disposed = true;
+            nodeAccess.dispose();
             boundRevision += 1;
             abortController.abort();
             teardownBoundLifecycles();