@antglobal/copilot-cards-web 0.0.20260915071159-dev.1 → 0.0.20260915071159-dev.9

package/dist/index.d.ts

@@ -107,7 +107,7 @@ declare function createResponsiveContext(isMobile: boolean, responsive?: Respons
  */
 
 interface RenderCardOptions extends WebActionContextOptions {
-    /** Disable the whole card using the existing project disabled appearance. Default false. */
+    /** Block whole-card interaction and add a configurable overlay without restyling nodes. Default false. */
     disabled?: boolean;
     /** Enable mobile component layout explicitly (default false). */
     isMobile?: boolean;

package/dist/index.js

@@ -713,30 +713,9 @@ function buildHeatmapOption(config) {
     };
 }
 
-const DISABLED_MARKER = 'data-copilot-card-disabled';
-function applyDisabledState(element, disabled) {
-    if (!disabled)
-        return;
-    element.setAttribute('data-disabled', 'true');
-    element.setAttribute(DISABLED_MARKER, 'true');
-    // Inline declarations work inside host ShadowRoots too. Use the shorthand
-    // to mask background images/gradients, matching the historical disabled state.
-    element.style.background = 'var(--card-disabled-background, #F5F5F5)';
-    element.style.color = 'var(--card-disabled-foreground, #C0C0C0)';
-    element.style.pointerEvents = 'none';
-    element.style.cursor = 'default';
-}
-function applyDisabledDescendants(element, disabled) {
-    if (!disabled)
-        return;
-    element.querySelectorAll('*').forEach((child) => {
-        child.setAttribute('data-disabled', 'true');
-    });
-}
-
 const controllers = new WeakMap();
 const interactionCleanups = new WeakMap();
-/** Cancel slot-owned gestures before capturing the disabled presentation. */
+/** Cancel slot-owned gestures before covering the card. */
 function registerCardDisableCleanup(element, cleanup) {
     let callbacks = interactionCleanups.get(element);
     if (!callbacks) {
@@ -762,15 +741,13 @@ const BLOCKED_EVENTS = [
     'compositionstart', 'compositionupdate', 'compositionend',
     'choice-request-change', 'choice-navigate',
 ];
-const TOUCH_EVENTS = ['pointerdown', 'pointerup', 'touchstart', 'touchend', 'mousedown', 'mouseup'];
+const TOUCH_EVENTS = ['pointerdown', 'pointerup', 'touchstart', 'touchend', 'mousedown', 'mouseup', 'wheel'];
 const TAB_TARGETS = [
     'a[href]', 'area[href]', 'button', 'input', 'select', 'textarea', 'summary',
     'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]',
     '[tabindex]', '[contenteditable]:not([contenteditable="false"])',
 ].join(',');
-const VISUAL_ATTRIBUTES = ['data-disabled', 'data-copilot-card-disabled'];
-const ownsStyle = (name) => name === 'background' || name.startsWith('background-')
-    || name === 'color' || name === 'pointer-events' || name === 'cursor';
+const CARD_DISABLED_ATTRIBUTE = 'data-card-disabled';
 function restoreAttribute(element, name, value) {
     if (value === null)
         element.removeAttribute(name);
@@ -784,7 +761,9 @@ function createCardDisabledController(container, initiallyDisabled = false) {
     let updateDepth = 0;
     let applyingPresentation = false;
     let previousAriaDisabled = null;
-    let snapshots = [];
+    let previousDisabledMarker = null;
+    let overlay;
+    let mountStyles = [];
     let tabSnapshots = [];
     let tabObserver;
     const block = (event) => {
@@ -876,14 +855,39 @@ function createCardDisabledController(container, initiallyDisabled = false) {
     }
     function restorePresentation() {
         restoreTabNavigation();
-        for (const { element, attributes, styles } of snapshots) {
-            VISUAL_ATTRIBUTES.forEach((name, index) => restoreAttribute(element, name, attributes[index]));
-            if (styles) {
-                Array.from(element.style).filter(ownsStyle).forEach(name => element.style.removeProperty(name));
-                styles.forEach(([name, value, priority]) => element.style.setProperty(name, value, priority));
-            }
+        overlay?.remove();
+        for (const [name, value, priority] of mountStyles) {
+            if (value)
+                container.style.setProperty(name, value, priority);
+            else
+                container.style.removeProperty(name);
         }
-        snapshots = [];
+        mountStyles = [];
+    }
+    function coverCard() {
+        const root = container.firstElementChild;
+        if (!root)
+            return;
+        const style = container.ownerDocument.defaultView?.getComputedStyle(container);
+        const ownStyle = (name, value) => {
+            mountStyles.push([name, container.style.getPropertyValue(name), container.style.getPropertyPriority(name)]);
+            container.style.setProperty(name, value, 'important');
+        };
+        if (!style?.position || style.position === 'static')
+            ownStyle('position', 'relative');
+        // Keep the mask above card content without covering neighboring messages.
+        ownStyle('isolation', 'isolate');
+        overlay ?? (overlay = container.ownerDocument.createElement('div'));
+        overlay.setAttribute('data-card-disabled-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        overlay.style.cssText = 'position:absolute;inset:0;z-index:2147483647;pointer-events:auto;cursor:default;'
+            + 'background:var(--card-disabled-overlay-background, rgba(255, 255, 255, 0.6));';
+        // A dedicated mount normally shares the root card's bounds. Respect a mount
+        // radius when provided, otherwise match the rendered card's rounded corners.
+        const rootStyle = container.ownerDocument.defaultView?.getComputedStyle(root);
+        overlay.style.borderRadius = style?.borderRadius && style.borderRadius !== '0px'
+            ? style.borderRadius : rootStyle?.borderRadius ?? '';
+        container.appendChild(overlay);
     }
     function applyPresentation() {
         if (!disabled || disposed || updateDepth > 0 || applyingPresentation)
@@ -891,27 +895,13 @@ function createCardDisabledController(container, initiallyDisabled = false) {
         applyingPresentation = true;
         try {
             // Blur/popup callbacks can synchronously update or toggle the card.
-            // Always snapshot its current underlying presentation, never our overlay.
+            // Reattach only after renderer updates and popup/gesture cleanup finish.
             restorePresentation();
             closeTransientUI(container);
             blurCardInput();
             if (!disabled || disposed)
                 return;
-            for (const element of container.querySelectorAll('*')) {
-                const isRoot = element.parentElement === container;
-                snapshots.push({
-                    element,
-                    attributes: VISUAL_ATTRIBUTES.map(name => element.getAttribute(name)),
-                    styles: isRoot ? Array.from(element.style).filter(ownsStyle)
-                        .map(name => [name, element.style.getPropertyValue(name), element.style.getPropertyPriority(name)]) : undefined,
-                });
-            }
-            for (const root of Array.from(container.children)) {
-                if (!(root instanceof HTMLElement))
-                    continue;
-                applyDisabledState(root, true);
-                applyDisabledDescendants(root, true);
-            }
+            coverCard();
             excludeFromTabNavigation(container);
         }
         finally {
@@ -946,7 +936,9 @@ function createCardDisabledController(container, initiallyDisabled = false) {
             epoch += 1;
             if (disabled) {
                 previousAriaDisabled = container.getAttribute('aria-disabled');
+                previousDisabledMarker = container.getAttribute(CARD_DISABLED_ATTRIBUTE);
                 container.setAttribute('aria-disabled', 'true');
+                container.setAttribute(CARD_DISABLED_ATTRIBUTE, 'true');
                 listen(true);
                 blurCardInput();
                 applyPresentation();
@@ -954,6 +946,7 @@ function createCardDisabledController(container, initiallyDisabled = false) {
             else {
                 restorePresentation();
                 restoreAttribute(container, 'aria-disabled', previousAriaDisabled);
+                restoreAttribute(container, CARD_DISABLED_ATTRIBUTE, previousDisabledMarker);
                 listen(false);
             }
         },
@@ -2912,6 +2905,34 @@ BaseElement.UNITLESS_PROPS = new Set([
     'widows',
 ]);
 
+/** Marked 18 uses Array.at internally; install it only on runtimes without it. */
+function ensureArrayAt() {
+    if (typeof Array.prototype.at === 'function')
+        return;
+    // Marked calls this built-in directly; keep the fallback non-enumerable and preserve native implementations.
+    // eslint-disable-next-line no-extend-native
+    Object.defineProperty(Array.prototype, 'at', {
+        configurable: true,
+        writable: true,
+        enumerable: false,
+        // Class methods stay strict in non-module bundles and, like native at, are not constructors.
+        value: class {
+            static at(index) {
+                if (this == null)
+                    throw new TypeError('Array.at called on null or undefined');
+                const object = Object(this);
+                const length = Math.min(Math.max(Math.trunc(+object.length) || 0, 0), Number.MAX_SAFE_INTEGER);
+                const relativeIndex = Math.trunc(+index) || 0;
+                const offset = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
+                return offset < 0 || offset >= length ? undefined : object[offset];
+            }
+        }.at,
+    });
+    const unscopables = Array.prototype[Symbol.unscopables];
+    if (unscopables)
+        unscopables.at = true;
+}
+
 /**
  * CardText — Custom Element for rendering text content in a card.
  *
@@ -3286,6 +3307,7 @@ class CardText extends BaseElement {
      * Parse markdown to HTML using marked.
      */
     _parseMarkdown(text) {
+        ensureArrayAt();
         const result = marked.parse(text);
         // marked.parse can return string or Promise; we use sync mode
         return typeof result === 'string' ? result : '';
@@ -6529,6 +6551,20 @@ if (typeof customElements !== 'undefined' && !customElements.get(CardLoading.is)
     customElements.define(CardLoading.is, CardLoading);
 }
 
+/** Replace SDK-owned DOM children on WebViews predating ParentNode.replaceChildren. */
+function replaceChildren(container, ...children) {
+    if (typeof container.replaceChildren === 'function') {
+        container.replaceChildren(...children);
+        return;
+    }
+    const fragment = container.ownerDocument.createDocumentFragment();
+    for (const child of children)
+        fragment.appendChild(child);
+    while (container.firstChild)
+        container.removeChild(container.firstChild);
+    container.appendChild(fragment);
+}
+
 const DEFAULT_COLOR = '#1677ff';
 function nonNegative(value) {
     const number = Number(value);
@@ -6709,7 +6745,7 @@ class CardProgress extends BaseElement {
             if (valueText)
                 track.setAttribute('aria-valuetext', valueText);
         }
-        this.shadowRoot.replaceChildren(styleElement, wrapper);
+        replaceChildren(this.shadowRoot, styleElement, wrapper);
         applyResponsiveStyles(this.shadowRoot, this._responsive);
     }
     buildLegend(segments, position, style, isExpressionResultStyle) {
@@ -9661,6 +9697,27 @@ function createCardNodeAccess(container) {
     };
 }
 
+const DISABLED_MARKER = 'data-copilot-card-disabled';
+function applyDisabledState(element, disabled) {
+    if (!disabled)
+        return;
+    element.setAttribute('data-disabled', 'true');
+    element.setAttribute(DISABLED_MARKER, 'true');
+    // Inline declarations work inside host ShadowRoots too. Use the shorthand
+    // to mask background images/gradients, matching the historical disabled state.
+    element.style.background = 'var(--card-disabled-background, #F5F5F5)';
+    element.style.color = 'var(--card-disabled-foreground, #C0C0C0)';
+    element.style.pointerEvents = 'none';
+    element.style.cursor = 'default';
+}
+function applyDisabledDescendants(element, disabled) {
+    if (!disabled)
+        return;
+    element.querySelectorAll('*').forEach((child) => {
+        child.setAttribute('data-disabled', 'true');
+    });
+}
+
 const FORCE_REPLACE = Symbol('bound-force-replace');
 const REPEAT_APPEND = Symbol('bound-repeat-append');
 /**
@@ -10410,7 +10467,7 @@ function renderBoundCard(container, schema, options) {
         for (const suffix of candidate.suffix) {
             disposeBoundSubtreeWithoutThrow(suffix);
         }
-        candidate.fragment.replaceChildren();
+        replaceChildren(candidate.fragment);
         candidate.state = 'disposed';
     }
     function prepareRepeatAppendCandidates(preparedRoot, appendPlans, draft) {
@@ -10784,7 +10841,7 @@ function renderBoundCard(container, schema, options) {
         let adoptionThrew = false;
         let adoptionError;
         try {
-            container.replaceChildren(element);
+            replaceChildren(container, element);
         }
         catch (error) {
             adoptionThrew = true;
@@ -11303,7 +11360,7 @@ function renderBoundCard(container, schema, options) {
         else {
             disposeChartsIn(container);
         }
-        container.replaceChildren();
+        replaceChildren(container);
         const lifecycleNodes = [...activeLifecycleNodes.entries()];
         activeLifecycleNodes.clear();
         lifecycleQueue = lifecycleQueue
@@ -12072,7 +12129,7 @@ function renderStaticCard(container, schema, options) {
                 return;
             }
             disposeChartsIn(container);
-            container.replaceChildren(initialTree.element);
+            replaceChildren(container, initialTree.element);
             mountedTree = initialTree;
         }
         else {
@@ -12176,7 +12233,7 @@ function renderStaticCard(container, schema, options) {
         else {
             disposeChartsIn(container);
         }
-        container.replaceChildren();
+        replaceChildren(container);
         for (const record of lifecycleRecords.values())
             destroyLifecycle(record);
     }
@@ -13278,7 +13335,7 @@ function renderStreamingCard(container, options = {}) {
         const scrollPositions = captureBoundScrollPositions(container);
         const mediaStates = captureBoundMediaStates(container);
         disposeChartsIn(container);
-        container.replaceChildren(prepared.dom);
+        replaceChildren(container, prepared.dom);
         replaceProductionIndexes(prepared.indexes);
         currentSchema = schema;
         currentMaterialized = stableMaterialized;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antglobal/copilot-cards-web",
-  "version": "0.0.20260915071159-dev.1",
+  "version": "0.0.20260915071159-dev.9",
   "description": "Web Component renderer for copilot bot card SDK — PC + Mobile + WebView unified rendering via Custom Elements",
   "type": "module",
   "module": "./dist/index.js",
@@ -28,7 +28,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@antglobal/copilot-cards-core": "0.0.20260915071159-dev.1",
+    "@antglobal/copilot-cards-core": "0.0.20260915071159-dev.9",
     "echarts": "^5.6.0",
     "marked": "^18.0.5",
     "tslib": "^2.8.1",