@vvfx/sdk 0.2.8 → 0.2.9

package/dist/html-overlay/manager.js

@@ -0,0 +1,1663 @@
+import { snapdom } from '@zumer/snapdom';
+import { isCardItem, isFrameItem } from '../sdk-item';
+import { requestCardHTMLAutoHeight } from './auto-height-runtime';
+import { renderDOMContentInIframe, renderDocumentContent } from './document-runtime';
+import { createDocumentFileUrlFactory, normalizeDocumentFiles, transformHTMLDocument } from './document-transform';
+import { syncElementStackOrder } from './dom-order';
+import { withCardHTMLViewportStyle } from './html-viewport-style';
+import { createHTMLCaptureReplica, createHTMLCaptureReplicaFromDocument } from './html-capture-runtime';
+import { getCardOverlayBoxStyle, isPointInCardOverlayBox } from './overlay-transform';
+import { normalizePath } from './path-utils';
+import { mountHTMLShell } from './shell-runtime';
+const SHELL_INTERACTIVE_SELECTOR = '[data-vvfx-html-shell-interactive="true"]';
+const EDITING_INTERACTIVE_SELECTOR = '[data-vvfx-html-editing-interactive="true"]';
+const CONTENT_INTERACTIVE_SELECTOR = [
+    '[data-vvfx-html-interaction-zone="self"]',
+    '[data-vvfx-html-interaction-zone="subtree"]',
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'summary',
+    'video[controls]',
+    'audio[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="textbox"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+const CONTENT_INTERACTION_NONE_SELECTOR = [
+    '[data-vvfx-html-interaction-zone="none"]',
+].join(', ');
+const EDITING_VIEWPORT_PADDING = 48;
+const EDITING_VIEWPORT_BOX_SCALE = 1.1;
+const AUTO_HEIGHT_EPSILON = 0.5;
+const CARD_RASTERIZE_READY_TIMEOUT = 3000;
+const CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
+const requestHTMLOverlayFrame = (callback) => {
+    if (typeof requestAnimationFrame === 'function') {
+        try {
+            return requestAnimationFrame(callback);
+        }
+        catch {
+            // Some non-browser test runtimes install a RAF polyfill that depends on window.
+        }
+    }
+    return setTimeout(() => {
+        callback(Date.now());
+    }, 16);
+};
+const cancelHTMLOverlayFrame = (frame) => {
+    if (typeof cancelAnimationFrame === 'function') {
+        try {
+            cancelAnimationFrame(frame);
+            return;
+        }
+        catch {
+            // Fall back to clearTimeout for frames created by requestHTMLOverlayFrame.
+        }
+    }
+    clearTimeout(frame);
+};
+export class HTMLOverlayManager {
+    options;
+    eventCleanups = [];
+    htmlRootConfigCleanups = new WeakMap();
+    pendingContentInteractionEvent;
+    contentInteractionFrame;
+    state = {
+        frameElements: new Map(),
+        elements: new Map(),
+        selectionElements: new Map(),
+        contentScaleElements: new Map(),
+        contentElements: new Map(),
+        contentMountElements: new Map(),
+        contentInteractionZones: new Map(),
+        contentInteractionZoneCleanups: new Map(),
+        contentInteractionResizeCleanups: new Map(),
+        contents: new Map(),
+        cleanups: new Map(),
+        autoHeightModes: new Map(),
+        autoHeightCleanups: new Map(),
+        autoHeightFrames: new Map(),
+        autoHeightStreamPhases: new Map(),
+    };
+    constructor(options) {
+        this.options = options;
+    }
+    attach() {
+        const { container } = this.options;
+        const layer = document.createElement('div');
+        if (getComputedStyle(container).position === 'static') {
+            container.style.position = 'relative';
+        }
+        layer.className = 'vvfx-card-html-overlay-layer';
+        layer.style.position = 'absolute';
+        layer.style.inset = '0';
+        layer.style.pointerEvents = 'none';
+        container.appendChild(layer);
+        this.state.layer = layer;
+        this.initDOMEvents();
+        this.initEvents();
+        this.scheduleRender();
+    }
+    get layerElement() {
+        return this.state.layer;
+    }
+    dispose() {
+        if (this.state.updateFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.state.updateFrame);
+            this.state.updateFrame = undefined;
+        }
+        if (this.contentInteractionFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.contentInteractionFrame);
+            this.contentInteractionFrame = undefined;
+        }
+        this.pendingContentInteractionEvent = undefined;
+        this.state.cleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.state.frameElements.clear();
+        this.state.elements.clear();
+        this.state.selectionElements.clear();
+        this.state.contentScaleElements.clear();
+        this.state.contentElements.clear();
+        this.state.contentMountElements.clear();
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionZoneCleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.state.contentInteractionZoneCleanups.clear();
+        this.state.contentInteractionResizeCleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
+        this.state.contents.clear();
+        this.state.cleanups.clear();
+        this.state.autoHeightModes.clear();
+        this.state.autoHeightCleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.state.autoHeightCleanups.clear();
+        this.state.autoHeightFrames.forEach(frame => {
+            cancelHTMLOverlayFrame(frame);
+        });
+        this.state.autoHeightFrames.clear();
+        this.state.autoHeightStreamPhases.clear();
+        this.eventCleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.eventCleanups = [];
+        this.state.layer?.remove();
+        this.state.layer = undefined;
+        this.state.selectionLayer = undefined;
+        this.options.container.removeEventListener('dblclick', this.handleContainerDoubleClick, true);
+        this.options.container.removeEventListener('mousedown', this.handleContainerMouseDown, true);
+        this.options.container.removeEventListener('mousemove', this.handleContainerMouseMove, true);
+        this.options.container.removeEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.removeEventListener('contextmenu', this.handleContainerContextMenu, true);
+    }
+    scheduleRender() {
+        if (this.state.updateFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.state.updateFrame);
+        }
+        this.state.updateFrame = requestHTMLOverlayFrame(() => {
+            this.state.updateFrame = undefined;
+            this.render();
+        });
+    }
+    invalidateCardHTML(id) {
+        this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
+    }
+    getHtmlCardWindow(id) {
+        const contentOverlay = this.state.contentElements.get(id);
+        const iframe = contentOverlay?.querySelector('iframe');
+        return iframe?.contentWindow;
+    }
+    patchCardHTML(id, patch) {
+        const html = this.state.contents.get(id);
+        if (!html) {
+            return false;
+        }
+        const patchHandler = html.content.patch;
+        if (!patchHandler) {
+            return false;
+        }
+        const context = this.createPatchContext(id, html);
+        return patchHandler(patch, context) !== false;
+    }
+    dispatchHtmlCardEvent(id, type, detail) {
+        const targetWindow = this.getHtmlCardWindow(id);
+        try {
+            if (!targetWindow || typeof targetWindow.postMessage !== 'function') {
+                return false;
+            }
+            targetWindow.postMessage({
+                detail,
+                payload: detail,
+                source: CARD_HTML_EVENT_MESSAGE_SOURCE,
+                type,
+            }, '*');
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    async rasterizeCard(id, options) {
+        if (this.state.updateFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.state.updateFrame);
+            this.state.updateFrame = undefined;
+        }
+        this.render();
+        const contentOverlay = this.state.contentElements.get(id);
+        if (!contentOverlay || options.width <= 0 || options.height <= 0) {
+            return undefined;
+        }
+        try {
+            await withTimeout(waitForCardCaptureReady(contentOverlay), CARD_RASTERIZE_READY_TIMEOUT);
+            const capture = await createCardCaptureTarget(contentOverlay, this.state.contents.get(id), {
+                width: options.width,
+                height: options.height,
+            });
+            try {
+                const image = await snapdom.toPng(capture.target, {
+                    embedFonts: true,
+                    backgroundColor: 'transparent',
+                    dpr: options.pixelRatio ?? window.devicePixelRatio ?? 2,
+                    ...options.snapdomOptions,
+                });
+                return image.src;
+            }
+            finally {
+                capture.cleanup();
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to rasterize card ${id}.`, error);
+            return undefined;
+        }
+    }
+    initEvents() {
+        const events = [
+            'pageDataChange',
+            'selectedItemChange',
+            'preSelectedItemChange',
+            'itemPropertyChange',
+            'viewportTransform',
+            'viewRebuildFinish',
+        ];
+        this.eventCleanups = events.map((event) => {
+            return this.options.emitter.on(event, () => {
+                if (event === 'viewportTransform') {
+                    this.handleViewportTransform();
+                }
+                this.invalidateContentInteractionZones();
+                this.scheduleRender();
+            });
+        });
+    }
+    initDOMEvents() {
+        this.options.container.addEventListener('dblclick', this.handleContainerDoubleClick, true);
+        this.options.container.addEventListener('mousedown', this.handleContainerMouseDown, true);
+        this.options.container.addEventListener('mousemove', this.handleContainerMouseMove, true);
+        this.options.container.addEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.addEventListener('contextmenu', this.handleContainerContextMenu, true);
+    }
+    handleContainerDoubleClick = (event) => {
+        const editingId = this.state.editing?.id;
+        if (editingId && this.isEventInsideOverlay(editingId, event)) {
+            return;
+        }
+        const targetId = this.getHTMLCardIdByEvent(event);
+        if (!targetId) {
+            if (editingId) {
+                this.exitEditing();
+            }
+            return;
+        }
+        if (!this.isEditableCard(targetId)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.enterEditing(targetId);
+    };
+    handleContainerMouseDown = (event) => {
+        if (event.button === 0) {
+            this.selectHTMLInteractionCard(event);
+        }
+        const editingId = this.state.editing?.id;
+        if (!editingId || this.isEventInsideOverlay(editingId, event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.exitEditing();
+    };
+    selectHTMLInteractionCard(event) {
+        const decision = this.resolveHTMLInteractionTarget(event);
+        if (decision.kind !== 'html') {
+            return;
+        }
+        this.options.setSelectedItemIds([decision.interaction.id]);
+    }
+    handleContainerMouseMove = (event) => {
+        this.scheduleActiveContentInteractionSync(event);
+        const hoverShellInteractiveId = this.getHoverShellInteractiveIdByEvent(event);
+        if (this.state.hoverShellInteractiveId === hoverShellInteractiveId) {
+            return;
+        }
+        const previousId = this.state.hoverShellInteractiveId;
+        this.state.hoverShellInteractiveId = hoverShellInteractiveId;
+        if (previousId) {
+            this.syncContentInteraction(previousId);
+        }
+        if (hoverShellInteractiveId) {
+            this.syncContentInteraction(hoverShellInteractiveId);
+        }
+    };
+    handleContainerMouseLeave = (event) => {
+        if (this.isMouseLeaveWithinContainer(event)) {
+            return;
+        }
+        if (this.contentInteractionFrame !== undefined) {
+            cancelHTMLOverlayFrame(this.contentInteractionFrame);
+            this.contentInteractionFrame = undefined;
+        }
+        this.pendingContentInteractionEvent = undefined;
+        this.setActiveContentInteraction(undefined);
+        const previousId = this.state.hoverShellInteractiveId;
+        if (!previousId) {
+            return;
+        }
+        this.state.hoverShellInteractiveId = undefined;
+        this.syncContentInteraction(previousId);
+    };
+    isMouseLeaveWithinContainer(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!relatedTarget) {
+            return false;
+        }
+        try {
+            return this.options.container.contains(relatedTarget);
+        }
+        catch {
+            return false;
+        }
+    }
+    handleContainerContextMenu = (event) => {
+        const activeInteraction = this.state.activeContentInteraction;
+        if (!activeInteraction || !this.isEventInsideOverlay(activeInteraction.id, event) || this.isHTMLContextMenuEvent(event)) {
+            return;
+        }
+        const canvas = this.options.getCanvasEventTarget?.();
+        if (!canvas) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.setActiveContentInteraction(undefined);
+        canvas.dispatchEvent(new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            screenX: event.screenX,
+            screenY: event.screenY,
+            button: event.button,
+            buttons: event.buttons,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+        }));
+    };
+    isHTMLContextMenuEvent(event) {
+        if (typeof Element !== 'function' || !(event.target instanceof Element)) {
+            return false;
+        }
+        return !!event.target.closest('[data-interaction-contextmenu="self"], [data-vvfx-html-contextmenu="self"]');
+    }
+    handleViewportTransform() {
+        const editing = this.state.editing;
+        if (!editing?.restoreViewport || editing.ignoreViewportZoomChange) {
+            return;
+        }
+        const viewport = this.options.getViewport();
+        if (viewport.zoom !== editing.restoreViewport.zoom ||
+            viewport.translation[0] !== editing.restoreViewport.translation[0] ||
+            viewport.translation[1] !== editing.restoreViewport.translation[1]) {
+            editing.restoreViewport = undefined;
+        }
+    }
+    render() {
+        const { layer, elements } = this.state;
+        if (!layer) {
+            return;
+        }
+        const items = this.options.getItems();
+        const frameByChildId = this.renderFrameOverlays(items, layer);
+        const selectionLayer = this.getOrCreateSelectionLayer(layer);
+        const visibleCardIds = new Set();
+        let editingVisible = false;
+        items.forEach((item) => {
+            if (!isCardItem(item) || !item.visible) {
+                return;
+            }
+            const html = this.options.resolveCardHTML(item);
+            if (html === undefined) {
+                return;
+            }
+            const itemBox = this.options.getViewBoxById(item.id);
+            if (!itemBox || itemBox.isEmpty()) {
+                return;
+            }
+            visibleCardIds.add(item.id);
+            editingVisible ||= this.state.editing?.id === item.id;
+            const frameId = frameByChildId.get(item.id);
+            const frameOverlay = frameId ? this.state.frameElements.get(frameId) : undefined;
+            const parentOverlay = frameOverlay ?? layer;
+            const frameBox = frameId ? this.options.getViewBoxById(frameId) : undefined;
+            const overlay = this.getOrCreateOverlay(item.id, parentOverlay, elements);
+            const contentOverlay = this.getOrCreateContentOverlay(item.id, overlay);
+            const selectionOverlay = this.getOrCreateSelectionOverlay(item.id, selectionLayer);
+            const offsetX = frameBox && !frameBox.isEmpty() ? frameBox.min.x : 0;
+            const offsetY = frameBox && !frameBox.isEmpty() ? frameBox.min.y : 0;
+            const boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY, this.isAutoScaleEnabled(item));
+            this.applyHTMLRootConfig(overlay, html);
+            overlay.style.left = boxStyle.left;
+            overlay.style.top = boxStyle.top;
+            overlay.style.width = boxStyle.width;
+            overlay.style.height = boxStyle.height;
+            overlay.style.transform = boxStyle.transform;
+            overlay.style.transformOrigin = '0 0';
+            const selectionBoxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, 0, 0, this.isAutoScaleEnabled(item));
+            selectionOverlay.style.left = selectionBoxStyle.left;
+            selectionOverlay.style.top = selectionBoxStyle.top;
+            selectionOverlay.style.width = selectionBoxStyle.width;
+            selectionOverlay.style.height = selectionBoxStyle.height;
+            selectionOverlay.style.transform = selectionBoxStyle.transform;
+            selectionOverlay.style.transformOrigin = '0 0';
+            this.applyHTMLRootConfig(selectionOverlay, html);
+            this.makeSelectionOverlayTransparent(selectionOverlay);
+            this.syncOverlaySelection(item.id, overlay, selectionOverlay);
+            this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
+            if (!this.state.contents.has(item.id)) {
+                this.renderOverlayHTML(item.id, contentOverlay, html);
+            }
+            this.syncAutoHeight(item.id, this.isAutoHeightEnabled(item));
+            this.syncContentInteraction(item.id);
+        });
+        elements.forEach((_overlay, id) => {
+            if (visibleCardIds.has(id)) {
+                return;
+            }
+            this.removeOverlay(id);
+        });
+        if (this.state.editing && !editingVisible) {
+            this.exitEditing();
+        }
+        this.syncOverlayOrder(items, frameByChildId, visibleCardIds);
+    }
+    syncOverlayOrder(items, frameByChildId, visibleCardIds) {
+        const { layer } = this.state;
+        if (!layer) {
+            return;
+        }
+        const rootElements = [];
+        for (const item of items) {
+            if (isFrameItem(item) && item.visible) {
+                const frameOverlay = this.state.frameElements.get(item.id);
+                if (frameOverlay) {
+                    rootElements.push(frameOverlay);
+                }
+                continue;
+            }
+            if (!isCardItem(item) || !visibleCardIds.has(item.id) || frameByChildId.has(item.id)) {
+                continue;
+            }
+            const overlay = this.state.elements.get(item.id);
+            if (overlay) {
+                rootElements.push(overlay);
+            }
+        }
+        syncElementStackOrder(layer, rootElements);
+        if (this.state.selectionLayer) {
+            this.state.selectionLayer.style.zIndex = `${rootElements.length + 1}`;
+        }
+        this.state.frameElements.forEach((frameOverlay, frameId) => {
+            const frameElements = [];
+            for (const item of items) {
+                if (!isCardItem(item) || !visibleCardIds.has(item.id) || frameByChildId.get(item.id) !== frameId) {
+                    continue;
+                }
+                const overlay = this.state.elements.get(item.id);
+                if (overlay) {
+                    frameElements.push(overlay);
+                }
+            }
+            syncElementStackOrder(frameOverlay, frameElements);
+        });
+    }
+    getOrCreateSelectionLayer(layer) {
+        if (this.state.selectionLayer) {
+            if (this.state.selectionLayer.parentElement !== layer) {
+                layer.appendChild(this.state.selectionLayer);
+            }
+            return this.state.selectionLayer;
+        }
+        const ownerDocument = layer.ownerDocument ?? (typeof document === 'undefined' ? undefined : document);
+        if (!ownerDocument) {
+            return layer;
+        }
+        const selectionLayer = ownerDocument.createElement('div');
+        selectionLayer.className = 'vvfx-card-html-overlay-selection-layer';
+        selectionLayer.style.position = 'absolute';
+        selectionLayer.style.inset = '0';
+        selectionLayer.style.pointerEvents = 'none';
+        selectionLayer.style.zIndex = '1';
+        layer.appendChild(selectionLayer);
+        this.state.selectionLayer = selectionLayer;
+        return selectionLayer;
+    }
+    renderFrameOverlays(items, layer) {
+        const visibleFrameIds = new Set();
+        const frameByChildId = new Map();
+        items.forEach((item) => {
+            if (!isFrameItem(item) || !item.visible) {
+                return;
+            }
+            const frameBox = this.options.getViewBoxById(item.id);
+            if (!frameBox || frameBox.isEmpty()) {
+                return;
+            }
+            visibleFrameIds.add(item.id);
+            item.children.forEach(childId => {
+                frameByChildId.set(childId, item.id);
+            });
+            const frameOverlay = this.getOrCreateFrameOverlay(item.id, layer);
+            frameOverlay.style.left = `${frameBox.min.x}px`;
+            frameOverlay.style.top = `${frameBox.min.y}px`;
+            frameOverlay.style.width = `${frameBox.max.x - frameBox.min.x}px`;
+            frameOverlay.style.height = `${frameBox.max.y - frameBox.min.y}px`;
+        });
+        this.state.frameElements.forEach((frameOverlay, id) => {
+            if (visibleFrameIds.has(id)) {
+                return;
+            }
+            frameOverlay.remove();
+            this.state.frameElements.delete(id);
+        });
+        return frameByChildId;
+    }
+    getOrCreateFrameOverlay(id, layer) {
+        let frameOverlay = this.state.frameElements.get(id);
+        if (frameOverlay) {
+            return frameOverlay;
+        }
+        frameOverlay = document.createElement('div');
+        frameOverlay.className = 'vvfx-frame-html-overlay';
+        frameOverlay.dataset.itemId = id;
+        frameOverlay.style.position = 'absolute';
+        frameOverlay.style.overflow = 'hidden';
+        frameOverlay.style.pointerEvents = 'none';
+        layer.appendChild(frameOverlay);
+        this.state.frameElements.set(id, frameOverlay);
+        return frameOverlay;
+    }
+    getOrCreateOverlay(id, parent, elements) {
+        let overlay = elements.get(id);
+        if (overlay) {
+            if (overlay.parentElement !== parent) {
+                parent.appendChild(overlay);
+            }
+            return overlay;
+        }
+        overlay = document.createElement('div');
+        overlay.className = 'vvfx-card-html-overlay';
+        overlay.dataset.itemId = id;
+        overlay.style.position = 'absolute';
+        overlay.style.overflow = 'hidden';
+        overlay.style.pointerEvents = 'none';
+        parent.appendChild(overlay);
+        elements.set(id, overlay);
+        return overlay;
+    }
+    getOrCreateSelectionOverlay(id, parent) {
+        let selectionOverlay = this.state.selectionElements.get(id);
+        if (selectionOverlay) {
+            if (selectionOverlay.parentElement !== parent) {
+                parent.appendChild(selectionOverlay);
+            }
+            return selectionOverlay;
+        }
+        selectionOverlay = document.createElement('div');
+        selectionOverlay.className = 'vvfx-card-html-overlay-selection';
+        selectionOverlay.dataset.itemId = id;
+        selectionOverlay.style.position = 'absolute';
+        selectionOverlay.style.pointerEvents = 'none';
+        selectionOverlay.style.zIndex = '1';
+        parent.appendChild(selectionOverlay);
+        this.state.selectionElements.set(id, selectionOverlay);
+        return selectionOverlay;
+    }
+    syncOverlaySelection(id, overlay, selectionOverlay) {
+        const isSelected = this.options.getSelectedItemIds().includes(id);
+        const isPreSelected = !isSelected && this.options.getPreSelectedItemId() === id;
+        overlay.dataset.selected = isSelected ? 'true' : 'false';
+        overlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.dataset.selected = isSelected ? 'true' : 'false';
+        selectionOverlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.style.boxShadow = isSelected
+            ? this.getSelectionBoxShadow()
+            : isPreSelected
+                ? this.getPreSelectionBoxShadow()
+                : '';
+    }
+    getSelectionBoxShadow() {
+        const { color, alpha, width } = this.options.getSelectionEdgeStyle();
+        return `inset 0 0 0 ${formatCssNumber(width)}px ${formatCssColor(color, alpha)}`;
+    }
+    getPreSelectionBoxShadow() {
+        const { color, alpha, width } = this.options.getPreSelectionEdgeStyle();
+        return `inset 0 0 0 ${formatCssNumber(width)}px ${formatCssColor(color, alpha)}`;
+    }
+    getHTMLCardIdByEvent(event) {
+        const layer = this.state.layer;
+        if (!layer) {
+            return undefined;
+        }
+        const point = this.getLayerPoint(event);
+        const items = this.options.getItems();
+        for (let i = items.length - 1; i >= 0; i--) {
+            const item = items[i];
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
+                continue;
+            }
+            const box = this.options.getViewBoxById(item.id);
+            if (!box.isEmpty() && isPointInCardOverlayBox(box, point)) {
+                return item.id;
+            }
+        }
+        return undefined;
+    }
+    getHoverShellInteractiveIdByEvent(event) {
+        const layer = this.state.layer;
+        if (!layer) {
+            return undefined;
+        }
+        const point = this.getLayerPoint(event);
+        const items = this.options.getItems();
+        for (let i = items.length - 1; i >= 0; i--) {
+            const item = items[i];
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
+                continue;
+            }
+            const box = this.options.getViewBoxById(item.id);
+            if (box.isEmpty() || !isPointInCardOverlayBox(box, point)) {
+                continue;
+            }
+            const contentOverlay = this.state.contentElements.get(item.id);
+            const interactiveElements = contentOverlay
+                ? Array.from(contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR))
+                : [];
+            const isHoveringShellInteractive = interactiveElements.some(element => isMouseEventInsideRect(event, element.getBoundingClientRect()));
+            return isHoveringShellInteractive ? item.id : undefined;
+        }
+        return undefined;
+    }
+    syncActiveContentInteraction(event) {
+        const decision = this.resolveHTMLInteractionTarget(event);
+        if (decision.kind === 'canvas' && this.shouldKeepActiveContentInteractionForFocusedElement()) {
+            return;
+        }
+        this.setActiveContentInteraction(decision.kind === 'html' ? decision.interaction : undefined);
+    }
+    scheduleActiveContentInteractionSync(event) {
+        if (typeof requestAnimationFrame !== 'function') {
+            this.syncActiveContentInteraction(event);
+            return;
+        }
+        this.pendingContentInteractionEvent = event;
+        if (this.contentInteractionFrame !== undefined) {
+            return;
+        }
+        try {
+            this.contentInteractionFrame = requestAnimationFrame(() => {
+                this.contentInteractionFrame = undefined;
+                const pendingEvent = this.pendingContentInteractionEvent;
+                this.pendingContentInteractionEvent = undefined;
+                if (pendingEvent) {
+                    this.syncActiveContentInteraction(pendingEvent);
+                }
+            });
+        }
+        catch {
+            this.contentInteractionFrame = undefined;
+            this.pendingContentInteractionEvent = undefined;
+            this.syncActiveContentInteraction(event);
+        }
+    }
+    setActiveContentInteraction(zone) {
+        const previous = this.state.activeContentInteraction;
+        if (previous?.id === zone?.id && previous?.element === zone?.element && previous?.zone === zone?.zone) {
+            return;
+        }
+        this.state.activeContentInteraction = zone;
+        const changedIds = new Set();
+        if (previous) {
+            changedIds.add(previous.id);
+        }
+        if (zone) {
+            changedIds.add(zone.id);
+        }
+        changedIds.forEach(id => {
+            this.syncContentInteraction(id);
+        });
+    }
+    shouldKeepActiveContentInteractionForFocusedElement() {
+        const activeInteraction = this.state.activeContentInteraction;
+        if (!activeInteraction || typeof document === 'undefined') {
+            return false;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return false;
+        }
+        const interactionElement = activeInteraction.element;
+        return interactionElement === activeElement || (typeof interactionElement.contains === 'function' &&
+            interactionElement.contains(activeElement));
+    }
+    resolveHTMLInteractionTarget(event) {
+        const id = this.getHTMLCardIdByEvent(event);
+        if (!id || this.isEditableCard(id)) {
+            return { kind: 'canvas', id };
+        }
+        const contentOverlay = this.state.contentElements.get(id);
+        if (!contentOverlay) {
+            return { kind: 'canvas', id };
+        }
+        const activeSubtree = this.getActiveSubtreeInteractionAtEvent(id, event);
+        if (activeSubtree) {
+            return {
+                kind: 'html',
+                interaction: activeSubtree,
+            };
+        }
+        const matchedZones = this.getContentInteractionZones(id, contentOverlay).filter(zone => isMouseEventInsideRect(event, zone.rect));
+        const zone = this.resolveContentInteractionZone(matchedZones);
+        if (zone) {
+            return {
+                kind: 'html',
+                interaction: {
+                    id,
+                    element: zone.element,
+                    zone: zone.zone,
+                },
+            };
+        }
+        return { kind: 'canvas', id };
+    }
+    getActiveSubtreeInteractionAtEvent(id, event) {
+        const activeInteraction = this.state.activeContentInteraction;
+        if (activeInteraction?.id !== id || activeInteraction.zone !== 'subtree') {
+            return undefined;
+        }
+        const rect = activeInteraction.element.getBoundingClientRect();
+        return isMouseEventInsideRect(event, rect) ? activeInteraction : undefined;
+    }
+    resolveContentInteractionZone(zones) {
+        if (zones.length <= 1) {
+            return zones[0];
+        }
+        const subtreeRoot = zones.find(candidate => candidate.zone === 'subtree' &&
+            typeof candidate.element.contains === 'function' &&
+            zones.some(zone => zone.element !== candidate.element && candidate.element.contains(zone.element)));
+        return subtreeRoot ?? zones[0];
+    }
+    getContentInteractionZones(id, contentOverlay) {
+        const cachedZones = this.state.contentInteractionZones.get(id);
+        if (cachedZones) {
+            return cachedZones;
+        }
+        const zones = Array.from(contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id)))
+            .filter(element => !this.isContentInteractionDisabled(element))
+            .map(element => ({
+            element,
+            rect: element.getBoundingClientRect(),
+            zone: this.getContentInteractionZoneMode(element),
+        }));
+        this.state.contentInteractionZones.set(id, zones);
+        this.observeContentInteractionZoneResizes(id, zones);
+        return zones;
+    }
+    getContentInteractiveSelector(id) {
+        const item = this.options.getItems().find(item => item.id === id);
+        if (!item) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        const selectors = this.options.resolveCardTypeConfig(item)?.htmlInteractionSelectors?.filter(Boolean) ?? [];
+        if (selectors.length === 0) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        return [CONTENT_INTERACTIVE_SELECTOR, ...selectors].join(', ');
+    }
+    isContentInteractionDisabled(element) {
+        if (typeof element.closest !== 'function') {
+            return false;
+        }
+        return !!element.closest(CONTENT_INTERACTION_NONE_SELECTOR);
+    }
+    getContentInteractionZoneMode(element) {
+        const zone = element.dataset.vvfxHtmlInteractionZone;
+        return zone === 'subtree' ? 'subtree' : 'self';
+    }
+    invalidateContentInteractionZones(id) {
+        if (id) {
+            this.state.contentInteractionZones.delete(id);
+            this.state.contentInteractionResizeCleanups.get(id)?.();
+            this.state.contentInteractionResizeCleanups.delete(id);
+            return;
+        }
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionResizeCleanups.forEach(cleanup => {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
+    }
+    observeContentInteractionZoneResizes(id, zones) {
+        this.state.contentInteractionResizeCleanups.get(id)?.();
+        this.state.contentInteractionResizeCleanups.delete(id);
+        if (zones.length === 0 || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            this.invalidateContentInteractionZones(id);
+        });
+        zones.forEach(zone => {
+            observer.observe(zone.element);
+        });
+        this.state.contentInteractionResizeCleanups.set(id, () => {
+            observer.disconnect();
+        });
+    }
+    getLayerPoint(event) {
+        const rect = this.options.container.getBoundingClientRect();
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+    }
+    getOrCreateContentOverlay(id, overlay) {
+        let contentOverlay = this.state.contentElements.get(id);
+        let scaleOverlay = this.state.contentScaleElements.get(id);
+        if (contentOverlay) {
+            if (!scaleOverlay) {
+                scaleOverlay = this.createContentScaleOverlay(id);
+                scaleOverlay.appendChild(contentOverlay);
+                this.state.contentScaleElements.set(id, scaleOverlay);
+            }
+            if (scaleOverlay.parentElement !== overlay) {
+                overlay.appendChild(scaleOverlay);
+            }
+            if (contentOverlay.parentElement !== scaleOverlay) {
+                scaleOverlay.appendChild(contentOverlay);
+            }
+            return contentOverlay;
+        }
+        scaleOverlay = this.createContentScaleOverlay(id);
+        contentOverlay = document.createElement('div');
+        contentOverlay.className = 'vvfx-card-html-overlay-content';
+        contentOverlay.dataset.itemId = id;
+        contentOverlay.style.position = 'absolute';
+        contentOverlay.style.left = '0';
+        contentOverlay.style.top = '0';
+        contentOverlay.style.overflow = 'hidden';
+        contentOverlay.style.pointerEvents = 'none';
+        scaleOverlay.appendChild(contentOverlay);
+        overlay.appendChild(scaleOverlay);
+        this.state.contentScaleElements.set(id, scaleOverlay);
+        this.state.contentElements.set(id, contentOverlay);
+        return contentOverlay;
+    }
+    createContentScaleOverlay(id) {
+        const scaleOverlay = document.createElement('div');
+        scaleOverlay.className = 'vvfx-card-html-overlay-content-scale';
+        scaleOverlay.dataset.itemId = id;
+        scaleOverlay.style.position = 'absolute';
+        scaleOverlay.style.left = '0';
+        scaleOverlay.style.top = '0';
+        scaleOverlay.style.transformOrigin = '0 0';
+        scaleOverlay.style.pointerEvents = 'none';
+        return scaleOverlay;
+    }
+    syncContentScale(id, width, height) {
+        const scaleOverlay = this.state.contentScaleElements.get(id);
+        const contentOverlay = this.state.contentElements.get(id);
+        if (!scaleOverlay || !contentOverlay || width <= 0 || height <= 0) {
+            return;
+        }
+        const nextWidth = `${width}px`;
+        const nextHeight = `${height}px`;
+        const sizeChanged = scaleOverlay.style.width !== nextWidth || scaleOverlay.style.height !== nextHeight;
+        scaleOverlay.style.width = nextWidth;
+        scaleOverlay.style.height = nextHeight;
+        scaleOverlay.style.transform = 'none';
+        contentOverlay.style.width = nextWidth;
+        contentOverlay.style.height = nextHeight;
+        if (sizeChanged && this.state.autoHeightModes.get(id) === 'message') {
+            this.requestAutoHeightFromIframes(id, contentOverlay);
+        }
+        if (sizeChanged) {
+            this.invalidateContentInteractionZones(id);
+        }
+    }
+    requestAutoHeightFromIframes(id, contentOverlay) {
+        contentOverlay.querySelectorAll('iframe').forEach(iframe => {
+            requestCardHTMLAutoHeight(iframe, id);
+        });
+    }
+    syncContentInteraction(id) {
+        const isEditing = this.state.editing?.id === id;
+        const activeInteraction = this.state.activeContentInteraction?.id === id
+            ? this.state.activeContentInteraction
+            : undefined;
+        const overlay = this.state.elements.get(id);
+        const scaleOverlay = this.state.contentScaleElements.get(id);
+        const contentOverlay = this.state.contentElements.get(id);
+        const contentMount = this.state.contentMountElements.get(id);
+        const isInteractive = isEditing || !!activeInteraction;
+        if (overlay) {
+            overlay.dataset.editing = isEditing ? 'true' : 'false';
+            overlay.style.pointerEvents = 'none';
+        }
+        if (scaleOverlay) {
+            scaleOverlay.dataset.editing = isEditing ? 'true' : 'false';
+            scaleOverlay.style.pointerEvents = 'none';
+        }
+        if (contentOverlay) {
+            contentOverlay.dataset.editing = isEditing ? 'true' : 'false';
+            contentOverlay.style.pointerEvents = isInteractive ? 'auto' : 'none';
+            contentOverlay.querySelectorAll('iframe').forEach(iframe => {
+                const isActiveIframe = isEditing || activeInteraction?.element === iframe;
+                iframe.style.pointerEvents = isActiveIframe ? 'auto' : 'none';
+                iframe.tabIndex = isActiveIframe ? 0 : -1;
+            });
+            this.syncShellInteraction(id, contentOverlay, isInteractive);
+            this.syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive);
+        }
+        if (contentMount) {
+            contentMount.dataset.editing = isEditing ? 'true' : 'false';
+            contentMount.style.pointerEvents = isInteractive ? 'auto' : 'none';
+            contentMount.inert = !isInteractive;
+            if (isInteractive) {
+                contentMount.removeAttribute('aria-hidden');
+            }
+            else {
+                contentMount.setAttribute('aria-hidden', 'true');
+            }
+        }
+    }
+    syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive) {
+        const activeElement = activeInteraction?.element;
+        contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id)).forEach(element => {
+            if (activeInteraction?.zone === 'subtree' &&
+                activeElement &&
+                element !== activeElement &&
+                typeof activeElement.contains === 'function' &&
+                activeElement.contains(element)) {
+                this.clearContentInteractionState(element);
+                return;
+            }
+            if (!isInteractive) {
+                this.clearContentInteractionState(element);
+                return;
+            }
+            if (this.isContentInteractionDisabled(element)) {
+                element.dataset.vvfxHtmlInteractionActive = 'false';
+                element.style.pointerEvents = 'none';
+                return;
+            }
+            const isElementInteractive = isEditing || activeElement === element || (activeInteraction?.zone === 'subtree' &&
+                typeof activeElement?.contains === 'function' &&
+                activeElement.contains(element));
+            element.dataset.vvfxHtmlInteractionActive = isElementInteractive ? 'true' : 'false';
+            element.style.pointerEvents = isElementInteractive ? 'auto' : 'none';
+        });
+    }
+    clearContentInteractionState(element) {
+        delete element.dataset.vvfxHtmlInteractionActive;
+        element.style.pointerEvents = '';
+    }
+    syncShellInteraction(id, contentOverlay, isInteractive) {
+        const isHoveringShellInteractive = this.state.hoverShellInteractiveId === id;
+        const isShellInteractiveActive = isInteractive || isHoveringShellInteractive;
+        contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR).forEach(element => {
+            element.dataset.vvfxHtmlShellInteractiveHover = isHoveringShellInteractive ? 'true' : 'false';
+            element.dataset.vvfxHtmlShellInteractiveActive = isShellInteractiveActive ? 'true' : 'false';
+            element.style.pointerEvents = isShellInteractiveActive ? 'auto' : 'none';
+        });
+        contentOverlay.querySelectorAll(EDITING_INTERACTIVE_SELECTOR).forEach(element => {
+            element.style.pointerEvents = isInteractive ? 'auto' : 'none';
+        });
+    }
+    enterEditing(id) {
+        if (this.state.editing?.id === id) {
+            return;
+        }
+        if (!this.isEditableCard(id)) {
+            return;
+        }
+        const box = this.options.getViewBoxById(id);
+        if (box.isEmpty()) {
+            return;
+        }
+        this.exitEditing({ restoreZoom: false });
+        const currentViewport = this.options.getViewport();
+        const currentZoom = currentViewport.zoom;
+        const fitZoom = this.getEditingFitZoom(box, currentZoom);
+        const shouldFitViewport = fitZoom === undefined || fitZoom >= currentZoom;
+        this.state.editing = {
+            id,
+            restoreViewport: shouldFitViewport
+                ? {
+                    zoom: currentViewport.zoom,
+                    translation: [...currentViewport.translation],
+                }
+                : undefined,
+            ignoreViewportZoomChange: true,
+        };
+        this.syncContentInteraction(id);
+        if (shouldFitViewport) {
+            this.options.viewportFit(box);
+        }
+        const editing = this.state.editing;
+        if (editing?.id === id) {
+            editing.ignoreViewportZoomChange = false;
+        }
+        this.scheduleRender();
+    }
+    exitEditing(options) {
+        const editing = this.state.editing;
+        if (!editing) {
+            return;
+        }
+        this.state.editing = undefined;
+        this.syncContentInteraction(editing.id);
+        if (options?.restoreZoom === false || editing.restoreViewport === undefined) {
+            this.scheduleRender();
+            return;
+        }
+        this.options.setViewport(editing.restoreViewport);
+        this.scheduleRender();
+    }
+    isEditableCard(id) {
+        const item = this.options.getItems().find(item => item.id === id);
+        return isCardItem(item) && this.options.resolveCardTypeConfig(item)?.editable !== false;
+    }
+    getEditingFitZoom(box, currentZoom) {
+        const viewportElement = this.options.container.parentElement;
+        if (!viewportElement) {
+            return undefined;
+        }
+        const width = viewportElement.offsetWidth - EDITING_VIEWPORT_PADDING * 2;
+        const height = viewportElement.offsetHeight - EDITING_VIEWPORT_PADDING * 2;
+        if (width <= 0 || height <= 0) {
+            return undefined;
+        }
+        const fitBox = box.clone().scale(EDITING_VIEWPORT_BOX_SCALE);
+        const size = fitBox.getSize();
+        if (size.x <= 0 || size.y <= 0) {
+            return undefined;
+        }
+        const fitScale = size.x / width * height > size.y ? 1 / (size.x / width) : 1 / (size.y / height);
+        return fitScale * currentZoom;
+    }
+    isEventInsideOverlay(id, event) {
+        const overlay = this.state.elements.get(id);
+        return !!overlay && event.target instanceof Node && overlay.contains(event.target);
+    }
+    renderOverlayHTML(id, overlay, html) {
+        this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
+        overlay.innerHTML = '';
+        const shell = mountHTMLShell(overlay, html.content, html.shell);
+        const autoHeightMeasureElement = shell.contentContainer.isConnected ? shell.contentContainer : overlay;
+        this.state.contentMountElements.set(id, autoHeightMeasureElement);
+        const item = this.options.getItems().find(item => item.id === id);
+        const contentCleanup = this.renderOverlayContent(shell.contentContainer, html.content, {
+            id,
+            autoHeight: this.isAutoHeightEnabled(item),
+        });
+        this.observeContentInteractionZones(id, shell.contentContainer);
+        this.state.cleanups.set(id, () => {
+            contentCleanup?.();
+            shell.cleanup?.();
+        });
+        this.state.contents.set(id, html);
+    }
+    createPatchContext(id, html) {
+        return {
+            id,
+            html,
+            content: html.content,
+            container: this.state.contentMountElements.get(id),
+            contentWindow: this.getHtmlCardWindow(id),
+            refresh: () => {
+                this.invalidateCardHTML(id);
+                this.scheduleRender();
+            },
+        };
+    }
+    observeContentInteractionZones(id, contentContainer) {
+        this.state.contentInteractionZoneCleanups.get(id)?.();
+        this.state.contentInteractionZoneCleanups.delete(id);
+        if (typeof MutationObserver !== 'function') {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            this.invalidateContentInteractionZones(id);
+        });
+        observer.observe(contentContainer, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        this.state.contentInteractionZoneCleanups.set(id, () => {
+            observer.disconnect();
+        });
+    }
+    applyHTMLRootConfig(root, html) {
+        this.htmlRootConfigCleanups.get(root)?.();
+        this.htmlRootConfigCleanups.delete(root);
+        const config = html.root;
+        if (!config) {
+            return;
+        }
+        const classNames = config.className?.split(/\s+/).filter(Boolean) ?? [];
+        const styleProperties = [];
+        classNames.forEach(className => {
+            root.classList.add(className);
+        });
+        Object.entries(config.style ?? {}).forEach(([property, value]) => {
+            if (value === undefined) {
+                return;
+            }
+            styleProperties.push(property);
+            if (property.startsWith('--') || property.includes('-')) {
+                root.style.setProperty(property, String(value));
+                return;
+            }
+            ;
+            root.style[property] = String(value);
+        });
+        this.htmlRootConfigCleanups.set(root, () => {
+            classNames.forEach(className => {
+                root.classList.remove(className);
+            });
+            styleProperties.forEach(property => {
+                if (property.startsWith('--') || property.includes('-')) {
+                    root.style.removeProperty(property);
+                    return;
+                }
+                ;
+                root.style[property] = '';
+            });
+        });
+    }
+    makeSelectionOverlayTransparent(selectionOverlay) {
+        selectionOverlay.style.background = 'transparent';
+        selectionOverlay.style.backgroundColor = 'transparent';
+    }
+    renderOverlayContent(overlay, content, options) {
+        switch (content.kind) {
+            case 'inline':
+                if (options?.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
+                return this.chainCleanups(() => content.cleanup?.(overlay), renderDocumentContent(overlay, {
+                    kind: 'document',
+                    entry: 'index.html',
+                    files: {
+                        'index.html': content.html,
+                    },
+                    allowAnchorNavigation: content.allowAnchorNavigation,
+                    sandbox: content.sandbox,
+                }, {
+                    autoHeightId: options?.autoHeight ? options.id : undefined,
+                    onAutoHeight: options?.autoHeight ? height => {
+                        this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: options?.autoHeight ? phase => {
+                        this.setAutoHeightStreamPhase(options.id, phase);
+                    } : undefined,
+                }));
+            case 'dom': {
+                if (options?.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'measure');
+                }
+                if (content.target === 'iframe') {
+                    return renderDOMContentInIframe(overlay, content.render, content.cleanup);
+                }
+                content.render(overlay);
+                return content.cleanup ? () => content.cleanup?.(overlay) : undefined;
+            }
+            case 'document':
+                if (options?.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
+                return this.chainCleanups(() => content.cleanup?.(overlay), renderDocumentContent(overlay, content, {
+                    autoHeightId: options?.autoHeight ? options.id : undefined,
+                    onAutoHeight: options?.autoHeight ? height => {
+                        this.applyAutoHeight(options.id, height);
+                    } : undefined,
+                    onStreamRuntimePhase: options?.autoHeight ? phase => {
+                        this.setAutoHeightStreamPhase(options.id, phase);
+                    } : undefined,
+                }));
+        }
+    }
+    chainCleanups(...cleanups) {
+        const validCleanups = cleanups.filter((cleanup) => typeof cleanup === 'function');
+        if (validCleanups.length === 0) {
+            return undefined;
+        }
+        return () => {
+            validCleanups.forEach(cleanup => {
+                cleanup();
+            });
+        };
+    }
+    cleanupOverlayContent(id) {
+        const cleanup = this.state.cleanups.get(id);
+        if (cleanup) {
+            cleanup();
+            this.state.cleanups.delete(id);
+        }
+        this.state.contents.delete(id);
+        this.state.contentMountElements.delete(id);
+        this.state.autoHeightModes.delete(id);
+        this.state.autoHeightStreamPhases.delete(id);
+        this.invalidateContentInteractionZones(id);
+        this.state.contentInteractionZoneCleanups.get(id)?.();
+        this.state.contentInteractionZoneCleanups.delete(id);
+        this.cleanupAutoHeight(id);
+    }
+    removeOverlay(id) {
+        this.cleanupOverlayContent(id);
+        this.state.elements.get(id)?.remove();
+        this.state.selectionElements.get(id)?.remove();
+        this.state.elements.delete(id);
+        this.state.selectionElements.delete(id);
+        this.state.contentScaleElements.delete(id);
+        this.state.contentElements.delete(id);
+    }
+    syncAutoHeight(id, enabled) {
+        if (!enabled) {
+            this.cleanupAutoHeight(id);
+            return;
+        }
+        this.ensureAutoHeightMode(id);
+        if (!this.state.autoHeightCleanups.has(id)) {
+            this.state.autoHeightCleanups.set(id, this.createAutoHeightObserver(id));
+        }
+        this.scheduleAutoHeightMeasure(id);
+    }
+    ensureAutoHeightMode(id) {
+        if (this.state.autoHeightModes.has(id)) {
+            return;
+        }
+        const content = this.state.contents.get(id)?.content;
+        if (!content) {
+            return;
+        }
+        this.state.autoHeightModes.set(id, content.kind === 'inline' || content.kind === 'document' ? 'message' : 'measure');
+    }
+    createAutoHeightObserver(id) {
+        const cleanupFns = [];
+        const observeElement = (element) => {
+            if (!element) {
+                return;
+            }
+            const resizeObserver = new ResizeObserver(() => {
+                this.scheduleAutoHeightMeasure(id);
+            });
+            resizeObserver.observe(element);
+            cleanupFns.push(() => {
+                resizeObserver.disconnect();
+            });
+            const mutationObserver = new MutationObserver(() => {
+                this.scheduleAutoHeightMeasure(id);
+            });
+            mutationObserver.observe(element, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+            cleanupFns.push(() => {
+                mutationObserver.disconnect();
+            });
+        };
+        const mount = this.state.contentMountElements.get(id);
+        observeElement(mount);
+        mount?.querySelectorAll('iframe').forEach(iframe => {
+            const syncIframeDocument = () => {
+                let doc = null;
+                try {
+                    doc = iframe.contentDocument;
+                }
+                catch {
+                    doc = null;
+                }
+                if (!doc) {
+                    return;
+                }
+                observeElement(doc.documentElement);
+                observeElement(doc.body);
+                this.scheduleAutoHeightMeasure(id);
+            };
+            iframe.addEventListener('load', syncIframeDocument);
+            cleanupFns.push(() => {
+                iframe.removeEventListener('load', syncIframeDocument);
+            });
+            syncIframeDocument();
+        });
+        return () => {
+            cleanupFns.forEach(cleanup => {
+                cleanup();
+            });
+        };
+    }
+    scheduleAutoHeightMeasure(id) {
+        if (this.state.autoHeightFrames.has(id)) {
+            return;
+        }
+        const frame = requestHTMLOverlayFrame(() => {
+            this.state.autoHeightFrames.delete(id);
+            this.measureAutoHeight(id);
+        });
+        this.state.autoHeightFrames.set(id, frame);
+    }
+    measureAutoHeight(id) {
+        const item = this.options.getItems().find(candidate => candidate.id === id);
+        if (!this.isAutoHeightEnabled(item)) {
+            this.cleanupAutoHeight(id);
+            return;
+        }
+        const mount = this.state.contentMountElements.get(id);
+        if (!mount) {
+            return;
+        }
+        const height = this.getNaturalContentHeight(mount);
+        this.applyAutoHeight(id, height);
+    }
+    getNaturalContentHeight(element) {
+        const iframeHeights = Array.from(element.querySelectorAll('iframe'))
+            .map(iframe => this.getIframeNaturalContentHeight(iframe))
+            .filter((height) => typeof height === 'number' && Number.isFinite(height) && height > 0);
+        const childHeight = this.getChildrenNaturalHeight(element, {
+            includeIframes: iframeHeights.length === 0,
+        });
+        const naturalHeight = Math.max(childHeight, ...iframeHeights);
+        return naturalHeight > 0 ? naturalHeight : element.scrollHeight;
+    }
+    getIframeNaturalContentHeight(iframe) {
+        const doc = iframe.contentDocument;
+        if (!doc) {
+            return undefined;
+        }
+        const body = doc.body;
+        const documentElement = doc.documentElement;
+        if (!documentElement) {
+            return undefined;
+        }
+        const childHeight = body ? this.getChildrenNaturalHeight(body) : 0;
+        if (childHeight > 0) {
+            return childHeight;
+        }
+        return Math.max(documentElement.scrollHeight, body?.scrollHeight ?? 0);
+    }
+    getChildrenNaturalHeight(element, options) {
+        const includeIframes = options?.includeIframes ?? true;
+        return Array.from(element.childNodes).reduce((height, child) => {
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                const childElement = child;
+                if (!includeIframes && childElement.tagName === 'IFRAME') {
+                    return height;
+                }
+                if (globalThis.getComputedStyle(childElement).position === 'fixed') {
+                    return height;
+                }
+                return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
+            }
+            if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+                const range = element.ownerDocument.createRange();
+                range.selectNodeContents(child);
+                const rects = Array.from(range.getClientRects());
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                range.detach();
+                return rects.reduce((textHeight, rect) => Math.max(textHeight, rect.bottom - element.getBoundingClientRect().top), height);
+            }
+            return height;
+        }, 0);
+    }
+    cleanupAutoHeight(id) {
+        const cleanup = this.state.autoHeightCleanups.get(id);
+        if (cleanup) {
+            cleanup();
+            this.state.autoHeightCleanups.delete(id);
+        }
+        const frame = this.state.autoHeightFrames.get(id);
+        if (frame !== undefined) {
+            cancelHTMLOverlayFrame(frame);
+            this.state.autoHeightFrames.delete(id);
+        }
+    }
+    applyAutoHeight(id, height) {
+        const item = this.options.getItems().find(candidate => candidate.id === id);
+        if (!isCardItem(item) || !this.isAutoHeightEnabled(item)) {
+            return;
+        }
+        if (!Number.isFinite(height) || height <= 0) {
+            return;
+        }
+        const nextHeight = Math.ceil(this.getAutoHeightItemHeight(item, height));
+        if (this.isAutoHeightStreamActive(id) && nextHeight < item.property.height) {
+            return;
+        }
+        if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
+            return;
+        }
+        this.options.setCardItemHeight(id, nextHeight, {
+            anchor: this.getAutoHeightAnchor(item),
+            previousHeight: item.property.height,
+        });
+    }
+    setAutoHeightStreamPhase(id, phase) {
+        if (phase === 'parsing' || phase === 'draining' || phase === 'finalizing') {
+            this.state.autoHeightStreamPhases.set(id, phase);
+            return;
+        }
+        this.state.autoHeightStreamPhases.delete(id);
+    }
+    isAutoHeightStreamActive(id) {
+        return this.state.autoHeightStreamPhases.has(id);
+    }
+    getAutoHeightAnchor(item) {
+        if (!isCardItem(item)) {
+            return 'top';
+        }
+        return this.options.resolveCardTypeConfig(item)?.autoHeightAnchor ?? 'top';
+    }
+    getAutoHeightItemHeight(item, contentHeight) {
+        if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
+            return contentHeight;
+        }
+        const scaleOverlay = this.state.contentScaleElements.get(item.id);
+        const displayedHeight = scaleOverlay ? Number.parseFloat(scaleOverlay.style.height) : 0;
+        if (!Number.isFinite(displayedHeight) || displayedHeight <= 0 || item.property.height <= 0) {
+            return contentHeight;
+        }
+        return contentHeight / displayedHeight * item.property.height;
+    }
+    isAutoHeightEnabled(item) {
+        return isCardItem(item) && this.options.resolveCardTypeConfig(item)?.autoHeight === true;
+    }
+    isAutoScaleEnabled(item) {
+        if (!isCardItem(item)) {
+            return true;
+        }
+        return this.options.resolveCardTypeConfig(item)?.autoScale !== false;
+    }
+}
+async function waitForCardCaptureReady(root) {
+    await nextAnimationFrame();
+    await waitForDocumentFonts(root.ownerDocument);
+    await Promise.all([
+        waitForImages(root),
+        waitForIframes(root),
+    ]);
+    await nextAnimationFrame();
+}
+function formatCssColor(color, alpha) {
+    const normalizedColor = Math.max(0, Math.min(0xFFFFFF, Math.round(color)));
+    const red = normalizedColor >> 16 & 0xFF;
+    const green = normalizedColor >> 8 & 0xFF;
+    const blue = normalizedColor & 0xFF;
+    return `rgba(${red}, ${green}, ${blue}, ${formatCssNumber(alpha)})`;
+}
+function formatCssNumber(value) {
+    const normalized = Number.isFinite(value) ? value : 0;
+    return Number(normalized.toFixed(6)).toString();
+}
+function nextAnimationFrame() {
+    return new Promise(resolve => {
+        requestHTMLOverlayFrame(() => {
+            resolve();
+        });
+    });
+}
+async function waitForDocumentFonts(doc) {
+    await doc.fonts?.ready;
+}
+async function waitForImages(root) {
+    const images = Array.from(root.querySelectorAll('img')).filter(image => !image.complete);
+    await Promise.all(images.map(image => new Promise(resolve => {
+        image.addEventListener('load', () => {
+            resolve();
+        }, { once: true });
+        image.addEventListener('error', () => {
+            resolve();
+        }, { once: true });
+    })));
+}
+async function waitForIframes(root) {
+    const iframes = Array.from(root.querySelectorAll('iframe'));
+    await Promise.all(iframes.map(async (iframe) => {
+        await waitForIframeLoad(iframe);
+        const doc = iframe.contentDocument;
+        if (!doc) {
+            return;
+        }
+        await waitForDocumentFonts(doc);
+        await waitForImages(doc);
+    }));
+}
+function waitForIframeLoad(iframe) {
+    try {
+        if (iframe.contentDocument?.readyState === 'complete') {
+            return undefined;
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return new Promise(resolve => {
+        iframe.addEventListener('load', () => {
+            resolve();
+        }, { once: true });
+        iframe.addEventListener('error', () => {
+            resolve();
+        }, { once: true });
+    });
+}
+async function createCardCaptureTarget(root, html, logicalSize) {
+    const liveDocument = root.querySelector('iframe')?.contentDocument;
+    if (liveDocument) {
+        const liveReplica = await createHTMLCaptureReplicaFromDocument(root.ownerDocument, liveDocument, logicalSize);
+        if (liveReplica) {
+            return {
+                target: liveReplica.target,
+                cleanup: liveReplica.cleanup,
+            };
+        }
+    }
+    const previewHTML = createCardPreviewHTML(html?.content);
+    if (previewHTML) {
+        const preview = await createHTMLCaptureReplica(root.ownerDocument, previewHTML, logicalSize);
+        if (preview) {
+            return {
+                target: preview.target,
+                cleanup: preview.cleanup,
+            };
+        }
+    }
+    const flattenedTarget = createFlattenedExistingIframeTarget(root);
+    return {
+        target: flattenedTarget,
+        cleanup: () => {
+            if (flattenedTarget !== root) {
+                flattenedTarget.remove();
+            }
+        },
+    };
+}
+function createFlattenedExistingIframeTarget(root) {
+    const iframes = Array.from(root.querySelectorAll('iframe'));
+    if (iframes.length === 0) {
+        return root;
+    }
+    const clone = root.cloneNode(true);
+    clone.style.position = 'fixed';
+    clone.style.left = '-100000px';
+    clone.style.top = '0';
+    clone.style.pointerEvents = 'none';
+    clone.style.opacity = '1';
+    clone.style.zIndex = '-1';
+    const clonedIframes = Array.from(clone.querySelectorAll('iframe'));
+    iframes.forEach((iframe, index) => {
+        const clonedIframe = clonedIframes[index];
+        const iframeContent = createFlattenedIframeContent(iframe);
+        if (!clonedIframe || !iframeContent) {
+            return;
+        }
+        clonedIframe.replaceWith(iframeContent);
+    });
+    root.ownerDocument.body.appendChild(clone);
+    return clone;
+}
+function createCardPreviewHTML(content) {
+    if (!content) {
+        return undefined;
+    }
+    if (content.kind === 'inline') {
+        return withCardHTMLViewportStyle(content.html);
+    }
+    if (content.kind === 'document') {
+        const files = normalizeDocumentFiles(content.files);
+        const entry = normalizePath(content.entry);
+        const createFileUrl = createDocumentFileUrlFactory(files);
+        const entryHtml = files.get(entry) ?? '';
+        return withCardHTMLViewportStyle(transformHTMLDocument(entry, entryHtml, createFileUrl));
+    }
+    return undefined;
+}
+function isMouseEventInsideRect(event, rect) {
+    return event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom;
+}
+function createFlattenedIframeContent(iframe) {
+    const doc = iframe.contentDocument;
+    if (!doc) {
+        return undefined;
+    }
+    const replacement = document.createElement('div');
+    const computedStyle = getComputedStyle(iframe);
+    Object.assign(replacement.style, {
+        width: computedStyle.width,
+        height: computedStyle.height,
+        display: computedStyle.display === 'none' ? 'block' : computedStyle.display,
+        overflow: 'hidden',
+        border: computedStyle.border,
+        boxSizing: computedStyle.boxSizing,
+        background: computedStyle.background,
+    });
+    Array.from(doc.head.children).forEach(child => {
+        replacement.appendChild(child.cloneNode(true));
+    });
+    Array.from(doc.body.children).forEach(child => {
+        replacement.appendChild(child.cloneNode(true));
+    });
+    return replacement;
+}
+function withTimeout(promise, timeout) {
+    return new Promise(resolve => {
+        const timer = window.setTimeout(() => {
+            resolve(undefined);
+        }, timeout);
+        promise.then(value => {
+            window.clearTimeout(timer);
+            resolve(value);
+        }, () => {
+            window.clearTimeout(timer);
+            resolve(undefined);
+        });
+    });
+}