@vectoriox/iox-builder 1.7.4 → 1.7.6

package/fesm2022/vectoriox-iox-builder.mjs

@@ -242,11 +242,18 @@ class OverlayService {
         return this.intersectionRootElement;
     }
     /**
-     * Resolve the inner styled element.
-     * Builder components apply [ngStyle] on their first child element,
-     * so computed styles (padding, margin) live there — not on the host.
+     * Resolve the styled element (the one carrying `.iox-node-{id}` — where padding/margin/size live).
+     * Directive-host components (Image/Heading/Container/Section/…) put `iox-node-{id}` on the HOST
+     * itself, so the host IS the styled element. Legacy wrapper components (Card/Repeater/Slider) put
+     * it on the first child. Prefer the host when it's the styled element; fall back to the first
+     * child otherwise. (Before this, directive-host containers outlined their first child — e.g. a
+     * container's outline landed on the image inside it, desyncing from Moveable's resize handles.)
      */
     getStyledElement(host) {
+        for (let i = 0; i < host.classList.length; i++) {
+            if (host.classList[i].startsWith('iox-node-'))
+                return host;
+        }
         return host.firstElementChild || host;
     }
     // ── Node → Element registry ──────────────────────────────
@@ -1838,469 +1845,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+var StyleCategory;
+(function (StyleCategory) {
+    StyleCategory["Layout"] = "Layout";
+    StyleCategory["Size"] = "Size";
+    StyleCategory["Typography"] = "Typography";
+    StyleCategory["Spacing"] = "Spacing";
+    StyleCategory["Border"] = "Border";
+    StyleCategory["Position"] = "Position";
+    StyleCategory["Background"] = "Background";
+    StyleCategory["Effects"] = "Effects";
+    StyleCategory["List"] = "List";
+    // Legacy — kept for backward compat; prefer Size
+    StyleCategory["Dimensions"] = "Dimensions";
+})(StyleCategory || (StyleCategory = {}));
+var DataSourceType;
+(function (DataSourceType) {
+    DataSourceType["Cms"] = "cms";
+    DataSourceType["Shop"] = "shop";
+    DataSourceType["ExternalApi"] = "external-api";
+    DataSourceType["InternalApi"] = "internal-api";
+    DataSourceType["Static"] = "static";
+})(DataSourceType || (DataSourceType = {}));
 /**
- * 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.
+ * Maps each action type to its logical inverse for auto-populating toggle
+ * reverse actions. Types without a natural inverse are omitted.
  */
