@acorex-platform/framework-client 0.0.38 → 0.0.46

package/fesm2022/acorex-platform-framework-client-layout-designer.mjs

@@ -3,20 +3,20 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$3 from '@acorex-platform/framework-client/layout/widget-core';
-import { AXPWidgetRegistryService, AXPLayoutBaseWidgetComponent, AXPValueWidgetComponent, AXPWidgetCoreModule } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetRegistryService, AXP_LOCAL_DATA_SOURCES_OPTION, createDefaultLocalDataSourceColumns, readLocalDataSourcesFromNode, AXPLayoutBaseWidgetComponent, AXPValueWidgetComponent, AXPWidgetCoreModule, AXP_LOCAL_DATA_SOURCE_STORE, AXP_LAYOUT_PROFILE } from '@acorex-platform/framework-client/layout/widget-core';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, viewChild, afterNextRender, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild, DestroyRef } from '@angular/core';
-import { AXPWidgetGroupEnum, AXP_WIDGET_TOKEN, AXPWidgetStatus } from '@acorex-platform/framework-shared/widget-core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXToastService } from '@acorex/components/toast';
 import { AXFileService } from '@acorex/core/file';
-import { AXPWidgetsCatalog, AXPPlatformScope, runtimeQueryCollectionData, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
-import { merge, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, isEqual } from 'lodash-es';
+import { AXPWidgetsCatalog, AXPPlatformScope, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import { AXPBroadcastEventService, AXPDataGenerator, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPLogoComponent } from '@acorex-platform/framework-client/core';
+import { isEqual, cloneDeep, assign, sortBy, get, set, isNil, isEmpty, orderBy, castArray, uniqBy, merge } from 'lodash-es';
 import { Subject, distinctUntilChanged, filter, debounceTime, first, merge as merge$1 } from 'rxjs';
-import { AXPBroadcastEventService, AXPHookService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys } from '@acorex-platform/framework-client/core';
-import * as i8 from '@acorex/core/translation';
+import * as i4 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPWidgetGroupEnum, AXP_WIDGET_TOKEN, AXPWidgetStatus, designerPreviewSizeToLayoutSize } from '@acorex-platform/framework-shared/widget-core';
 import * as i1$1 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -25,7 +25,7 @@ import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i5 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXPSettingsService, AXPStickyDirective, AXPClipBoardService } from '@acorex-platform/framework-client/common';
-import { AXPWidgetItemComponent, AXPStateMessageComponent, AXPWidgetPropertyViewerComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPWidgetItemComponent, AXPLocalDataSourceEditorDialogService, AXPStateMessageComponent, AXPWidgetPropertyViewerComponent } from '@acorex-platform/framework-client/layout/components';
 import * as i1$2 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -34,7 +34,7 @@ import * as i1$5 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i4 from '@acorex/components/dropdown';
+import * as i4$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i5$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
@@ -42,14 +42,13 @@ import * as i2$2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import * as i1$4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import { AXPCommandService, AXPQueryService } from '@acorex-platform/framework-client/runtime';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import * as i4$1 from '@acorex/components/json-viewer';
+import * as i4$2 from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
-import { AXSafePipe } from '@acorex/core/pipes';
 
