@vectoriox/iox-builder 1.0.3 → 1.0.4

package/fesm2022/vectoriox-iox-builder.mjs

@@ -107,6 +107,8 @@ var ToolbarAction;
     ToolbarAction["Delete"] = "delete";
     ToolbarAction["Play"] = "play";
     ToolbarAction["SaveAsBlock"] = "save-as-block";
+    ToolbarAction["MakeGlobal"] = "make-global";
+    ToolbarAction["RemoveGlobal"] = "remove-global";
 })(ToolbarAction || (ToolbarAction = {}));
 var NodeAction;
 (function (NodeAction) {
@@ -1638,6 +1640,18 @@ class OverlayComponent {
         if (this.selectEntry)
             this.toolbarAction.emit({ action: ToolbarAction.SaveAsBlock, entry: this.selectEntry });
     }
+    onMakeGlobal(event, position) {
+        event.stopPropagation();
+        this.closeMoreMenu();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.MakeGlobal, entry: this.selectEntry, position });
+    }
+    onRemoveGlobal(event) {
+        event.stopPropagation();
+        this.closeMoreMenu();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.RemoveGlobal, entry: this.selectEntry });
+    }
     closeContextMenu() {
         this.contextMenuVisible = false;
         this.cdr.markForCheck();
@@ -1645,6 +1659,9 @@ class OverlayComponent {
     get hasInteractions() {
         return !!this.selectEntry?.node?.interactions?.length;
     }
+    get selectedNodeIsGlobal() {
+        return !!this.selectEntry?.node?.isGlobal;
+    }
     observeSelectElement() {
         this.resizeObserver?.disconnect();
         this.mutationObserver?.disconnect();
@@ -1753,11 +1770,11 @@ class OverlayComponent {
         return `polygon(evenodd, 0px 0px, ${w}px 0px, ${w}px ${h}px, 0px ${h}px, 0px 0px, ${x1}px ${y1}px, ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px)`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayComponent, deps: [{ token: OverlayService }, { token: ViewportService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n                <div class=\"more-divider\"></div>\n                <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n                    <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Make Global (Before Content)\n                    </button>\n                    <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Make Global (After Content)\n                    </button>\n                </ng-container>\n                <ng-template #removeGlobalItem>\n                    <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Remove from Global\n                    </button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"] }]
+            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\"\n         (contextmenu)=\"onContextMenu($event)\">\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 last -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n\n            <!-- More dropdown (inline, positioned from toolbar) -->\n            <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" (click)=\"$event.stopPropagation()\">\n                <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-arrow-up\"></i>\n                    Select parent\n                </button>\n                <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                    Duplicate\n                </button>\n                <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                    Delete\n                </button>\n                <div class=\"more-divider\"></div>\n                <button class=\"more-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n                    <i class=\"ph-thin ph-bookmark\"></i>\n                    Save as reusable block\n                </button>\n                <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n                    <i class=\"ph-thin ph-play\"></i>\n                    Play animations\n                </button>\n                <div class=\"more-divider\"></div>\n                <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n                    <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Make Global (Before Content)\n                    </button>\n                    <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Make Global (After Content)\n                    </button>\n                </ng-container>\n                <ng-template #removeGlobalItem>\n                    <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                        <i class=\"ph-thin ph-globe\"></i>\n                        Remove from Global\n                    </button>\n                </ng-template>\n            </div>\n        </div>\n    </div>\n\n    <!-- Backdrop to close more menu or context menu -->\n    <div *ngIf=\"moreMenuVisible || contextMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu(); closeContextMenu()\">\n    </div>\n\n    <!-- Right-click context menu -->\n    <div *ngIf=\"contextMenuVisible\" class=\"overlay-context-menu\"\n         [ngStyle]=\"contextMenuStyle\"\n         (click)=\"$event.stopPropagation()\">\n        <button class=\"context-menu-item\" (mousedown)=\"onContextSaveAsBlock($event)\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.select-toolbar .toolbar-more-dropdown{position:absolute;top:100%;right:0;left:auto;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all;margin-top:2px}.select-toolbar .toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.select-toolbar .toolbar-more-dropdown .more-item i{font-size:14px}.select-toolbar .toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.select-toolbar .toolbar-more-dropdown .more-item--danger{color:#c84040}.select-toolbar .toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.select-toolbar .toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.select-toolbar .toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}.overlay-context-menu{position:fixed;z-index:999;background:#fff;border:1px solid var(--p-surface-200);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.overlay-context-menu .context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left}.overlay-context-menu .context-menu-item i{font-size:14px}.overlay-context-menu .context-menu-item:hover{background:var(--p-surface-100, #f5f5f5)}\n"] }]
         }], ctorParameters: () => [{ type: OverlayService }, { type: ViewportService }, { type: i0.ChangeDetectorRef }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });
@@ -2112,6 +2129,7 @@ class BuilderComponent {
         this.isSaving = false;
         this.pageStatus = 'draft';
         this.pageSettings = null;
+        this.globalElements = [];
         this.save = new EventEmitter();
         this.back = new EventEmitter();
         this.preview = new EventEmitter();
@@ -2119,6 +2137,7 @@ class BuilderComponent {
         this.pageSettingsChange = new EventEmitter();
         this.applyAnimationToAll = new EventEmitter();
         this.saveBlock = new EventEmitter();
+        this.globalElementsChange = new EventEmitter();
         this.components = [];
         this.activePanel = PanelTypes.STYLES;
         this.isPanelOpen = false;
@@ -2491,12 +2510,39 @@ class BuilderComponent {
                     }
                 }
                 else {
-                    // Already at root level — deselect
                     this.selectedItem = null;
                     this.overlayService.clearSelect();
                 }
                 break;
             }
