@vectoriox/iox-builder 1.7.3 → 1.7.5

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1838,305 +1838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
-/**
- * MoveableCanvasService — Phase 1 of the Moveable + Selecto migration
- * (see iox-ai-guidance/architecture/builder/moveable-migration.md).
- *
- * Drives DRAG for the SELECTED element via Moveable instead of interact.js, while REUSING the
- * proven reorder machinery (`DragEngineService.handleDrop`). It is a pure INPUT device: during a
- * drag it applies a TRANSIENT transform, and on drop it RESETS the transform to nothing and instead
- * reorders the layout tree (constraint C1 — a persisted transform on an in-flow canvas element
- * breaks Lenis scroll). Everything here runs ONLY when `moveableMode` is on; interact.js is
- * untouched, so the flag-off path is byte-identical to today.
- *
- * Scale: Moveable reads `getBoundingClientRect()` (already post-scale) and works in viewport
- * client coordinates, so drop hit-testing via `elementsFromPoint` / rects is scale-correct without
- * extra math. The control box is rendered into the same overlay container the selection overlay uses.
- */
-class MoveableCanvasService {
-    constructor(dragEngine) {
-        this.dragEngine = dragEngine;
-        this.moveable = null;
-        this.container = null;
-        this.scaleGetter = () => 1;
-        this.target = null;
-        this.node = null;
-        this.sourceId = null;
-        /** Called after a successful reorder so the host can emit LAYOUT_CHANGED / refresh selection. */
-        this.onReorder = null;
-    }
-    /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom. */
-    init(container, scaleGetter) {
-        this.container = container;
-        this.scaleGetter = scaleGetter;
-    }
-    /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
-    select(element, node) {
-        this.target = null;
-        this.node = null;
-        this.sourceId = null;
-        if (!element || !node || !this.container) {
-            this.destroyMoveable();
-            return;
-        }
-        // Preview clones (repeater/slider rows) and hidden nodes are not editable.
-        if (element.closest('[data-iox-hidden]') || node.__previewClone) {
-            this.destroyMoveable();
-            return;
-        }
-        this.target = element;
-        this.node = node;
-        this.sourceId = this.resolveDropzoneId(element);
-        this.ensureMoveable();
-        this.moveable.target = element;
-        // Drag is initiated by grabbing the ELEMENT itself (like interact.js) — not a Moveable
-        // overlay area — so a plain click still passes through to selection/child-selection and only
-        // a movement past the threshold starts a drag. Keeps Moveable visually silent (no hit-area box).
-        this.moveable.dragTarget = element;
-        this.moveable.updateRect();
-    }
-    /** Recompute the control-box position (call on scroll/zoom/layout changes). */
-    refresh() { this.moveable?.updateRect(); }
-    destroy() { this.destroyMoveable(); this.container = null; }
-    // ── internals ────────────────────────────────────────────────────────────
-    ensureMoveable() {
-        if (this.moveable)
-            return;
-        this.moveable = new Moveable(this.container, {
-            target: undefined,
-            draggable: true,
-            resizable: false, // Phase 3
-            rotatable: false, // Phase 3 (out-of-flow only)
-            origin: false,
-            zoom: 1,
-            // INVISIBLE interaction layer: the builder's OverlayService owns ALL selection visuals
-            // (pink outline, hover margin/padding rings, toolbar, badges). Moveable must draw nothing
-            // here — it only provides the draggable hit-area. `iox-moveable-silent` + the SCSS in
-            // builder.component.scss hide any residual control chrome and drop it below the overlay.
-            hideDefaultLines: true,
-            renderDirections: [],
-            className: 'iox-moveable-silent',
-        });
-        this.moveable.on('dragStart', (e) => {
-            // Never start a drag from inside inline text editing.
-            if (e.inputEvent?.target?.closest?.('[contenteditable="true"]')) {
-                e.stop?.();
-            }
-        });
-        // Transient transform only — visual feedback during the drag.
-        this.moveable.on('drag', (e) => { e.target.style.transform = e.transform; });
-        this.moveable.on('dragEnd', (e) => this.commitDrag(e));
-    }
-    destroyMoveable() {
-        if (this.moveable) {
-            this.moveable.destroy();
-            this.moveable = null;
-        }
-    }
-    commitDrag(e) {
-        const el = e.target;
-        // C1: never persist the transform — reset it; the result is a tree reorder, not a position.
-        el.style.transform = '';
-        if (!this.node)
-            return;
-        const pointer = this.lastPointer(e);
-        if (!pointer) {
-            this.onReorder?.();
-            return;
-        }
-        const targetId = this.dropzoneUnderPoint(pointer.x, pointer.y, el);
-        if (!targetId) {
-            this.onReorder?.();
-            return;
-        }
-        const children = this.dragEngine.getData(targetId);
-        const cdr = this.dragEngine.getCdr(targetId);
-        if (!children || !cdr) {
-            this.onReorder?.();
-            return;
-        }
-        const insertIndex = this.calcInsertIndex(targetId, pointer.y);
-        const srcChildren = this.sourceId ? this.dragEngine.getData(this.sourceId) : undefined;
-        const sourceIndex = srcChildren ? srcChildren.indexOf(this.node) : -1;
-        const payload = { type: 'internal', data: this.node, sourceId: this.sourceId ?? null, sourceIndex };
-        this.dragEngine.handleDrop(children, { payload, targetId, insertIndex }, targetId, cdr, () => {
-            this.onReorder?.();
-            // Re-point the control box at the moved element's (possibly new) host.
-            setTimeout(() => this.moveable?.updateRect(), 0);
-        });
-    }
-    /** Final pointer position from the Moveable end event (client/viewport px). */
-    lastPointer(e) {
-        const ie = e.inputEvent;
-        if (ie && typeof ie.clientX === 'number')
-            return { x: ie.clientX, y: ie.clientY };
-        if (Array.isArray(e.clientX))
-            return { x: e.clientX[0], y: e.clientY[0] };
-        if (typeof e.clientX === 'number')
-            return { x: e.clientX, y: e.clientY };
-        return null;
-    }
-    /** Walk up from an element to the nearest registered dropzone id (el.id is stamped by DragEngine). */
-    resolveDropzoneId(el) {
-        let e = el;
-        while (e) {
-            if (e.id && this.dragEngine.getData(e.id) !== undefined)
-                return e.id;
-            e = e.parentElement;
-        }
-        return null;
-    }
-    /** Topmost registered dropzone under the pointer that is NOT inside the dragged element's subtree. */
-    dropzoneUnderPoint(x, y, draggedEl) {
-        const stack = document.elementsFromPoint(x, y);
-        for (const el of stack) {
-            const id = this.resolveDropzoneId(el);
-            if (!id)
-                continue;
-            const zoneEl = document.getElementById(id);
-            if (zoneEl && draggedEl.contains(zoneEl))
-                continue; // don't drop into own subtree
-            return id;
-        }
-        return null;
-    }
-    /** Insertion index within a dropzone by comparing pointer Y to each child's vertical midpoint. */
-    calcInsertIndex(targetId, y) {
-        const zoneEl = document.getElementById(targetId);
-        if (!zoneEl)
-            return 0;
-        const childWraps = Array.from(zoneEl.children).filter((c) => c.matches('.container-child, .section-child, [data-iox-draggable]'));
-        let idx = 0;
-        for (const w of childWraps) {
-            const r = w.getBoundingClientRect();
-            if (y > r.top + r.height / 2)
-                idx++;
-        }
-        return idx;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, deps: [{ token: DragEngineService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DragEngineService }] });
-
-// Virtual trait → composed CSS property helpers.
-//
-// Several style traits are "virtual" — they don't map 1:1 to a CSS property but
-// are components of a multi-function CSS value.  composeVirtualTraits() strips
-// these virtual keys from the style map and replaces them with the correctly
-// composed CSS properties (filter, backdrop-filter, transform, transition).
-//
-// The same function is used by the render directive (initial mount + state
-// restore) and by the style panel's onUpdate / setStateOverride paths, so
-// the CSS output is always consistent regardless of how styles are applied.
-// ─── Filter ──────────────────────────────────────────────────────────────────
-const FILTER_FUNS = [
-    ['filterBlur', 'blur', '0px'],
-    ['filterBrightness', 'brightness', '1'],
-    ['filterContrast', 'contrast', '1'],
-    ['filterGrayscale', 'grayscale', '0'],
-    ['filterSaturate', 'saturate', '1'],
-    ['filterHueRotate', 'hue-rotate', '0deg'],
-    ['filterSepia', 'sepia', '0'],
-    ['filterInvert', 'invert', '0'],
-];
-// ─── Backdrop-filter ─────────────────────────────────────────────────────────
-const BACKDROP_FUNS = [
-    ['backdropBlur', 'blur', '0px'],
-    ['backdropBrightness', 'brightness', '1'],
-    ['backdropContrast', 'contrast', '1'],
-    ['backdropSaturate', 'saturate', '1'],
-];
-// ─── Transform ───────────────────────────────────────────────────────────────
-const TRANSFORM_FUNS = [
-    ['translateX', 'translateX', '0px'],
-    ['translateY', 'translateY', '0px'],
-    ['scaleX', 'scaleX', '1'],
-    ['scaleY', 'scaleY', '1'],
-    ['rotate', 'rotate', '0deg'],
-    ['skewX', 'skewX', '0deg'],
-    ['skewY', 'skewY', '0deg'],
-];
-// ─── ::marker pseudo-element ─────────────────────────────────────────────────
-const MARKER_FUNS = [
-    ['markerColor', 'color'],
-    ['markerFontSize', 'fontSize'],
-];
-// ─── All virtual trait names ──────────────────────────────────────────────────
-const VIRTUAL_TRAIT_KEYS = new Set([
-    ...FILTER_FUNS.map(([t]) => t),
-    ...BACKDROP_FUNS.map(([t]) => t),
-    ...TRANSFORM_FUNS.map(([t]) => t),
-    'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
-    ...MARKER_FUNS.map(([t]) => t),
-]);
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-function buildFns(funs, src) {
-    return funs
-        .filter(([t, , d]) => src[t] != null && src[t] !== '' && src[t] !== d)
-        .map(([t, fn]) => `${fn}(${src[t]})`)
-        .join(' ');
-}
-// ─── Public API ───────────────────────────────────────────────────────────────
-/**
- * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
- *
- * When composing a partial state-override map (hover, active…), pass the full
- * base style map as `base` so non-overridden components (e.g. filterBrightness
- * when only filterBlur is overridden) are preserved in the composed output.
- * When operating on a complete style map, omit `base` — it defaults to `raw`.
- */
-function composeVirtualTraits(raw, base = raw) {
-    // Copy all non-virtual properties as-is
-    const result = {};
-    for (const [k, v] of Object.entries(raw)) {
-        if (!VIRTUAL_TRAIT_KEYS.has(k))
-            result[k] = v;
-    }
-    // Merge base values for any virtual key absent from the partial override map
-    const merged = (funs) => {
-        const m = {};
-        for (const [t] of funs)
-            m[t] = raw[t] ?? base[t];
-        return m;
-    };
-    // filter
-    const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
-    if (filterStr)
-        result['filter'] = filterStr;
-    // backdrop-filter
-    const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
-    if (backdropStr)
-        result['backdropFilter'] = backdropStr;
-    // transform
-    const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
-    if (transformStr)
-        result['transform'] = transformStr;
-    // transition — only emit when duration is non-zero
-    const dur = raw['transitionDuration'] ?? base['transitionDuration'];
-    const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
-    const del = raw['transitionDelay'] ?? base['transitionDelay'];
-    if (dur && ease && dur !== '0ms' && dur !== '0s') {
-        const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
-        result['transition'] = `all ${dur} ${ease}${delPart}`;
-    }
-    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
-    // can emit a separate `.iox-node-{id}::marker { … }` rule.
-    const markerStyles = {};
-    for (const [trait, cssProp] of MARKER_FUNS) {
-        const val = raw[trait] ?? base[trait];
-        if (val != null && val !== '')
-            markerStyles[cssProp] = val;
-    }
-    if (Object.keys(markerStyles).length) {
-        result['__markerStyles'] = markerStyles;
-    }
-    return result;
-}
-
 var StyleCategory;
 (function (StyleCategory) {
     StyleCategory["Layout"] = "Layout";
@@ -2805,46 +2506,389 @@ class StyleRegistryService {
         }
         this.flush();
     }
-    destroy() {
-        this.rules.clear();
-        if (this.styleEl) {
-            this.styleEl.remove();
-            this.styleEl = null;
-        }
+    destroy() {
+        this.rules.clear();
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    }
+    compile(className, styles) {
+        // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
+        // the shared style-compiler so the SSR engine produces byte-identical output.
+        // The inner/outer partition + selector emission stay here (builder-only concern).
+        const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS);
+        if (!decls.length)
+            return '';
+        const body = decls.map(d => `  ${d};`).join('\n');
+        return `.${className} {\n${body}\n}`;
+    }
+    flush() {
+        if (!this.styleEl || this._flushPending)
+            return;
+        this._flushPending = true;
+        requestAnimationFrame(() => {
+            this._flushPending = false;
+            if (!this.styleEl)
+                return;
+            // __tokens__ always first so variables are available to all subsequent rules
+            const tokenBlock = this.rules.get('__tokens__');
+            const rest = Array.from(this.rules.entries())
+                .filter(([k]) => k !== '__tokens__')
+                .map(([, v]) => v);
+            this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
+            this.changes$.next();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * MoveableCanvasService — Phase 1 of the Moveable + Selecto migration
+ * (see iox-ai-guidance/architecture/builder/moveable-migration.md).
+ *
+ * Drives DRAG for the SELECTED element via Moveable instead of interact.js, while REUSING the
+ * proven reorder machinery (`DragEngineService.handleDrop`). It is a pure INPUT device: during a
+ * drag it applies a TRANSIENT transform, and on drop it RESETS the transform to nothing and instead
+ * reorders the layout tree (constraint C1 — a persisted transform on an in-flow canvas element
+ * breaks Lenis scroll). Everything here runs ONLY when `moveableMode` is on; interact.js is
+ * untouched, so the flag-off path is byte-identical to today.
+ *
+ * Scale: Moveable reads `getBoundingClientRect()` (already post-scale) and works in viewport
+ * client coordinates, so drop hit-testing via `elementsFromPoint` / rects is scale-correct without
+ * extra math. The control box is rendered into the same overlay container the selection overlay uses.
+ */
+class MoveableCanvasService {
+    constructor(dragEngine, styleRegistry) {
+        this.dragEngine = dragEngine;
+        this.styleRegistry = styleRegistry;
+        this.moveable = null;
+        this.container = null;
+        this.scaleGetter = () => 1;
+        this.target = null;
+        this.node = null;
+        this.sourceId = null;
+        /** Called after a successful reorder so the host can emit LAYOUT_CHANGED / refresh selection. */
+        this.onReorder = null;
+        /** Called after a geometry commit (resize) so the host can emit LAYOUT_CHANGED (undo/save). */
+        this.onLayoutChanged = null;
+    }
+    /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom. */
+    init(container, scaleGetter) {
+        this.container = container;
+        this.scaleGetter = scaleGetter;
+    }
+    /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
+    select(element, node) {
+        this.target = null;
+        this.node = null;
+        this.sourceId = null;
+        if (!element || !node || !this.container) {
+            this.destroyMoveable();
+            return;
+        }
+        // Preview clones (repeater/slider rows) and hidden nodes are not editable.
+        if (element.closest('[data-iox-hidden]') || node.__previewClone) {
+            this.destroyMoveable();
+            return;
+        }
+        this.target = element;
+        this.node = node;
+        this.sourceId = this.resolveDropzoneId(element);
+        this.ensureMoveable();
+        this.moveable.target = element;
+        // Drag is initiated by grabbing the ELEMENT itself (like interact.js) — not a Moveable
+        // overlay area — so a plain click still passes through to selection/child-selection and only
+        // a movement past the threshold starts a drag. Keeps Moveable visually silent (no hit-area box).
+        this.moveable.dragTarget = element;
+        this.moveable.updateRect();
+    }
+    /** Recompute the control-box position (call on scroll/zoom/layout changes). */
+    refresh() { this.moveable?.updateRect(); }
+    destroy() { this.destroyMoveable(); this.container = null; }
+    // ── internals ────────────────────────────────────────────────────────────
+    ensureMoveable() {
+        if (this.moveable)
+            return;
+        this.moveable = new Moveable(this.container, {
+            target: undefined,
+            draggable: true,
+            resizable: true, // Phase 3 — corner handles → styleProps width/height (C2)
+            rotatable: false, // (out-of-flow only — C1)
+            origin: false,
+            zoom: 1,
+            // The OverlayService owns ALL selection visuals (pink outline, hover margin/padding rings,
+            // toolbar, badges) — Moveable draws NO box/lines. It shows ONLY the 4 corner RESIZE handles
+            // (renderDirections) and provides the drag hit-area. `iox-moveable-silent` + SCSS in
+            // builder.component.scss hide the lines and style the handles to match, below the overlay.
+            hideDefaultLines: true,
+            renderDirections: ['nw', 'ne', 'sw', 'se'],
+            className: 'iox-moveable-silent',
+        });
+        this.moveable.on('dragStart', (e) => {
+            // Never start a drag from inside inline text editing.
+            if (e.inputEvent?.target?.closest?.('[contenteditable="true"]')) {
+                e.stop?.();
+            }
+        });
+        // Transient transform only — visual feedback during the drag (C1: reset on drop).
+        this.moveable.on('drag', (e) => { e.target.style.transform = e.transform; });
+        this.moveable.on('dragEnd', (e) => this.commitDrag(e));
+        // Resize: live inline width/height for feedback, then commit to styleProps on end (C2 — never
+        // a transform:scale, so no Lenis-scroll break; the panel + save + SSR all see the real size).
+        this.moveable.on('resize', (e) => {
+            e.target.style.width = `${Math.round(e.width)}px`;
+            e.target.style.height = `${Math.round(e.height)}px`;
+            e.target.style.transform = e.drag.transform; // keeps the box anchored while resizing
+        });
+        this.moveable.on('resizeEnd', (e) => this.commitResize(e));
+    }
+    destroyMoveable() {
+        if (this.moveable) {
+            this.moveable.destroy();
+            this.moveable = null;
+        }
+    }
+    commitDrag(e) {
+        const el = e.target;
+        // C1: never persist the transform — reset it; the result is a tree reorder, not a position.
+        el.style.transform = '';
+        if (!this.node)
+            return;
+        const pointer = this.lastPointer(e);
+        if (!pointer) {
+            this.onReorder?.();
+            return;
+        }
+        const targetId = this.dropzoneUnderPoint(pointer.x, pointer.y, el);
+        if (!targetId) {
+            this.onReorder?.();
+            return;
+        }
+        const children = this.dragEngine.getData(targetId);
+        const cdr = this.dragEngine.getCdr(targetId);
+        if (!children || !cdr) {
+            this.onReorder?.();
+            return;
+        }
+        const insertIndex = this.calcInsertIndex(targetId, pointer.y);
+        const srcChildren = this.sourceId ? this.dragEngine.getData(this.sourceId) : undefined;
+        const sourceIndex = srcChildren ? srcChildren.indexOf(this.node) : -1;
+        const payload = { type: 'internal', data: this.node, sourceId: this.sourceId ?? null, sourceIndex };
+        this.dragEngine.handleDrop(children, { payload, targetId, insertIndex }, targetId, cdr, () => {
+            this.onReorder?.();
+            // Re-point the control box at the moved element's (possibly new) host.
+            setTimeout(() => this.moveable?.updateRect(), 0);
+        });
+    }
+    commitResize(e) {
+        const el = e.target;
+        el.style.transform = ''; // C1: never persist a transform on an in-flow canvas element
+        if (!this.node) {
+            return;
+        }
+        const last = e.lastEvent ?? e;
+        const w = Math.round(last.width ?? el.getBoundingClientRect().width);
+        const h = Math.round(last.height ?? el.getBoundingClientRect().height);
+        // C2: geometry goes to styleProps (width/height) — never a transform:scale.
+        this.applyStyle(this.node, { width: `${w}px`, height: `${h}px` });
+        // Clear the transient inline size so the styleProps `.iox-node` rule drives it (single source).
+        el.style.width = '';
+        el.style.height = '';
+        this.onLayoutChanged?.();
+        setTimeout(() => this.moveable?.updateRect(), 0);
+    }
+    /** Write geometry changes into the node's styleTraits (the serialized source of truth) and the
+     *  central stylesheet, so the style panel, save (self-describing), and SSR engine all agree. */
+    applyStyle(node, changes) {
+        const styles = {};
+        for (const group of (node.styleTraits ?? [])) {
+            for (const trait of (group.traits ?? [])) {
+                if (trait.name in changes)
+                    trait.default = changes[trait.name];
+                if (trait.name !== undefined && trait.default !== undefined)
+                    styles[trait.name] = trait.default;
+            }
+        }
+        const cssId = node.styleId ?? node.id;
+        if (cssId)
+            this.styleRegistry.upsert(cssId, styles);
+    }
+    /** Final pointer position from the Moveable end event (client/viewport px). */
+    lastPointer(e) {
+        const ie = e.inputEvent;
+        if (ie && typeof ie.clientX === 'number')
+            return { x: ie.clientX, y: ie.clientY };
+        if (Array.isArray(e.clientX))
+            return { x: e.clientX[0], y: e.clientY[0] };
+        if (typeof e.clientX === 'number')
+            return { x: e.clientX, y: e.clientY };
+        return null;
+    }
+    /** Walk up from an element to the nearest registered dropzone id (el.id is stamped by DragEngine). */
+    resolveDropzoneId(el) {
+        let e = el;
+        while (e) {
+            if (e.id && this.dragEngine.getData(e.id) !== undefined)
+                return e.id;
+            e = e.parentElement;
+        }
+        return null;
+    }
+    /** Topmost registered dropzone under the pointer that is NOT inside the dragged element's subtree. */
+    dropzoneUnderPoint(x, y, draggedEl) {
+        const stack = document.elementsFromPoint(x, y);
+        for (const el of stack) {
+            const id = this.resolveDropzoneId(el);
+            if (!id)
+                continue;
+            const zoneEl = document.getElementById(id);
+            if (zoneEl && draggedEl.contains(zoneEl))
+                continue; // don't drop into own subtree
+            return id;
+        }
+        return null;
+    }
+    /** Insertion index within a dropzone by comparing pointer Y to each child's vertical midpoint. */
+    calcInsertIndex(targetId, y) {
+        const zoneEl = document.getElementById(targetId);
+        if (!zoneEl)
+            return 0;
+        const childWraps = Array.from(zoneEl.children).filter((c) => c.matches('.container-child, .section-child, [data-iox-draggable]'));
+        let idx = 0;
+        for (const w of childWraps) {
+            const r = w.getBoundingClientRect();
+            if (y > r.top + r.height / 2)
+                idx++;
+        }
+        return idx;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, deps: [{ token: DragEngineService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: MoveableCanvasService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: StyleRegistryService }] });
+
+// Virtual trait → composed CSS property helpers.
+//
+// Several style traits are "virtual" — they don't map 1:1 to a CSS property but
+// are components of a multi-function CSS value.  composeVirtualTraits() strips
+// these virtual keys from the style map and replaces them with the correctly
+// composed CSS properties (filter, backdrop-filter, transform, transition).
+//
+// The same function is used by the render directive (initial mount + state
+// restore) and by the style panel's onUpdate / setStateOverride paths, so
+// the CSS output is always consistent regardless of how styles are applied.
+// ─── Filter ──────────────────────────────────────────────────────────────────
+const FILTER_FUNS = [
+    ['filterBlur', 'blur', '0px'],
+    ['filterBrightness', 'brightness', '1'],
+    ['filterContrast', 'contrast', '1'],
+    ['filterGrayscale', 'grayscale', '0'],
+    ['filterSaturate', 'saturate', '1'],
+    ['filterHueRotate', 'hue-rotate', '0deg'],
+    ['filterSepia', 'sepia', '0'],
+    ['filterInvert', 'invert', '0'],
+];
+// ─── Backdrop-filter ─────────────────────────────────────────────────────────
+const BACKDROP_FUNS = [
+    ['backdropBlur', 'blur', '0px'],
+    ['backdropBrightness', 'brightness', '1'],
+    ['backdropContrast', 'contrast', '1'],
+    ['backdropSaturate', 'saturate', '1'],
+];
+// ─── Transform ───────────────────────────────────────────────────────────────
+const TRANSFORM_FUNS = [
+    ['translateX', 'translateX', '0px'],
+    ['translateY', 'translateY', '0px'],
+    ['scaleX', 'scaleX', '1'],
+    ['scaleY', 'scaleY', '1'],
+    ['rotate', 'rotate', '0deg'],
+    ['skewX', 'skewX', '0deg'],
+    ['skewY', 'skewY', '0deg'],
+];
+// ─── ::marker pseudo-element ─────────────────────────────────────────────────
+const MARKER_FUNS = [
+    ['markerColor', 'color'],
+    ['markerFontSize', 'fontSize'],
+];
+// ─── All virtual trait names ──────────────────────────────────────────────────
+const VIRTUAL_TRAIT_KEYS = new Set([
+    ...FILTER_FUNS.map(([t]) => t),
+    ...BACKDROP_FUNS.map(([t]) => t),
+    ...TRANSFORM_FUNS.map(([t]) => t),
+    'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+    ...MARKER_FUNS.map(([t]) => t),
+]);
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function buildFns(funs, src) {
+    return funs
+        .filter(([t, , d]) => src[t] != null && src[t] !== '' && src[t] !== d)
+        .map(([t, fn]) => `${fn}(${src[t]})`)
+        .join(' ');
+}
+// ─── Public API ───────────────────────────────────────────────────────────────
+/**
+ * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
+ *
+ * When composing a partial state-override map (hover, active…), pass the full
+ * base style map as `base` so non-overridden components (e.g. filterBrightness
+ * when only filterBlur is overridden) are preserved in the composed output.
+ * When operating on a complete style map, omit `base` — it defaults to `raw`.
+ */
+function composeVirtualTraits(raw, base = raw) {
+    // Copy all non-virtual properties as-is
+    const result = {};
+    for (const [k, v] of Object.entries(raw)) {
+        if (!VIRTUAL_TRAIT_KEYS.has(k))
+            result[k] = v;
+    }
+    // Merge base values for any virtual key absent from the partial override map
+    const merged = (funs) => {
+        const m = {};
+        for (const [t] of funs)
+            m[t] = raw[t] ?? base[t];
+        return m;
+    };
+    // filter
+    const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
+    if (filterStr)
+        result['filter'] = filterStr;
+    // backdrop-filter
+    const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
+    if (backdropStr)
+        result['backdropFilter'] = backdropStr;
+    // transform
+    const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
+    if (transformStr)
+        result['transform'] = transformStr;
+    // transition — only emit when duration is non-zero
+    const dur = raw['transitionDuration'] ?? base['transitionDuration'];
+    const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
+    const del = raw['transitionDelay'] ?? base['transitionDelay'];
+    if (dur && ease && dur !== '0ms' && dur !== '0s') {
+        const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
+        result['transition'] = `all ${dur} ${ease}${delPart}`;
     }
-    compile(className, styles) {
-        // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
-        // the shared style-compiler so the SSR engine produces byte-identical output.
-        // The inner/outer partition + selector emission stay here (builder-only concern).
-        const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS);
-        if (!decls.length)
-            return '';
-        const body = decls.map(d => `  ${d};`).join('\n');
-        return `.${className} {\n${body}\n}`;
+    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
+    // can emit a separate `.iox-node-{id}::marker { … }` rule.
+    const markerStyles = {};
+    for (const [trait, cssProp] of MARKER_FUNS) {
+        const val = raw[trait] ?? base[trait];
+        if (val != null && val !== '')
+            markerStyles[cssProp] = val;
     }
-    flush() {
-        if (!this.styleEl || this._flushPending)
-            return;
-        this._flushPending = true;
-        requestAnimationFrame(() => {
-            this._flushPending = false;
-            if (!this.styleEl)
-                return;
-            // __tokens__ always first so variables are available to all subsequent rules
-            const tokenBlock = this.rules.get('__tokens__');
-            const rest = Array.from(this.rules.entries())
-                .filter(([k]) => k !== '__tokens__')
-                .map(([, v]) => v);
-            this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
-            this.changes$.next();
-        });
+    if (Object.keys(markerStyles).length) {
+        result['__markerStyles'] = markerStyles;
     }
-    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 }); }
+    return result;
 }
-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;
@@ -2859,8 +2903,9 @@ let dropListCounter = 0;
 const DIRECTIVE_HOST_TYPES = new Set([
     'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
     // Phase 2 (9c): layout components converted to directive-hosts (host IS the real tag).
-    'Section',
+    'Section', 'Container', 'List', 'ListItem',
 ]);
+const CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'];
 /**
  * RenderDirective — applied to <ng-container> to dynamically instantiate a
  * builder component with zero wrapper elements in the DOM.
@@ -2910,6 +2955,14 @@ class RenderDirective {
                 return traitVal('tag') === 'span' ? 'span' : 'p';
             case 'ButtonBlock':
                 return traitVal('tag') === 'a' ? 'a' : 'button';
+            case 'Container':
+            case 'List':
+            case 'ListItem': {
+                const t = traitVal('htmlTag');
+                if (CONTAINER_TAGS.includes(t))
+                    return t;
+                return node.type === 'List' ? 'ul' : node.type === 'ListItem' ? 'li' : 'div';
+            }
             default:
                 return null;
         }
@@ -4245,6 +4298,8 @@ class BuilderComponent {
         // iox-ai-guidance/architecture/builder/moveable-migration.md.
         if (this.moveableMode && this.previewCanvas?.nativeElement) {
             this.moveableCanvas.init(this.previewCanvas.nativeElement, () => this.viewportService.getScale());
+            // Resize commits geometry to styleProps → emit LAYOUT_CHANGED so undo/save pick it up.
+            this.moveableCanvas.onLayoutChanged = () => this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
             this.sub?.add(this.overlayService.select$.subscribe(entry => {
                 this.moveableCanvas.select(entry?.element ?? null, entry?.node ?? null);
             }));
@@ -4836,11 +4891,11 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:5!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-direction{display:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.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: i15.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.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: i15.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
-            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'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:5!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-direction{display:none!important}\n"] }]
+            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'\" title=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             [ngClass]=\"['preview-node', 'iox-outer-' + (item.styleId ?? item.id)]\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
@@ -4998,42 +5053,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
-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
-            }] } });
-
+/**
+ * Directive-host Container (Phase 2 of the Moveable migration = task 9c). The real tag (div/section/
+ * ul/ol/li/…, chosen from the `htmlTag` trait by RenderDirective via `hostElement`) IS the host — no
+ * `<app-builder-container>` wrapper, no separate `.container-root` — matching the SSR engine. The
+ * dropzone is registered on the host itself; the `.container-child` draggable wrappers are UNCHANGED,
+ * so interact.js (flag-off) keeps working. Also backs the List (`ul`/`ol`) and ListItem (`li`) types.
+ * See moveable-migration.md.
+ */
 class BuilderContainerComponent {
-    constructor(dragEngine, cdr) {
+    constructor(elRef, dragEngine, cdr) {
+        this.elRef = elRef;
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.children = [];
@@ -5047,8 +5077,13 @@ class BuilderContainerComponent {
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
     }
-    ngOnInit() { }
-    ngOnDestroy() { }
+    ngOnInit() {
+        // Register the HOST as the dropzone (was the ioxDropzone directive on `.container-root`).
+        this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDropzone(this.dropListId, this.elRef.nativeElement);
+    }
     get listOrientation() {
         const d = this.style?.['display'];
         if (d === 'flex' || d === 'inline-flex') {
@@ -5061,77 +5096,53 @@ class BuilderContainerComponent {
     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: "17.0.0", version: "21.2.11", type: BuilderContainerComponent, isStandalone: false, selector: "app-builder-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <ng-template #dropContent>
-            <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"
-                 [ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
-                 ioxDraggable
-                 [ioxDragData]="child"
-                 [ioxDragSourceId]="dropListId">
-                <ng-container
-                    [ioxRender]="child"
-                    (onClick)="childClick.emit($event)"
-                    (onMouseEnter)="childMouseEnter.emit($event)"
-                    (onMouseLeave)="childMouseLeave.emit()">
-                </ng-container>
-            </div>
-        </ng-template>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, deps: [{ token: i0.ElementRef }, { 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: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
+        <div *ngIf="!children.length" class="container-placeholder">
+            <i class="ph-thin ph-square"></i>
+            <span>Drop components here</span>
+        </div>
 
-        @switch (htmlTag) {
-            @case ('section') { <section class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></section> }
-            @case ('article') { <article class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></article> }
-            @case ('header')  { <header  class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></header> }
-            @case ('footer')  { <footer  class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></footer> }
-            @case ('main')    { <main    class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></main> }
-            @case ('nav')     { <nav     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></nav> }
-            @case ('ul')      { <ul      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ul> }
-            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" [attr.start]="start !== 1 ? start : null" [attr.reversed]="reversed ? '' : null" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
-            @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
-            @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></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;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
+        <div *ngFor="let child of children"
+             [ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+             ioxDraggable
+             [ioxDragData]="child"
+             [ioxDragSourceId]="dropListId">
+            <ng-container
+                [ioxRender]="child"
+                (onClick)="childClick.emit($event)"
+                (onMouseEnter)="childMouseEnter.emit($event)"
+                (onMouseLeave)="childMouseLeave.emit()">
+            </ng-container>
+        </div>
+    `, isInline: true, styles: [":host{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;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder-container', template: `
-        <ng-template #dropContent>
-            <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"
-                 [ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
-                 ioxDraggable
-                 [ioxDragData]="child"
-                 [ioxDragSourceId]="dropListId">
-                <ng-container
-                    [ioxRender]="child"
-                    (onClick)="childClick.emit($event)"
-                    (onMouseEnter)="childMouseEnter.emit($event)"
-                    (onMouseLeave)="childMouseLeave.emit()">
-                </ng-container>
-            </div>
-        </ng-template>
+            args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]', template: `
+        <div *ngIf="!children.length" class="container-placeholder">
+            <i class="ph-thin ph-square"></i>
+            <span>Drop components here</span>
+        </div>
 
-        @switch (htmlTag) {
-            @case ('section') { <section class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></section> }
-            @case ('article') { <article class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></article> }
-            @case ('header')  { <header  class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></header> }
-            @case ('footer')  { <footer  class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></footer> }
-            @case ('main')    { <main    class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></main> }
-            @case ('nav')     { <nav     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></nav> }
-            @case ('ul')      { <ul      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ul> }
-            @case ('ol')      { <ol      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" [attr.start]="start !== 1 ? start : null" [attr.reversed]="reversed ? '' : null" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></ol> }
-            @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
-            @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></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;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+        <div *ngFor="let child of children"
+             [ngClass]="['container-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+             ioxDraggable
+             [ioxDragData]="child"
+             [ioxDragSourceId]="dropListId">
+            <ng-container
+                [ioxRender]="child"
+                (onClick)="childClick.emit($event)"
+                (onMouseEnter)="childMouseEnter.emit($event)"
+                (onMouseLeave)="childMouseLeave.emit()">
+            </ng-container>
+        </div>
+    `, host: {
+                        '[class]': "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')",
+                        '[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
+                        '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
+                    }, standalone: false, styles: [":host{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;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
                 type: Input
@@ -5153,6 +5164,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
+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 BuilderLinkedContainerComponent {
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;