@acorex-platform/framework-client 0.0.10 → 0.0.14

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, InjectionToken, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
-import { isSelectionValueEqual, isFormValueEqual, extractValue, getSmart, AXPWidgetsCatalog } from '@acorex-platform/framework-shared/core';
+import { isSelectionValueEqual, isFormValueEqual, extractValue, getSmart, summarizeFormContextDirtyDiff, AXPWidgetsCatalog } from '@acorex-platform/framework-shared/core';
 import { AXPPageStatus, AXPWidgetStatus, AXP_WIDGET_TOKEN, AXP_WIDGET_COLUMN_TOKEN, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty } from '@acorex-platform/framework-shared/widget-core';
 import { convertArrayToDataSource, AXDataSource, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES } from '@acorex/cdk/common';
-import { AXPContextStore, AXPDataSourceDefinitionProviderService, AXPExpressionEvaluatorService } from '@acorex-platform/framework-client/core';
+import { AXPContextStore, AXPDataSourceQueryService, AXPExpressionEvaluatorService, AXPDebugService, FORM_DIRTY_TRACE_NS, OVERLAY_WIDGET_SETTLE_TRACE_NS } from '@acorex-platform/framework-client/core';
 import { set, get, cloneDeep, isEqual, isNil, isUndefined, isObjectLike, merge, sum, isEmpty, isString } from 'lodash-es';
 import { Subject, BehaviorSubject, filter } from 'rxjs';
 import * as i1$1 from '@acorex/components/skeleton';
@@ -15,6 +15,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, NgComponentOutlet } from '@angular/common';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
 import { AXUnsubscriber } from '@acorex/core/utils';
+export { AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_LAYOUT_SUB_GRID, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGETS_LAYOUT_SUB_UTILITY, normalizeWidgetCategories } from '@acorex-platform/framework-shared/runtime';
 
 class AXPWidgetCoreElement {
     api() {
@@ -487,14 +488,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.dataService = inject(AXPDataSourceDefinitionProviderService);
+        this.registryDataSourceQuery = inject(AXPDataSourceQueryService);
         this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
         this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
         this.textTemplate = computed(() => isNil(this.options()['textTemplate'])
             ? undefined
             : this.options()['textTemplate'].replace(/{/g, '{{').replace(/}/g, '}}'), ...(ngDevMode ? [{ debugName: "textTemplate" }] : /* istanbul ignore next */ []));
         this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /** Registry datasource name from options, when options.dataSource is a string or `{ id }` object. */
+        this.registryDataSourceName = computed(() => {
+            const rawValue = this.options()['dataSource'];
+            if (typeof rawValue === 'string') {
+                return rawValue;
+            }
+            if (rawValue && typeof rawValue === 'object' && 'id' in rawValue) {
+                return String(rawValue['id']);
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "registryDataSourceName" }] : /* istanbul ignore next */ []));
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        /** Reactive flag: registry datasource finished resolving (success or failure). */
+        this.registryDataSourceReady = signal(false, ...(ngDevMode ? [{ debugName: "registryDataSourceReady" }] : /* istanbul ignore next */ []));
+        /** Reactive bump to reload registry-backed datasources (e.g. after locale change). */
+        this.registryRefreshEpoch = signal(0, ...(ngDevMode ? [{ debugName: "registryRefreshEpoch" }] : /* istanbul ignore next */ []));
         //#region ----   DataSource Loading Effect   ----
         /**
          * Track the last loaded string dataSource reference to prevent infinite loops
@@ -503,9 +519,14 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         this.lastStringDataSourceRef = null;
         this.rf = effect(async () => {
             const rawValue = this.options()['dataSource'];
+            const registryId = this.registryDataSourceName();
+            this.registryRefreshEpoch();
             // For string datasources: prevent infinite loop by checking reference
             if (typeof rawValue === 'string') {
                 if (rawValue === this.lastStringDataSourceRef) {
+                    if (registryId) {
+                        this.registryDataSourceReady.set(true);
+                    }
                     return;
                 }
                 this.lastStringDataSourceRef = rawValue;
@@ -514,6 +535,9 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                 // Reset string reference when dataSource changes to non-string
                 this.lastStringDataSourceRef = null;
             }
+            if (registryId) {
+                this.registryDataSourceReady.set(false);
+            }
             this.beginHydration();
             try {
                 // Process dataSource creation in untracked context
@@ -523,6 +547,7 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                         if (!isEqual(rawValue.config, this.dataSource().config)) {
                             this.dataSource.set(rawValue);
                         }
+                        this.registryDataSourceReady.set(true);
                     }
                     // static array datasource - always recreate when options change
                     else if (Array.isArray(rawValue)) {
@@ -545,35 +570,24 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                             },
                         });
                         this.dataSource.set(ds);
+                        this.registryDataSourceReady.set(true);
                     }
                     // 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,
-                            }));
+                    else if (registryId) {
+                        const queryOptions = this.buildRegistryQueryOptions();
+                        const result = await this.registryDataSourceQuery.resolve(registryId, queryOptions);
+                        if (result.dataSource) {
+                            this.dataSource.set(this.isolateRegistryDataSource(result.dataSource));
                         }
                         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);
-                            }
-                            // empty datasource
-                            else {
-                                this.dataSource.set(convertArrayToDataSource([]));
-                            }
+                            this.dataSource.set(convertArrayToDataSource([]));
                         }
+                        this.registryDataSourceReady.set(true);
                     }
                     // empty datasource
                     else {
                         this.dataSource.set(convertArrayToDataSource([]));
+                        this.registryDataSourceReady.set(true);
                     }
                 });
             }
@@ -581,25 +595,69 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                 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)))));
+        this.effect2 = effect(() => {
+            const registryName = this.registryDataSourceName();
+            const value = this.resolveSelectedItemsValue();
+            const registryReady = this.registryDataSourceReady();
+            this.dataSource();
+            if (registryName && !registryReady) {
+                return;
+            }
+            const resolveSelectedItems = async () => {
+                this.beginHydration();
+                try {
+                    const items = [];
+                    if (Array.isArray(value)) {
+                        items.push(...(await Promise.all(value.map((item) => this.extractItem(item)))));
+                    }
+                    else {
+                        items.push(await this.extractItem(value));
+                    }
+                    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));
-            }
-            finally {
-                this.endHydration();
-            }
+            };
+            void resolveSelectedItems();
         }, ...(ngDevMode ? [{ debugName: "effect2" }] : /* istanbul ignore next */ []));
     }