-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;
+const INVERSE_ACTION = {
+    fadeIn: 'fadeOut',
+    fadeOut: 'fadeIn',
+    show: 'hide',
+    hide: 'show',
+    scaleIn: 'scaleOut',
+    scaleOut: 'scaleIn',
+    moveUp: 'moveDown',
+    moveDown: 'moveUp',
+    moveLeft: 'moveRight',
+    moveRight: 'moveLeft',
+};
+const TRIGGER_OPTIONS = [
+    { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
+    { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
+    { value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
+    { value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
+    { value: 'scrollProgress', label: 'Scroll progress', icon: 'ph-thin ph-arrow-fat-lines-down' },
+];
+const ACTION_TYPE_OPTIONS = [
+    { value: 'fadeIn', label: 'Fade in' },
+    { value: 'fadeOut', label: 'Fade out' },
+    { value: 'moveUp', label: 'Move up' },
+    { value: 'moveDown', label: 'Move down' },
+    { value: 'moveLeft', label: 'Move left' },
+    { value: 'moveRight', label: 'Move right' },
+    { value: 'scaleIn', label: 'Scale in' },
+    { value: 'scaleOut', label: 'Scale out' },
+    { value: 'rotate', label: 'Rotate' },
+    { value: 'show', label: 'Show' },
+    { value: 'hide', label: 'Hide' },
+    { value: 'toggleVisibility', label: 'Toggle visibility' },
+];
+const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+/** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
+const INTERACTION_STATES = ['hover', 'active', 'focus'];
+/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
+const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
+/**
+ * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
+ * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
+ * so they require the ancestor's css id (`relativeToId`) at compile time.
+ * `RELATIONAL_STATE_BASE` maps each relational state to the ancestor pseudo-class.
+ */
+const RELATIONAL_STATES = ['parent-hover'];
+const RELATIONAL_STATE_BASE = {
+    'parent-hover': 'hover',
+};
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES];
+/**
+ * Build a full StyleTraitGroup[] schema populated with values from a flat
+ * styleProps map. Used when editing a preset in the Style panel — the panel
+ * receives the same `StyleTraitGroup[]` shape regardless of context.
+ */
+function buildPresetStyleTraits(styleProps) {
+    const allGroups = [
+        new LayoutGroupStyleConfig(),
+        new SizeGroupStyleConfig(),
+        new BackgroundGroupStyleConfig(),
+        new SpacingGroupStyleConfig(),
+        new BorderGroupStyleConfig(),
+        new TypographyGroupStyleConfig(),
+        new EffectsGroupStyleConfig(),
+        new PositionGroupStyleConfig(),
+    ];
+    return allGroups.map(group => ({
+        ...group,
+        traits: group.traits.map(trait => ({
+            ...trait,
+            default: styleProps[trait.name] !== undefined ? styleProps[trait.name] : trait.default,
+        })),
+    }));
+}
+var TraitInputType;
+(function (TraitInputType) {
+    TraitInputType["Text"] = "text";
+    TraitInputType["Number"] = "number";
+    TraitInputType["Select"] = "select";
+    TraitInputType["Checkbox"] = "checkbox";
+    TraitInputType["Color"] = "colorPicker";
+    TraitInputType["DirectionalSize"] = "directionalSize";
+    TraitInputType["SelectButton"] = "selectButton";
+    TraitInputType["Scrub"] = "scrub";
+    TraitInputType["Range"] = "range";
+    TraitInputType["Icon"] = "icon";
+    TraitInputType["Media"] = "media";
+    TraitInputType["FontFamily"] = "fontFamily";
+    TraitInputType["GridTemplate"] = "gridTemplate";
+    TraitInputType["SectionLabel"] = "sectionLabel";
+    TraitInputType["Textarea"] = "textarea";
+})(TraitInputType || (TraitInputType = {}));
+function generateNodeId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+class ComponentConfig {
+    constructor(type, selector, icon = 'ph-thin ph-cube', category = 'General') {
+        this.id = generateNodeId();
+        this.type = type;
+        this.selector = selector;
+        this.icon = icon;
+        this.category = category;
+        this.inputs = {};
+        this.traits = [];
+        this.styleTraits = [];
     }
-    /** 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;
+    /** Override specific trait defaults after styleTraits are set.
+     *  Call this at the end of each subclass constructor. */
+    applyStyleDefaults(defaults) {
+        // Single source of truth for container-type width defaults: when a subclass does
+        // not set width explicitly, fill it from the shared DEFAULT_WIDTH_BY_TYPE map — the
+        // same map the SSR engine resolves from. See render-parity.md.
+        if (defaults['width'] === undefined && DEFAULT_WIDTH_BY_TYPE[this.type] !== undefined) {
+            defaults = { ...defaults, width: DEFAULT_WIDTH_BY_TYPE[this.type] };
         }
-        // Preview clones (repeater/slider rows) and hidden nodes are not editable.
-        if (element.closest('[data-iox-hidden]') || node.__previewClone) {
-            this.destroyMoveable();
-            return;
+        for (const group of this.styleTraits) {
+            for (const trait of group.traits) {
+                if (defaults[trait.name] !== undefined) {
+                    trait.default = defaults[trait.name];
+                }
+            }
         }
-        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));
+}
+class TraitConfig {
+    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+        this.name = name;
+        this.label = label;
+        this.type = type;
+        this.options = options;
+        this.default = defaultValue;
+        this.inline = inline;
+        this.showWhen = showWhen;
     }
-    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";
-    StyleCategory["Size"] = "Size";
-    StyleCategory["Typography"] = "Typography";
-    StyleCategory["Spacing"] = "Spacing";
-    StyleCategory["Border"] = "Border";
-    StyleCategory["Position"] = "Position";
-    StyleCategory["Background"] = "Background";
-    StyleCategory["Effects"] = "Effects";
-    StyleCategory["List"] = "List";
-    // Legacy — kept for backward compat; prefer Size
-    StyleCategory["Dimensions"] = "Dimensions";
-})(StyleCategory || (StyleCategory = {}));
-var DataSourceType;
-(function (DataSourceType) {
-    DataSourceType["Cms"] = "cms";
-    DataSourceType["Shop"] = "shop";
-    DataSourceType["ExternalApi"] = "external-api";
-    DataSourceType["InternalApi"] = "internal-api";
-    DataSourceType["Static"] = "static";
-})(DataSourceType || (DataSourceType = {}));
-/**
- * Maps each action type to its logical inverse for auto-populating toggle
- * reverse actions. Types without a natural inverse are omitted.
- */
-const INVERSE_ACTION = {
-    fadeIn: 'fadeOut',
-    fadeOut: 'fadeIn',
-    show: 'hide',
-    hide: 'show',
-    scaleIn: 'scaleOut',
-    scaleOut: 'scaleIn',
-    moveUp: 'moveDown',
-    moveDown: 'moveUp',
-    moveLeft: 'moveRight',
-    moveRight: 'moveLeft',
-};
-const TRIGGER_OPTIONS = [
-    { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
-    { value: 'viewportEnter', label: 'Enter viewport', icon: 'ph-thin ph-eye' },
-    { value: 'click', label: 'Click', icon: 'ph-thin ph-cursor-click' },
-    { value: 'hover', label: 'Hover', icon: 'ph-thin ph-hand-pointing' },
-    { value: 'scrollProgress', label: 'Scroll progress', icon: 'ph-thin ph-arrow-fat-lines-down' },
-];
-const ACTION_TYPE_OPTIONS = [
-    { value: 'fadeIn', label: 'Fade in' },
-    { value: 'fadeOut', label: 'Fade out' },
-    { value: 'moveUp', label: 'Move up' },
-    { value: 'moveDown', label: 'Move down' },
-    { value: 'moveLeft', label: 'Move left' },
-    { value: 'moveRight', label: 'Move right' },
-    { value: 'scaleIn', label: 'Scale in' },
-    { value: 'scaleOut', label: 'Scale out' },
-    { value: 'rotate', label: 'Rotate' },
-    { value: 'show', label: 'Show' },
-    { value: 'hide', label: 'Hide' },
-    { value: 'toggleVisibility', label: 'Toggle visibility' },
-];
-const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
-/** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
-const INTERACTION_STATES = ['hover', 'active', 'focus'];
-/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
-const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
-/**
- * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
- * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
- * so they require the ancestor's css id (`relativeToId`) at compile time.
- * `RELATIONAL_STATE_BASE` maps each relational state to the ancestor pseudo-class.
- */
-const RELATIONAL_STATES = ['parent-hover'];
-const RELATIONAL_STATE_BASE = {
-    'parent-hover': 'hover',
-};
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES];
-/**
- * Build a full StyleTraitGroup[] schema populated with values from a flat
- * styleProps map. Used when editing a preset in the Style panel — the panel
- * receives the same `StyleTraitGroup[]` shape regardless of context.
- */
-function buildPresetStyleTraits(styleProps) {
-    const allGroups = [
-        new LayoutGroupStyleConfig(),
-        new SizeGroupStyleConfig(),
-        new BackgroundGroupStyleConfig(),
-        new SpacingGroupStyleConfig(),
-        new BorderGroupStyleConfig(),
-        new TypographyGroupStyleConfig(),
-        new EffectsGroupStyleConfig(),
-        new PositionGroupStyleConfig(),
-    ];
-    return allGroups.map(group => ({
-        ...group,
-        traits: group.traits.map(trait => ({
-            ...trait,
-            default: styleProps[trait.name] !== undefined ? styleProps[trait.name] : trait.default,
-        })),
-    }));
-}
-var TraitInputType;
-(function (TraitInputType) {
-    TraitInputType["Text"] = "text";
-    TraitInputType["Number"] = "number";
-    TraitInputType["Select"] = "select";
-    TraitInputType["Checkbox"] = "checkbox";
-    TraitInputType["Color"] = "colorPicker";
-    TraitInputType["DirectionalSize"] = "directionalSize";
-    TraitInputType["SelectButton"] = "selectButton";
-    TraitInputType["Scrub"] = "scrub";
-    TraitInputType["Range"] = "range";
-    TraitInputType["Icon"] = "icon";
-    TraitInputType["Media"] = "media";
-    TraitInputType["FontFamily"] = "fontFamily";
-    TraitInputType["GridTemplate"] = "gridTemplate";
-    TraitInputType["SectionLabel"] = "sectionLabel";
-    TraitInputType["Textarea"] = "textarea";
-})(TraitInputType || (TraitInputType = {}));
-function generateNodeId() {
-    return Math.random().toString(36).substr(2, 9);
-}
-class ComponentConfig {
-    constructor(type, selector, icon = 'ph-thin ph-cube', category = 'General') {
-        this.id = generateNodeId();
-        this.type = type;
-        this.selector = selector;
-        this.icon = icon;
-        this.category = category;
-        this.inputs = {};
-        this.traits = [];
-        this.styleTraits = [];
-    }
-    /** Override specific trait defaults after styleTraits are set.
-     *  Call this at the end of each subclass constructor. */
-    applyStyleDefaults(defaults) {
-        // Single source of truth for container-type width defaults: when a subclass does
-        // not set width explicitly, fill it from the shared DEFAULT_WIDTH_BY_TYPE map — the
-        // same map the SSR engine resolves from. See render-parity.md.
-        if (defaults['width'] === undefined && DEFAULT_WIDTH_BY_TYPE[this.type] !== undefined) {
-            defaults = { ...defaults, width: DEFAULT_WIDTH_BY_TYPE[this.type] };
-        }
-        for (const group of this.styleTraits) {
-            for (const trait of group.traits) {
-                if (defaults[trait.name] !== undefined) {
-                    trait.default = defaults[trait.name];
-                }
-            }
-        }
-    }
-}
-class TraitConfig {
-    constructor(name, label, type, options, defaultValue, inline, showWhen) {
-        this.name = name;
-        this.label = label;
-        this.type = type;
-        this.options = options;
-        this.default = defaultValue;
-        this.inline = inline;
-        this.showWhen = showWhen;
-    }
-}
-class GroupStyleConfig {
-    constructor(category, traits) {
-        this.category = category;
-        this.traits = traits;
+}
+class GroupStyleConfig {
+    constructor(category, traits) {
+        this.category = category;
+        this.traits = traits;
     }
 }
 // ─── Unit constants ───────────────────────────────────────────────────────────
@@ -2773,78 +2481,421 @@ class StyleRegistryService {
         else {
             this.rules.delete(nodeId);
         }
-        this.flush();
+        this.flush();
+    }
+    /**
+     * Write the org-level design token variables as a `:root { … }` block.
+     * Token names should be CSS custom property names without the `--` prefix
+     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
+     * Pass an empty object to clear all tokens.
+     */
+    upsertTokens(tokens) {
+        const entries = Object.entries(tokens)
+            .filter(([, v]) => v !== undefined && v !== null && v !== '')
+            .map(([k, v]) => `  --${k}: ${v};`);
+        if (entries.length) {
+            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
+        }
+        else {
+            this.rules.delete('__tokens__');
+        }
+        this.flush();
+    }
+    remove(nodeId) {
+        if (!nodeId)
+            return;
+        // Remove base rule and all state rules for this node
+        this.rules.delete(nodeId);
+        for (const key of this.rules.keys()) {
+            if (key.startsWith(`${nodeId}:`)) {
+                this.rules.delete(key);
+            }
+        }
+        this.flush();
+    }
+    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;
+        }
     }
