@acorex/platform 21.0.0-next.88 → 21.0.0-next.90

package/fesm2022/acorex-platform-layout-widget-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, untracked, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { signal, computed, effect, untracked, Injectable, InjectionToken, inject, ElementRef, DestroyRef, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
 import { convertArrayToDataSource, AXDataSource, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES } from '@acorex/cdk/common';
-import { AXPContextStore, isSelectionValueEqual, isFormValueEqual, AXPDataSourceDefinitionProviderService, extractValue, AXPExpressionEvaluatorService, getSmart } from '@acorex/platform/core';
+import { AXPContextStore, isSelectionValueEqual, isFormValueEqual, AXPDebugService, FORM_DIRTY_TRACE_NS, AXPDataSourceDefinitionProviderService, extractValue, AXPExpressionEvaluatorService, getSmart, summarizeFormContextDirtyDiff, OVERLAY_WIDGET_SETTLE_TRACE_NS } from '@acorex/platform/core';
 import { set, merge, cloneDeep, isNil, get, isEqual, isUndefined, isObjectLike, sum, isEmpty, isString } from 'lodash-es';
 import { Subject, BehaviorSubject, filter } from 'rxjs';
 import { AXPWidgetsCatalog } from '@acorex/platform/contracts';
@@ -38,8 +38,6 @@ var AXPWidgetStatus;
     // Rendering statuses
     AXPWidgetStatus["Rendering"] = "rendering";
     AXPWidgetStatus["Rendered"] = "rendered";
-    // Processing statuses
-    AXPWidgetStatus["Processing"] = "processing";
     // Error handling
     AXPWidgetStatus["Error"] = "error";
 })(AXPWidgetStatus || (AXPWidgetStatus = {}));