+    buildRegistryQueryOptions() {
+        return {
+            valueField: this.valueField(),
+            useSamples: this.mode === 'designer',
+        };
+    }
     //#endregion
+    /**
+     * Registry datasources are cached globally; each widget needs its own {@link AXDataSource}
+     * instance so per-widget filters (e.g. cascade parent id) do not leak across fields.
+     */
+    isolateRegistryDataSource(source) {
+        const config = source.config;
+        if (!config?.load) {
+            return source;
+        }
+        const originalLoad = config.load.bind(source);
+        const originalByKey = config.byKey?.bind(source);
+        return new AXDataSource({
+            pageSize: config.pageSize,
+            key: config.key,
+            load: (event) => originalLoad(event),
+            byKey: originalByKey ? (key) => originalByKey(key) : undefined,
+        });
+    }
+    /** Invalidates cached registry datasource and forces a reload on the next effect run. */
+    refreshRegistryDataSource() {
+        const registryId = this.registryDataSourceName();
+        if (!registryId) {
+            return;
+        }
+        this.registryDataSourceQuery.invalidate(registryId);
+        this.lastStringDataSourceRef = null;
+        this.registryDataSourceReady.set(false);
+        this.registryRefreshEpoch.update((epoch) => epoch + 1);
+    }
     async extractItem(item) {
         if (isNil(item)) {
             return null;
@@ -608,6 +666,13 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
             return item;
         }
         const key = extractValue(item, this.valueField());
+        const registryName = this.registryDataSourceName();
+        if (registryName) {
+            const found = await this.registryDataSourceQuery.queryByKey(registryName, key, this.buildRegistryQueryOptions());
+            if (found) {
+                return found;
+            }
+        }
         const ds = this.dataSource();
         if (ds.config?.byKey) {
             const found = await ds.config?.byKey(key);
@@ -630,12 +695,7 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
     resolveSelectedItemsValue() {
         return this.getValue();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
 class AXPColumnWidgetComponent {
     constructor() {
         this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
@@ -708,14 +768,14 @@ class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
         }, ...(ngDevMode ? [{ debugName: "inlineStyle" }] : /* istanbul ignore next */ []));
         this.blockClass = computed(() => {
             return {
-                'ax-block': true,
-                'ax-w-full': true,
+                block: true,
+                'w-full': true,
                 // 'ax-widget-outline': true,
             };
         }, ...(ngDevMode ? [{ debugName: "blockClass" }] : /* istanbul ignore next */ []));
         this.inlineClass = computed(() => {
             return {
-                'ax-inline-block': true,
+                'inline-block': false,
             };
         }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : /* istanbul ignore next */ []));
     }
@@ -785,8 +845,8 @@ class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
         this.hostFlexClass = computed(() => {
             return {
                 ...this.blockClass(),
-                'ax-flex': true,
-                'ax-h-full': true,
+                'flex': true,
+                'h-full': true,
             };
         }, ...(ngDevMode ? [{ debugName: "hostFlexClass" }] : /* istanbul ignore next */ []));
         this.hostClass = computed(() => {
@@ -889,18 +949,18 @@ class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
         this.hostGridClass = computed(() => {
             const cls = {
                 ...this.inlineClass(),
-                'ax-grid': true,
+                'grid': true,
             };
             const g = this.grid()?.default;
             if (g?.columns)
-                cls[`lg:ax-grid-cols-${g.columns}`] = true;
-            // if (g?.rows) cls[`lg:ax-grid-rows-${g.rows}`] = true;
+                cls[`lg:grid-cols-${g.columns}`] = true;
+            // if (g?.rows) cls[`lg:grid-rows-${g.rows}`] = true;
             if (g?.justifyItems)
-                cls[`lg:ax-justify-items-${g.justifyItems}`] = true;
+                cls[`lg:justify-items-${g.justifyItems}`] = true;
             if (g?.alignItems)
-                cls[`lg:ax-align-items-${g.alignItems}`] = true;
+                cls[`lg:align-items-${g.alignItems}`] = true;
             if (g?.autoFlow)
-                cls[`lg:ax-grid-flow-${g.autoFlow}`] = true;
+                cls[`lg:grid-flow-${g.autoFlow}`] = true;
             return cls;
         }, ...(ngDevMode ? [{ debugName: "hostGridClass" }] : /* istanbul ignore next */ []));
         this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -930,20 +990,20 @@ class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetCompon
             const cls = { ...this.hostFlexClass() };
             const g = this.gridItem();
             // Mobile-first: full width on small screens so items stack vertically and don't overflow
-            cls['ax-col-span-12'] = true;
+            cls['col-span-12'] = true;
             // Large screens: apply defined placement so multi-column layout works on desktop
             if (g?.colSpan)
-                cls[`lg:ax-col-span-${g.colSpan}`] = true;
+                cls[`lg:col-span-${g.colSpan}`] = true;
             if (g?.colStart)
-                cls[`lg:ax-col-start-${g.colStart}`] = true;
+                cls[`lg:col-start-${g.colStart}`] = true;
             if (g?.colEnd)
-                cls[`lg:ax-col-end-${g.colEnd}`] = true;
+                cls[`lg:col-end-${g.colEnd}`] = true;
             if (g?.rowSpan)
-                cls[`lg:ax-row-span-${g.rowSpan}`] = true;
+                cls[`lg:row-span-${g.rowSpan}`] = true;
             if (g?.rowStart)
-                cls[`lg:ax-row-start-${g.rowStart}`] = true;
+                cls[`lg:row-start-${g.rowStart}`] = true;
             if (g?.rowEnd)
-                cls[`lg:ax-row-end-${g.rowEnd}`] = true;
+                cls[`lg:row-end-${g.rowEnd}`] = true;
             return cls;
         }, ...(ngDevMode ? [{ debugName: "hostGridItemClass" }] : /* istanbul ignore next */ []));
         this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -1195,7 +1255,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             return this.normalizeColumnAlignment(align);
         }
         if (typeof align === 'object' && !Array.isArray(align)) {
-            const raw = side === 'header' ? align.header : align.cell;
+            const raw = side === 'header'
+                ? align.header
+                : align.cell;
             return this.normalizeColumnAlignment(raw);
         }
         return 'start';