-// AddWidgetCommand
+//#endregion
+//#region ----- Commands -----
 class AddWidgetCommand {
     constructor(widget, parent, previousSelection) {
         this.widget = widget;
@@ -74,10 +73,10 @@ class AddWidgetCommand {
         return `fa-solid fa-square-plus`;
     }
     getExecutionSelection() {
-        return this.widget; // After executing, select the newly added widget
+        return this.widget;
     }
     getUndoSelection() {
-        return this.previousSelection; // After undo, select the previously selected widget
+        return this.previousSelection;
     }
 }
 class RemoveWidgetCommand {
@@ -86,16 +85,19 @@ class RemoveWidgetCommand {
         this.parent = parent;
         this.previousSelection = previousSelection;
         parent.children = parent.children || [];
-        this.index = parent.children.indexOf(widget); // Capture the index for undo purposes
+        this.index = parent.children.indexOf(widget);
     }
     execute() {
         this.parent.children = this.parent.children || [];
-        this.index = this.parent.children.indexOf(this.widget); // Re-assert the index in case it has changed
-        this.parent.children.splice(this.index, 1);
+        this.index = this.parent.children.indexOf(this.widget);
+        if (this.index > -1) {
+            this.parent.children.splice(this.index, 1);
+        }
     }
     undo() {
         this.parent.children = this.parent.children || [];
-        this.parent.children.splice(this.index, 0, this.widget); // Reinsert at the original index
+        const insertAt = Math.min(Math.max(this.index, 0), this.parent.children.length);
+        this.parent.children.splice(insertAt, 0, this.widget);
     }
     description() {
         return `Removed widget ${this.widget.name}`;
@@ -104,24 +106,25 @@ class RemoveWidgetCommand {
         return `fa-solid fa-square-minus`;
     }
     getExecutionSelection() {
-        return this.previousSelection; // Typically the parent or a nearby sibling could be focused
+        return this.previousSelection;
     }
     getUndoSelection() {
-        return this.widget; // Select the widget itself when the operation is undone
+        return this.widget;
     }
 }
 class UpdateWidgetCommand {
     constructor(widget, values, previousSelection) {
         this.widget = widget;
-        this.newState = merge(cloneDeep(widget), values);
         this.previousSelection = previousSelection;
-        this.previousState = cloneDeep(widget);
+        this.previousState = this.captureState(widget);
+        this.newState = this.captureState(widget);
+        this.applyPatch(this.newState, values);
     }
     execute() {
-        merge(this.widget, this.newState);
+        this.restoreState(this.widget, this.newState);
     }
     undo() {
-        this.deepPruneAndRestore(this.widget, this.previousState);
+        this.restoreState(this.widget, this.previousState);
     }
     description() {
         return `Updated widget ${this.widget.name}`;
@@ -130,111 +133,242 @@ class UpdateWidgetCommand {
         return `fa-solid fa-pen`;
     }
     getExecutionSelection() {
-        return this.widget; // Focus the widget after it's updated
+        return this.widget;
     }
     getUndoSelection() {
-        return this.previousSelection; // Restore the focus to where it was before the update
+        return this.widget;
     }
-    deepPruneAndRestore(current, original) {
-        Object.keys(current).forEach(key => {
-            if (original.hasOwnProperty(key)) {
-                if (typeof current[key] === 'object' && current[key] !== null && !(current[key] instanceof Array)) {
-                    this.deepPruneAndRestore(current[key], original[key]);
-                }
+    canCoalesceWith(command) {
+        return command instanceof UpdateWidgetCommand && command.widget === this.widget;
+    }
+    coalesceWith(command) {
+        if (!(command instanceof UpdateWidgetCommand)) {
+            return;
+        }
+        this.newState = command.newState;
+    }
+    isNoOp() {
+        return isEqual(this.previousState, this.newState);
+    }
+    captureState(node) {
+        const { children: _children, ...rest } = node;
+        return cloneDeep(rest);
+    }
+    applyPatch(target, values) {
+        Object.keys(values).forEach((key) => {
+            if (key === 'children' || key === '__meta__') {
+                return;
             }
-            else {
-                delete current[key]; // Remove properties not present in original
+            const incoming = values[key];
+            const current = target[key];
+            if (incoming === undefined) {
+                return;
             }
+            if (incoming &&
+                typeof incoming === 'object' &&
+                !Array.isArray(incoming) &&
+                current &&
+                typeof current === 'object' &&
+                !Array.isArray(current)) {
+                this.applyPatch(current, incoming);
+                return;
+            }
+            target[key] = cloneDeep(incoming);
+        });
+    }
+    restoreState(target, source) {
+        const preservedChildren = target.children;
+        const preservedMeta = target.__meta__;
+        Object.keys(target).forEach((key) => {
+            if (key === 'children' || key === '__meta__') {
+                return;
+            }
+            if (!(key in source)) {
+                delete target[key];
+            }
+        });
+        Object.keys(source).forEach((key) => {
+            if (key === 'children' || key === '__meta__') {
+                return;
+            }
+            target[key] = cloneDeep(source[key]);
         });
-        // Restore the original properties
-        merge(current, original);
+        if (preservedChildren) {
+            target.children = preservedChildren;
+        }
+        if (preservedMeta) {
+            target.__meta__ = preservedMeta;
+        }
     }
 }
+class CompositeCommand {
+    constructor(commands, label) {
+        this.commands = commands;
+        this.label = label;
+    }
+    execute() {
+        this.commands.forEach((command) => command.execute());
+    }
+    undo() {
+        for (let index = this.commands.length - 1; index >= 0; index--) {
+            this.commands[index].undo();
+        }
+    }
+    description() {
+        if (this.label) {
+            return this.label;
+        }
+        const addCount = this.commands.filter((command) => command instanceof AddWidgetCommand).length;
+        if (addCount > 1 && addCount === this.commands.length) {
+            return `Added ${addCount} widgets`;
+        }
+        return this.commands[this.commands.length - 1]?.description() ?? 'Multiple changes';
+    }
+    icon() {
+        return this.commands[0]?.icon() ?? 'fa-solid fa-layer-group';
+    }
+    getExecutionSelection() {
+        const update = this.commands.find((command) => command instanceof UpdateWidgetCommand);
+        if (update) {
+            return update.getExecutionSelection();
+        }
+        return this.commands[this.commands.length - 1].getExecutionSelection();
+    }
+    getUndoSelection() {
+        return this.commands[0].getUndoSelection();
+    }
+}
+//#endregion
+//#region ----- Command manager -----
 class CommandManager {
     constructor() {
         this.undoStack = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "undoStack" }] : /* istanbul ignore next */ []));
         this.currentIndex = signal(-1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+        this.transactionDepth = 0;
+        this.transactionCommands = [];
         this.selectedNode = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
         this.canUndo = computed(() => this.currentIndex() >= 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
         this.canRedo = computed(() => this.currentIndex() < this.undoStack().length - 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+        this.isInTransaction = () => this.transactionDepth > 0;
         this.history = computed(() => this.undoStack().map((cmd, index) => ({
             description: cmd.description(),
             icon: cmd.icon(),
             isPast: this.currentIndex() > index,
             isFuture: this.currentIndex() < index,
-            isCurrent: this.currentIndex() == index
+            isCurrent: this.currentIndex() == index,
         })), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
     }
-    executeCommand(command) {
-        // Check if the currentIndex is not at the end of the undoStack
+    beginTransaction(description) {
+        if (this.transactionDepth === 0) {
+            this.transactionCommands = [];
+            this.transactionDescription = description;
+        }
+        else if (description && !this.transactionDescription) {
+            this.transactionDescription = description;
+        }
+        this.transactionDepth++;
+    }
+    endTransaction() {
+        if (this.transactionDepth === 0) {
+            return;
+        }
+        this.transactionDepth--;
+        if (this.transactionDepth > 0) {
+            return;
+        }
+        const commands = this.transactionCommands;
+        const description = this.transactionDescription;
+        this.transactionCommands = [];
+        this.transactionDescription = undefined;
+        if (commands.length === 0) {
+            return;
+        }
         if (this.currentIndex() !== this.undoStack().length - 1) {
-            // Remove all commands beyond the current index to discard the "future" commands
-            const newUndoStack = this.undoStack().slice(0, this.currentIndex() + 1);
-            this.undoStack.set(newUndoStack);
+            this.undoStack.set(this.undoStack().slice(0, this.currentIndex() + 1));
+        }
+        const command = commands.length === 1 ? commands[0] : new CompositeCommand(commands, description);
+        this.undoStack.set([...this.undoStack(), command]);
+        this.currentIndex.set(this.undoStack().length - 1);
+        this.selectedNode.set(command.getExecutionSelection());
+    }
+    executeCommand(command) {
+        if (command instanceof UpdateWidgetCommand && command.isNoOp()) {
+            return;
+        }
+        const lastCommand = this.transactionDepth > 0
+            ? this.transactionCommands[this.transactionCommands.length - 1]
+            : this.undoStack()[this.currentIndex()];
+        if (lastCommand?.canCoalesceWith?.(command) && lastCommand.coalesceWith) {
+            lastCommand.coalesceWith(command);
+            command.execute();
+            this.selectedNode.set(command.getExecutionSelection());
+            return;
+        }
+        if (this.transactionDepth === 0 && this.currentIndex() !== this.undoStack().length - 1) {
+            this.undoStack.set(this.undoStack().slice(0, this.currentIndex() + 1));
         }
         command.execute();
-        this.undoStack.set([...this.undoStack(), command]); // Add the new command to the stack
-        this.currentIndex.set(this.undoStack().length - 1); // Update currentIndex to the end of the stack
-        this.selectedNode.set(command.getExecutionSelection()); // Update the selected node
+        if (this.transactionDepth > 0) {
+            this.transactionCommands.push(command);
+            this.selectedNode.set(command.getExecutionSelection());
+            return;
+        }
+        this.undoStack.set([...this.undoStack(), command]);
+        this.currentIndex.set(this.undoStack().length - 1);
+        this.selectedNode.set(command.getExecutionSelection());
     }
     undo() {
-        if (this.currentIndex() >= 0) {
-            const command = this.undoStack()[this.currentIndex()];
-            command.undo();
-            this.currentIndex.set(this.currentIndex() - 1);
-            if (this.currentIndex() >= 0) {
-                this.selectedNode.set(this.undoStack()[this.currentIndex()].getUndoSelection());
-            }
-            else {
-                this.selectedNode.set(null); // No selection if all commands are undone
-            }
+        if (this.currentIndex() < 0) {
+            return;
         }
+        const command = this.undoStack()[this.currentIndex()];
+        command.undo();
+        this.currentIndex.set(this.currentIndex() - 1);
+        this.selectedNode.set(command.getUndoSelection());
     }
     redo() {
-        if (this.currentIndex() < this.undoStack().length - 1) {
-            this.currentIndex.set(this.currentIndex() + 1);
-            const command = this.undoStack()[this.currentIndex()];
-            command.execute();
-            this.selectedNode.set(command.getExecutionSelection());
+        if (this.currentIndex() >= this.undoStack().length - 1) {
+            return;
         }
+        this.currentIndex.set(this.currentIndex() + 1);
+        const command = this.undoStack()[this.currentIndex()];
+        command.execute();
+        this.selectedNode.set(command.getExecutionSelection());
     }
     goToCommand(index) {
-        if (index < 0 || index >= this.undoStack().length || index === this.currentIndex()) {
-            return; // Out of bounds or already at the desired index
+        if (index < -1 || index >= this.undoStack().length || index === this.currentIndex()) {
+            return;
         }
         if (index > this.currentIndex()) {
-            // Need to redo until reaching the desired index
             while (this.currentIndex() < index) {
                 this.redo();
             }
         }
         else {
-            // Need to undo until reaching the desired index
             while (this.currentIndex() > index) {
                 this.undo();
             }
         }
-        // Optionally update any UI components or state here
-        this.selectedNode.set(this.undoStack()[this.currentIndex()].getExecutionSelection());
     }
     clear() {
         this.undoStack.set([]);
         this.currentIndex.set(-1);
+        this.selectedNode.set(null);
+        this.transactionDepth = 0;
+        this.transactionCommands = [];
+        this.transactionDescription = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandManager, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
 class AXPDesignerConnector {
@@ -323,15 +457,75 @@ const AXPDesignerMessageKeys = {
     FormSaved: 'designer-form-saved-content',
 };
 
+//#region ----- Constants -----
+const PREVIEW_DOCUMENT_STORAGE_KEY = 'axp-layout-designer-preview-document';
+//#endregion
+//#region ----- Preview session -----
+function storeDesignerPreviewDocument(document) {
+    try {
+        sessionStorage.setItem(PREVIEW_DOCUMENT_STORAGE_KEY, JSON.stringify(document));
+    }
+    catch {
+        // sessionStorage can be unavailable in some iframe / privacy modes
+    }
+}
+function readDesignerPreviewDocument() {
+    try {
+        const raw = sessionStorage.getItem(PREVIEW_DOCUMENT_STORAGE_KEY);
+        if (!raw) {
+            return null;
+        }
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+//#endregion
+
 /**
  * Suffixes for `forms:widgets:picker:last-tab:{id}` user settings keys.
  * Use one id per distinct widget-picker host (different tab strips / widget sets).
  */
 const AXP_WIDGET_PICKER_TAB_CONTEXT = {
     layoutDesignerFormElements: 'layout-designer-form-elements',
+    layoutDesignerWidgetTemplate: 'layout-designer-widget-template',
+    layoutDesignerPage: 'layout-designer-page',
     dashboardHome: 'dashboard-home',
 };
 
+//#endregion
+//#region ----- Constants -----
+const DEFAULT_FORM_DRAWERS = ['pages', 'dataSources', 'outline', 'history'];
+//#endregion
+//#region ----- Filter -----
+/**
+ * Include if any include rule hits, then subtract `excludeNames`.
+ * An empty include set matches nothing (fail closed).
+ */
+function widgetMatchesDesignerSurface(widget, profile) {
+    const filter = profile.widgets;
+    if (filter?.excludeNames?.includes(widget.name)) {
+        return false;
+    }
+    const includeGroups = filter?.includeGroups ?? [];
+    const includeTypes = filter?.includeTypes ?? [];
+    const includeNames = filter?.includeNames ?? [];
+    const hasInclude = includeGroups.length > 0 || includeTypes.length > 0 || includeNames.length > 0;
+    if (!hasInclude) {
+        return false;
+    }
+    const groupHit = includeGroups.some((group) => widget.groups?.includes(group));
+    const typeHit = includeTypes.includes(widget.type);
+    const nameHit = includeNames.includes(widget.name);
+    return groupHit || typeHit || nameHit;
+}
+function designerSurfaceHasDrawer(profile, drawer) {
+    const drawers = profile.chrome?.drawers ?? DEFAULT_FORM_DRAWERS;
+    return drawers.includes(drawer);
+}
+//#endregion
+
 class AXPWidgetPickerService {
     constructor() {
         this.popupService = inject(AXPopupService);
@@ -341,7 +535,7 @@ class AXPWidgetPickerService {
     async showPicker(options) {
         const com = await Promise.resolve().then(function () { return widgetPicker_component; }).then((c) => c.AXPDesignerWidgetPickerComponent);
         const widgets = this.widgetRegistryService.all();
-        const filteredWidgets = widgets.filter((c) => options.groups.some((d) => c.groups?.includes(d)));
+        const filteredWidgets = widgets.filter((widget) => this.matchesPickerOptions(widget, options));
         //
         const result = await this.popupService.open(com, {
             title: await this.translationService.translateAsync('@form-template-management:designer.components.widget-picker.title'),
@@ -361,6 +555,12 @@ class AXPWidgetPickerService {
             meta: c.meta,
         }));
     }
+    matchesPickerOptions(widget, options) {
+        if (options.profile) {
+            return widgetMatchesDesignerSurface(widget, options.profile);
+        }
+        return options.groups?.some((group) => widget.groups?.includes(group)) ?? false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPickerService, providedIn: 'root' }); }
 }
@@ -371,6 +571,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
+/** Child cells and document shells: registered, not pickable. */
+const DESIGNER_CHILD_AND_SHELL_WIDGETS = [
+    'tabset-item',
+    'flex-item-layout',
+    'grid-item-layout',
+    'table-item-layout',
+    'advanced-grid-item-layout',
+    'page-layout',
+    'document-layout',
+];
+/** Field widgets that belong on forms but are not tagged `form-element`. */
+const FORM_EXTRA_WIDGET_NAMES = [
+    'signature',
+    'password-editor',
+    'qrcode',
+    'icon',
+    'table-editor',
+    'template-box-editor',
+    'meta-data-editor',
+    'lookup-editor',
+];
+const FORM_WIDGETS = {
+    includeGroups: [AXPWidgetGroupEnum.FormElement],
+    includeNames: [...FORM_EXTRA_WIDGET_NAMES],
+    excludeNames: [...DESIGNER_CHILD_AND_SHELL_WIDGETS],
+};
+/**
+ * Default Form Builder surface. Hosts may pass this explicitly or omit `profile`.
+ */
+const AXP_FORM_DESIGNER_SURFACE_PROFILE = {
+    id: 'form',
+    documentKind: 'widget-tree',
+    rootWidget: 'page-layout',
+    widgets: FORM_WIDGETS,
+    chrome: {
+        drawers: ['pages', 'dataSources', 'outline', 'history'],
+    },
+    preview: {
+        player: 'angular',
+    },
+    pickerTabContext: AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerFormElements,
+};
+/**
+ * Composed widget template: same offer list as form, no Pages drawer.
+ */
+const AXP_WIDGET_DESIGNER_SURFACE_PROFILE = {
+    id: 'widget',
+    documentKind: 'widget-tree',
+    rootWidget: 'page-layout',
+    widgets: FORM_WIDGETS,
+    chrome: {
+        drawers: ['dataSources', 'outline', 'history'],
+    },
+    preview: {
+        player: 'angular',
+    },
+    pickerTabContext: AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerWidgetTemplate,
+};
+/**
+ * Website page surface. Palette chrome is declared; walker preview is Phase 2.
+ * Offer list is name-based until a `page-widget` group exists.
+ */
+const AXP_PAGE_DESIGNER_SURFACE_PROFILE = {
+    id: 'page',
+    documentKind: 'widget-tree',
+    widgets: {
+        includeNames: [
+            'flex-layout',
+            'grid-layout',
+            'block-layout',
+            'panel-layout',
+            'fieldset-layout',
+            'table-layout',
+            'advanced-grid-layout',
+            'text-block-layout',
+            'alert-box-layout',
+            'badge-layout',
+            'image',
+            'icon',
+            'button-action',
+            'tabset-layout',
+            'step-wizard',
+        ],
+        excludeNames: [...DESIGNER_CHILD_AND_SHELL_WIDGETS, 'password-editor', 'signature', 'lookup-editor'],
+    },
+    chrome: {
+        drawers: ['palette', 'outline', 'history'],
+    },
+    preview: {
+        player: 'html-walker',
+        walkerChannel: 'html',
+    },
+    pickerTabContext: AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerPage,
+};
+//#endregion
+
 class AXPDesignerService {
     #ef;
     constructor() {
@@ -388,6 +687,9 @@ class AXPDesignerService {
         ...(ngDevMode ? [{ debugName: "currentPageIndex" }] : /* istanbul ignore next */ []));
         this.currentPage = signal(this.document().children?.[0], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        /** Bumps when the board must remount the page without cloning it off `document`. */
+        this.pageRenderEpoch = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageRenderEpoch" }] : /* istanbul ignore next */ []));
         this.commandManager = inject(CommandManager);
         this.clipboard = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "clipboard" }] : /* istanbul ignore next */ []));
@@ -412,12 +714,22 @@ class AXPDesignerService {
         ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
         this.unsavedChanges = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "unsavedChanges" }] : /* istanbul ignore next */ []));
+        this.surfaceProfile = signal(AXP_FORM_DESIGNER_SURFACE_PROFILE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "surfaceProfile" }] : /* istanbul ignore next */ []));
+        this.localDataSources = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "localDataSources" }] : /* istanbul ignore next */ []));
+        this.sources = this.localDataSources.asReadonly();
         this.breadcrumbs = computed(() => {
             return this.selectedNode() ? this.findBreadcrumbs(this.currentPage(), this.selectedNode()) ?? [] : [];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
         this.selectedNode = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.widgetInstances = new Map();
+        /** Property-panel writes are recorded only after the user focuses the panel. */
+        this.acceptPropertyPanelHistory = false;
+        /** Last panel payload applied to the canvas. Equal echoes must not republish the preview. */
+        this.lastAppliedPropertyPanelValues = null;
         this.selectedNodeConfig = computed(() => get(this.selectedNode(), '__meta__.config'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedNodeConfig" }] : /* istanbul ignore next */ []));
         this._focusedNode = null;
@@ -475,20 +787,52 @@ class AXPDesignerService {
         });
     }
     register(command) {
-        this.select({ widget: command.widget });
+        const key = this.widgetInstanceKey(command.widget, command.id);
+        if (key) {
+            this.widgetInstances.set(key, command.instance);
+        }
+        if (!this.selectedNode()) {
+            this.select({ widget: command.widget });
+        }
+    }
+    unregister(widget) {
+        const key = this.widgetInstanceKey(widget);
+        if (key) {
+            this.widgetInstances.delete(key);
+        }
+    }
+    getWidgetInstance(widget) {
+        const key = this.widgetInstanceKey(widget);
+        return key ? this.widgetInstances.get(key) ?? null : null;
+    }
+    widgetInstanceKey(widget, id) {
+        const key = id ?? get(widget, '__meta__.id');
+        return key == null ? null : String(key);
     }
     select(command) {
+        this.acceptPropertyPanelHistory = false;
+        this.lastAppliedPropertyPanelValues = null;
         this.selectedNode.set(command.widget);
         this.onSelected.next(command);
     }
+    armPropertyPanelHistory() {
+        this.acceptPropertyPanelHistory = true;
+    }
+    applyPropertyPanelChange(event) {
+        // Init is hydration. update() always republishes the preview.
+        if (event.mode !== 'update' || isEqual(event.values, this.lastAppliedPropertyPanelValues)) {
+            return;
+        }
+        this.lastAppliedPropertyPanelValues = event.values;
+        this.update({ values: event.values, mode: 'update' });
+    }
     update(command) {
         const node = command.widget ?? this.selectedNode();
         if (command.mode == 'update' && node) {
             this.commandManager.executeCommand(new UpdateWidgetCommand(node, command.values, node));
+            this.unsavedChanges.set(true);
         }
-        //this.selectedNode.update((c) => merge(node, command.values));
         this.onUpdate.next({ widget: node, values: command.values });
-        this.unsavedChanges.set(true);
         this.updatePreview();
     }
     focus(command) {
@@ -521,21 +865,31 @@ class AXPDesignerService {
         return undefined;
     }
     async showPicker(currentNode = this.selectedNode()) {
+        const profile = this.surfaceProfile();
         const widgets = await this.widgetPickerService.showPicker({
-            groups: [AXPWidgetGroupEnum.FormElement],
-            tabPersistenceContext: AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerFormElements,
+            profile,
+            tabPersistenceContext: profile.pickerTabContext ?? AXP_WIDGET_PICKER_TAB_CONTEXT.layoutDesignerFormElements,
         });
         const result = [];
         if (widgets.length) {
-            widgets.forEach((c) => {
-                result.push(this.addWidget(currentNode, { type: c.type }));
-            });
+            const addAll = () => {
+                widgets.forEach((c) => {
+                    result.push(this.addWidget(currentNode, { type: c.type }));
+                });
+            };
+            if (widgets.length > 1) {
+                this.runTransaction(addAll, 'Added widgets');
+            }
+            else {
+                addAll();
+            }
         }
         return result;
     }
     new() {
         this.commandManager.clear();
         this.document.set(this.createDoc());
+        this.localDataSources.set([]);
         this.currentPage.set(this.document().children?.[0]);
         this.reRenderPage();
     }
@@ -544,10 +898,72 @@ class AXPDesignerService {
             type: AXPWidgetsCatalog.document,
             children: [this.createPage()],
             name: 'document',
+            options: { [AXP_LOCAL_DATA_SOURCES_OPTION]: [] },
         };
         set(doc, '__meta__.id', this.generateUniqueId());
         return doc;
     }
+    //#region ----- Local data sources -----
+    toLocalDataSourceStore() {
+        return {
+            sources: this.sources,
+            get: (id) => this.getLocalDataSource(id),
+            create: (name) => this.createLocalDataSource(name),
+            update: (id, patch) => this.updateLocalDataSource(id, patch),
+            remove: (id) => this.removeLocalDataSource(id),
+        };
+    }
+    getLocalDataSource(id) {
+        return this.localDataSources().find((row) => row.id === id);
+    }
+    createLocalDataSource(name) {
+        const trimmed = name.trim();
+        const source = {
+            id: AXPDataGenerator.uuid(),
+            name: trimmed.length > 0 ? trimmed : `List ${this.localDataSources().length + 1}`,
+            columns: createDefaultLocalDataSourceColumns(),
+            items: [],
+        };
+        this.localDataSources.update((list) => [...list, source]);
+        this.persistLocalDataSources(true);
+        return source;
+    }
+    updateLocalDataSource(id, patch) {
+        this.localDataSources.update((list) => list.map((row) => (row.id === id ? { ...row, ...patch } : row)));
+        this.persistLocalDataSources(true);
+    }
+    removeLocalDataSource(id) {
+        this.localDataSources.update((list) => list.filter((row) => row.id !== id));
+        this.persistLocalDataSources(true);
+    }
+    hydrateLocalDataSources(root) {
+        const fromDoc = readLocalDataSourcesFromNode(root);
+        const fromPages = fromDoc.length > 0
+            ? []
+            : (root.children ?? []).flatMap((page) => readLocalDataSourcesFromNode(page));
+        this.localDataSources.set(fromDoc.length > 0 ? fromDoc : fromPages);
+        this.persistLocalDataSources(false);
+    }
+    persistLocalDataSources(markDirty) {
+        const list = this.localDataSources();
+        const doc = this.document();
+        doc.options = { ...(doc.options ?? {}), [AXP_LOCAL_DATA_SOURCES_OPTION]: list };
+        this.stripLocalDataSourcesFromPages(doc);
+        if (markDirty) {
+            this.unsavedChanges.set(true);
+        }
+    }
+    stripLocalDataSourcesFromPages(doc) {
+        for (const page of doc.children ?? []) {
+            const options = page.options;
+            if (!options || !(AXP_LOCAL_DATA_SOURCES_OPTION in options)) {
+                continue;
+            }
+            const { [AXP_LOCAL_DATA_SOURCES_OPTION]: _removed, ...rest } = options;
+            page.options = rest;
+        }
+    }
+    //#endregion
     createPage() {
         const config = this.widgetRegisteryService.resolve('page-layout');
         const page = {
@@ -579,9 +995,20 @@ class AXPDesignerService {
         this.select({ widget: this.currentPage() });
     }
     reRenderPage() {
-        this.currentPage.set({ ...this.currentPage() });
+        const page = this.document().children?.[this.currentPageIndex()];
+        if (!page) {
+            return;
+        }
+        // Keep the same object as `document.children[i]`. A shallow copy made the
+        // board edit a detached page, so page options never appeared in export.
+        this.currentPage.set(page);
+        this.pageRenderEpoch.update((epoch) => epoch + 1);
+        const selected = this.selectedNode();
+        if (selected?.type === 'page-layout' && selected !== page) {
+            this.select({ widget: page });
+        }
         setTimeout(() => {
-            this.refresh({ widget: this.currentPage() });
+            this.refresh({ widget: page });
         });
     }
     findWidgetById(root, id) {
@@ -638,22 +1065,61 @@ class AXPDesignerService {
         }
         return null; // Return null if no container found
     }
-    addWidget(currentNode, node) {
-        //
+    createWidgetNode(node) {
         const cloned = cloneDeep(node);
-        const config = this.widgetRegisteryService.resolve(node.type);
-        //
+        this.stampNewWidgetTree(cloned, { keepNames: true, reservedNames: this.collectDocumentNameSet() });
+        return cloned;
+    }
+    /** Fills missing `__meta__.id`, config, and name on an already-on-canvas tree (e.g. AI-added children). */
+    ensureWidgetTreeMeta(root = this.document()) {
+        this.stampMissingWidgetMeta(root, this.collectDocumentNameSet());
+    }
+    /**
+     * Assigns unique `__meta__.id`, registry config, and a name on every node.
+     * Nested AI add-widget trees must be stamped the same way paste already does;
+     * otherwise children share `undefined` ids and the designer selects them all.
+     */
+    stampNewWidgetTree(node, options) {
+        const existing = typeof node.name === 'string' ? node.name.trim() : '';
+        if (!options.keepNames || !existing || options.reservedNames.has(existing)) {
+            node.name = this.nextUniqueName(node.type, options.reservedNames);
+        }
+        else {
+            node.name = existing;
+        }
+        options.reservedNames.add(node.name);
+        set(node, '__meta__.id', this.generateUniqueId());
+        set(node, '__meta__.config', this.widgetRegisteryService.resolve(node.type));
+        set(node, '__meta__.added', true);
+        node.children?.forEach((child) => this.stampNewWidgetTree(child, options));
+    }
+    stampMissingWidgetMeta(node, reservedNames) {
+        if (get(node, '__meta__.id') == null) {
+            set(node, '__meta__.id', this.generateUniqueId());
+        }
+        if (!get(node, '__meta__.config') && node.type) {
+            set(node, '__meta__.config', this.widgetRegisteryService.resolve(node.type));
+        }
+        const existing = typeof node.name === 'string' ? node.name.trim() : '';
+        if (!existing) {
+            node.name = this.nextUniqueName(node.type, reservedNames);
+        }
+        else {
+            node.name = existing;
+        }
+        reservedNames.add(node.name);
+        node.children?.forEach((child) => this.stampMissingWidgetMeta(child, reservedNames));
+    }
+    addWidget(currentNode, node) {
+        const cloned = this.createWidgetNode(node);
         this.commandManager.executeCommand(new AddWidgetCommand(cloned, currentNode, currentNode));
+        this.ensureDefaultTabsetChild(cloned);
         //
-        cloned.name = this.generateUniqueName(node.type);
-        set(cloned, '__meta__.id', this.generateUniqueId());
-        set(cloned, '__meta__.config', config);
-        set(cloned, '__meta__.added', true);
-        //
-        this.reRenderPage();
-        //
-        this.refresh({ widget: currentNode });
-        this.select({ widget: cloned });
+        if (!this.commandManager.isInTransaction()) {
+            this.reRenderPage();
+            this.refresh({ widget: currentNode });
+            this.select({ widget: cloned });
+        }
         return cloned;
     }
     removeWidget(node = this.selectedNode()) {
@@ -679,24 +1145,44 @@ class AXPDesignerService {
     }
     navigateTo(index) {
         this.commandManager.goToCommand(index);
-        this.reRenderPage();
-        const currentSelection = this.commandManager.selectedNode();
-        this.refresh({ widget: this.currentPage() });
-        this.select({ widget: currentSelection });
+        this.syncCanvasAfterHistory();
     }
     redo() {
+        if (!this.canRedo()) {
+            return;
+        }
         this.commandManager.redo();
-        this.reRenderPage();
-        const currentSelection = this.commandManager.selectedNode();
-        this.refresh({ widget: this.currentPage() });
-        this.select({ widget: currentSelection });
+        this.syncCanvasAfterHistory();
     }
     undo() {
+        if (!this.canUndo()) {
+            return;
+        }
         this.commandManager.undo();
-        this.reRenderPage();
-        const currentSelection = this.commandManager.selectedNode();
+        this.syncCanvasAfterHistory();
+    }
+    isInTransaction() {
+        return this.commandManager.isInTransaction();
+    }
+    runTransaction(action, description) {
+        this.commandManager.beginTransaction(description);
+        try {
+            return action();
+        }
+        finally {
+            this.commandManager.endTransaction();
+            if (!this.commandManager.isInTransaction()) {
+                this.syncCanvasAfterHistory();
+            }
+        }
+    }
+    syncCanvasAfterHistory() {
+        const selected = this.commandManager.selectedNode() ?? this.currentPage();
         this.refresh({ widget: this.currentPage() });
-        this.select({ widget: currentSelection });
+        if (selected) {
+            this.onUpdate.next({ widget: selected, values: { options: selected.options ?? {} } });
+        }
+        this.select({ widget: selected });
     }
     clearHistory() {
         this.commandManager.clear();
@@ -721,19 +1207,22 @@ class AXPDesignerService {
         // If the value is not an object or array, return it as is
         return obj;
     }
-    async addMetaToNodes(node, processedNodes, progressCallback) {
-        // Apply your meta logic here
+    async addMetaToNodes(node, processedNodes, progressCallback, reservedNames) {
         const config = this.widgetRegisteryService.resolve(node.type);
-        //
+        const existing = typeof node.name === 'string' ? node.name.trim() : '';
+        if (!existing) {
+            node.name = this.nextUniqueName(node.type, reservedNames);
+        }
+        else {
+            node.name = existing;
+        }
+        reservedNames.add(node.name);
         set(node, '__meta__.id', this.generateUniqueId());
         set(node, '__meta__.config', config);
-        //
-        // Increment the processed node count and update the progress dialog
         processedNodes.count++;
         progressCallback(processedNodes.count);
-        // Recursively process child nodes using Promise.all
         if (node.children && node.children.length > 0) {
-            node.children = await Promise.all(node.children.map(async (child) => await this.addMetaToNodes(child, processedNodes, progressCallback)));
+            node.children = await Promise.all(node.children.map(async (child) => this.addMetaToNodes(child, processedNodes, progressCallback, reservedNames)));
         }
         return node;
     }
@@ -775,14 +1264,7 @@ class AXPDesignerService {
             nearestContainer.children = [];
         }
         //
-        const setNameId = (node) => {
-            set(node, 'name', this.generateUniqueName(node.type));
-            set(node, '__meta__.id', this.generateUniqueId());
-            node.children?.forEach((n) => {
-                setNameId(n);
-            });
-        };
-        setNameId(newNode);
+        this.stampNewWidgetTree(newNode, { keepNames: false, reservedNames: this.collectDocumentNameSet() });
         //
         this.commandManager.executeCommand(new AddWidgetCommand(newNode, nearestContainer, nearestContainer));
         //
@@ -888,13 +1370,16 @@ class AXPDesignerService {
             buttons: [button],
         });
         try {
+            const reservedNames = new Set();
             const root = await this.addMetaToNodes(rootNode, processedNodes, (count) => {
                 dialog.setProgressValue(Math.ceil((count / totalNode) * 100));
                 dialog.setProgressStatus(`${count} of ${totalNode}`);
-            });
+            }, reservedNames);
             const page = root.children?.[0];
+            this.commandManager.clear();
             this.document.set(root);
             this.currentPage.set(page);
+            this.hydrateLocalDataSources(root);
             dialog.setProgressColor('success');
             dialog.setProgressText('Content loaded successfully');
             button.text = 'Okay';
@@ -919,15 +1404,36 @@ class AXPDesignerService {
         }
         return count;
     }
+    ensureDefaultTabsetChild(node) {
+        if (node.type !== 'tabset-layout' || (node.children?.length ?? 0) > 0) {
+            return;
+        }
+        const tabType = 'tabset-item';
+        const tabConfig = this.widgetRegisteryService.resolve(tabType);
+        const tab = {
+            type: tabType,
+            name: this.generateUniqueName(tabType),
+            options: {
+                title: '@platform-layout-widgets:widgets.tabset-item.default-title',
+            },
+            children: [],
+        };
+        set(tab, '__meta__.id', this.generateUniqueId());
+        set(tab, '__meta__.config', tabConfig);
+        node.children = [tab];
+    }
     generateUniqueName(type) {
-        // Normalize the type to follow camelCase convention
-        const baseName = type.charAt(0).toLowerCase() + type.slice(1);
+        return this.nextUniqueName(type, this.collectDocumentNameSet());
+    }
+    collectDocumentNameSet() {
+        const names = new Set();
+        this.collectAllNames(this.document(), names);
+        return names;
+    }
+    nextUniqueName(type, existingNames) {
+        const baseName = (type || 'widget').charAt(0).toLowerCase() + (type || 'widget').slice(1);
         let index = 1;
         let uniqueName = `${baseName}${index}`;
-        // Gather all existing names to check against
-        const existingNames = new Set();
-        this.collectAllNames(this.document(), existingNames);
-        // Increment the index until a unique name is found
         while (existingNames.has(uniqueName)) {
             index++;
             uniqueName = `${baseName}${index}`;
@@ -948,12 +1454,15 @@ class AXPDesignerService {
         }
     }
     updatePreview() {
+        const document = this.removeMetaProp(this.document());
+        storeDesignerPreviewDocument(document);
         this.eventService.publish(AXPDesignerMessageKeys.Preview, {
             id: this.templateId(),
-            document: this.removeMetaProp(this.document())
+            document,
         });
     }
     async openPreviewDialog() {
+        this.updatePreview();
         const com = await Promise.resolve().then(function () { return preview_component; }).then((c) => c.AXPLayoutDesignerPreviewComponent);
         await this.popupService.open(com, {
             header: false,
@@ -965,30 +1474,30 @@ class AXPDesignerService {
         });
     }
     openPreviewWindow() {
+        this.updatePreview();
         window.open('/forms/preview', '_blank');
     }
     getContextMenuItems(instance, isRoot = false) {
         const widget = instance;
-        const node = widget.node;
+        return this.buildContextMenuItems(widget.node, instance, isRoot);
+    }
+    getContextMenuItemsForNode(node, isRoot = false) {
+        return this.buildContextMenuItems(node, this.getWidgetInstance(node), isRoot);
+    }
+    buildContextMenuItems(node, instance, isRoot = false) {
         const items = [];
-        //       
         if (this.can(node).insert) {
             items.push(cloneWidgetMenu(AXP_DESIGNER_ADD_WIDGET_MENU, {
                 break: true,
             }));
         }
-        //
         items.push(cloneWidgetMenu(AXP_DESIGNER_CLONE_MENU, { disabled: !this.can(node).copyOrCut }));
         items.push(cloneWidgetMenu(AXP_DESIGNER_CUT_MENU, { disabled: !this.can(node).copyOrCut }));
         items.push(cloneWidgetMenu(AXP_DESIGNER_COPY_MENU, { disabled: !this.can(node).copyOrCut }));
         items.push(cloneWidgetMenu(AXP_DESIGNER_PASTE_MENU, { disabled: !this.can(node).paste, break: true }));
-        //
         items.push(cloneWidgetMenu(AXP_DESIGNER_DELETE_WIDGET_MENU, { disabled: !this.can(node).delete, break: true }));
-        //
         items.push(cloneWidgetMenu(AXP_DESIGNER_SAVE_AS_WIDGET_MENU));
-        if (instance.onContextMenu) {
-            instance.onContextMenu({ items });
-        }
+        instance?.onContextMenu?.({ items });
         if (!isRoot) {
             items.forEach(item => {
                 item.suffix = undefined;
@@ -997,49 +1506,51 @@ class AXPDesignerService {
         return items;
     }
     async executeCommand(context) {
-        const widget = context.instance;
-        if (context.instance.executeCommand) {
+        const instance = context.instance ?? (context.node ? this.getWidgetInstance(context.node) : null);
+        const widget = instance;
+        const node = widget?.node ?? context.node;
+        if (!node) {
+            return;
+        }
+        if (instance?.executeCommand) {
             const command = {
                 name: context.name,
                 data: context.data,
                 handled: false
             };
-            await context.instance.executeCommand(command);
+            await instance.executeCommand(command);
             if (command.handled)
                 return;
         }
         switch (context.name) {
             case AXP_DESIGNER_SELECT_WIDGET_MENU.name: {
-                this.select({ widget: widget.node });
+                this.select({ widget: node });
                 break;
             }
             case AXP_DESIGNER_ADD_WIDGET_MENU.name: {
-                this.showPicker(widget.node);
+                this.showPicker(node);
                 break;
             }
-            //
             case AXP_DESIGNER_DELETE_WIDGET_MENU.name: {
-                this.removeWidget(widget.node);
+                this.removeWidget(node);
                 break;
             }
-            //
             case AXP_DESIGNER_CLONE_MENU.name: {
-                this.clone(widget.node);
+                this.clone(node);
                 break;
             }
             case AXP_DESIGNER_CUT_MENU.name: {
-                this.cut(widget.node);
+                this.cut(node);
                 break;
             }
             case AXP_DESIGNER_COPY_MENU.name: {
-                this.copy(widget.node);
+                this.copy(node);
                 break;
             }
             case AXP_DESIGNER_PASTE_MENU.name: {
-                this.paste(widget.node);
+                this.paste(node);
                 break;
             }
-            //
         }
     }
     unsubscribeEvents() {
@@ -1219,12 +1730,12 @@ class AXPDesignerFlexDrawerComponent {
         </tr>
         <tr>
           <td [attr.colspan]="items().length" class="text-center">
-            <small>{{ range() }}</small>
+            <small>{{ range() > 0 ? range() : ' ' }}</small>
           </td>
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}:host table{margin-inline:auto;width:auto;border-collapse:separate;--tw-border-spacing-x: var(--spacing, .25rem);--tw-border-spacing-y: var(--spacing, .25rem);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);empty-cells:show}:host table td{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td[colspan]{height:auto;width:auto;border-style:var(--tw-border-style);border-width:0px}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
             type: Component,
@@ -1238,12 +1749,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         </tr>
         <tr>
           <td [attr.colspan]="items().length" class="text-center">
-            <small>{{ range() }}</small>
+            <small>{{ range() > 0 ? range() : ' ' }}</small>
           </td>
         </tr>
       </tbody>
     </table>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{display:block;width:100%}:host table{margin-inline:auto;width:auto;border-collapse:separate;--tw-border-spacing-x: var(--spacing, .25rem);--tw-border-spacing-y: var(--spacing, .25rem);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);empty-cells:show}:host table td{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td[colspan]{height:auto;width:auto;border-style:var(--tw-border-style);border-width:0px}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { itemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], handleMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
@@ -1274,13 +1785,8 @@ class AXPDesignerGridDrawerComponent {
         this.rangeR.set(0);
         this.rangeC.set(0);
     }
-    get __style() {
-        return {
-            '--cols-width': `${this.colsCount() == 0 ? 0 : 100 / this.colsCount()}%`,
-        };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerGridDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" }, properties: { "style": "this.__style" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerGridDrawerComponent, isStandalone: true, selector: "axp-designer-grid-drawer", inputs: { rowsCount: { classPropertyName: "rowsCount", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, colsCount: { classPropertyName: "colsCount", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsCount: "rowsChange", colsCount: "columnsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" } }, ngImport: i0, template: `
     <table class="table-picker">
       <tbody>
         @for (r of rows(); track $index) {
@@ -1296,12 +1802,12 @@ class AXPDesignerGridDrawerComponent {
         }
         <tr>
           <td [attr.colspan]="columns().length" class="text-center">
-            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+            <small>{{ rangeC() > 0 && rangeR() > 0 ? rangeC() + '×' + rangeR() : ' ' }}</small>
           </td>
         </tr>
       </tbody>
     </table>
-  `, isInline: true, styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:block;width:100%}:host table{margin-inline:auto;width:auto;border-collapse:separate;--tw-border-spacing-x: var(--spacing, .25rem);--tw-border-spacing-y: var(--spacing, .25rem);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);empty-cells:show}:host table td{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td[colspan]{height:auto;width:auto;border-style:var(--tw-border-style);border-width:0px}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerGridDrawerComponent, decorators: [{
             type: Component,
@@ -1321,18 +1827,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }
         <tr>
           <td [attr.colspan]="columns().length" class="text-center">
-            <small>{{ rangeC() }}×{{ rangeR() }}</small>
+            <small>{{ rangeC() > 0 && rangeR() > 0 ? rangeC() + '×' + rangeR() : ' ' }}</small>
           </td>
         </tr>
       </tbody>
     </table>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{width:100%}:host table{width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:calc(var(--spacing, .25rem) * 10);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);width:var(--cols-width)}:host table td:after{content:\"\";display:block}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: ["@layer properties;:host{display:block;width:100%}:host table{margin-inline:auto;width:auto;border-collapse:separate;--tw-border-spacing-x: var(--spacing, .25rem);--tw-border-spacing-y: var(--spacing, .25rem);border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);empty-cells:show}:host table td{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default)}:host table td[colspan]{height:auto;width:auto;border-style:var(--tw-border-style);border-width:0px}:host table td.picked{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-primary-100))}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { rowsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], colsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], handleMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
-            }], __style: [{
-                type: HostBinding,
-                args: ['style']
             }] } });
 
 const WIDGET_PICKER_I18N = {
@@ -1613,7 +2116,7 @@ class AXPDesignerWidgetPickerComponent extends AXBasePageComponent {
         return this.isWidgetSelected(originalWidget);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerWidgetPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, viewQueries: [{ propertyName: "tabsHost", first: true, predicate: ["tabsHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "component", type: AXPWidgetItemComponent, selector: "axp-widget-item", inputs: ["widget", "isSelected", "showPinButton", "customClasses"], outputs: ["onWidgetClick", "onPinClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, viewQueries: [{ propertyName: "tabsHost", first: true, predicate: ["tabsHost"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'lightest-surface shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "component", type: AXPWidgetItemComponent, selector: "axp-widget-item", inputs: ["widget", "isSelected", "showPinButton", "customClasses"], outputs: ["onWidgetClick", "onPinClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerWidgetPickerComponent, decorators: [{
             type: Component,
@@ -1628,7 +2131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPStickyDirective,
                         AXPWidgetItemComponent,
                         AXTranslationModule,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'bg-lightest shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"pickerShellClass()\">\n  <div>\n    <ax-tabs #tabsHost [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n      @for (w of tabs(); track w.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(w.title | translate | async)!\"\n          [key]=\"w.name\"\n          [active]=\"currentTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"overflow-auto\" #content>\n    <div\n      class=\"p-4 sticky top-0 z-10 transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'lightest-surface shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        [placeholder]=\"(i18n.searchPlaceholder | translate | async) ?? ''\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n    </div>\n    <div class=\"flex flex-col p-4 pt-0\">\n      @if (pinnedWidgetItems().length) {\n        <div class=\"axp-designer-widget-picker__section axp-designer-widget-picker__section--first\">\n          <div class=\"axp-designer-widget-picker__group-heading\">\n            <span class=\"axp-designer-widget-picker__group-title\">{{\n              (i18n.pinnedSectionTitle | translate | async) ?? ''\n            }}</span>\n            <span class=\"axp-designer-widget-picker__group-line\"></span>\n          </div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of pinnedWidgetItems(); track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n      @for (group of regularGroupedSections(); track group.trackKey; let isFirst = $first) {\n        <div\n          class=\"axp-designer-widget-picker__section\"\n          [class.axp-designer-widget-picker__section--first]=\"isFirst && pinnedWidgetItems().length === 0\"\n        >\n          @if (group.title) {\n            <div class=\"axp-designer-widget-picker__group-heading\">\n              <span class=\"axp-designer-widget-picker__group-title\">{{\n                (group.title | translate | async) ?? ''\n              }}</span>\n              <span class=\"axp-designer-widget-picker__group-line\"></span>\n            </div>\n          }\n          <div class=\"grid grid-cols-2 gap-2\">\n            @for (widgetItem of group.widgetItems; track $any(widgetItem.data).name) {\n              <axp-widget-item\n                [widget]=\"widgetItem\"\n                [isSelected]=\"isWidgetItemSelected(widgetItem)\"\n                (onWidgetClick)=\"handleWidgetClick($event)\"\n                (onPinClick)=\"handleWidgetPinClick($event)\"\n              >\n              </axp-widget-item>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n@if (selectedWidgets().length) {\n  <ax-footer>\n    <ax-suffix>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"(i18n.selectedCount | translate: { params: { count: selectedWidgets().length } } | async) ?? ''\"\n        (onClick)=\"handleConfirmSelection()\"\n      ></ax-button>\n    </ax-suffix>\n  </ax-footer>\n}\n", styles: ["@layer properties;.axp-designer-widget-picker__group-heading{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem)}.axp-designer-widget-picker__group-title{flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}.axp-designer-widget-picker__group-line{min-width:calc(var(--spacing, .25rem) * 4);flex:1;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default)}.axp-designer-widget-picker__section{margin-top:calc(var(--spacing, .25rem) * 6);padding-top:var(--spacing, .25rem)}.axp-designer-widget-picker__section.axp-designer-widget-picker__section--first{margin-top:0;padding-top:0}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabsHost: [{ type: i0.ViewChild, args: ['tabsHost', { isSignal: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }] } });
 
 var widgetPicker_component = /*#__PURE__*/Object.freeze({
@@ -1637,6 +2140,38 @@ var widgetPicker_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPWidgetDesignerRendererDirective {
+    /** Prefer `__meta__.id`; fall back to object identity so nameless AI children are not all treated as the same widget. */
+    sameWidget(a, b) {
+        if (!a || !b) {
+            return a === b;
+        }
+        const idA = this.getId(a);
+        const idB = this.getId(b);
+        if (idA != null && idB != null) {
+            return idA == idB;
+        }
+        return a === b;
+    }
+    /**
+     * Drawer inserts (flex, grid, table) run inside a transaction that refreshes the page only.
+     * Each widget copies `node.children` into its own signal at creation, so a page refresh must
+     * also sync every nested container or the size picker stays on screen after cells are added.
+     */
+    shouldSyncChildren(widget) {
+        return this.isCurrentWidget(widget) || this.isNestedUnder(widget, this.node());
+    }
+    isNestedUnder(ancestor, node) {
+        const children = ancestor.children;
+        if (!children?.length) {
+            return false;
+        }
+        for (const child of children) {
+            if (this.sameWidget(child, node) || this.isNestedUnder(child, node)) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * @ignore
      */
@@ -1668,18 +2203,18 @@ class AXPWidgetDesignerRendererDirective {
         ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
         this.hostElement = () => this.instance?.host;
         this.getId = (w) => get(w, '__meta__.id');
-        this.isCurrentWidget = (w) => this.getId(w) == this.getId(this.node());
+        this.isCurrentWidget = (w) => this.sameWidget(w, this.node());
         this.subs = [];
         this.subs[0] = this.service.onUpdate
             .pipe(
         //debounceTime(time),
-        distinctUntilChanged((p, c) => this.getId(p.widget) == this.getId(c.widget) && isEqual(p.values?.options, c.values?.options)), filter((c) => this.isCurrentWidget(c.widget) && !this.locked()))
+        distinctUntilChanged((p, c) => this.sameWidget(p.widget, c.widget) && isEqual(p.values?.options, c.values?.options)), filter((c) => this.isCurrentWidget(c.widget) && !this.locked()))
             .subscribe((c) => {
             this.applyOptions(c.values?.options);
         });
         //
         this.subs[1] = this.service.onSelected
-            .pipe(distinctUntilChanged((p, c) => this.getId(p.widget) == this.getId(c.widget)))
+            .pipe(distinctUntilChanged((p, c) => this.sameWidget(p.widget, c.widget)))
             .subscribe((c) => {
             this.zone.runOutsideAngular(() => {
                 if (this.isCurrentWidget(c.widget) && !this.locked()) {
@@ -1692,7 +2227,7 @@ class AXPWidgetDesignerRendererDirective {
         });
         //
         this.subs[2] = this.service.onFocused
-            .pipe(distinctUntilChanged((p, c) => !isNil(p.widget) && !isNil(c.widget) && this.getId(p.widget) == this.getId(c.widget)))
+            .pipe(distinctUntilChanged((p, c) => this.sameWidget(p.widget, c.widget)))
             .subscribe((c) => {
             if (c.widget && this.isCurrentWidget(c.widget)) {
                 this.addOverlay();
@@ -1703,9 +2238,12 @@ class AXPWidgetDesignerRendererDirective {
         });
         //
         this.subs[3] = this.service.onRefresh
-            .pipe(debounceTime(200), filter((c) => this.isCurrentWidget(c.widget)))
+            .pipe(debounceTime(200), filter((c) => this.shouldSyncChildren(c.widget)))
             .subscribe((c) => {
             this.instance?.setChildren(this.node().children ?? []);
+            if (this.isCurrentWidget(c.widget)) {
+                this.applyOptions(this.node().options);
+            }
         });
         //
     }
@@ -1725,6 +2263,9 @@ class AXPWidgetDesignerRendererDirective {
         this.subs.forEach((s) => {
             s.unsubscribe();
         });
+        if (this.node()) {
+            this.service.unregister(this.node());
+        }
         // Clear loading state and reset tracking variables
         this.isLoadingComponent = false;
         this.currentNodeId = null;
@@ -1745,6 +2286,9 @@ class AXPWidgetDesignerRendererDirective {
             //   this.isLoadingComponent = false;
             //   return;
             // }
+            if (this.instance && this.node()) {
+                this.service.unregister(this.node());
+            }
             this.viewContainerRef.clear();
             this.isLoading.set(true);
             this.currentNodeId = nodeId;
@@ -1774,7 +2318,13 @@ class AXPWidgetDesignerRendererDirective {
                     },
                 ],
             });
-            var com = await this.config?.components[this.mode()]?.component();
+            const loadComponent = this.config?.components[this.mode()]?.component ??
+                this.config?.components['edit']?.component ??
+                this.config?.components['view']?.component;
+            const com = await loadComponent?.();
+            if (!com) {
+                throw new Error(`No designer/edit/view component registered for widget "${this.node().type}"`);
+            }
             this.instance = this.viewContainerRef.createComponent(com, { injector: token }).instance;
             this.instance.locked = this.locked();
             this.instance.parent = this.parentNode();
@@ -1848,9 +2398,28 @@ class AXPWidgetDesignerRendererDirective {
     applySelectedStyle() {
         if (this.locked())
             return;
-        //
-        this.hostElement()?.classList.add('axp-state-selected');
-        this.hostElement()?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        const host = this.hostElement();
+        if (!host) {
+            return;
+        }
+        host.classList.add('axp-state-selected');
+        if (!this.isHostFullyVisible(host)) {
+            host.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+    isHostFullyVisible(host) {
+        const canvas = host.closest('.axp-designer-canvas');
+        const board = host.closest('.axp-designer-board');
+        const container = canvas instanceof HTMLElement ? canvas : board instanceof HTMLElement ? board : host.parentElement;
+        if (!container) {
+            return true;
+        }
+        const hostRect = host.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        return (hostRect.top >= containerRect.top &&
+            hostRect.bottom <= containerRect.bottom &&
+            hostRect.left >= containerRect.left &&
+            hostRect.right <= containerRect.right);
     }
     removeSelectedStyle() {
         this.hostElement()?.classList.remove('axp-state-selected');
@@ -2003,6 +2572,24 @@ class AXPDesignerBoardComponent {
             this.contextMenu?.refresh();
         });
     }
+    handleBoardContextMenu(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const host = target.closest('.axp-widget-host');
+        if (!(host instanceof HTMLElement)) {
+            return;
+        }
+        const renderer = get(host, '__meta__.renderer');
+        const instance = get(host, '__meta__.instance');
+        if (!renderer || !instance) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextMenu?.showAt({ x: event.clientX, y: event.clientY }, host);
+    }
     handleContextMenuOpening(e) {
         const renderer = get(e.targetElement, '__meta__.renderer');
         const instance = get(e.targetElement, '__meta__.instance');
@@ -2093,26 +2680,32 @@ class AXPDesignerBoardComponent {
         const cls = {};
         cls[`width`] = this.width();
         cls[`max-width`] = '1280px';
+        cls[`min-height`] = 'calc(100% - 5rem)';
         return cls;
     }
     get __class() {
         const cls = {};
         cls[`axp-designer-board`] = true;
         cls[`axp-state-design`] = true;
-        cls['h-full'] = true;
+        cls['min-h-full'] = true;
+        cls['shrink-0'] = true;
+        cls['self-start'] = true;
         cls['overflow-auto'] = true;
         cls[`axp-preview-${this.service.size()}`] = true;
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerBoardComponent, isStandalone: true, selector: "axp-designer-board", host: { listeners: { "contextmenu": "handleBoardContextMenu($event)" }, properties: { "style": "this.__style", "class": "this.__class" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<axp-widgets-container [context]=\"context\">\n  <!-- ----- Remount the page when epoch changes; keep the document node identity ----- -->\n  @for (epoch of [service.pageRenderEpoch()]; track epoch) {\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n  }\n</axp-widgets-container>\n\n<!-- Opened from the board host contextmenu; [target] cannot bind hosts that render after the menu. -->\n<ax-context-menu\n  class=\"ax-dark\"\n  #contextMenu\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n>\n</ax-context-menu>", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPWidgetCoreModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\">\n  <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n</axp-widgets-container>\n\n<ax-context-menu class=\"ax-dark\" #contextMenu [target]=\"'.axp-widget-host'\" [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\" (onOpening)=\"handleContextMenuOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\n</ax-context-menu>" }]
+            args: [{ selector: 'axp-designer-board', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPWidgetCoreModule, AXPWidgetDesignerRendererDirective, AXMenuModule], template: "<axp-widgets-container [context]=\"context\">\n  <!-- ----- Remount the page when epoch changes; keep the document node identity ----- -->\n  @for (epoch of [service.pageRenderEpoch()]; track epoch) {\n    <ng-container axp-widget-designer-renderer [node]=\"service.currentPage()\" [mode]=\"'designer'\"></ng-container>\n  }\n</axp-widgets-container>\n\n<!-- Opened from the board host contextmenu; [target] cannot bind hosts that render after the menu. -->\n<ax-context-menu\n  class=\"ax-dark\"\n  #contextMenu\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n>\n</ax-context-menu>" }]
         }], ctorParameters: () => [], propDecorators: { contextMenu: [{
                 type: ViewChild,
                 args: ['contextMenu']
+            }], handleBoardContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }], __style: [{
                 type: HostBinding,
                 args: ['style']
@@ -2146,7 +2739,7 @@ class AXPDesignerBreadcrumbsComponent {
         <i class="ax-icon ax-icon-chevron-right"></i>
       </ng-template>
     </ax-breadcrumbs>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1$4.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1$4.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2174,73 +2767,66 @@ class AXPLayoutDesignerDrawerContentComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPLayoutDesignerDrawerContentComponent, isStandalone: true, selector: "axp-designer-drawer-content", ngImport: i0, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button class=\"ax-sm\"></ax-close-button>\n        </div>\n    </div>\n    <div class=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerDrawerContentComponent, decorators: [{
             type: Component,
-            args: [{ imports: [AXDecoratorModule], selector: 'axp-designer-drawer-content', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button></ax-close-button>\n        </div>\n    </div>\n    <div class=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ imports: [AXButtonModule, AXDecoratorModule], selector: 'axp-designer-drawer-content', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"flex flex-col border-e w-72 h-full\">\n    <div class=\"flex flex-row w-full justify-between p-2 border-b\">\n        <div class=\"flex flex-row gap-2 items-center font-semibold\">\n            <ng-content select=\"ax-title\"></ng-content>\n        </div>\n        <div class=\"flex gap-1 items-center\">\n            <ng-content select=\"ax-content[header]\">\n            </ng-content>\n            <ax-close-button class=\"ax-sm\"></ax-close-button>\n        </div>\n    </div>\n    <div class=\"flex-1 h-full overflow-auto\">\n        <ng-content select=\"ax-content[body]\">\n\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: () => [] });
 
-const LIST_REGISTERED_QUERIES_KEY = 'PlatformManagement:ListRegisteredQueries';
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
 class AXPDesignerDataSourcesComponent {
     constructor() {
-        this.service = inject(AXPDesignerService);
-        this.commandService = inject(AXPCommandService);
-        this.queryService = inject(AXPQueryService);
-        this.list = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        //#region ----- Services & Dependencies -----
+        this.store = inject(AXP_LOCAL_DATA_SOURCE_STORE);
+        this.listDialog = inject(AXPLocalDataSourceEditorDialogService);
     }
-    async ngOnInit() {
-        try {
-            const result = await this.queryService.fetch(LIST_REGISTERED_QUERIES_KEY, {
-                skip: 0,
-                take: 5000,
-            });
-            const page = runtimeQueryCollectionData(result);
-            const items = (page?.items ?? []).map((c) => {
-                const row = c;
-                return { name: row.name, title: row.title };
-            });
-            this.list.set(items);
-        }
-        catch {
-            this.list.set([]);
-        }
+    //#endregion
+    //#region ----- Event Handlers -----
+    handleAddClick() {
+        void this.openListDialog();
     }
-    async handleAddClick() {
-        await this.commandService.execute('Entity:Create', {
-            entity: 'PlatformManagement.QueryDefinition',
-            entityInfo: {
-                name: 'QueryDefinition',
-                module: 'PlatformManagement',
-                title: '@platform-management:query-definitions.entities.query-definition.title',
-            },
-            data: {},
-            options: {
-                process: {
-                    canCreateNewOne: false,
-                    redirect: false,
-                },
-                layout: {
-                    size: 'lg',
-                },
-            },
-            metadata: {
-                formBuilder: true,
-            },
+    handleEdit(id) {
+        void this.openListDialog(id);
+    }
+    handleRemove(id) {
+        this.store.remove(id);
+    }
+    //#endregion
+    //#region ----- Private -----
+    async openListDialog(id) {
+        const existing = id ? this.store.get(id) : undefined;
+        const form = await this.listDialog.open({
+            mode: existing ? 'edit' : 'create',
+            name: existing?.name,
+            columns: existing?.columns,
+            items: existing?.items,
         });
+        if (!form) {
+            return;
+        }
+        if (existing && id) {
+            this.store.update(id, { name: form.name, items: form.items, columns: form.columns });
+            return;
+        }
+        const created = this.store.create(form.name);
+        this.store.update(created.id, { items: form.items, columns: form.columns });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerDataSourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerDataSourcesComponent, isStandalone: true, selector: "axp-designer-data-sources", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Data Sources</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (list().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of list(); track $index) {\n          <li>\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            {{ item.title }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerDataSourcesComponent, isStandalone: true, selector: "axp-designer-data-sources", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.data-sources.title' | translate | async }}</ax-title>\n\n  <ax-content header>\n    <ax-button\n      look=\"blank\"\n      class=\"ax-sm\"\n      [title]=\"('@layout-designer:components.data-sources.add' | translate | async) ?? ''\"\n      (onClick)=\"handleAddClick()\"\n    >\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (store.sources().length) {\n      <!-- ----- Form-local named lists ----- -->\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of store.sources(); track item.id) {\n          <li class=\"flex items-center gap-1\">\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            <span class=\"flex-1 truncate\">{{ item.name || ('@layout-designer:components.data-sources.untitled' | translate | async) }}</span>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@general:actions.edit.title' | translate | async) ?? ''\"\n              (onClick)=\"handleEdit(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n            </ax-button>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@layout-designer:components.data-sources.delete' | translate | async) ?? ''\"\n              (onClick)=\"handleRemove(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-trash\"></ax-icon>\n            </ax-button>\n          </li>\n        }\n      </ul>\n    }\n    <!-- ----- Empty local bag ----- -->\n    @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerDataSourcesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-data-sources', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
                         AXDecoratorModule,
                         AXButtonModule,
+                        AXTranslationModule,
                         AXPLayoutDesignerDrawerContentComponent,
-                        AXPStateMessageComponent
-                    ], template: "<axp-designer-drawer-content>\n  <ax-title>Data Sources</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" title=\"Add New Data Source\" (onClick)=\"handleAddClick()\">\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (list().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of list(); track $index) {\n          <li>\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            {{ item.title }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+                        AXPStateMessageComponent,
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.data-sources.title' | translate | async }}</ax-title>\n\n  <ax-content header>\n    <ax-button\n      look=\"blank\"\n      class=\"ax-sm\"\n      [title]=\"('@layout-designer:components.data-sources.add' | translate | async) ?? ''\"\n      (onClick)=\"handleAddClick()\"\n    >\n      <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (store.sources().length) {\n      <!-- ----- Form-local named lists ----- -->\n      <ul class=\"axp-designer-drawer-list\">\n        @for (item of store.sources(); track item.id) {\n          <li class=\"flex items-center gap-1\">\n            <i class=\"me-1 fa-solid fa-table\"></i>\n            <span class=\"flex-1 truncate\">{{ item.name || ('@layout-designer:components.data-sources.untitled' | translate | async) }}</span>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@general:actions.edit.title' | translate | async) ?? ''\"\n              (onClick)=\"handleEdit(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n            </ax-button>\n            <ax-button\n              look=\"blank\"\n              class=\"ax-sm\"\n              [title]=\"('@layout-designer:components.data-sources.delete' | translate | async) ?? ''\"\n              (onClick)=\"handleRemove(item.id)\"\n            >\n              <ax-icon class=\"fa-light fa-trash\"></ax-icon>\n            </ax-button>\n          </li>\n        }\n      </ul>\n    }\n    <!-- ----- Empty local bag ----- -->\n    @else {\n      <axp-state-message\n        icon=\"fa-light fa-database\"\n        [title]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.title'\"\n        [description]=\"'@layout-designer:components.data-sources.empty-states.no-data-sources.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
         }] });
 
 class AXPDesignerHistoryComponent {
@@ -2248,7 +2834,7 @@ class AXPDesignerHistoryComponent {
         this.service = inject(AXPDesignerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.italic]=\"step.isFuture\"\n            [class.text-neutral-400]=\"step.isFuture\"\n            [class.state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerHistoryComponent, isStandalone: true, selector: "axp-designer-history", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>History</ax-title>\n\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\">\n      <ax-icon class=\"fa-light fa-ellipsis\"></ax-icon>\n      <ax-dropdown-panel class=\"ax-sm\">\n        <ax-button-item-list>\n          <ax-button-item text=\"Clear\" name=\"add\" (onClick)=\"service.clearHistory()\"> </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @if (service.history().length) {\n      <ul class=\"axp-designer-drawer-list\">\n        @for (step of service.history(); track $index) {\n          <li\n            (click)=\"service.navigateTo($index)\"\n            [class.italic]=\"step.isFuture\"\n            [class.text-neutral-400]=\"step.isFuture\"\n            [class.state-selected]=\"step.isCurrent\"\n          >\n            <i class=\"me-1\" [ngClass]=\"step.icon\"></i>\n            {{ step.description }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-history\"\n        [title]=\"'@layout-designer:components.history.empty-states.no-changes.title'\"\n        [description]=\"'@layout-designer:components.history.empty-states.no-changes.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHistoryComponent, decorators: [{
             type: Component,
@@ -2263,8 +2849,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 class AXPDesignerOutlineComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
     constructor() {
+        //#region ----- Services & Dependencies -----
         this.service = inject(AXPDesignerService);
+        this.contextMenu = viewChild('outlineContextMenu', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
         this.collapsedStates = new Map();
         this.root = signal(this.getTree(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
@@ -2272,6 +2865,8 @@ class AXPDesignerOutlineComponent {
             this.root.update((c) => ({ ...this.getTree() }));
         });
     }
+    //#endregion
+    //#region ----- Tree -----
     getTree() {
         return {
             type: AXPWidgetsCatalog.document,
@@ -2279,64 +2874,209 @@ class AXPDesignerOutlineComponent {
         };
     }
     toggleCollapse(node) {
-        // Toggle the current state or set to true if undefined
         this.collapsedStates.set(node, !this.collapsedStates.get(node));
     }
     isCollapsed(node) {
-        // Return the collapsed state, default is false (expanded)
         return !!this.collapsedStates.get(node);
     }
     getConfig(node) {
         return get(node, '__meta__.config');
     }
+    /** Solid, type-colored icon so outline rows stay scannable on a dark drawer. */
+    getOutlineIconClass(config) {
+        const icon = (config?.icon ?? 'fa-solid fa-cube')
+            .replace(/\bfa-light\b/g, 'fa-solid')
+            .replace(/\bfa-regular\b/g, 'fa-solid');
+        return `${icon} ${this.getOutlineIconColor(config)}`;
+    }
+    getOutlineIconColor(config) {
+        switch (config?.type) {
+            case 'container':
+                return 'text-primary';
+            case 'editor':
+                return 'text-success';
+            case 'action':
+                return 'text-warning';
+            case 'view':
+                return 'text-secondary';
+            case 'filter':
+                return 'text-primary';
+            case 'validation':
+                return 'text-danger';
+            case 'dashboard':
+                return 'text-warning';
+            default:
+                return 'text-primary';
+        }
+    }
+    /** Caption, text-block content, or the widget type title. Type-slug names stay off this string. */
+    getOutlineTitle(node) {
+        return this.readOutlineCaption(node) ?? this.getConfig(node)?.title ?? node.type ?? '';
+    }
+    /** Plain captions render as-is. Type titles and multi-language captions go through translate. */
+    usesOutlineTranslation(title) {
+        return typeof title !== 'string' || title.startsWith('@');
+    }
+    outlinePlainTitle(title) {
+        return typeof title === 'string' ? title : '';
+    }
+    /** Field names such as `txtlocation`. Generated slugs (`text-block-layout2`, `page`) stay off the row. */
+    getOutlineNameSuffix(node) {
+        const name = typeof node.name === 'string' ? node.name.trim() : '';
+        if (!name || this.isGeneratedWidgetName(node.type, name)) {
+            return '';
+        }
+        return ` : ${name}`;
+    }
+    /** Full row text, plus the generated name when the visible label hides it. */
+    outlineTooltip(node, title, suffix) {
+        const visible = `${title ?? ''}${suffix}`.trim();
+        const name = typeof node.name === 'string' ? node.name.trim() : '';
+        if (name && !visible.includes(name)) {
+            return visible ? `${visible} (${name})` : name;
+        }
+        return visible;
+    }
+    readOutlineCaption(node) {
+        const options = node.options;
+        if (!options || typeof options !== 'object' || Array.isArray(options)) {
+            return undefined;
+        }
+        const record = options;
+        const caption = record['label'] ?? record['title'] ?? record['caption'] ?? record['text'];
+        if (typeof caption === 'string' && caption.trim()) {
+            return caption.trim();
+        }
+        if (caption && typeof caption === 'object' && !Array.isArray(caption)) {
+            return caption;
+        }
+        if (node.type !== 'text-block-layout' || typeof record['content'] !== 'string') {
+            return undefined;
+        }
+        const plain = this.stripOutlineHtml(record['content']).replace(/\s+/g, ' ').trim();
+        return plain || undefined;
+    }
+    isGeneratedWidgetName(type, name) {
+        const widgetType = (type ?? '').trim();
+        if (this.matchesTypeSlug(name, widgetType)) {
+            return true;
+        }
+        const shortType = widgetType.replace(/-layout$/, '');
+        return shortType !== widgetType && this.matchesTypeSlug(name, shortType);
+    }
+    matchesTypeSlug(name, base) {
+        if (!base) {
+            return false;
+        }
+        if (name === base) {
+            return true;
+        }
+        if (!name.startsWith(base)) {
+            return false;
+        }
+        return /^[0-9]+$/.test(name.slice(base.length));
+    }
+    stripOutlineHtml(value) {
+        return value
+            .replace(/<br\s*\/?>/gi, ' ')
+            .replace(/<[^>]+>/g, ' ')
+            .replace(/&nbsp;/gi, ' ')
+            .replace(/&amp;/gi, '&')
+            .replace(/&lt;/gi, '<')
+            .replace(/&gt;/gi, '>');
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
     handleClick(e, node) {
         e.stopPropagation();
         this.service.select({ widget: node });
     }
     handleToggleClick(event, item) {
-        event.stopPropagation(); // Prevents the event from bubbling up to parent elements
+        event.stopPropagation();
         this.toggleCollapse(item);
     }
     handleMouseOver(e, node) {
         e.stopPropagation();
         this.service.focus({ widget: node });
     }
+    handleContextMenu(event, node) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.service.select({ widget: node });
+        const menu = this.contextMenu();
+        if (!menu) {
+            return;
+        }
+        const instance = this.service.getWidgetInstance(node);
+        const items = this.service.getContextMenuItemsForNode(node, true);
+        this.bindMenuData(items, instance, node);
+        const targetElement = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
+        menu.showAt({ x: event.clientX, y: event.clientY }, targetElement, {
+            sender: menu,
+            canceled: false,
+            targetElement,
+            items,
+        });
+    }
+    async handleContextMenuItemClick(e) {
+        if (e.item.name) {
+            const instance = get(e.item.data, 'instance');
+            const node = get(e.item.data, 'node');
+            await this.service.executeCommand({ instance, node, name: e.item.name });
+        }
+    }
+    //#endregion
+    //#region ----- Context Menu -----
+    bindMenuData(items, instance, node) {
+        items.forEach((item) => {
+            item.data = { ...(item.data ?? {}), instance, node };
+            if (item.items) {
+                this.bindMenuData(item.items, instance, node);
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerOutlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <ul class=\"space-y-1 p-1 text-white text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"flex flex-row items-center cursor-pointer transition duration-150 ease-in-out hover:bg-gray-700 py-1 px-2 rounded-sm group\"\n          >\n            <span class=\"w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"truncate flex-1 pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"invisible group-hover:visible flex gap-2 justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-white text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerOutlineComponent, isStandalone: true, selector: "axp-designer-outline", viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["outlineContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.outline.title' | translate | async }}</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <!-- ----- Outline tree of the current page ----- -->\n      <ul class=\"space-y-1 p-1 text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div [class.darker-surface]=\"item === service.selectedNode()\" class=\"flex flex-row items-center gap-1 cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm\" (contextmenu)=\"handleContextMenu($event, item)\">\n            <span class=\"w-3 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Collapse / expand when this node has children ----- -->\n              @if (item.children?.length) {\n                <i class=\"fa-solid fa-xs opacity-60\" [class.fa-chevron-right]=\"isCollapsed(item)\" (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-4 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Widget icon from config, colored by widget type ----- -->\n              @if (config?.icon) {\n                <i [ngClass]=\"getOutlineIconClass(config)\"></i>\n              }\n            </span>\n            @let title = getOutlineTitle(item);\n            @let suffix = getOutlineNameSuffix(item);\n            <!--------------------------------------------------------------->\n            <!-- ----- Translate type titles; plain captions and text-block content stay as stored ----- -->\n            @if (usesOutlineTranslation(title)) {\n              @let translated = (title | translate | async) ?? '';\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, translated, suffix)\">{{ translated }}{{ suffix }}</span>\n            }\n            <!-- ----- Plain caption or stripped text-block content ----- -->\n            @else {\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, outlinePlainTitle(title), suffix)\">{{ outlinePlainTitle(title) }}{{ suffix }}</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Nested outline children ----- -->\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    <!-- ----- Empty outline when the page has no widgets ----- -->\n    @else {\n      <axp-state-message icon=\"fa-light fa-shapes\" [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\" [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"></axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n\n<!-- Opened from each outline row; same commands as the canvas widget menu. -->\n<ax-context-menu class=\"ax-dark\" #outlineContextMenu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\" (onItemClick)=\"handleContextMenuItemClick($event)\"></ax-context-menu>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerOutlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-outline', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         AXDecoratorModule,
+                        AXTranslationModule,
+                        AXMenuModule,
                         AXPLayoutDesignerDrawerContentComponent,
-                        AXPStateMessageComponent
-                    ], template: "<axp-designer-drawer-content>\n  <ax-title>Outline</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <ul class=\"space-y-1 p-1 text-white text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div\n            [class.bg-neutral-700]=\"item === service.selectedNode()\"\n            class=\"flex flex-row items-center cursor-pointer transition duration-150 ease-in-out hover:bg-gray-700 py-1 px-2 rounded-sm group\"\n          >\n            <span class=\"w-5\">\n              @if (item.children?.length) {\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-chevron-right]=\"isCollapsed(item)\"\n                  (click)=\"handleToggleClick($event, item)\"\n                  [class.fa-chevron-down]=\"!isCollapsed(item)\"\n                ></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-5\">\n              @if (config.icon) {\n                <i [ngClass]=\"config.icon\"></i>\n              }\n            </span>\n            <span class=\"truncate flex-1 pe-2\">{{ config.title }} : {{ item.name }}</span>\n            <div class=\"invisible group-hover:visible flex gap-2 justify-end\">\n              @if (config.type == 'container') {\n                <i class=\"fa-light fa-plus hover:text-primary-500\" (click)=\"service.showPicker(item)\"></i>\n              }\n              @if (config.name != 'page-layout') {\n                <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removeWidget(item)\"></i>\n              }\n            </div>\n          </div>\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-white text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\">\n                </ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    } @else {\n      <axp-state-message\n        icon=\"fa-light fa-shapes\"\n        [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\"\n        [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"\n      >\n      </axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
-        }], ctorParameters: () => [] });
+                        AXPStateMessageComponent,
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.outline.title' | translate | async }}</ax-title>\n\n  <ax-content body>\n    @if (root().children?.length) {\n      <!-- ----- Outline tree of the current page ----- -->\n      <ul class=\"space-y-1 p-1 text-sm\">\n        @for (node of root().children; track $index) {\n          <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      </ul>\n      <ng-template #sideMenu let-item>\n        <li (click)=\"handleClick($event, item)\" (mouseover)=\"handleMouseOver($event, item)\">\n          <div [class.darker-surface]=\"item === service.selectedNode()\" class=\"flex flex-row items-center gap-1 cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm\" (contextmenu)=\"handleContextMenu($event, item)\">\n            <span class=\"w-3 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Collapse / expand when this node has children ----- -->\n              @if (item.children?.length) {\n                <i class=\"fa-solid fa-xs opacity-60\" [class.fa-chevron-right]=\"isCollapsed(item)\" (click)=\"handleToggleClick($event, item)\" [class.fa-chevron-down]=\"!isCollapsed(item)\"></i>\n              }\n            </span>\n            @let config = getConfig(item);\n            <span class=\"w-4 shrink-0 flex items-center justify-center\">\n              <!--->\n              <!-- ----- Widget icon from config, colored by widget type ----- -->\n              @if (config?.icon) {\n                <i [ngClass]=\"getOutlineIconClass(config)\"></i>\n              }\n            </span>\n            @let title = getOutlineTitle(item);\n            @let suffix = getOutlineNameSuffix(item);\n            <!--------------------------------------------------------------->\n            <!-- ----- Translate type titles; plain captions and text-block content stay as stored ----- -->\n            @if (usesOutlineTranslation(title)) {\n              @let translated = (title | translate | async) ?? '';\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, translated, suffix)\">{{ translated }}{{ suffix }}</span>\n            }\n            <!-- ----- Plain caption or stripped text-block content ----- -->\n            @else {\n              <span class=\"truncate flex-1 pe-2\" [attr.title]=\"outlineTooltip(item, outlinePlainTitle(title), suffix)\">{{ outlinePlainTitle(title) }}{{ suffix }}</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Nested outline children ----- -->\n          @if (item.children?.length && !isCollapsed(item)) {\n            <ul class=\"space-y-1 ps-3 text-sm\">\n              @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"sideMenu\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n              }\n            </ul>\n          }\n        </li>\n      </ng-template>\n    }\n    <!-- ----- Empty outline when the page has no widgets ----- -->\n    @else {\n      <axp-state-message icon=\"fa-light fa-shapes\" [title]=\"'@layout-designer:components.outline.empty-states.no-widgets.title'\" [description]=\"'@layout-designer:components.outline.empty-states.no-widgets.description'\"></axp-state-message>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n\n<!-- Opened from each outline row; same commands as the canvas widget menu. -->\n<ax-context-menu class=\"ax-dark\" #outlineContextMenu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\" (onItemClick)=\"handleContextMenuItemClick($event)\"></ax-context-menu>\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextMenu: [{ type: i0.ViewChild, args: ['outlineContextMenu', { isSignal: true }] }] } });
 
 class AXPDesignerPagesComponent {
     constructor() {
         this.service = inject(AXPDesignerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content class=\"text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:bg-dark py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex justify-center items-center text-gray-300 p-4\">No pages found in the document</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerPagesComponent, isStandalone: true, selector: "axp-designer-pages", ngImport: i0, template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.pages.title' | translate | async }}</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" [title]=\"'@layout-designer:components.pages.add' | translate | async\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.darker-surface]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          {{ '@layout-designer:components.pages.page-n' | translate: { params: { n: $index + 1 } } | async }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-trash hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"axp-designer-drawer-empty\">{{ '@layout-designer:components.pages.empty' | translate | async }}</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutDesignerDrawerContentComponent, selector: "axp-designer-drawer-content" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerPagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-designer-pages', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
                         AXPWidgetCoreModule,
                         AXDecoratorModule,
                         AXButtonModule,
+                        AXTranslationModule,
                         AXPLayoutDesignerDrawerContentComponent
-                    ], template: "<axp-designer-drawer-content class=\"text-on-lightest\">\n  <ax-title>Pages</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" title=\"Add New Page\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:bg-dark py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.bg-darkest]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          Page {{ $index + 1 }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-xmark hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex justify-center items-center text-gray-300 p-4\">No pages found in the document</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
+                    ], template: "<axp-designer-drawer-content>\n  <ax-title>{{ '@layout-designer:components.pages.title' | translate | async }}</ax-title>\n  <ax-content header>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"service.addNewPage()\" [title]=\"'@layout-designer:components.pages.add' | translate | async\">\n      <ax-icon class=\"fa-light fa-file-circle-plus\"></ax-icon>\n    </ax-button>\n  </ax-content>\n\n  <ax-content body>\n    @let count = service.document().children?.length ?? 0; @if(count) {\n    <ul class=\"text-sm p-2 rounded ax-md space-y-1\">\n      @for( page of service.document().children;track $index) {\n      <li (click)=\"service.goToPage($index)\"\n        class=\"cursor-pointer transition duration-150 ease-in-out hover:dark-surface py-1 px-2 rounded-sm group flex justify-between items-center\"\n        [class.darker-surface]=\"$index == service.currentPageIndex()\">\n        <div>\n          <i class=\"fa-light fa-file me-1\"></i>\n          {{ '@layout-designer:components.pages.page-n' | translate: { params: { n: $index + 1 } } | async }}\n        </div>\n        <div class=\"invisible group-hover:visible flex gap-2\">\n          @if(count>1) {\n          <i class=\"fa-light fa-trash hover:text-danger-500\" (click)=\"service.removePage($index)\"></i>\n          }\n          <i class=\"fa-light fa-clone hover:text-primary-500\" (click)=\"service.clonePage($index)\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"axp-designer-drawer-empty\">{{ '@layout-designer:components.pages.empty' | translate | async }}</div>\n    }\n  </ax-content>\n</axp-designer-drawer-content>\n" }]
         }] });
 
+//#region ---- Imports ----
+//#endregion
 //#region ---- Hook keys ----
 /**
  * Distributed hooks for extending the layout designer header menu without coupling the designer library to feature modules.
  *
  * - {@link AXPLayoutDesignerHeaderMenuHookKeys.root}: top-level bar items (siblings of File, Edit, …).
- * - {@link AXPLayoutDesignerHeaderMenuHookKeys.submenu}: extra items inside a top-level menu (`file`, `edit`, `run`, `help`).
+ * - {@link AXPLayoutDesignerHeaderMenuHookKeys.submenu}: extra items inside a menu (`file`, `import`, `edit`, `run`, `help`).
  */
 const AXPLayoutDesignerHeaderMenuHookKeys = {
     root: 'layout-designer.header-menu.root',
@@ -2365,13 +3105,13 @@ class AXPDesignerHeaderMenuComponent {
         this.registerDesignerKeyboardShortcuts();
     }
     async ngOnInit() {
-        const rootPayload = await this.hooks.runAsync(AXPLayoutDesignerHeaderMenuHookKeys.root, { designer: this.service, items: [] });
+        const rootPayload = await this.hooks.runAsync(AXPLayoutDesignerHeaderMenuHookKeys.root, { designer: this.service, owner: this.destroyRef, items: [] });
         rootPayload.items.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
         this.rootMenuContributions.set(await this.resolveMenuLabels(rootPayload.items));
-        const parents = ['file', 'edit', 'run', 'help'];
+        const parents = ['file', 'import', 'edit', 'run', 'help'];
         const map = {};
         for (const parentMenuId of parents) {
-            const subPayload = await this.hooks.runAsync(AXPLayoutDesignerHeaderMenuHookKeys.submenu, { designer: this.service, parentMenuId, items: [] });
+            const subPayload = await this.hooks.runAsync(AXPLayoutDesignerHeaderMenuHookKeys.submenu, { designer: this.service, owner: this.destroyRef, parentMenuId, items: [] });
             subPayload.items.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
             map[parentMenuId] = await this.resolveMenuLabels(subPayload.items);
         }
@@ -2515,7 +3255,7 @@ class AXPDesignerHeaderMenuComponent {
             when: () => this.service.canRedo(),
             shortcuts: [
                 {
-                    keys: ['ctrl+y'],
+                    keys: ['ctrl+y', 'ctrl+shift+z'],
                     title: '@layout-designer:keyboard-shortcuts.redo',
                     group: '@layout-designer:keyboard-shortcuts.groups.edit',
                     handler: (event) => {
@@ -2585,11 +3325,11 @@ class AXPDesignerHeaderMenuComponent {
         return event.target === document.body;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item (onClick)=\"service.saveAs()\">\n          <ax-text>Save As...</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n      </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDesignerHeaderMenuComponent, isStandalone: true, selector: "axp-designer-header-menu", ngImport: i0, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item (onClick)=\"service.saveAs()\">\n          <ax-text>Save As...</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n      </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); track item.id) {\n        <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n          @if (item.iconClass) {\n            <ax-prefix>\n              <ax-icon>\n                <i [class]=\"item.iconClass\"></i>\n              </ax-icon>\n            </ax-prefix>\n          }\n          @if (item.resolvedLabel) {\n            <ax-text>{{ item.resolvedLabel }}</ax-text>\n          }\n        </ax-menu-item>\n      }\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-undo\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n    <ax-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2$2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2$2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDesignerHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ imports: [AXDecoratorModule, AXKBDComponent, AXKBDItemComponent, AXMenuModule], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item (onClick)=\"service.saveAs()\">\n          <ax-text>Save As...</ax-text>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n      </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n      </ax-menu-item>\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix> </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n    </ax-menu-item>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n" }]
+            args: [{ imports: [AXDecoratorModule, AXKBDComponent, AXKBDItemComponent, AXMenuModule], selector: 'axp-designer-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-menu [openOn]=\"'hover'\" [hasArrow]=\"false\">\n  <ax-menu-item>\n    <ax-text>File</ax-text>\n    <ax-menu-item (onClick)=\"service.new()\">\n      <ax-text>New</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('shift+n')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    @if (service.canSave()) {\n      <ng-container>\n        <ax-menu-item (onClick)=\"service.save()\">\n          <ax-text>Save</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-floppy-disk\"></i>\n            </ax-icon>\n          </ax-prefix>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-menu-item (onClick)=\"service.saveAs()\">\n          <ax-text>Save As...</ax-text>\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-file-pen\"></i>\n            </ax-icon>\n          </ax-prefix>\n          <ax-suffix>\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+s')\"></ax-kbd-item>\n            </ax-kbd>\n          </ax-suffix>\n        </ax-menu-item>\n        <ax-divider></ax-divider>\n      </ng-container>\n    }\n    <ax-menu-item>\n      <ax-text>Export</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-export\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.downloadJson()\">\n        <ax-text>Download JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n    </ax-menu-item>\n    <ax-menu-item>\n      <ax-text>Import</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-file-import\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-menu-item (onClick)=\"service.importJSon()\">\n        <ax-text>Import JSON</ax-text>\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-upload\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-menu-item>\n      @for (item of submenuFor('import'); track item.id) {\n        <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n          @if (item.iconClass) {\n            <ax-prefix>\n              <ax-icon>\n                <i [class]=\"item.iconClass\"></i>\n              </ax-icon>\n            </ax-prefix>\n          }\n          @if (item.resolvedLabel) {\n            <ax-text>{{ item.resolvedLabel }}</ax-text>\n          }\n        </ax-menu-item>\n      }\n    </ax-menu-item>\n    @for (item of submenuFor('file'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Edit</ax-text>\n    <ax-menu-item [disabled]=\"!service.canUndo()\" (onClick)=\"service.undo()\">\n      <ax-text>Undo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-undo\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+z')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canRedo()\" (onClick)=\"service.redo()\">\n      <ax-text>Redo</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+y')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canCutCopy()\"\n      (onClick)=\"service.clone()\"\n    >\n      <ax-text>Clone</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-clone\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+d')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.cut()\">\n      <ax-text>Cut</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-cut\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+x')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canCutCopy()\" (onClick)=\"service.copy()\">\n      <ax-text>Copy</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-copy\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+c')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item [disabled]=\"!service.canPaste()\" (onClick)=\"service.paste()\">\n      <ax-text>Paste</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-paste\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+v')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-divider></ax-divider>\n    <ax-menu-item\n      [disabled]=\"!service.canDelete()\"\n      (onClick)=\"service.removeWidget()\"\n    >\n      <ax-text>Delete</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-trash\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('delete')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('edit'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Run</ax-text>\n    <ax-menu-item (onClick)=\"service.openPreviewDialog()\">\n      <ax-text>Preview</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-eye\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    <ax-menu-item (onClick)=\"service.openPreviewWindow()\">\n      <ax-text>Preview in seperate window</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-window-restore\"></i>\n        </ax-icon>\n      </ax-prefix>\n      <ax-suffix>\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"shortcutKeys('ctrl+shift+r')\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-menu-item>\n    @for (item of submenuFor('run'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n  </ax-menu-item>\n  <ax-menu-item>\n    <ax-text>Help</ax-text>\n    @for (item of submenuFor('help'); track item.id) {\n      <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n        @if (item.iconClass) {\n          <ax-prefix>\n            <ax-icon>\n              <i [class]=\"item.iconClass\"></i>\n            </ax-icon>\n          </ax-prefix>\n        }\n        @if (item.resolvedLabel) {\n          <ax-text>{{ item.resolvedLabel }}</ax-text>\n        }\n      </ax-menu-item>\n    }\n    <ax-divider></ax-divider>\n    <ax-menu-item>\n      <ax-text>About</ax-text>\n      <ax-prefix>\n        <ax-icon>\n          <i class=\"fa-solid fa-circle-info\"></i>\n        </ax-icon>\n      </ax-prefix>\n    </ax-menu-item>\n  </ax-menu-item>\n  @for (item of rootMenuContributions(); track item.id) {\n    <ax-menu-item (onClick)=\"runMenuEntry(item)\">\n      @if (item.iconClass) {\n        <ax-prefix>\n          <ax-icon>\n            <i [class]=\"item.iconClass\"></i>\n          </ax-icon>\n        </ax-prefix>\n      }\n      @if (item.resolvedLabel) {\n        <ax-text>{{ item.resolvedLabel }}</ax-text>\n      }\n    </ax-menu-item>\n  }\n</ax-menu>\n" }]
         }], ctorParameters: () => [] });
 
 class AXPDesignerViewSizeToolbarComponent {
@@ -2634,31 +3374,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }] } });
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Hook keys -----
+/**
+ * Distributed hooks for extending the layout designer footer without coupling the designer library to feature modules.
+ *
+ * - {@link AXPLayoutDesignerFooterHookKeys.end}: icon actions at the trailing end of the footer (after breadcrumbs).
+ */
+const AXPLayoutDesignerFooterHookKeys = {
+    end: 'layout-designer.footer.end',
+};
+//#endregion
+
+//#region ----- Imports -----
+//#endregion
 class AXPLayoutDesignerComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
     constructor() {
+        //#region ----- Services & Dependencies -----
         this.service = inject(AXPDesignerService);
+        this.hooks = inject(AXPHookService);
+        this.translationService = inject(AXTranslationService);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ----- State Signals -----
+        this.footerEndActions = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerEndActions" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Inputs -----
         this.id = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.strategy = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "strategy" }] : /* istanbul ignore next */ []));
+        /** Host surface policy. Form Builder may omit this; the form profile is the default. */
+        this.profile = input(AXP_FORM_DESIGNER_SURFACE_PROFILE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "profile" }] : /* istanbul ignore next */ []));
+        //#region ----- Computed Properties -----
+        this.layoutProfileContext = computed(() => ({
+            size: designerPreviewSizeToLayoutSize(this.service.size()),
+            medium: 'screen',
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layoutProfileContext" }] : /* istanbul ignore next */ []));
         this.nodeConfig = computed(() => this.service.selectedNode() ? get(this.service.selectedNode(), '__meta__.config') : null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeConfig" }] : /* istanbul ignore next */ []));
+        this.hasPagesDrawer = computed(() => this.hasDrawer('pages'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPagesDrawer" }] : /* istanbul ignore next */ []));
+        this.hasDataSourcesDrawer = computed(() => this.hasDrawer('dataSources'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasDataSourcesDrawer" }] : /* istanbul ignore next */ []));
+        this.hasOutlineDrawer = computed(() => this.hasDrawer('outline'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasOutlineDrawer" }] : /* istanbul ignore next */ []));
+        this.hasHistoryDrawer = computed(() => this.hasDrawer('history'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasHistoryDrawer" }] : /* istanbul ignore next */ []));
+        this.hasPaletteDrawer = computed(() => this.hasDrawer('palette'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPaletteDrawer" }] : /* istanbul ignore next */ []));
+        //#endregion
+        this.designerDirection = 'ltr';
         this.service.onUpdate.subscribe((e) => {
             this.propertyViewer.update(e.values);
         });
+        effect(() => {
+            this.service.surfaceProfile.set(this.profile());
+        });
     }
     ngOnInit() {
         if (this.id()) {
             this.service.loadById(this.id(), { strategy: (this.strategy() ?? AXPTemplateLoadingStrategy.Connector) });
         }
+        void this.loadFooterEndActions();
+    }
+    //#region ----- Chrome -----
+    hasDrawer(drawer) {
+        return designerSurfaceHasDrawer(this.profile(), drawer);
     }
-    get __styles() {
-        const styles = {};
-        styles[`direction`] = 'ltr';
-        return styles;
+    runFooterEndAction(entry) {
+        void Promise.resolve(entry.run());
+    }
+    //#endregion
+    //#region ----- Footer hooks -----
+    async loadFooterEndActions() {
+        const payload = await this.hooks.runAsync(AXPLayoutDesignerFooterHookKeys.end, { designer: this.service, owner: this.destroyRef, items: [] });
+        payload.items.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+        this.footerEndActions.set(await Promise.all(payload.items.map(async (item) => ({
+            ...item,
+            resolvedLabel: item.labelKey
+                ? await this.translationService.translateAsync(item.labelKey)
+                : item.label,
+        }))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__styles" } }, providers: [AXPDesignerService], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/brand/platform/platform-icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer):hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 none))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutDesignerComponent, isStandalone: true, selector: "axp-layout-designer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.direction": "this.designerDirection" } }, providers: [
+            AXPDesignerService,
+            CommandManager,
+            {
+                provide: AXP_LOCAL_DATA_SOURCE_STORE,
+                useFactory: (svc) => svc.toLocalDataSourceStore(),
+                deps: [AXPDesignerService],
+            },
+            {
+                provide: AXP_LAYOUT_PROFILE,
+                useFactory: () => {
+                    const service = inject(AXPDesignerService);
+                    return computed(() => ({
+                        size: designerPreviewSizeToLayoutSize(service.size()),
+                        medium: 'screen',
+                    }));
+                },
+            },
+        ], viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPWidgetPropertyViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"ax-dark min-w-10 lightest-surface border-e ax-sm flex flex-col items-center\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <axp-logo logoKey=\"platform\" appearance=\"onDark\" format=\"icon\" [size]=\"24\"></axp-logo>\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- ----- Palette opens the widget picker when the surface has no dedicated drawer ----- -->\n        @if (hasPaletteDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"service.showPicker()\"\n            [title]=\"('@layout-designer:components.palette.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pages drawer toggle ----- -->\n        @if (hasPagesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"pages.toggle()\"\n            [title]=\"('@layout-designer:components.pages.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Data sources drawer toggle ----- -->\n        @if (hasDataSourcesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"datasources.toggle()\"\n            [title]=\"('@layout-designer:components.data-sources.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Outline drawer toggle ----- -->\n        @if (hasOutlineDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"outline.toggle()\"\n            [title]=\"('@layout-designer:components.outline.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- History drawer toggle ----- -->\n        @if (hasHistoryDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"history.toggle()\"\n            [title]=\"('@layout-designer:components.history.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-dark h-10 lightest-surface border-b flex justify-between px-2\">\n        <div class=\"flex flex-1 items-center justify-start text-on-lightest\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            [text]=\"('@layout-designer:keyboard-shortcuts.preview' | translate | async) ?? ''\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"('@layout-designer:keyboard-shortcuts.preview-window' | translate | async) ?? ''\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"w-full flex-1\">\n        <!-- ----- Pages drawer (rail button is profile-gated; panel stays mounted for #pages) ----- -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Data sources drawer ----- -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Outline drawer ----- -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- History drawer ----- -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light lighter-surface axp-designer-canvas flex h-full min-h-0 items-start justify-center overflow-auto p-10\">\n          <axp-designer-board class=\"rounded-lg lightest-surface shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-dark h-10 lightest-surface border-t flex items-center text-on-lightest\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal min-w-0 flex-1\">\n        </axp-designer-breadcrumbs>\n        <!-- ----- Hook-contributed actions at the footer end ----- -->\n        @if (footerEndActions().length) {\n          <div class=\"ms-auto flex items-center gap-1 pe-2\">\n            @for (item of footerEndActions(); track item.id) {\n              <ax-button\n                class=\"ax-sm\"\n                look=\"blank\"\n                [iconOnly]=\"true\"\n                [title]=\"item.resolvedLabel ?? ''\"\n                (onClick)=\"runFooterEndAction(item)\"\n              >\n                @if (item.iconClass) {\n                  <ax-icon>\n                    <i [class]=\"item.iconClass\"></i>\n                  </ax-icon>\n                }\n              </ax-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side lightest-surface\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between px-4 border-b h-10 text-on-lightest\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [bindingExpressionEditorMode]=\"'popup'\"\n        [widget]=\"service.selectedNode()!\"\n        [layoutProfile]=\"layoutProfileContext()\"\n        (onChanged)=\"service.applyPropertyPanelChange($event)\"\n        (pointerdown)=\"service.armPropertyPanelHistory()\"\n        (focusin)=\"service.armPropertyPanelHistory()\"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;axp-layout-designer .axp-designer-board{display:block;min-height:100%;width:100%;overflow:auto;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);background-image:linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,transparent 25%,transparent 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface))),linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,rgb(var(--ax-sys-color-lightest-surface)) 25% 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface)));background-size:20px 20px;background-position:0 0,10px 10px}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline,axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-border-light-surface));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-accent1-500));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 10%,transparent);background-image:linear-gradient(135deg,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in srgb,var(--color-primary-300) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 0,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 60%,transparent 0,transparent)}}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer):hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-lightest-surface))}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:70%}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPDesignerBoardComponent, selector: "axp-designer-board" }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode", "layoutProfile", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "component", type: AXPDesignerBreadcrumbsComponent, selector: "axp-designer-breadcrumbs" }, { kind: "component", type: AXPDesignerOutlineComponent, selector: "axp-designer-outline" }, { kind: "component", type: AXPDesignerHeaderMenuComponent, selector: "axp-designer-header-menu" }, { kind: "component", type: AXPDesignerHistoryComponent, selector: "axp-designer-history" }, { kind: "component", type: AXPDesignerDataSourcesComponent, selector: "axp-designer-data-sources" }, { kind: "component", type: AXPDesignerPagesComponent, selector: "axp-designer-pages" }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerComponent, decorators: [{
             type: Component,
@@ -2683,18 +3507,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXDropdownModule,
                         AXDropdownButtonModule,
                         AXTranslationModule,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, providers: [AXPDesignerService], template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"min-w-10 bg-lightest border-e ax-sm flex flex-col items-center ax-dark\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <img src=\"assets/images/brand/platform/platform-icon-light.svg\" class=\"w-6\" />\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- <ax-button  look=\"blank\">\n          <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n        </ax-button> -->\n        <ax-button look=\"blank\" (onClick)=\"pages.toggle()\" title=\"Pages\">\n          <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button\n          look=\"blank\"\n          (onClick)=\"datasources.toggle()\"\n          title=\"Data Sources\"\n        >\n          <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"outline.toggle()\" title=\"Outline\">\n          <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" (onClick)=\"history.toggle()\" title=\"History\">\n          <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n        </ax-button>\n        <!-- <ax-button  look=\"blank\" title=\"Timeline\">\n          <ax-icon class=\"fa-solid fa-diagram-sankey text-sm\"> </ax-icon>\n        </ax-button> -->\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"h-10 bg-lightest border-b flex justify-between px-2 ax-dark\">\n        <div class=\"flex flex-1 items-center text-white justify-start\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            text=\"Preview\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                text=\"Open in new window\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"w-full flex-1\">\n        <!-- Pages -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- Datasources -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- Outline Pnael -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- History Pnael -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark bg-lightest\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"light-surface bg-lighter flex justify-center p-10\">\n          <axp-designer-board class=\"rounded-lg bg-lightest shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"h-10 bg-lightest border-t flex items-center ax-dark\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal\">\n        </axp-designer-breadcrumbs>\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between text-white px-4 border-b h-10\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [widget]=\"service.selectedNode()!\"\n        (onChanged)=\"\n          service.update({ values: $event.values, mode: $event.mode })\n        \"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;axp-layout-designer .axp-designer-board{background-color:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%,#f0f0f0),linear-gradient(45deg,#f0f0f0 25%,#fff 25% 75%,#f0f0f0 75%,#f0f0f0);background-size:20px 20px;background-position:0 0,10px 10px;display:block;height:100%;width:100%;overflow:auto;background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 3)}axp-layout-designer .axp-designer-board ax-drawer{background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:var(--color-gray-300, oklch(87.2% .01 258.338));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--color-fuchsia-500, oklch(66.7% .295 322.15));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:var(--color-blue-400, oklch(70.7% .165 254.624))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer):hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-white, #fff)}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-neutral-700, oklch(37.1% 0 none))}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-300, oklch(87.2% .01 258.338))}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], propertyViewer: [{
+                        AXPLogoComponent,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
+                        AXPDesignerService,
+                        CommandManager,
+                        {
+                            provide: AXP_LOCAL_DATA_SOURCE_STORE,
+                            useFactory: (svc) => svc.toLocalDataSourceStore(),
+                            deps: [AXPDesignerService],
+                        },
+                        {
+                            provide: AXP_LAYOUT_PROFILE,
+                            useFactory: () => {
+                                const service = inject(AXPDesignerService);
+                                return computed(() => ({
+                                    size: designerPreviewSizeToLayoutSize(service.size()),
+                                    medium: 'screen',
+                                }));
+                            },
+                        },
+                    ], template: "<ax-drawer-container class=\"h-full w-full flex relative overflow-hidden\">\n  <ax-content class=\"contents\">\n    <!-- Toolbar Side -->\n    <div\n      class=\"ax-dark min-w-10 lightest-surface border-e ax-sm flex flex-col items-center\"\n    >\n      <div class=\"min-w-10 h-10 flex items-center justify-center border-b\">\n        <axp-logo logoKey=\"platform\" appearance=\"onDark\" format=\"icon\" [size]=\"24\"></axp-logo>\n      </div>\n      <div class=\"py-1\"></div>\n      <div class=\"flex flex-col gap-2\">\n        <!-- ----- Palette opens the widget picker when the surface has no dedicated drawer ----- -->\n        @if (hasPaletteDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"service.showPicker()\"\n            [title]=\"('@layout-designer:components.palette.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-puzzle text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Pages drawer toggle ----- -->\n        @if (hasPagesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"pages.toggle()\"\n            [title]=\"('@layout-designer:components.pages.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-page text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Data sources drawer toggle ----- -->\n        @if (hasDataSourcesDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"datasources.toggle()\"\n            [title]=\"('@layout-designer:components.data-sources.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-database text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- Outline drawer toggle ----- -->\n        @if (hasOutlineDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"outline.toggle()\"\n            [title]=\"('@layout-designer:components.outline.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-list-tree text-sm\"> </ax-icon>\n          </ax-button>\n        }\n        <!-- ----- History drawer toggle ----- -->\n        @if (hasHistoryDrawer()) {\n          <ax-button\n            look=\"blank\"\n            (onClick)=\"history.toggle()\"\n            [title]=\"('@layout-designer:components.history.title' | translate | async) ?? ''\"\n          >\n            <ax-icon class=\"fa-solid fa-clock-rotate-left text-sm\"> </ax-icon>\n          </ax-button>\n        }\n      </div>\n    </div>\n    <!-- Main Side -->\n    <div class=\"col-span-10 flex flex-col flex-1\">\n      <!-- Header Toolbar -->\n      <div class=\"ax-dark h-10 lightest-surface border-b flex justify-between px-2\">\n        <div class=\"flex flex-1 items-center justify-start text-on-lightest\">\n          <axp-designer-header-menu></axp-designer-header-menu>\n        </div>\n        <div\n          class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"\n        >\n          <axp-designer-view-sizes\n            [(size)]=\"service.size\"\n          ></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-end\">\n          <ax-dropdown-button\n            mode=\"split\"\n            look=\"solid\"\n            [text]=\"('@layout-designer:keyboard-shortcuts.preview' | translate | async) ?? ''\"\n            class=\"ax-sm\"\n            (onClick)=\"service.openPreviewDialog()\"\n          >\n            <ax-button-item-list>\n              <ax-button-item\n                [text]=\"('@layout-designer:keyboard-shortcuts.preview-window' | translate | async) ?? ''\"\n                (onClick)=\"service.openPreviewWindow()\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-regular fa-window-restore\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-button>\n        </div>\n      </div>\n      <!-- Board -->\n      <ax-drawer-container class=\"w-full flex-1\">\n        <!-- ----- Pages drawer (rail button is profile-gated; panel stays mounted for #pages) ----- -->\n        <ax-drawer\n          #pages\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-pages></axp-designer-pages>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Data sources drawer ----- -->\n        <ax-drawer\n          #datasources\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-data-sources></axp-designer-data-sources>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- Outline drawer ----- -->\n        <ax-drawer\n          #outline\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-outline></axp-designer-outline>\n          </ax-content>\n        </ax-drawer>\n        <!-- ----- History drawer ----- -->\n        <ax-drawer\n          #history\n          location=\"start\"\n          mode=\"push\"\n          class=\"ax-dark lightest-surface\"\n        >\n          <ax-content>\n            <axp-designer-history></axp-designer-history>\n          </ax-content>\n        </ax-drawer>\n        <!-- Content of board -->\n        <ax-content class=\"ax-light lighter-surface axp-designer-canvas flex h-full min-h-0 items-start justify-center overflow-auto p-10\">\n          <axp-designer-board class=\"rounded-lg lightest-surface shadow-md\">\n          </axp-designer-board>\n        </ax-content>\n      </ax-drawer-container>\n      <!-- Footer -->\n      <div class=\"ax-dark h-10 lightest-surface border-t flex items-center text-on-lightest\">\n        <axp-designer-breadcrumbs class=\"border-default p-2 font-normal min-w-0 flex-1\">\n        </axp-designer-breadcrumbs>\n        <!-- ----- Hook-contributed actions at the footer end ----- -->\n        @if (footerEndActions().length) {\n          <div class=\"ms-auto flex items-center gap-1 pe-2\">\n            @for (item of footerEndActions(); track item.id) {\n              <ax-button\n                class=\"ax-sm\"\n                look=\"blank\"\n                [iconOnly]=\"true\"\n                [title]=\"item.resolvedLabel ?? ''\"\n                (onClick)=\"runFooterEndAction(item)\"\n              >\n                @if (item.iconClass) {\n                  <ax-icon>\n                    <i [class]=\"item.iconClass\"></i>\n                  </ax-icon>\n                }\n              </ax-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ax-content>\n  <!-- Property Side -->\n  <ax-drawer\n    class=\"ax-dark axp-designer-prop-side lightest-surface\"\n    location=\"end\"\n    mode=\"push\"\n    [collapsed]=\"false\"\n    #pd\n  >\n    <ax-content class=\"flex flex-col h-full overflow-hidden\">\n      <div\n        class=\"flex flex-row w-full justify-between px-4 border-b h-10 text-on-lightest\"\n      >\n        <div class=\"flex flex-row gap-2 items-center\">\n          <i [ngClass]=\"$safeNavigationMigration(nodeConfig()?.icon)\"></i>\n          <span class=\"font-semibold\">{{\n            $safeNavigationMigration(nodeConfig()?.title) | translate | async\n          }}</span>\n        </div>\n      </div>\n      <axp-widget-property-viewer\n        [mode]=\"'advanced'\"\n        [bindingExpressionEditorMode]=\"'popup'\"\n        [widget]=\"service.selectedNode()!\"\n        [layoutProfile]=\"layoutProfileContext()\"\n        (onChanged)=\"service.applyPropertyPanelChange($event)\"\n        (pointerdown)=\"service.armPropertyPanelHistory()\"\n        (focusin)=\"service.armPropertyPanelHistory()\"\n        class=\"flex-1 overflow-auto\"\n      >\n      </axp-widget-property-viewer>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["@layer properties;axp-layout-designer .axp-designer-board{display:block;min-height:100%;width:100%;overflow:auto;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);background-image:linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,transparent 25%,transparent 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface))),linear-gradient(45deg,rgb(var(--ax-sys-color-light-surface)) 25%,rgb(var(--ax-sys-color-lightest-surface)) 25% 75%,rgb(var(--ax-sys-color-light-surface)) 75%,rgb(var(--ax-sys-color-light-surface)));background-size:20px 20px;background-position:0 0,10px 10px}axp-layout-designer .axp-designer-board.axp-state-design .widget-outline,axp-layout-designer .axp-designer-board.axp-state-design .ax-widget-outline{outline-style:var(--tw-outline-style);outline-width:1px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-border-light-surface));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host{position:relative;cursor:pointer}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-selected.ax-widget-container{outline-offset:2px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-accent1-500));--tw-outline-style: dashed;outline-style:dashed}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.axp-state-selected{outline-color:rgba(var(--ax-sys-color-primary-400))}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.widget-container,axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host.axp-state-hover.ax-widget-container{outline-offset:4px}axp-layout-designer .axp-designer-board.axp-state-design .axp-widget-host .axp-widget-overlay{position:absolute;inset:0;z-index:2000;height:100%;width:100%}axp-layout-designer .axp-designer-board .axp-empty-space{display:flex;flex:1;cursor:default;align-items:center;justify-content:center;background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 10%,transparent);background-image:linear-gradient(135deg,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in srgb,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent);background-size:7.5px 7.5px;height:100%}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-color:color-mix(in srgb,var(--color-primary-300) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){axp-layout-designer .axp-designer-board .axp-empty-space{background-image:linear-gradient(135deg,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 0,color-mix(in srgb,var(--color-primary-300) 50%,transparent) 60%,transparent 0,transparent)}}axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer{filter:grayscale(100%);opacity:.5}:is(axp-layout-designer .axp-designer-board .axp-page-widget-header,axp-layout-designer .axp-designer-board .axp-page-widget-footer):hover{filter:grayscale(0);opacity:1}axp-layout-designer .axp-designer-board .axp-page-widget-header{margin-bottom:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-board .axp-page-widget-footer{margin-top:calc(var(--spacing, .25rem) * 2)}axp-layout-designer .axp-designer-prop-side{width:calc(var(--spacing, .25rem) * 80);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}axp-designer-drawer-content ul.axp-designer-drawer-list{padding:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-lightest-surface))}:where(axp-designer-drawer-content ul.axp-designer-drawer-list>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(var(--spacing, .25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing, .25rem) * calc(1 - var(--tw-space-y-reverse)))}axp-designer-drawer-content ul.axp-designer-drawer-list li{cursor:pointer;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}axp-designer-drawer-content ul.axp-designer-drawer-list li:hover:not(.axp-designer-drawer-list){background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}axp-designer-drawer-content ul.axp-designer-drawer-list li.state-selected{background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}axp-designer-drawer-content .axp-designer-drawer-empty{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:70%}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], propertyViewer: [{
                 type: ViewChild,
                 args: [AXPWidgetPropertyViewerComponent, { static: true }]
-            }], __styles: [{
+            }], designerDirection: [{
                 type: HostBinding,
-                args: ['style']
+                args: ['style.direction']
             }] } });
 
+//#endregion
+
 class AXPLayoutDesignerPreviewViewerComponent {
+    get(id) {
+        return this.sources().find((row) => row.id === id);
+    }
+    create(name) {
+        return { id: '', name, items: [] };
+    }
+    update() {
+        return;
+    }
+    remove() {
+        return;
+    }
+    get __class() {
+        return 'block w-full min-h-full';
+    }
     constructor() {
         this.context = {};
+        this.initialDocument = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialDocument" }] : /* istanbul ignore next */ []));
         this.document = signal({ type: AXPWidgetsCatalog.document }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
         this.currentPageIndex = signal(0, /* @ts-ignore */
@@ -2702,22 +3564,24 @@ class AXPLayoutDesignerPreviewViewerComponent {
         this.connector = inject(AXPDesignerConnector);
         this.eventService = inject(AXPBroadcastEventService);
         this.unsubscriber = inject(AXUnsubscriber);
+        this.sources = computed(() => readLocalDataSourcesFromNode(this.document()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
         this.currentPage = computed(() => {
             return (this.document().children?.[this.currentPageIndex()] ?? { type: AXPWidgetsCatalog.pageLayout });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        const seeded = readDesignerPreviewDocument();
+        if (seeded) {
+            this.document.set(seeded);
+        }
         this.eventService
             .listen(AXPDesignerMessageKeys.Preview)
             .pipe(this.unsubscriber.takeUntilDestroy)
             .subscribe((event) => {
-            this.document.set(event.data.document);
+            if (event.data?.document && !isEqual(this.document(), event.data.document)) {
+                this.document.set(event.data.document);
+            }
         });
-        //
-        if (document.body.parentElement) {
-            document.body.parentElement.classList.remove('ax-dark');
-            document.body.parentElement.style.backgroundColor = 'unset';
-            document.body.style.backgroundColor = 'unset';
-        }
     }
     ngAfterViewInit() {
         this.eventService.publish(AXPDesignerMessageKeys.Loaded);
@@ -2730,7 +3594,10 @@ class AXPLayoutDesignerPreviewViewerComponent {
         this.eventService.unsubscribe(AXPDesignerMessageKeys.Preview);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", providers: [AXUnsubscriber], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutDesignerPreviewViewerComponent, isStandalone: true, selector: "axp-layout-builder-viewer", inputs: { initialDocument: { classPropertyName: "initialDocument", publicName: "initialDocument", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, providers: [
+            AXUnsubscriber,
+            { provide: AXP_LOCAL_DATA_SOURCE_STORE, useExisting: AXPLayoutDesignerPreviewViewerComponent },
+        ], ngImport: i0, template: `
     <axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)">
       <ng-container axp-widget-renderer [node]="currentPage()" [mode]="'edit'"></ng-container>
     </axp-widgets-container>
@@ -2748,16 +3615,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [AXPWidgetCoreModule],
                     changeDetection: ChangeDetectionStrategy.Eager,
-                    providers: [AXUnsubscriber],
+                    providers: [
+                        AXUnsubscriber,
+                        { provide: AXP_LOCAL_DATA_SOURCE_STORE, useExisting: AXPLayoutDesignerPreviewViewerComponent },
+                    ],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { initialDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialDocument", required: false }] }], __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXPLayoutDesignerPreviewFrameComponent {
     constructor() {
         this.size = input('xl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.width = computed(() => {
-            ;
             switch (this.size()) {
                 case 'sm':
                     return '340px';
@@ -2765,39 +3637,34 @@ class AXPLayoutDesignerPreviewFrameComponent {
                 case 'lg':
                     return '768px';
                 default:
-                    return '100%';
+                    return '1280px';
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     }
     get __class() {
-        const cls = {};
-        cls['flex'] = true;
-        cls['flex-col'] = true;
-        cls['h-full'] = true;
-        cls['W-full'] = true;
-        cls['lg:p-20'] = true;
-        cls['bg-[#f3f3fe]'] = true;
-        cls['w-full'] = true;
-        cls['items-center'] = true;
-        cls['overflow-auto'] = true;
-        return cls;
+        return 'lighter-surface flex flex-col h-full w-full items-center overflow-auto p-6';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutDesignerPreviewFrameComponent, isStandalone: true, selector: "axp-layout-preview-frame", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutDesignerPreviewFrameComponent, isStandalone: true, selector: "axp-layout-preview-frame", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXP_LAYOUT_PROFILE,
+                useFactory: () => {
+                    const frame = inject(AXPLayoutDesignerPreviewFrameComponent);
+                    return computed(() => ({
+                        size: designerPreviewSizeToLayoutSize(frame.size()),
+                        medium: 'screen',
+                    }));
+                },
+            },
+        ], ngImport: i0, template: `
     <div
-      class="flex-1 lg:rounded-lg bg-white lg:shadow-md p-2"
-      [style.width]="width()"
-      style="max-width: 1280px;"
+      class="lightest-surface min-h-full w-full shrink-0 rounded-lg shadow-md p-4"
+      [style.max-width]="width()"
     >
-      <iframe
-        class="w-full h-full bg-transparent"
-        [frameBorder]="0"
-        [src]="'/forms/viewer' | safe : 'resourceUrl'"
-      >
-      </iframe>
+      <axp-layout-builder-viewer></axp-layout-builder-viewer>
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPLayoutDesignerPreviewViewerComponent, selector: "axp-layout-builder-viewer", inputs: ["initialDocument"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewFrameComponent, decorators: [{
             type: Component,
@@ -2805,21 +3672,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'axp-layout-preview-frame',
                     template: `
     <div
-      class="flex-1 lg:rounded-lg bg-white lg:shadow-md p-2"
-      [style.width]="width()"
-      style="max-width: 1280px;"
+      class="lightest-surface min-h-full w-full shrink-0 rounded-lg shadow-md p-4"
+      [style.max-width]="width()"
     >
-      <iframe
-        class="w-full h-full bg-transparent"
-        [frameBorder]="0"
-        [src]="'/forms/viewer' | safe : 'resourceUrl'"
-      >
-      </iframe>
+      <axp-layout-builder-viewer></axp-layout-builder-viewer>
     </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.Eager,
-                    imports: [AXSafePipe]
+                    imports: [AXPLayoutDesignerPreviewViewerComponent],
+                    providers: [
+                        {
+                            provide: AXP_LAYOUT_PROFILE,
+                            useFactory: () => {
+                                const frame = inject(AXPLayoutDesignerPreviewFrameComponent);
+                                return computed(() => ({
+                                    size: designerPreviewSizeToLayoutSize(frame.size()),
+                                    medium: 'screen',
+                                }));
+                            },
+                        },
+                    ],
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], __class: [{
                 type: HostBinding,
@@ -2871,7 +3744,7 @@ class AXPLayoutDesignerPreviewComponent extends AXBasePageComponent {
         await this.settings.scope(AXPPlatformScope.User).set(this.jsonSettingsKey, !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"bg-[#f3f3fe] flex flex-1 justify-center overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"px-6 text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$1.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutDesignerPreviewComponent, isStandalone: true, selector: "axp-layout-preview", usesInheritance: true, ngImport: i0, template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative\">\n      <div class=\"flex items-center justify-between h-12 lightest-surface shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" [text]=\"'@layout-designer:preview.back' | translate | async\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 justify-end\">\n          @if (isDialogWindow) {\n            <ax-button look=\"blank\" [title]=\"'@layout-designer:keyboard-shortcuts.preview-window' | translate | async\" (onClick)=\"handlePreviewWindow()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-light lighter-surface flex flex-1 justify-center overflow-auto min-h-0\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer class=\"ax-dark w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative\">\n        <div class=\"flex items-center justify-between h-12 lightest-surface border-b shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"font-semibold text-on-lightest\">{{ '@layout-designer:preview.form-data' | translate | async }}</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"px-6\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i4$2.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPLayoutDesignerPreviewFrameComponent, selector: "axp-layout-preview-frame", inputs: ["size"] }, { kind: "component", type: AXPDesignerViewSizeToolbarComponent, selector: "axp-designer-view-sizes", inputs: ["size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutDesignerPreviewComponent, decorators: [{
             type: Component,
@@ -2881,9 +3754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXDrawerModule,
                         AXDecoratorModule,
                         AXJsonViewerModule,
+                        CommonModule,
                         AXPLayoutDesignerPreviewFrameComponent,
-                        AXPDesignerViewSizeToolbarComponent
-                    ], template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n      <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" text=\"Back to Designer\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 justify-end\">\n          @if(isDialogWindow) {\n          <ax-button look=\"blank\" [title]=\"'Preview in to seperate window'\" (onClick)=\"handlePreviewWindow()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n          }@else { }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"bg-[#f3f3fe] flex flex-1 justify-center overflow-auto\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <!-- [collapsed]=\"jsonViewCollapsed()\"\n  (collapsedChange)=\"handleCollapsedChange($event)\" -->\n  <ax-drawer class=\"w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative bg-default\">\n        <div class=\"flex items-center justify-between h-12 bg-lightest shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"text-surface-fore font-semibold\">Form Data</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"px-6 text-white\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                        AXPDesignerViewSizeToolbarComponent,
+                        AXTranslationModule,
+                    ], template: "<ax-drawer-container class=\"ax-dark h-full w-full flex relative overflow-hidden\">\n  <ax-content>\n    <div class=\"ax-dark flex flex-col h-full relative\">\n      <div class=\"flex items-center justify-between h-12 lightest-surface shadow ax-sm px-2\">\n        <div class=\"flex flex-1 w-16 justify-start\">\n          <ax-button look=\"blank\" [text]=\"'@layout-designer:preview.back' | translate | async\" (onClick)=\"handleCloseButton()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-chevron-left\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\">\n          <axp-designer-view-sizes [(size)]=\"size\"></axp-designer-view-sizes>\n        </div>\n        <div class=\"flex flex-1 w-16 justify-end\">\n          @if (isDialogWindow) {\n            <ax-button look=\"blank\" [title]=\"'@layout-designer:keyboard-shortcuts.preview-window' | translate | async\" (onClick)=\"handlePreviewWindow()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-window-restore\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n          <ax-button look=\"blank\" (onClick)=\"jsonView.toggle()\">\n            <ax-prefix>\n              <ax-icon class=\"fa-regular fa-list-tree\"></ax-icon>\n            </ax-prefix>\n          </ax-button>\n        </div>\n      </div>\n\n      <div class=\"ax-light lighter-surface flex flex-1 justify-center overflow-auto min-h-0\">\n        <axp-layout-preview-frame [size]=\"size()\"></axp-layout-preview-frame>\n      </div>\n    </div>\n  </ax-content>\n  <ax-drawer class=\"ax-dark w-1/3 border-s\" location=\"end\" mode=\"push\" #jsonView>\n    <ax-content>\n      <div class=\"ax-dark flex flex-col h-full relative\">\n        <div class=\"flex items-center justify-between h-12 lightest-surface border-b shadow ax-sm px-2\">\n          <div class=\"flex flex-1 w-16 justify-start\">\n            <span class=\"font-semibold text-on-lightest\">{{ '@layout-designer:preview.form-data' | translate | async }}</span>\n          </div>\n          <div class=\"flex flex-1 flex-row gap-2 ax-sm items-center justify-center\"></div>\n          <div class=\"flex flex-1 w-16 justify-end\">\n            <ax-button look=\"blank\" (onClick)=\"handleCopyJson()\">\n              <ax-prefix>\n                <ax-icon class=\"fa-regular fa-copy\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        </div>\n        <div class=\"px-6\">\n          <ax-json-viewer [json]=\"context()\"></ax-json-viewer>\n        </div>\n      </div>\n    </ax-content>\n  </ax-drawer>\n</ax-drawer-container>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [] });
 
 var preview_component = /*#__PURE__*/Object.freeze({
@@ -2895,5 +3770,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerHeaderMenuHookKeys, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, AXP_WIDGET_PICKER_TAB_CONTEXT, cloneWidgetMenu };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerFooterHookKeys, AXPLayoutDesignerHeaderMenuHookKeys, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, AXP_FORM_DESIGNER_SURFACE_PROFILE, AXP_PAGE_DESIGNER_SURFACE_PROFILE, AXP_WIDGET_DESIGNER_SURFACE_PROFILE, AXP_WIDGET_PICKER_TAB_CONTEXT, cloneWidgetMenu, designerSurfaceHasDrawer, widgetMatchesDesignerSurface };
 //# sourceMappingURL=acorex-platform-framework-client-layout-designer.mjs.map