@vectoriox/iox-builder 2.0.2 → 2.0.4

package/fesm2022/vectoriox-iox-builder.mjs

@@ -7,7 +7,7 @@ import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AccordionModule } from 'primeng/accordion';
-import * as i14 from 'primeng/button';
+import * as i15 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
@@ -16,13 +16,14 @@ import * as i5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
-import * as i15 from '@vectoriox/iox-ui';
+import * as i16 from '@vectoriox/iox-ui';
 import { ComponentInstanceRegistryService, DEFAULT_WIDTH_BY_TYPE, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of } from 'rxjs';
 import interact from 'interactjs';
 import Moveable from 'moveable';
+import Selecto from 'selecto';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 
@@ -2608,6 +2609,9 @@ class MoveableCanvasService {
         this.target = null;
         this.node = null;
         this.sourceId = null;
+        /** A rubber-band multi-select group is active; `groupAt` guards the immediate follow-up click. */
+        this.groupActive = false;
+        this.groupAt = 0;
         /** 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). */
@@ -2625,6 +2629,13 @@ class MoveableCanvasService {
     }
     /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
     select(element, node) {
+        // Swallow the deselect+click that fire on the SAME mouseup that just ended a rubber-band
+        // group selection — otherwise the trailing clearSelect (→ destroyMoveable) or click would
+        // instantly collapse the fresh group. Must run BEFORE the null-check below. A later,
+        // deliberate click is well outside the ~250ms window and clears the group normally.
+        if (this.groupActive && Date.now() - this.groupAt < 250)
+            return;
+        this.groupActive = false;
         this.target = null;
         this.node = null;
         this.sourceId = null;
@@ -2641,6 +2652,9 @@ class MoveableCanvasService {
         this.node = node;
         this.sourceId = this.resolveDropzoneId(element);
         this.ensureMoveable();
+        // Single selection: the OverlayService draws the outline, so Moveable stays line-less (a
+        // group selection re-enables the lines in selectGroup).
+        this.moveable.hideDefaultLines = true;
         this.moveable.target = element;
         // Snap against sibling/cousin nodes (not self, ancestors, or own descendants).
         this.moveable.elementGuidelines = this.guidelines(element);
@@ -2650,6 +2664,39 @@ class MoveableCanvasService {
         this.moveable.dragTarget = element;
         this.moveable.updateRect();
     }
+    /**
+     * Multi-select group (Selecto rubber-band → group move). With 2+ targets Moveable shows its
+     * bounding box + handles for the whole group; with ≤1 it defers to the normal single-select
+     * path (select()), which keeps the OverlayService as the sole owner of single-selection visuals.
+     * Returns true when a group is active so the host can skip the single-select wiring.
+     */
+    selectGroup(elements) {
+        const visible = (elements || []).filter(el => {
+            if (el.closest('[data-iox-hidden]'))
+                return false;
+            // Out-of-flow (fixed/absolute) nodes are positioned independently — grouping them with
+            // in-flow siblings for a reflow-move is meaningless, and a fixed node's control-box
+            // measurement is unreliable in the transformed canvas (see moveable-migration.md gap).
+            const pos = getComputedStyle(el).position;
+            return pos !== 'fixed' && pos !== 'absolute' && pos !== 'sticky';
+        });
+        // Keep only the TOP-MOST selected nodes — Moveable can't group an element with its own
+        // descendant, and moving a parent already moves its children (the rubber band grabs both).
+        const targets = visible.filter(el => !visible.some(other => other !== el && other.contains(el)));
+        if (targets.length <= 1) {
+            return false;
+        }
+        this.target = null;
+        this.node = null;
+        this.groupActive = true;
+        this.groupAt = Date.now();
+        this.ensureMoveable();
+        // A GROUP box is a legitimate visual (nothing single-select in the overlay to duplicate).
+        this.moveable.hideDefaultLines = false;
+        this.moveable.target = targets;
+        this.moveable.updateRect();
+        return true;
+    }
     /** Recompute the control-box position (call on scroll/zoom/layout changes). */
     refresh() { this.moveable?.updateRect(); }
     /** Snap guideline elements for `target`: every node host except itself, its ancestors, and its
@@ -2888,6 +2935,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: StyleRegistryService }] });
 
+/**
+ * SelectoCanvasService — Phase 1 of the Moveable + Selecto migration
+ * (see iox-ai-guidance/architecture/builder/moveable-migration.md).
+ *
+ * Rubber-band MULTI-select on the canvas. Runs ONLY when `moveableMode` is on; interact.js is
+ * untouched, so the flag-off path is byte-identical to today.
+ *
+ *   - `selectFromInside: false` — a drag that STARTS on a node moves it (Moveable); the rubber band
+ *     only starts from empty canvas space, so single-element drag/select is unaffected.
+ *   - `selectByClick: false`    — a plain click still flows through the existing single-select path
+ *     (OverlayService), so nothing about clicking changes.
+ *   - `rootContainer` is the UNtransformed `.preview` (Selecto explicitly wants a non-transformed
+ *     root): the rubber band and the targets' client rects are then in the same viewport space, so
+ *     hit-testing is correct even though the canvas content is `transform: scale()`d.
+ *
+ * On a rubber-band release it emits the selected node host elements; the host maps them to nodes and
+ * drives Moveable with the group (see MoveableCanvasService.selectGroup).
+ */
+class SelectoCanvasService {
+    constructor() {
+        this.selecto = null;
+        /** Called on rubber-band release with the selected `.iox-node-*` host elements (may be empty). */
+        this.onSelect = null;
+        /** Count from the last rubber-band release (state/telemetry). */
+        this.lastSelectedCount = 0;
+    }
+    /**
+     * Wire Selecto onto the canvas.
+     * @param container       untransformed element the rubber band renders into (`.preview`).
+     * @param dragContainer   element the drag is listened on (the same `.preview`).
+     * @param selectableRoot  the node container whose `.iox-node-*` descendants are selectable.
+     */
+    init(container, dragContainer, selectableRoot) {
+        this.destroy();
+        this.selecto = new Selecto({
+            container,
+            rootContainer: container,
+            dragContainer,
+            // Only real node hosts inside the canvas — never overlay/toolbar chrome.
+            selectableTargets: [`#${selectableRoot.id || 'canvas-preview'} [class*="iox-node-"]`],
+            selectByClick: false,
+            selectFromInside: false,
+            hitRate: 0, // any intersection selects — forgiving rubber band
+        });
+        this.selecto.on('selectEnd', (e) => {
+            this.lastSelectedCount = e.selected.length;
+            this.onSelect?.(e.selected.filter(el => !!el));
+        });
+    }
+    /** Keep Selecto's selectable set fresh after layout changes (nodes added/removed/reordered). */
+    refresh() { }
+    destroy() {
+        this.selecto?.destroy();
+        this.selecto = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SelectoCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SelectoCanvasService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SelectoCanvasService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 // Virtual trait composition now lives in @vectoriox/iox-ui so the SSR engine (which does NOT depend
 // on iox-builder) can use the SAME logic — otherwise the engine emitted raw virtual keys
 // (translate-x, filter-blur…) as invalid CSS. This is a re-export passthrough to keep existing
@@ -4184,7 +4294,7 @@ class BuilderComponent {
     get canvasMinHeight() {
         return this.viewportService.getState().height;
     }
-    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas) {
+    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas, selectoCanvas) {
         this.registry = registry;
         this.overlayService = overlayService;
         this.panelEventService = panelEventService;
@@ -4198,6 +4308,7 @@ class BuilderComponent {
         this.cdr = cdr;
         this.appRef = appRef;
         this.moveableCanvas = moveableCanvas;
+        this.selectoCanvas = selectoCanvas;
         this.layout = [];
         this.dataSources = [];
         this.orgId = 'default';
@@ -4343,16 +4454,21 @@ class BuilderComponent {
                 }
             });
             this.canvasRo.observe(canvasEl);
-            // The canvas is an EDITING surface: clicking a Link / LinkedContainer / Button (anything
-            // rendering an <a href>) must select it, never navigate — a redirect unloads the builder
-            // and loses unsaved work. Capture phase so it runs before the node's own click handler,
-            // and canvas-level so it covers EVERY anchor, including repeater/slider preview clones
-            // (RenderDirective skips its per-node listeners for those) and any future link component.
-            // preventDefault only cancels the browser's default navigation — the click still
-            // propagates, so selection/overlay behaviour is unchanged.
-            // `auxclick` covers middle-click, which opens a tab without firing `click`.
-            canvasEl.addEventListener('click', this.blockCanvasNavigation, true);
-            canvasEl.addEventListener('auxclick', this.blockCanvasNavigation, true);
+        }
+        // The canvas is an EDITING surface: clicking a Link / LinkedContainer / Button (anything
+        // rendering an <a href>) must select it, never navigate — a redirect unloads the builder and
+        // loses unsaved work. Bound to `.preview` (NOT #canvas-preview) so it also covers the
+        // GLOBAL-elements overlay, which is a SIBLING layer outside the page canvas — a linked
+        // container in a global header used to slip past the old canvas-only guard and navigate.
+        // Capture phase so it runs before the node's own click handler; it covers EVERY anchor,
+        // including repeater/slider preview clones (RenderDirective skips their per-node listeners)
+        // and any future link component. preventDefault only cancels default navigation — the click
+        // still propagates, so selection/overlay behaviour is unchanged. `auxclick` covers
+        // middle-click, which opens a tab without firing `click`.
+        const previewEl = this.previewCanvas?.nativeElement;
+        if (previewEl) {
+            previewEl.addEventListener('click', this.blockCanvasNavigation, true);
+            previewEl.addEventListener('auxclick', this.blockCanvasNavigation, true);
         }
         this.initLenis();
         // Moveable path (flag-gated — interact.js is untouched when off). Drive drag for the selected
@@ -4365,6 +4481,25 @@ class BuilderComponent {
             this.sub?.add(this.overlayService.select$.subscribe(entry => {
                 this.moveableCanvas.select(entry?.element ?? null, entry?.node ?? null);
             }));
+            // Selecto rubber-band MULTI-select (Phase 1). Only starts from empty canvas space
+            // (selectFromInside:false), so single-element drag/click are untouched. 2+ → Moveable
+            // group; exactly 1 → the existing single-select (via a click); 0 → clear.
+            const canvasEl = document.getElementById('canvas-preview');
+            const previewEl = this.previewCanvas.nativeElement;
+            if (canvasEl) {
+                this.selectoCanvas.init(previewEl, previewEl, canvasEl);
+                this.selectoCanvas.onSelect = (elements) => {
+                    if (this.moveableCanvas.selectGroup(elements))
+                        return; // 2+ → group box
+                    if (elements.length === 1) {
+                        elements[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                    }
+                    else {
+                        this.overlayService.clearSelect();
+                        this.moveableCanvas.select(null, null);
+                    }
+                };
+            }
         }
         setTimeout(() => this.appRef.tick());
     }
@@ -4373,6 +4508,7 @@ class BuilderComponent {
         this.registrySub?.unsubscribe();
         this.viewportSub?.unsubscribe();
         this.moveableCanvas.destroy();
+        this.selectoCanvas.destroy();
         this.destroyLenis();
         this.canvasRo?.disconnect();
         this.previewFrameRo?.disconnect();
@@ -4382,8 +4518,11 @@ class BuilderComponent {
         const canvasEl = document.getElementById('canvas-preview');
         if (canvasEl) {
             this.dragEngine.unregisterDropzone('canvas-preview', canvasEl);
-            canvasEl.removeEventListener('click', this.blockCanvasNavigation, true);
-            canvasEl.removeEventListener('auxclick', this.blockCanvasNavigation, true);
+        }
+        const previewEl = this.previewCanvas?.nativeElement;
+        if (previewEl) {
+            previewEl.removeEventListener('click', this.blockCanvasNavigation, true);
+            previewEl.removeEventListener('auxclick', this.blockCanvasNavigation, true);
         }
     }
     /**
@@ -4958,13 +5097,13 @@ class BuilderComponent {
             this.isPanelOpen = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: 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 [class*=iox-outer-]>img[iox-img]{width:100%}::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"] }] }); }
+    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 }, { token: SelectoCanvasService }], 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 [class*=iox-outer-]>img[iox-img]{width:100%}::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: i15.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: i16.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 [class*=iox-outer-]>img[iox-img]{width:100%}::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: [{
+        }], 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 }, { type: SelectoCanvasService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
                 type: Input