@@ -1248,7 +1310,12 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 },
             ],
         });
-        this.width = this.mergedOptions().width === 'auto' ? 'auto' : this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
+        this.width =
+            this.mergedOptions().width === 'auto'
+                ? 'auto'
+                : this.customWidth
+                    ? this.customWidth
+                    : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing || true;
         this.allowSorting = this.sortEnabled;
         this.cdr.detectChanges();
@@ -1289,7 +1356,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         // Use a hash of key properties instead of full JSON.stringify
         // This is much faster for large objects
         const keyProps = ['id', 'code', 'name', 'title'];
-        const keyValues = keyProps.map((prop) => data?.[prop]).filter((v) => v != null);
+        const keyValues = keyProps
+            .map((prop) => data?.[prop])
+            .filter((v) => v != null);
         if (keyValues.length > 0) {
             return `row-${keyValues.join('-')}`;
         }
@@ -1375,7 +1444,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                     },
                 };
                 // Start async evaluation - will update injector when complete
-                this.expressionEvaluator.evaluate(this.mergedOptions(), scope).then((evaluatedOptions) => {
+                this.expressionEvaluator
+                    .evaluate(this.mergedOptions(), scope)
+                    .then((evaluatedOptions) => {
                     // Create injector with evaluated options
                     const tokenValue = {
                         path: this.node.path,
@@ -1398,7 +1469,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                     this.pendingEvaluations.delete(cacheKey);
                     // Schedule batched change detection (performance optimization)
                     this.scheduleChangeDetection();
-                }).catch(() => {
+                })
+                    .catch(() => {
                     // If evaluation fails, keep using the fallback injector
                     this.pendingEvaluations.delete(cacheKey);
                 });
@@ -1427,34 +1499,47 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", sortEnabled: "sortEnabled", headerSortDirection: "headerSortDirection", headerSortPriority: "headerSortPriority", columnFixed: "columnFixed", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, outputs: { sortToggle: "sortToggle" }, providers: [
             AXPWidgetCoreService,
-            { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
+            {
+                provide: AXDataTableColumnComponent,
+                useExisting: AXPWidgetColumnRendererComponent,
+            },
         ], 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-select-none"
+        class="axp-widget-column-header w-full flex items-center select-none"
         [class.axp-widget-column-header--sortable]="sortEnabled"
-        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
-        [class.ax-gap-1]="!sortEnabled"
-        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
+        [class.axp-widget-column-header--sort-active]="
+          headerSortDirection === 'asc' || headerSortDirection === 'desc'
+        "
+        [class.gap-1]="!sortEnabled"
+        [style.justify-content]="
+          sortEnabled ? 'flex-start' : getHeaderJustifyContent()
+        "
         (click)="onHeaderClick($event)"
       >
         <span
-          class="axp-widget-column-header__caption ax-truncate"
+          class="axp-widget-column-header__caption truncate"
           [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
           [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
-        >{{ caption | translate | async }}</span>
+          >{{ 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">
+          <span
+            class="axp-widget-column-header__sort flex items-center gap-0.5 shrink-0"
+          >
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
-              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+              <span
+                class="axp-widget-column-header__sort-priority text-xs opacity-70"
+                >{{ headerSortPriority }}</span
+              >
             }
             <i
-              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
-              [class.ax-text-primary]="headerSortDirection === 'asc'"
+              class="fa-solid fa-arrow-up-long text-neutral-400"
+              [class.text-primary]="headerSortDirection === 'asc'"
             ></i>
             <i
-              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
-              [class.ax-text-primary]="headerSortDirection === 'desc'"
+              class="fa-solid fa-arrow-down-long text-neutral-400"
+              [class.text-primary]="headerSortDirection === 'desc'"
             ></i>
           </span>
         }
@@ -1462,70 +1547,95 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     </ng-template>
     <ng-template #cell let-row>
       <div
-        class="ax-w-full"
-        [class.ax-flex]="getCellUseFlexLayout()"
-        [class.ax-gap-2]="expandHandler"
-        [class.ax-items-center]="getCellUseFlexLayout()"
+        class="w-full"
+        [class.flex]="getCellUseFlexLayout()"
+        [class.gap-2]="expandHandler"
+        [class.items-center]="getCellUseFlexLayout()"
         [style.justify-content]="getCellJustifyContent()"
       >
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
-            class="ax-expand-handler"
-            [class.ax-invisible]="!hasExpandableRow(row)"
+            class="expand-handler"
+            [class.invisible]="!hasExpandableRow(row)"
             id="ax-expand-handler-container"
             [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
           >
             @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+              <i
+                class="fas fa-spinner-third animate-twSpin animate-infinite"
+              ></i>
             } @else {
               @if (row.data?.__meta__?.expanded) {
-                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+                <i
+                  [class]="
+                    customCollapseIcon ||
+                    'far fa-minus-square text-md opacity-75'
+                  "
+                ></i>
               } @else {
-                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
+                <i
+                  [class]="
+                    customExpandIcon || 'far fa-plus-square text-md  opacity-75'
+                  "
+                ></i>
               }
             }
           </div>
         }
         @if (component && row?.data) {
           <ng-container
-            *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"
+            *ngComponentOutlet="
+              component;
+              injector: getRowInjector(row.data);
+              inputs: getInputs(row.data)
+            "
           ></ng-container>
         }
       </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__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 }); }
+  `, 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(.data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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-select-none"
+        class="axp-widget-column-header w-full flex items-center select-none"
         [class.axp-widget-column-header--sortable]="sortEnabled"
-        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
-        [class.ax-gap-1]="!sortEnabled"
-        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
+        [class.axp-widget-column-header--sort-active]="
+          headerSortDirection === 'asc' || headerSortDirection === 'desc'
+        "
+        [class.gap-1]="!sortEnabled"
+        [style.justify-content]="
+          sortEnabled ? 'flex-start' : getHeaderJustifyContent()
+        "
         (click)="onHeaderClick($event)"
       >
         <span
-          class="axp-widget-column-header__caption ax-truncate"
+          class="axp-widget-column-header__caption truncate"
           [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
           [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
-        >{{ caption | translate | async }}</span>
+          >{{ 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">
+          <span
+            class="axp-widget-column-header__sort flex items-center gap-0.5 shrink-0"
+          >
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
-              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+              <span
+                class="axp-widget-column-header__sort-priority text-xs opacity-70"
+                >{{ headerSortPriority }}</span
+              >
             }
             <i
-              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
-              [class.ax-text-primary]="headerSortDirection === 'asc'"
+              class="fa-solid fa-arrow-up-long text-neutral-400"
+              [class.text-primary]="headerSortDirection === 'asc'"
             ></i>
             <i
-              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
-              [class.ax-text-primary]="headerSortDirection === 'desc'"
+              class="fa-solid fa-arrow-down-long text-neutral-400"
+              [class.text-primary]="headerSortDirection === 'desc'"
             ></i>
           </span>
         }
@@ -1533,34 +1643,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </ng-template>
     <ng-template #cell let-row>
       <div
-        class="ax-w-full"
-        [class.ax-flex]="getCellUseFlexLayout()"
-        [class.ax-gap-2]="expandHandler"
-        [class.ax-items-center]="getCellUseFlexLayout()"
+        class="w-full"
+        [class.flex]="getCellUseFlexLayout()"
+        [class.gap-2]="expandHandler"
+        [class.items-center]="getCellUseFlexLayout()"
         [style.justify-content]="getCellJustifyContent()"
       >
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
-            class="ax-expand-handler"
-            [class.ax-invisible]="!hasExpandableRow(row)"
+            class="expand-handler"
+            [class.invisible]="!hasExpandableRow(row)"
             id="ax-expand-handler-container"
             [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
           >
             @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+              <i
+                class="fas fa-spinner-third animate-twSpin animate-infinite"
+              ></i>
             } @else {
               @if (row.data?.__meta__?.expanded) {
-                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+                <i
+                  [class]="
+                    customCollapseIcon ||
+                    'far fa-minus-square text-md opacity-75'
+                  "
+                ></i>
               } @else {
-                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
+                <i
+                  [class]="
+                    customExpandIcon || 'far fa-plus-square text-md  opacity-75'
+                  "
+                ></i>
               }
             }
           </div>
         }
         @if (component && row?.data) {
           <ng-container
-            *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"
+            *ngComponentOutlet="
+              component;
+              injector: getRowInjector(row.data);
+              inputs: getInputs(row.data)
+            "
           ></ng-container>
         }
       </div>
@@ -1568,8 +1693,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <ng-template #footer></ng-template>
   `, 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__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"] }]
+                        {
+                            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__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(.data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { customExpandIcon: [{
                 type: Input
             }], customCollapseIcon: [{
@@ -1624,6 +1752,7 @@ 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 */ []));
@@ -1653,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),
@@ -1697,6 +1836,10 @@ class AXPWidgetContainerComponent {
             return;
         }
         if (this.contextService.isSavedCommitted() && this.isFormDirty()) {
+            const identityPatch = extractPersistedRootIdentityPatch(current, next);
+            if (identityPatch) {
+                this.contextService.patch(identityPatch, { updateSaved: true });
+            }
             return;
         }
         if (this.contextService.isSavedCommitted()) {
@@ -1735,6 +1878,12 @@ class AXPWidgetContainerComponent {
             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);
                 }
@@ -1743,6 +1892,7 @@ class AXPWidgetContainerComponent {
                 }
                 resolve();
             };
+            this.debug.trace(OVERLAY_WIDGET_SETTLE_TRACE_NS, 'settle', 'Started');
             const poll = () => {
                 const snapshot = this.builderService.getWidgetStateSnapshot();
                 const isSettled = snapshot.count > 0 &&
@@ -1781,6 +1931,7 @@ class AXPWidgetContainerComponent {
     revertAndSettle() {
         this.clearSavedBaselineTimer();
         this.settlePromise = undefined;
+        this.debug.trace(FORM_DIRTY_TRACE_NS, 'widget-container', 'revertAndSettle');
         this.contextService.revertToSaved();
         this.lastEmittedFormDirty = undefined;
     }
@@ -1827,11 +1978,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], functions: [{
                 type: Input
             }] } });
