@vectoriox/iox-builder 2.12.0 → 3.0.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, effect, Optional, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/forms';
+import * as i14 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -12,7 +12,6 @@ import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
@@ -5615,7 +5614,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 }, { token: MoveableCanvasService }, { token: SelectoCanvasService }], 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", moveableMode: "moveableMode" }, 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 = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"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\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></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 === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\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                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\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:260px;min-width:260px;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}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\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.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: i15.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: i16.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { 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", moveableMode: "moveableMode" }, 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 = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"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\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></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 === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\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                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\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:260px;min-width:260px;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}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\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: i14.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: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.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: i16.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { 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,
@@ -7664,299 +7663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [PanelChildComponent]
             }] } });
 
-class InteractionsPanelComponent {
-    constructor(overlayService, componentRegistry) {
-        this.overlayService = overlayService;
-        this.componentRegistry = componentRegistry;
-        this.node = null;
-        /** 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$1;
-        this.interactions = [];
-        /** All canvas nodes available as animation targets. */
-        this.nodeOptions = [];
-        /** Slot names already used anywhere on the canvas — offered as suggestions, not a closed list.
-         *  A slot needs no declaration to work: naming it in a setContext action creates it. */
-        this.knownSlots = [];
-        /** Data-source aliases, for the "Pick a value…" mode. */
-        this.sourceOptions = [];
-        this.dsRegistry = inject(DataSourceRegistryService);
-        /** State for the "add interaction" form */
-        this.isAdding = false;
-        this.newTrigger = 'pageLoad';
-        this.newActionType = 'fadeIn';
-        this.newTarget = 'self';
-        this.newDuration = 600;
-        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;
-            this.interactions = this.node?.interactions ?? [];
-            this.isAdding = false;
-            this.expandedId = null;
-            this.refreshNodeOptions();
-            this.refreshDynamicOptions();
-            this.refreshKnownSlots();
-        });
-    }
-    /** 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()) {
-            if (!node.id || !node.label || node === this.node)
-                continue;
-            opts.push({ label: node.label, value: node.id });
-        }
-        this.nodeOptions = opts;
-    }
-    getTargetLabel(value) {
-        return this.nodeOptions.find(o => o.value === value)?.label ?? value;
-    }
-    ngOnDestroy() {
-        this.selectSub?.unsubscribe();
-    }
-    getTriggerLabel(trigger) {
-        return this.triggerOptions.find(t => t.value === trigger)?.label ?? trigger;
-    }
-    getTriggerIcon(trigger) {
-        return this.triggerOptions.find(t => t.value === trigger)?.icon ?? 'ph-thin ph-lightning';
-    }
-    getActionLabel(type) {
-        return this.actionTypeOptions.find(a => a.value === type)?.label ?? type;
-    }
-    getActionsSummary(interaction) {
-        return interaction.actions.map(a => this.getActionLabel(a.type)).join(', ');
-    }
-    toggleExpand(id) {
-        this.expandedId = this.expandedId === id ? null : id;
-    }
-    // ── Add interaction ──────────────────────────────────────
-    startAdd() {
-        this.isAdding = true;
-        this.newTrigger = 'pageLoad';
-        this.newActionType = 'fadeIn';
-        this.newTarget = 'self';
-        this.newDuration = 600;
-        this.newDelay = 0;
-        this.newEasing = 'ease-out';
-        this.newOnce = true;
-        this.newSlideIndex = 0;
-        this.refreshNodeOptions();
-        this.refreshDynamicOptions();
-    }
-    cancelAdd() {
-        this.isAdding = false;
-    }
-    confirmAdd() {
-        if (!this.node)
-            return;
-        const params = this.isSwiperGoToSlide
-            ? { index: this.newSlideIndex }
-            : undefined;
-        const action = {
-            type: this.newActionType,
-            target: this.newTarget,
-            duration: this.newDuration,
-            delay: this.newDelay,
-            easing: this.newEasing,
-            once: this.newOnce,
-            ...(params ? { params } : {}),
-        };
-        const interaction = {
-            id: generateNodeId(),
-            trigger: this.newTrigger,
-            actions: [action],
-        };
-        if (!this.node.interactions) {
-            this.node.interactions = [];
-        }
-        this.node.interactions.push(interaction);
-        this.interactions = this.node.interactions;
-        this.isAdding = false;
-    }
-    // ── Remove interaction ───────────────────────────────────
-    removeInteraction(id) {
-        if (!this.node?.interactions)
-            return;
-        this.node.interactions = this.node.interactions.filter(i => i.id !== id);
-        this.interactions = this.node.interactions;
-        if (this.expandedId === id) {
-            this.expandedId = null;
-        }
-    }
-    // ── Add action to existing interaction ───────────────────
-    addAction(interaction) {
-        interaction.actions.push({
-            type: 'fadeIn',
-            target: 'self',
-            duration: 600,
-            delay: 0,
-            easing: 'ease-out',
-            once: true,
-        });
-    }
-    removeAction(interaction, index) {
-        interaction.actions.splice(index, 1);
-        // Remove the interaction if it has no actions left
-        if (interaction.actions.length === 0) {
-            this.removeInteraction(interaction.id);
-        }
-    }
-    // ── Context actions ──────────────────────────────────────
-    /** True for setContext/clearContext — they get a slot editor instead of a target + easing. */
-    isContextAction(action) {
-        return isContextAction(action);
-    }
-    ctxParams(action) {
-        action.params ??= {};
-        return action.params;
-    }
-    slotOf(action) {
-        return this.ctxParams(action).slot ?? '';
-    }
-    setSlot(action, slot) {
-        this.ctxParams(action).slot = (slot ?? '').trim();
-        this.refreshKnownSlots();
-    }
-    valueKindOf(action) {
-        return this.ctxParams(action).value?.kind ?? 'item';
-    }
-    setValueKind(action, kind) {
-        const params = this.ctxParams(action);
-        params.value = kind === 'source'
-            ? { kind: 'source', source: this.sourceOptions[0]?.value ?? '', path: '' }
-            : { kind: 'item' };
-    }
-    valueSourceOf(action) {
-        const value = this.ctxParams(action).value;
-        return value?.source ?? '';
-    }
-    setValueSource(action, source) {
-        const params = this.ctxParams(action);
-        params.value = { kind: 'source', source, path: this.valuePathOf(action) };
-    }
-    valuePathOf(action) {
-        const value = this.ctxParams(action).value;
-        return value?.path ?? '';
-    }
-    setValuePath(action, path) {
-        const params = this.ctxParams(action);
-        params.value = { kind: 'source', source: this.valueSourceOf(action), path };
-    }
-    /**
-     * "Keep after leave" — ON means the slot survives mouseleave (stored as `noReverse`).
-     * Defaults to ON: a repeater row that cleared itself on leave would blink on every row-to-row
-     * move. Turning it OFF is the list-container behaviour (leave clears).
-     */
-    keepAfterLeave(action) {
-        return this.ctxParams(action).noReverse !== false;
-    }
-    setKeepAfterLeave(action, keep) {
-        this.ctxParams(action).noReverse = keep;
-    }
-    refreshKnownSlots() {
-        const slots = new Set();
-        for (const [node] of this.overlayService.getAllNodeEntries()) {
-            for (const ix of node.interactions ?? []) {
-                for (const a of [...(ix.actions ?? []), ...(ix.reverseActions ?? [])]) {
-                    const slot = a.params?.slot;
-                    if (slot)
-                        slots.add(slot);
-                }
-            }
-        }
-        this.knownSlots = [...slots].sort();
-        this.sourceOptions = this.dsRegistry.getAliasOptions?.() ?? [];
-    }
-    // ── Toggle (reverse actions) ─────────────────────────────
-    hasToggle(interaction) {
-        return !!interaction.reverseActions?.length;
-    }
-    enableToggle(interaction) {
-        // Auto-populate reverse actions as the logical inverse of primary actions.
-        interaction.reverseActions = interaction.actions.map(a => ({
-            ...a,
-            type: (INVERSE_ACTION[a.type] ?? a.type),
-        }));
-    }
-    disableToggle(interaction) {
-        interaction.reverseActions = undefined;
-    }
-    addReverseAction(interaction) {
-        if (!interaction.reverseActions)
-            interaction.reverseActions = [];
-        interaction.reverseActions.push({
-            type: 'fadeOut',
-            target: 'self',
-            duration: 600,
-            delay: 0,
-            easing: 'ease-out',
-            once: false,
-        });
-    }
-    removeReverseAction(interaction, index) {
-        if (!interaction.reverseActions)
-            return;
-        interaction.reverseActions.splice(index, 1);
-        if (interaction.reverseActions.length === 0) {
-            interaction.reverseActions = undefined;
-        }
-    }
-    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                    <!-- Context actions: slot + what to write. Not an animation, so duration/easing\n                         below are irrelevant to them. -->\n                    <ng-container *ngIf=\"isContextAction(action)\">\n                        <div class=\"ix-field\">\n                            <label>Slot</label>\n                            <input type=\"text\"\n                                   [ngModel]=\"slotOf(action)\"\n                                   (ngModelChange)=\"setSlot(action, $event)\"\n                                   list=\"ix-slot-options\"\n                                   placeholder=\"currentItem\">\n                            <datalist id=\"ix-slot-options\">\n                                <option *ngFor=\"let s of knownSlots\" [value]=\"s\"></option>\n                            </datalist>\n                            <span class=\"ix-target-hint\">\n                                Elements bind to it as <strong>{{ slotOf(action) || 'slot' }}.field</strong>\n                            </span>\n                        </div>\n\n                        <ng-container *ngIf=\"action.type === 'setContext'\">\n                            <div class=\"ix-field\">\n                                <label>Value</label>\n                                <select [ngModel]=\"valueKindOf(action)\" (ngModelChange)=\"setValueKind(action, $event)\">\n                                    <option value=\"item\">This item \u2014 the row being hovered</option>\n                                    <option value=\"source\">Pick a value\u2026</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field-row\" *ngIf=\"valueKindOf(action) === 'source'\">\n                                <div class=\"ix-field\">\n                                    <label>Holds an item from</label>\n                                    <p-select\n                                        size=\"small\"\n                                        [ngModel]=\"valueSourceOf(action)\"\n                                        (ngModelChange)=\"setValueSource(action, $event)\"\n                                        [options]=\"sourceOptions\"\n                                        optionLabel=\"label\"\n                                        optionValue=\"value\"\n                                        appendTo=\"body\">\n                                    </p-select>\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Path</label>\n                                    <input type=\"text\"\n                                           [ngModel]=\"valuePathOf(action)\"\n                                           (ngModelChange)=\"setValuePath(action, $event)\"\n                                           placeholder=\"(whole item)\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field ix-field-inline\">\n                                <label>\n                                    <input type=\"checkbox\"\n                                           [ngModel]=\"keepAfterLeave(action)\"\n                                           (ngModelChange)=\"setKeepAfterLeave(action, $event)\">\n                                    Keep after leave\n                                </label>\n                                <span class=\"ix-target-hint\">\n                                    On for rows in a list \u2014 otherwise moving between rows blinks.\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"ix-field\" *ngIf=\"!isContextAction(action)\">\n                        <label>Target</label>\n                        <p-select\n                            size=\"small\"\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                            size=\"small\"\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                            size=\"small\"\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.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                    <!-- Context actions: slot + what to write. Not an animation, so duration/easing\n                         below are irrelevant to them. -->\n                    <ng-container *ngIf=\"isContextAction(action)\">\n                        <div class=\"ix-field\">\n                            <label>Slot</label>\n                            <input type=\"text\"\n                                   [ngModel]=\"slotOf(action)\"\n                                   (ngModelChange)=\"setSlot(action, $event)\"\n                                   list=\"ix-slot-options\"\n                                   placeholder=\"currentItem\">\n                            <datalist id=\"ix-slot-options\">\n                                <option *ngFor=\"let s of knownSlots\" [value]=\"s\"></option>\n                            </datalist>\n                            <span class=\"ix-target-hint\">\n                                Elements bind to it as <strong>{{ slotOf(action) || 'slot' }}.field</strong>\n                            </span>\n                        </div>\n\n                        <ng-container *ngIf=\"action.type === 'setContext'\">\n                            <div class=\"ix-field\">\n                                <label>Value</label>\n                                <select [ngModel]=\"valueKindOf(action)\" (ngModelChange)=\"setValueKind(action, $event)\">\n                                    <option value=\"item\">This item \u2014 the row being hovered</option>\n                                    <option value=\"source\">Pick a value\u2026</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field-row\" *ngIf=\"valueKindOf(action) === 'source'\">\n                                <div class=\"ix-field\">\n                                    <label>Holds an item from</label>\n                                    <p-select\n                                        size=\"small\"\n                                        [ngModel]=\"valueSourceOf(action)\"\n                                        (ngModelChange)=\"setValueSource(action, $event)\"\n                                        [options]=\"sourceOptions\"\n                                        optionLabel=\"label\"\n                                        optionValue=\"value\"\n                                        appendTo=\"body\">\n                                    </p-select>\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Path</label>\n                                    <input type=\"text\"\n                                           [ngModel]=\"valuePathOf(action)\"\n                                           (ngModelChange)=\"setValuePath(action, $event)\"\n                                           placeholder=\"(whole item)\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field ix-field-inline\">\n                                <label>\n                                    <input type=\"checkbox\"\n                                           [ngModel]=\"keepAfterLeave(action)\"\n                                           (ngModelChange)=\"setKeepAfterLeave(action, $event)\">\n                                    Keep after leave\n                                </label>\n                                <span class=\"ix-target-hint\">\n                                    On for rows in a list \u2014 otherwise moving between rows blinks.\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"ix-field\" *ngIf=\"!isContextAction(action)\">\n                        <label>Target</label>\n                        <p-select\n                            size=\"small\"\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                            size=\"small\"\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                            size=\"small\"\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
-            }] } });
-
 const MAX_HISTORY = 50;
 /**
  * BuilderHistoryService — snapshot-based undo/redo for the page builder.
@@ -8023,7 +7729,6 @@ const DECLARATIONS = [
     PanelComponent,
     PanelChildComponent,
     LayerTreeComponent,
-    InteractionsPanelComponent,
 ];
 class IoxBuilderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8042,8 +7747,7 @@ class IoxBuilderModule {
             SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
-            LayerTreeComponent,
-            InteractionsPanelComponent], imports: [CommonModule,
+            LayerTreeComponent], imports: [CommonModule,
             FormsModule,
             DragDropModule,
             AccordionModule,
@@ -8082,8 +7786,7 @@ class IoxBuilderModule {
             SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
-            LayerTreeComponent,
-            InteractionsPanelComponent] }); }
+            LayerTreeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, providers: [
             DragEngineService,
             OverlayService,
@@ -8186,7 +7889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         PanelComponent,
                         PanelChildComponent,
                         LayerTreeComponent,
-                        InteractionsPanelComponent,
                     ],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
@@ -8755,5 +8457,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions, wrapNode };
+export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map