@@ -59,14 +57,39 @@ class AXPWidgetCoreService {
         this.onRefresh = new Subject();
         this.widgets = new Map();
         this.onWidgetRegistered = new Subject();
-        this.status$ = signal(AXPPageStatus.Rendering, ...(ngDevMode ? [{ debugName: "status$" }] : /* istanbul ignore next */ []));
+        /** Fires whenever a widget registers, including re-registration after remount (same id, new instance). */
+        this.widgetRegistered$ = this.onWidgetRegistered.asObservable();
+        /** Bumps when widget render/hydration state changes so aggregate computeds re-evaluate. */
+        this.widgetsRevision = signal(0, ...(ngDevMode ? [{ debugName: "widgetsRevision" }] : /* istanbul ignore next */ []));
+        this.status$ = signal(AXPPageStatus.Rendered, ...(ngDevMode ? [{ debugName: "status$" }] : /* istanbul ignore next */ []));
         this.status = this.status$.asReadonly();
-        this.isBusy = computed(() => {
-            return [AXPPageStatus.Processing, AXPPageStatus.Submitting, AXPPageStatus.Rendering].includes(this.status());
-        }, ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
         this.registeredWidgetsCount = signal(0, ...(ngDevMode ? [{ debugName: "registeredWidgetsCount" }] : /* istanbul ignore next */ []));
+        this.isRendering = computed(() => {
+            this.widgetsRevision();
+            return Array.from(this.widgets.values()).some((widget) => widget.status() === AXPWidgetStatus.Rendering);
+        }, ...(ngDevMode ? [{ debugName: "isRendering" }] : /* istanbul ignore next */ []));
+        this.isHydrating = computed(() => {
+            this.widgetsRevision();
+            return Array.from(this.widgets.values()).some((widget) => widget.isHydrating());
+        }, ...(ngDevMode ? [{ debugName: "isHydrating" }] : /* istanbul ignore next */ []));
+        this.isBusy = computed(() => this.isRendering() || this.isHydrating(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isStructureReady = computed(() => {
+            this.widgetsRevision();
+            const widgets = Array.from(this.widgets.values());
+            if (!widgets.length) {
+                return false;
+            }
+            return widgets.every((widget) => widget.status() === AXPWidgetStatus.Rendered);
+        }, ...(ngDevMode ? [{ debugName: "isStructureReady" }] : /* istanbul ignore next */ []));
         this.dirtyWidgetsRevision = signal(0, ...(ngDevMode ? [{ debugName: "dirtyWidgetsRevision" }] : /* istanbul ignore next */ []));
         this.dirtyWidgetsRevisionSignal = this.dirtyWidgetsRevision.asReadonly();
+        effect(() => {
+            this.widgetsRevision();
+            this.registeredWidgetsCount();
+            untracked(() => {
+                this.status$.set(this.detectAggregateStatus());
+            });
+        });
     }
     get variables() {
         return this.variables$();
@@ -74,24 +97,49 @@ class AXPWidgetCoreService {
     get functions() {
         return this.functions$();
     }
-    updateStatus() {
-        this.status$.update(() => this.detectStatus());
+    /** Recomputes aggregate container state after a widget registers or changes status/hydration. */
+    notifyWidgetStateChanged() {
         this.registeredWidgetsCount.set(this.widgets.size);
+        this.widgetsRevision.update((value) => value + 1);
     }
-    detectStatus() {
-        const statuses = Array.from(this.widgets.values()).map((c) => c.status());
-        if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
-            return AXPPageStatus.Rendering;
-        }
-        if (statuses.every((status) => status === AXPWidgetStatus.Rendered)) {
+    /** @deprecated Prefer {@link notifyWidgetStateChanged}. */
+    updateStatus() {
+        this.notifyWidgetStateChanged();
+    }
+    /** Debug snapshot of registered widget render/hydration state. */
+    getWidgetStateSnapshot() {
+        const widgets = Array.from(this.widgets.entries()).map(([id, widget]) => ({
+            id,
+            status: widget.status(),
+            isHydrating: widget.isHydrating(),
+        }));
+        return {
+            count: widgets.length,
+            isRendering: this.isRendering(),
+            isHydrating: this.isHydrating(),
+            isStructureReady: this.isStructureReady(),
+            isBusy: this.isBusy(),
+            widgets,
+        };
+    }
+    detectAggregateStatus() {
+        const widgets = Array.from(this.widgets.values());
+        if (!widgets.length) {
             return AXPPageStatus.Rendered;
         }
-        if (statuses.some((status) => status === AXPWidgetStatus.Processing)) {
-            return AXPPageStatus.Processing;
+        const statuses = widgets.map((widget) => widget.status());
+        if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
+            return AXPPageStatus.Rendering;
         }
         if (statuses.some((status) => status === AXPWidgetStatus.Error)) {
             return AXPPageStatus.Error;
         }
+        if (widgets.some((widget) => widget.isHydrating())) {
+            return AXPPageStatus.Rendering;
+        }
+        if (statuses.every((status) => status === AXPWidgetStatus.Rendered)) {
+            return AXPPageStatus.Rendered;
+        }
         return AXPPageStatus.Rendered;
     }
     refresh() {
@@ -123,6 +171,19 @@ class AXPWidgetCoreService {
     registerWidget(id, widget) {
         this.widgets.set(id, widget);
         this.onWidgetRegistered.next({ id, widget });
+        this.notifyWidgetStateChanged();
+    }
+    unregisterWidget(id) {
+        if (this.widgets.delete(id)) {
+            this.notifyWidgetStateChanged();
+        }
+    }
+    clearWidgets() {
+        if (this.widgets.size === 0) {
+            return;
+        }
+        this.widgets.clear();
+        this.notifyWidgetStateChanged();
     }
     getWidget(id) {
         return this.widgets.get(id);
@@ -168,7 +229,7 @@ class AXPWidgetCoreService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 function cloneProperty(property, values) {
     return merge(cloneDeep(property), values);
@@ -262,6 +323,18 @@ class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
         this.host = inject(ElementRef).nativeElement;
         this.layoutService = inject(AXPWidgetCoreService);
         this.contextService = inject(AXPContextStore);
+        /** Unregisters this widget from the container registry when the instance is destroyed. */
+        this.#unregisterFromLayoutOnDestroy = inject(DestroyRef).onDestroy(() => {
+            const registrationId = this._id ?? this.name;
+            if (registrationId) {
+                this.layoutService.unregisterWidget(registrationId);
+            }
+            if (this.hydrationDepth > 0) {
+                this.hydrationDepth = 0;
+                this._isHydrating.set(false);
+                this.layoutService.notifyWidgetStateChanged();
+            }
+        });
         this.config = this.token.config;
         this.node = this.token.node;
         this.name = this.token.node.name;
@@ -272,13 +345,19 @@ class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
         this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
         this.status = this._status.asReadonly();
         this.onStatusChanged = new BehaviorSubject(this._status());
+        /** Depth counter so nested async hydration calls share one busy state. */
+        this.hydrationDepth = 0;
+        this._isHydrating = signal(false, ...(ngDevMode ? [{ debugName: "_isHydrating" }] : /* istanbul ignore next */ []));
+        this.isHydrating = this._isHydrating.asReadonly();
         this.#statusEffect = effect(() => {
             this.onStatusChanged.next(this.status());
         }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : /* istanbul ignore next */ []));
-        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isBusy = computed(() => this.status() === AXPWidgetStatus.Rendering || this.isHydrating(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
         this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : /* istanbul ignore next */ []));
         this.children = this._children.asReadonly();
     }
+    /** Unregisters this widget from the container registry when the instance is destroyed. */
+    #unregisterFromLayoutOnDestroy;
     get id() {
         return this._id;
     }
@@ -294,7 +373,26 @@ class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
     }
     setStatus(status) {
         this._status.set(status);
-        this.layoutService.updateStatus();
+        this.layoutService.notifyWidgetStateChanged();
+    }
+    /** Marks async data loading (lookup, select, file fetch, etc.). */
+    beginHydration() {
+        this.hydrationDepth += 1;
+        if (this.hydrationDepth === 1) {
+            this._isHydrating.set(true);
+            this.layoutService.notifyWidgetStateChanged();
+        }
+    }
+    /** Clears hydration started by {@link beginHydration}. */
+    endHydration() {
+        if (this.hydrationDepth <= 0) {
+            return;
+        }
+        this.hydrationDepth -= 1;
+        if (this.hydrationDepth === 0) {
+            this._isHydrating.set(false);
+            this.layoutService.notifyWidgetStateChanged();
+        }
     }
     setOptions(values) {
         const oldValue = this.options();
@@ -376,7 +474,7 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             this.detectFullPath();
             // Set defaultValue if it exists and the path doesn't exist in context
             if (!isNil(this.defaultValue) && this.fullPath() && !this.contextService.hasValue(this.fullPath())) {
-                this.setValue(this.defaultValue);
+                this.applyDefaultValue(this.defaultValue);
             }
         }
         //
@@ -389,6 +487,22 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
         }
         return rawValue;
     }
+    /** Applies schema default without marking the form as user-edited. */
+    applyDefaultValue(value) {
+        if (this.node.valueTransforms?.setter) {
+            value = this.node.valueTransforms?.setter(value);
+        }
+        const path = this.fullPath();
+        if (!path) {
+            return;
+        }
+        value = isUndefined(value) ? null : value;
+        if (isNil(value)) {
+            return;
+        }
+        this.contextService.update(path, value, { origin: 'system' });
+        this.onValueChanged.next({ sender: this });
+    }
     setValue(value) {
         if (this.node.valueTransforms?.setter) {
             value = this.node.valueTransforms?.setter(value);
@@ -403,10 +517,18 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             return;
         }
         const savedAtPath = this.contextService.getSavedValue(path);
+        const widgetName = this.name ?? this._id ?? 'value-widget';
         if (this.contextService.isSavedCommitted() &&
             isSelectionValueEqual(value, savedAtPath) &&
-            !isEqual(oldValue, savedAtPath)) {
-            this.contextService.update(path, cloneDeep(savedAtPath));
+            !isFormValueEqual(value, savedAtPath)) {
+            AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, widgetName, 'setValue restore saved shape', () => ({
+                path,
+                widget: widgetName,
+                incomingValue: value,
+                savedAtPath,
+                oldValue,
+            }));
+            this.contextService.update(path, cloneDeep(savedAtPath), { origin: 'system' });
             this.onValueChanged.next({ sender: this });
             return;
         }
@@ -417,9 +539,32 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             oldValue.some((v, i) => v !== value[i]);
         const isArrayLengthChange = Array.isArray(value) && (!Array.isArray(oldValue) || value.length !== oldValue.length);
         if (!isArrayReorder && !isArrayLengthChange && isFormValueEqual(oldValue, value)) {
+            AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, widgetName, 'setValue skipped (isFormValueEqual)', () => ({
+                path,
+                widget: widgetName,
+                value,
+                oldValue,
+                savedAtPath,
+                selectionEqualToSaved: this.contextService.isSavedCommitted()
+                    ? isSelectionValueEqual(value, savedAtPath)
+                    : null,
+            }));
             return;
         }
-        this.contextService.update(path, value);
+        AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, widgetName, 'setValue user update', () => ({
+            path,
+            widget: widgetName,
+            value,
+            oldValue,
+            savedAtPath,
+            selectionEqualToSaved: this.contextService.isSavedCommitted()
+                ? isSelectionValueEqual(value, savedAtPath)
+                : null,
+            formValueEqualToSaved: this.contextService.isSavedCommitted()
+                ? isFormValueEqual(value, savedAtPath)
+                : null,
+        }));
+        this.contextService.update(path, value, { origin: 'user' });
         this.onValueChanged.next({ sender: this });
     }
     detectFullPath() {
@@ -497,77 +642,89 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                 // Reset string reference when dataSource changes to non-string
                 this.lastStringDataSourceRef = null;
             }
