@vectoriox/iox-builder 11.4.0 → 11.6.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, entranceDelay, repeatedRowIndex, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, entranceDelay, repeatedRowIndex, keyframeStyleEntries, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
@@ -25,13 +25,13 @@ 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 { NavRole, navShapeBreakpoint, entranceInteraction, entranceAction, sectionEntrances, EntrancePart } from '@vectoriox/iox-ui/generation-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
 import * as i18 from 'primeng/api';
 import { planVideo, VideoSource, VIDEO_PROVIDER_LABEL, VideoTrait, VideoMode } from '@vectoriox/iox-ui/media-core';
-import { entranceInteraction, entranceAction, sectionEntrances, EntrancePart } from '@vectoriox/iox-ui/generation-core';
 import { ConsentCategory } from '@vectoriox/iox-ui/consent-core';
 
 /**
@@ -115,6 +115,13 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.addItem': 'Add item',
     'builder.chrome.kindTabs': 'Tabs',
     'builder.chrome.kindNav': 'Navigation bar',
+    'builder.chrome.menuPreview': 'Menu',
+    'builder.chrome.menuPreviewShow': 'Show the phone menu on the canvas (design only, never saved)',
+    'builder.chrome.menuPreviewHide': 'Hide the phone menu on the canvas',
+    'builder.chrome.menuOpener': 'Opens and closes the menu',
+    'builder.chrome.actionOpenDialog': 'Open dialog',
+    'builder.chrome.actionCloseDialog': 'Close dialog',
+    'builder.chrome.actionToggleDialog': 'Open or close dialog',
     'builder.chrome.addTab': 'Add tab',
     'builder.chrome.refuseLockedTabsPart': 'Tabs keep their tab list and their panels. Delete the whole Tabs instead.',
     'builder.chrome.refuseLockedTabsPartMove': 'This part belongs to its Tabs — it can’t be moved out.',
@@ -931,6 +938,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
@@ -4837,12 +4847,69 @@ function pathToNode(roots, target) {
     return [];
 }
 
+const NAV_CONTEXT_ROLES = new Set([NavRole.Root, NavRole.Drawer, NavRole.Bar]);
+function findRole(nodes, role) {
+    for (const n of nodes) {
+        if (n.role === role)
+            return n;
+        const below = findRole(n.children ?? [], role);
+        if (below)
+            return below;
+    }
+    return null;
+}
+/** True when the selection (root → selected) is the Navigation bar, its drawer, its bottom bar, or anything inside them. */
+function inPhoneMenuContext(path) {
+    return path.some(n => !!n.role && NAV_CONTEXT_ROLES.has(n.role));
+}
+/**
+ * The phone menu a selection belongs to, or null when the selection is outside a navigation or the site has no drawer
+ * (no phone shape yet, or the Bottom bar shape). The drawer is looked up in the selection's own Navigation bar first,
+ * then in the globals (the Both shape makes it a global of its own).
+ */
+function phoneMenuOf(path, globals = []) {
+    if (!inPhoneMenuContext(path))
+        return null;
+    const root = path.find(n => n.role === NavRole.Root) ?? null;
+    const scopes = root ? [root, ...globals] : [...globals];
+    const drawer = path.find(n => n.role === NavRole.Drawer) ?? findRole(scopes, NavRole.Drawer);
+    if (!drawer)
+        return null;
+    const menuButton = findRole(scopes, NavRole.MenuButton);
+    const at = navShapeBreakpoint(scopes);
+    return { root, drawer, menuButton, at };
+}
+/** True when the canvas, at `breakpoint`, shows the phone menu that takes over at `at` (that width or narrower). */
+function phoneMenuShowsAt(at, breakpoint) {
+    return cascadeChain(breakpoint).includes(at);
+}
+const OPENER_TRIGGER = 'click';
+/** The dialog actions a phone menu's opener runs (generation-core stamps Toggle; CC1 menus still hold Open). */
+var PhoneMenuOpenerAction;
+(function (PhoneMenuOpenerAction) {
+    PhoneMenuOpenerAction["Open"] = "openDialog";
+    PhoneMenuOpenerAction["Toggle"] = "toggleDialog";
+})(PhoneMenuOpenerAction || (PhoneMenuOpenerAction = {}));
+const OPENER_ACTIONS = new Set(Object.values(PhoneMenuOpenerAction));
+/** True when `interaction` is the phone menu's own opener: the menu button's (or More's) click opening the drawer. */
+function isPhoneMenuOpener(node, interaction, drawerId) {
+    if (!drawerId || (node?.role !== NavRole.MenuButton && node?.role !== NavRole.More))
+        return false;
+    const actions = interaction?.actions ?? [];
+    return interaction?.trigger === OPENER_TRIGGER && actions.length === 1
+        && OPENER_ACTIONS.has(actions[0].type ?? '') && actions[0].target === drawerId;
+}
+
 /** What a hidden-at-rest part shows on the canvas when the author picks it in "Showing on canvas". */
 var CanvasShowState;
 (function (CanvasShowState) {
     CanvasShowState["Closed"] = "closed";
     CanvasShowState["Open"] = "open";
 })(CanvasShowState || (CanvasShowState = {}));
