@vectoriox/iox-builder 1.4.24 → 1.4.26

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1090,6 +1090,11 @@ class InteractionEngineService {
         this.attached = new Map();
         /** Elements that have had pre-state applied (hidden by attach). */
         this.preStatedElements = new Set();
+        /**
+         * Toggle state for click interactions with reverseActions.
+         * false = next click runs actions (primary); true = next click runs reverseActions.
+         */
+        this.toggleStates = new Map();
         /**
          * Pre-states queued for elements that weren't registered yet when the owner
          * node's attach() ran. Keyed by target node ID. Consumed when the target
@@ -1155,6 +1160,12 @@ class InteractionEngineService {
             entry.cleanup();
         }
         this.attached.delete(node);
+        // Reset toggle state so re-attach starts from the primary actions.
+        for (const entry of entries) {
+            if (entry.interaction.reverseActions?.length) {
+                this.toggleStates.delete(entry.interaction.id);
+            }
+        }
         // Cancel Web Animations and strip any inline pre-state styles that
         // were applied by applyPreState() so the element returns to its natural CSS state.
         const ref = this.overlayService.getNodeRef(node);
@@ -1255,10 +1266,16 @@ class InteractionEngineService {
         return () => observer.disconnect();
     }
     attachClick(node, ix, element) {
-        const handler = (e) => {
-            // Don't trigger during builder editing clicks — only in preview mode.
-            // For now, we always run it. In the future, check BuilderMode.
-            this.runActions(node, ix.actions);
+        const handler = () => {
+            if (ix.reverseActions?.length) {
+                // Toggle: alternate between primary and reverse actions on each click.
+                const isToggled = this.toggleStates.get(ix.id) ?? false;
+                this.runActions(node, isToggled ? ix.reverseActions : ix.actions);
+                this.toggleStates.set(ix.id, !isToggled);
+            }
+            else {
+                this.runActions(node, ix.actions);
+            }
         };
         element.addEventListener('click', handler);
         return () => element.removeEventListener('click', handler);
@@ -1540,6 +1557,22 @@ var StyleCategory;
     // Legacy — kept for backward compat; prefer Size
     StyleCategory["Dimensions"] = "Dimensions";
 })(StyleCategory || (StyleCategory = {}));
+/**
+ * Maps each action type to its logical inverse for auto-populating toggle
+ * reverse actions. Types without a natural inverse are omitted.
+ */
+const INVERSE_ACTION = {
+    fadeIn: 'fadeOut',
+    fadeOut: 'fadeIn',
+    show: 'hide',
+    hide: 'show',
+    scaleIn: 'scaleOut',
+    scaleOut: 'scaleIn',
+    moveUp: 'moveDown',
+    moveDown: 'moveUp',
+    moveLeft: 'moveRight',
+    moveRight: 'moveLeft',
+};
 const TRIGGER_OPTIONS = [
     { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
     { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
@@ -1974,6 +2007,7 @@ class StyleRegistryService {
         this.changes$ = new Subject();
         this.rules = new Map();
         this.styleEl = null;
+        this._flushPending = false;
     }
     /**
      * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
@@ -2117,15 +2151,21 @@ class StyleRegistryService {
         return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
     }
     flush() {
-        if (!this.styleEl)
+        if (!this.styleEl || this._flushPending)
             return;
-        // __tokens__ always first so variables are available to all subsequent rules
-        const tokenBlock = this.rules.get('__tokens__');
-        const rest = Array.from(this.rules.entries())
-            .filter(([k]) => k !== '__tokens__')
-            .map(([, v]) => v);
-        this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
-        this.changes$.next();
+        this._flushPending = true;
+        requestAnimationFrame(() => {
+            this._flushPending = false;
+            if (!this.styleEl)
+                return;
+            // __tokens__ always first so variables are available to all subsequent rules
+            const tokenBlock = this.rules.get('__tokens__');
+            const rest = Array.from(this.rules.entries())
+                .filter(([k]) => k !== '__tokens__')
+                .map(([, v]) => v);
+            this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
+            this.changes$.next();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
@@ -4729,12 +4769,46 @@ class InteractionsPanelComponent {
             this.removeInteraction(interaction.id);
         }
     }
+    // ── Toggle (reverse actions) ─────────────────────────────
+    hasToggle(interaction) {
+        return !!interaction.reverseActions?.length;
+    }
+    enableToggle(interaction) {
+        // Auto-populate reverse actions as the logical inverse of primary actions.
+        interaction.reverseActions = interaction.actions.map(a => ({
+            ...a,
+            type: (INVERSE_ACTION[a.type] ?? a.type),
+        }));
+    }
+    disableToggle(interaction) {
+        interaction.reverseActions = undefined;
+    }
+    addReverseAction(interaction) {
+        if (!interaction.reverseActions)
+            interaction.reverseActions = [];
+        interaction.reverseActions.push({
+            type: 'fadeOut',
+            target: 'self',
+            duration: 600,
+            delay: 0,
+            easing: 'ease-out',
+            once: false,
+        });
+    }
+    removeReverseAction(interaction, index) {
+        if (!interaction.reverseActions)
+            return;
+        interaction.reverseActions.splice(index, 1);
+        if (interaction.reverseActions.length === 0) {
+            interaction.reverseActions = undefined;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionsPanelComponent, deps: [{ token: OverlayService }], 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\">Action {{ ai + 1 }}</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 action\n                </button>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: InteractionsPanelComponent, isStandalone: false, selector: "app-interactions-panel", inputs: { node: "node" }, ngImport: i0, template: "<div class=\"interactions-panel\">\n    <!-- No element selected -->\n    <div *ngIf=\"!node\" class=\"section-empty\">\n        Select an element to manage interactions\n    </div>\n\n    <ng-container *ngIf=\"node\">\n        <!-- Interaction cards -->\n        <div *ngFor=\"let ix of interactions\" class=\"ix-card\" [class.is-expanded]=\"expandedId === ix.id\">\n            <!-- Summary row -->\n            <div class=\"ix-card-header\" (click)=\"toggleExpand(ix.id)\">\n                <i [class]=\"getTriggerIcon(ix.trigger)\" class=\"ix-trigger-icon\"></i>\n                <div class=\"ix-card-summary\">\n                    <span class=\"ix-trigger-label\">{{ getTriggerLabel(ix.trigger) }}</span>\n                    <span class=\"ix-arrow\">\u2192</span>\n                    <span class=\"ix-action-label\">{{ getActionsSummary(ix) }}</span>\n                </div>\n                <button class=\"ix-remove-btn\" title=\"Remove\" (click)=\"removeInteraction(ix.id); $event.stopPropagation()\">\n                    <i class=\"ph-thin ph-x\"></i>\n                </button>\n            </div>\n\n            <!-- Expanded detail -->\n            <div *ngIf=\"expandedId === ix.id\" class=\"ix-card-body\">\n                <div class=\"ix-field\">\n                    <label>Trigger</label>\n                    <select [(ngModel)]=\"ix.trigger\">\n                        <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                    </select>\n                </div>\n\n                <div *ngFor=\"let action of ix.actions; let ai = index\" class=\"ix-action-row\">\n                    <div class=\"ix-action-header\">\n                        <span class=\"ix-action-index\">\n                            Target {{ ai + 1 }}\n                            <span *ngIf=\"ix.actions.length > 1\" class=\"ix-action-target-badge\">\n                                \u2192 {{ getTargetLabel(action.target) }}\n                            </span>\n                        </span>\n                        <button *ngIf=\"ix.actions.length > 1\"\n                                class=\"ix-remove-btn small\"\n                                title=\"Remove action\"\n                                (click)=\"removeAction(ix, ai)\">\n                            <i class=\"ph-thin ph-x\"></i>\n                        </button>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Type</label>\n                        <select [(ngModel)]=\"action.type\">\n                            <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 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\">Action {{ ai + 1 }}</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 action\n                </button>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.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                    <div class=\"ix-field\">\n                        <label>Target</label>\n                        <p-select\n                            [(ngModel)]=\"action.target\"\n                            [options]=\"nodeOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                            [filter]=\"true\"\n                            filterPlaceholder=\"Search\u2026\"\n                            styleClass=\"ix-target-select\"\n                            appendTo=\"body\">\n                        </p-select>\n                        <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                            Name elements in the Layers panel to target them\n                        </span>\n                    </div>\n\n                    <div class=\"ix-field-row\">\n                        <div class=\"ix-field\">\n                            <label>Duration (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.duration\" min=\"0\" step=\"50\">\n                        </div>\n                        <div class=\"ix-field\">\n                            <label>Delay (ms)</label>\n                            <input type=\"number\" [(ngModel)]=\"action.delay\" min=\"0\" step=\"50\">\n                        </div>\n                    </div>\n\n                    <div class=\"ix-field\">\n                        <label>Easing</label>\n                        <select [(ngModel)]=\"action.easing\">\n                            <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"ix-field ix-checkbox-field\">\n                        <label>\n                            <input type=\"checkbox\" [(ngModel)]=\"action.once\">\n                            Play once\n                        </label>\n                    </div>\n                </div>\n\n                <button class=\"ix-add-action-btn\" (click)=\"addAction(ix)\">\n                    <i class=\"ph-thin ph-plus\"></i> Add target\n                </button>\n\n                <!-- Toggle section (click only) -->\n                <ng-container *ngIf=\"ix.trigger === 'click'\">\n                    <div class=\"ix-toggle-header\">\n                        <span class=\"ix-toggle-label\">\n                            <i class=\"ph-thin ph-arrows-clockwise\"></i> 2nd click\n                        </span>\n                        <label class=\"ix-toggle-switch\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"hasToggle(ix)\"\n                                   (change)=\"hasToggle(ix) ? disableToggle(ix) : enableToggle(ix)\">\n                            <span class=\"ix-toggle-track\"></span>\n                        </label>\n                    </div>\n\n                    <ng-container *ngIf=\"hasToggle(ix)\">\n                        <div *ngFor=\"let ra of ix.reverseActions; let ri = index\" class=\"ix-action-row ix-action-row--reverse\">\n                            <div class=\"ix-action-header\">\n                                <span class=\"ix-action-index\">\n                                    Target {{ ri + 1 }}\n                                    <span *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\" class=\"ix-action-target-badge\">\n                                        \u2192 {{ getTargetLabel(ra.target) }}\n                                    </span>\n                                </span>\n                                <button *ngIf=\"(ix.reverseActions?.length ?? 0) > 1\"\n                                        class=\"ix-remove-btn small\"\n                                        title=\"Remove\"\n                                        (click)=\"removeReverseAction(ix, ri)\">\n                                    <i class=\"ph-thin ph-x\"></i>\n                                </button>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Type</label>\n                                <select [(ngModel)]=\"ra.type\">\n                                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                                </select>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Target</label>\n                                <p-select\n                                    [(ngModel)]=\"ra.target\"\n                                    [options]=\"nodeOptions\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [filter]=\"true\"\n                                    filterPlaceholder=\"Search\u2026\"\n                                    styleClass=\"ix-target-select\"\n                                    appendTo=\"body\">\n                                </p-select>\n                            </div>\n\n                            <div class=\"ix-field-row\">\n                                <div class=\"ix-field\">\n                                    <label>Duration (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.duration\" min=\"0\" step=\"50\">\n                                </div>\n                                <div class=\"ix-field\">\n                                    <label>Delay (ms)</label>\n                                    <input type=\"number\" [(ngModel)]=\"ra.delay\" min=\"0\" step=\"50\">\n                                </div>\n                            </div>\n\n                            <div class=\"ix-field\">\n                                <label>Easing</label>\n                                <select [(ngModel)]=\"ra.easing\">\n                                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <button class=\"ix-add-action-btn\" (click)=\"addReverseAction(ix)\">\n                            <i class=\"ph-thin ph-plus\"></i> Add target\n                        </button>\n                    </ng-container>\n                </ng-container>\n            </div>\n        </div>\n\n        <!-- Add interaction form -->\n        <div *ngIf=\"isAdding\" class=\"ix-add-form\">\n            <div class=\"ix-field\">\n                <label>Trigger</label>\n                <select [(ngModel)]=\"newTrigger\">\n                    <option *ngFor=\"let t of triggerOptions\" [value]=\"t.value\">{{ t.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Action</label>\n                <select [(ngModel)]=\"newActionType\">\n                    <option *ngFor=\"let a of actionTypeOptions\" [value]=\"a.value\">{{ a.label }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field\">\n                <label>Target</label>\n                <p-select\n                    [(ngModel)]=\"newTarget\"\n                    [options]=\"nodeOptions\"\n                    optionLabel=\"label\"\n                    optionValue=\"value\"\n                    [filter]=\"true\"\n                    filterPlaceholder=\"Search\u2026\"\n                    styleClass=\"ix-target-select\"\n                    appendTo=\"body\">\n                </p-select>\n                <span *ngIf=\"nodeOptions.length === 1\" class=\"ix-target-hint\">\n                    Name elements in the Layers panel to target them\n                </span>\n            </div>\n            <div class=\"ix-field-row\">\n                <div class=\"ix-field\">\n                    <label>Duration (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDuration\" min=\"0\" step=\"50\">\n                </div>\n                <div class=\"ix-field\">\n                    <label>Delay (ms)</label>\n                    <input type=\"number\" [(ngModel)]=\"newDelay\" min=\"0\" step=\"50\">\n                </div>\n            </div>\n            <div class=\"ix-field\">\n                <label>Easing</label>\n                <select [(ngModel)]=\"newEasing\">\n                    <option *ngFor=\"let e of easingOptions\" [value]=\"e\">{{ e }}</option>\n                </select>\n            </div>\n            <div class=\"ix-field ix-checkbox-field\">\n                <label>\n                    <input type=\"checkbox\" [(ngModel)]=\"newOnce\">\n                    Play once\n                </label>\n            </div>\n            <div class=\"ix-form-actions\">\n                <button class=\"ix-btn ix-btn--secondary\" (click)=\"cancelAdd()\">Cancel</button>\n                <button class=\"ix-btn ix-btn--primary\" (click)=\"confirmAdd()\">Add</button>\n            </div>\n        </div>\n\n        <!-- Add button -->\n        <button *ngIf=\"!isAdding\" class=\"ix-add-btn\" (click)=\"startAdd()\">\n            <i class=\"ph-thin ph-plus\"></i> Add interaction\n        </button>\n    </ng-container>\n</div>\n", styles: [".interactions-panel{padding:.5rem}.section-empty{color:var(--p-text-muted-color);font-size:12px;text-align:center;padding:1rem}.ix-card{border:1px solid var(--p-surface-200);border-radius:8px;margin-bottom:6px;overflow:hidden;transition:border-color .15s}.ix-card.is-expanded{border-color:#cb9090}.ix-card-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:12px;transition:background .12s}.ix-card-header:hover{background:var(--p-surface-50)}.ix-trigger-icon{font-size:14px;color:#cb9090;flex-shrink:0}.ix-card-summary{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.ix-trigger-label{font-weight:500;white-space:nowrap}.ix-arrow{color:var(--p-text-muted-color);flex-shrink:0}.ix-action-label{color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ix-remove-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;flex-shrink:0;font-size:12px}.ix-remove-btn:hover{background:#dc26261a;color:#dc2626}.ix-remove-btn.small{width:16px;height:16px;font-size:10px}.ix-card-body{padding:0 10px 10px;border-top:1px solid var(--p-surface-100)}.ix-action-row{padding:8px 0;border-bottom:1px dashed var(--p-surface-100)}.ix-action-row:last-of-type{border-bottom:none}.ix-action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.ix-action-index{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.03em}.ix-action-target-badge{font-weight:400;text-transform:none;letter-spacing:0;color:#cb9090}.ix-action-row--reverse{background:#638fcb0a;border-radius:6px;padding:6px 8px;border-bottom:none!important;margin-bottom:4px}.ix-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--p-surface-200);margin-top:4px}.ix-toggle-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);display:flex;align-items:center;gap:5px}.ix-toggle-label i{font-size:12px}.ix-toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ix-toggle-switch input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.ix-toggle-track{display:block;width:28px;height:16px;border-radius:8px;background:var(--p-surface-300);transition:background .2s;position:relative}.ix-toggle-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}.ix-toggle-switch input:checked~.ix-toggle-track{background:#638fcb}.ix-toggle-switch input:checked~.ix-toggle-track:after{transform:translate(12px)}.ix-add-action-btn{display:flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:6px;font-size:11px;transition:border-color .15s,color .15s}.ix-add-action-btn:hover{border-color:#cb9090;color:#cb9090}.ix-field{margin-bottom:8px}.ix-field label{display:block;font-size:11px;color:var(--p-text-muted-color);margin-bottom:3px;font-weight:500}.ix-field select,.ix-field input[type=number]{width:100%;padding:5px 8px;border:1px solid var(--p-surface-200);border-radius:6px;font-size:12px;background:var(--p-surface-0);color:var(--p-text-color);outline:none;transition:border-color .15s}.ix-field select:focus,.ix-field input[type=number]:focus{border-color:#cb9090}.ix-field-row{display:flex;gap:8px}.ix-field-row .ix-field{flex:1}.ix-checkbox-field label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--p-text-color)}.ix-checkbox-field input[type=checkbox]{accent-color:#cb9090}.ix-add-form{border:1px solid var(--p-surface-200);border-radius:8px;padding:10px;margin-bottom:6px}.ix-form-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.ix-btn{padding:5px 12px;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s,color .12s}.ix-btn--primary{background:#cb9090;color:#fff}.ix-btn--primary:hover{background:#be7474}.ix-btn--secondary{background:transparent;color:var(--p-text-muted-color)}.ix-btn--secondary:hover{background:var(--p-surface-100);color:var(--p-text-color)}.ix-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--p-surface-300);background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:8px;font-size:12px;transition:border-color .15s,color .15s}.ix-add-btn:hover{border-color:#cb9090;color:#cb9090}.ix-target-hint{display:block;font-size:10px;color:var(--p-text-muted-color);margin-top:4px;font-style:italic}::ng-deep .ix-target-select{width:100%}::ng-deep .ix-target-select .p-select-label{font-size:12px;padding:4px 8px}::ng-deep .ix-target-select .p-select{border-radius:6px}\n"] }]
         }], ctorParameters: () => [{ type: OverlayService }], propDecorators: { node: [{
                 type: Input
             }] } });
@@ -5207,5 +5281,5 @@ class TextBlockComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map