-    /**
-     * Write the org-level design token variables as a `:root { … }` block.
-     * Token names should be CSS custom property names without the `--` prefix
-     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
-     * Pass an empty object to clear all tokens.
-     */
-    upsertTokens(tokens) {
-        const entries = Object.entries(tokens)
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  --${k}: ${v};`);
-        if (entries.length) {
-            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
+    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;
         }
-        else {
-            this.rules.delete('__tokens__');
+        const targetId = this.dropzoneUnderPoint(pointer.x, pointer.y, el);
+        if (!targetId) {
+            this.onReorder?.();
+            return;
         }
-        this.flush();
+        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);
+        });
     }
-    remove(nodeId) {
-        if (!nodeId)
+    commitResize(e) {
+        const el = e.target;
+        el.style.transform = ''; // C1: never persist a transform on an in-flow canvas element
+        if (!this.node) {
             return;
-        // Remove base rule and all state rules for this node
-        this.rules.delete(nodeId);
-        for (const key of this.rules.keys()) {
-            if (key.startsWith(`${nodeId}:`)) {
-                this.rules.delete(key);
+        }
+        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;
             }
         }
-        this.flush();
+        const cssId = node.styleId ?? node.id;
+        if (cssId)
+            this.styleRegistry.upsert(cssId, styles);
     }
-    destroy() {
-        this.rules.clear();
-        if (this.styleEl) {
-            this.styleEl.remove();
-            this.styleEl = null;
+    /** 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;
     }
-    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}`;
+    /** 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;
     }
-    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();
-        });
+    /** 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: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
+    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}`;
+    }
+    // ::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;
 }
-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;
@@ -4254,6 +4305,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);
             }));
@@ -4845,11 +4898,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: [{