+const EMPTY_SNAPSHOT = () => ({
+    revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map(),
+    runtime: new Set(), menu: null,
+});
 /**
  * The canvas's DESIGN state (complex-components R2; composite plan §5a's CompositeDesignStateService,
  * started here for the navigation and reused by Accordion in CC2): which parts that are hidden at rest
@@ -4859,7 +4926,7 @@ var CanvasShowState;
  */
 class CanvasDesignStateService {
     constructor() {
-        this._state$ = new BehaviorSubject({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map() });
+        this._state$ = new BehaviorSubject(EMPTY_SNAPSHOT());
         this.state$ = this._state$.asObservable();
         this._pagePath$ = new BehaviorSubject(null);
         /** The app path of the page on the canvas (`/work`), or null when unknown. */
@@ -4878,31 +4945,45 @@ class CanvasDesignStateService {
     }
     /**
      * The selection moved. The hidden-at-rest PARTS on its path are revealed and every other part is not
-     * (R2); a free-standing overlay on the path is pinned open until it is closed (A4).
+     * (R2); a free-standing overlay on the path is pinned open until it is closed (A4). `globals` lets it find the
+     * phone menu the selection belongs to when its drawer lives outside the path (the Both shape).
      */
-    setSelectionPath(path) {
+    setSelectionPath(path, globals = []) {
         const ids = (reveal) => path.filter(n => selectionRevealOf(n) === reveal).map(n => n.id).filter((id) => !!id);
         const revealed = new Set(ids(SelectionReveal.WhileSelected));
         const selectedTriggers = new Set(path.filter(n => isExclusiveTrigger(n)).map(n => n.id).filter((id) => !!id));
         const triggeredBySelection = new Set(path.map(displayTriggerOf).filter((id) => !!id));
         const { revealed: was, pinned: held, selectedTriggers: wasTriggers, triggeredBySelection: wasTriggered } = this._state$.value;
         const pinned = new Set([...held, ...ids(SelectionReveal.UntilClosed)]);
-        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers) && sameSet(triggeredBySelection, wasTriggered))
+        const menu = phoneMenuOf(path, globals);
+        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers) && sameSet(triggeredBySelection, wasTriggered)
+            && sameMenu(menu, this._state$.value.menu))
             return;
-        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection });
+        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection, menu });
     }
-    /** 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, runtime } = this._state$.value;
+        if (!pinned.has(nodeId) && !shown.has(nodeId) && !revealed.has(nodeId) && !runtime.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);
+        const nextRuntime = new Set(runtime);
+        nextRuntime.delete(nodeId);
+        this._state$.next({ ...this._state$.value, pinned: nextPinned, shown: nextShown, revealed: nextRevealed, runtime: nextRuntime });
+    }
+    /** An action opened the overlay on the canvas (a click on the menu button): shown until something closes it. */
+    markOpened(nodeId) {
+        if (!nodeId || this._state$.value.runtime.has(nodeId))
+            return;
+        this._state$.next({ ...this._state$.value, runtime: new Set([...this._state$.value.runtime, nodeId]) });
     }
     /** The switcher's choice for one part (null = back to the saved default). */
     setShown(nodeId, state) {
@@ -4932,12 +5013,12 @@ class CanvasDesignStateService {
     shownState(nodeId) {
         return (nodeId && this._state$.value.shown.get(nodeId)) || CanvasShowState.Closed;
     }
-    /** True when the canvas shows the part: selected into, or switched open. */
+    /** True when the canvas shows the part: selected into, switched open, or opened by an action. */
     isShown(nodeId) {
         if (!nodeId)
             return false;
-        const { revealed, pinned, shown } = this._state$.value;
-        return revealed.has(nodeId) || pinned.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
+        const { revealed, pinned, shown, runtime } = this._state$.value;
+        return revealed.has(nodeId) || pinned.has(nodeId) || runtime.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
     }
     /** True when the canvas shows an item because the selection is styled "when it is on" (the switcher's hint). */
     isTriggeredBySelection(triggerId) {
@@ -4949,7 +5030,7 @@ class CanvasDesignStateService {
     }
     /** A new page on the canvas: nothing is revealed or switched open. */
     reset() {
-        this._state$.next({ revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map() });
+        this._state$.next(EMPTY_SNAPSHOT());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService }); }
@@ -4957,9 +5038,33 @@ class CanvasDesignStateService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, decorators: [{
             type: Injectable
         }] });
+function sameMenu(a, b) {
+    if (!a || !b)
+        return a === b;
+    return a.drawer === b.drawer && a.menuButton === b.menuButton && a.root === b.root && a.at === b.at;
+}
 function sameSet(a, b) {
     return a.size === b.size && [...a].every(id => b.has(id));
 }
+/**
+ * Show or hide an overlay part (the Menu drawer) for DESIGN — ONE move for every control that previews it (the
+ * Bindings ▸ Phone menu row, the canvas's Menu chip). Opening switches it open; closing closes its canvas twin the way
+ * its own Close does (the exit plays, the reveal and the switch are cleared, a selection inside it moves to its
+ * opener), so a drawer shown because the selection sits in it closes too.
+ */
+function setOverlayPreview(state, twins, id, open) {
+    if (!id)
+        return;
+    if (open) {
+        state.setShown(id, CanvasShowState.Open);
+        return;
+    }
+    const twin = twins?.get(id);
+    if (twin?.close)
+        twin.close();
+    else
+        state.dismiss(id);
+}
 
 /** The node whose "Showing on canvas" choice a rendered root follows: itself, or — a preview row's copy — its
  *  template (a copy shares its template's style id). */
@@ -6649,6 +6754,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 +7629,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.
  *
@@ -7538,6 +7695,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         }] });
 
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
+const MENU_CHIP_KEY = 'builder.chrome.menuPreview';
+const MENU_SHOW_KEY = 'builder.chrome.menuPreviewShow';
+const MENU_HIDE_KEY = 'builder.chrome.menuPreviewHide';
+const MENU_OPENER_KEY = 'builder.chrome.menuOpener';
+/** The interaction badge's words for a dialog action (it showed the raw `toggleDialog`). */
+const DIALOG_ACTION_KEYS = {
+    openDialog: 'builder.chrome.actionOpenDialog', closeDialog: 'builder.chrome.actionCloseDialog', toggleDialog: 'builder.chrome.actionToggleDialog',
+};
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
 const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure', tabs: 'builder.chrome.kindTabs', segmented: 'builder.chrome.kindSegmented', slider: 'builder.chrome.kindSlider', nav: 'builder.chrome.kindNav' };
