@gemx-dev/clarity-visualize 0.8.52 → 0.8.53

package/build/clarity.visualize.js

@@ -384,6 +384,247 @@ var EnrichHelper = /** @class */ (function () {
     return EnrichHelper;
 }());
 
+/**
+ * Creates a canvas as sibling to the iframe (same parent container)
+ * This allows the canvas to avoid z-index conflicts with top-layer elements inside iframe
+ *
+ * @param iframeDoc - Document inside the iframe
+ * @param canvasId - ID for the canvas element
+ * @returns Canvas info with cleanup function
+ */
+function createParentWindowCanvas(iframeDoc) {
+    var _a, _b;
+    // Check if we're inside an iframe
+    if (iframeDoc.defaultView === ((_a = iframeDoc.defaultView) === null || _a === void 0 ? void 0 : _a.top)) {
+        throw new Error('Not in iframe: ' + iframeDoc.defaultView);
+    }
+    try {
+        var parentWindow = (_b = iframeDoc.defaultView) === null || _b === void 0 ? void 0 : _b.parent;
+        var parentDoc = parentWindow === null || parentWindow === void 0 ? void 0 : parentWindow.document;
+        if (!parentDoc)
+            throw new Error('Parent document not found');
+        var iframe = parentDoc.getElementById('clarity-iframe');
+        if (!iframe)
+            throw new Error('Iframe not found');
+        var targetIframe = iframe;
+        var iframeParent = targetIframe.parentElement;
+        if (!iframeParent)
+            throw new Error('Iframe parent not found');
+        // Create canvas as sibling to iframe
+        var canvas_1 = parentDoc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
+        if (canvas_1 === null) {
+            canvas_1 = parentDoc.createElement('canvas');
+            canvas_1.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
+            canvas_1.width = 0;
+            canvas_1.height = 0;
+            canvas_1.style.position = "absolute" /* Constant.Absolute */;
+            canvas_1.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
+            canvas_1.style.pointerEvents = 'none'; // Allow clicks to pass through
+            iframeParent.appendChild(canvas_1);
+        }
+        // // Set canvas size to match iframe
+        // const updateCanvasSize = () => {
+        //     canvas.width = targetIframe!.offsetWidth;
+        //     canvas.height = targetIframe!.offsetHeight;
+        // };
+        // updateCanvasSize();
+        // Insert canvas as sibling to iframe (in same parent container)
+        // iframeParent.appendChild(canvas);
+        // Update size on resize
+        // const handleUpdate = () => updateCanvasSize();
+        // parentWindow!.addEventListener('resize', handleUpdate, true);
+        var cleanup = function () {
+            // parentWindow!.removeEventListener('resize', handleUpdate, true);
+            if (canvas_1.parentNode) {
+                canvas_1.parentNode.removeChild(canvas_1);
+            }
+        };
+        return {
+            canvas: canvas_1,
+            iframe: targetIframe,
+            cleanup: cleanup
+        };
+    }
+    catch (e) {
+        throw new Error(e);
+    }
+}
+
+/**
+ * Custom module for rendering HTML Dialog elements
+ * Handles proper visualization of modal dialogs in the top-layer
+ */
+/**
+ * Pending dialogs tracking for synchronization
+ * Used to track when all dialogs have finished rendering
+ * Uses Set to avoid counting the same dialog multiple times
+ */
+var pendingDialogs = new Set();
+var resolveDialogsRendered = null;
+var dialogsRenderedPromise = null;
+/**
+ * Returns a promise that resolves when all pending dialogs are rendered
+ */
+function waitForDialogsRendered() {
+    if (pendingDialogs.size === 0) {
+        // No pending dialogs, resolve immediately
+        return Promise.resolve();
+    }
+    // Return existing promise if already waiting
+    if (dialogsRenderedPromise) {
+        return dialogsRenderedPromise;
+    }
+    // Create new promise
+    dialogsRenderedPromise = new Promise(function (resolve) {
+        resolveDialogsRendered = resolve;
+    });
+    return dialogsRenderedPromise;
+}
+/**
+ * Resets the dialog rendering state
+ * Should be called before starting a new render cycle
+ */
+function resetDialogRenderState() {
+    pendingDialogs.clear();
+    resolveDialogsRendered = null;
+    dialogsRenderedPromise = null;
+}
+/**
+ * Extracts dialog rendering options from node attributes
+ *
+ * @param attributes - Node attributes containing dialog state
+ * @param dialogElement - The dialog element being rendered
+ * @returns Dialog render options
+ */
+function getDialogRenderOptions(attributes, dialogElement) {
+    return {
+        isModal: attributes["gx-dialog-modal" /* LayoutConstants.GXDialogModal */] === "true",
+        shouldBeOpen: attributes["open"] !== undefined,
+        isExistingDialog: !!dialogElement
+    };
+}
+/**
+ * Shows a dialog element with proper modal/non-modal handling
+ * Modal dialogs are shown via showModal() to render in top-layer with backdrop
+ * Non-modal dialogs are shown via show() method
+ *
+ * @param dialogElement - The dialog element to show
+ * @param isModal - Whether this is a modal dialog
+ * @param onError - Optional error callback
+ */
+function showDialog(dialogElement, isModal, onError) {
+    try {
+        if (!dialogElement.isConnected) {
+            notifyDialogComplete(dialogElement);
+            return;
+        }
+        if (!dialogElement.open) {
+            notifyDialogComplete(dialogElement);
+            return;
+        }
+        dialogElement.close();
+        if (isModal) {
+            dialogElement.showModal();
+        }
+        else {
+            dialogElement.show();
+        }
+        // Wait for animations/transitions to complete
+        waitForDialogAnimation(dialogElement).then(function () {
+            notifyDialogComplete(dialogElement);
+        });
+    }
+    catch (e) {
+        console.error('❌ Error showing dialog:', e);
+        if (onError) {
+            onError(e);
+        }
+        // Still mark as complete even on error
+        notifyDialogComplete(dialogElement);
+    }
+}
+/**
+ * Waits for dialog animations/transitions to complete
+ * Listens for animationend and transitionend events with timeout fallback
+ */
+function waitForDialogAnimation(dialogElement) {
+    return new Promise(function (resolve) {
+        var resolved = false;
+        var timeoutMs = 1000; // Maximum wait time for animations
+        var complete = function () {
+            if (resolved)
+                return;
+            resolved = true;
+            cleanup();
+            resolve();
+        };
+        // Fallback timeout in case no animation events fire
+        var timeout = setTimeout(complete, timeoutMs);
+        // Listen for animation end
+        var onAnimationEnd = function (e) {
+            if (e.target === dialogElement) {
+                complete();
+            }
+        };
+        // Listen for transition end
+        var onTransitionEnd = function (TransitionEvent) {
+            if (TransitionEvent.target === dialogElement) {
+                complete();
+            }
+        };
+        var cleanup = function () {
+            clearTimeout(timeout);
+            dialogElement.removeEventListener('animationend', onAnimationEnd);
+            dialogElement.removeEventListener('transitionend', onTransitionEnd);
+        };
+        dialogElement.addEventListener('animationend', onAnimationEnd, { once: true });
+        dialogElement.addEventListener('transitionend', onTransitionEnd, { once: true });
+        // If no animations/transitions, resolve after one frame
+        requestAnimationFrame(function () {
+            var computedStyle = window.getComputedStyle(dialogElement);
+            var hasAnimation = computedStyle.animationName !== 'none';
+            var hasTransition = computedStyle.transitionDuration !== '0s';
+            if (!hasAnimation && !hasTransition) {
+                complete();
+            }
+        });
+    });
+}
+/**
+ * Internal: Notify that a dialog has completed rendering
+ */
+function notifyDialogComplete(dialogElement) {
+    pendingDialogs.delete(dialogElement);
+    // If all dialogs are done, resolve the promise
+    if (pendingDialogs.size === 0 && resolveDialogsRendered) {
+        resolveDialogsRendered();
+        resolveDialogsRendered = null;
+        dialogsRenderedPromise = null;
+    }
+}
+/**
+ * Handles dialog rendering based on its state
+ * This is the main entry point for dialog rendering logic
+ *
+ * @param dialogElement - The dialog element to render
+ * @param options - Dialog render options
+ * @param onError - Optional error callback
+ */
+function renderDialog(dialogElement, options, onError) {
+    var isModal = options.isModal, shouldBeOpen = options.shouldBeOpen, isExistingDialog = options.isExistingDialog;
+    if (!shouldBeOpen)
+        return;
+    // Add dialog to pending set (Set automatically handles duplicates)
+    pendingDialogs.add(dialogElement);
+    var doShow = function () { return showDialog(dialogElement, isModal, onError); };
+    if (isExistingDialog) {
+        doShow();
+    }
+    else {
+        setTimeout(doShow, 0);
+    }
+}
+
 var HeatmapHelper = /** @class */ (function () {
     function HeatmapHelper(state, layout) {
         var _this = this;
@@ -398,6 +639,7 @@ var HeatmapHelper = /** @class */ (function () {
         this.layout = null;
         this.scrollAvgFold = null;
         this.addScrollMakers = false;
+        this.parentCanvasInfo = null;
         this.reset = function () {
             _this.data = null;
             _this.scrollData = null;
@@ -405,6 +647,11 @@ var HeatmapHelper = /** @class */ (function () {
             _this.offscreenRing = null;
             _this.gradientPixels = null;
             _this.timeout = null;
+            // Cleanup parent canvas if it exists
+            if (_this.parentCanvasInfo) {
+                _this.parentCanvasInfo.cleanup();
+                _this.parentCanvasInfo = null;
+            }
             // Reset resize observer
             if (_this.observer) {
                 _this.observer.disconnect();
@@ -429,41 +676,55 @@ var HeatmapHelper = /** @class */ (function () {
                 canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
                 canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
             }
+            // Cleanup parent canvas before reset
+            if (_this.parentCanvasInfo) {
+                _this.parentCanvasInfo.cleanup();
+                _this.parentCanvasInfo = null;
+            }
             _this.reset();
         };
-        this.scroll = function (activity, avgFold, addMarkers) {
-            _this.scrollData = _this.scrollData || activity;
-            _this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
-            _this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
-            var canvas = _this.overlay();
-            var context = canvas.getContext("2d" /* Constant.Context */);
-            var doc = _this.state.window.document;
-            var body = doc.body;
-            var de = doc.documentElement;
-            var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-            canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
-            canvas.style.top = 0 + "px" /* Constant.Pixel */;
-            if (canvas.width > 0 && canvas.height > 0) {
-                if (_this.scrollData) {
-                    var grd = context.createLinearGradient(0, 0, 0, canvas.height);
-                    for (var _i = 0, _a = _this.scrollData; _i < _a.length; _i++) {
-                        var currentCombination = _a[_i];
-                        var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
-                        var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
-                        var hue = huePercentView * 240 /* Setting.MaxHue */;
-                        if (percentView <= 1) {
-                            grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
+        this.scroll = function (activity, avgFold, addMarkers) { return __awaiter(_this, void 0, void 0, function () {
+            var canvas, context, doc, body, de, height, grd, _i, _a, currentCombination, huePercentView, percentView, hue;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this.waitForDialogs()];
+                    case 1:
+                        _b.sent();
+                        this.scrollData = this.scrollData || activity;
+                        this.scrollAvgFold = avgFold != null ? avgFold : this.scrollAvgFold;
+                        this.addScrollMakers = addMarkers != null ? addMarkers : this.addScrollMakers;
+                        canvas = this.overlay();
+                        context = canvas.getContext("2d" /* Constant.Context */);
+                        doc = this.state.window.document;
+                        body = doc.body;
+                        de = doc.documentElement;
+                        height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+                        canvas.height = Math.min(height, 65535 /* Setting.ScrollCanvasMaxHeight */);
+                        canvas.style.top = 0 + "px" /* Constant.Pixel */;
+                        if (canvas.width > 0 && canvas.height > 0) {
+                            if (this.scrollData) {
+                                grd = context.createLinearGradient(0, 0, 0, canvas.height);
+                                for (_i = 0, _a = this.scrollData; _i < _a.length; _i++) {
+                                    currentCombination = _a[_i];
+                                    huePercentView = 1 - (currentCombination.cumulativeSum / this.scrollData[0].cumulativeSum);
+                                    percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
+                                    hue = huePercentView * 240 /* Setting.MaxHue */;
+                                    if (percentView <= 1) {
+                                        grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
+                                    }
+                                }
+                                // Fill with gradient
+                                context.fillStyle = grd;
+                                context.fillRect(0, 0, canvas.width, canvas.height);
+                                if (this.addScrollMakers) {
+                                    this.addInfoMarkers(context, this.scrollData, canvas.width, canvas.height, this.scrollAvgFold);
+                                }
+                            }
                         }
-                    }
-                    // Fill with gradient
-                    context.fillStyle = grd;
-                    context.fillRect(0, 0, canvas.width, canvas.height);
-                    if (_this.addScrollMakers) {
-                        _this.addInfoMarkers(context, _this.scrollData, canvas.width, canvas.height, _this.scrollAvgFold);
-                    }
+                        return [2 /*return*/];
                 }
-            }
-        };
+            });
+        }); };
         this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
             _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
             var markers = [75, 50, 25];
@@ -495,45 +756,50 @@ var HeatmapHelper = /** @class */ (function () {
             context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
             context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
         };
-        this.click = function (activity) {
-            _this.data = _this.data || activity;
-            var heat = _this.transform();
-            var canvas = _this.overlay();
-            var ctx = canvas.getContext("2d" /* Constant.Context */);
-            if (canvas.width > 0 && canvas.height > 0) {
-                // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
-                // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
-                // Pre-render similar primitives or repeating objects on an offscreen canvas
-                var ring = _this.getRing();
-                var gradient = _this.getGradient();
-                // Render activity for each (x,y) coordinate in our data
-                for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
-                    var entry = heat_1[_i];
-                    ctx.globalAlpha = entry.a;
-                    ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
-                }
-                // Add color to the canvas based on alpha value of each pixel
-                var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                for (var i = 0; i < pixels.data.length; i += 4) {
-                    // For each pixel, we have 4 entries in data array: (r,g,b,a)
-                    // To pick the right color from gradient pixels, we look at the alpha value of the pixel
-                    // Alpha value ranges from 0-255
-                    var alpha = pixels.data[i + 3];
-                    if (alpha > 0) {
-                        var offset = (alpha - 1) * 4;
-                        pixels.data[i] = gradient.data[offset];
-                        pixels.data[i + 1] = gradient.data[offset + 1];
-                        pixels.data[i + 2] = gradient.data[offset + 2];
-                    }
+        this.click = function (activity) { return __awaiter(_this, void 0, void 0, function () {
+            var heat, canvas, ctx, ring, gradient, _i, heat_1, entry, pixels, i, alpha, offset;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.waitForDialogs()];
+                    case 1:
+                        _a.sent();
+                        this.data = this.data || activity;
+                        heat = this.transform();
+                        canvas = this.overlay();
+                        ctx = canvas.getContext("2d" /* Constant.Context */);
+                        if (canvas.width > 0 && canvas.height > 0) {
+                            ring = this.getRing();
+                            gradient = this.getGradient();
+                            // Render activity for each (x,y) coordinate in our data
+                            for (_i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
+                                entry = heat_1[_i];
+                                ctx.globalAlpha = entry.a;
+                                ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
+                            }
+                            pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                            for (i = 0; i < pixels.data.length; i += 4) {
+                                alpha = pixels.data[i + 3];
+                                if (alpha > 0) {
+                                    offset = (alpha - 1) * 4;
+                                    pixels.data[i] = gradient.data[offset];
+                                    pixels.data[i + 1] = gradient.data[offset + 1];
+                                    pixels.data[i + 2] = gradient.data[offset + 2];
+                                }
+                            }
+                            ctx.putImageData(pixels, 0, 0);
+                        }
+                        return [2 /*return*/];
                 }
-                ctx.putImageData(pixels, 0, 0);
-            }
-        };
+            });
+        }); };
         this.overlay = function () {
             // Create canvas for visualizing heatmap
             var doc = _this.state.window.document;
             var win = _this.state.window;
             var de = doc.documentElement;
+            var isPortalCanvas = _this.state.options.portalCanvas;
+            if (isPortalCanvas)
+                return _this.createPortalCanvas(doc, win, de);
             var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
             if (canvas === null) {
                 canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
@@ -667,6 +933,95 @@ var HeatmapHelper = /** @class */ (function () {
             }
             return visibility && r.bottom >= 0 && r.top <= height;
         };
+        this.waitForDialogs = function () { return __awaiter(_this, void 0, void 0, function () {
+            var isPortalCanvas;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        isPortalCanvas = this.state.options.portalCanvas;
+                        if (!isPortalCanvas)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, waitForDialogsRendered()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.createPortalCanvas = function (doc, win, de) {
+            var _a;
+            var canvas = null;
+            try {
+                canvas = (_a = _this.parentCanvasInfo) === null || _a === void 0 ? void 0 : _a.canvas;
+                if (!canvas) {
+                    _this.parentCanvasInfo = createParentWindowCanvas(doc);
+                    canvas = _this.parentCanvasInfo.canvas;
+                    // Add event listeners only once when canvas is created
+                    win.addEventListener("scroll", _this.redraw, true);
+                    win.addEventListener("resize", _this.redraw, true);
+                    _this.observer = _this.state.window["ResizeObserver"] ? new ResizeObserver(_this.redraw) : null;
+                    if (_this.observer) {
+                        _this.observer.observe(doc.body);
+                    }
+                }
+                canvas.width = de.clientWidth;
+                canvas.height = de.clientHeight + 4; // TODO: GEMX VERIFY
+                canvas.style.top = '0';
+                canvas.style.left = '0';
+                canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
+                _this.parentCanvasInfo.canvas = canvas;
+                return canvas;
+            }
+            catch (error) {
+                console.error("\uD83D\uDE80 \uD83D\uDC25 ~ HeatmapHelper ~ createPortalCanvas:", error);
+            }
+            return null;
+        };
+        this.visibleV2 = function (el, r, height) {
+            var doc = _this.state.window.document;
+            var visibility = r.height > height ? true : false;
+            if (visibility === false && r.width > 0 && r.height > 0) {
+                while (!visibility && doc) {
+                    var shadowElement = null;
+                    var elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
+                    // Check if only dialog and HTML are returned (element is behind dialog)
+                    var hasOnlyDialogAndHtml = elements.length === 2 &&
+                        elements[0].tagName === 'DIALOG' &&
+                        elements[1].tagName === 'HTML';
+                    // If element is behind a dialog, assume it's visible
+                    // (we can't check through top-layer, so trust the element exists)
+                    if (hasOnlyDialogAndHtml) {
+                        visibility = true;
+                        break;
+                    }
+                    for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {
+                        var e = elements_2[_i];
+                        // Check if this is the target element BEFORE skipping dialogs
+                        // This handles case where target element IS a dialog
+                        if (e === el) {
+                            visibility = true;
+                            shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
+                            break;
+                        }
+                        // Skip dialog elements - treat as transparent for checking elements behind
+                        if (e.tagName === 'DIALOG') {
+                            continue;
+                        }
+                        // Skip canvas and clarity elements
+                        if (e.tagName === "CANVAS" /* Constant.Canvas */ ||
+                            (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
+                            continue;
+                        }
+                        // This is the first non-ignored element
+                        visibility = e === el;
+                        shadowElement = e.shadowRoot && e.shadowRoot != doc ? e.shadowRoot : null;
+                        break;
+                    }
+                    doc = shadowElement;
+                }
+            }
+            return visibility && r.bottom >= 0 && r.top <= height;
+        };
         this.state = state;
         this.layout = layout;
     }
@@ -1194,101 +1549,6 @@ var sharedStyle = `iframe[data-clarity-unavailable-small], iframe[data-clarity-u
     border-color: #827DFF;
 }`;
 
-/**
- * Custom module for rendering HTML Dialog elements
- * Handles proper visualization of modal dialogs in the top-layer
- */
-/**
- * Extracts dialog rendering options from node attributes
- *
- * @param attributes - Node attributes containing dialog state
- * @param dialogElement - The dialog element being rendered
- * @returns Dialog render options
- */
-function getDialogRenderOptions(attributes, dialogElement) {
-    return {
-        isModal: attributes["gx-dialog-modal" /* LayoutConstants.GXDialogModal */] === "true",
-        shouldBeOpen: attributes["open"] !== undefined,
-        isExistingDialog: !!dialogElement
-    };
-}
-/**
- * Shows a dialog element with proper modal/non-modal handling
- * Modal dialogs are shown via showModal() to render in top-layer with backdrop
- * Non-modal dialogs are shown via show() method
- *
- * @param dialogElement - The dialog element to show
- * @param isModal - Whether this is a modal dialog
- * @param onError - Optional error callback
- */
-function showDialog(dialogElement, isModal, onError) {
-    try {
-        if (!dialogElement.isConnected) {
-            console.warn('⚠️ Dialog not connected to DOM, skipping show');
-            return;
-        }
-        // IMPORTANT: If dialog is already open (from HTML attribute),
-        // we need to close and reopen to ensure showModal() is called
-        // and dialog enters top-layer properly
-        if (dialogElement.open) {
-            dialogElement.close();
-        }
-        if (isModal) {
-            dialogElement.showModal();
-        }
-        else {
-            dialogElement.show();
-        }
-    }
-    catch (e) {
-        console.error('❌ Error showing dialog:', e);
-        if (onError) {
-            onError(e);
-        }
-    }
-}
-/**
- * Closes a dialog element safely
- *
- * @param dialogElement - The dialog element to close
- */
-function closeDialog(dialogElement) {
-    try {
-        if (dialogElement.open) {
-            dialogElement.close();
-        }
-    }
-    catch (e) {
-        console.warn('⚠️ Error closing dialog:', e);
-    }
-}
-/**
- * Handles dialog rendering based on its state
- * This is the main entry point for dialog rendering logic
- *
- * @param dialogElement - The dialog element to render
- * @param options - Dialog render options
- * @param onError - Optional error callback
- */
-function renderDialog(dialogElement, options, onError) {
-    var isModal = options.isModal, shouldBeOpen = options.shouldBeOpen, isExistingDialog = options.isExistingDialog;
-    if (shouldBeOpen) {
-        var doShow = function () { return showDialog(dialogElement, isModal, onError); };
-        if (isExistingDialog) {
-            // Dialog already exists, call immediately
-            doShow();
-        }
-        else {
-            // New dialog, wait for DOM insertion
-            setTimeout(doShow, 0);
-        }
-    }
-    else if (dialogElement.open) {
-        // Dialog should be closed
-        closeDialog(dialogElement);
-    }
-}
-
 var blobUnavailableSvgEnglish = `background: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='80' fill='%23FBFBFE'/%3E%3Cpath d='M55.75 11C57.5449 11 59 12.4551 59 14.25V25.75C59 27.5449 57.5449 29 55.75 29H44.25C42.4551 29 41 27.5449 41 25.75V14.25C41 12.4551 42.4551 11 44.25 11H55.75ZM56.3305 27.4014L50.5247 21.7148C50.2596 21.4553 49.8501 21.4316 49.5588 21.644L49.4752 21.7148L43.6685 27.4011C43.8504 27.4651 44.0461 27.5 44.25 27.5H55.75C55.9535 27.5 56.1489 27.4653 56.3305 27.4014L50.5247 21.7148L56.3305 27.4014ZM55.75 12.5H44.25C43.2835 12.5 42.5 13.2835 42.5 14.25V25.75C42.5 25.9584 42.5364 26.1583 42.6033 26.3437L48.4258 20.643C49.2589 19.8273 50.5675 19.7885 51.4458 20.5266L51.5742 20.6431L57.3964 26.3447C57.4634 26.159 57.5 25.9588 57.5 25.75V14.25C57.5 13.2835 56.7165 12.5 55.75 12.5ZM53.2521 14.5C54.4959 14.5 55.5042 15.5083 55.5042 16.7521C55.5042 17.9959 54.4959 19.0042 53.2521 19.0042C52.0083 19.0042 51 17.9959 51 16.7521C51 15.5083 52.0083 14.5 53.2521 14.5ZM53.2521 16C52.8367 16 52.5 16.3367 52.5 16.7521C52.5 17.1675 52.8367 17.5042 53.2521 17.5042C53.6675 17.5042 54.0042 17.1675 54.0042 16.7521C54.0042 16.3367 53.6675 16 53.2521 16Z' fill='%23020057'/%3E%3Cpath d='M25.8418 52.6484C25.2207 52.9766 24.4473 53.1406 23.5215 53.1406C22.3262 53.1406 21.3691 52.7559 20.6504 51.9863C19.9316 51.2168 19.5723 50.207 19.5723 48.957C19.5723 47.6133 19.9766 46.5273 20.7852 45.6992C21.5938 44.8711 22.6191 44.457 23.8613 44.457C24.6582 44.457 25.3184 44.5723 25.8418 44.8027V45.8516C25.2402 45.5156 24.5762 45.3477 23.8496 45.3477C22.8848 45.3477 22.1016 45.6699 21.5 46.3145C20.9023 46.959 20.6035 47.8203 20.6035 48.8984C20.6035 49.9219 20.8828 50.7383 21.4414 51.3477C22.0039 51.9531 22.7402 52.2559 23.6504 52.2559C24.4941 52.2559 25.2246 52.0684 25.8418 51.6934V52.6484ZM28.3848 53H27.4238V44.1172H28.3848V53ZM34.625 53H33.6641V52.0625H33.6406C33.2227 52.7812 32.6074 53.1406 31.7949 53.1406C31.1973 53.1406 30.7285 52.9824 30.3887 52.666C30.0527 52.3496 29.8848 51.9297 29.8848 51.4062C29.8848 50.2852 30.5449 49.6328 31.8652 49.4492L33.6641 49.1973C33.6641 48.1777 33.252 47.668 32.4277 47.668C31.7051 47.668 31.0527 47.9141 30.4707 48.4062V47.4219C31.0605 47.0469 31.7402 46.8594 32.5098 46.8594C33.9199 46.8594 34.625 47.6055 34.625 49.0977V53ZM33.6641 49.9648L32.2168 50.1641C31.7715 50.2266 31.4355 50.3379 31.209 50.498C30.9824 50.6543 30.8691 50.9336 30.8691 51.3359C30.8691 51.6289 30.9727 51.8691 31.1797 52.0566C31.3906 52.2402 31.6699 52.332 32.0176 52.332C32.4941 52.332 32.8867 52.166 33.1953 51.834C33.5078 51.498 33.6641 51.0742 33.6641 50.5625V49.9648ZM39.5645 47.9727C39.3965 47.8438 39.1543 47.7793 38.8379 47.7793C38.4277 47.7793 38.084 47.9727 37.8066 48.3594C37.5332 48.7461 37.3965 49.2734 37.3965 49.9414V53H36.4355V47H37.3965V48.2363H37.4199C37.5566 47.8145 37.7656 47.4863 38.0469 47.252C38.3281 47.0137 38.6426 46.8945 38.9902 46.8945C39.2402 46.8945 39.4316 46.9219 39.5645 46.9766V47.9727ZM41.0996 45.4766C40.9277 45.4766 40.7812 45.418 40.6602 45.3008C40.5391 45.1836 40.4785 45.0352 40.4785 44.8555C40.4785 44.6758 40.5391 44.5273 40.6602 44.4102C40.7812 44.2891 40.9277 44.2285 41.0996 44.2285C41.2754 44.2285 41.4238 44.2891 41.5449 44.4102C41.6699 44.5273 41.7324 44.6758 41.7324 44.8555C41.7324 45.0273 41.6699 45.1738 41.5449 45.2949C41.4238 45.416 41.2754 45.4766 41.0996 45.4766ZM41.5684 53H40.6074V47H41.5684V53ZM46.2969 52.9414C46.0703 53.0664 45.7715 53.1289 45.4004 53.1289C44.3496 53.1289 43.8242 52.543 43.8242 51.3711V47.8203H42.793V47H43.8242V45.5352L44.7852 45.2246V47H46.2969V47.8203H44.7852V51.2012C44.7852 51.6035 44.8535 51.8906 44.9902 52.0625C45.127 52.2344 45.3535 52.3203 45.6699 52.3203C45.9121 52.3203 46.1211 52.2539 46.2969 52.1211V52.9414ZM52.3555 47L49.5957 53.9609C49.1035 55.2031 48.4121 55.8242 47.5215 55.8242C47.2715 55.8242 47.0625 55.7988 46.8945 55.748V54.8867C47.1016 54.957 47.291 54.9922 47.4629 54.9922C47.9473 54.9922 48.3105 54.7031 48.5527 54.125L49.0332 52.9883L46.6895 47H47.7559L49.3789 51.6172C49.3984 51.6758 49.4395 51.8281 49.502 52.0742H49.5371C49.5566 51.9805 49.5957 51.832 49.6543 51.6289L51.3594 47H52.3555ZM60.7754 52.7246C60.3145 53.002 59.7676 53.1406 59.1348 53.1406C58.2793 53.1406 57.5879 52.8633 57.0605 52.3086C56.5371 51.75 56.2754 51.0273 56.2754 50.1406C56.2754 49.1523 56.5586 48.3594 57.125 47.7617C57.6914 47.1602 58.4473 46.8594 59.3926 46.8594C59.9199 46.8594 60.3848 46.957 60.7871 47.1523V48.1367C60.3418 47.8242 59.8652 47.668 59.3574 47.668C58.7441 47.668 58.2402 47.8887 57.8457 48.3301C57.4551 48.7676 57.2598 49.3438 57.2598 50.0586C57.2598 50.7617 57.4434 51.3164 57.8105 51.7227C58.1816 52.1289 58.6777 52.332 59.2988 52.332C59.8223 52.332 60.3145 52.1582 60.7754 51.8105V52.7246ZM66.5234 53H65.5625V52.0625H65.5391C65.1211 52.7812 64.5059 53.1406 63.6934 53.1406C63.0957 53.1406 62.627 52.9824 62.2871 52.666C61.9512 52.3496 61.7832 51.9297 61.7832 51.4062C61.7832 50.2852 62.4434 49.6328 63.7637 49.4492L65.5625 49.1973C65.5625 48.1777 65.1504 47.668 64.3262 47.668C63.6035 47.668 62.9512 47.9141 62.3691 48.4062V47.4219C62.959 47.0469 63.6387 46.8594 64.4082 46.8594C65.8184 46.8594 66.5234 47.6055 66.5234 49.0977V53ZM65.5625 49.9648L64.1152 50.1641C63.6699 50.2266 63.334 50.3379 63.1074 50.498C62.8809 50.6543 62.7676 50.9336 62.7676 51.3359C62.7676 51.6289 62.8711 51.8691 63.0781 52.0566C63.2891 52.2402 63.5684 52.332 63.916 52.332C64.3926 52.332 64.7852 52.166 65.0938 51.834C65.4062 51.498 65.5625 51.0742 65.5625 50.5625V49.9648ZM73.3145 53H72.3535V49.5781C72.3535 48.3047 71.8887 47.668 70.959 47.668C70.4785 47.668 70.0801 47.8496 69.7637 48.2129C69.4512 48.5723 69.2949 49.0273 69.2949 49.5781V53H68.334V47H69.2949V47.9961H69.3184C69.7715 47.2383 70.4277 46.8594 71.2871 46.8594C71.9434 46.8594 72.4453 47.0723 72.793 47.498C73.1406 47.9199 73.3145 48.5312 73.3145 49.332V53ZM76.3145 44.457L75.4941 47.0703H74.8027L75.4531 44.457H76.3145ZM80.668 52.9414C80.4414 53.0664 80.1426 53.1289 79.7715 53.1289C78.7207 53.1289 78.1953 52.543 78.1953 51.3711V47.8203H77.1641V47H78.1953V45.5352L79.1562 45.2246V47H80.668V47.8203H79.1562V51.2012C79.1562 51.6035 79.2246 51.8906 79.3613 52.0625C79.498 52.2344 79.7246 52.3203 80.041 52.3203C80.2832 52.3203 80.4922 52.2539 80.668 52.1211V52.9414ZM15.3887 63.9727C15.2207 63.8438 14.9785 63.7793 14.6621 63.7793C14.252 63.7793 13.9082 63.9727 13.6309 64.3594C13.3574 64.7461 13.2207 65.2734 13.2207 65.9414V69H12.2598V63H13.2207V64.2363H13.2441C13.3809 63.8145 13.5898 63.4863 13.8711 63.252C14.1523 63.0137 14.4668 62.8945 14.8145 62.8945C15.0645 62.8945 15.2559 62.9219 15.3887 62.9766V63.9727ZM21.2539 66.2402H17.0176C17.0332 66.9082 17.2129 67.4238 17.5566 67.7871C17.9004 68.1504 18.373 68.332 18.9746 68.332C19.6504 68.332 20.2715 68.1094 20.8379 67.6641V68.5664C20.3105 68.9492 19.6133 69.1406 18.7461 69.1406C17.8984 69.1406 17.2324 68.8691 16.748 68.3262C16.2637 67.7793 16.0215 67.0117 16.0215 66.0234C16.0215 65.0898 16.2852 64.3301 16.8125 63.7441C17.3438 63.1543 18.002 62.8594 18.7871 62.8594C19.5723 62.8594 20.1797 63.1133 20.6094 63.6211C21.0391 64.1289 21.2539 64.834 21.2539 65.7363V66.2402ZM20.2695 65.4258C20.2656 64.8711 20.1309 64.4395 19.8652 64.1309C19.6035 63.8223 19.2383 63.668 18.7695 63.668C18.3164 63.668 17.9316 63.8301 17.6152 64.1543C17.2988 64.4785 17.1035 64.9023 17.0293 65.4258H20.2695ZM27.0078 69H26.0469V68.0625H26.0234C25.6055 68.7812 24.9902 69.1406 24.1777 69.1406C23.5801 69.1406 23.1113 68.9824 22.7715 68.666C22.4355 68.3496 22.2676 67.9297 22.2676 67.4062C22.2676 66.2852 22.9277 65.6328 24.248 65.4492L26.0469 65.1973C26.0469 64.1777 25.6348 63.668 24.8105 63.668C24.0879 63.668 23.4355 63.9141 22.8535 64.4062V63.4219C23.4434 63.0469 24.123 62.8594 24.8926 62.8594C26.3027 62.8594 27.0078 63.6055 27.0078 65.0977V69ZM26.0469 65.9648L24.5996 66.1641C24.1543 66.2266 23.8184 66.3379 23.5918 66.498C23.3652 66.6543 23.252 66.9336 23.252 67.3359C23.252 67.6289 23.3555 67.8691 23.5625 68.0566C23.7734 68.2402 24.0527 68.332 24.4004 68.332C24.877 68.332 25.2695 68.166 25.5781 67.834C25.8906 67.498 26.0469 67.0742 26.0469 66.5625V65.9648ZM33.9395 69H32.9785V67.9805H32.9551C32.5098 68.7539 31.8223 69.1406 30.8926 69.1406C30.1387 69.1406 29.5352 68.873 29.082 68.3379C28.6328 67.7988 28.4082 67.0664 28.4082 66.1406C28.4082 65.1484 28.6582 64.3535 29.1582 63.7559C29.6582 63.1582 30.3242 62.8594 31.1562 62.8594C31.9805 62.8594 32.5801 63.1836 32.9551 63.832H32.9785V60.1172H33.9395V69ZM32.9785 66.2871V65.4023C32.9785 64.918 32.8184 64.5078 32.498 64.1719C32.1777 63.8359 31.7715 63.668 31.2793 63.668C30.6934 63.668 30.2324 63.8828 29.8965 64.3125C29.5605 64.7422 29.3926 65.3359 29.3926 66.0938C29.3926 66.7852 29.5527 67.332 29.873 67.7344C30.1973 68.1328 30.6309 68.332 31.1738 68.332C31.709 68.332 32.1426 68.1387 32.4746 67.752C32.8105 67.3652 32.9785 66.877 32.9785 66.2871ZM39.3066 69V60.5977H41.6973C42.4238 60.5977 43 60.7754 43.4258 61.1309C43.8516 61.4863 44.0645 61.9492 44.0645 62.5195C44.0645 62.9961 43.9355 63.4102 43.6777 63.7617C43.4199 64.1133 43.0645 64.3633 42.6113 64.5117V64.5352C43.1777 64.6016 43.6309 64.8164 43.9707 65.1797C44.3105 65.5391 44.4805 66.0078 44.4805 66.5859C44.4805 67.3047 44.2227 67.8867 43.707 68.332C43.1914 68.7773 42.541 69 41.7559 69H39.3066ZM40.291 61.4883V64.2012H41.2988C41.8379 64.2012 42.2617 64.0723 42.5703 63.8145C42.8789 63.5527 43.0332 63.1855 43.0332 62.7129C43.0332 61.8965 42.4961 61.4883 41.4219 61.4883H40.291ZM40.291 65.0859V68.1094H41.627C42.2051 68.1094 42.6523 67.9727 42.9688 67.6992C43.2891 67.4258 43.4492 67.0508 43.4492 66.5742C43.4492 65.582 42.7734 65.0859 41.4219 65.0859H40.291ZM47.0176 69H46.0566V60.1172H47.0176V69ZM51.4707 69.1406C50.584 69.1406 49.875 68.8613 49.3438 68.3027C48.8164 67.7402 48.5527 66.9961 48.5527 66.0703C48.5527 65.0625 48.8281 64.2754 49.3789 63.709C49.9297 63.1426 50.6738 62.8594 51.6113 62.8594C52.5059 62.8594 53.2031 63.1348 53.7031 63.6855C54.207 64.2363 54.459 65 54.459 65.9766C54.459 66.9336 54.1875 67.7012 53.6445 68.2793C53.1055 68.8535 52.3809 69.1406 51.4707 69.1406ZM51.541 63.668C50.9238 63.668 50.4355 63.8789 50.0762 64.3008C49.7168 64.7188 49.5371 65.2969 49.5371 66.0352C49.5371 66.7461 49.7188 67.3066 50.082 67.7168C50.4453 68.127 50.9316 68.332 51.541 68.332C52.1621 68.332 52.6387 68.1309 52.9707 67.7285C53.3066 67.3262 53.4746 66.7539 53.4746 66.0117C53.4746 65.2617 53.3066 64.6836 52.9707 64.2773C52.6387 63.8711 52.1621 63.668 51.541 63.668ZM56.9785 68.1328H56.9551V69H55.9941V60.1172H56.9551V64.0547H56.9785C57.4512 63.2578 58.1426 62.8594 59.0527 62.8594C59.8223 62.8594 60.4238 63.1289 60.8574 63.668C61.2949 64.2031 61.5137 64.9219 61.5137 65.8242C61.5137 66.8281 61.2695 67.6328 60.7812 68.2383C60.293 68.8398 59.625 69.1406 58.7773 69.1406C57.9844 69.1406 57.3848 68.8047 56.9785 68.1328ZM56.9551 65.7129V66.5508C56.9551 67.0469 57.1152 67.4688 57.4355 67.8164C57.7598 68.1602 58.1699 68.332 58.666 68.332C59.248 68.332 59.7031 68.1094 60.0312 67.6641C60.3633 67.2188 60.5293 66.5996 60.5293 65.8066C60.5293 65.1387 60.375 64.6152 60.0664 64.2363C59.7578 63.8574 59.3398 63.668 58.8125 63.668C58.2539 63.668 57.8047 63.8633 57.4648 64.2539C57.125 64.6406 56.9551 65.127 56.9551 65.7129ZM71.4629 69H70.502V67.9805H70.4785C70.0332 68.7539 69.3457 69.1406 68.416 69.1406C67.6621 69.1406 67.0586 68.873 66.6055 68.3379C66.1562 67.7988 65.9316 67.0664 65.9316 66.1406C65.9316 65.1484 66.1816 64.3535 66.6816 63.7559C67.1816 63.1582 67.8477 62.8594 68.6797 62.8594C69.5039 62.8594 70.1035 63.1836 70.4785 63.832H70.502V60.1172H71.4629V69ZM70.502 66.2871V65.4023C70.502 64.918 70.3418 64.5078 70.0215 64.1719C69.7012 63.8359 69.2949 63.668 68.8027 63.668C68.2168 63.668 67.7559 63.8828 67.4199 64.3125C67.084 64.7422 66.916 65.3359 66.916 66.0938C66.916 66.7852 67.0762 67.332 67.3965 67.7344C67.7207 68.1328 68.1543 68.332 68.6973 68.332C69.2324 68.332 69.666 68.1387 69.998 67.752C70.334 67.3652 70.502 66.877 70.502 66.2871ZM77.7031 69H76.7422V68.0625H76.7188C76.3008 68.7812 75.6855 69.1406 74.873 69.1406C74.2754 69.1406 73.8066 68.9824 73.4668 68.666C73.1309 68.3496 72.9629 67.9297 72.9629 67.4062C72.9629 66.2852 73.623 65.6328 74.9434 65.4492L76.7422 65.1973C76.7422 64.1777 76.3301 63.668 75.5059 63.668C74.7832 63.668 74.1309 63.9141 73.5488 64.4062V63.4219C74.1387 63.0469 74.8184 62.8594 75.5879 62.8594C76.998 62.8594 77.7031 63.6055 77.7031 65.0977V69ZM76.7422 65.9648L75.2949 66.1641C74.8496 66.2266 74.5137 66.3379 74.2871 66.498C74.0605 66.6543 73.9473 66.9336 73.9473 67.3359C73.9473 67.6289 74.0508 67.8691 74.2578 68.0566C74.4688 68.2402 74.748 68.332 75.0957 68.332C75.5723 68.332 75.9648 68.166 76.2734 67.834C76.5859 67.498 76.7422 67.0742 76.7422 66.5625V65.9648ZM82.2969 68.9414C82.0703 69.0664 81.7715 69.1289 81.4004 69.1289C80.3496 69.1289 79.8242 68.543 79.8242 67.3711V63.8203H78.793V63H79.8242V61.5352L80.7852 61.2246V63H82.2969V63.8203H80.7852V67.2012C80.7852 67.6035 80.8535 67.8906 80.9902 68.0625C81.127 68.2344 81.3535 68.3203 81.6699 68.3203C81.9121 68.3203 82.1211 68.2539 82.2969 68.1211V68.9414ZM87.875 69H86.9141V68.0625H86.8906C86.4727 68.7812 85.8574 69.1406 85.0449 69.1406C84.4473 69.1406 83.9785 68.9824 83.6387 68.666C83.3027 68.3496 83.1348 67.9297 83.1348 67.4062C83.1348 66.2852 83.7949 65.6328 85.1152 65.4492L86.9141 65.1973C86.9141 64.1777 86.502 63.668 85.6777 63.668C84.9551 63.668 84.3027 63.9141 83.7207 64.4062V63.4219C84.3105 63.0469 84.9902 62.8594 85.7598 62.8594C87.1699 62.8594 87.875 63.6055 87.875 65.0977V69ZM86.9141 65.9648L85.4668 66.1641C85.0215 66.2266 84.6855 66.3379 84.459 66.498C84.2324 66.6543 84.1191 66.9336 84.1191 67.3359C84.1191 67.6289 84.2227 67.8691 84.4297 68.0566C84.6406 68.2402 84.9199 68.332 85.2676 68.332C85.7441 68.332 86.1367 68.166 86.4453 67.834C86.7578 67.498 86.9141 67.0742 86.9141 66.5625V65.9648Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
 
 var blobUnavailableSvgSmall = `background: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23FBFBFE'/%3E%3Cpath d='M25.75 11C27.5449 11 29 12.4551 29 14.25V25.75C29 27.5449 27.5449 29 25.75 29H14.25C12.4551 29 11 27.5449 11 25.75V14.25C11 12.4551 12.4551 11 14.25 11H25.75ZM26.3305 27.4014L20.5247 21.7148C20.2596 21.4553 19.8501 21.4316 19.5588 21.644L19.4752 21.7148L13.6685 27.4011C13.8504 27.4651 14.0461 27.5 14.25 27.5H25.75C25.9535 27.5 26.1489 27.4653 26.3305 27.4014L20.5247 21.7148L26.3305 27.4014ZM25.75 12.5H14.25C13.2835 12.5 12.5 13.2835 12.5 14.25V25.75C12.5 25.9584 12.5364 26.1583 12.6033 26.3437L18.4258 20.643C19.2589 19.8273 20.5675 19.7885 21.4458 20.5266L21.5742 20.6431L27.3964 26.3447C27.4634 26.159 27.5 25.9588 27.5 25.75V14.25C27.5 13.2835 26.7165 12.5 25.75 12.5ZM23.2521 14.5C24.4959 14.5 25.5042 15.5083 25.5042 16.7521C25.5042 17.9959 24.4959 19.0042 23.2521 19.0042C22.0083 19.0042 21 17.9959 21 16.7521C21 15.5083 22.0083 14.5 23.2521 14.5ZM23.2521 16C22.8367 16 22.5 16.3367 22.5 16.7521C22.5 17.1675 22.8367 17.5042 23.2521 17.5042C23.6675 17.5042 24.0042 17.1675 24.0042 16.7521C24.0042 16.3367 23.6675 16 23.2521 16Z' fill='%23020057'/%3E%3C/svg%3E%0A") no-repeat center center;`;
@@ -1449,6 +1709,8 @@ var LayoutHelper = /** @class */ (function () {
             _this.hashMapAlpha = {};
             _this.hashMapBeta = {};
             _this.primaryHtmlNodeId = null;
+            // Reset dialog render state for new render cycle
+            resetDialogRenderState();
         };
         this.get = function (hash) {
             if (hash in _this.hashMapBeta && _this.hashMapBeta[hash].isConnected) {
@@ -1760,21 +2022,10 @@ var LayoutHelper = /** @class */ (function () {
                         }
                     case "DIALOG":
                         {
-                            // Use custom module for dialog rendering
-                            var dialogElement = _this.element(node.id);
-                            dialogElement = dialogElement ? dialogElement : _this.createElement(doc, node.tag);
-                            if (!node.attributes) {
-                                node.attributes = {};
-                            }
-                            // Extract render options before cleaning attributes
-                            var renderOptions = getDialogRenderOptions(node.attributes, dialogElement);
-                            // TODO: Clean custom tracking attributes
-                            // node.attributes = dialogCustom.cleanDialogAttributes(node.attributes);
-                            // Set attributes and insert into DOM
-                            _this.setAttributes(dialogElement, node);
-                            insert(node, parent_1, dialogElement, pivot);
-                            // Render dialog with proper modal/non-modal handling
-                            renderDialog(dialogElement, renderOptions, _this.state.options.logerror);
+                            _this.insertDefaultElement(node, parent_1, pivot, doc, insert);
+                            var domElement = _this.element(node.id);
+                            var renderOptions = getDialogRenderOptions(node.attributes, domElement);
+                            renderDialog(domElement, renderOptions, _this.state.options.logerror);
                             break;
                         }
                     default:
@@ -2138,7 +2389,7 @@ var Visualizer = /** @class */ (function () {
                     return false;
             }
         };
-        this.html = function (decoded, target, hash, useproxy, logerror, shortCircuitStrategy) {
+        this.html = function (decoded, target, portalCanvas, hash, useproxy, logerror, shortCircuitStrategy) {
             if (hash === void 0) { hash = null; }
             if (shortCircuitStrategy === void 0) { shortCircuitStrategy = 0 /* ShortCircuitStrategy.None */; }
             return __awaiter(_this, void 0, void 0, function () {
@@ -2151,7 +2402,7 @@ var Visualizer = /** @class */ (function () {
                         case 1:
                             _b.trys.push([1, 10, , 11]);
                             merged = this.merge(decoded);
-                            return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy })];
+                            return [4 /*yield*/, this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy: useproxy, portalCanvas: portalCanvas })];
                         case 2:
                             _b.sent();
                             _b.label = 3;