@vectoriox/iox-builder 1.4.65 → 1.4.67

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, inject, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -12,12 +12,13 @@ import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i4$1 from 'primeng/select';
+import * as i5$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i14 from '@vectoriox/iox-ui';
-import { IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
+import { ComponentInstanceRegistryService, IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
+export { ComponentInstanceRegistryService } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject } from 'rxjs';
 import interact from 'interactjs';
@@ -133,6 +134,7 @@ var ToolbarAction;
     ToolbarAction["PasteInteractionPreset"] = "paste-interaction-preset";
     ToolbarAction["Copy"] = "copy";
     ToolbarAction["Paste"] = "paste";
+    ToolbarAction["AddSlide"] = "add-slide";
 })(ToolbarAction || (ToolbarAction = {}));
 var NodeAction;
 (function (NodeAction) {
@@ -1194,6 +1196,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+// Re-exported from the shared iox-ui package so iox-builder consumers
+// don't need to import from two different packages.
+
 /**
  * Wires ComponentNode interactions to live DOM elements via the
  * OverlayService node-element registry.
@@ -1224,6 +1229,11 @@ class InteractionEngineService {
         ]);
         /** Action types that animate an element from visible → hidden. */
         this.EXIT_TYPES = new Set(['fadeOut', 'scaleOut', 'hide']);
+        this.SWIPER_ACTIONS = new Set([
+            'swiperNext', 'swiperPrev', 'swiperGoToSlide',
+            'swiperAutoplayStart', 'swiperAutoplayStop', 'swiperAutoplayPause',
+        ]);
+        this.instanceRegistry = inject(ComponentInstanceRegistryService);
     }
     /** Wire all interactions for a node to its rendered DOM element. */
     attach(node) {
@@ -1357,6 +1367,23 @@ class InteractionEngineService {
             this.runActions(node, ix.actions);
         }
     }
+    /**
+     * Fire all interactions on the given node that match the specified trigger.
+     * Used by Swiper (and future components) to dispatch their events into the
+     * interaction engine without coupling to the engine's attach/detach lifecycle.
+     */
+    replayTrigger(nodeId, trigger) {
+        for (const [node] of this.attached) {
+            if (node.id !== nodeId)
+                continue;
+            for (const ix of (node.interactions ?? [])) {
+                if (ix.trigger === trigger) {
+                    this.runActions(node, ix.actions);
+                }
+            }
+            return;
+        }
+    }
     // ── Private ──────────────────────────────────────────────
     attachInteraction(node, ix, element) {
         // In builder mode, automatic triggers don't auto-fire — use the play button instead.
@@ -1480,12 +1507,42 @@ class InteractionEngineService {
     // ── Actions ──────────────────────────────────────────────
     runActions(node, actions) {
         for (const action of actions) {
+            if (this.SWIPER_ACTIONS.has(action.type)) {
+                this.executeSwiperAction(action);
+                continue;
+            }
             const target = this.resolveTarget(node, action);
             if (!target)
                 continue;
             this.executeAction(target, action);
         }
     }
+    executeSwiperAction(action) {
+        // Target is the nodeId of the SliderContainer to control.
+        const swiper = this.instanceRegistry.get(action.target);
+        if (!swiper)
+            return;
+        switch (action.type) {
+            case 'swiperNext':
+                swiper.slideNext();
+                break;
+            case 'swiperPrev':
+                swiper.slidePrev();
+                break;
+            case 'swiperGoToSlide':
+                swiper.slideTo(action.params?.['index'] ?? 0);
+                break;
+            case 'swiperAutoplayStart':
+                swiper.autoplay?.start();
+                break;
+            case 'swiperAutoplayStop':
+                swiper.autoplay?.stop();
+                break;
+            case 'swiperAutoplayPause':
+                swiper.autoplay?.pause();
+                break;
+        }
+    }
     resolveTarget(ownerNode, action) {
         if (action.target === 'self') {
             const ref = this.overlayService.getNodeRef(ownerNode);
@@ -1915,6 +1972,7 @@ var TraitInputType;
     TraitInputType["FontFamily"] = "fontFamily";
     TraitInputType["GridTemplate"] = "gridTemplate";
     TraitInputType["SectionLabel"] = "sectionLabel";
+    TraitInputType["Textarea"] = "textarea";
 })(TraitInputType || (TraitInputType = {}));
 function generateNodeId() {
     return Math.random().toString(36).substr(2, 9);
@@ -1980,6 +2038,7 @@ function resolveTraitControllerType(type) {
         case TraitInputType.Media: return 'media';
         case TraitInputType.FontFamily: return 'select';
         case TraitInputType.GridTemplate: return 'gridTemplate';
+        case TraitInputType.Textarea: return 'textarea';
         default: return 'text';
     }
 }
@@ -3121,6 +3180,14 @@ class OverlayComponent {
             this.toolbarAction.emit({ action: ToolbarAction.PasteInteractionPreset, entry: this.selectEntry });
         this.closeMoreMenu();
     }
+    get isSliderContainer() {
+        return this.selectEntry?.node?.type === 'SliderContainer';
+    }
+    onAddSlide(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.AddSlide, entry: this.selectEntry });
+    }
     onDetachSymbol(event) {
         event.stopPropagation();
         if (this.selectEntry)
@@ -3240,11 +3307,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: "21.2.11", ngImport: i0, type: OverlayComponent, deps: [{ token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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)\"\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\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\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        <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: [":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%);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--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}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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)\"\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\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\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=\"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=\"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        <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: [":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%);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--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}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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)\"\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\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\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        <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: [":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%);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--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}.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)\"\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\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\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=\"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=\"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        <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: [":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%);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--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}.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: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });
@@ -4363,7 +4430,7 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i13.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i14.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\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: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i13.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i14.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
@@ -5289,6 +5356,538 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
+class SliderContainerComponent {
+    constructor(dragEngine, cdr, isPreview) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.isPreview = isPreview;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        // Swiper core config
+        this.direction = 'horizontal';
+        this.loop = false;
+        this.slidesPerView = 1;
+        this.spaceBetween = 0;
+        this.speed = 300;
+        this.effect = 'slide';
+        this.grabCursor = true;
+        this.centeredSlides = false;
+        this.initialSlide = 0;
+        // Module flags
+        this.enableNavigation = false;
+        this.enablePagination = false;
+        this.enableScrollbar = false;
+        this.enableAutoplay = false;
+        this.enableKeyboard = false;
+        this.enableMousewheel = false;
+        this.enableZoom = false;
+        this.enableGrid = false;
+        this.enableParallax = false;
+        // Autoplay sub-options
+        this.autoplayDelay = 3000;
+        this.autoplayPauseOnMouseEnter = true;
+        this.autoplayDisableOnInteraction = false;
+        // Pagination sub-options
+        this.paginationType = 'bullets';
+        this.paginationClickable = true;
+        // Grid sub-options
+        this.gridRows = 1;
+        // Responsive breakpoints (JSON string)
+        this.breakpoints = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+        this._swiper = null;
+        this._initRafId = 0;
+        this.instanceRegistry = inject(ComponentInstanceRegistryService);
+        this.interactionEngine = inject(InteractionEngineService);
+        this.isPreview = !!isPreview;
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        if (!this.isPreview || !this._swiper)
+            return;
+        // Re-init Swiper when config inputs change in preview mode
+        const swiperKeys = new Set([
+            'direction', 'loop', 'slidesPerView', 'spaceBetween', 'speed',
+            'effect', 'grabCursor', 'centeredSlides', 'initialSlide', 'breakpoints',
+            'enableNavigation', 'enablePagination', 'enableScrollbar', 'enableAutoplay',
+            'enableKeyboard', 'enableMousewheel', 'enableZoom', 'enableGrid', 'enableParallax',
+            'autoplayDelay', 'autoplayPauseOnMouseEnter', 'autoplayDisableOnInteraction',
+            'paginationType', 'paginationClickable', 'gridRows',
+        ]);
+        const hasConfigChange = Object.keys(changes).some(k => swiperKeys.has(k));
+        if (hasConfigChange) {
+            this._destroySwiper();
+            this.cdr.detectChanges();
+            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        }
+    }
+    ngAfterViewInit() {
+        if (this.isPreview) {
+            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        }
+    }
+    ngOnDestroy() {
+        cancelAnimationFrame(this._initRafId);
+        this._destroySwiper();
+    }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    async _initSwiper() {
+        if (!this.swiperEl?.nativeElement)
+            return;
+        const [{ default: Swiper }, swiperModules] = await Promise.all([
+            import('swiper'),
+            import('swiper/modules'),
+        ]);
+        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
+        const modules = [];
+        if (this.enableNavigation)
+            modules.push(Navigation);
+        if (this.enablePagination)
+            modules.push(Pagination);
+        if (this.enableScrollbar)
+            modules.push(Scrollbar);
+        if (this.enableAutoplay)
+            modules.push(Autoplay);
+        if (this.enableKeyboard)
+            modules.push(Keyboard);
+        if (this.enableMousewheel)
+            modules.push(Mousewheel);
+        if (this.enableZoom)
+            modules.push(Zoom);
+        if (this.enableGrid)
+            modules.push(Grid);
+        if (this.enableParallax)
+            modules.push(Parallax);
+        const effectMap = {
+            fade: EffectFade, cube: EffectCube, flip: EffectFlip,
+            coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
+        };
+        if (this.effect !== 'slide' && effectMap[this.effect]) {
+            modules.push(effectMap[this.effect]);
+        }
+        const config = {
+            modules,
+            direction: this.direction,
+            loop: this.loop,
+            slidesPerView: this.slidesPerView,
+            spaceBetween: this.spaceBetween,
+            speed: this.speed,
+            effect: this.effect,
+            grabCursor: this.grabCursor,
+            centeredSlides: this.centeredSlides,
+            initialSlide: this.initialSlide,
+        };
+        if (this.enableNavigation) {
+            config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
+        }
+        if (this.enablePagination) {
+            config['pagination'] = { el: '.swiper-pagination', type: this.paginationType, clickable: this.paginationClickable };
+        }
+        if (this.enableScrollbar) {
+            config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
+        }
+        if (this.enableAutoplay) {
+            config['autoplay'] = {
+                delay: this.autoplayDelay,
+                pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
+                disableOnInteraction: this.autoplayDisableOnInteraction,
+            };
+        }
+        if (this.enableGrid && this.gridRows > 1) {
+            config['grid'] = { rows: this.gridRows };
+        }
+        if (this.breakpoints) {
+            try {
+                config['breakpoints'] = JSON.parse(this.breakpoints);
+            }
+            catch { /* ignore invalid JSON */ }
+        }
+        config['on'] = {
+            slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
+            reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
+            reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
+            autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
+            autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
+        };
+        this._swiper = new Swiper(this.swiperEl.nativeElement, config);
+        this.instanceRegistry.register(this.nodeId, this._swiper);
+    }
+    _destroySwiper() {
+        if (this._swiper) {
+            this._swiper.destroy(true, true);
+            this._swiper = null;
+            this.instanceRegistry.unregister(this.nodeId);
+        }
+    }
+    _onSwiperEvent(eventName, swiper) {
+        this.interactionEngine.replayTrigger(this.nodeId, eventName);
+        if (eventName === 'swiperSlideChange') {
+            const prevIdx = swiper.previousIndex;
+            const activeIdx = swiper.activeIndex;
+            if (prevIdx !== undefined && this.children[prevIdx]) {
+                this.interactionEngine.replayTrigger(this.children[prevIdx].id, 'swiperSlideInactive');
+            }
+            if (this.children[activeIdx]) {
+                this.interactionEngine.replayTrigger(this.children[activeIdx].id, 'swiperSlideActive');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderContainerComponent, isStandalone: false, selector: "app-slider-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", gridRows: "gridRows", breakpoints: "breakpoints" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <!-- EDIT MODE: flat scrollable strip with drag-drop -->
+        <div *ngIf="!isPreview"
+             class="slider-edit-root"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div class="slider-edit-track">
+                <div *ngFor="let child of children"
+                     class="slider-edit-slide"
+                     [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                     ioxDraggable
+                     [ioxDragData]="child"
+                     [ioxDragSourceId]="dropListId">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </div>
+
+                <div *ngIf="!children.length" class="slider-edit-placeholder">
+                    <i class="ph-thin ph-sliders-horizontal"></i>
+                    <span>Click + in toolbar to add a slide</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- PREVIEW MODE: real Swiper DOM structure -->
+        <div *ngIf="isPreview"
+             #swiperEl
+             class="swiper"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style">
+            <div class="swiper-wrapper">
+                <ng-container *ngFor="let child of children">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </ng-container>
+            </div>
+            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
+        </div>
+    `, isInline: true, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.swiper{width:100%;height:100%;box-sizing:border-box}\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-slider-container', template: `
+        <!-- EDIT MODE: flat scrollable strip with drag-drop -->
+        <div *ngIf="!isPreview"
+             class="slider-edit-root"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div class="slider-edit-track">
+                <div *ngFor="let child of children"
+                     class="slider-edit-slide"
+                     [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                     ioxDraggable
+                     [ioxDragData]="child"
+                     [ioxDragSourceId]="dropListId">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </div>
+
+                <div *ngIf="!children.length" class="slider-edit-placeholder">
+                    <i class="ph-thin ph-sliders-horizontal"></i>
+                    <span>Click + in toolbar to add a slide</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- PREVIEW MODE: real Swiper DOM structure -->
+        <div *ngIf="isPreview"
+             #swiperEl
+             class="swiper"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style">
+            <div class="swiper-wrapper">
+                <ng-container *ngFor="let child of children">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </ng-container>
+            </div>
+            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
+        </div>
+    `, standalone: false, styles: [".slider-edit-root{position:relative;box-sizing:border-box;overflow:hidden}.slider-edit-track{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px;scrollbar-width:thin;min-height:100px}.slider-edit-slide{flex:0 0 auto;min-width:120px;position:relative}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], loop: [{
+                type: Input
+            }], slidesPerView: [{
+                type: Input
+            }], spaceBetween: [{
+                type: Input
+            }], speed: [{
+                type: Input
+            }], effect: [{
+                type: Input
+            }], grabCursor: [{
+                type: Input
+            }], centeredSlides: [{
+                type: Input
+            }], initialSlide: [{
+                type: Input
+            }], enableNavigation: [{
+                type: Input
+            }], enablePagination: [{
+                type: Input
+            }], enableScrollbar: [{
+                type: Input
+            }], enableAutoplay: [{
+                type: Input
+            }], enableKeyboard: [{
+                type: Input
+            }], enableMousewheel: [{
+                type: Input
+            }], enableZoom: [{
+                type: Input
+            }], enableGrid: [{
+                type: Input
+            }], enableParallax: [{
+                type: Input
+            }], autoplayDelay: [{
+                type: Input
+            }], autoplayPauseOnMouseEnter: [{
+                type: Input
+            }], autoplayDisableOnInteraction: [{
+                type: Input
+            }], paginationType: [{
+                type: Input
+            }], paginationClickable: [{
+                type: Input
+            }], gridRows: [{
+                type: Input
+            }], breakpoints: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }], swiperEl: [{
+                type: ViewChild,
+                args: ['swiperEl', { static: false }]
+            }] } });
+
+class SliderSlideComponent {
+    constructor(dragEngine, cdr, isPreview) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.isPreview = isPreview;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+        this.isPreview = !!isPreview;
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <!-- PREVIEW: native Swiper slide wrapper -->
+        <div *ngIf="isPreview"
+             class="swiper-slide"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="slide-placeholder">
+                <i class="ph-thin ph-image"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+
+        <!-- EDIT: plain block so it sits in the horizontal strip -->
+        <div *ngIf="!isPreview"
+             class="slide-edit-block"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="slide-placeholder">
+                <i class="ph-thin ph-image"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;min-height:200px}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SliderSlideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-slider-slide', template: `
+        <!-- PREVIEW: native Swiper slide wrapper -->
+        <div *ngIf="isPreview"
+             class="swiper-slide"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="slide-placeholder">
+                <i class="ph-thin ph-image"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+
+        <!-- EDIT: plain block so it sits in the horizontal strip -->
+        <div *ngIf="!isPreview"
+             class="slide-edit-block"
+             [ngClass]="['iox-node-' + nodeId]"
+             [ngStyle]="style"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="slide-placeholder">
+                <i class="ph-thin ph-image"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, standalone: false, styles: [".swiper-slide,.slide-edit-block{position:relative;box-sizing:border-box;min-height:200px}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }] } });
+
 class PanelChildComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: PanelChildComponent, isStandalone: false, selector: "panel-child", inputs: { name: "name" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #tpl><ng-content></ng-content></ng-template>', isInline: true }); }
@@ -5340,11 +5939,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class InteractionsPanelComponent {
-    constructor(overlayService) {
+    constructor(overlayService, componentRegistry) {
         this.overlayService = overlayService;
+        this.componentRegistry = componentRegistry;
         this.node = null;
-        this.triggerOptions = TRIGGER_OPTIONS;
-        this.actionTypeOptions = ACTION_TYPE_OPTIONS;
+        /** Base + component-specific trigger options for the selected node. */
+        this.triggerOptions = [...TRIGGER_OPTIONS];
+        /** Base + component-specific action type options. */
+        this.actionTypeOptions = [...ACTION_TYPE_OPTIONS];
         this.easingOptions = EASING_OPTIONS;
         this.interactions = [];
         /** All canvas nodes available as animation targets. */
@@ -5358,9 +5960,17 @@ class InteractionsPanelComponent {
         this.newDelay = 0;
         this.newEasing = 'ease-out';
         this.newOnce = true;
+        /** Slide index param for swiperGoToSlide action. */
+        this.newSlideIndex = 0;
         /** Expanded interaction ID for editing */
         this.expandedId = null;
     }
+    get isSwiperGoToSlide() {
+        return this.newActionType === 'swiperGoToSlide';
+    }
+    get isSwiperAction() {
+        return this.newActionType.startsWith('swiper');
+    }
     ngOnInit() {
         this.selectSub = this.overlayService.select$.subscribe(entry => {
             this.node = entry?.node ?? null;
@@ -5368,8 +5978,40 @@ class InteractionsPanelComponent {
             this.isAdding = false;
             this.expandedId = null;
             this.refreshNodeOptions();
+            this.refreshDynamicOptions();
         });
     }
+    /** Merge component-specific events into trigger options and methods into action options. */
+    refreshDynamicOptions() {
+        // Build trigger options: base + events from selected node's component type
+        const baseTriggers = [...TRIGGER_OPTIONS];
+        if (this.node?.type) {
+            const config = this.componentRegistry.createConfig(this.node.type);
+            if (config?.componentEvents?.length) {
+                for (const ev of config.componentEvents) {
+                    baseTriggers.push({ value: ev.value, label: ev.label, icon: ev.icon ?? 'ph-thin ph-lightning' });
+                }
+            }
+        }
+        this.triggerOptions = baseTriggers;
+        // Build action options: base + methods from any SliderContainer-type labeled nodes in the tree
+        const baseActions = [...ACTION_TYPE_OPTIONS];
+        const swiperMethodsAdded = new Set();
+        for (const [n] of this.overlayService.getAllNodeEntries()) {
+            if (!n.id || !n.label)
+                continue;
+            const config = this.componentRegistry.createConfig(n.type);
+            if (!config?.componentMethods?.length)
+                continue;
+            for (const method of config.componentMethods) {
+                if (!swiperMethodsAdded.has(method.value)) {
+                    baseActions.push({ value: method.value, label: method.label });
+                    swiperMethodsAdded.add(method.value);
+                }
+            }
+        }
+        this.actionTypeOptions = baseActions;
+    }
     refreshNodeOptions() {
         const opts = [{ label: 'Self', value: 'self' }];
         for (const [node] of this.overlayService.getAllNodeEntries()) {
@@ -5410,7 +6052,9 @@ class InteractionsPanelComponent {
         this.newDelay = 0;
         this.newEasing = 'ease-out';
         this.newOnce = true;
+        this.newSlideIndex = 0;
         this.refreshNodeOptions();
+        this.refreshDynamicOptions();
     }
     cancelAdd() {
         this.isAdding = false;
@@ -5418,6 +6062,9 @@ class InteractionsPanelComponent {
     confirmAdd() {
         if (!this.node)
             return;
+        const params = this.isSwiperGoToSlide
+            ? { index: this.newSlideIndex }
+            : undefined;
         const action = {
             type: this.newActionType,
             target: this.newTarget,
@@ -5425,6 +6072,7 @@ class InteractionsPanelComponent {
             delay: this.newDelay,
             easing: this.newEasing,
             once: this.newOnce,
+            ...(params ? { params } : {}),
         };
         const interaction = {
             id: generateNodeId(),
@@ -5500,13 +6148,13 @@ class InteractionsPanelComponent {
             interaction.reverseActions = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionsPanelComponent, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: InteractionsPanelComponent, isStandalone: false, selector: "app-interactions-panel", inputs: { node: "node" }, ngImport: i0, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\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: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionsPanelComponent, deps: [{ token: OverlayService }, { token: ComponentRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: InteractionsPanelComponent, isStandalone: false, selector: "app-interactions-panel", inputs: { node: "node" }, ngImport: i0, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div *ngIf=\"isSwiperGoToSlide\" class=\"ix-field\">\n                <label>Slide index (0-based)</label>\n                <input type=\"number\" [(ngModel)]=\"newSlideIndex\" min=\"0\" step=\"1\">\n            </div>\n            <div *ngIf=\"!isSwiperAction\" class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\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: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionsPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-interactions-panel', standalone: false, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"] }]
-        }], ctorParameters: () => [{ type: OverlayService }], propDecorators: { node: [{
+            args: [{ selector: 'app-interactions-panel', standalone: false, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div *ngIf=\"isSwiperGoToSlide\" class=\"ix-field\">\n                <label>Slide index (0-based)</label>\n                <input type=\"number\" [(ngModel)]=\"newSlideIndex\" min=\"0\" step=\"1\">\n            </div>\n            <div *ngIf=\"!isSwiperAction\" class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"] }]
+        }], ctorParameters: () => [{ type: OverlayService }, { type: ComponentRegistryService }], propDecorators: { node: [{
                 type: Input
             }] } });
 
@@ -5571,6 +6219,8 @@ const DECLARATIONS = [
     BuilderLinkedContainerComponent,
     BuilderRepeaterComponent,
     BuilderButtonBlockComponent,
+    SliderContainerComponent,
+    SliderSlideComponent,
     PanelComponent,
     PanelChildComponent,
     LayerTreeComponent,
@@ -5589,6 +6239,8 @@ class IoxBuilderModule {
             BuilderLinkedContainerComponent,
             BuilderRepeaterComponent,
             BuilderButtonBlockComponent,
+            SliderContainerComponent,
+            SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
@@ -5627,6 +6279,8 @@ class IoxBuilderModule {
             BuilderLinkedContainerComponent,
             BuilderRepeaterComponent,
             BuilderButtonBlockComponent,
+            SliderContainerComponent,
+            SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
@@ -5726,6 +6380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         BuilderLinkedContainerComponent,
                         BuilderRepeaterComponent,
                         BuilderButtonBlockComponent,
+                        SliderContainerComponent,
+                        SliderSlideComponent,
                         PanelComponent,
                         PanelChildComponent,
                         LayerTreeComponent,
@@ -6073,6 +6729,117 @@ class SectionComponentConfig extends ComponentConfig {
     }
 }
 
+class SliderContainerConfig extends ComponentConfig {
+    constructor() {
+        super('SliderContainer', 'app-slider-container', 'ph-thin ph-slideshow', 'Media');
+        this.children = [];
+        this.componentEvents = [
+            { value: 'swiperSlideChange', label: 'Slide Changes', icon: 'ph-thin ph-arrows-left-right' },
+            { value: 'swiperReachBeginning', label: 'Reaches First Slide', icon: 'ph-thin ph-skip-back' },
+            { value: 'swiperReachEnd', label: 'Reaches Last Slide', icon: 'ph-thin ph-skip-forward' },
+            { value: 'swiperAutoplayStart', label: 'Autoplay Starts', icon: 'ph-thin ph-play' },
+            { value: 'swiperAutoplayStop', label: 'Autoplay Stops', icon: 'ph-thin ph-stop' },
+        ];
+        this.componentMethods = [
+            { value: 'swiperNext', label: 'Next Slide' },
+            { value: 'swiperPrev', label: 'Previous Slide' },
+            { value: 'swiperGoToSlide', label: 'Go to Slide', params: [{ name: 'index', type: 'number', label: 'Slide Index (0-based)' }] },
+            { value: 'swiperAutoplayStart', label: 'Start Autoplay' },
+            { value: 'swiperAutoplayStop', label: 'Stop Autoplay' },
+            { value: 'swiperAutoplayPause', label: 'Pause Autoplay' },
+        ];
+        this.traits = [
+            // ── Core ──────────────────────────────────────────
+            new TraitConfig('direction', 'Direction', TraitInputType.Select, [{ label: 'Horizontal', value: 'horizontal' }, { label: 'Vertical', value: 'vertical' }], 'horizontal'),
+            new TraitConfig('effect', 'Effect', TraitInputType.Select, [
+                { label: 'Slide', value: 'slide' },
+                { label: 'Fade', value: 'fade' },
+                { label: 'Cube', value: 'cube' },
+                { label: 'Coverflow', value: 'coverflow' },
+                { label: 'Flip', value: 'flip' },
+                { label: 'Cards', value: 'cards' },
+                { label: 'Creative', value: 'creative' },
+            ], 'slide'),
+            new TraitConfig('slidesPerView', 'Slides per view', TraitInputType.Number, undefined, 1),
+            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Number, undefined, 0),
+            new TraitConfig('speed', 'Transition speed (ms)', TraitInputType.Number, undefined, 300),
+            new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Number, undefined, 0),
+            new TraitConfig('loop', 'Loop', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),
+            // ── Section label ─────────────────────────────────
+            new TraitConfig('__modulesLabel', 'Modules', TraitInputType.SectionLabel),
+            // ── Modules ──────────────────────────────────────
+            new TraitConfig('enableNavigation', 'Navigation arrows', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enablePagination', 'Pagination', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableScrollbar', 'Scrollbar', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableAutoplay', 'Autoplay', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableKeyboard', 'Keyboard control', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableMousewheel', 'Mousewheel control', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableZoom', 'Zoom', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableGrid', 'Grid (multi-row)', TraitInputType.Checkbox, undefined, false),
+            new TraitConfig('enableParallax', 'Parallax', TraitInputType.Checkbox, undefined, false),
+            // ── Section label ─────────────────────────────────
+            new TraitConfig('__paginationLabel', 'Pagination options', TraitInputType.SectionLabel),
+            // ── Pagination sub-options ────────────────────────
+            new TraitConfig('paginationType', 'Type', TraitInputType.Select, [{ label: 'Bullets', value: 'bullets' }, { label: 'Fraction', value: 'fraction' }, { label: 'Progress bar', value: 'progressbar' }], 'bullets'),
+            new TraitConfig('paginationClickable', 'Clickable', TraitInputType.Checkbox, undefined, true),
+            // ── Section label ─────────────────────────────────
+            new TraitConfig('__autoplayLabel', 'Autoplay options', TraitInputType.SectionLabel),
+            // ── Autoplay sub-options ──────────────────────────
+            new TraitConfig('autoplayDelay', 'Delay (ms)', TraitInputType.Number, undefined, 3000),
+            new TraitConfig('autoplayPauseOnMouseEnter', 'Pause on hover', TraitInputType.Checkbox, undefined, true),
+            new TraitConfig('autoplayDisableOnInteraction', 'Disable on interact', TraitInputType.Checkbox, undefined, false),
+            // ── Section label ─────────────────────────────────
+            new TraitConfig('__gridLabel', 'Grid options', TraitInputType.SectionLabel),
+            // ── Grid sub-options ──────────────────────────────
+            new TraitConfig('gridRows', 'Rows', TraitInputType.Number, undefined, 1),
+            // ── Section label ─────────────────────────────────
+            new TraitConfig('__responsiveLabel', 'Responsive breakpoints', TraitInputType.SectionLabel),
+            // ── Responsive ────────────────────────────────────
+            new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: '400px',
+        });
+    }
+}
+
+class SliderSlideConfig extends ComponentConfig {
+    constructor() {
+        super('SliderSlide', 'app-slider-slide', 'ph-thin ph-rectangle', 'Media');
+        this.children = [];
+        // Hidden: SliderSlide is created only via the "Add Slide" toolbar button,
+        // not by dragging from the Components panel.
+        this.hidden = true;
+        this.componentEvents = [
+            { value: 'swiperSlideActive', label: 'This Slide Becomes Active', icon: 'ph-thin ph-eye' },
+            { value: 'swiperSlideInactive', label: 'This Slide Becomes Inactive', icon: 'ph-thin ph-eye-slash' },
+        ];
+        this.traits = [];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: '100%',
+        });
+    }
+}
+
 class BuilderSpacerComponentConfig extends ComponentConfig {
     constructor() {
         super('Spacer', 'app-builder-spacer', 'ph-thin ph-arrows-vertical', 'Layout');
@@ -6093,5 +6860,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map