@@ -7556,7 +7721,7 @@ const ADD_TAB_KEY = 'builder.chrome.addTab';
 /** A Segmented control says "Add option" (board 10). */
 const ADD_OPTION_KEY = 'builder.chrome.addOption';
 class OverlayComponent {
-    constructor(elRef, instanceRegistry, overlayService, viewportService, presetRegistry, symbolRegistry, interactionPresetRegistry, interactionEngine, clipboard, styleRegistry, panelEventService, cdr, dragEngine, labels) {
+    constructor(elRef, instanceRegistry, overlayService, viewportService, presetRegistry, symbolRegistry, interactionPresetRegistry, interactionEngine, clipboard, styleRegistry, panelEventService, cdr, dragEngine, labels, designState) {
         this.elRef = elRef;
         this.instanceRegistry = instanceRegistry;
         this.overlayService = overlayService;
@@ -7570,6 +7735,7 @@ class OverlayComponent {
         this.panelEventService = panelEventService;
         this.cdr = cdr;
         this.dragEngine = dragEngine;
+        this.designState = designState;
         this.toolbarAction = new EventEmitter();
         /** Element types the selected node can be wrapped in (Wrap-in submenu). Phase 1: layout containers. */
         this.wrapTargets = [
@@ -7617,6 +7783,12 @@ class OverlayComponent {
         this.boundUpdate = () => this.scheduleUpdate();
         this.boundScrollUpdate = () => this.scheduleUpdate();
         this.activeScrollContainer = null;
+        /** CC1.3: the phone menu the selection belongs to, while the canvas is at a width where it shows — the toolbar's
+         *  Menu chip previews its drawer (the same design state as Bindings ▸ Phone menu ▸ Preview on canvas). */
+        this.menuChip = null;
+        this.menuChipOpen = false;
+        this.menuChipLabel = '';
+        this.menuChipTitle = '';
         this.builderLabels = labels ?? defaultBuilderLabels;
     }
     /** Resolves the selected node's OWNING dropzone id dynamically — the drag-handle isn't
@@ -7639,8 +7811,12 @@ class OverlayComponent {
             this.cdr.markForCheck();
         }));
         window.addEventListener('resize', this.boundUpdate, { passive: true });
+        // CC1.3: the Menu chip follows the selection's phone menu and whether its drawer is shown.
+        if (this.designState)
+            this.subs.push(this.designState.state$.subscribe(() => { this.refreshMenuChip(); this.cdr.markForCheck(); }));
         // Re-calculate overlay positions whenever zoom / device changes.
         this.subs.push(this.viewportService.state$.subscribe(() => {
+            this.refreshMenuChip();
             // Delay one frame so the DOM has applied the new transform/width.
             this.scheduleUpdate();
         }));
@@ -7866,7 +8042,11 @@ class OverlayComponent {
             rotate: 'Rotate', show: 'Show', hide: 'Hide',
             toggleVisibility: 'Toggle',
         };
-        const label = labels[first.type] ?? first.type;
+        if (isPhoneMenuOpener(this.selectEntry?.node, ix, this.designState?.snapshot.menu?.drawer.id)) {
+            return this.builderLabels(MENU_OPENER_KEY, BUILDER_CHROME_EN[MENU_OPENER_KEY]);
+        }
+        const dialogKey = DIALOG_ACTION_KEYS[first.type];
+        const label = dialogKey ? this.builderLabels(dialogKey, BUILDER_CHROME_EN[dialogKey]) : (labels[first.type] ?? first.type);
         return ix.actions.length > 1 ? `${label} +${ix.actions.length - 1}` : label;
     }
     get hasPresetInClipboard() { return !!this.clipboard.getPresetId(); }
@@ -7987,9 +8167,24 @@ class OverlayComponent {
         return this.selectEntry?.node?.type === 'SliderContainer';
     }
     /** Boards A4/A5: a closed dialog has NO canvas presence — this toolbar eye (and the layer
-     *  tree row) is how an author opens and closes it for design. */
+     *  tree row) is how an author opens and closes it for design. The Menu drawer has the Menu chip instead. */
     get isDialog() {
-        return this.selectEntry?.node?.type === 'Dialog';
+        return this.selectEntry?.node?.type === 'Dialog' && this.selectEntry?.node?.id !== this.menuChip?.drawer.id;
+    }
+    refreshMenuChip() {
+        const menu = this.designState?.snapshot.menu ?? null;
+        this.menuChip = menu && phoneMenuShowsAt(menu.at, this.viewportService.getState().breakpoint) ? menu : null;
+        this.menuChipOpen = !!this.menuChip && !!this.designState?.isShown(this.menuChip.drawer.id);
+        this.menuChipLabel = this.builderLabels(MENU_CHIP_KEY, BUILDER_CHROME_EN[MENU_CHIP_KEY]);
+        const titleKey = this.menuChipOpen ? MENU_HIDE_KEY : MENU_SHOW_KEY;
+        this.menuChipTitle = this.builderLabels(titleKey, BUILDER_CHROME_EN[titleKey]);
+    }
+    onToggleMenuChip(event) {
+        event.stopPropagation();
+        if (!this.menuChip || !this.designState)
+            return;
+        setOverlayPreview(this.designState, this.instanceRegistry, this.menuChip.drawer.id, !this.menuChipOpen);
+        this.scheduleUpdate();
     }
     get dialogDesignOpen() {
         const id = this.selectEntry?.node?.id;
@@ -8062,6 +8257,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 +8305,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
@@ -8129,17 +8336,19 @@ class OverlayComponent {
         // is a zero-area line — prevents diagonal edge triangle artifacts.
         return `polygon(evenodd, 0px 0px, ${w}px 0px, ${w}px ${h}px, 0px ${h}px, 0px 0px, ${x1}px ${y1}px, ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px)`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i [class]=\"selectedRoleIcon\" aria-hidden=\"true\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ toolbarName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            @if (canAddItem) {\n            <button class=\"toolbar-btn toolbar-btn--add-slide\" [title]=\"addItemLabel\" (mousedown)=\"onAddItem($event)\">\n                <i class=\"ph-thin ph-plus\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ addItemLabel }}</span>\n            </button>\n            }\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn--add-slide{width:auto;padding:0 7px;gap:4px;border-radius:3px}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }, { token: IOX_BUILDER_LABELS, optional: true }, { token: CanvasDesignStateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i [class]=\"selectedRoleIcon\" aria-hidden=\"true\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ toolbarName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            @if (menuChip) {\n            <!-- CC1.3: the phone menu's drawer, shown or hidden for design from anywhere in the navigation. -->\n            <button class=\"toolbar-btn toolbar-btn--menu\" [class.toolbar-btn--on]=\"menuChipOpen\"\n                    [title]=\"menuChipTitle\" [attr.aria-label]=\"menuChipTitle\" [attr.aria-pressed]=\"menuChipOpen\"\n                    (mousedown)=\"onToggleMenuChip($event)\">\n                <i [class]=\"menuChipOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ menuChipLabel }}</span>\n            </button>\n            }\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            @if (canAddItem) {\n            <button class=\"toolbar-btn toolbar-btn--add-slide\" [title]=\"addItemLabel\" (mousedown)=\"onAddItem($event)\">\n                <i class=\"ph-thin ph-plus\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ addItemLabel }}</span>\n            </button>\n            }\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn--add-slide,.select-toolbar .toolbar-btn--menu{width:auto;padding:0 7px;gap:4px;border-radius:3px}.select-toolbar .toolbar-btn--on{background:#ffffff3d}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i [class]=\"selectedRoleIcon\" aria-hidden=\"true\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ toolbarName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            @if (canAddItem) {\n            <button class=\"toolbar-btn toolbar-btn--add-slide\" [title]=\"addItemLabel\" (mousedown)=\"onAddItem($event)\">\n                <i class=\"ph-thin ph-plus\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ addItemLabel }}</span>\n            </button>\n            }\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn--add-slide{width:auto;padding:0 7px;gap:4px;border-radius:3px}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
+            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i [class]=\"selectedRoleIcon\" aria-hidden=\"true\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ toolbarName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            @if (menuChip) {\n            <!-- CC1.3: the phone menu's drawer, shown or hidden for design from anywhere in the navigation. -->\n            <button class=\"toolbar-btn toolbar-btn--menu\" [class.toolbar-btn--on]=\"menuChipOpen\"\n                    [title]=\"menuChipTitle\" [attr.aria-label]=\"menuChipTitle\" [attr.aria-pressed]=\"menuChipOpen\"\n                    (mousedown)=\"onToggleMenuChip($event)\">\n                <i [class]=\"menuChipOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ menuChipLabel }}</span>\n            </button>\n            }\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            @if (canAddItem) {\n            <button class=\"toolbar-btn toolbar-btn--add-slide\" [title]=\"addItemLabel\" (mousedown)=\"onAddItem($event)\">\n                <i class=\"ph-thin ph-plus\" aria-hidden=\"true\"></i>\n                <span class=\"toolbar-btn__label\">{{ addItemLabel }}</span>\n            </button>\n            }\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn--add-slide,.select-toolbar .toolbar-btn--menu{width:auto;padding:0 7px;gap:4px;border-radius:3px}.select-toolbar .toolbar-btn--on{background:#ffffff3d}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: DragEngineService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [IOX_BUILDER_LABELS]
+                }] }, { type: CanvasDesignStateService, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });
@@ -9134,8 +9343,9 @@ class BuilderComponent {
     set selectedPath(path) {
         this._selectedPath = path;
         this.formStateService.setTarget(nearestFormNode(path));
-        // R2 (CC1): a part hidden at rest that the selection sits in (a closed drawer) shows while selected.
-        this.canvasDesignState.setSelectionPath(path);
+        // R2 (CC1): a part hidden at rest that the selection sits in (a closed drawer) shows while selected; the
+        // globals let it name the phone menu the selection belongs to (CC1.3: the Menu chip, Bindings ▸ Phone menu).
+        this.canvasDesignState.setSelectionPath(path, this.globalElements);
     }
     // Type-safe event forwarding for toolbar outputs
     handleToolbarModeChange(mode) {
@@ -9438,6 +9648,8 @@ class BuilderComponent {
         }
         if (changes['globalElements']) {
             this.refreshCanvasBarReserve();
+            // A phone-menu edit (Drawer · Bottom bar · Both) adds or removes the drawer: the selection's menu follows.
+            this.canvasDesignState.setSelectionPath(this._selectedPath, this.globalElements);
             // The *ngIf on the global overlay renders after this hook — defer so
             // globalOverlayRef is in the DOM before we try to set CSS vars on it.
             setTimeout(() => this.updatePreviewVh());
@@ -9829,12 +10041,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 +10081,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 +10114,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 +10172,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 +10341,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 +10349,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 +10756,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 +10771,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 +11431,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 +11449,81 @@ 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(); }
+    /** Opened by an action (or the eye): the design state hears it too, so the Phone menu's preview and the Menu chip
+     *  say "open" whichever way it opened (CC1.3). */
+    openRuntime() {
+        this.runtimeOpen = true;
+        this.dismissed = false;
+        this.recompute();
+        this.designState?.markOpened(this.nodeId);
+    }
     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 +11561,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 +11593,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 +11626,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 +11662,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 +11685,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). */
@@ -14255,5 +14563,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, BusinessSpecimenView, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, BusinessSpecimenView, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PhoneMenuOpenerAction, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, inPhoneMenuContext, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPhoneMenuOpener, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, phoneMenuOf, phoneMenuShowsAt, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setOverlayPreview, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map