@vectoriox/iox-builder 4.34.0 → 4.34.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -3705,7 +3705,14 @@ class StyleRegistryService {
         'gridColumn', 'gridRow', 'justifySelf',
         'width',
     ]); }
-    /** Properties that need !important on the inner element to beat Angular's scoped-CSS specificity boost. */
+    /**
+     * Properties that need !important on the inner element to beat Angular's scoped-CSS
+     * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
+     * importance and the SSR engine never emits it — this is the builder's own fight with its
+     * scoped component styles. The A4 dialog centring clash this once caused is resolved
+     * structurally (the grid stage PLACES a static surface), so the set stays at exactly one
+     * documented member; adding to it needs the same scrutiny.
+     */
     static { this.IMPORTANT_PROPS = new Set(['position']); }
     init() {
         this.styleEl = document.createElement('style');
@@ -5472,11 +5479,11 @@ class OverlayComponent {
         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.ComponentInstanceRegistryService }, { token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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=\"selectedPresetName || interactions.length\">\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\">{{ selectEntry?.componentName }}</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            <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:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.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:left;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:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.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}.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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=\"selectedPresetName || interactions.length\">\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\">{{ selectEntry?.componentName }}</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            <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:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.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:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.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}.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=\"selectedPresetName || interactions.length\">\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\">{{ selectEntry?.componentName }}</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            <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:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.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:left;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:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.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}.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=\"selectedPresetName || interactions.length\">\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\">{{ selectEntry?.componentName }}</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            <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:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.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:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.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}.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.ComponentInstanceRegistryService }, { type: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: DragEngineService }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });