@vectoriox/iox-builder 11.4.0 → 11.5.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -25,7 +25,7 @@ import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem } from '@vectoriox/iox-ui/actions-core';
+import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem, openedDialogId, DIALOG_CLOSING_ATTRIBUTE, cancelExit, runExitMotion } from '@vectoriox/iox-ui/actions-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
@@ -931,6 +931,9 @@ var PanelEventTypes;
      *  through also runs. This event is that path for code outside `BuilderComponent` itself,
      *  mirroring what `onTreeNodeSelect`/`onCrumbSelect` already do internally. */
     PanelEventTypes["SELECT_NODE"] = "selectnode";
+    /** A canvas Dialog closed while the selection sat in it (data = { dialogId }): the builder moves the selection
+     *  to the dialog's opener (the menu button), else clears it — never left on an element leaving the DOM. */
+    PanelEventTypes["DIALOG_CLOSED_OVER_SELECTION"] = "dialogclosedoverselection";
     /** A panel rewrote a node's SUBTREE in place — its children (a Card's Parts), its layout styles (Card ▸
      *  Layout), a part's element style or scheme. Carries `{ node }`. The builder re-renders the subtree,
      *  re-registers every node's rules and design classes, refreshes a Repeater holding it, and records ONE
@@ -4891,18 +4894,21 @@ class CanvasDesignStateService {
             return;
         this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection });
     }
-    /** Closed on the canvas (its X, its backdrop, the eye): no longer pinned or switched open. */
+    /** Closed on the canvas (its X, its backdrop, the eye): no longer pinned, switched open or revealed by the
+     *  selection — selecting into it again reveals it again. */
     dismiss(nodeId) {
         if (!nodeId)
             return;
-        const { pinned, shown } = this._state$.value;
-        if (!pinned.has(nodeId) && !shown.has(nodeId))
+        const { pinned, shown, revealed } = this._state$.value;
+        if (!pinned.has(nodeId) && !shown.has(nodeId) && !revealed.has(nodeId))
             return;
         const nextPinned = new Set(pinned);
         nextPinned.delete(nodeId);
         const nextShown = new Map(shown);
         nextShown.delete(nodeId);
-        this._state$.next({ ...this._state$.value, pinned: nextPinned, shown: nextShown });
+        const nextRevealed = new Set(revealed);
+        nextRevealed.delete(nodeId);
+        this._state$.next({ ...this._state$.value, pinned: nextPinned, shown: nextShown, revealed: nextRevealed });
     }
     /** The switcher's choice for one part (null = back to the saved default). */
     setShown(nodeId, state) {
@@ -6649,6 +6655,45 @@ function preventNativeCanvasDrag(event) {
         event.preventDefault();
 }
 
+/** The panels that describe the SELECTED ELEMENT: selecting another element keeps whichever of these is open. */
+const ELEMENT_PANELS = new Set([PanelTypes.BINDINGS, PanelTypes.STYLES, PanelTypes.INTERACTIONS]);
+/**
+ * The panel a selection shows. An element panel that is open stays (the author wiring Interactions across
+ * several elements is not thrown back to Styles on every click); with the Page panel open, or none, the
+ * element's Styles open.
+ */
+function panelForSelection(activePanel, isPanelOpen) {
+    return isPanelOpen && activePanel && ELEMENT_PANELS.has(activePanel) ? activePanel : PanelTypes.STYLES;
+}
+
+/**
+ * The node whose click opens `dialogId` (the menu button for a drawer, More for a bar's drawer) — where the
+ * canvas selection goes when the dialog it sat in closes. The first in tree order across the page and its
+ * globals, or null when nothing opens it.
+ */
+function findDialogOpener(trees, dialogId) {
+    const visit = (nodes) => {
+        for (const node of nodes ?? []) {
+            if (openedDialogId(node) === dialogId)
+                return node;
+            const hit = visit(node.children);
+            if (hit)
+                return hit;
+        }
+        return null;
+    };
+    for (const tree of trees) {
+        const hit = visit(tree);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+/** True when the element sits in a dialog that is playing its exit (actions-core `runExitMotion` marks it). */
+function isInsideExit(el) {
+    return !!el?.closest?.(`[${DIALOG_CLOSING_ATTRIBUTE}]`);
+}
+
 /** States whose rule needs the LIVE DOM to scope (a parent's / a trigger's id) — the RenderDirective owns them. */
 const DOM_SCOPED_STATES = new Set([...RELATIONAL_STATES, ...TARGETED_STATES]);
 /** A node's base style map, from its style traits (the live values the Style panel edits). */
@@ -7485,6 +7530,19 @@ function compositePartSub(node, ancestors = []) {
     return null;
 }
 
+/** Hides a piece of selection / hover chrome without dropping the entry it describes. */
+const HIDDEN_CHROME = Object.freeze({ display: 'none' });
+/**
+ * True when the element is in the document and draws a box the chrome can point at. A node whose element left
+ * the DOM (a part of a canvas dialog that just closed) or draws nothing (`display: contents`, a closed dialog's
+ * host) measures 0×0 at the viewport's corner — chrome drawn from that rect lands at the top-left of the screen.
+ */
+function hasRenderedBox(el, rect) {
+    if (!el?.isConnected || !rect)
+        return false;
+    return rect.width > 0 || rect.height > 0;
+}
+
 /**
  * PresetRegistryService — in-memory store for org-level style presets.
  *
@@ -8062,6 +8120,12 @@ class OverlayComponent {
         }
         const styledEl = this.overlayService.getStyledElement(this.hoverEntry.element);
         const rect = styledEl.getBoundingClientRect();
+        if (!hasRenderedBox(styledEl, rect)) {
+            this.hiOutlineStyle = HIDDEN_CHROME;
+            this.hiMarginStyle = HIDDEN_CHROME;
+            this.hiPaddingStyle = HIDDEN_CHROME;
+            return;
+        }
         // Recalculate fresh — stored boxModel can be stale if CSS rules changed.
         const { margin, border, padding } = this.overlayService.buildBoxModel(this.hoverEntry.element);
         // All overlay boxes use position:fixed with raw viewport coords from
@@ -8104,6 +8168,12 @@ class OverlayComponent {
         }
         const styledEl = this.overlayService.getStyledElement(this.selectEntry.element);
         const rect = styledEl.getBoundingClientRect();
+        // An element that left the DOM (a part of a dialog that just closed) or draws no box measures 0,0 — the
+        // outline and its toolbar would sit at the viewport's corner. Nothing to point at: no chrome.
+        if (!hasRenderedBox(styledEl, rect)) {
+            this.selectOutlineStyle = HIDDEN_CHROME;
+            return;
+        }
         // position:fixed with raw viewport coords — same reasoning as updateHover.
         this.selectOutlineStyle = this.createBoxStyle(rect.top, rect.left, rect.width, rect.height);
         // The breadcrumb band begins at the canvas area's top (our own host). A toolbar rendered
@@ -9829,12 +9899,20 @@ class BuilderComponent {
         this.activePanel = panel;
         this.panelEventService.emit(this.isPanelOpen ? PanelEventTypes.PANEL_SELECTED : PanelEventTypes.PANEL_OPEN, panel);
     }
+    /** A new element was selected: keep the element panel that is open, else open Styles (`panelForSelection`). */
+    selectPanelForElement() {
+        this.selectPanel(panelForSelection(this.activePanel, this.isPanelOpen));
+    }
     handleClick(event) {
         if (this.activeMode === BuilderMode.Pan)
             return;
+        // The canvas is live: a click on a dialog's Close ran its closeDialog first (capture). Selecting into the
+        // closing dialog would reveal it again (R2) and leave the selection on an element about to leave the DOM.
+        if (isInsideExit(event.element))
+            return;
         this.selectedItem = event.node;
         this.overlayService.setSelect(event.element, event.node.type, this.activeMode, event.node, event.componentRef, event.fromRow ?? null);
-        this.selectPanel(PanelTypes.STYLES);
+        this.selectPanelForElement();
         this._emitElementSelect(event.node, event.componentRef);
     }
     /**
@@ -9861,7 +9939,7 @@ class BuilderComponent {
                 return;
             this.selectedItem = node;
             this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
-            this.selectPanel(PanelTypes.STYLES);
+            this.selectPanelForElement();
             this._emitElementSelect(node, ref.componentRef);
         });
     }
@@ -9894,6 +9972,26 @@ class BuilderComponent {
         this.overlayService.clearSelect();
         this.refreshBreakpointCounts();
     }
+    /**
+     * The canvas Dialog the selection sat in closed (its Close, the backdrop, the eye): the selection moves to its
+     * opener — the menu button that opened the drawer — or, when nothing opens it, off the canvas. Never left on an
+     * element that is leaving the DOM (its chrome drew at the viewport's corner), and never on the dialog itself,
+     * which selecting would open again.
+     */
+    selectAfterDialogClosed(dialogId) {
+        const opener = dialogId ? findDialogOpener([this.layout, this.globalElements], dialogId) : null;
+        const ref = opener ? this.overlayService.getNodeRef(opener) : null;
+        if (opener && ref?.element?.isConnected) {
+            this.selectedItem = opener;
+            this.overlayService.setSelect(ref.element, opener.type, this.activeMode, opener, ref.componentRef);
+            this._emitElementSelect(opener, ref.componentRef);
+            return;
+        }
+        this.selectedItem = null;
+        this.selectedPath = [];
+        this.overlayService.clearSelect();
+        this.panelEventService.emit(PanelEventTypes.ELEMENT_DESELECT, null);
+    }
     /** Breadcrumb crumb clicked — select that ancestor. Mirrors a layer-tree click. */
     onCrumbSelect(node) {
         this._withNodeRef(node, ref => {
@@ -9932,7 +10030,7 @@ class BuilderComponent {
             this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
             this._emitElementSelect(node, ref.componentRef);
         });
-        this.selectPanel(PanelTypes.STYLES);
+        this.selectPanelForElement();
     }
     onTreeNodeAction(event) {
         const { action, node } = event;
@@ -10101,7 +10199,7 @@ class BuilderComponent {
             }
             case ToolbarAction.EditPreset: {
                 this.panelEventService.emit(PanelEventTypes.PRESET_EDIT, node.stylePresetId);
-                this.panelEventService.emit(this.isPanelOpen ? PanelEventTypes.PANEL_SELECTED : PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
+                this.selectPanel(PanelTypes.STYLES);
                 break;
             }
             case ToolbarAction.EditInteractionPreset: {
@@ -10109,7 +10207,7 @@ class BuilderComponent {
                 if (node.interactionPresetId) {
                     this.panelEventService.emit(PanelEventTypes.INTERACTION_PRESET_EDIT, node.interactionPresetId);
                 }
-                this.panelEventService.emit(this.isPanelOpen ? PanelEventTypes.PANEL_SELECTED : PanelEventTypes.PANEL_OPEN, PanelTypes.INTERACTIONS);
+                this.selectPanel(PanelTypes.INTERACTIONS);
                 // Expand the specific interaction the badge represents so the panel opens "on the right
                 // interaction active". Emitted AFTER PANEL_OPEN so the panel is showing this node.
                 if (event.interaction?.id) {
@@ -10516,6 +10614,10 @@ class BuilderComponent {
                 });
             return;
         }
+        if (panelEvent.type === PanelEventTypes.DIALOG_CLOSED_OVER_SELECTION) {
+            this.selectAfterDialogClosed(String(panelEvent.data?.dialogId ?? ''));
+            return;
+        }
         // Every style or structural edit — including a breakpoint override — emits LAYOUT_CHANGED.
         if (panelEvent.type === PanelEventTypes.LAYOUT_CHANGED) {
             this.refreshBreakpointCounts();
@@ -10527,8 +10629,12 @@ class BuilderComponent {
             this.isPanelOpen = false;
             return;
         }
-        if (panelEvent.type === PanelEventTypes.PANEL_OPEN) {
+        // Whoever opened a panel (a tab, a deep link, a toolbar badge), the builder knows which one is showing —
+        // the next selection keeps it when it is an element panel.
+        if (panelEvent.type === PanelEventTypes.PANEL_OPEN || panelEvent.type === PanelEventTypes.PANEL_SELECTED) {
             this.isPanelOpen = true;
+            if (typeof panelEvent.data === 'string')
+                this.activePanel = panelEvent.data;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: FormStateService }, { token: CanvasDesignStateService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -11183,12 +11289,13 @@ class BuilderDialogComponent {
         const allowed = ['center', 'top', 'bottom', 'start', 'end'];
         return allowed.indexOf(String(this.placement)) >= 0 ? String(this.placement) : 'center';
     }
-    constructor(dragEngine, instanceRegistry, overlayService, cdr, designState) {
+    constructor(dragEngine, instanceRegistry, overlayService, cdr, designState, panelEvents) {
         this.dragEngine = dragEngine;
         this.instanceRegistry = instanceRegistry;
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.designState = designState;
+        this.panelEvents = panelEvents;
         this.children = [];
         this.nodeId = '';
         this.dropListId = '';
@@ -11200,27 +11307,74 @@ class BuilderDialogComponent {
         this.childMouseLeave = new EventEmitter();
         /** Canvas-only visibility. Never serialised; the live site always starts closed. */
         this.designOpen = false;
+        /** The exit is playing: still rendered, already closed for every action and the eye. */
+        this.closing = false;
         /** Opened by an action on the canvas (the canvas is a live runtime): stays until something closes it. */
         this.runtimeOpen = false;
         /** Closed by its X / backdrop while the selection or the switcher still shows it: hidden until either changes. */
         this.dismissed = false;
     }
+    /** Open on the canvas right now (an exit that is playing counts as closed). */
+    get isOpen() {
+        return this.designOpen && !this.closing;
+    }
     /** Shown when an action opened it, or the canvas design state shows it (selection inside / switched open). */
     recompute() {
         const shown = !this.dismissed && (this.runtimeOpen || !!this.designState?.isShown(this.nodeId));
-        if (shown === this.designOpen)
+        if (shown) {
+            if (this.closing) {
+                this.closing = false;
+                cancelExit(this.stageRef?.nativeElement);
+            }
+            if (this.designOpen)
+                return;
+            this.designOpen = true;
+            this.cdr.markForCheck();
             return;
-        this.designOpen = shown;
+        }
+        if (this.designOpen && !this.closing)
+            this.playExit();
+    }
+    /** Close with the look's exit motion; the stage leaves the DOM when it has played (now, under reduced motion). */
+    playExit() {
+        const stage = this.stageRef?.nativeElement;
+        this.closing = true;
+        if (!stage) {
+            this.finishExit();
+            return;
+        }
+        void runExitMotion(stage, { animate: motionAllowed() }).then(done => { if (done && this.closing)
+            this.finishExit(); });
+    }
+    finishExit() {
+        this.closing = false;
+        this.designOpen = false;
         this.cdr.markForCheck();
     }
     openRuntime() { this.runtimeOpen = true; this.dismissed = false; this.recompute(); }
     closeRuntime() {
+        // A selection INSIDE the dialog (its Close, picked to style it) would be left on an element about to leave
+        // the DOM — the selection chrome drawn at the viewport's corner (Doron's live test). It moves to the
+        // dialog's opener (the menu button), else off the canvas; checked BEFORE the reveal is cleared.
+        const handOff = this.selectionInside();
         this.runtimeOpen = false;
-        // Unpin it first (a free-standing dialog the selection opened, A4) — that emits and clears
-        // `dismissed`; then hide it even while the selection still sits inside a revealed part (R2).
+        // Unpin it and clear its reveal (a free-standing dialog the selection opened, A4; a part the selection sat
+        // in, R2) — that emits and clears `dismissed`; then hide it even while the selection is still inside.
         this.designState?.dismiss(this.nodeId);
         this.dismissed = true;
         this.recompute();
+        if (handOff)
+            this.panelEvents?.emit(PanelEventTypes.DIALOG_CLOSED_OVER_SELECTION, { dialogId: this.nodeId });
+    }
+    /** True when the canvas selection is this dialog or a node inside it. */
+    selectionInside() {
+        const sel = this.overlayService.getCurrentSelection?.();
+        if (!sel)
+            return false;
+        if (sel.node?.id === this.nodeId)
+            return true;
+        const stage = this.stageRef?.nativeElement;
+        return !!stage && !!sel.element && stage.contains(sel.element);
     }
     ngOnInit() {
         // Board A4: "Closed later? Click it [in the tree] and it reopens." Selection IS the
@@ -11258,8 +11412,8 @@ class BuilderDialogComponent {
         this.instanceRegistry.register(this.nodeId, {
             open: () => this.openRuntime(),
             close: () => this.closeRuntime(),
-            toggle: () => (this.designOpen ? this.closeRuntime() : this.openRuntime()),
-            isOpen: () => this.designOpen,
+            toggle: () => (this.isOpen ? this.closeRuntime() : this.openRuntime()),
+            isOpen: () => this.isOpen,
         });
     }
     ngOnDestroy() {
@@ -11290,9 +11444,9 @@ class BuilderDialogComponent {
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }, { token: CanvasDesignStateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }, { token: CanvasDesignStateService, optional: true }, { token: PanelEventService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true }], ngImport: i0, template: `
+        <div *ngIf="designOpen" #stage class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
             <div [ngClass]="['iox-node-' + nodeId, 'iox-outer-' + nodeId]"
                  class="dialog-surface"
@@ -11323,12 +11477,12 @@ class BuilderDialogComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [":host{display:contents}.dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [":host{display:contents}.dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:host(.iox-es) .dialog-stage{animation:iox-dialog-scrim-in var(--iox-dur-base) var(--iox-ease-enter) both}:host(.iox-es) .dialog-stage[data-iox-closing]{animation:iox-dialog-scrim-out var(--iox-dur-base) var(--iox-ease-exit) both}:host(.iox-es) .dialog-surface{--dialog-exit-x: 0px;--dialog-exit-y: 12px;--dialog-exit-opacity: 0;animation:iox-dialog-in var(--iox-dur-base) var(--iox-ease-enter) both}:host(.iox-es) .dialog-stage[data-iox-closing] .dialog-surface{animation:iox-dialog-out var(--iox-dur-base) var(--iox-ease-exit) both}:host(.iox-es) .dialog-stage[data-placement=top] .dialog-surface{--dialog-exit-y: -12px}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{--dialog-exit-y: 0px;--dialog-exit-opacity: 1}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{--dialog-exit-x: calc(100% * var(--dialog-dir, 1))}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{--dialog-exit-x: calc(-100% * var(--dialog-dir, 1))}:host-context([dir=\"rtl\"]){--dialog-dir: -1}@keyframes iox-dialog-scrim-in{0%{background-color:transparent}}@keyframes iox-dialog-scrim-out{to{background-color:transparent}}@keyframes iox-dialog-in{0%{translate:var(--dialog-exit-x) var(--dialog-exit-y);opacity:var(--dialog-exit-opacity)}}@keyframes iox-dialog-out{to{translate:var(--dialog-exit-x) var(--dialog-exit-y);opacity:var(--dialog-exit-opacity)}}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-builder-dialog', template: `
-        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
+        <div *ngIf="designOpen" #stage class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
             <div [ngClass]="['iox-node-' + nodeId, 'iox-outer-' + nodeId]"
                  class="dialog-surface"
@@ -11359,9 +11513,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [":host{display:contents}.dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
+    `, standalone: false, styles: [":host{display:contents}.dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:host(.iox-es) .dialog-stage{animation:iox-dialog-scrim-in var(--iox-dur-base) var(--iox-ease-enter) both}:host(.iox-es) .dialog-stage[data-iox-closing]{animation:iox-dialog-scrim-out var(--iox-dur-base) var(--iox-ease-exit) both}:host(.iox-es) .dialog-surface{--dialog-exit-x: 0px;--dialog-exit-y: 12px;--dialog-exit-opacity: 0;animation:iox-dialog-in var(--iox-dur-base) var(--iox-ease-enter) both}:host(.iox-es) .dialog-stage[data-iox-closing] .dialog-surface{animation:iox-dialog-out var(--iox-dur-base) var(--iox-ease-exit) both}:host(.iox-es) .dialog-stage[data-placement=top] .dialog-surface{--dialog-exit-y: -12px}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{--dialog-exit-y: 0px;--dialog-exit-opacity: 1}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{--dialog-exit-x: calc(100% * var(--dialog-dir, 1))}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{--dialog-exit-x: calc(-100% * var(--dialog-dir, 1))}:host-context([dir=\"rtl\"]){--dialog-dir: -1}@keyframes iox-dialog-scrim-in{0%{background-color:transparent}}@keyframes iox-dialog-scrim-out{to{background-color:transparent}}@keyframes iox-dialog-in{0%{translate:var(--dialog-exit-x) var(--dialog-exit-y);opacity:var(--dialog-exit-opacity)}}@keyframes iox-dialog-out{to{translate:var(--dialog-exit-x) var(--dialog-exit-y);opacity:var(--dialog-exit-opacity)}}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i1$1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }, { type: CanvasDesignStateService, decorators: [{
                     type: Optional
+                }] }, { type: PanelEventService, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
@@ -11380,6 +11536,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }], childMouseLeave: [{
                 type: Output
+            }], stageRef: [{
+                type: ViewChild,
+                args: ['stage']
             }] } });
 
 /** Swiper's event → the interaction trigger it replays (componentEvents). */