@vectoriox/iox-builder 2.11.0 → 2.12.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } 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';
@@ -17,7 +17,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i16 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, ComponentInstanceRegistryService, buildTargetedStateSelector, compileDeclarations, safeSetInput, composeVirtualTraits, IS_PREVIEW, resolvePath, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import { DEFAULT_WIDTH_BY_TYPE, ContextStore, ComponentInstanceRegistryService, isContextAction, contextActionEffect, resolveContextValue, buildTargetedStateSelector, compileDeclarations, safeSetInput, composeVirtualTraits, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -2027,6 +2027,10 @@ class InteractionEngineService {
     constructor(overlayService) {
         this.overlayService = overlayService;
         this.attached = new Map();
+        /** Shared with the SSR engine — one store type, one set of semantics. */
+        this.contextStore = inject(ContextStore);
+        /** Resolved data for the canvas, so a row marker (source + index) resolves back to its item. */
+        this.contextData = {};
         /** Elements that have had pre-state applied (hidden by attach). */
         this.preStatedElements = new Set();
         /**
@@ -2372,6 +2376,12 @@ class InteractionEngineService {
         const leaveHandler = () => {
             // Reverse animations on leave for hover triggers
             for (const action of ix.actions) {
+                // Context actions have no "backwards" — the shared table decides what leave does
+                // (clear, unless the action sets noReverse). Same call the SSR engine makes.
+                if (isContextAction(action)) {
+                    this.applyContextAction(action, element, 'reverse');
+                    continue;
+                }
                 const target = this.resolveTarget(node, action, element);
                 if (!target)
                     continue;
@@ -2392,6 +2402,13 @@ class InteractionEngineService {
                 this.executeSwiperAction(action);
                 continue;
             }
+            // Context actions write STATE, not animation. `selfEl` is deliberate: $item is read by
+            // walking up from the element actually hovered/clicked, which for a repeater PREVIEW ROW
+            // is the clone — so each row publishes its own item, exactly as on the live site.
+            if (isContextAction(action)) {
+                this.applyContextAction(action, selfEl ?? null, 'forward');
+                continue;
+            }
             // selfEl lets 'self'-targeted actions resolve for preview CLONES, which aren't
             // overlay-registered (getNodeRef would return undefined) — see attachTo. (issue #2)
             const target = this.resolveTarget(node, action, selfEl);
@@ -2400,6 +2417,40 @@ class InteractionEngineService {
             this.executeAction(target, action);
         }
     }
+    /**
+     * Execute a context action against the shared store. The forward/reverse semantics come from
+     * `contextActionEffect` in @vectoriox/iox-ui — the same function the SSR engine calls, so the
+     * builder canvas and the live site behave identically.
+     */
+    applyContextAction(action, el, pass) {
+        const effect = contextActionEffect(action, pass);
+        if (!effect)
+            return;
+        if (effect.op === 'clear') {
+            this.contextStore.clear(effect.slot);
+            return;
+        }
+        const value = resolveContextValue(effect.value, {
+            item: this.rowItemFor(el),
+            resolvedData: this.contextData,
+        });
+        this.contextStore.set(effect.slot, value);
+    }
+    /** The repeater item this element belongs to — the nearest marked row ancestor. */
+    rowItemFor(el) {
+        const row = el?.closest?.('[data-iox-row-idx]');
+        if (!row)
+            return undefined;
+        const source = row.getAttribute('data-iox-row-src') ?? '';
+        const index = Number(row.getAttribute('data-iox-row-idx'));
+        const items = this.contextData?.[source];
+        return Array.isArray(items) && Number.isInteger(index) ? items[index] : undefined;
+    }
+    /** Resolved data for the canvas, kept current by the repeater as it fetches. */
+    setContextData(data) {
+        // MERGE, not replace — a page can hold several repeaters, each publishing its own source.
+        this.contextData = { ...this.contextData, ...(data ?? {}) };
+    }
     executeSwiperAction(action) {
         // Target is the nodeId of the SliderContainer to control.
         const swiper = this.instanceRegistry.get(action.target);
@@ -4659,6 +4710,23 @@ class BuilderComponent {
         this.appRef = appRef;
         this.moveableCanvas = moveableCanvas;
         this.selectoCanvas = selectoCanvas;
+        this.contextStore = inject(ContextStore);
+        /**
+         * Re-apply context-bound inputs on the CANVAS when a slot changes — the builder twin of the
+         * engine's effect. The canvas is a live runtime, so hovering a repeater row while editing must
+         * swap the bound element just as it does on the published site.
+         *
+         * Only nodes that read a slot are touched; nothing else re-renders (trap T2).
+         */
+        this.contextEffect = effect(() => {
+            const slotValues = this.contextStore.values();
+            if (!Object.keys(slotValues).length)
+                return;
+            const slotKeys = collectContextSlotKeys(this.layout);
+            if (!slotKeys.size)
+                return;
+            this.applyContextBindings(this.layout, withContextSlots({}, slotValues), slotKeys);
+        }, ...(ngDevMode ? [{ debugName: "contextEffect" }] : /* istanbul ignore next */ []));
         this.layout = [];
         this.dataSources = [];
         this.orgId = 'default';
@@ -4853,6 +4921,33 @@ class BuilderComponent {
         }
         setTimeout(() => this.appRef.tick());
     }
+    /**
+     * Walk the tree and push freshly-resolved values into the live component instances of every node
+     * that reads a context slot. Uses the overlay's node→ComponentRef registry, and the shared
+     * `safeSetInput` so an undeclared input can never trigger NG0303.
+     */
+    applyContextBindings(nodes, data, slotKeys) {
+        for (const node of nodes ?? []) {
+            if (nodeUsesContext(node, slotKeys)) {
+                const ref = this.overlayService.getNodeRef(node)?.componentRef;
+                if (ref) {
+                    for (const binding of node.bindings ?? []) {
+                        if (!slotKeys.has(binding.source))
+                            continue;
+                        const sourceData = data[binding.source];
+                        if (sourceData == null)
+                            continue;
+                        const raw = binding.path ? resolvePath(sourceData, binding.path) : sourceData;
+                        const value = applyBindingPipes(raw, binding.pipes);
+                        if (value !== undefined && value !== null)
+                            safeSetInput(ref, binding.prop, value);
+                    }
+                }
+            }
+            if (node.children?.length)
+                this.applyContextBindings(node.children, data, slotKeys);
+        }
+    }
     ngOnDestroy() {
         this.sub?.unsubscribe();
         this.registrySub?.unsubscribe();
@@ -6192,13 +6287,14 @@ class BuilderRepeaterComponent {
             this.fetchData();
         }
     }
-    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr) {
+    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine) {
         this.dragEngine = dragEngine;
         this.overlayService = overlayService;
         this.dataSourceService = dataSourceService;
         this.dsRegistry = dsRegistry;
         this.panelEventService = panelEventService;
         this.cdr = cdr;
+        this.interactionEngine = interactionEngine;
         this._children = [];
         this.style = {};
         this.nodeId = '';
@@ -6252,6 +6348,9 @@ class BuilderRepeaterComponent {
             if (seq !== this._fetchSeq)
                 return; // a newer fetch superseded this one — ignore stale items
             this.items = items.slice(0, this._limit);
+            // Row markers store a REFERENCE (source + index); the engine needs the array to resolve
+            // it back to an item, exactly as the SSR runtime uses resolvedData.
+            this.interactionEngine.setContextData({ [this._source]: this.items });
             this.refreshPreviews();
             this.isLoading = false;
             this.cdr.markForCheck();
@@ -6306,7 +6405,7 @@ class BuilderRepeaterComponent {
         if (this.items.length)
             setTimeout(() => this.refreshPreviews());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", sourcePath: "sourcePath", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #badgeContent>
             <i class="ph-thin ph-repeat"></i>
@@ -6356,6 +6455,8 @@ class BuilderRepeaterComponent {
                      as siblings of the preview items below. -->
                 <div *ngFor="let child of children"
                      [ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
+                     [attr.data-iox-row-src]="source || null"
+                     [attr.data-iox-row-idx]="source ? 0 : null"
                      ioxDraggable
                      [ioxDragData]="child"
                      [ioxDragSourceId]="dropListId">
@@ -6368,9 +6469,11 @@ class BuilderRepeaterComponent {
                 </div>
 
                 <!-- Preview items — also DIRECT children of repeater-root. -->
-                <ng-container *ngFor="let row of previewRows">
+                <ng-container *ngFor="let row of previewRows; let ri = index">
                     <div *ngFor="let child of row"
-                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
+                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+                         [attr.data-iox-row-src]="source || null"
+                         [attr.data-iox-row-idx]="ri + 1">
                         <ng-container
                             [ioxRender]="child"
                             (onClick)="$event"
@@ -6434,6 +6537,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                      as siblings of the preview items below. -->
                 <div *ngFor="let child of children"
                      [ngClass]="['repeater-item-template', 'iox-outer-' + (child.styleId ?? child.id)]"
+                     [attr.data-iox-row-src]="source || null"
+                     [attr.data-iox-row-idx]="source ? 0 : null"
                      ioxDraggable
                      [ioxDragData]="child"
                      [ioxDragSourceId]="dropListId">
@@ -6446,9 +6551,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </div>
 
                 <!-- Preview items — also DIRECT children of repeater-root. -->
-                <ng-container *ngFor="let row of previewRows">
+                <ng-container *ngFor="let row of previewRows; let ri = index">
                     <div *ngFor="let child of row"
-                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]">
+                         [ngClass]="['repeater-preview-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+                         [attr.data-iox-row-src]="source || null"
+                         [attr.data-iox-row-idx]="ri + 1">
                         <ng-container
                             [ioxRender]="child"
                             (onClick)="$event"
@@ -6460,7 +6567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             </div>
         </div>
     `, standalone: false, styles: [".repeater-wrapper{position:relative;box-sizing:border-box}.repeater-badge{display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px dashed rgba(203,144,144,.4);border-bottom:none;border-radius:4px 4px 0 0;-webkit-user-select:none;user-select:none}.repeater-wrapper.has-children>.repeater-badge{position:absolute;top:0;left:0;z-index:10;border-radius:0 0 4px;border:1px solid rgba(203,144,144,.5);opacity:0;cursor:pointer;transition:opacity .15s}.repeater-wrapper.has-children:hover>.repeater-badge{opacity:1}.repeater-badge i{font-size:13px}.repeater-badge-empty{opacity:.55}.repeater-badge-count{margin-left:auto;font-weight:600}.repeater-badge-loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.repeater-root{box-sizing:border-box}.repeater-wrapper:not(.has-children) .repeater-root{border:1px dashed rgba(203,144,144,.4);border-top:none;border-radius:0 0 4px 4px;min-height:40px}.repeater-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.repeater-placeholder i{font-size:20px}.repeater-item-template{min-width:0}.repeater-preview-child{opacity:.55;pointer-events:none;min-width:0}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: OverlayService }, { type: BuilderDataSourceService }, { type: DataSourceRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: OverlayService }, { type: BuilderDataSourceService }, { type: DataSourceRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: InteractionEngineService }], propDecorators: { children: [{
                 type: Input
             }], style: [{
                 type: Input
@@ -7570,6 +7677,12 @@ class InteractionsPanelComponent {
         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';
@@ -7598,6 +7711,7 @@ class InteractionsPanelComponent {
             this.expandedId = null;
             this.refreshNodeOptions();
             this.refreshDynamicOptions();
+            this.refreshKnownSlots();
         });
     }
     /** Merge component-specific events into trigger options and methods into action options. */
@@ -7733,6 +7847,72 @@ class InteractionsPanelComponent {
             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;
@@ -7768,11 +7948,11 @@ class InteractionsPanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionsPanelComponent, deps: [{ token: OverlayService }, { token: ComponentRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: InteractionsPanelComponent, isStandalone: false, selector: "app-interactions-panel", inputs: { node: "node" }, ngImport: i0, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div *ngIf=\"isSwiperGoToSlide\" class=\"ix-field\">\n                <label>Slide index (0-based)</label>\n                <input type=\"number\" [(ngModel)]=\"newSlideIndex\" min=\"0\" step=\"1\">\n            </div>\n            <div *ngIf=\"!isSwiperAction\" class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵ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                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div *ngIf=\"isSwiperGoToSlide\" class=\"ix-field\">\n                <label>Slide index (0-based)</label>\n                <input type=\"number\" [(ngModel)]=\"newSlideIndex\" min=\"0\" step=\"1\">\n            </div>\n            <div *ngIf=\"!isSwiperAction\" class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"] }]
+            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
             }] } });