+function hasPersistedRootIdentity(value) {
+    return ((typeof value === 'string' && value.length > 0) || (typeof value === 'number' && !Number.isNaN(value)));
+}
+/** Injects `id` / `_id` from an external context sync when the live form is dirty but lacks a persisted root id. */
+function extractPersistedRootIdentityPatch(current, next) {
+    const nextId = next['id'] ?? next['_id'];
+    const currentId = current['id'] ?? current['_id'];
+    if (!hasPersistedRootIdentity(nextId) || hasPersistedRootIdentity(currentId)) {
+        return null;
+    }
+    const patch = { id: nextId };
+    if (next['_id'] !== undefined) {
+        patch['_id'] = next['_id'];
+    }
+    return patch;
+}
 
 class AXPWidgetPlaceholderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
-    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+    <ax-skeleton class="w-full h-10 rounded-md"></ax-skeleton>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
@@ -1839,7 +2006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'axp-widget-placeholder',
                     template: `<div>
-    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+    <ax-skeleton class="w-full h-10 rounded-md"></ax-skeleton>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXSkeletonModule],
@@ -3183,149 +3350,10 @@ class AXPWidgetSerializationHelper {
 }
 //#endregion
 
-//#region ---- Editor sub-categories (widget picker) ----
-const AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS = {
-    name: 'editor-text-inputs',
-    order: 1,
-    title: '@platform-layout-widgets:subcategories.editor-text-inputs.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_NUMERIC = {
-    name: 'editor-numeric',
-    order: 2,
-    title: '@platform-layout-widgets:subcategories.editor-numeric.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_DATETIME = {
-    name: 'editor-datetime',
-    order: 3,
-    title: '@platform-layout-widgets:subcategories.editor-datetime.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_CHOICE = {
-    name: 'editor-choice',
-    order: 4,
-    title: '@platform-layout-widgets:subcategories.editor-choice.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_RICH = {
-    name: 'editor-rich',
-    order: 5,
-    title: '@platform-layout-widgets:subcategories.editor-rich.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_VISUAL = {
-    name: 'editor-visual',
-    order: 6,
-    title: '@platform-layout-widgets:subcategories.editor-visual.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_COMPOSITE = {
-    name: 'editor-composite',
-    order: 7,
-    title: '@platform-layout-widgets:subcategories.editor-composite.title',
-};
-const AXP_WIDGETS_EDITOR_SUB_CONFIG = {
-    name: 'editor-config',
-    order: 8,
-    title: '@platform-layout-widgets:subcategories.editor-config.title',
-};
-//#endregion
-//#region ---- Layout sub-categories (widget picker) ----
-const AXP_WIDGETS_LAYOUT_SUB_SHELL = {
-    name: 'layout-shell',
-    order: 1,
-    title: '@platform-layout-widgets:subcategories.layout-shell.title',
-};
-const AXP_WIDGETS_LAYOUT_SUB_GRID = {
-    name: 'layout-grid',
-    order: 2,
-    title: '@platform-layout-widgets:subcategories.layout-grid.title',
-};
-const AXP_WIDGETS_LAYOUT_SUB_SURFACES = {
-    name: 'layout-surfaces',
-    order: 3,
-    title: '@platform-layout-widgets:subcategories.layout-surfaces.title',
-};
-const AXP_WIDGETS_LAYOUT_SUB_TABS = {
-    name: 'layout-tabs',
-    order: 4,
-    title: '@platform-layout-widgets:subcategories.layout-tabs.title',
-};
-const AXP_WIDGETS_LAYOUT_SUB_LISTS = {
-    name: 'layout-lists',
-    order: 5,
-    title: '@platform-layout-widgets:subcategories.layout-lists.title',
-};
-const AXP_WIDGETS_LAYOUT_SUB_UTILITY = {
-    name: 'layout-utility',
-    order: 6,
-    title: '@platform-layout-widgets:subcategories.layout-utility.title',
-};
-//#endregion
-//#region ---- Action sub-categories (widget picker) ----
-const AXP_WIDGETS_ACTION_SUB_CONTROLS = {
-    name: 'action-controls',
-    order: 1,
-    title: '@platform-layout-widgets:subcategories.action-controls.title',
-};
-//#endregion
-//#region ---- Advance sub-categories (widget picker) ----
-const AXP_WIDGETS_ADVANCE_SUB_MEDIA = {
-    name: 'advance-media',
-    order: 1,
-    title: '@platform-layout-widgets:subcategories.advance-media.title',
-};
-const AXP_WIDGETS_ADVANCE_SUB_INPUT = {
-    name: 'advance-input',
-    order: 2,
-    title: '@platform-layout-widgets:subcategories.advance-input.title',
-};
-const AXP_WIDGETS_ADVANCE_SUB_DATA = {
-    name: 'advance-data',
-    order: 3,
-    title: '@platform-layout-widgets:subcategories.advance-data.title',
-};
-const AXP_WIDGETS_ADVANCE_SUB_TOOLS = {
-    name: 'advance-tools',
-    order: 4,
-    title: '@platform-layout-widgets:subcategories.advance-tools.title',
-};
-//#endregion
-/** Normalizes widget categories to an array for iteration and serialization. */
-function normalizeWidgetCategories(categories) {
-    if (categories == null) {
-        return [];
-    }
-    return Array.isArray(categories) ? categories : [categories];
-}
-const AXP_WIDGETS_LAYOUT_CATEGORY = {
-    name: 'layout',
-    order: 1,
-    title: '@platform-layout-widgets:categories.layout.title',
-};
-const AXP_WIDGETS_EDITOR_CATEGORY = {
-    name: 'editor',
-    order: 2,
-    title: '@platform-layout-widgets:categories.editor.title',
-};
-const AXP_WIDGETS_ACTION_CATEGORY = {
-    name: 'action',
-    order: 3,
-    title: '@platform-layout-widgets:categories.action.title',
-};
-const AXP_WIDGETS_ADVANCE_CATEGORY = {
-    name: 'advance',
-    order: 4,
-    title: '@platform-layout-widgets:categories.advance.title',
-};
-/** AI category tab in the widget picker (metadata); unrelated to Widgets:GetForAI listing scope. */
-const AXP_WIDGETS_AI_CATEGORY = {
-    name: 'ai',
-    order: 5,
-    title: '@platform-layout-widgets:categories.ai.title',
-};
-const AXP_WIDGETS_CATEGORIES = [
-    AXP_WIDGETS_LAYOUT_CATEGORY,
-    AXP_WIDGETS_EDITOR_CATEGORY,
-    AXP_WIDGETS_ACTION_CATEGORY,
-    AXP_WIDGETS_ADVANCE_CATEGORY,
-    AXP_WIDGETS_AI_CATEGORY,
-];
+/**
+ * Re-export Node-safe widget category constants from shared runtime.
+ * Sidecars and generate-runtime-catalog should import from `@acorex-platform/framework-shared/runtime`.
+ */
 
 /**
  * Standalone cell renderer using the same column-mode widget pipeline as {@link AXPWidgetColumnRendererComponent}.
@@ -3378,13 +3406,16 @@ class AXPWidgetColumnCellComponent {
                         eval: (path) => getSmart(data, path),
                     },
                 };
-                void this.expressionEvaluator.evaluate(this.mergedOptions(), scope).then((evaluatedOptions) => {
+                void this.expressionEvaluator
+                    .evaluate(this.mergedOptions(), scope)
+                    .then((evaluatedOptions) => {
                     const newInjector = this.createRowInjector(evaluatedOptions);
                     this.rowInjectorsCache.delete(cacheKey);
                     this.rowInjectorsCache.set(cacheKey, newInjector);
                     this.pendingEvaluations.delete(cacheKey);
                     this.scheduleChangeDetection();
-                }).catch(() => {
+                })
+                    .catch(() => {
                     this.pendingEvaluations.delete(cacheKey);
                 });
             }
@@ -3454,7 +3485,11 @@ class AXPWidgetColumnCellComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnCellComponent, isStandalone: true, selector: "axp-widget-column-cell", inputs: { node: "node", rowData: "rowData", caption: "caption" }, usesOnChanges: true, ngImport: i0, template: `
     @if (component && rowData) {
       <ng-container
-        *ngComponentOutlet="component; injector: getRowInjector(rowData); inputs: getInputs(rowData)"
+        *ngComponentOutlet="
+          component;
+          injector: getRowInjector(rowData);
+          inputs: getInputs(rowData)
+        "
       ></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3468,7 +3503,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (component && rowData) {
       <ng-container
-        *ngComponentOutlet="component; injector: getRowInjector(rowData); inputs: getInputs(rowData)"
+        *ngComponentOutlet="
+          component;
+          injector: getRowInjector(rowData);
+          inputs: getInputs(rowData)
+        "
       ></ng-container>
     }
   `,
@@ -4707,5 +4746,5 @@ const AXP_CALLBACK_VALIDATION_PROPERTY = {
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPPropertyEditorHelper, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, AXPTableItemOpsBaseLayoutWidgetComponent, AXPValueWidgetComponent, AXPWidgetColumnCellComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetCoreElement, AXPWidgetCoreModule, AXPWidgetCoreService, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetSerializationHelper, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES, AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRIGGERS_PROPERTY, AXP_TRIGGERS_PROPERTY_GROUP, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_LAYOUT_SUB_GRID, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXP_WIDGET_DEFINITION_PROVIDER, AXP_WIDGET_PROPERTY_GROUP, WIDGET_CASCADE_TRACE_NS, booleanDefaultProperty, buildWidgetRegistryMapFromProviders, findNonEmptyBreakpoints, largeTextDefaultProperty, mapAXPPropertyToWidgetProperty, normalizeWidgetCategories, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty, richTextDefaultProperty, selectEditorDefaultValueProperty, selectionListEditorDefaultValueProperty };
+export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPPropertyEditorHelper, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, AXPTableItemOpsBaseLayoutWidgetComponent, AXPValueWidgetComponent, AXPWidgetColumnCellComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetCoreElement, AXPWidgetCoreModule, AXPWidgetCoreService, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetSerializationHelper, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES, AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRIGGERS_PROPERTY, AXP_TRIGGERS_PROPERTY_GROUP, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGET_DEFINITION_PROVIDER, AXP_WIDGET_PROPERTY_GROUP, WIDGET_CASCADE_TRACE_NS, booleanDefaultProperty, buildWidgetRegistryMapFromProviders, findNonEmptyBreakpoints, largeTextDefaultProperty, mapAXPPropertyToWidgetProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty, richTextDefaultProperty, selectEditorDefaultValueProperty, selectionListEditorDefaultValueProperty };
 //# sourceMappingURL=acorex-platform-framework-client-layout-widget-core.mjs.map