+            case ToolbarAction.MakeGlobal: {
+                const result = this.findNodeInTree(node, this.layout);
+                if (result) {
+                    result.parent.splice(result.index, 1);
+                    node.isGlobal = true;
+                    node.globalPosition = event.position ?? 'before';
+                    this.globalElements.push(node);
+                    this.globalElementsChange.emit([...this.globalElements]);
+                    this.selectedItem = null;
+                    this.overlayService.clearSelect();
+                    this.cdr.markForCheck();
+                }
+                break;
+            }
+            case ToolbarAction.RemoveGlobal: {
+                const idx = this.globalElements.findIndex(n => n.id === node.id);
+                if (idx !== -1) {
+                    this.globalElements.splice(idx, 1);
+                    node.isGlobal = false;
+                    node.globalPosition = undefined;
+                    this.layout.push(node);
+                    this.globalElementsChange.emit([...this.globalElements]);
+                    this.selectedItem = null;
+                    this.overlayService.clearSelect();
+                    this.cdr.markForCheck();
+                }
+                break;
+            }
         }
     }
     confirmSaveBlock() {
@@ -2585,7 +2631,7 @@ 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: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings" }, outputs: { save: "save", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n        </div>\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\" [layout]=\"layout\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Custom Lenis scrollbar \u2014 inside .preview-scroll (Lenis wrapper).\n                 position:absolute shifts with scrollTop, so we counteract with\n                 transform:translateY(scrollTop) to keep it visually anchored. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\"\n                 [style.transform]=\"'translateY(' + scrollbarTranslate + 'px)'\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             class=\"preview-node\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             [style.width]=\"getNodeWidth(item)\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\">\n        </app-toolbar>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-dialog\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:#fff;padding:.5rem 1rem;border-bottom:1px solid var(--p-surface-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-100, #f1f5f9);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.5rem}.builder .sidebar-switcher p-button ::ng-deep .p-button,.builder .panel-switcher p-button ::ng-deep .p-button{color:#000;background:transparent;border:1px solid transparent;transition:border-color .2s}.builder .sidebar-switcher p-button ::ng-deep .p-button:hover,.builder .panel-switcher p-button ::ng-deep .p-button:hover{border-color:#cb9090}.builder .sidebar-switcher p-button.active ::ng-deep .p-button,.builder .panel-switcher p-button.active ::ng-deep .p-button{background:#cb9090;color:#fff;border-color:#cb9090}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .builder-main app-toolbar{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);z-index:1000;pointer-events:auto}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-right:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;background:#fff;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:hidden!important}.builder .preview-node{position:relative}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i11.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements" }, outputs: { save: "save", 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n        </div>\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\">\n                <i class=\"ph-thin ph-file\"></i>\n            </button>\n        </div>\n    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\" [layout]=\"layout\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Custom Lenis scrollbar \u2014 inside .preview-scroll (Lenis wrapper).\n                 position:absolute shifts with scrollTop, so we counteract with\n                 transform:translateY(scrollTop) to keep it visually anchored. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\"\n                 [style.transform]=\"'translateY(' + scrollbarTranslate + 'px)'\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <div *ngFor=\"let item of layout\"\n                             class=\"preview-node\"\n                             [class.is-selected]=\"selectedItem === item\"\n                             [style.width]=\"getNodeWidth(item)\"\n                             ioxDraggable\n                             [ioxDragData]=\"item\"\n                             [ioxDragSourceId]=\"'canvas-preview'\">\n                            <ng-container [ioxRender]=\"item\"\n                                (onClick)=\"handleClick($event)\"\n                                (onMouseEnter)=\"handleMouseEnter($event)\"\n                                (onMouseLeave)=\"handleMouseLeave()\">\n                            </ng-container>\n                        </div>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\">\n        </app-toolbar>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div *ngIf=\"showSaveBlockDialog\" class=\"save-block-dialog\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:#fff;padding:.5rem 1rem;border-bottom:1px solid var(--p-surface-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-100, #f1f5f9);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.5rem}.builder .sidebar-switcher p-button ::ng-deep .p-button,.builder .panel-switcher p-button ::ng-deep .p-button{color:#000;background:transparent;border:1px solid transparent;transition:border-color .2s}.builder .sidebar-switcher p-button ::ng-deep .p-button:hover,.builder .panel-switcher p-button ::ng-deep .p-button:hover{border-color:#cb9090}.builder .sidebar-switcher p-button.active ::ng-deep .p-button,.builder .panel-switcher p-button.active ::ng-deep .p-button{background:#cb9090;color:#fff;border-color:#cb9090}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .builder-main app-toolbar{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);z-index:1000;pointer-events:auto}.builder .sidebar{width:220px;min-width:220px;background:var(--p-surface-0);border-right:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;background:#fff;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:hidden!important}.builder .preview-node{position:relative}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i11.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
@@ -2606,6 +2652,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Input
             }], pageSettings: [{
                 type: Input
+            }], globalElements: [{
+                type: Input
             }], save: [{
                 type: Output
             }], back: [{
@@ -2620,6 +2668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }], saveBlock: [{
                 type: Output
+            }], globalElementsChange: [{
+                type: Output
             }], previewCanvas: [{
                 type: ViewChild,
                 args: ['previewCanvas']