-            // Process dataSource creation in untracked context
-            await untracked(async () => {
-                if (rawValue instanceof AXDataSource) {
-                    // For AXDataSource instances, check if config changed
-                    if (!isEqual(rawValue.config, this.dataSource().config)) {
-                        this.dataSource.set(rawValue);
+            this.beginHydration();
+            try {
+                // Process dataSource creation in untracked context
+                await untracked(async () => {
+                    if (rawValue instanceof AXDataSource) {
+                        // For AXDataSource instances, check if config changed
+                        if (!isEqual(rawValue.config, this.dataSource().config)) {
+                            this.dataSource.set(rawValue);
+                        }
                     }
-                }
-                // static array datasource - always recreate when options change
-                else if (Array.isArray(rawValue)) {
-                    const ds = new AXDataSource({
-                        key: this.valueField(),
-                        pageSize: 10,
-                        load: async (e) => {
-                            const raw = this.options()['dataSource'];
-                            const skip = e.skip ?? 0;
-                            const take = e.take ?? raw.length;
-                            return {
-                                items: raw.slice(skip, skip + take),
-                                total: raw.length,
-                            };
-                        },
-                        byKey: (key) => {
-                            const raw = this.options()['dataSource'];
-                            const item = raw.filter((c) => c[this.valueField()] == key);
-                            return Promise.resolve(item[0]);
-                        },
-                    });
-                    this.dataSource.set(ds);
-                }
-                // resolve data source by name (string or object with id)
-                else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                    const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                    const c = await this.dataService.get(id);
-                    if (this.mode == 'designer' && c?.samples?.length) {
-                        this.dataSource.set(convertArrayToDataSource(c.samples, {
+                    // static array datasource - always recreate when options change
+                    else if (Array.isArray(rawValue)) {
+                        const ds = new AXDataSource({
                             key: this.valueField(),
-                            pageSize: 500,
-                        }));
+                            pageSize: 10,
+                            load: async (e) => {
+                                const raw = this.options()['dataSource'];
+                                const skip = e.skip ?? 0;
+                                const take = e.take ?? raw.length;
+                                return {
+                                    items: raw.slice(skip, skip + take),
+                                    total: raw.length,
+                                };
+                            },
+                            byKey: (key) => {
+                                const raw = this.options()['dataSource'];
+                                const item = raw.filter((c) => c[this.valueField()] == key);
+                                return Promise.resolve(item[0]);
+                            },
+                        });
+                        this.dataSource.set(ds);
                     }
-                    else {
-                        const ds = c?.source();
-                        if (ds && ds instanceof Promise) {
-                            const d = await ds;
-                            this.dataSource.set(d);
-                        }
-                        else if (ds) {
-                            this.dataSource.set(ds);
+                    // resolve data source by name (string or object with id)
+                    else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                        const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
+                        const c = await this.dataService.get(id);
+                        if (this.mode == 'designer' && c?.samples?.length) {
+                            this.dataSource.set(convertArrayToDataSource(c.samples, {
+                                key: this.valueField(),
+                                pageSize: 500,
+                            }));
                         }
-                        // empty datasource
                         else {
-                            this.dataSource.set(convertArrayToDataSource([]));
+                            const ds = c?.source();
+                            if (ds && ds instanceof Promise) {
+                                const d = await ds;
+                                this.dataSource.set(d);
+                            }
+                            else if (ds) {
+                                this.dataSource.set(ds);
+                            }
+                            // empty datasource
+                            else {
+                                this.dataSource.set(convertArrayToDataSource([]));
+                            }
                         }
                     }
+                    // empty datasource
+                    else {
+                        this.dataSource.set(convertArrayToDataSource([]));
+                    }
+                });
+            }
+            finally {
+                this.endHydration();
+            }
+        }, ...(ngDevMode ? [{ debugName: "rf" }] : /* istanbul ignore next */ []));
+        this.effect2 = effect(async () => {
+            this.beginHydration();
+            try {
+                const value = this.getValue();
+                const items = [];
+                if (Array.isArray(value)) {
+                    items.push(...(await Promise.all(value.map((item) => this.extractItem(item)))));
                 }
-                // empty datasource
                 else {
-                    this.dataSource.set(convertArrayToDataSource([]));
+                    items.push(await this.extractItem(value));
                 }
-            });
-        }, ...(ngDevMode ? [{ debugName: "rf" }] : /* istanbul ignore next */ []));
-        this.effect2 = effect(async () => {
-            const value = this.resolveSelectedItemsValue();
-            const items = [];
-            if (Array.isArray(value)) {
-                items.push(...(await Promise.all(value.map((item) => this.extractItem(item)))));
+                this.selectedItems.set(items.filter((c) => c != null));
             }
-            else {
-                items.push(await this.extractItem(value));
+            finally {
+                this.endHydration();
             }
-            this.selectedItems.set(items.filter((c) => c != null));
         }, ...(ngDevMode ? [{ debugName: "effect2" }] : /* istanbul ignore next */ []));
     }
     //#endregion
@@ -1402,12 +1559,18 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #header>
       <div
-        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-gap-1 ax-select-none"
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
         [class.axp-widget-column-header--sortable]="sortEnabled"
-        [style.justify-content]="getHeaderJustifyContent()"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
         (click)="onHeaderClick($event)"
       >
-        <span class="axp-widget-column-header__caption ax-truncate">{{ caption | translate | async }}</span>
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+          [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
+        >{{ caption | translate | async }}</span>
         @if (sortEnabled) {
           <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
@@ -1460,19 +1623,25 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
       </div>
     </ng-template>
     <ng-template #footer></ng-template>
-  `, isInline: true, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-widget-column-renderer', template: `
     <ng-template #header>
       <div
-        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-gap-1 ax-select-none"
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
         [class.axp-widget-column-header--sortable]="sortEnabled"
-        [style.justify-content]="getHeaderJustifyContent()"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
         (click)="onHeaderClick($event)"
       >
-        <span class="axp-widget-column-header__caption ax-truncate">{{ caption | translate | async }}</span>
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+          [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
+        >{{ caption | translate | async }}</span>
         @if (sortEnabled) {
           <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
@@ -1528,7 +1697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, providers: [
                         AXPWidgetCoreService,
                         { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort{opacity:1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"] }]
         }], propDecorators: { customExpandIcon: [{
                 type: Input
             }], customCollapseIcon: [{
@@ -1567,8 +1736,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['header']
             }] } });
 
-/** Idle period after widgets register / hydrate before committing the saved baseline. */
+/** Continuous idle period required after widgets settle before committing baseline. */
 const FORM_SAVED_BASELINE_IDLE_MS = 500;
+/** Poll interval while waiting for widgets to settle (~20s max). */
+const FORM_SAVED_BASELINE_POLL_MS = 250;
+/** Max poll attempts for settle / ready (~20s); applies even when widgets are registered. */
+const FORM_SAVED_BASELINE_MAX_SETTLE_POLLS = 80;
 class AXPWidgetContainerComponent {
     set context(value) {
         this.syncExternalContext(value);
@@ -1579,7 +1752,9 @@ class AXPWidgetContainerComponent {
     constructor() {
         this.contextService = inject(AXPContextStore);
         this.builderService = inject(AXPWidgetCoreService);
+        this.debug = inject(AXPDebugService);
         this.onContextChanged = new EventEmitter();
+        this.wasHydrating = false;
         this.isSavedCommitted = computed(() => this.contextService.isSavedCommitted(), ...(ngDevMode ? [{ debugName: "isSavedCommitted" }] : /* istanbul ignore next */ []));
         this.isFormDirty = computed(() => {
             if (!this.contextService.isSavedCommitted()) {
@@ -1590,6 +1765,15 @@ class AXPWidgetContainerComponent {
         }, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : /* istanbul ignore next */ []));
         this.status = computed(() => this.builderService.status(), ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
         this.isBusy = computed(() => this.builderService.isBusy(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isHydrating = computed(() => this.builderService.isHydrating(), ...(ngDevMode ? [{ debugName: "isHydrating" }] : /* istanbul ignore next */ []));
+        /** True when registered widgets exist and none are rendering or hydrating. */
+        this.isWidgetsReady = computed(() => {
+            const count = this.builderService.registeredWidgetsCount();
+            if (count === 0) {
+                return false;
+            }
+            return this.builderService.isStructureReady() && !this.builderService.isBusy();
+        }, ...(ngDevMode ? [{ debugName: "isWidgetsReady" }] : /* istanbul ignore next */ []));
         effect(() => {
             const isDirty = this.isFormDirty();
             const data = this.contextService.data();
@@ -1598,6 +1782,16 @@ class AXPWidgetContainerComponent {
                 return;
             }
             this.lastEmittedFormDirty = isDirty;
+            this.debug.trace(FORM_DIRTY_TRACE_NS, 'widget-container', 'isFormDirty changed', () => ({
+                isFormDirty: isDirty,
+                userEditedSinceCommit: this.contextService.hasUserEditedSinceCommit(),
+                isSavedCommitted: this.contextService.isSavedCommitted(),
+                changePath: changeEvent.path,
+                changeOrigin: changeEvent.origin,
+                dirtyPaths: this.contextService.isSavedCommitted()
+                    ? summarizeFormContextDirtyDiff(this.contextService.data(), this.contextService.saved())
+                    : [],
+            }));
             this.onContextChanged.emit({
                 ...changeEvent,
                 data: cloneDeep(data),
@@ -1608,11 +1802,26 @@ class AXPWidgetContainerComponent {
             if (this.contextService.isSavedCommitted()) {
                 return;
             }
+            this.builderService.registeredWidgetsCount();
+            this.builderService.isHydrating();
+            this.builderService.isStructureReady();
             if (this.builderService.registeredWidgetsCount() === 0) {
                 return;
             }
             untracked(() => void this.settleSavedBaseline());
         });
+        effect(() => {
+            const hydrating = this.builderService.isHydrating();
+            const savedCommitted = this.contextService.isSavedCommitted();
+            if (!savedCommitted) {
+                this.wasHydrating = hydrating;
+                return;
+            }
+            if (this.wasHydrating && !hydrating) {
+                untracked(() => this.scheduleRebaselineAfterHydration());
+            }
+            this.wasHydrating = hydrating;
+        });
     }
     refresh() {
         this.builderService.refresh();
@@ -1630,6 +1839,7 @@ class AXPWidgetContainerComponent {
             return;
         }
         if (this.contextService.isSavedCommitted()) {
+            this.builderService.clearWidgets();
             this.contextService.set(next);
             void this.settleSavedBaseline();
             return;
@@ -1637,28 +1847,77 @@ class AXPWidgetContainerComponent {
         if (this.contextService.isChanged()) {
             return;
         }
+        this.builderService.clearWidgets();
         this.contextService.set(next);
         void this.settleSavedBaseline();
     }
     /** Commits the current data as saved after widget hydration settles. */
     settleSavedBaseline() {
+        if (this.settlePromise) {
+            return this.settlePromise;
+        }
         this.clearSavedBaselineTimer();
+        this.settlePromise = this.waitUntilSettled()
+            .then(() => {
+            this.contextService.commitSaved();
+            this.lastEmittedFormDirty = undefined;
+        })
+            .finally(() => {
+            this.settlePromise = undefined;
+        });
+        return this.settlePromise;
+    }
+    /** Resolves when widgets stay registered, structure-ready, and idle for {@link FORM_SAVED_BASELINE_IDLE_MS}. */
+    waitUntilSettled() {
         return new Promise((resolve) => {
-            const commit = () => {
-                if (this.builderService.registeredWidgetsCount() === 0) {
-                    this.savedBaselineTimer = setTimeout(commit, FORM_SAVED_BASELINE_IDLE_MS);
-                    return;
+            let idleRetries = 0;
+            let stableTimer;
+            let pollTimer;
+            const finish = (reason) => {
+                const snapshot = this.builderService.getWidgetStateSnapshot();
+                this.debug.trace(OVERLAY_WIDGET_SETTLE_TRACE_NS, 'settle', 'Completed', () => ({
+                    reason,
+                    idleRetries,
+                    ...snapshot,
+                }));
+                if (pollTimer) {
+                    clearTimeout(pollTimer);
+                }
+                if (stableTimer) {
+                    clearTimeout(stableTimer);
                 }
-                this.contextService.commitSaved();
-                this.lastEmittedFormDirty = undefined;
-                this.savedBaselineTimer = undefined;
                 resolve();
             };
-            this.savedBaselineTimer = setTimeout(commit, FORM_SAVED_BASELINE_IDLE_MS);
+            this.debug.trace(OVERLAY_WIDGET_SETTLE_TRACE_NS, 'settle', 'Started');
+            const poll = () => {
+                const snapshot = this.builderService.getWidgetStateSnapshot();
+                const isSettled = snapshot.count > 0 &&
+                    snapshot.isStructureReady &&
+                    !snapshot.isHydrating &&
+                    !snapshot.isRendering;
+                if (isSettled) {
+                    if (!stableTimer) {
+                        stableTimer = setTimeout(() => finish('stable-idle'), FORM_SAVED_BASELINE_IDLE_MS);
+                    }
+                    return;
+                }
+                if (stableTimer) {
+                    clearTimeout(stableTimer);
+                    stableTimer = undefined;
+                }
+                idleRetries += 1;
+                if (idleRetries >= FORM_SAVED_BASELINE_MAX_SETTLE_POLLS) {
+                    finish('max-polls');
+                    return;
+                }
+                pollTimer = setTimeout(poll, FORM_SAVED_BASELINE_POLL_MS);
+            };
+            pollTimer = setTimeout(poll, FORM_SAVED_BASELINE_POLL_MS);
         });
     }
     async replaceContext(value) {
         this.clearSavedBaselineTimer();
+        this.settlePromise = undefined;
         this.contextService.set(cloneDeep(value));
         // Commit immediately so save/replace is clean even when `set()` no-ops (data already matches).
         this.contextService.commitSaved();
@@ -1667,9 +1926,28 @@ class AXPWidgetContainerComponent {
     }
     revertAndSettle() {
         this.clearSavedBaselineTimer();
+        this.settlePromise = undefined;
+        this.debug.trace(FORM_DIRTY_TRACE_NS, 'widget-container', 'revertAndSettle');
         this.contextService.revertToSaved();
         this.lastEmittedFormDirty = undefined;
     }
+    /** Re-commits baseline after post-load hydration when the user has not edited the form. */
+    scheduleRebaselineAfterHydration() {
+        this.clearSavedBaselineTimer();
+        this.savedBaselineTimer = setTimeout(() => {
+            this.savedBaselineTimer = undefined;
+            if (this.contextService.hasUserEditedSinceCommit()) {
+                return;
+            }
+            void this.waitUntilSettled().then(() => {
+                if (this.contextService.hasUserEditedSinceCommit()) {
+                    return;
+                }
+                this.contextService.commitSaved();
+                this.lastEmittedFormDirty = undefined;
+            });
+        }, FORM_SAVED_BASELINE_IDLE_MS);
+    }
     clearSavedBaselineTimer() {
         if (this.savedBaselineTimer) {
             clearTimeout(this.savedBaselineTimer);
@@ -2229,7 +2507,6 @@ class AXPWidgetRendererDirective {
             this.instance.parent = this.parentNode();
             this.instance.index = this.index();
             this.instance.mode = this.mode();
-            this.instance.setStatus(AXPWidgetStatus.Rendered);
             // Update the component ref signal for reactive access
             this._componentRefSignal.set(this.componentRef);
             this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
@@ -2504,7 +2781,7 @@ class AXPWidgetRendererDirective {
                 return value;
             },
             set: (path, value) => {
-                this.contextService.update(path, value);
+                this.contextService.update(path, value, { origin: 'user' });
             },
             data: () => {
                 return this.contextService.data();