@vectoriox/iox-builder 1.0.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -0,0 +1,4357 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { AccordionModule } from 'primeng/accordion';
+import * as i10 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i2$1 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
+import { TooltipModule } from 'primeng/tooltip';
+import { DialogModule } from 'primeng/dialog';
+import * as i11 from '@vectoriox/iox-ui';
+import { IS_PREVIEW, IoxPageModule } from '@vectoriox/iox-ui';
+import Lenis from 'lenis';
+import { Subject, BehaviorSubject } from 'rxjs';
+import interact from 'interactjs';
+import * as i5 from '@angular/router';
+
+var PanelEventTypes;
+(function (PanelEventTypes) {
+    PanelEventTypes["ELEMENT_SELECT"] = "elementselect";
+    PanelEventTypes["ELEMENT_DESELECT"] = "elementdeselect";
+    PanelEventTypes["PANEL_SELECTED"] = "panelselect";
+    PanelEventTypes["PANEL_OPEN"] = "panelopen";
+    PanelEventTypes["PANEL_CLOSE"] = "panelclose";
+    PanelEventTypes["BINDING_CHANGED"] = "bindingchanged";
+    PanelEventTypes["NODE_RENDERED"] = "noderendered";
+})(PanelEventTypes || (PanelEventTypes = {}));
+class PanelEventService {
+    constructor() {
+        this.panelEventSubject = new Subject();
+    }
+    subscribe(next) {
+        return this.panelEventSubject.asObservable().subscribe(next);
+    }
+    emit(type, data) {
+        this.panelEventSubject.next({ type, data });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelEventService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelEventService, decorators: [{
+            type: Injectable
+        }] });
+
+var PanelTypes;
+(function (PanelTypes) {
+    PanelTypes["BINDINGS"] = "Bindings";
+    PanelTypes["STYLES"] = "Styles";
+    PanelTypes["PAGE"] = "Page";
+})(PanelTypes || (PanelTypes = {}));
+const ROUTE_ANIMATION_OPTIONS = [
+    { value: 'none', label: 'None', description: 'No animation' },
+    { value: 'fade', label: 'Fade', description: 'Opacity cross-dissolve' },
+    { value: 'slideUp', label: 'Slide Up', description: 'Rise from below + fade' },
+    { value: 'slideDown', label: 'Slide Down', description: 'Drop from above + fade' },
+    { value: 'zoomIn', label: 'Zoom In', description: 'Scale up from 96% + fade' },
+    { value: 'zoomOut', label: 'Zoom Out', description: 'Scale down from 104% + fade' },
+    { value: 'blurIn', label: 'Blur', description: 'Unblur + fade' },
+    { value: 'flip', label: 'Flip', description: 'Perspective tilt + fade' },
+];
+const EASING_OPTIONS$1 = [
+    { label: 'Ease', value: 'ease' },
+    { label: 'Ease In', value: 'ease-in' },
+    { label: 'Ease Out', value: 'ease-out' },
+    { label: 'Ease In Out', value: 'ease-in-out' },
+    { label: 'Linear', value: 'linear' },
+    { label: 'Spring', value: 'cubic-bezier(0.34, 1.56, 0.64, 1)' },
+];
+function defaultPageSettings() {
+    return {
+        style: {
+            backgroundColor: '#ffffff',
+            backgroundType: 'solid',
+            backgroundGradient: 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%)',
+            backgroundImage: '',
+            fontFamily: 'Poppins, sans-serif',
+            textColor: '#000000',
+            maxWidth: '1440px',
+        },
+        scroll: {
+            enabled: true,
+            lerp: 0.1,
+            wheelMultiplier: 1,
+            touchMultiplier: 1,
+            direction: 'vertical',
+            infinite: false,
+        },
+        routeAnimation: {
+            enter: 'fade',
+            leave: 'fade',
+            duration: 400,
+            easing: 'ease',
+        },
+    };
+}
+var ToolbarAction;
+(function (ToolbarAction) {
+    ToolbarAction["SelectParent"] = "select-parent";
+    ToolbarAction["Duplicate"] = "duplicate";
+    ToolbarAction["Delete"] = "delete";
+    ToolbarAction["Play"] = "play";
+    ToolbarAction["SaveAsBlock"] = "save-as-block";
+})(ToolbarAction || (ToolbarAction = {}));
+var NodeAction;
+(function (NodeAction) {
+    NodeAction["Delete"] = "delete";
+    NodeAction["Duplicate"] = "duplicate";
+})(NodeAction || (NodeAction = {}));
+var BuilderMode;
+(function (BuilderMode) {
+    BuilderMode["Select"] = "select";
+    BuilderMode["Style"] = "style";
+    BuilderMode["Pan"] = "pan";
+})(BuilderMode || (BuilderMode = {}));
+var DeviceMode;
+(function (DeviceMode) {
+    DeviceMode["Desktop"] = "desktop";
+    DeviceMode["Tablet"] = "tablet";
+    DeviceMode["Mobile"] = "mobile";
+})(DeviceMode || (DeviceMode = {}));
+const DEVICE_OPTIONS = [
+    { mode: DeviceMode.Desktop, label: 'Desktop', icon: 'ph-thin ph-desktop', width: 1440 },
+    { mode: DeviceMode.Tablet, label: 'Tablet', icon: 'ph-thin ph-device-tablet', width: 768 },
+    { mode: DeviceMode.Mobile, label: 'Mobile', icon: 'ph-thin ph-device-mobile', width: 375 },
+];
+const ZOOM_OPTIONS = [
+    { label: '25%', value: 25 },
+    { label: '50%', value: 50 },
+    { label: '75%', value: 75 },
+    { label: '100%', value: 100 },
+    { label: 'Fit', value: 'fit' },
+];
+
+class ComponentRegistryService {
+    constructor() {
+        this.components = {};
+    }
+    getComponent(type) {
+        return this.components[type]?.component ?? null;
+    }
+    hasComponent(type) {
+        return !!this.components[type];
+    }
+    createConfig(type) {
+        const configType = this.components[type]?.config;
+        return configType ? new configType() : null;
+    }
+    register(type, component, config) {
+        this.components[type] = { type, component, config };
+    }
+    getAll() {
+        return Object.values(this.components);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ComponentRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ComponentRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+class OverlayService {
+    constructor() {
+        this.hoverSubject = new BehaviorSubject(null);
+        this.selectSubject = new BehaviorSubject(null);
+        this.nodeMap = new Map();
+        this.hover$ = this.hoverSubject.asObservable();
+        this.select$ = this.selectSubject.asObservable();
+        this.containerElement = null;
+        this.scrollContainerElement = null;
+        /** Emits the scroll container element whenever it is registered. */
+        this.scrollContainer$ = new Subject();
+    }
+    setContainer(container) {
+        this.containerElement = container;
+    }
+    getContainer() {
+        return this.containerElement;
+    }
+    setScrollContainer(el) {
+        this.scrollContainerElement = el;
+        if (el) {
+            this.scrollContainer$.next(el);
+        }
+    }
+    getScrollContainer() {
+        return this.scrollContainerElement;
+    }
+    /**
+     * Resolve the inner styled element.
+     * Builder components apply [ngStyle] on their first child element,
+     * so computed styles (padding, margin) live there — not on the host.
+     */
+    getStyledElement(host) {
+        return host.firstElementChild || host;
+    }
+    // ── Node → Element registry ──────────────────────────────
+    registerNode(node, element, componentRef) {
+        this.nodeMap.set(node, { element, componentRef });
+    }
+    unregisterNode(node) {
+        this.nodeMap.delete(node);
+    }
+    getNodeRef(node) {
+        return this.nodeMap.get(node);
+    }
+    /** Return all registered node → ref entries. */
+    getAllNodeEntries() {
+        return this.nodeMap.entries();
+    }
+    /** Find a registered node whose host element matches the given DOM element. */
+    findNodeByElement(element) {
+        for (const [node, ref] of this.nodeMap) {
+            if (ref.element === element) {
+                return { node, ref };
+            }
+        }
+        return undefined;
+    }
+    setHover(element, componentName, mode) {
+        if (this.selectSubject.getValue()?.element === element)
+            return;
+        this.hoverSubject.next({ element, componentName, boxModel: this.buildBoxModel(element), mode });
+    }
+    clearHover() {
+        this.hoverSubject.next(null);
+    }
+    setSelect(element, componentName, mode, node, componentRef) {
+        this.hoverSubject.next(null);
+        this.selectSubject.next({ element, componentName, mode, node, componentRef });
+    }
+    clearSelect() {
+        this.selectSubject.next(null);
+    }
+    refreshSelect() {
+        const current = this.selectSubject.getValue();
+        if (!current)
+            return;
+        this.selectSubject.next({ ...current });
+    }
+    /** Lightweight swap for drag-preview tracking. */
+    updateSelectElement(element) {
+        const current = this.selectSubject.getValue();
+        if (!current)
+            return;
+        this.selectSubject.next({ ...current, element });
+    }
+    buildBoxModel(host) {
+        const s = window.getComputedStyle(this.getStyledElement(host));
+        const px = (v) => { const n = Number.parseFloat(v); return Number.isFinite(n) ? n : 0; };
+        return {
+            margin: { top: px(s.marginTop), right: px(s.marginRight), bottom: px(s.marginBottom), left: px(s.marginLeft) },
+            padding: { top: px(s.paddingTop), right: px(s.paddingRight), bottom: px(s.paddingBottom), left: px(s.paddingLeft) },
+            border: { top: px(s.borderTopWidth), right: px(s.borderRightWidth), bottom: px(s.borderBottomWidth), left: px(s.borderLeftWidth) },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable
+        }] });
+
+class DragEngineService {
+    constructor(registry) {
+        this.registry = registry;
+        // ── Drop-zone registry ────────────────────────────────────
+        this.ids = [];
+        this.elMap = new Map();
+        this.dataMap = new Map();
+        this.cdrMap = new Map();
+        this.dropCbMap = new Map();
+        this.postDropMap = new Map();
+        this.ids$ = new BehaviorSubject([]);
+        this.isDragging$ = new BehaviorSubject(false);
+        this.deepTarget$ = new BehaviorSubject(null);
+        // ── Active drag state ─────────────────────────────────────
+        this._isDragging = false;
+        this._payload = null;
+        this._sourceEl = null;
+        /**
+         * For internal drags: a DOM clone of the dragged element appended to <body>.
+         * Lives outside any CSS transform, so position:fixed works in viewport coords.
+         * For external drags: the label chip overlay.
+         */
+        this._overlay = null;
+        /** Where on the element the user grabbed it (for accurate ghost positioning). */
+        this._grabOffsetX = 0;
+        this._grabOffsetY = 0;
+        // ── Pointer tracking ──────────────────────────────────────
+        this._lastPointerX = 0;
+        this._lastPointerY = 0;
+        // ── Deep-target tracking ──────────────────────────────────
+        this._deepTargetId = null;
+        /** Injected overlay div marking the active drop target. */
+        this._targetOverlay = null;
+        // ── Insertion indicator ───────────────────────────────────
+        this._indicator = null;
+        this._indicatorContainerId = null;
+        this._indicatorIndex = -1;
+        this._indicatorRaf = 0;
+        /** Elements that have temporary FLIP inline styles — cleared on drag end. */
+        this._flipEls = new Set();
+        // ── Viewport scale ────────────────────────────────────────
+        this._scale = 1;
+        // ── Root-escape ───────────────────────────────────────────
+        this.ROOT_ESCAPE_PX = 14;
+        this._rootEscapeActiveFor = null;
+    }
+    // ── Shared drop handler — used by all layout components ───────────────────
+    handleDrop(children, event, dropListId, cdr, afterDrop) {
+        const { payload, insertIndex } = event;
+        if (payload.type === 'external') {
+            const config = this.registry.createConfig(payload.data);
+            if (config) {
+                children.splice(insertIndex, 0, config);
+                cdr.detectChanges();
+            }
+            afterDrop?.();
+            return;
+        }
+        const item = payload.data;
+        if (payload.sourceId !== dropListId) {
+            const sourceData = payload.sourceId ? this.getData(payload.sourceId) : null;
+            if (sourceData) {
+                const srcIdx = sourceData.indexOf(item);
+                if (srcIdx !== -1) {
+                    sourceData.splice(srcIdx, 1);
+                    this.getCdr(payload.sourceId)?.detectChanges();
+                }
+            }
+            children.splice(insertIndex, 0, item);
+            cdr.detectChanges();
+            afterDrop?.();
+            return;
+        }
+        const currentIdx = children.indexOf(item);
+        if (currentIdx !== -1) {
+            const adjustedIdx = insertIndex > currentIdx ? insertIndex - 1 : insertIndex;
+            children.splice(currentIdx, 1);
+            children.splice(adjustedIdx, 0, item);
+            cdr.detectChanges();
+        }
+        afterDrop?.();
+    }
+    /** Called by BuilderComponent whenever the viewport scale changes. */
+    setScale(scale) { this._scale = scale; }
+    // ─────────────────────────────────────────────────────────
+    // Element lookup — elMap first, DOM id fallback
+    // ─────────────────────────────────────────────────────────
+    _getEl(id) {
+        return this.elMap.get(id) ?? document.getElementById(id);
+    }
+    // ─────────────────────────────────────────────────────────
+    // Drop-zone registration
+    // ─────────────────────────────────────────────────────────
+    registerDropzone(id, el, data, cdr, dropCb, postDrop) {
+        if (!id)
+            return;
+        // Stamp id on element so DOM-walk helpers (_isRootContainer) find it.
+        el.id = id;
+        if (!this.ids.includes(id)) {
+            this.ids = [...this.ids, id];
+            this.ids$.next(this.ids);
+        }
+        this.elMap.set(id, el);
+        this.dataMap.set(id, data);
+        this.cdrMap.set(id, cdr);
+        this.dropCbMap.set(id, dropCb);
+        if (postDrop)
+            this.postDropMap.set(id, postDrop);
+        interact(el).dropzone({
+            accept: '[data-iox-draggable]',
+            overlap: 'pointer',
+        });
+    }
+    unregisterDropzone(id, el) {
+        this.ids = this.ids.filter(i => i !== id);
+        this.elMap.delete(id);
+        this.dataMap.delete(id);
+        this.cdrMap.delete(id);
+        this.dropCbMap.delete(id);
+        this.postDropMap.delete(id);
+        this.ids$.next(this.ids);
+        try {
+            interact(el).unset();
+        }
+        catch { /* already unset */ }
+    }
+    // ─────────────────────────────────────────────────────────
+    // Draggable registration
+    // ─────────────────────────────────────────────────────────
+    registerDraggable(el, getPayload) {
+        el.setAttribute('data-iox-draggable', '');
+        interact(el).draggable({
+            listeners: {
+                start: (event) => this._onDragStart(event, el, getPayload),
+                move: (event) => this._onDragMove(event),
+                end: (event) => this._onDragEnd(event),
+            },
+            modifiers: [],
+        });
+    }
+    unregisterDraggable(el) {
+        el.removeAttribute('data-iox-draggable');
+        try {
+            interact(el).unset();
+        }
+        catch { /* already unset */ }
+    }
+    getData(id) { return this.dataMap.get(id); }
+    getCdr(id) { return this.cdrMap.get(id); }
+    invokePostDrop(id) { this.postDropMap.get(id)?.(); }
+    consumeDeepTarget() {
+        const v = this._deepTargetId;
+        this._deepTargetId = null;
+        return v;
+    }
+    // ─────────────────────────────────────────────────────────
+    // Drag lifecycle
+    // ─────────────────────────────────────────────────────────
+    _onDragStart(event, el, getPayload) {
+        this._payload = getPayload();
+        this._sourceEl = el;
+        this._isDragging = true;
+        this._rootEscapeActiveFor = null;
+        this._lastPointerX = event.client.x;
+        this._lastPointerY = event.client.y;
+        this.isDragging$.next(true);
+        if (this._payload.type === 'internal') {
+            // ── Clone the element and append to <body> ────────────────────────────
+            //
+            // DOM structure for a canvas item:
+            //   div[ioxDraggable]  (el — the drag wrapper, may be wider than content)
+            //     └─ <app-card> / <app-section> …  (Angular component host)
+            //          └─ div.card-root / div.section-root …  (visual root with styles)
+            //
+            // el.getBoundingClientRect() gives the wrapper's rect, which can be
+            // wider than the visual element when the wrapper is in a flex container
+            // that stretches it. This causes the ghost to have wrong dimensions
+            // and the grab offset to be calculated from the wrong origin.
+            //
+            // Fix: use the Angular component host (el.firstElementChild) for both
+            // the rect measurement and as the clone source.
+            // - Rect from host → correct visual dimensions and true grab offset.
+            // - Clone from host → carries _ngcontent-* attrs so encapsulated CSS works.
+            //
+            // The wrapper el still gets iox-drag-active-source (visibility:hidden)
+            // to keep its layout space stable while dragging.
+            const hostEl = el.firstElementChild ?? el;
+            const rect = hostEl.getBoundingClientRect();
+            this._grabOffsetX = event.client.x - rect.left;
+            this._grabOffsetY = event.client.y - rect.top;
+            // Scale factor: getBoundingClientRect() returns scaled viewport px,
+            // but the clone renders at natural CSS px (no transform parent on body).
+            // Apply the same scale transform so the clone matches the visual size
+            // exactly — no explicit width/height, no overflow clipping.
+            const scale = this._scale;
+            // Cancel fill:forwards animations before cloning so the ghost shows
+            // the element at its natural (un-animated) state, and so the original
+            // element is clean after a same-position drop (where Angular won't
+            // destroy/recreate the DOM node and InteractionEngine.detach() won't fire).
+            hostEl.getAnimations().forEach(a => a.cancel());
+            const clone = hostEl.cloneNode(true);
+            // getBoundingClientRect() returns scaled viewport px. Divide by scale
+            // to get the natural CSS px — this constrains the clone to match the
+            // original's width when it's reparented to <body> (no canvas parent).
+            // overflow:hidden suppresses scrollbars that can appear when the clone's
+            // children lose their layout context (e.g. percentage-width children).
+            const cssWidth = Math.round(rect.width / scale);
+            const cssHeight = Math.round(rect.height / scale);
+            clone.style.cssText = [
+                'position:fixed',
+                `left:${rect.left}px`,
+                `top:${rect.top}px`,
+                `width:${cssWidth}px`,
+                `height:${cssHeight}px`,
+                `transform:scale(${scale})`,
+                'transform-origin:top left',
+                'pointer-events:none',
+                'overflow:hidden',
+                'z-index:9999',
+                'margin:0',
+            ].join(';');
+            clone.classList.add('iox-drag-moving');
+            document.body.appendChild(clone);
+            this._overlay = clone;
+            // Hide original wrapper in-place (keeps layout space so container size is stable).
+            el.classList.add('iox-drag-active-source');
+        }
+        else {
+            // ── Sidebar external drag — show a label chip ─────────────────────────
+            this._createExternalChip(this._payload, event.client.x, event.client.y);
+            el.classList.add('iox-drag-source');
+        }
+    }
+    _onDragMove(event) {
+        this._lastPointerX = event.client.x;
+        this._lastPointerY = event.client.y;
+        // Move the clone (or chip) under the cursor.
+        if (this._overlay) {
+            this._overlay.style.left = (event.client.x - this._grabOffsetX) + 'px';
+            this._overlay.style.top = (event.client.y - this._grabOffsetY) + 'px';
+        }
+        this._updateDeepTarget();
+        this._updateIndicator();
+    }
+    _onDragEnd(event) {
+        // Restore original element visibility BEFORE Angular re-renders on drop.
+        if (this._sourceEl) {
+            this._sourceEl.classList.remove('iox-drag-active-source');
+            this._sourceEl.classList.remove('iox-drag-source');
+        }
+        document.querySelectorAll('.iox-drag-active-source')
+            .forEach(el => el.classList.remove('iox-drag-active-source'));
+        // Remove clone/chip overlay.
+        this._removeOverlay();
+        // Remove indicator BEFORE committing so calcInsertIndex sees a clean DOM.
+        this._removeIndicator();
+        document.body.classList.remove('iox-drag-has-indicator');
+        // Clean up any FLIP transform/transition inline styles left on container children.
+        for (const el of this._flipEls) {
+            el.style.transform = '';
+            el.style.transition = '';
+        }
+        this._flipEls.clear();
+        this._commitDrop();
+        this._removeTargetOverlay();
+        document.querySelectorAll('.iox-drag-over').forEach(el => el.classList.remove('iox-drag-over'));
+        this._rootEscapeActiveFor = null;
+        this._isDragging = false;
+        this._payload = null;
+        this._sourceEl = null;
+        this.isDragging$.next(false);
+        this.deepTarget$.next(null);
+        setTimeout(() => { this._deepTargetId = null; });
+    }
+    // ─────────────────────────────────────────────────────────
+    // Drop commit
+    // ─────────────────────────────────────────────────────────
+    _commitDrop() {
+        if (!this._payload)
+            return;
+        const targetId = this._deepTargetId ?? 'canvas-preview';
+        const insertIndex = this.calcInsertIndex(targetId);
+        const dropCb = this.dropCbMap.get(targetId);
+        if (!dropCb)
+            return;
+        dropCb({ payload: this._payload, targetId, insertIndex });
+    }
+    // ─────────────────────────────────────────────────────────
+    // External-drag chip (sidebar items only)
+    // ─────────────────────────────────────────────────────────
+    _createExternalChip(payload, pointerX, pointerY) {
+        this._removeOverlay();
+        const label = typeof payload.data === 'string' ? payload.data : 'Component';
+        const chip = document.createElement('div');
+        chip.className = 'iox-drag-overlay iox-drag-overlay-chip';
+        chip.textContent = label;
+        // Chip follows 14px below-right of cursor.
+        this._grabOffsetX = -14;
+        this._grabOffsetY = -14;
+        chip.style.left = (pointerX + 14) + 'px';
+        chip.style.top = (pointerY + 14) + 'px';
+        document.body.appendChild(chip);
+        this._overlay = chip;
+    }
+    _removeOverlay() {
+        this._overlay?.remove();
+        this._overlay = null;
+        this._grabOffsetX = 0;
+        this._grabOffsetY = 0;
+    }
+    // ─────────────────────────────────────────────────────────
+    // Deep-target detection (smallest bounding-rect area)
+    // ─────────────────────────────────────────────────────────
+    _updateDeepTarget() {
+        const px = this._lastPointerX;
+        const py = this._lastPointerY;
+        let bestId = null;
+        let bestArea = Infinity;
+        for (const id of this.ids) {
+            const el = this._getEl(id);
+            if (!el)
+                continue;
+            // Never drop an element into its own subtree: skip any dropzone
+            // whose DOM element lives inside the dragged source wrapper.
+            if (this._sourceEl?.contains(el))
+                continue;
+            const rect = el.getBoundingClientRect();
+            if (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
+                const area = rect.width * rect.height;
+                if (area < bestArea) {
+                    bestArea = area;
+                    bestId = id;
+                }
+            }
+        }
+        // Root-escape with hysteresis.
+        // Purpose: when the cursor is near the top/bottom edge of a root-level
+        // section, treat the target as canvas-preview so the user can insert
+        // between root sections.
+        //
+        // IMPORTANT: only activate if the cursor was ALREADY inside this section
+        // (i.e. deepTarget is the section itself or a nested child of it).
+        // Without this guard, crossing from Section A into the top 14px of
+        // Section C immediately locks the target to canvas-preview and prevents
+        // the user from ever reaching Section C's nested containers.
+        if (this._rootEscapeActiveFor) {
+            const escEl = this._getEl(this._rootEscapeActiveFor);
+            if (escEl) {
+                const r = escEl.getBoundingClientRect();
+                const inside = px >= r.left && px <= r.right && py >= r.top && py <= r.bottom;
+                if (inside) {
+                    bestId = 'canvas-preview';
+                }
+                else {
+                    this._rootEscapeActiveFor = null;
+                }
+            }
+            else {
+                this._rootEscapeActiveFor = null;
+            }
+        }
+        if (!this._rootEscapeActiveFor &&
+            bestId && bestId !== 'canvas-preview' && this._isRootContainer(bestId)) {
+            const el = this._getEl(bestId);
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                const nearEdge = py <= rect.top + this.ROOT_ESCAPE_PX ||
+                    py >= rect.bottom - this.ROOT_ESCAPE_PX;
+                // Only escape if we were already targeting this section or
+                // something nested inside it — not when crossing into it fresh.
+                const wasInsideThisSection = this._deepTargetId === bestId ||
+                    this._isDescendantDropzone(this._deepTargetId, bestId);
+                if (nearEdge && wasInsideThisSection) {
+                    this._rootEscapeActiveFor = bestId;
+                    bestId = 'canvas-preview';
+                }
+            }
+        }
+        if (bestId !== this._deepTargetId) {
+            if (this._deepTargetId) {
+                const old = this._getEl(this._deepTargetId);
+                old?.classList.remove('iox-drag-over');
+            }
+            this._deepTargetId = bestId;
+            if (bestId) {
+                this._getEl(bestId)?.classList.add('iox-drag-over');
+            }
+            // Move injected overlay to the new target container.
+            this._moveTargetOverlay(bestId);
+            this.deepTarget$.next(bestId);
+            // Reset indicator position state when container changes.
+            this._indicatorIndex = -1;
+            this._indicatorContainerId = null;
+        }
+    }
+    // ─────────────────────────────────────────────────────────
+    // Target overlay — fixed to <body>, sized from getBoundingClientRect
+    // so it is always above all canvas content regardless of stacking
+    // contexts or background colors inside the target container.
+    // ─────────────────────────────────────────────────────────
+    /** Call on every canvas scroll tick to keep the fixed-position drop-target
+     *  overlay aligned with the container element that moved in the viewport. */
+    refreshDragOverlays() {
+        if (!this._isDragging)
+            return;
+        this._moveTargetOverlay(this._deepTargetId);
+    }
+    _moveTargetOverlay(targetId) {
+        if (!targetId || targetId === 'canvas-preview') {
+            this._removeTargetOverlay();
+            return;
+        }
+        const el = this._getEl(targetId);
+        if (!el) {
+            this._removeTargetOverlay();
+            return;
+        }
+        if (!this._targetOverlay) {
+            this._targetOverlay = document.createElement('div');
+            this._targetOverlay.className = 'iox-drop-target-overlay';
+            document.body.appendChild(this._targetOverlay);
+        }
+        const rect = el.getBoundingClientRect();
+        this._targetOverlay.style.cssText = [
+            'position:fixed',
+            `left:${rect.left}px`,
+            `top:${rect.top}px`,
+            `width:${rect.width}px`,
+            `height:${rect.height}px`,
+            'pointer-events:none',
+            'z-index:9998',
+            'box-sizing:border-box',
+        ].join(';');
+    }
+    _removeTargetOverlay() {
+        this._targetOverlay?.remove();
+        this._targetOverlay = null;
+    }
+    _isRootContainer(id) {
+        const el = this._getEl(id);
+        if (!el)
+            return false;
+        let parent = el.parentElement;
+        while (parent) {
+            if (parent.id === 'canvas-preview')
+                return true;
+            if (parent.id && this.ids.includes(parent.id))
+                return false;
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    /**
+     * Returns true if the dropzone with `childId` is a DOM descendant of the
+     * dropzone with `parentId`. Used to decide whether the cursor was already
+     * "inside" a root section before triggering root-escape.
+     */
+    _isDescendantDropzone(childId, parentId) {
+        if (!childId)
+            return false;
+        const childEl = this._getEl(childId);
+        const parentEl = this._getEl(parentId);
+        if (!childEl || !parentEl)
+            return false;
+        return parentEl.contains(childEl);
+    }
+    // ─────────────────────────────────────────────────────────
+    // Insertion indicator (animates open so siblings shift smoothly)
+    // ─────────────────────────────────────────────────────────
+    _updateIndicator() {
+        const targetId = this._deepTargetId ?? 'canvas-preview';
+        document.body.classList.add('iox-drag-has-indicator');
+        const idx = this.calcInsertIndex(targetId);
+        if (idx !== this._indicatorIndex || targetId !== this._indicatorContainerId) {
+            this._indicatorIndex = idx;
+            this._positionIndicator(targetId, idx);
+        }
+    }
+    _positionIndicator(containerId, index) {
+        const container = this._getEl(containerId);
+        if (!container)
+            return;
+        const cs = window.getComputedStyle(container);
+        const isRow = (cs.display === 'flex' || cs.display === 'inline-flex') &&
+            (!cs.flexDirection || cs.flexDirection === 'row' || cs.flexDirection === 'row-reverse');
+        const containerChanged = this._indicatorContainerId !== containerId;
+        if (containerChanged) {
+            cancelAnimationFrame(this._indicatorRaf);
+            this._indicator?.remove();
+            this._indicator = null;
+        }
+        const needsCreate = !this._indicator;
+        if (needsCreate) {
+            this._indicator = document.createElement('div');
+            this._indicator.className = 'iox-insert-indicator';
+            if (isRow) {
+                // Start at width:0 with align-self:stretch so it spans the full
+                // container height once visible. overflow:hidden keeps it invisible
+                // at width:0 — no painted pixels, no phantom height like min-height
+                // would cause. Animates width 0→3px on first appearance.
+                this._indicator.style.cssText =
+                    'flex-shrink:0;width:0;align-self:stretch;' +
+                        'background:#6366f1;border-radius:2px;pointer-events:none;margin:0;' +
+                        'transition:width 140ms ease,margin 140ms ease;overflow:hidden;';
+            }
+            else {
+                this._indicator.style.cssText =
+                    'height:0;width:100%;background:#6366f1;border-radius:2px;' +
+                        'pointer-events:none;margin:0;display:block;' +
+                        'transition:height 140ms ease,margin 140ms ease;overflow:hidden;';
+            }
+        }
+        this._indicatorContainerId = containerId;
+        const skipClasses = [
+            'section-placeholder', 'container-placeholder', 'repeater-placeholder',
+            'repeater-badge', 'repeater-preview-row', 'iox-insert-indicator',
+            'iox-drag-active-source',
+        ];
+        const children = Array.from(container.children).filter(el => !skipClasses.some(cls => el.classList.contains(cls)));
+        // ── FLIP: snapshot sibling rects BEFORE DOM change (reposition case only) ──
+        let beforeRects = null;
+        if (!needsCreate) {
+            beforeRects = new Map();
+            Array.from(container.children).forEach(child => {
+                if (child !== this._indicator) {
+                    beforeRects.set(child, child.getBoundingClientRect());
+                }
+            });
+        }
+        // Reposition indicator in DOM.
+        if (!this._indicator)
+            return;
+        if (index >= children.length) {
+            container.appendChild(this._indicator);
+        }
+        else {
+            container.insertBefore(this._indicator, children[index]);
+        }
+        // ── FLIP: animate siblings from their old positions to their new positions ──
+        if (beforeRects) {
+            Array.from(container.children).forEach(child => {
+                const before = beforeRects.get(child);
+                if (!before)
+                    return;
+                const after = child.getBoundingClientRect();
+                const dx = before.left - after.left;
+                const dy = before.top - after.top;
+                if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                    return;
+                const el = child;
+                this._flipEls.add(el);
+                // Invert: snap element back to where it was, then animate to new pos.
+                el.style.transition = 'none';
+                el.style.transform = `translate(${dx}px,${dy}px)`;
+                requestAnimationFrame(() => {
+                    el.style.transition = 'transform 140ms ease';
+                    el.style.transform = '';
+                });
+            });
+        }
+        // Animate indicator open (first appearance in this container only).
+        if (needsCreate) {
+            cancelAnimationFrame(this._indicatorRaf);
+            this._indicatorRaf = requestAnimationFrame(() => {
+                if (!this._indicator)
+                    return;
+                if (isRow) {
+                    this._indicator.style.width = '3px';
+                    this._indicator.style.margin = '0 3px';
+                }
+                else {
+                    this._indicator.style.height = '4px';
+                    this._indicator.style.margin = '3px 0';
+                }
+            });
+        }
+    }
+    _removeIndicator() {
+        cancelAnimationFrame(this._indicatorRaf);
+        this._indicator?.remove();
+        this._indicator = null;
+        this._indicatorContainerId = null;
+        this._indicatorIndex = -1;
+    }
+    // ─────────────────────────────────────────────────────────
+    // calcInsertIndex
+    // ─────────────────────────────────────────────────────────
+    calcInsertIndex(containerId) {
+        const container = this._getEl(containerId);
+        if (!container)
+            return 0;
+        const skipClasses = [
+            'section-placeholder', 'container-placeholder', 'repeater-placeholder',
+            'repeater-badge', 'repeater-preview-row', 'iox-insert-indicator',
+            'iox-drag-active-source',
+        ];
+        const children = Array.from(container.children).filter(el => !skipClasses.some(cls => el.classList.contains(cls)));
+        if (!children.length)
+            return 0;
+        const cs = window.getComputedStyle(container);
+        const isHorizontal = (cs.display === 'flex' || cs.display === 'inline-flex') &&
+            (!cs.flexDirection || cs.flexDirection === 'row' || cs.flexDirection === 'row-reverse');
+        for (let i = 0; i < children.length; i++) {
+            const rect = children[i].getBoundingClientRect();
+            if (isHorizontal) {
+                if (this._lastPointerX < rect.left + rect.width / 2)
+                    return i;
+            }
+            else {
+                if (this._lastPointerY < rect.top + rect.height / 2)
+                    return i;
+            }
+        }
+        return children.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService, deps: [{ token: ComponentRegistryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: ComponentRegistryService }] });
+
+/**
+ * Page-scoped registry that holds the current page's data sources.
+ * Scoped to PageUiComponent.providers[] so every builder service
+ * (BindingsComponent, BuilderRepeaterComponent) shares the same instance.
+ *
+ * Seeded by PageUiComponent.loadPage() from saved page data, then kept
+ * up to date by BindingsComponent whenever the user adds/removes a source.
+ */
+class DataSourceRegistryService {
+    constructor() {
+        this._ds$ = new BehaviorSubject([]);
+        this.dataSources$ = this._ds$.asObservable();
+    }
+    setDataSources(ds) {
+        this._ds$.next(ds);
+    }
+    getDataSources() {
+        return this._ds$.value;
+    }
+    findByAlias(alias) {
+        return this._ds$.value.find(ds => ds.alias === alias);
+    }
+    getAliasOptions() {
+        return this._ds$.value.map(ds => ({ label: ds.alias, value: ds.alias }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DataSourceRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DataSourceRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DataSourceRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+class ViewportService {
+    constructor() {
+        this.state = {
+            device: DeviceMode.Desktop,
+            width: DEVICE_OPTIONS[0].width,
+            scale: 0.75,
+        };
+        this.stateSubject = new BehaviorSubject(this.state);
+        this.state$ = this.stateSubject.asObservable();
+    }
+    getState() {
+        return this.state;
+    }
+    getScale() {
+        return this.state.scale;
+    }
+    setDevice(device) {
+        const option = DEVICE_OPTIONS.find(d => d.mode === device);
+        if (!option)
+            return;
+        this.state = { ...this.state, device, width: option.width };
+        this.stateSubject.next(this.state);
+    }
+    setScale(scale) {
+        this.state = { ...this.state, scale: Math.max(0.1, Math.min(2, scale)) };
+        this.stateSubject.next(this.state);
+    }
+    /**
+     * Calculate the scale that makes the canvas fit inside the available editor width.
+     * @param availableWidth The pixel width of the editor area that holds the canvas.
+     * @param padding Optional horizontal padding to subtract (default 20px each side).
+     */
+    fitToWidth(availableWidth, padding = 40) {
+        const usable = availableWidth - padding;
+        if (usable <= 0)
+            return;
+        const scale = Math.min(1, usable / this.state.width);
+        this.setScale(scale);
+    }
+    /**
+     * Convert a screen-space coordinate to canvas-space (unscaled).
+     * Call this when translating pointer events into canvas-relative positions.
+     */
+    screenToCanvas(screenX, screenY, canvasRect) {
+        return {
+            x: (screenX - canvasRect.left) / this.state.scale,
+            y: (screenY - canvasRect.top) / this.state.scale,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Wires ComponentNode interactions to live DOM elements via the
+ * OverlayService node-element registry.
+ *
+ * Call `attach(node)` after the node is rendered and registered.
+ * Call `detach(node)` on destroy to tear down listeners/observers.
+ */
+class InteractionEngineService {
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.attached = new Map();
+    }
+    /** Wire all interactions for a node to its rendered DOM element. */
+    attach(node) {
+        if (!node.interactions?.length)
+            return;
+        const ref = this.overlayService.getNodeRef(node);
+        if (!ref)
+            return;
+        const cleanups = [];
+        for (const ix of node.interactions) {
+            const cleanup = this.attachInteraction(node, ix, ref.element);
+            cleanups.push({ node, interaction: ix, cleanup });
+        }
+        this.attached.set(node, cleanups);
+    }
+    /** Tear down all interaction listeners for a node and reset its animated state. */
+    detach(node) {
+        const entries = this.attached.get(node);
+        if (!entries)
+            return;
+        for (const entry of entries) {
+            entry.cleanup();
+        }
+        this.attached.delete(node);
+        // Cancelling Web Animations removes fill:'forwards' committed styles,
+        // returning the element to its natural CSS state.
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            ref.element.getAnimations().forEach(a => a.cancel());
+        }
+    }
+    /** Re-attach interactions after they have been edited in the panel. */
+    refresh(node) {
+        this.detach(node);
+        this.attach(node);
+    }
+    /**
+     * Replay all interactions on a node immediately, regardless of their trigger.
+     * Used by the builder overlay play button for in-editor animation preview.
+     * Uses fill:'none' so the element returns to its natural state after the preview.
+     */
+    replay(node) {
+        if (!node.interactions?.length)
+            return;
+        // Cancel any in-progress animations first to reset the element cleanly.
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            ref.element.getAnimations().forEach(a => a.cancel());
+        }
+        for (const ix of node.interactions) {
+            this.runActions(node, ix.actions);
+        }
+    }
+    // ── Private ──────────────────────────────────────────────
+    attachInteraction(node, ix, element) {
+        switch (ix.trigger) {
+            case 'pageLoad':
+                return this.attachPageLoad(node, ix, element);
+            case 'viewportEnter':
+                return this.attachViewportEnter(node, ix, element);
+            case 'click':
+                return this.attachClick(node, ix, element);
+            case 'hover':
+                return this.attachHover(node, ix, element);
+            case 'scrollProgress':
+                // Scroll-progress is complex — deferred.
+                return () => { };
+            default:
+                return () => { };
+        }
+    }
+    // ── Triggers ─────────────────────────────────────────────
+    attachPageLoad(node, ix, element) {
+        // Execute immediately (next microtask to let rendering settle)
+        const timer = setTimeout(() => {
+            this.runActions(node, ix.actions);
+        }, 50);
+        return () => clearTimeout(timer);
+    }
+    attachViewportEnter(node, ix, element) {
+        const firedSet = new Set();
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const key = ix.id;
+                    if (ix.actions.some(a => a.once) && firedSet.has(key))
+                        continue;
+                    firedSet.add(key);
+                    this.runActions(node, ix.actions);
+                }
+            }
+        }, { threshold: 0.1 });
+        observer.observe(element);
+        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);
+        };
+        element.addEventListener('click', handler);
+        return () => element.removeEventListener('click', handler);
+    }
+    attachHover(node, ix, element) {
+        const enterHandler = () => this.runActions(node, ix.actions);
+        const leaveHandler = () => {
+            // Reverse animations on leave for hover triggers
+            for (const action of ix.actions) {
+                const target = this.resolveTarget(node, action);
+                if (!target)
+                    continue;
+                this.reverseAction(target, action);
+            }
+        };
+        element.addEventListener('mouseenter', enterHandler);
+        element.addEventListener('mouseleave', leaveHandler);
+        return () => {
+            element.removeEventListener('mouseenter', enterHandler);
+            element.removeEventListener('mouseleave', leaveHandler);
+        };
+    }
+    // ── Actions ──────────────────────────────────────────────
+    runActions(node, actions) {
+        for (const action of actions) {
+            const target = this.resolveTarget(node, action);
+            if (!target)
+                continue;
+            this.executeAction(target, action);
+        }
+    }
+    resolveTarget(ownerNode, action) {
+        if (action.target === 'self') {
+            const ref = this.overlayService.getNodeRef(ownerNode);
+            return ref?.element ?? null;
+        }
+        // Find by node ID
+        for (const [n, ref] of this.overlayService.getAllNodeEntries()) {
+            if (n.id === action.target)
+                return ref.element;
+        }
+        return null;
+    }
+    executeAction(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        element.animate(keyframes, {
+            duration: action.duration,
+            delay: action.delay,
+            easing: action.easing,
+            fill: 'forwards',
+        });
+    }
+    reverseAction(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        // Reverse: play the keyframes backwards
+        element.animate([...keyframes].reverse(), {
+            duration: action.duration,
+            easing: action.easing,
+            fill: 'forwards',
+        });
+    }
+    buildAnimation(action) {
+        const dist = action.params?.['distance'] ?? 20;
+        let keyframes = [];
+        switch (action.type) {
+            case 'fadeIn':
+                keyframes = [{ opacity: 0 }, { opacity: 1 }];
+                break;
+            case 'fadeOut':
+                keyframes = [{ opacity: 1 }, { opacity: 0 }];
+                break;
+            case 'moveUp':
+                keyframes = [{ transform: `translateY(${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
+                break;
+            case 'moveDown':
+                keyframes = [{ transform: `translateY(-${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
+                break;
+            case 'moveLeft':
+                keyframes = [{ transform: `translateX(${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
+                break;
+            case 'moveRight':
+                keyframes = [{ transform: `translateX(-${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
+                break;
+            case 'scaleIn':
+                keyframes = [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }];
+                break;
+            case 'scaleOut':
+                keyframes = [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }];
+                break;
+            case 'rotate':
+                const deg = action.params?.['degrees'] ?? 360;
+                keyframes = [{ transform: `rotate(0deg)` }, { transform: `rotate(${deg}deg)` }];
+                break;
+            case 'show':
+                keyframes = [{ opacity: 0, visibility: 'hidden' }, { opacity: 1, visibility: 'visible' }];
+                break;
+            case 'hide':
+                keyframes = [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'hidden' }];
+                break;
+            case 'toggleVisibility':
+                // Toggle is stateful — handled separately via element style
+                keyframes = [{ opacity: 0 }, { opacity: 1 }];
+                break;
+        }
+        return {
+            keyframes,
+            options: {
+                duration: action.duration,
+                delay: action.delay,
+                easing: action.easing,
+                fill: 'forwards',
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionEngineService, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionEngineService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: InteractionEngineService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OverlayService }] });
+
+/**
+ * StyleRegistryService — manages a single <style> tag for the builder canvas.
+ *
+ * Each builder component gets a unique CSS class `.iox-node-{id}` applied to its
+ * first inner element. onUpdate() in the style panel calls upsert() to compile
+ * the flat style-trait map into a CSS rule and flush it to the stylesheet.
+ *
+ * This replaces the old [ngStyle] binding, enabling future support for
+ * hover states, breakpoints, and pseudo-selectors without DOM modifications.
+ *
+ * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
+ */
+class StyleRegistryService {
+    constructor() {
+        this.rules = new Map();
+        this.styleEl = null;
+    }
+    init() {
+        this.styleEl = document.createElement('style');
+        this.styleEl.id = 'iox-runtime-styles';
+        document.head.appendChild(this.styleEl);
+    }
+    upsert(nodeId, styles) {
+        if (!nodeId)
+            return;
+        const css = this.compile(nodeId, styles);
+        if (css) {
+            this.rules.set(nodeId, css);
+        }
+        else {
+            this.rules.delete(nodeId);
+        }
+        this.flush();
+    }
+    remove(nodeId) {
+        if (!nodeId)
+            return;
+        this.rules.delete(nodeId);
+        this.flush();
+    }
+    destroy() {
+        this.rules.clear();
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    }
+    compile(nodeId, styles) {
+        const entries = Object.entries(styles)
+            .filter(([, v]) => v !== undefined && v !== null && v !== '')
+            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${v};`);
+        if (!entries.length)
+            return '';
+        return `.iox-node-${nodeId} {\n${entries.join('\n')}\n}`;
+    }
+    toKebabCase(str) {
+        return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+    }
+    flush() {
+        if (!this.styleEl)
+            return;
+        this.styleEl.textContent = Array.from(this.rules.values()).join('\n');
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+// Module-level counter — unique drop-list ID per Section instance across the whole app session.
+let dropListCounter = 0;
+/**
+ * RenderDirective — applied to <ng-container> to dynamically instantiate a
+ * builder component with zero wrapper elements in the DOM.
+ *
+ * A directive's ViewContainerRef inserts the created component's host element as
+ * a sibling of the ng-container comment node — directly inside the parent element
+ * — so the resulting DOM has no extra <app-renderer> wrapper.
+ *
+ * Usage:
+ *   <ng-container [ioxRender]="node"
+ *                 (onClick)="handleClick($event)"
+ *                 (onMouseEnter)="handleMouseEnter($event)"
+ *                 (onMouseLeave)="handleMouseLeave()">
+ *   </ng-container>
+ */
+class RenderDirective {
+    constructor(vcr, injector, registryService, overlayService, styleRegistry, interactionEngine, cdr, panelEventService) {
+        this.vcr = vcr;
+        this.injector = injector;
+        this.registryService = registryService;
+        this.overlayService = overlayService;
+        this.styleRegistry = styleRegistry;
+        this.interactionEngine = interactionEngine;
+        this.cdr = cdr;
+        this.panelEventService = panelEventService;
+        this.ioxRender = null;
+        this.onClick = new EventEmitter();
+        this.onMouseEnter = new EventEmitter();
+        this.onMouseLeave = new EventEmitter();
+        this.childSubs = [];
+    }
+    ngOnInit() {
+        this.render(this.ioxRender);
+    }
+    ngOnDestroy() {
+        this.childSubs.forEach(s => s.unsubscribe());
+        if (this.ioxRender) {
+            this.interactionEngine.detach(this.ioxRender);
+            this.overlayService.unregisterNode(this.ioxRender);
+            // Only remove the CSS rule if this node OWNS it (i.e. it is not a clone).
+            // Clones set styleId to point at the template node's id — removing would
+            // destroy the shared rule and break all other rows.
+            const isClone = !!this.ioxRender.styleId;
+            if (!isClone && this.ioxRender.id) {
+                this.styleRegistry.remove(this.ioxRender.id);
+            }
+        }
+    }
+    /**
+     * Walk up from `target` to find a registered parent component element.
+     * Returns { element, node } if found, or null if the target is outside
+     * all known builder components (e.g. the canvas background).
+     */
+    findParentNodeElement(target) {
+        let el = target;
+        while (el) {
+            const match = this.overlayService.findNodeByElement(el);
+            if (match) {
+                return { element: el, node: match.node };
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    render(node) {
+        if (!node)
+            return;
+        const componentClass = this.registryService.getComponent(node.type);
+        if (!componentClass)
+            return;
+        // vcr.createComponent inserts the new component's host element after the ng-container
+        // comment anchor — directly inside the parent element. No wrapper div is created.
+        const componentRef = this.vcr.createComponent(componentClass, { injector: this.injector });
+        // Apply regular trait defaults (title, image, description, etc.)
+        // Use setInput() (Angular 14+) — it marks the view dirty and
+        // integrates with Angular's CD tracking, unlike direct assignment.
+        Object.values(node.traits || {}).forEach((trait) => {
+            componentRef.setInput(trait.name, trait.default);
+        });
+        // Build initial style map from styleTraits defaults.
+        const initialStyle = {};
+        if (node.styleTraits?.length) {
+            for (const group of node.styleTraits) {
+                for (const trait of group.traits) {
+                    if (trait.default !== undefined) {
+                        initialStyle[trait.name] = trait.default;
+                    }
+                }
+            }
+        }
+        // Use styleId when present (clone nodes share the template node's CSS rule).
+        const cssId = node.styleId ?? node.id;
+        // Register CSS rule in the central stylesheet.
+        if (cssId) {
+            this.styleRegistry.upsert(cssId, initialStyle);
+        }
+        // Set nodeId — declared as @Input() on every builder component.
+        if (cssId) {
+            componentRef.setInput('nodeId', cssId);
+        }
+        // Pass the node reference. 'node' is NOT declared as @Input on leaf
+        // components (Card, Text, etc.) — always use direct assignment to avoid
+        // Angular NG0303 warnings that setInput() would trigger.
+        componentRef.instance['node'] = node;
+        // Layout components (Section/Container) read this.style internally for
+        // CDK drop list orientation. 'style' is not declared as @Input so use
+        // direct assignment; children and dropListId ARE @Input on all layouts.
+        // Guard with Array.isArray so leaf nodes whose serialized data happens
+        // to have a stale/empty children key don't trigger NG0303.
+        const instance = componentRef.instance;
+        if (Array.isArray(node.children) && 'dropListId' in instance) {
+            instance['style'] = { ...initialStyle };
+            componentRef.setInput('children', node.children);
+            componentRef.setInput('dropListId', `section-${++dropListCounter}`);
+        }
+        // Forward child events from layout components (Section → builder)
+        const childClick = instance['childClick'];
+        const childMouseEnter = instance['childMouseEnter'];
+        const childMouseLeave = instance['childMouseLeave'];
+        if (childClick)
+            this.childSubs.push(childClick.subscribe((e) => this.onClick.emit(e)));
+        if (childMouseEnter)
+            this.childSubs.push(childMouseEnter.subscribe((e) => this.onMouseEnter.emit(e)));
+        if (childMouseLeave)
+            this.childSubs.push(childMouseLeave.subscribe(() => this.onMouseLeave.emit()));
+        componentRef.changeDetectorRef.detectChanges();
+        // Attach overlay-driven DOM event listeners directly on the component host element.
+        // For layout components the host element is <app-section>; for leaf components
+        // it is e.g. <app-card>. Either way this is the correct inspectable element.
+        const nativeEl = componentRef.location?.nativeElement ?? null;
+        // Custom element host defaults to display:inline. Set it to block so it
+        // participates properly in layout and CDK can capture its bounding rect.
+        if (nativeEl) {
+            nativeEl.style.display = 'block';
+        }
+        if (nativeEl) {
+            // Register node → element mapping for parent lookups
+            this.overlayService.registerNode(node, nativeEl, componentRef);
+            // Notify BindingsComponent so it re-applies bindings on the new
+            // ComponentRef — needed after cross-container drag where Angular
+            // creates a fresh instance that hasn't had bindings pushed to it yet.
+            this.panelEventService.emit(PanelEventTypes.NODE_RENDERED, { node });
+            nativeEl.addEventListener('mouseenter', (event) => {
+                if (event._fromClick)
+                    return;
+                this.onMouseEnter.emit({ element: nativeEl, node });
+            });
+            nativeEl.addEventListener('mouseleave', (event) => {
+                // When leaving a child component, check if the mouse moved to a
+                // parent component (e.g. card → section). If so, emit mouseenter
+                // for that parent instead of clearing hover entirely.
+                const related = event.relatedTarget;
+                if (related) {
+                    const parentEntry = this.findParentNodeElement(related);
+                    if (parentEntry) {
+                        this.onMouseEnter.emit(parentEntry);
+                        return;
+                    }
+                }
+                this.onMouseLeave.emit();
+            });
+            nativeEl.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.onClick.emit({ element: nativeEl, node, componentRef });
+            });
+        }
+        // Wire up interactions (animations) after the element is in the DOM.
+        this.interactionEngine.attach(node);
+    }
+    /** Try setInput(); fall back to direct assignment for non-@Input properties. */
+    safeSetInput(ref, name, value) {
+        try {
+            ref.setInput(name, value);
+        }
+        catch {
+            ref.instance[name] = value;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: ComponentRegistryService }, { token: OverlayService }, { token: StyleRegistryService }, { token: InteractionEngineService }, { token: i0.ChangeDetectorRef }, { token: PanelEventService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: RenderDirective, isStandalone: false, selector: "[ioxRender]", inputs: { ioxRender: "ioxRender" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ioxRender]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: ComponentRegistryService }, { type: OverlayService }, { type: StyleRegistryService }, { type: InteractionEngineService }, { type: i0.ChangeDetectorRef }, { type: PanelEventService }], propDecorators: { ioxRender: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: Output
+            }], onMouseLeave: [{
+                type: Output
+            }] } });
+
+class IoxDraggableDirective {
+    constructor(el, dragEngine) {
+        this.el = el;
+        this.dragEngine = dragEngine;
+        /** The node (for canvas items) or component type string (for sidebar items). */
+        this.ioxDragData = '';
+        /** Drop-zone id the item lives in. Null for sidebar items. */
+        this.ioxDragSourceId = null;
+    }
+    ngOnInit() {
+        this.dragEngine.registerDraggable(this.el.nativeElement, () => {
+            const data = this.ioxDragData;
+            const type = typeof data === 'string' ? 'external' : 'internal';
+            const sourceIndex = type === 'internal' && this.ioxDragSourceId
+                ? (this.dragEngine.getData(this.ioxDragSourceId)?.indexOf(data) ?? -1)
+                : -1;
+            return { type, data, sourceId: this.ioxDragSourceId, sourceIndex };
+        });
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDraggable(this.el.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDraggableDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDraggableDirective, isStandalone: false, selector: "[ioxDraggable]", inputs: { ioxDragData: "ioxDragData", ioxDragSourceId: "ioxDragSourceId" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ioxDraggable]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }], propDecorators: { ioxDragData: [{
+                type: Input
+            }], ioxDragSourceId: [{
+                type: Input
+            }] } });
+
+class OverlayComponent {
+    constructor(overlayService, viewportService, cdr) {
+        this.overlayService = overlayService;
+        this.viewportService = viewportService;
+        this.cdr = cdr;
+        this.toolbarAction = new EventEmitter();
+        this.hoverEntry = null;
+        this.selectEntry = null;
+        // Hover: Chrome DevTools-style ring layers (clip-path punches out content area)
+        this.hiOutlineStyle = {};
+        this.hiMarginStyle = {};
+        this.hiPaddingStyle = {};
+        // Select: simple IOX pink outline
+        this.selectOutlineStyle = {};
+        // More dropdown (toolbar ⋯ button)
+        this.moreMenuVisible = false;
+        // Right-click context menu
+        this.contextMenuVisible = false;
+        this.contextMenuStyle = {};
+        this.subs = [];
+        this.boundUpdate = () => this.updateAll();
+        this.activeScrollContainer = null;
+    }
+    ngOnInit() {
+        this.subs.push(this.overlayService.hover$.subscribe(entry => {
+            this.hoverEntry = entry;
+            this.updateHover();
+            this.cdr.markForCheck();
+        }), this.overlayService.select$.subscribe(entry => {
+            this.selectEntry = entry;
+            this.observeSelectElement();
+            this.updateSelect();
+            this.cdr.markForCheck();
+        }));
+        window.addEventListener('resize', this.boundUpdate, { passive: true });
+        // Re-calculate overlay positions whenever zoom / device changes.
+        this.subs.push(this.viewportService.state$.subscribe(() => {
+            // Delay one frame so the DOM has applied the new transform/width.
+            requestAnimationFrame(() => this.updateAll());
+        }));
+        // Watch the canvas container for size changes (e.g. right panel open/close
+        // transition changes canvas width, shifting element positions).
+        const container = this.overlayService.getContainer();
+        if (container) {
+            if (typeof ResizeObserver !== 'undefined') {
+                this.containerResizeObserver = new ResizeObserver(() => this.updateAll());
+                this.containerResizeObserver.observe(container);
+            }
+        }
+        // iox-page-component's Lenis dispatches a synthetic 'scroll' event on
+        // its wrapper element after each raf tick — listen to that to reposition
+        // overlay boxes as the canvas scrolls.
+        this.subs.push(this.overlayService.scrollContainer$.subscribe(el => {
+            this.activeScrollContainer?.removeEventListener('scroll', this.boundUpdate);
+            this.activeScrollContainer = el;
+            el.addEventListener('scroll', this.boundUpdate, { passive: true });
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.forEach(s => s.unsubscribe());
+        this.resizeObserver?.disconnect();
+        this.containerResizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        window.removeEventListener('resize', this.boundUpdate);
+        this.activeScrollContainer?.removeEventListener('scroll', this.boundUpdate);
+        this.activeScrollContainer = null;
+    }
+    // ── Toolbar actions ──────────────────────────────────────
+    onSelectParent(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.SelectParent, entry: this.selectEntry });
+    }
+    onDuplicate(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.Duplicate, entry: this.selectEntry });
+    }
+    onDelete(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.Delete, entry: this.selectEntry });
+    }
+    onPlay(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.Play, entry: this.selectEntry });
+    }
+    onSaveAsBlock(event) {
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.SaveAsBlock, entry: this.selectEntry });
+    }
+    onToggleMore(event) {
+        event.stopPropagation();
+        this.moreMenuVisible = !this.moreMenuVisible;
+        this.cdr.markForCheck();
+    }
+    closeMoreMenu() {
+        this.moreMenuVisible = false;
+        this.cdr.markForCheck();
+    }
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextMenuStyle = {
+            position: 'fixed',
+            top: `${event.clientY}px`,
+            left: `${event.clientX}px`,
+        };
+        this.contextMenuVisible = true;
+        this.cdr.markForCheck();
+    }
+    onContextSaveAsBlock(event) {
+        event.stopPropagation();
+        this.closeContextMenu();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.SaveAsBlock, entry: this.selectEntry });
+    }
+    closeContextMenu() {
+        this.contextMenuVisible = false;
+        this.cdr.markForCheck();
+    }
+    get hasInteractions() {
+        return !!this.selectEntry?.node?.interactions?.length;
+    }
+    observeSelectElement() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        // Scroll listener is on the container permanently (attached in ngOnInit).
+        // No need to re-attach it here.
+        if (!this.selectEntry?.element)
+            return;
+        // Observe the inner styled element — that's where [ngStyle] applies CSS.
+        const styledEl = this.overlayService.getStyledElement(this.selectEntry.element);
+        // ResizeObserver — catches size changes.
+        // Skip the first callback: it fires synchronously on observe() in the same
+        // microtask as the select$ subscription which already calls updateAll().
+        // Painting twice in one frame causes a visible flicker.
+        if (typeof ResizeObserver !== 'undefined') {
+            let skipFirst = true;
+            this.resizeObserver = new ResizeObserver(() => {
+                if (skipFirst) {
+                    skipFirst = false;
+                    return;
+                }
+                this.updateAll();
+            });
+            this.resizeObserver.observe(styledEl);
+        }
+        // MutationObserver — catches style attribute changes (margin, padding etc.)
+        this.mutationObserver = new MutationObserver(() => this.updateAll());
+        this.mutationObserver.observe(styledEl, {
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+    }
+    updateAll() {
+        this.updateHover();
+        this.updateSelect();
+        this.cdr.markForCheck();
+    }
+    updateHover() {
+        if (!this.hoverEntry?.boxModel) {
+            this.hiOutlineStyle = {};
+            this.hiMarginStyle = {};
+            this.hiPaddingStyle = {};
+            return;
+        }
+        const styledEl = this.overlayService.getStyledElement(this.hoverEntry.element);
+        const rect = styledEl.getBoundingClientRect();
+        const { margin, border, padding } = this.hoverEntry.boxModel;
+        // All overlay boxes use position:fixed with raw viewport coords from
+        // getBoundingClientRect() — no container offset subtraction.
+        // This matches the approach used by the drop-target overlay and the drag
+        // clone, both of which position correctly at any zoom level.
+        // Using cRect subtraction + position:absolute inside .preview (which has
+        // contain:layout paint) caused sub-pixel accumulation errors at zoom != 100%.
+        const scale = this.viewportService.getScale();
+        // Scale the spacing values: getComputedStyle returns unscaled CSS px,
+        // getBoundingClientRect returns scaled viewport px. Both must match.
+        const m = {
+            top: margin.top * scale,
+            right: margin.right * scale,
+            bottom: margin.bottom * scale,
+            left: margin.left * scale,
+        };
+        const mW = rect.width + m.left + m.right;
+        const mH = rect.height + m.top + m.bottom;
+        this.hiOutlineStyle = this.createBoxStyle(rect.top, rect.left, rect.width, rect.height);
+        // Orange ring: margin-box with border-box punched out
+        this.hiMarginStyle = {
+            ...this.createBoxStyle(rect.top - m.top, rect.left - m.left, mW, mH),
+            'clip-path': this.createRingClipPath(mW, mH, m.top, m.right, m.bottom, m.left),
+        };
+        // Green ring: border-box with content-box punched out
+        const bpTop = (border.top + padding.top) * scale;
+        const bpRight = (border.right + padding.right) * scale;
+        const bpBottom = (border.bottom + padding.bottom) * scale;
+        const bpLeft = (border.left + padding.left) * scale;
+        this.hiPaddingStyle = {
+            ...this.createBoxStyle(rect.top, rect.left, rect.width, rect.height),
+            'clip-path': this.createRingClipPath(rect.width, rect.height, bpTop, bpRight, bpBottom, bpLeft),
+        };
+    }
+    updateSelect() {
+        if (!this.selectEntry) {
+            this.selectOutlineStyle = {};
+            return;
+        }
+        const styledEl = this.overlayService.getStyledElement(this.selectEntry.element);
+        const rect = styledEl.getBoundingClientRect();
+        // position:fixed with raw viewport coords — same reasoning as updateHover.
+        this.selectOutlineStyle = this.createBoxStyle(rect.top, rect.left, rect.width, rect.height);
+    }
+    /** Build position/size styles for a position:fixed overlay box. */
+    createBoxStyle(top, left, width, height) {
+        return {
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${Math.max(width, 0)}px`,
+            height: `${Math.max(height, 0)}px`,
+        };
+    }
+    createRingClipPath(w, h, inTop, inRight, inBottom, inLeft) {
+        const x1 = Math.max(inLeft, 0);
+        const y1 = Math.max(inTop, 0);
+        const x2 = Math.max(w - inRight, x1);
+        const y2 = Math.max(h - inBottom, y1);
+        // Each sub-rect must be explicitly closed so the bridge between them
+        // is a zero-area line — prevents diagonal edge triangle artifacts.
+        return `polygon(evenodd, 0px 0px, ${w}px 0px, ${w}px ${h}px, 0px ${h}px, 0px 0px, ${x1}px ${y1}px, ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px)`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayComponent, deps: [{ token: OverlayService }, { token: ViewportService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"] }]
+        }], ctorParameters: () => [{ type: OverlayService }, { type: ViewportService }, { type: i0.ChangeDetectorRef }], propDecorators: { toolbarAction: [{
+                type: Output
+            }] } });
+
+class ToolbarComponent {
+    constructor() {
+        this.activeMode = BuilderMode.Select;
+        this.activeDevice = DeviceMode.Desktop;
+        this.activeZoom = 100;
+        this.canUndo = false;
+        this.canRedo = false;
+        this.isSaving = false;
+        this.pageStatus = 'draft';
+        this.modeChange = new EventEmitter();
+        this.deviceChange = new EventEmitter();
+        this.zoomChange = new EventEmitter();
+        this.undo = new EventEmitter();
+        this.redo = new EventEmitter();
+        this.save = new EventEmitter();
+        this.preview = new EventEmitter();
+        this.publishToggle = new EventEmitter();
+        this.modes = BuilderMode;
+        this.deviceOptions = DEVICE_OPTIONS;
+        this.zoomOptions = ZOOM_OPTIONS;
+    }
+    get isPublished() {
+        return this.pageStatus === 'published';
+    }
+    get activeModeIcon() {
+        switch (this.activeMode) {
+            case BuilderMode.Select: return 'ph-thin ph-cursor';
+            case BuilderMode.Style: return 'ph-thin ph-paint-brush-broad';
+            case BuilderMode.Pan: return 'ph-thin ph-hand';
+            default: return 'ph-thin ph-cursor';
+        }
+    }
+    get activeModeLabel() {
+        switch (this.activeMode) {
+            case BuilderMode.Select: return 'Select';
+            case BuilderMode.Style: return 'Style';
+            case BuilderMode.Pan: return 'Pan';
+            default: return 'Select';
+        }
+    }
+    get activeDeviceOption() {
+        return this.deviceOptions.find(d => d.mode === this.activeDevice) || this.deviceOptions[0];
+    }
+    get zoomLabel() {
+        return `${this.activeZoom}%`;
+    }
+    // ── Mode ────────────────────────────────────────────────
+    toggleModePopover(event) {
+        this.modePopover.toggle(event);
+    }
+    selectMode(mode) {
+        if (this.activeMode !== mode) {
+            this.modeChange.emit(mode);
+        }
+        this.modePopover.hide();
+    }
+    // ── Device ──────────────────────────────────────────────
+    toggleDevicePopover(event) {
+        this.devicePopover.toggle(event);
+    }
+    selectDevice(mode) {
+        if (this.activeDevice !== mode) {
+            this.deviceChange.emit(mode);
+        }
+        this.devicePopover.hide();
+    }
+    // ── Zoom ────────────────────────────────────────────────
+    toggleZoomPopover(event) {
+        this.zoomPopover.toggle(event);
+    }
+    selectZoom(value) {
+        this.zoomChange.emit(value);
+        this.zoomPopover.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ToolbarComponent, isStandalone: false, selector: "app-toolbar", inputs: { activeMode: "activeMode", activeDevice: "activeDevice", activeZoom: "activeZoom", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus" }, outputs: { modeChange: "modeChange", deviceChange: "deviceChange", zoomChange: "zoomChange", undo: "undo", redo: "redo", save: "save", preview: "preview", publishToggle: "publishToggle" }, viewQueries: [{ propertyName: "modePopover", first: true, predicate: ["modePopover"], descendants: true }, { propertyName: "devicePopover", first: true, predicate: ["devicePopover"], descendants: true }, { propertyName: "zoomPopover", first: true, predicate: ["zoomPopover"], descendants: true }], ngImport: i0, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Device switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleDevicePopover($event)\"\n            [title]=\"activeDeviceOption.label\">\n        <i [class]=\"activeDeviceOption.icon\"></i>\n    </button>\n\n    <p-popover #devicePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let d of deviceOptions\"\n                    [class.is-active]=\"activeDevice === d.mode\"\n                    (click)=\"selectDevice(d.mode)\">\n                <i [class]=\"d.icon\"></i>\n                <span>{{ d.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let z of zoomOptions\"\n                    [class.is-active]=\"z.value === activeZoom\"\n                    (click)=\"selectZoom(z.value)\">\n                <span>{{ z.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.25rem;background:#0f172ae0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,.2);border-radius:999px;padding:.3rem .5rem;box-shadow:0 8px 24px #0f172a47}.divider{width:1px;height:1.25rem;background:#94a3b833;margin:0 .2rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:none;background:transparent;color:#ffffffbf;cursor:pointer;font-size:1.1rem;transition:background .15s,color .15s}.tool-btn:hover:not(:disabled){background:#ffffff1f;color:#fff}.tool-btn:disabled{opacity:.3;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:2px;width:4px;height:4px;border-radius:50%;background:#cb9090;opacity:.6}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:color-mix(in srgb,#cb9090 85%,#fff);color:#fff}.save-btn.is-saving{opacity:.7}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#fff);color:#fff}.publish-btn.is-published{background:transparent;color:#94a3b8;border:1px solid rgba(255,255,255,.15)}.publish-btn.is-published:hover:not(:disabled){background:#ef444426;color:#f87171;border-color:#ef44444d}.preview-btn{color:#ffffffbf;border:1px solid rgba(255,255,255,.15)}.preview-btn:hover:not(:disabled){background:#ffffff1a;color:#fff;border-color:#ffffff40}::ng-deep .toolbar-popover .p-popover-content{padding:.3rem!important;background:#0f172ae0!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.2)!important;border-radius:12px!important;box-shadow:0 12px 32px #0f172a59!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:#ffffffbf;cursor:pointer;font-size:.8rem;border-radius:8px;transition:background .12s,color .12s;white-space:nowrap}.popover-option i{font-size:1rem}.popover-option:hover{background:#ffffff1a;color:#fff}.popover-option.is-active{background:#cb9090;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toolbar', standalone: false, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Device switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleDevicePopover($event)\"\n            [title]=\"activeDeviceOption.label\">\n        <i [class]=\"activeDeviceOption.icon\"></i>\n    </button>\n\n    <p-popover #devicePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let d of deviceOptions\"\n                    [class.is-active]=\"activeDevice === d.mode\"\n                    (click)=\"selectDevice(d.mode)\">\n                <i [class]=\"d.icon\"></i>\n                <span>{{ d.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let z of zoomOptions\"\n                    [class.is-active]=\"z.value === activeZoom\"\n                    (click)=\"selectZoom(z.value)\">\n                <span>{{ z.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.25rem;background:#0f172ae0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,.2);border-radius:999px;padding:.3rem .5rem;box-shadow:0 8px 24px #0f172a47}.divider{width:1px;height:1.25rem;background:#94a3b833;margin:0 .2rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:none;background:transparent;color:#ffffffbf;cursor:pointer;font-size:1.1rem;transition:background .15s,color .15s}.tool-btn:hover:not(:disabled){background:#ffffff1f;color:#fff}.tool-btn:disabled{opacity:.3;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:2px;width:4px;height:4px;border-radius:50%;background:#cb9090;opacity:.6}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:color-mix(in srgb,#cb9090 85%,#fff);color:#fff}.save-btn.is-saving{opacity:.7}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#fff);color:#fff}.publish-btn.is-published{background:transparent;color:#94a3b8;border:1px solid rgba(255,255,255,.15)}.publish-btn.is-published:hover:not(:disabled){background:#ef444426;color:#f87171;border-color:#ef44444d}.preview-btn{color:#ffffffbf;border:1px solid rgba(255,255,255,.15)}.preview-btn:hover:not(:disabled){background:#ffffff1a;color:#fff;border-color:#ffffff40}::ng-deep .toolbar-popover .p-popover-content{padding:.3rem!important;background:#0f172ae0!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.2)!important;border-radius:12px!important;box-shadow:0 12px 32px #0f172a59!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:#ffffffbf;cursor:pointer;font-size:.8rem;border-radius:8px;transition:background .12s,color .12s;white-space:nowrap}.popover-option i{font-size:1rem}.popover-option:hover{background:#ffffff1a;color:#fff}.popover-option.is-active{background:#cb9090;color:#fff}\n"] }]
+        }], propDecorators: { activeMode: [{
+                type: Input
+            }], activeDevice: [{
+                type: Input
+            }], activeZoom: [{
+                type: Input
+            }], canUndo: [{
+                type: Input
+            }], canRedo: [{
+                type: Input
+            }], isSaving: [{
+                type: Input
+            }], pageStatus: [{
+                type: Input
+            }], modeChange: [{
+                type: Output
+            }], deviceChange: [{
+                type: Output
+            }], zoomChange: [{
+                type: Output
+            }], undo: [{
+                type: Output
+            }], redo: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], preview: [{
+                type: Output
+            }], publishToggle: [{
+                type: Output
+            }], modePopover: [{
+                type: ViewChild,
+                args: ['modePopover']
+            }], devicePopover: [{
+                type: ViewChild,
+                args: ['devicePopover']
+            }], zoomPopover: [{
+                type: ViewChild,
+                args: ['zoomPopover']
+            }] } });
+
+class LayerTreeComponent {
+    constructor(registry, overlayService) {
+        this.registry = registry;
+        this.overlayService = overlayService;
+        this.layout = [];
+        this.nodeSelect = new EventEmitter();
+        this.nodeAction = new EventEmitter();
+        this.nodeMove = new EventEmitter();
+        this.flatTree = [];
+        this.selectedNodeId = null;
+        this.hoveredNodeId = null;
+        /** Cache: component type → icon class */
+        this.iconMap = new Map();
+        /** Last-seen structural signature — used by ngDoCheck to skip no-op rebuilds. */
+        this._layoutSig = '';
+        this.expandedState = new Map();
+    }
+    ngOnInit() {
+        this.buildIconMap();
+        this.rebuild();
+        this.selectSub = this.overlayService.select$.subscribe(entry => {
+            this.selectedNodeId = entry?.node?.id ?? null;
+        });
+    }
+    ngOnDestroy() {
+        this.selectSub?.unsubscribe();
+    }
+    // Runs on every CD cycle — exit immediately if structure hasn't changed.
+    ngDoCheck() {
+        const sig = this.sig(this.layout);
+        if (sig !== this._layoutSig) {
+            this._layoutSig = sig;
+            this.rebuild();
+        }
+    }
+    /** Cheap structural signature: node IDs + nesting depth only. */
+    sig(nodes) {
+        return nodes.map(n => (n.id ?? n.type) + (n.children?.length ? '{' + this.sig(n.children) + '}' : '')).join(',');
+    }
+    onNodeClick(treeNode) {
+        const node = treeNode.node;
+        this.selectedNodeId = node.id ?? null;
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            this.overlayService.setSelect(ref.element, node.type, BuilderMode.Select, node, ref.componentRef);
+            // Scroll the element into view on the canvas
+            ref.element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+        this.nodeSelect.emit(node);
+    }
+    onNodeMouseEnter(treeNode) {
+        this.hoveredNodeId = treeNode.node.id ?? null;
+        const ref = this.overlayService.getNodeRef(treeNode.node);
+        if (ref) {
+            this.overlayService.setHover(ref.element, treeNode.node.type, BuilderMode.Select);
+        }
+    }
+    onNodeMouseLeave() {
+        this.hoveredNodeId = null;
+        this.overlayService.clearHover();
+    }
+    toggleExpand(treeNode, event) {
+        event.stopPropagation();
+        treeNode.expanded = !treeNode.expanded;
+    }
+    onDeleteNode(treeNode, event) {
+        event.stopPropagation();
+        this.nodeAction.emit({ action: NodeAction.Delete, node: treeNode.node });
+    }
+    onDuplicateNode(treeNode, event) {
+        event.stopPropagation();
+        this.nodeAction.emit({ action: NodeAction.Duplicate, node: treeNode.node });
+    }
+    /**
+     * CDK drop handler for tree reorder.
+     * Works on the flat tree indices — maps back to parent arrays to do the move.
+     */
+    onTreeDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const draggedTreeNode = this.flatTree[event.previousIndex];
+        if (!draggedTreeNode)
+            return;
+        const targetTreeNode = this.flatTree[event.currentIndex];
+        if (!targetTreeNode)
+            return;
+        // Remove from source parent
+        const srcArray = draggedTreeNode.parentArray;
+        const srcIdx = draggedTreeNode.indexInParent;
+        srcArray.splice(srcIdx, 1);
+        // Determine destination: insert at the same position as the target node in its parent.
+        // If dropping after the target, adjust index.
+        const destArray = targetTreeNode.parentArray;
+        let destIdx = targetTreeNode.indexInParent;
+        // If dragging downward (previousIndex < currentIndex), the target index
+        // may have shifted because we already removed the item from source.
+        // If source and destination are the same array and srcIdx < destIdx, adjust.
+        if (srcArray === destArray && srcIdx < destIdx) {
+            destIdx--;
+        }
+        destArray.splice(destIdx, 0, draggedTreeNode.node);
+        // Rebuild tree and notify builder
+        this.rebuild();
+        this.nodeMove.emit();
+    }
+    // ── Internals ────────────────────────────────────────────
+    /** Build a type→icon lookup from the registry so we don't instantiate configs per node. */
+    buildIconMap() {
+        for (const entry of this.registry.getAll()) {
+            const instance = new entry.config();
+            this.iconMap.set(entry.type, instance.icon || 'ph-thin ph-cube');
+        }
+    }
+    rebuild() {
+        // Save expanded state
+        for (const tn of this.flatTree) {
+            if (tn.node.id) {
+                this.expandedState.set(tn.node.id, tn.expanded);
+            }
+        }
+        const next = [];
+        this.flattenTree(this.layout, 0, next);
+        this.flatTree = next;
+    }
+    flattenTree(nodes, depth, out, parentArr) {
+        const arr = parentArr ?? nodes;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const hasChildren = !!(node.children && node.children.length);
+            const expanded = node.id ? (this.expandedState.get(node.id) ?? true) : true;
+            const treeNode = {
+                node,
+                icon: this.iconMap.get(node.type) || 'ph-thin ph-cube',
+                label: node.type,
+                depth,
+                expanded,
+                hasChildren,
+                parentArray: arr,
+                indexInParent: i,
+            };
+            out.push(treeNode);
+            if (node.children && expanded) {
+                this.flattenTree(node.children, depth + 1, out, node.children);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LayerTreeComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LayerTreeComponent, isStandalone: false, selector: "app-layer-tree", inputs: { layout: "layout" }, outputs: { nodeSelect: "nodeSelect", nodeAction: "nodeAction", nodeMove: "nodeMove" }, ngImport: i0, template: "<div class=\"layer-tree\">\n    <div class=\"tree-header\">\n        <h3 class=\"panel-title\">Layers</h3>\n    </div>\n\n    <div class=\"tree-body\"\n         cdkDropList\n         [cdkDropListData]=\"flatTree\"\n         (cdkDropListDropped)=\"onTreeDrop($event)\">\n        <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-tree-structure\"></i>\n            <span>No layers yet</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatTree\"\n             class=\"tree-row\"\n             cdkDrag\n             [cdkDragData]=\"tn\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <!-- Drag handle indicator -->\n            <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n            <!-- Expand/collapse toggle -->\n            <button *ngIf=\"tn.hasChildren\"\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <!-- Icon + Label -->\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <span class=\"node-label\">{{ tn.label }}</span>\n\n            <!-- Actions (visible on hover) -->\n            <span class=\"node-actions\">\n                <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                </button>\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .tree-header .panel-title{margin:0;font-size:13px;font-weight:600;text-transform:capitalize}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LayerTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-layer-tree', standalone: false, template: "<div class=\"layer-tree\">\n    <div class=\"tree-header\">\n        <h3 class=\"panel-title\">Layers</h3>\n    </div>\n\n    <div class=\"tree-body\"\n         cdkDropList\n         [cdkDropListData]=\"flatTree\"\n         (cdkDropListDropped)=\"onTreeDrop($event)\">\n        <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-tree-structure\"></i>\n            <span>No layers yet</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatTree\"\n             class=\"tree-row\"\n             cdkDrag\n             [cdkDragData]=\"tn\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <!-- Drag handle indicator -->\n            <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n            <!-- Expand/collapse toggle -->\n            <button *ngIf=\"tn.hasChildren\"\n                    class=\"expand-btn\"\n                    (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <!-- Icon + Label -->\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <span class=\"node-label\">{{ tn.label }}</span>\n\n            <!-- Actions (visible on hover) -->\n            <span class=\"node-actions\">\n                <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                </button>\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{padding:.75rem 1rem;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .tree-header .panel-title{margin:0;font-size:13px;font-weight:600;text-transform:capitalize}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }], propDecorators: { layout: [{
+                type: Input
+            }], nodeSelect: [{
+                type: Output
+            }], nodeAction: [{
+                type: Output
+            }], nodeMove: [{
+                type: Output
+            }] } });
+
+class BuilderComponent {
+    // Type-safe event forwarding for toolbar outputs
+    handleToolbarModeChange(mode) {
+        this.onModeChange(mode);
+    }
+    handleToolbarDeviceChange(device) {
+        this.onDeviceChange(device);
+    }
+    handleToolbarZoomChange(value) {
+        this.onZoomChange(value);
+    }
+    /** Canvas width in CSS pixels (driven by ViewportService). */
+    get viewportWidth() {
+        return this.viewportService.getState().width;
+    }
+    /** Visual (scaled) canvas width — used to size the scroll container so the
+     *  scrollbar aligns with the right edge of the canvas, not the CMS shell. */
+    get viewportScaledWidth() {
+        const s = this.viewportService.getState().scale;
+        return Math.round(this.viewportWidth * s);
+    }
+    /** CSS transform for the visual canvas.
+     *  Includes translateX(-50%) for centering because iox-page-component is
+     *  position:absolute; left:50% inside .preview-lenis-content. */
+    get viewportTransform() {
+        const s = this.viewportService.getState().scale;
+        const parts = ['translateX(-50%)'];
+        if (this.panX !== 0 || this.panY !== 0)
+            parts.push(`translate(${this.panX}px, ${this.panY}px)`);
+        if (s !== 1)
+            parts.push(`scale(${s})`);
+        return parts.join(' ');
+    }
+    /**
+     * Height of the Lenis content proxy div (realContentHeight × scale).
+     * Lenis scrolls against this value so scroll range is always in visual px,
+     * not unscaled CSS px — correct at any zoom level.
+     */
+    get scaledContentHeight() {
+        const s = this.viewportService.getState().scale;
+        return Math.round(this.canvasContentHeight * s);
+    }
+    /**
+     * The canvas min-height simulates a real browser viewport.
+     * We subtract the builder header (~49px) and some padding from window.innerHeight.
+     */
+    get canvasMinHeight() {
+        return Math.max(400, window.innerHeight - 80);
+    }
+    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, interactionEngine, cdr, appRef) {
+        this.registry = registry;
+        this.overlayService = overlayService;
+        this.panelEventService = panelEventService;
+        this.dragEngine = dragEngine;
+        this.dsRegistry = dsRegistry;
+        this.viewportService = viewportService;
+        this.interactionEngine = interactionEngine;
+        this.cdr = cdr;
+        this.appRef = appRef;
+        this.layout = [];
+        this.dataSources = [];
+        this.orgId = 'default';
+        this.routeParams = [];
+        this.pageName = '';
+        this.isSaving = false;
+        this.pageStatus = 'draft';
+        this.pageSettings = null;
+        this.save = new EventEmitter();
+        this.back = new EventEmitter();
+        this.preview = new EventEmitter();
+        this.publishToggle = new EventEmitter();
+        this.pageSettingsChange = new EventEmitter();
+        this.applyAnimationToAll = new EventEmitter();
+        this.saveBlock = new EventEmitter();
+        this.components = [];
+        this.activePanel = PanelTypes.STYLES;
+        this.isPanelOpen = false;
+        this.panelTypes = PanelTypes;
+        this.activeMode = BuilderMode.Select;
+        this.builderModes = BuilderMode;
+        this.activeDevice = DeviceMode.Desktop;
+        this.activeZoom = 100;
+        this.selectedItem = null;
+        this.isDragging = false;
+        this.scrollThumbTop = 0; // px from top of track
+        this.scrollThumbHeight = 0; // px height of thumb
+        this.isScrollbarVisible = false;
+        this.scrollbarTranslate = 0; // counteracts Lenis wrapper scrollTop shifting position:absolute children
+        this.activeSidebar = 'components';
+        this.showSaveBlockDialog = false;
+        this.saveBlockName = '';
+        this.pendingBlockNode = null;
+        this.isPanning = false;
+        this.panX = 0;
+        this.panY = 0;
+        this.panStartX = 0;
+        this.panStartY = 0;
+        this.panOriginX = 0;
+        this.panOriginY = 0;
+        this.hoverHideRaf = 0;
+        this.canvasContentHeight = 0;
+        this._scrollbarTimer = null;
+    }
+    ngOnInit() {
+        this.components = this.registry.getAll();
+        this.dsRegistry.setDataSources(this.dataSources);
+        this.dragEngine.setScale(this.viewportService.getScale());
+        this.sub = this.panelEventService.subscribe((panelEvent) => this.handlePanelEvents(panelEvent));
+        this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
+        this.dragEngine.isDragging$.subscribe((v) => {
+            this.isDragging = v;
+            this.cdr.markForCheck();
+        });
+        this.viewportSub = this.viewportService.state$.subscribe(state => {
+            this.activeDevice = state.device;
+            this.activeZoom = Math.round(state.scale * 100);
+            this.dragEngine.setScale(state.scale);
+            // scaledContentHeight changes with scale — flush DOM first so
+            // .preview-lenis-content has its new height before Lenis reads it.
+            this.cdr.detectChanges();
+            this.lenis?.resize();
+            // iox-page-component has transition:0.25s — overlay positions are stale
+            // until the transform animation completes. Re-fire after the transition.
+            setTimeout(() => this.overlayService.refreshSelect(), 270);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['pageSettings']) {
+            // Reinit Lenis with updated scroll options (lerp, wheelMultiplier, etc.)
+            // so the builder preview reflects the live-page scroll feel in real time.
+            this.initLenis();
+        }
+    }
+    ngAfterViewInit() {
+        this.overlayService.setContainer(this.previewCanvas?.nativeElement || null);
+        // Builder dispatches synthetic 'scroll' events on .preview-lenis-content from
+        // the Lenis callback — point the overlay scroll listener at that element.
+        // (Not previewScrollRef which is the Lenis eventsTarget — dispatching there
+        // would cause Lenis to re-fire its scroll handler → infinite loop.)
+        this.overlayService.setScrollContainer(this.lenisContentRef?.nativeElement || null);
+        // Register the root canvas as a dropzone.
+        const canvasEl = document.getElementById('canvas-preview');
+        if (canvasEl) {
+            this.dragEngine.registerDropzone('canvas-preview', canvasEl, this.layout, this.cdr, (evt) => this.onDrop(evt));
+            // Track canvas content height so scaledContentHeight (= height × scale)
+            // keeps the Lenis content proxy correctly sized at any zoom level.
+            this.canvasRo = new ResizeObserver(entries => {
+                const h = entries[0]?.contentRect.height ?? 0;
+                if (h !== this.canvasContentHeight) {
+                    this.canvasContentHeight = h;
+                    this.cdr.detectChanges();
+                    this.lenis?.resize();
+                }
+            });
+            this.canvasRo.observe(canvasEl);
+        }
+        this.initLenis();
+        setTimeout(() => this.appRef.tick());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this.registrySub?.unsubscribe();
+        this.viewportSub?.unsubscribe();
+        this.destroyLenis();
+        this.canvasRo?.disconnect();
+        this.overlayService.setContainer(null);
+        this.overlayService.setScrollContainer(null);
+        const canvasEl = document.getElementById('canvas-preview');
+        if (canvasEl) {
+            this.dragEngine.unregisterDropzone('canvas-preview', canvasEl);
+        }
+    }
+    initLenis() {
+        this.destroyLenis();
+        if (!this.previewScrollRef?.nativeElement || !this.lenisContentRef?.nativeElement)
+            return;
+        const s = this.pageSettings?.scroll;
+        this.lenis = new Lenis({
+            wrapper: this.previewScrollRef.nativeElement,
+            content: this.lenisContentRef.nativeElement,
+            eventsTarget: this.previewScrollRef.nativeElement,
+            lerp: s?.lerp ?? 0.1,
+            wheelMultiplier: s?.wheelMultiplier ?? 1,
+            touchMultiplier: s?.touchMultiplier ?? 1,
+            orientation: s?.direction ?? 'vertical',
+            infinite: s?.infinite ?? false,
+            autoResize: false, // we drive resize() manually via canvasRo + viewportSub
+        });
+        this.lenis.on('scroll', (instance) => {
+            const clientH = this.previewScrollRef.nativeElement.clientHeight;
+            this.onPageScroll({
+                scrollTop: instance.scroll,
+                scrollHeight: instance.limit + clientH,
+                clientHeight: clientH,
+                scrollPercentage: instance.progress * 100,
+            });
+            // Notify overlay to reposition boxes on each scroll tick.
+            // Dispatch on lenisContent (not previewScrollRef/eventsTarget) to avoid
+            // Lenis re-consuming the event and causing infinite recursion.
+            this.lenisContentRef.nativeElement.dispatchEvent(new Event('scroll'));
+            // Keep the fixed-position drop-target overlay aligned when canvas scrolls
+            // during an active drag (pointer doesn't move, so _onDragMove never fires).
+            this.dragEngine.refreshDragOverlays();
+        });
+        const raf = (time) => {
+            this.lenis?.raf(time);
+            this.lenisRafId = requestAnimationFrame(raf);
+        };
+        this.lenisRafId = requestAnimationFrame(raf);
+    }
+    destroyLenis() {
+        if (this.lenisRafId != null)
+            cancelAnimationFrame(this.lenisRafId);
+        this.lenis?.destroy();
+        this.lenis = undefined;
+        this.lenisRafId = undefined;
+    }
+    addComponent(name) {
+        const config = this.registry.createConfig(name);
+        if (!config) {
+            return;
+        }
+        this.layout.push(config);
+    }
+    onDrop(event) {
+        const { payload, insertIndex } = event;
+        if (payload.type === 'external') {
+            if (typeof payload.data === 'string') {
+                const config = this.registry.createConfig(payload.data);
+                if (!config)
+                    return;
+                this.layout.splice(insertIndex, 0, config);
+            }
+            else {
+                const clone = this.deepCloneWithNewIds(payload.data);
+                this.layout.splice(insertIndex, 0, clone);
+            }
+            this.cdr.markForCheck();
+            return;
+        }
+        const item = payload.data;
+        if (payload.sourceId === 'blocks-panel') {
+            // Reusable block dragged from blocks panel — deep clone with new IDs.
+            const clone = this.deepCloneWithNewIds(item);
+            this.layout.splice(insertIndex, 0, clone);
+            this.cdr.markForCheck();
+            return;
+        }
+        if (payload.sourceId && payload.sourceId !== 'canvas-preview') {
+            // Cross-list move from a nested container into canvas root.
+            const sourceData = this.dragEngine.getData(payload.sourceId);
+            if (sourceData) {
+                const srcIdx = sourceData.indexOf(item);
+                if (srcIdx !== -1) {
+                    sourceData.splice(srcIdx, 1);
+                    this.dragEngine.getCdr(payload.sourceId)?.detectChanges();
+                }
+            }
+            this.layout.splice(insertIndex, 0, item);
+            this.cdr.markForCheck();
+            return;
+        }
+        // Same-container reorder (canvas root).
+        const currentIdx = this.layout.indexOf(item);
+        if (currentIdx !== -1) {
+            const adjustedIdx = insertIndex > currentIdx ? insertIndex - 1 : insertIndex;
+            this.layout.splice(currentIdx, 1);
+            this.layout.splice(adjustedIdx, 0, item);
+            this.cdr.markForCheck();
+        }
+    }
+    /** Resolve the width style-trait value for a node so the cdkDrag wrapper
+     *  matches the component's actual width (prevents full-canvas-width clones). */
+    getNodeWidth(node) {
+        if (!node.styleTraits)
+            return undefined;
+        for (const group of node.styleTraits) {
+            for (const trait of group.traits) {
+                if (trait.name === 'width' && trait.default !== undefined) {
+                    return trait.default;
+                }
+            }
+        }
+        return undefined;
+    }
+    onModeChange(mode) {
+        this.activeMode = mode;
+        if (mode === BuilderMode.Pan) {
+            this.selectedItem = null;
+            this.overlayService.clearSelect();
+            this.overlayService.clearHover();
+        }
+        else {
+            // Returning to Select/Style — reset pan offset so canvas re-centers
+            this.panX = 0;
+            this.panY = 0;
+        }
+    }
+    onDeviceChange(device) {
+        this.viewportService.setDevice(device);
+        this.panX = 0;
+        this.panY = 0;
+        this.autoFitViewport();
+    }
+    onZoomChange(value) {
+        if (value === 'fit') {
+            this.panX = 0;
+            this.panY = 0;
+            this.autoFitViewport();
+        }
+        else {
+            this.viewportService.setScale(value / 100);
+        }
+    }
+    // ── Board pan ────────────────────────────────────────────
+    onBoardMouseDown(event) {
+        if (this.activeMode !== BuilderMode.Pan)
+            return;
+        if (event.button !== 0)
+            return;
+        this.isPanning = true;
+        this.panStartX = event.clientX;
+        this.panStartY = event.clientY;
+        this.panOriginX = this.panX;
+        this.panOriginY = this.panY;
+        event.preventDefault();
+    }
+    onBoardMouseMove(event) {
+        if (!this.isPanning)
+            return;
+        this.panX = this.panOriginX + (event.clientX - this.panStartX);
+        this.panY = this.panOriginY + (event.clientY - this.panStartY);
+    }
+    onBoardMouseUp() {
+        this.isPanning = false;
+    }
+    autoFitViewport() {
+        const container = this.previewCanvas?.nativeElement;
+        if (!container)
+            return;
+        // Available width = container width minus horizontal padding (10px × 2)
+        this.viewportService.fitToWidth(container.clientWidth, 20);
+    }
+    selectPanel(panel) {
+        this.activePanel = panel;
+        this.panelEventService.emit(this.isPanelOpen ? PanelEventTypes.PANEL_SELECTED : PanelEventTypes.PANEL_OPEN, panel);
+    }
+    handleClick(event) {
+        if (this.activeMode === BuilderMode.Pan)
+            return;
+        this.selectedItem = event.node;
+        this.overlayService.setSelect(event.element, event.node.type, this.activeMode, event.node, event.componentRef);
+        this.selectPanel(PanelTypes.STYLES);
+        this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: event.node, componentRef: event.componentRef });
+    }
+    handleMouseEnter(event) {
+        if (this.isDragging || this.activeMode === BuilderMode.Pan)
+            return;
+        cancelAnimationFrame(this.hoverHideRaf);
+        this.overlayService.setHover(event.element, event.node.type, this.activeMode);
+    }
+    handleMouseLeave() {
+        if (this.isDragging || this.activeMode === BuilderMode.Pan)
+            return;
+        cancelAnimationFrame(this.hoverHideRaf);
+        this.hoverHideRaf = requestAnimationFrame(() => this.overlayService.clearHover());
+    }
+    handleCanvasClick() {
+        // Only fires when clicking empty canvas space (renderers call stopPropagation)
+        this.selectedItem = null;
+        this.overlayService.clearSelect();
+    }
+    onTreeNodeSelect(node) {
+        this.selectedItem = node;
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef });
+        }
+        this.selectPanel(PanelTypes.STYLES);
+    }
+    onTreeNodeAction(event) {
+        const { action, node } = event;
+        const result = this.findNodeInTree(node, this.layout);
+        if (!result)
+            return;
+        if (action === NodeAction.Delete) {
+            result.parent.splice(result.index, 1);
+            this.selectedItem = null;
+            this.overlayService.clearSelect();
+        }
+        else if (action === NodeAction.Duplicate) {
+            const clone = JSON.parse(JSON.stringify(node));
+            result.parent.splice(result.index + 1, 0, clone);
+        }
+    }
+    onTreeNodeMove() {
+        // Tree drag moved a node — canvas will re-render via change detection.
+        // Clear selection since the moved node's DOM element may be recreated.
+        this.selectedItem = null;
+        this.overlayService.clearSelect();
+    }
+    // ── Toolbar actions ──────────────────────────────────────
+    onToolbarAction(event) {
+        const { action, entry } = event;
+        const node = entry.node;
+        if (!node)
+            return;
+        switch (action) {
+            case ToolbarAction.Delete: {
+                const result = this.findNodeInTree(node, this.layout);
+                if (result) {
+                    result.parent.splice(result.index, 1);
+                    this.selectedItem = null;
+                    this.overlayService.clearSelect();
+                }
+                break;
+            }
+            case ToolbarAction.Duplicate: {
+                const result = this.findNodeInTree(node, this.layout);
+                if (result) {
+                    const clone = JSON.parse(JSON.stringify(node));
+                    result.parent.splice(result.index + 1, 0, clone);
+                }
+                break;
+            }
+            case ToolbarAction.Play: {
+                this.interactionEngine.replay(node);
+                break;
+            }
+            case ToolbarAction.SaveAsBlock: {
+                this.pendingBlockNode = node;
+                this.saveBlockName = '';
+                this.showSaveBlockDialog = true;
+                break;
+            }
+            case ToolbarAction.SelectParent: {
+                const parentNode = this.findParentNode(node, this.layout);
+                if (parentNode) {
+                    const ref = this.overlayService.getNodeRef(parentNode);
+                    if (ref) {
+                        this.selectedItem = parentNode;
+                        this.overlayService.setSelect(ref.element, parentNode.type, this.activeMode, parentNode, ref.componentRef);
+                        this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: parentNode, componentRef: ref.componentRef });
+                    }
+                }
+                else {
+                    // Already at root level — deselect
+                    this.selectedItem = null;
+                    this.overlayService.clearSelect();
+                }
+                break;
+            }
+        }
+    }
+    confirmSaveBlock() {
+        if (!this.saveBlockName.trim() || !this.pendingBlockNode)
+            return;
+        this.saveBlock.emit({ name: this.saveBlockName.trim(), node: this.pendingBlockNode });
+        this.showSaveBlockDialog = false;
+        this.pendingBlockNode = null;
+    }
+    cancelSaveBlock() {
+        this.showSaveBlockDialog = false;
+        this.pendingBlockNode = null;
+    }
+    deepCloneWithNewIds(node) {
+        const clone = JSON.parse(JSON.stringify(node));
+        this.assignNewIds(clone);
+        return clone;
+    }
+    assignNewIds(node) {
+        node.id = Math.random().toString(36).slice(2, 10);
+        if (node.styleId)
+            node.styleId = Math.random().toString(36).slice(2, 10);
+        node.children?.forEach(child => this.assignNewIds(child));
+    }
+    onPageScroll(event) {
+        const contentH = event.scrollHeight;
+        const wrapperH = event.clientHeight;
+        if (contentH <= wrapperH) {
+            this.isScrollbarVisible = false;
+            return;
+        }
+        // .canvas-scrollbar has top:20px; bottom:20px — visible track is 40px shorter.
+        const trackH = wrapperH - 40;
+        const thumbH = Math.max((trackH / contentH) * trackH, 32);
+        // Use Lenis progress (0–1) when available — more accurate than recomputing from scroll/limit.
+        const progress = event.scrollPercentage != null ? event.scrollPercentage / 100
+            : event.scrollTop / (contentH - wrapperH);
+        const thumbTop = progress * (trackH - thumbH);
+        this.scrollThumbHeight = thumbH;
+        this.scrollThumbTop = thumbTop;
+        this.isScrollbarVisible = true;
+        // .canvas-scrollbar is position:absolute inside the Lenis wrapper.
+        // When Lenis calls wrapper.scrollTo(), scrollTop shifts all absolute children.
+        // Counteract with translateY(scrollTop) so the track stays visually anchored.
+        this.scrollbarTranslate = event.scrollTop;
+        this.cdr.markForCheck();
+        if (this._scrollbarTimer)
+            clearTimeout(this._scrollbarTimer);
+        this._scrollbarTimer = setTimeout(() => {
+            this.isScrollbarVisible = false;
+            this.cdr.markForCheck();
+        }, 1200);
+    }
+    findNodeInTree(target, children) {
+        for (let i = 0; i < children.length; i++) {
+            if (children[i] === target) {
+                return { parent: children, index: i };
+            }
+            if (children[i].children) {
+                const found = this.findNodeInTree(target, children[i].children);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    findParentNode(target, children, parent) {
+        for (const child of children) {
+            if (child === target)
+                return parent || null;
+            if (child.children) {
+                const found = this.findParentNode(target, child.children, child);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    handlePanelEvents(panelEvent) {
+        if (panelEvent.type === PanelEventTypes.PANEL_CLOSE) {
+            this.isPanelOpen = false;
+            return;
+        }
+        if (panelEvent.type === PanelEventTypes.PANEL_OPEN) {
+            this.isPanelOpen = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings" }, outputs: { save: "save", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n        </div>\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\" [layout]=\"layout\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Custom Lenis scrollbar \u2014 inside .preview-scroll (Lenis wrapper).\n                 position:absolute shifts with scrollTop, so we counteract with\n                 transform:translateY(scrollTop) to keep it visually anchored. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\"\n                 [style.transform]=\"'translateY(' + scrollbarTranslate + 'px)'\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             class=\"preview-node\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             [style.width]=\"getNodeWidth(item)\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container ioxRender=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\">\n        </app-toolbar>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-dialog\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:#fff;padding:.5rem 1rem;border-bottom:1px solid var(--p-surface-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-100, #f1f5f9);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.5rem}.builder .sidebar-switcher p-button ::ng-deep .p-button,.builder .panel-switcher p-button ::ng-deep .p-button{color:#000;background:transparent;border:1px solid transparent;transition:border-color .2s}.builder .sidebar-switcher p-button ::ng-deep .p-button:hover,.builder .panel-switcher p-button ::ng-deep .p-button:hover{border-color:#cb9090}.builder .sidebar-switcher p-button.active ::ng-deep .p-button,.builder .panel-switcher p-button.active ::ng-deep .p-button{background:#cb9090;color:#fff;border-color:#cb9090}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .builder-main app-toolbar{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);z-index:1000;pointer-events:auto}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-right:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;background:#fff;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:hidden!important}.builder .preview-node{position:relative}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i11.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n        </div>\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\" [layout]=\"layout\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Custom Lenis scrollbar \u2014 inside .preview-scroll (Lenis wrapper).\n                 position:absolute shifts with scrollTop, so we counteract with\n                 transform:translateY(scrollTop) to keep it visually anchored. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\"\n                 [style.transform]=\"'translateY(' + scrollbarTranslate + 'px)'\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             class=\"preview-node\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             [style.width]=\"getNodeWidth(item)\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container ioxRender=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\">\n        </app-toolbar>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-dialog\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:#fff;padding:.5rem 1rem;border-bottom:1px solid var(--p-surface-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-100, #f1f5f9);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.5rem}.builder .sidebar-switcher p-button ::ng-deep .p-button,.builder .panel-switcher p-button ::ng-deep .p-button{color:#000;background:transparent;border:1px solid transparent;transition:border-color .2s}.builder .sidebar-switcher p-button ::ng-deep .p-button:hover,.builder .panel-switcher p-button ::ng-deep .p-button:hover{border-color:#cb9090}.builder .sidebar-switcher p-button.active ::ng-deep .p-button,.builder .panel-switcher p-button.active ::ng-deep .p-button{background:#cb9090;color:#fff;border-color:#cb9090}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .builder-main app-toolbar{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);z-index:1000;pointer-events:auto}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-right:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;background:#fff;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:hidden!important}.builder .preview-node{position:relative}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: InteractionEngineService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }], propDecorators: { layout: [{
+                type: Input
+            }], dataSources: [{
+                type: Input
+            }], orgId: [{
+                type: Input
+            }], routeParams: [{
+                type: Input
+            }], pageName: [{
+                type: Input
+            }], isSaving: [{
+                type: Input
+            }], pageStatus: [{
+                type: Input
+            }], pageSettings: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], back: [{
+                type: Output
+            }], preview: [{
+                type: Output
+            }], publishToggle: [{
+                type: Output
+            }], pageSettingsChange: [{
+                type: Output
+            }], applyAnimationToAll: [{
+                type: Output
+            }], saveBlock: [{
+                type: Output
+            }], previewCanvas: [{
+                type: ViewChild,
+                args: ['previewCanvas']
+            }], previewScrollRef: [{
+                type: ViewChild,
+                args: ['previewScroll']
+            }], lenisContentRef: [{
+                type: ViewChild,
+                args: ['lenisContent']
+            }] } });
+
+class IoxDropzoneDirective {
+    constructor(el, dragEngine, cdr) {
+        this.el = el;
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.ioxDropzoneId = '';
+        this.ioxDropzoneData = [];
+        this.ioxDrop = new EventEmitter();
+    }
+    ngOnInit() {
+        this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDropzoneDirective, isStandalone: false, selector: "[ioxDropzone]", inputs: { ioxDropzoneId: "ioxDropzoneId", ioxDropzoneData: "ioxDropzoneData", ioxDropzonePostDrop: "ioxDropzonePostDrop" }, outputs: { ioxDrop: "ioxDrop" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ioxDropzone]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
+                type: Input
+            }], ioxDropzoneData: [{
+                type: Input
+            }], ioxDropzonePostDrop: [{
+                type: Input
+            }], ioxDrop: [{
+                type: Output
+            }] } });
+
+class SectionComponent {
+    constructor(dragEngine, cdr) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+    }
+    ngOnInit() { }
+    get listOrientation() {
+        const d = this.style?.['display'];
+        if (d === 'flex' || d === 'inline-flex') {
+            const dir = this.style?.['flexDirection'];
+            if (!dir || dir === 'row' || dir === 'row-reverse')
+                return 'horizontal';
+        }
+        return 'vertical';
+    }
+    getChildWidth(node) {
+        if (!node.styleTraits)
+            return undefined;
+        for (const group of node.styleTraits) {
+            for (const trait of group.traits) {
+                if (trait.name === 'width' && trait.default !== undefined)
+                    return trait.default;
+            }
+        }
+        return undefined;
+    }
+    ngOnDestroy() { }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "app-section", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <div class="section-root"
+             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="section-placeholder">
+                <i class="ph-thin ph-rows"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="section-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-section', template: `
+        <div class="section-root"
+             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="section-placeholder">
+                <i class="ph-thin ph-rows"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="section-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }] } });
+
+class BuilderContainerComponent {
+    constructor(dragEngine, cdr) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+    }
+    ngOnInit() { }
+    ngOnDestroy() { }
+    get listOrientation() {
+        const d = this.style?.['display'];
+        if (d === 'flex' || d === 'inline-flex') {
+            const dir = this.style?.['flexDirection'];
+            if (!dir || dir === 'row' || dir === 'row-reverse')
+                return 'horizontal';
+        }
+        return 'vertical';
+    }
+    getChildWidth(node) {
+        if (!node.styleTraits)
+            return undefined;
+        for (const group of node.styleTraits) {
+            for (const trait of group.traits) {
+                if (trait.name === 'width' && trait.default !== undefined)
+                    return trait.default;
+            }
+        }
+        return undefined;
+    }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderContainerComponent, isStandalone: false, selector: "app-builder-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <div class="container-root"
+             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="container-placeholder">
+                <i class="ph-thin ph-square"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="container-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-container', template: `
+        <div class="container-root"
+             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+             ioxDropzone
+             [ioxDropzoneId]="dropListId"
+             [ioxDropzoneData]="children"
+             (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="container-placeholder">
+                <i class="ph-thin ph-square"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="container-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </div>
+    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }] } });
+
+class BuilderLinkedContainerComponent {
+    constructor(dragEngine, cdr, elRef, isPreview) {
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.elRef = elRef;
+        this.isPreview = isPreview;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        this.linkType = 'external';
+        this.url = 'https://';
+        this.pageRoute = '';
+        this.target = '_self';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+        this.capturePreventDefault = (e) => e.preventDefault();
+    }
+    ngOnInit() {
+        if (!this.isPreview) {
+            this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
+        }
+    }
+    ngOnDestroy() {
+        if (!this.isPreview) {
+            this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
+        }
+    }
+    get resolvedHref() {
+        if (this.linkType !== 'page')
+            return this.url || '#';
+        return this.pageRoute || '#';
+    }
+    get listOrientation() {
+        const d = this.style?.['display'];
+        if (d === 'flex' || d === 'inline-flex') {
+            const dir = this.style?.['flexDirection'];
+            if (!dir || dir === 'row' || dir === 'row-reverse')
+                return 'horizontal';
+        }
+        return 'vertical';
+    }
+    getChildWidth(node) {
+        for (const group of (node.styleTraits || [])) {
+            for (const trait of group.traits) {
+                if (trait.name === 'width' && trait.default !== undefined)
+                    return trait.default;
+            }
+        }
+        return undefined;
+    }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkedContainerComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderLinkedContainerComponent, isStandalone: false, selector: "app-builder-linked-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <a [href]="resolvedHref"
+           [target]="target"
+           [ngStyle]="style"
+           [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+           class="linked-container-root"
+           ioxDropzone
+           [ioxDropzoneId]="dropListId"
+           [ioxDropzoneData]="children"
+           (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="linked-container-placeholder">
+                <i class="ph-thin ph-link"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="linked-container-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </a>
+    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkedContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-linked-container', template: `
+        <a [href]="resolvedHref"
+           [target]="target"
+           [ngStyle]="style"
+           [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
+           class="linked-container-root"
+           ioxDropzone
+           [ioxDropzoneId]="dropListId"
+           [ioxDropzoneData]="children"
+           (ioxDrop)="onDrop($event)">
+
+            <div *ngIf="!children.length" class="linked-container-placeholder">
+                <i class="ph-thin ph-link"></i>
+                <span>Drop components here</span>
+            </div>
+
+            <div *ngFor="let child of children"
+                 class="linked-container-child"
+                 [style.width]="getChildWidth(child)"
+                 ioxDraggable
+                 [ioxDragData]="child"
+                 [ioxDragSourceId]="dropListId">
+                <ng-container
+                    [ioxRender]="child"
+                    (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)"
+                    (onMouseLeave)="childMouseLeave.emit()">
+                </ng-container>
+            </div>
+        </a>
+    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IS_PREVIEW]
+                }] }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], linkType: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], pageRoute: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }] } });
+
+/** Optional CMS content fetcher. Provide from the host app to enable Repeater data preview. */
+const IOX_CONTENT_SERVICE = new InjectionToken('IOX_CONTENT_SERVICE');
+/** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
+const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
+
+/**
+ * Resolves a dot-notation path (with optional array bracket notation) against an object.
+ * Examples: 'title', 'author.name', 'tags[0]', 'items[2].title'
+ */
+function resolvePath(obj, path) {
+    return path.split('.').reduce((current, key) => {
+        if (current == null)
+            return undefined;
+        const bracketMatch = key.match(/^(\w+)\[(\d+)]$/);
+        if (bracketMatch) {
+            const arr = current[bracketMatch[1]];
+            return Array.isArray(arr) ? arr[parseInt(bracketMatch[2], 10)] : undefined;
+        }
+        return current[key];
+    }, obj);
+}
+/**
+ * Deep-clones a ComponentNode tree and overrides trait defaults
+ * according to each node's bindings resolved against `item`.
+ *
+ * Each clone gets a new `id` (for Angular tracking / overlay registration)
+ * but shares the original node's CSS class by setting `styleId = originalId`.
+ * This means all repeated preview rows point to the same CSS rule block as the
+ * template node — the style engine only needs one rule per logical slot.
+ */
+function cloneNodesForItem(nodes, item) {
+    return nodes.map(node => {
+        // Capture the CSS-owning id before clone
+        const cssId = node.styleId ?? node.id;
+        const clone = JSON.parse(JSON.stringify(node));
+        clone.id = Math.random().toString(36).substr(2, 9);
+        // Point this clone and all its descendants at the original CSS rule.
+        clone.styleId = cssId;
+        if (clone.bindings?.length && item) {
+            for (const binding of clone.bindings) {
+                const value = resolvePath(item, binding.path);
+                if (value !== undefined) {
+                    for (const trait of clone.traits || []) {
+                        if (trait.name === binding.prop) {
+                            trait.default = value;
+                        }
+                    }
+                }
+            }
+        }
+        if (clone.children?.length) {
+            clone.children = cloneNodesForItem(clone.children, item);
+        }
+        return clone;
+    });
+}
+
+class BuilderRepeaterComponent {
+    get source() { return this._source; }
+    set source(value) {
+        if (value === this._source)
+            return;
+        this._source = value;
+        if (value) {
+            this.fetchData();
+        }
+        else {
+            this.items = [];
+            this.previewRows = [];
+        }
+    }
+    get limit() { return this._limit; }
+    set limit(value) {
+        if (value === this._limit)
+            return;
+        this._limit = value;
+        if (this._source) {
+            this.fetchData();
+        }
+    }
+    constructor(dragEngine, overlayService, contentService, dsRegistry, panelEventService, activatedRoute, cdr) {
+        this.dragEngine = dragEngine;
+        this.overlayService = overlayService;
+        this.contentService = contentService;
+        this.dsRegistry = dsRegistry;
+        this.panelEventService = panelEventService;
+        this.activatedRoute = activatedRoute;
+        this.cdr = cdr;
+        this.children = [];
+        this.style = {};
+        this.nodeId = '';
+        this.dropListId = '';
+        this.childClick = new EventEmitter();
+        this.childMouseEnter = new EventEmitter();
+        this.childMouseLeave = new EventEmitter();
+        this.items = [];
+        this.previewRows = [];
+        this.isLoading = false;
+        /** Bound reference passed to [ioxDropzonePostDrop] so the directive can call it. */
+        this.refreshPreviewsBound = () => { setTimeout(() => this.refreshPreviews()); };
+        this._source = '';
+        this._limit = 10;
+        this.orgId = 'default';
+    }
+    ngOnInit() {
+        this.orgId = this.activatedRoute.snapshot.paramMap.get('orgId') || 'default';
+        // When a binding is added/removed on any node, regenerate the preview rows.
+        this.bindingSub = this.panelEventService.subscribe(event => {
+            if (event.type !== PanelEventTypes.BINDING_CHANGED)
+                return;
+            const changedNode = event.data?.node;
+            if (!changedNode || !this.items.length)
+                return;
+            if (this.children.some(c => c === changedNode || c.id === changedNode.id)) {
+                this.refreshPreviews();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.bindingSub?.unsubscribe();
+    }
+    onDrop(event) {
+        this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr, () => { if (this.items.length > 0)
+            setTimeout(() => this.refreshPreviews()); });
+    }
+    fetchData() {
+        if (!this._source)
+            return;
+        const ds = this.dsRegistry.findByAlias(this._source);
+        const contentType = ds?.request?.cms?.contentType;
+        if (!contentType || !this.contentService)
+            return;
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        this.contentService.getContent(contentType, this.orgId).subscribe({
+            next: (data) => {
+                const all = Array.isArray(data) ? data : (data?.items || data?.data || []);
+                this.items = all.slice(0, this._limit);
+                this.refreshPreviews();
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: () => {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    refreshPreviews() {
+        if (!this.items.length || !this.children.length) {
+            this.previewRows = [];
+            this.cdr.markForCheck();
+            return;
+        }
+        this.applyFirstItemToTemplate();
+        this.previewRows = this.items.slice(1).map(item => cloneNodesForItem(this.children, item));
+        this.cdr.markForCheck();
+    }
+    applyFirstItemToTemplate() {
+        const item = this.items[0];
+        if (!item || !this.children.length)
+            return;
+        for (const child of this.children) {
+            if (!child.bindings?.length)
+                continue;
+            const ref = this.overlayService.getNodeRef(child);
+            if (!ref?.componentRef)
+                continue;
+            for (const binding of child.bindings) {
+                const value = resolvePath(item, binding.path);
+                if (value !== undefined) {
+                    ref.componentRef.instance[binding.prop] = value;
+                }
+            }
+            ref.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: IOX_CONTENT_SERVICE, optional: true }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], 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", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId, children.length ? 'has-children' : '']">
+
+            <!-- Badge: always visible when empty, absolute hover-only when has children -->
+            <div class="repeater-badge">
+                <i class="ph-thin ph-repeat"></i>
+                <span *ngIf="source">{{ source }}</span>
+                <span *ngIf="!source" class="repeater-badge-empty">No source</span>
+                <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
+                <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+            </div>
+
+            <!-- Template drop zone — user designs one item here -->
+            <div class="repeater-template"
+                 ioxDropzone
+                 [ioxDropzoneId]="dropListId"
+                 [ioxDropzoneData]="children"
+                 [ioxDropzonePostDrop]="refreshPreviewsBound"
+                 (ioxDrop)="onDrop($event)">
+
+                <div *ngIf="!children.length" class="repeater-placeholder">
+                    <i class="ph-thin ph-rows"></i>
+                    <span>Drop a component here as the item template</span>
+                </div>
+
+                <div *ngFor="let child of children"
+                     class="repeater-template-child"
+                     ioxDraggable
+                     [ioxDragData]="child"
+                     [ioxDragSourceId]="dropListId">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </div>
+            </div>
+
+            <!-- Preview rows for items 2..N — read-only clones with real data -->
+            <div *ngFor="let row of previewRows" class="repeater-preview-row">
+                <ng-container *ngFor="let child of row">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="$event"
+                        (onMouseEnter)="$event"
+                        (onMouseLeave)="undefined">
+                    </ng-container>
+                </ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: [".repeater-root{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-root.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-root.has-children:hover .repeater-badge{opacity:1}.repeater-root.has-children .repeater-template{border:none;border-radius:0;padding:0;min-height:unset}.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-template{border:1px dashed rgba(203,144,144,.4);border-radius:0 0 4px 4px;padding: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-template-child{min-width:0}.repeater-preview-row{opacity:.55;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-builder-repeater', template: `
+        <div class="repeater-root" [ngClass]="['iox-node-' + nodeId, children.length ? 'has-children' : '']">
+
+            <!-- Badge: always visible when empty, absolute hover-only when has children -->
+            <div class="repeater-badge">
+                <i class="ph-thin ph-repeat"></i>
+                <span *ngIf="source">{{ source }}</span>
+                <span *ngIf="!source" class="repeater-badge-empty">No source</span>
+                <span *ngIf="items.length" class="repeater-badge-count">&times; {{ items.length }}</span>
+                <span *ngIf="isLoading" class="repeater-badge-loading"><i class="ph-thin ph-circle-notch"></i></span>
+            </div>
+
+            <!-- Template drop zone — user designs one item here -->
+            <div class="repeater-template"
+                 ioxDropzone
+                 [ioxDropzoneId]="dropListId"
+                 [ioxDropzoneData]="children"
+                 [ioxDropzonePostDrop]="refreshPreviewsBound"
+                 (ioxDrop)="onDrop($event)">
+
+                <div *ngIf="!children.length" class="repeater-placeholder">
+                    <i class="ph-thin ph-rows"></i>
+                    <span>Drop a component here as the item template</span>
+                </div>
+
+                <div *ngFor="let child of children"
+                     class="repeater-template-child"
+                     ioxDraggable
+                     [ioxDragData]="child"
+                     [ioxDragSourceId]="dropListId">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)"
+                        (onMouseLeave)="childMouseLeave.emit()">
+                    </ng-container>
+                </div>
+            </div>
+
+            <!-- Preview rows for items 2..N — read-only clones with real data -->
+            <div *ngFor="let row of previewRows" class="repeater-preview-row">
+                <ng-container *ngFor="let child of row">
+                    <ng-container
+                        [ioxRender]="child"
+                        (onClick)="$event"
+                        (onMouseEnter)="$event"
+                        (onMouseLeave)="undefined">
+                    </ng-container>
+                </ng-container>
+            </div>
+        </div>
+    `, standalone: false, styles: [".repeater-root{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-root.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-root.has-children:hover .repeater-badge{opacity:1}.repeater-root.has-children .repeater-template{border:none;border-radius:0;padding:0;min-height:unset}.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-template{border:1px dashed rgba(203,144,144,.4);border-radius:0 0 4px 4px;padding: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-template-child{min-width:0}.repeater-preview-row{opacity:.55;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: OverlayService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_CONTENT_SERVICE]
+                }] }, { type: DataSourceRegistryService }, { type: PanelEventService }, { type: i5.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], dropListId: [{
+                type: Input
+            }], childClick: [{
+                type: Output
+            }], childMouseEnter: [{
+                type: Output
+            }], childMouseLeave: [{
+                type: Output
+            }], source: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }] } });
+
+class PanelChildComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: PanelChildComponent, isStandalone: false, selector: "panel-child", inputs: { name: "name" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: '<ng-template #tpl><ng-content></ng-content></ng-template>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelChildComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'panel-child',
+                    template: '<ng-template #tpl><ng-content></ng-content></ng-template>',
+                    standalone: false,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['tpl', { static: true }]
+            }] } });
+
+class PanelComponent {
+    constructor(panelEventService) {
+        this.panelEventService = panelEventService;
+        this.isPanelOpen = false;
+        this.activePanel = null;
+        this.sub = this.panelEventService.subscribe((panelEvent) => {
+            if (panelEvent.type === PanelEventTypes.PANEL_CLOSE) {
+                this.isPanelOpen = false;
+                this.activePanel = null;
+                return;
+            }
+            if (panelEvent.type === PanelEventTypes.PANEL_SELECTED || panelEvent.type === PanelEventTypes.PANEL_OPEN) {
+                this.isPanelOpen = true;
+                this.activePanel = panelEvent.data;
+            }
+        });
+    }
+    ngAfterContentInit() { }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelComponent, deps: [{ token: PanelEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: PanelComponent, isStandalone: false, selector: "app-panel", queries: [{ propertyName: "panelChildren", predicate: PanelChildComponent }], ngImport: i0, template: "<div class=\"panel\">\n    <ng-container *ngFor=\"let child of panelChildren\">\n        <div class=\"panel-body\" [ngClass]=\"{ active: activePanel === child.name }\">\n            <ng-container *ngTemplateOutlet=\"child.template\"></ng-container>\n        </div>\n    </ng-container>\n</div>", styles: [":host{display:block;width:0;flex-shrink:0;overflow:hidden;transition:width .2s ease-in-out}:host-context(.panel-open){width:220px}.panel{border-left:1px solid #ccc;background:#f7f7f7;width:220px;height:100%;position:relative}.panel .panel-body{position:absolute;inset:0;overflow-y:auto;transform:translate(100%);transition:transform .2s ease-in-out}.panel .panel-body.active{transform:translate(0)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-panel', standalone: false, template: "<div class=\"panel\">\n    <ng-container *ngFor=\"let child of panelChildren\">\n        <div class=\"panel-body\" [ngClass]=\"{ active: activePanel === child.name }\">\n            <ng-container *ngTemplateOutlet=\"child.template\"></ng-container>\n        </div>\n    </ng-container>\n</div>", styles: [":host{display:block;width:0;flex-shrink:0;overflow:hidden;transition:width .2s ease-in-out}:host-context(.panel-open){width:220px}.panel{border-left:1px solid #ccc;background:#f7f7f7;width:220px;height:100%;position:relative}.panel .panel-body{position:absolute;inset:0;overflow-y:auto;transform:translate(100%);transition:transform .2s ease-in-out}.panel .panel-body.active{transform:translate(0)}\n"] }]
+        }], ctorParameters: () => [{ type: PanelEventService }], propDecorators: { panelChildren: [{
+                type: ContentChildren,
+                args: [PanelChildComponent]
+            }] } });
+
+var StyleCategory;
+(function (StyleCategory) {
+    StyleCategory["Layout"] = "Layout";
+    StyleCategory["Size"] = "Size";
+    StyleCategory["Typography"] = "Typography";
+    StyleCategory["Spacing"] = "Spacing";
+    StyleCategory["Border"] = "Border";
+    StyleCategory["Position"] = "Position";
+    StyleCategory["Background"] = "Background";
+    StyleCategory["Effects"] = "Effects";
+    // Legacy — kept for backward compat; prefer Size
+    StyleCategory["Dimensions"] = "Dimensions";
+})(StyleCategory || (StyleCategory = {}));
+const TRIGGER_OPTIONS = [
+    { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
+    { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
+    { value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
+    { value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
+    { value: 'scrollProgress', label: 'Scroll progress', icon: 'ph-thin ph-arrow-fat-lines-down' },
+];
+const ACTION_TYPE_OPTIONS = [
+    { value: 'fadeIn', label: 'Fade in' },
+    { value: 'fadeOut', label: 'Fade out' },
+    { value: 'moveUp', label: 'Move up' },
+    { value: 'moveDown', label: 'Move down' },
+    { value: 'moveLeft', label: 'Move left' },
+    { value: 'moveRight', label: 'Move right' },
+    { value: 'scaleIn', label: 'Scale in' },
+    { value: 'scaleOut', label: 'Scale out' },
+    { value: 'rotate', label: 'Rotate' },
+    { value: 'show', label: 'Show' },
+    { value: 'hide', label: 'Hide' },
+    { value: 'toggleVisibility', label: 'Toggle visibility' },
+];
+const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+var TraitInputType;
+(function (TraitInputType) {
+    TraitInputType["Text"] = "text";
+    TraitInputType["Number"] = "number";
+    TraitInputType["Select"] = "select";
+    TraitInputType["Checkbox"] = "checkbox";
+    TraitInputType["Color"] = "colorPicker";
+    TraitInputType["DirectionalSize"] = "directionalSize";
+    TraitInputType["SelectButton"] = "selectButton";
+    TraitInputType["Scrub"] = "scrub";
+    TraitInputType["Icon"] = "icon";
+    TraitInputType["Media"] = "media";
+    TraitInputType["FontFamily"] = "fontFamily";
+})(TraitInputType || (TraitInputType = {}));
+function generateNodeId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+class ComponentConfig {
+    constructor(type, selector, icon = 'ph-thin ph-cube', category = 'General') {
+        this.id = generateNodeId();
+        this.type = type;
+        this.selector = selector;
+        this.icon = icon;
+        this.category = category;
+        this.inputs = {};
+        this.traits = [];
+        this.styleTraits = [];
+    }
+    /** Override specific trait defaults after styleTraits are set.
+     *  Call this at the end of each subclass constructor. */
+    applyStyleDefaults(defaults) {
+        for (const group of this.styleTraits) {
+            for (const trait of group.traits) {
+                if (defaults[trait.name] !== undefined) {
+                    trait.default = defaults[trait.name];
+                }
+            }
+        }
+    }
+}
+class TraitConfig {
+    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+        this.name = name;
+        this.label = label;
+        this.type = type;
+        this.options = options;
+        this.default = defaultValue;
+        this.inline = inline;
+        this.showWhen = showWhen;
+    }
+}
+class GroupStyleConfig {
+    constructor(category, traits) {
+        this.category = category;
+        this.traits = traits;
+    }
+}
+// ─── Unit constants ───────────────────────────────────────────────────────────
+const UNITS_ALL = ['px', '%', 'rem', 'em', 'vw', 'vh'];
+const UNITS_NO_VW = ['px', '%', 'rem', 'em', 'vh'];
+const UNITS_FIXED = ['px', '%', 'rem', 'em'];
+const UNITS_DEG = ['deg'];
+// ─── Shared panel utilities ──────────────────────────────────────────────────
+function resolveTraitControllerType(type) {
+    switch (type) {
+        case TraitInputType.Number: return 'number';
+        case TraitInputType.Select: return 'select';
+        case TraitInputType.Checkbox: return 'switch';
+        case TraitInputType.Color: return 'colorPicker';
+        case TraitInputType.DirectionalSize: return 'directionalSize';
+        case TraitInputType.SelectButton: return 'selectButton';
+        case TraitInputType.Scrub: return 'scrub';
+        case TraitInputType.Icon: return 'icon';
+        case TraitInputType.Media: return 'media';
+        case TraitInputType.FontFamily: return 'select';
+        default: return 'text';
+    }
+}
+function resolveTraitOptions(trait) {
+    if (trait.type === TraitInputType.Color ||
+        trait.type === TraitInputType.DirectionalSize ||
+        trait.type === TraitInputType.SelectButton ||
+        trait.type === TraitInputType.Scrub ||
+        trait.type === TraitInputType.Media) {
+        return trait.options;
+    }
+    if (trait.type === TraitInputType.FontFamily) {
+        // FontFamily options are injected dynamically by the style panel via FontManagerService.
+        // Return empty array here; the panel overrides this in resolveOptions().
+        return [];
+    }
+    if (trait.type !== TraitInputType.Select) {
+        return undefined;
+    }
+    const opts = trait.options ?? [];
+    // Already formatted as {label, value}[]
+    if (opts.length > 0 && typeof opts[0] === 'object' && 'label' in opts[0]) {
+        return opts;
+    }
+    return opts.map((option) => ({ label: option, value: option }));
+}
+// ─── Style Groups ─────────────────────────────────────────────────────────────
+const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
+class PositionGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Position, [
+            new TraitConfig('position', 'Position', TraitInputType.Select, ['static', 'relative', 'absolute', 'fixed', 'sticky'], 'static'),
+            new TraitConfig('top', 'T', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('right', 'R', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('bottom', 'B', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('left', 'L', TraitInputType.Scrub, { min: -9999, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true, { trait: 'position', values: NON_STATIC_POSITIONS }),
+            new TraitConfig('zIndex', 'Z', TraitInputType.Scrub, { min: -99, max: 9999, step: 1, units: [''] }, '0', false, { trait: 'position', values: NON_STATIC_POSITIONS }),
+        ]);
+    }
+}
+// ─── Layout ───────────────────────────────────────────────────────────────────
+class LayoutGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Layout, [
+            new TraitConfig('display', 'Display', TraitInputType.Select, ['block', 'inline', 'inline-block', 'flex'], 'block'),
+            new TraitConfig('flexDirection', 'Direction', TraitInputType.SelectButton, [
+                { value: 'row', label: 'Horizontal', icon: 'ph-thin ph-arrow-right' },
+                { value: 'row-reverse', label: 'Horizontal Reversed', icon: 'ph-thin ph-arrow-left' },
+                { value: 'column', label: 'Vertical', icon: 'ph-thin ph-arrow-down' },
+                { value: 'column-reverse', label: 'Vertical Reversed', icon: 'ph-thin ph-arrow-up' },
+            ], 'row', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('justifyContent', 'Justify', TraitInputType.SelectButton, [
+                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-left' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-horizontal' },
+                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-right' },
+                { value: 'space-between', label: 'Space Between', icon: 'ph-thin ph-distribute-horizontal' },
+                { value: 'space-around', label: 'Space Around', icon: 'ph-thin ph-dots-three' },
+                { value: 'space-evenly', label: 'Space Evenly', icon: 'ph-thin ph-dots-six' },
+            ], 'flex-start', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('alignItems', 'Align', TraitInputType.SelectButton, [
+                { value: 'stretch', label: 'Stretch', icon: 'ph-thin ph-arrows-vertical' },
+                { value: 'flex-start', label: 'Start', icon: 'ph-thin ph-align-top' },
+                { value: 'center', label: 'Center', icon: 'ph-thin ph-align-center-vertical' },
+                { value: 'flex-end', label: 'End', icon: 'ph-thin ph-align-bottom' },
+            ], 'stretch', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('flexWrap', 'Flex Wrap', TraitInputType.SelectButton, [
+                { value: 'nowrap', label: 'No Wrap', icon: 'ph-thin ph-minus' },
+                { value: 'wrap', label: 'Wrap', icon: 'ph-thin ph-arrow-elbow-down-right' },
+                { value: 'wrap-reverse', label: 'Wrap Reversed', icon: 'ph-thin ph-arrow-elbow-up-right' },
+            ], 'nowrap', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('gap', 'Gap', TraitInputType.Scrub, { min: 0, max: 200, step: 1, units: UNITS_FIXED }, '0px', false, { trait: 'display', values: 'flex' }),
+            new TraitConfig('direction', 'Text Direction', TraitInputType.SelectButton, [
+                { value: 'ltr', label: 'LTR' },
+                { value: 'rtl', label: 'RTL' },
+            ], 'ltr'),
+        ]);
+    }
+}
+// ─── Size (replaces Dimensions) ───────────────────────────────────────────────
+class SizeGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Size, [
+            new TraitConfig('width', 'W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('height', 'H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('minWidth', 'Min W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('minHeight', 'Min H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('maxWidth', 'Max W', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('maxHeight', 'Max H', TraitInputType.Scrub, { min: 0, max: 9999, step: 1, units: UNITS_ALL, allowAuto: true }, 'auto', true),
+            new TraitConfig('aspectRatio', 'Aspect Ratio', TraitInputType.Select, ['auto', '1/1', '4/3', '16/9', '3/2', '2/3', '9/16'], 'auto'),
+        ]);
+    }
+}
+/** @deprecated Use SizeGroupStyleConfig instead. */
+class DimensionsGroupStyleConfig extends SizeGroupStyleConfig {
+}
+// ─── Background ───────────────────────────────────────────────────────────────
+class BackgroundGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Background, [
+            new TraitConfig('backgroundColor', 'Background', TraitInputType.Color, { allowGradient: true, allowTransparent: true, formats: ['hex', 'rgb', 'hsl', 'transparent'] }, 'transparent'),
+        ]);
+    }
+}
+class SpacingGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Spacing, [
+            new TraitConfig('margin', 'Margin', TraitInputType.DirectionalSize, {
+                allowNegative: true,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 200, step: 1 }
+            }, '0px 0px 0px 0px'),
+            new TraitConfig('padding', 'Padding', TraitInputType.DirectionalSize, {
+                allowNegative: false,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 200, step: 1 }
+            }, '0px 0px 0px 0px')
+        ]);
+    }
+}
+class BorderGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Border, [
+            new TraitConfig('borderWidth', 'Border Width', TraitInputType.DirectionalSize, {
+                units: UNITS_FIXED,
+                allowNegative: false,
+                allowLinkedSlider: true,
+                slider: { min: 0, max: 32, step: 1 }
+            }, '0px'),
+            new TraitConfig('borderStyle', 'Border Style', TraitInputType.SelectButton, [
+                { value: 'solid', icon: 'ph-thin ph-line-segment' },
+                { value: 'dashed', icon: 'ph-thin ph-dots-three' },
+                { value: 'dotted', icon: 'ph-thin ph-dots-six' },
+            ], 'solid'),
+            new TraitConfig('borderColor', 'Border Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#CCCCCC'),
+            new TraitConfig('borderRadius', 'Border Radius', TraitInputType.DirectionalSize, {
+                units: UNITS_FIXED,
+                allowNegative: false,
+                allowLinkedSlider: true,
+                linkByDefault: true,
+                slider: { min: 0, max: 120, step: 1 },
+                segments: [
+                    { key: 'top-left', icon: 'ph-arrow-bend-up-left', ariaLabel: 'top left radius' },
+                    { key: 'top-right', icon: 'ph-arrow-bend-up-right', ariaLabel: 'top right radius' },
+                    { key: 'bottom-right', icon: 'ph-arrow-bend-down-right', ariaLabel: 'bottom right radius' },
+                    { key: 'bottom-left', icon: 'ph-arrow-bend-down-left', ariaLabel: 'bottom left radius' }
+                ]
+            }, '0px')
+        ]);
+    }
+}
+class TypographyGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Typography, [
+            new TraitConfig('fontFamily', 'Font Family', TraitInputType.FontFamily, [], 'Poppins, sans-serif'),
+            new TraitConfig('fontSize', 'Font Size', TraitInputType.Scrub, { min: 8, max: 200, step: 1, units: UNITS_FIXED }, '16px'),
+            new TraitConfig('fontWeight', 'Font Weight', TraitInputType.Select, ['100', '200', '300', '400', '500', '600', '700', '800', '900'], '400'),
+            new TraitConfig('color', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#000000'),
+            new TraitConfig('lineHeight', 'Line Height', TraitInputType.Select, ['1', '1.2', '1.4', '1.5', '1.75', '2', '2.5'], '1.5'),
+            new TraitConfig('letterSpacing', 'Letter Spacing', TraitInputType.Scrub, { min: -5, max: 50, step: 0.5, units: UNITS_FIXED }, '0px'),
+            new TraitConfig('textAlign', 'Alignment', TraitInputType.SelectButton, [
+                { value: 'left', icon: 'ph-thin ph-text-align-left' },
+                { value: 'center', icon: 'ph-thin ph-text-align-center' },
+                { value: 'right', icon: 'ph-thin ph-text-align-right' },
+                { value: 'justify', icon: 'ph-thin ph-text-align-justify' },
+            ], 'left'),
+            new TraitConfig('fontStyle', 'Italic', TraitInputType.SelectButton, { items: [{ value: 'italic', icon: 'ph-thin ph-text-italic', label: 'Italic' }], allowEmpty: true, noneValue: 'normal' }, 'normal', true),
+            new TraitConfig('textDecoration', 'Underline', TraitInputType.SelectButton, { items: [{ value: 'underline', icon: 'ph-thin ph-text-underline', label: 'Underline' }], allowEmpty: true, noneValue: 'none' }, 'none', true),
+        ]);
+    }
+}
+class EffectsGroupStyleConfig extends GroupStyleConfig {
+    constructor() {
+        super(StyleCategory.Effects, [
+            new TraitConfig('opacity', 'Opacity', TraitInputType.Scrub, { min: 0, max: 1, step: 0.01, units: [''] }, '1'),
+            new TraitConfig('mixBlendMode', 'Blend Mode', TraitInputType.Select, [
+                'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
+                'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+                'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity',
+            ], 'normal'),
+            new TraitConfig('cursor', 'Cursor', TraitInputType.Select, [
+                'auto', 'default', 'pointer', 'text', 'move', 'not-allowed',
+                'grab', 'grabbing', 'crosshair', 'zoom-in', 'zoom-out', 'none',
+            ], 'auto'),
+        ]);
+    }
+}
+function flattenSchemaFields(properties, prefix = '') {
+    const result = [];
+    for (const [key, field] of Object.entries(properties)) {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        if (field.type === 'object' && field.properties) {
+            result.push(...flattenSchemaFields(field.properties, fullPath));
+        }
+        else {
+            result.push({ label: fullPath, value: fullPath });
+        }
+    }
+    return result;
+}
+
+class InteractionsPanelComponent {
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.node = null;
+        this.triggerOptions = TRIGGER_OPTIONS;
+        this.actionTypeOptions = ACTION_TYPE_OPTIONS;
+        this.easingOptions = EASING_OPTIONS;
+        this.interactions = [];
+        /** State for the "add interaction" form */
+        this.isAdding = false;
+        this.newTrigger = 'pageLoad';
+        this.newActionType = 'fadeIn';
+        this.newDuration = 600;
+        this.newDelay = 0;
+        this.newEasing = 'ease-out';
+        this.newOnce = true;
+        /** Expanded interaction ID for editing */
+        this.expandedId = null;
+    }
+    ngOnInit() {
+        this.selectSub = this.overlayService.select$.subscribe(entry => {
+            this.node = entry?.node ?? null;
+            this.interactions = this.node?.interactions ?? [];
+            this.isAdding = false;
+            this.expandedId = null;
+        });
+    }
+    ngOnDestroy() {
+        this.selectSub?.unsubscribe();
+    }
+    getTriggerLabel(trigger) {
+        return this.triggerOptions.find(t => t.value === trigger)?.label ?? trigger;
+    }
+    getTriggerIcon(trigger) {
+        return this.triggerOptions.find(t => t.value === trigger)?.icon ?? 'ph-thin ph-lightning';
+    }
+    getActionLabel(type) {
+        return this.actionTypeOptions.find(a => a.value === type)?.label ?? type;
+    }
+    getActionsSummary(interaction) {
+        return interaction.actions.map(a => this.getActionLabel(a.type)).join(', ');
+    }
+    toggleExpand(id) {
+        this.expandedId = this.expandedId === id ? null : id;
+    }
+    // ── Add interaction ──────────────────────────────────────
+    startAdd() {
+        this.isAdding = true;
+        this.newTrigger = 'pageLoad';
+        this.newActionType = 'fadeIn';
+        this.newDuration = 600;
+        this.newDelay = 0;
+        this.newEasing = 'ease-out';
+        this.newOnce = true;
+    }
+    cancelAdd() {
+        this.isAdding = false;
+    }
+    confirmAdd() {
+        if (!this.node)
+            return;
+        const action = {
+            type: this.newActionType,
+            target: 'self',
+            duration: this.newDuration,
+            delay: this.newDelay,
+            easing: this.newEasing,
+            once: this.newOnce,
+        };
+        const interaction = {
+            id: generateNodeId(),
+            trigger: this.newTrigger,
+            actions: [action],
+        };
+        if (!this.node.interactions) {
+            this.node.interactions = [];
+        }
+        this.node.interactions.push(interaction);
+        this.interactions = this.node.interactions;
+        this.isAdding = false;
+    }
+    // ── Remove interaction ───────────────────────────────────
+    removeInteraction(id) {
+        if (!this.node?.interactions)
+            return;
+        this.node.interactions = this.node.interactions.filter(i => i.id !== id);
+        this.interactions = this.node.interactions;
+        if (this.expandedId === id) {
+            this.expandedId = null;
+        }
+    }
+    // ── Add action to existing interaction ───────────────────
+    addAction(interaction) {
+        interaction.actions.push({
+            type: 'fadeIn',
+            target: 'self',
+            duration: 600,
+            delay: 0,
+            easing: 'ease-out',
+            once: true,
+        });
+    }
+    removeAction(interaction, index) {
+        interaction.actions.splice(index, 1);
+        // Remove the interaction if it has no actions left
+        if (interaction.actions.length === 0) {
+            this.removeInteraction(interaction.id);
+        }
+    }
+    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-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-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}\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"] }] }); }
+}
+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-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-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}\n"] }]
+        }], ctorParameters: () => [{ type: OverlayService }], propDecorators: { node: [{
+                type: Input
+            }] } });
+
+// StylePanelComponent and PagePanelComponent use <dynamic-input> which must be
+// provided by the consuming app (InputsModule). Declare them there, not here.
+const DECLARATIONS = [
+    BuilderComponent,
+    RenderDirective,
+    IoxDraggableDirective,
+    IoxDropzoneDirective,
+    OverlayComponent,
+    ToolbarComponent,
+    SectionComponent,
+    BuilderContainerComponent,
+    BuilderLinkedContainerComponent,
+    BuilderRepeaterComponent,
+    PanelComponent,
+    PanelChildComponent,
+    LayerTreeComponent,
+    InteractionsPanelComponent,
+];
+class IoxBuilderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, declarations: [BuilderComponent,
+            RenderDirective,
+            IoxDraggableDirective,
+            IoxDropzoneDirective,
+            OverlayComponent,
+            ToolbarComponent,
+            SectionComponent,
+            BuilderContainerComponent,
+            BuilderLinkedContainerComponent,
+            BuilderRepeaterComponent,
+            PanelComponent,
+            PanelChildComponent,
+            LayerTreeComponent,
+            InteractionsPanelComponent], imports: [CommonModule,
+            FormsModule,
+            DragDropModule,
+            AccordionModule,
+            ButtonModule,
+            PopoverModule,
+            InputTextModule,
+            SelectModule,
+            TooltipModule,
+            DialogModule,
+            IoxPageModule], exports: [
+            // Angular/PrimeNG modules re-exported so consumers can use them
+            CommonModule,
+            FormsModule,
+            DragDropModule,
+            AccordionModule,
+            ButtonModule,
+            PopoverModule,
+            InputTextModule,
+            SelectModule,
+            TooltipModule,
+            DialogModule,
+            IoxPageModule,
+            // Builder declarations
+            BuilderComponent,
+            RenderDirective,
+            IoxDraggableDirective,
+            IoxDropzoneDirective,
+            OverlayComponent,
+            ToolbarComponent,
+            SectionComponent,
+            BuilderContainerComponent,
+            BuilderLinkedContainerComponent,
+            BuilderRepeaterComponent,
+            PanelComponent,
+            PanelChildComponent,
+            LayerTreeComponent,
+            InteractionsPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, providers: [
+            DragEngineService,
+            OverlayService,
+            ComponentRegistryService,
+            DataSourceRegistryService,
+            InteractionEngineService,
+            ViewportService,
+            StyleRegistryService,
+            PanelEventService,
+        ], imports: [CommonModule,
+            FormsModule,
+            DragDropModule,
+            AccordionModule,
+            ButtonModule,
+            PopoverModule,
+            InputTextModule,
+            SelectModule,
+            TooltipModule,
+            DialogModule,
+            IoxPageModule, 
+            // Angular/PrimeNG modules re-exported so consumers can use them
+            CommonModule,
+            FormsModule,
+            DragDropModule,
+            AccordionModule,
+            ButtonModule,
+            PopoverModule,
+            InputTextModule,
+            SelectModule,
+            TooltipModule,
+            DialogModule,
+            IoxPageModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: DECLARATIONS,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        AccordionModule,
+                        ButtonModule,
+                        PopoverModule,
+                        InputTextModule,
+                        SelectModule,
+                        TooltipModule,
+                        DialogModule,
+                        IoxPageModule,
+                    ],
+                    providers: [
+                        DragEngineService,
+                        OverlayService,
+                        ComponentRegistryService,
+                        DataSourceRegistryService,
+                        InteractionEngineService,
+                        ViewportService,
+                        StyleRegistryService,
+                        PanelEventService,
+                    ],
+                    exports: [
+                        // Angular/PrimeNG modules re-exported so consumers can use them
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        AccordionModule,
+                        ButtonModule,
+                        PopoverModule,
+                        InputTextModule,
+                        SelectModule,
+                        TooltipModule,
+                        DialogModule,
+                        IoxPageModule,
+                        // Builder declarations
+                        BuilderComponent,
+                        RenderDirective,
+                        IoxDraggableDirective,
+                        IoxDropzoneDirective,
+                        OverlayComponent,
+                        ToolbarComponent,
+                        SectionComponent,
+                        BuilderContainerComponent,
+                        BuilderLinkedContainerComponent,
+                        BuilderRepeaterComponent,
+                        PanelComponent,
+                        PanelChildComponent,
+                        LayerTreeComponent,
+                        InteractionsPanelComponent,
+                    ],
+                    schemas: [NO_ERRORS_SCHEMA],
+                }]
+        }] });
+
+class BuilderButtonComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Button', 'app-builder-button', 'ph-thin ph-cursor-click', 'Basic');
+        this.inputs = {
+            label: 'text',
+            link: 'text',
+            variant: 'select'
+        };
+        this.traits = [
+            new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Click me'),
+            new TraitConfig('link', 'Link', TraitInputType.Text, undefined, '#'),
+            new TraitConfig('variant', 'Variant', TraitInputType.Select, ['primary', 'outlined', 'text'], 'primary'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new TypographyGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+    }
+}
+
+class CardComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Card', 'app-card', 'ph-thin ph-cards', 'Content');
+        this.inputs = {
+            title: 'text',
+            image: 'image',
+            description: 'text'
+        };
+        this.traits = [
+            new TraitConfig('title', 'Title', TraitInputType.Text, undefined, 'Default Title'),
+            new TraitConfig('image', 'Image URL', TraitInputType.Media, { mode: 'compact' }, 'https://via.placeholder.com/150'),
+            new TraitConfig('description', 'Description', TraitInputType.Text, undefined, 'This is a default card description.')
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '200px',
+            height: 'auto',
+            padding: '16px 16px 16px 16px',
+            borderWidth: '1px 1px 1px 1px',
+            borderStyle: 'solid',
+            borderColor: '#cccccc',
+            borderRadius: '8px',
+            backgroundColor: '#ffffff',
+        });
+    }
+}
+
+class BuilderContainerComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Container', 'app-builder-container', 'ph-thin ph-square', 'Layout');
+        this.children = [];
+        this.traits = [];
+        this.styleTraits = [
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: 'auto',
+            minHeight: '200px',
+            display: 'block',
+            backgroundColor: 'transparent',
+        });
+    }
+}
+
+class BuilderDividerComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Divider', 'app-builder-divider', 'ph-thin ph-minus', 'Layout');
+        this.traits = [];
+        this.styleTraits = [
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: '1px',
+            backgroundColor: '#cccccc',
+            margin: '8px 0px 8px 0px',
+        });
+    }
+}
+
+class BuilderHeadingComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Heading', 'app-builder-heading', 'ph-thin ph-text-h', 'Basic');
+        this.traits = [
+            new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Heading'),
+            new TraitConfig('level', 'Level', TraitInputType.Select, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 'h2'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new TypographyGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            fontSize: '32px',
+            fontWeight: '700',
+            width: 'auto',
+        });
+    }
+}
+
+class BuilderIconComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Icon', 'app-builder-icon', 'ph-thin ph-star', 'Basic');
+        this.traits = [
+            new TraitConfig('iconClass', 'Icon', TraitInputType.Icon, undefined, 'ph-thin ph-star'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new GroupStyleConfig(StyleCategory.Typography, [
+                new TraitConfig('fontSize', 'Size', TraitInputType.Scrub, { min: 8, max: 200, step: 1, units: UNITS_FIXED }, '24px'),
+                new TraitConfig('color', 'Color', TraitInputType.Color, { allowGradient: false, allowTransparent: false, formats: ['hex', 'rgb', 'hsl'] }, '#374151'),
+            ]),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+    }
+}
+
+class BuilderImageComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Image', 'app-builder-image', 'ph-thin ph-image', 'Basic');
+        this.inputs = {
+            src: 'text',
+            alt: 'text',
+            objectFit: 'select'
+        };
+        this.traits = [
+            new TraitConfig('src', 'Image URL', TraitInputType.Media, { mode: 'compact' }, 'https://placehold.co/600x400?text=Image'),
+            new TraitConfig('alt', 'Alt Text', TraitInputType.Text, undefined, 'Image'),
+            new TraitConfig('objectFit', 'Object Fit', TraitInputType.Select, ['cover', 'contain', 'fill', 'none'], 'cover'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '300px',
+            aspectRatio: '1/1',
+        });
+    }
+}
+
+class BuilderLinkComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Link', 'app-builder-link', 'ph-thin ph-link', 'Basic');
+        this.inputs = {
+            label: 'text',
+            linkType: 'select',
+            url: 'text',
+            pageRoute: 'text',
+            target: 'select',
+        };
+        this.traits = [
+            new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Click here'),
+            new TraitConfig('linkType', 'Link Type', TraitInputType.Select, [{ label: 'External URL', value: 'external' }, { label: 'Website Page', value: 'page' }], 'external'),
+            new TraitConfig('url', 'URL', TraitInputType.Text, undefined, 'https://', false, { trait: 'linkType', values: 'external' }),
+            new TraitConfig('pageRoute', 'Page Route', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: 'page' }),
+            new TraitConfig('target', 'Target', TraitInputType.Select, [
+                { label: 'Same tab', value: '_self' },
+                { label: 'New tab', value: '_blank' },
+                { label: 'Parent frame', value: '_parent' },
+                { label: 'Full window', value: '_top' },
+            ], '_self'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new TypographyGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+    }
+}
+
+class BuilderLinkedContainerConfig extends ComponentConfig {
+    constructor() {
+        super('LinkedContainer', 'app-builder-linked-container', 'ph-thin ph-link-simple', 'Layout');
+        this.children = [];
+        this.inputs = {
+            linkType: 'select',
+            url: 'text',
+            pageRoute: 'text',
+            target: 'select',
+        };
+        this.traits = [
+            new TraitConfig('linkType', 'Link Type', TraitInputType.Select, [{ label: 'External URL', value: 'external' }, { label: 'Website Page', value: 'page' }], 'external'),
+            new TraitConfig('url', 'URL', TraitInputType.Text, undefined, 'https://', false, { trait: 'linkType', values: 'external' }),
+            new TraitConfig('pageRoute', 'Page Route', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: 'page' }),
+            new TraitConfig('target', 'Target', TraitInputType.Select, [
+                { label: 'Same tab', value: '_self' },
+                { label: 'New tab', value: '_blank' },
+                { label: 'Parent frame', value: '_parent' },
+                { label: 'Full window', value: '_top' },
+            ], '_self'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: 'auto',
+            height: 'auto',
+            minHeight: '80px',
+            display: 'block',
+        });
+    }
+}
+
+class RepeaterComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Repeater', 'app-builder-repeater', 'ph-thin ph-repeat', 'Data');
+        this.children = [];
+        this.traits = [
+            {
+                name: 'source',
+                label: 'Source',
+                type: TraitInputType.Select,
+                options: [], // populated at runtime from DataSourceRegistryService aliases
+                default: '',
+            },
+            {
+                name: 'limit',
+                label: 'Limit',
+                type: TraitInputType.Number,
+                default: 10,
+            },
+        ];
+        this.styleTraits = [
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: 'auto',
+        });
+    }
+}
+
+class SectionComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Section', 'app-section', 'ph-thin ph-rows', 'Layout');
+        this.children = []; // marks this config as a layout component — RenderDirective checks `node.children !== undefined`
+        this.traits = [];
+        this.styleTraits = [
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: 'auto',
+            height: 'auto',
+            minHeight: '200px',
+            display: 'block',
+            backgroundColor: 'transparent',
+        });
+    }
+}
+
+class BuilderSpacerComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Spacer', 'app-builder-spacer', 'ph-thin ph-arrows-vertical', 'Layout');
+        this.traits = [];
+        this.styleTraits = [
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '100%',
+            height: '40px',
+        });
+    }
+}
+
+class TextBlockComponentConfig extends ComponentConfig {
+    constructor() {
+        super('Text', 'app-text-block', 'ph-thin ph-text-aa', 'Basic');
+        this.inputs = {
+            content: 'text',
+            tag: 'select',
+        };
+        this.traits = [
+            new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
+            new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
+        ];
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new LayoutGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new TypographyGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        this.applyStyleDefaults({
+            width: '200px',
+            height: 'auto',
+        });
+    }
+}
+
+/*
+ * Public API Surface of @vectoriox/iox-builder
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACTION_TYPE_OPTIONS, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+//# sourceMappingURL=vectoriox-iox-builder.mjs.map