@acorex/platform 21.0.0-next.39 → 21.0.0-next.40

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -1,5 +1,5 @@
 import * as i1$3 from '@acorex/platform/layout/widget-core';
-import { createStringProperty, AXPWidgetsCatalog, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty, AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXPBlockBaseLayoutWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, findNonEmptyBreakpoints, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXP_WIDGET_DEFINITION_PROVIDER, normalizeWidgetCategories, isWidgetAiCatalogIncluded } from '@acorex/platform/layout/widget-core';
+import { createStringProperty, AXPWidgetsCatalog, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty, AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, findNonEmptyBreakpoints, AXPGridItemBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridBaseLayoutWidgetComponent, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER, normalizeDefinitionCategories } from '@acorex/platform/layout/widget-core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import { AXActionSheetService } from '@acorex/components/action-sheet';
 import * as i1$2 from '@acorex/components/badge';
@@ -119,6 +119,8 @@ import { AXCronJobModule } from '@acorex/components/cron-job';
 import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$6 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
+import * as i4$1 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i1$l from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1310,8 +1312,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
             if (this.showOtherLanguages() || !this.hasLanguagesBeyondProfiles()) {
                 return list;
             }
-            return list.filter((l) => l.isLocaleProfile ||
-                this.hasTranslationContent(l.context?.value));
+            return list.filter((l) => l.isLocaleProfile || this.hasTranslationContent(l.context?.value));
         }, ...(ngDevMode ? [{ debugName: "visibleLanguageList" }] : /* istanbul ignore next */ []));
     }
     //#region ---- Lifecycle ----
@@ -1326,6 +1327,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
     handleContextChanged(e, language) {
         language.context = e.data;
     }
+    //TODO NEED TO FIX THOSE HAS NO PROFILE
     onShowOtherLanguagesChanged(event) {
         const next = !!event.value;
         this.showOtherLanguages.set(next);
@@ -1337,8 +1339,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
             if (!current) {
                 return list;
             }
-            const staysVisible = current.isLocaleProfile ||
-                (!current.isLocaleProfile && this.hasTranslationContent(current.context?.value));
+            const staysVisible = current.isLocaleProfile || (!current.isLocaleProfile && this.hasTranslationContent(current.context?.value));
             if (staysVisible) {
                 return list;
             }
@@ -1375,7 +1376,9 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
     async onSaveButtonClick() {
         const merged = { ...this.values };
         this.languageList().forEach((item) => {
-            merged[item.code] = item.context.value;
+            if (item.context.value) {
+                merged[item.code] = item.context.value;
+            }
         });
         this.close(merged);
     }
@@ -1984,10 +1987,11 @@ var buttonWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPButtonWidget = {
     name: 'button-action',
-    title: 'Button',
-    description: 'Triggers customizable actions',
+    title: '@platform-layout-widgets:widgets.button-action.title',
+    description: '@platform-layout-widgets:widgets.button-action.description',
     icon: 'fa-light fa-play',
-    categories: [AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ACTION_CATEGORY],
+    subCategory: AXP_WIDGETS_ACTION_SUB_CONTROLS,
     aiDescription: 'Primary or secondary action button. Use when the answer should offer a clear next step (submit, navigate, run) with label and optional icon.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'action',
@@ -2025,7 +2029,7 @@ const AXPConditionBuilderWidget = {
     description: 'Builds filter conditions (field/operator/value) with AND/OR groups',
     icon: 'fa-light fa-filter',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     type: 'editor',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
@@ -2549,10 +2553,11 @@ var checkboxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPCheckBoxWidget = {
     name: 'checkbox-editor',
-    title: 'Check Box',
+    title: '@platform-layout-widgets:widgets.checkbox-editor.title',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
-    description: 'Selects multiple options via checkboxes',
+    description: '@platform-layout-widgets:widgets.checkbox-editor.description',
     icon: 'fa-light fa-square-check',
     defaultFilterWidgetName: 'boolean-filter',
     type: 'editor',
@@ -2782,10 +2787,11 @@ var colorBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPColorBoxWidget = {
     name: 'color-editor',
-    title: 'Color Box',
-    description: 'Picks and applies colors',
+    title: '@platform-layout-widgets:widgets.color-editor.title',
+    description: '@platform-layout-widgets:widgets.color-editor.description',
     icon: 'fa-light fa-palette',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_VISUAL,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -3133,10 +3139,11 @@ var colorPaletteWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPColorPaletteWidget = {
     name: 'color-palette-editor',
-    title: 'Color Palette',
-    description: 'Selects colors from a predefined palette',
+    title: '@platform-layout-widgets:widgets.color-palette-editor.title',
+    description: '@platform-layout-widgets:widgets.color-palette-editor.description',
     icon: 'fa-light fa-swatchbook',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_VISUAL,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -3362,10 +3369,11 @@ var connectedListsWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPConnectedDragDropListsWidget = {
     name: 'connected-lists-editor',
-    title: 'Connected Drag & Drop Lists',
-    description: 'Two connected lists with drag and drop transfer',
+    title: '@platform-layout-widgets:widgets.connected-lists-editor.title',
+    description: '@platform-layout-widgets:widgets.connected-lists-editor.description',
     icon: 'fa-light fa-arrow-right-arrow-left',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     type: 'editor',
@@ -4143,9 +4151,10 @@ var contactWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPContactWidget = {
     name: 'contact-editor',
-    title: 'Contact',
-    description: 'Inputs contact information',
+    title: '@platform-layout-widgets:widgets.contact-editor.title',
+    description: '@platform-layout-widgets:widgets.contact-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-address-book',
     defaultFilterWidgetName: 'string-filter',
@@ -4195,9 +4204,10 @@ const AXPContactWidget = {
 
 const AXPAddressWidget = {
     name: 'address-editor',
-    title: 'Address',
-    description: 'Inputs address information',
+    title: '@platform-layout-widgets:widgets.address-editor.title',
+    description: '@platform-layout-widgets:widgets.address-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-location-dot',
     defaultFilterWidgetName: 'string-filter',
@@ -5292,10 +5302,11 @@ var dateTimeBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPDateTimeBoxWidget = {
     name: 'date-time-editor',
-    title: 'Date Time Box',
-    description: 'Selects date and time',
+    title: '@platform-layout-widgets:widgets.date-time-editor.title',
+    description: '@platform-layout-widgets:widgets.date-time-editor.description',
     icon: 'fa-light fa-calendar',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'datetime-filter',
@@ -5544,11 +5555,12 @@ var editorJsWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPEditorJsWidget = {
     name: 'editor-js-editor',
-    title: 'Editor Js',
-    description: 'Formats and edits text',
+    title: '@platform-layout-widgets:widgets.editor-js-editor.title',
+    description: '@platform-layout-widgets:widgets.editor-js-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    subCategory: AXP_WIDGETS_EDITOR_SUB_RICH,
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
     properties: [
@@ -5813,10 +5825,11 @@ var largeTextWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPLargeTextWidget = {
     name: 'large-text-editor',
-    title: 'Large Text Box',
-    description: 'Inputs long text entries',
+    title: '@platform-layout-widgets:widgets.large-text-editor.title',
+    description: '@platform-layout-widgets:widgets.large-text-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
@@ -5953,10 +5966,11 @@ var listWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPDragDropListWidget = {
     name: 'list-editor',
-    title: 'Drag & Drop List',
-    description: 'Reorderable list with drag and drop',
+    title: '@platform-layout-widgets:widgets.list-editor.title',
+    description: '@platform-layout-widgets:widgets.list-editor.description',
     icon: 'fa-light fa-list',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     type: 'editor',
@@ -6232,10 +6246,11 @@ var numberBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPNumberBoxWidget = {
     name: 'number-editor',
-    title: 'Number Box',
-    description: 'Inputs numeric values',
+    title: '@platform-layout-widgets:widgets.number-editor.title',
+    description: '@platform-layout-widgets:widgets.number-editor.description',
     icon: 'fa-light fa-input-numeric',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'number-filter',
@@ -6481,10 +6496,11 @@ var passwordBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPPasswordBoxWidget = {
     name: 'password-editor',
-    title: 'Password Box',
-    description: 'Secures password input',
+    title: '@platform-layout-widgets:widgets.password-editor.title',
+    description: '@platform-layout-widgets:widgets.password-editor.description',
     icon: 'fa-light fa-lock',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -6844,10 +6860,11 @@ var progressBarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPProgressBarWidget = {
     name: 'progress-bar-editor',
-    title: 'Progress Bar',
-    description: 'Displays progress as a value out of a total with visual progress bar',
+    title: '@platform-layout-widgets:widgets.progress-bar-editor.title',
+    description: '@platform-layout-widgets:widgets.progress-bar-editor.description',
     icon: 'fa-light fa-chart-line-up',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -7061,10 +7078,11 @@ var ratePickerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRatePickerWidget = {
     name: 'rate-picker-editor',
-    title: 'Rate Picker',
-    description: 'Allows users to select a rating value',
+    title: '@platform-layout-widgets:widgets.rate-picker-editor.title',
+    description: '@platform-layout-widgets:widgets.rate-picker-editor.description',
     icon: 'fa-light fa-star',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'number-filter',
     type: 'editor',
@@ -7106,6 +7124,54 @@ const AXPRatePickerWidget = {
     },
 };
 
+/** Stable context path for rich-text preview dialogs (layout builder + context store). */
+const AXP_RICH_TEXT_DIALOG_BODY_PATH = '__axpRichTextDialogBody';
+/**
+ * Turns camelCase / kebab-case property segments into Title Case words for fallback titles.
+ */
+function humanizePropertyPath(path) {
+    if (!path) {
+        return '';
+    }
+    const spaced = path.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[-_]/g, ' ');
+    return spaced.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+ * Resolves dialog title: translated keys (`@...`), humanized identifiers, or plain captions.
+ */
+async function resolveRichTextPreviewTitle(translation, caption, path) {
+    const raw = caption?.trim() || path?.trim() || '';
+    if (!raw) {
+        return '';
+    }
+    if (raw.startsWith('@')) {
+        return (await translation.translateAsync(raw)) ?? raw;
+    }
+    if (/^[a-z][a-zA-Z0-9]*$/.test(raw)) {
+        return humanizePropertyPath(raw);
+    }
+    return raw;
+}
+/**
+ * Approximate visible text length for rich HTML (decides inline vs truncated column cell).
+ */
+function richTextPlainTextLength(html) {
+    if (!html?.trim()) {
+        return 0;
+    }
+    try {
+        if (typeof DOMParser !== 'undefined') {
+            const doc = new DOMParser().parseFromString(html, 'text/html');
+            const text = doc.body.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+            return text.length;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim().length;
+}
+
 class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
@@ -7113,23 +7179,42 @@ class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.layoutBuilder = inject(AXPLayoutBuilderService);
         this.mlResolver = inject(AXTranslationService);
     }
+    /** Plain-text length threshold: above this, cell is clamped and clickable for full preview. */
+    previewMaxChars() {
+        const v = this.options['previewMaxChars'];
+        return typeof v === 'number' && v > 0 ? v : 100;
+    }
+    /** Whether resolved HTML is long enough to warrant truncation + popup. */
+    isTruncatedPreview(resolvedHtml) {
+        return richTextPlainTextLength(resolvedHtml) > this.previewMaxChars();
+    }
+    onExpandClick(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+        void this.openPopup();
+    }
     async openPopup() {
-        const html = this.mlResolver.resolve(this.rawValue);
+        const lang = this.mlResolver.getActiveLang();
+        const resolvedHtml = this.mlResolver.resolve(this.rawValue, lang) ?? '';
+        if (!this.isTruncatedPreview(resolvedHtml)) {
+            return;
+        }
+        const title = await resolveRichTextPreviewTitle(this.mlResolver, this.columnCaption, this.path);
         const size = this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md';
-        const ref = await this.layoutBuilder
+        await this.layoutBuilder
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle(this.path ?? '')
+                .setTitle(title)
                 .setSize(size)
+                .setContext({ [AXP_RICH_TEXT_DIALOG_BODY_PATH]: resolvedHtml })
                 .content((layoutBuilder) => {
                 layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Content', (field) => {
-                        field.readonly(true).customWidget('rich-text-editor', {
-                            src: html,
-                            toolbar: [],
-                            height: 400,
-                        });
+                    flex.mode('view').richText({
+                        path: AXP_RICH_TEXT_DIALOG_BODY_PATH,
+                        defaultValue: resolvedHtml,
+                        showFullContent: true,
+                        height: 400,
                     });
                 });
             })
@@ -7138,22 +7223,36 @@ class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
             });
         })
             .show();
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetColumnComponent, isStandalone: true, selector: "axp-rich-text-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
     @let html = rawValue | translate | async;
+    @let expandHint = '@platform-layout-widgets:widgets.rich-text-editor.column-expand-title' | translate | async;
     @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+      @if (isTruncatedPreview(html)) {
+        <div class="ax-flex ax-gap-1 ax-items-start ax-min-w-0 ax-max-w-full">
+          <div
+            class="ax-min-w-0 ax-flex-1 ax-line-clamp-3 ax-overflow-hidden ax-break-words"
+            [innerHTML]="html | safe: 'html'"
+          ></div>
+          <ax-button
+            class="ax-xs ax-shrink-0"
+            look="blank"
+            [iconOnly]="true"
+            [text]="expandHint ?? ''"
+            [title]="expandHint ?? ''"
+            (onClick)="onExpandClick($event)"
+          >
+            <ax-icon icon="far fa-expand"></ax-icon>
+          </ax-button>
+        </div>
+      } @else {
+        <div class="ax-min-w-0 ax-max-w-full ax-break-words" [innerHTML]="html | safe: 'html'"></div>
+      }
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetColumnComponent, decorators: [{
             type: Component,
@@ -7161,19 +7260,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-rich-text-widget-column',
                     template: `
     @let html = rawValue | translate | async;
+    @let expandHint = '@platform-layout-widgets:widgets.rich-text-editor.column-expand-title' | translate | async;
     @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+      @if (isTruncatedPreview(html)) {
+        <div class="ax-flex ax-gap-1 ax-items-start ax-min-w-0 ax-max-w-full">
+          <div
+            class="ax-min-w-0 ax-flex-1 ax-line-clamp-3 ax-overflow-hidden ax-break-words"
+            [innerHTML]="html | safe: 'html'"
+          ></div>
+          <ax-button
+            class="ax-xs ax-shrink-0"
+            look="blank"
+            [iconOnly]="true"
+            [text]="expandHint ?? ''"
+            [title]="expandHint ?? ''"
+            (onClick)="onExpandClick($event)"
+          >
+            <ax-icon icon="far fa-expand"></ax-icon>
+          </ax-button>
+        </div>
+      } @else {
+        <div class="ax-min-w-0 ax-max-w-full ax-break-words" [innerHTML]="html | safe: 'html'"></div>
+      }
     } @else {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXSafePipe, AXTranslationModule, AsyncPipe],
+                    imports: [AXButtonModule, AXDecoratorModule, AXSafePipe, AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -7350,28 +7464,39 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
         this.layoutBuilder = inject(AXPLayoutBuilderService);
         this.mlResolver = inject(AXTranslationService);
-        /** Resolved HTML for the preview dialog (same rules as the inline snippet). */
+        this.currentLanguage = toSignal(this.mlResolver.langChanges$, {
+            initialValue: this.mlResolver.getActiveLang(),
+        });
+        /** Resolved HTML for inline snippet and preview dialog. */
         this.displayHtml = computed(() => {
             const v = this.getValue();
-            return this.mlResolver.resolve(v);
+            return this.mlResolver.resolve(v, this.currentLanguage());
         }, ...(ngDevMode ? [{ debugName: "displayHtml" }] : /* istanbul ignore next */ []));
+        /** Full-body preview (dialogs) vs truncated grid snippet. */
+        this.showFullContent = computed(() => this.options()['showFullContent'] === true, ...(ngDevMode ? [{ debugName: "showFullContent" }] : /* istanbul ignore next */ []));
+        this.previewMaxHeightPx = computed(() => {
+            const h = this.options()['height'];
+            return h != null && h > 0 ? h : 400;
+        }, ...(ngDevMode ? [{ debugName: "previewMaxHeightPx" }] : /* istanbul ignore next */ []));
     }
     async openPopup() {
+        const resolvedHtml = this.displayHtml();
+        const title = await resolveRichTextPreviewTitle(this.mlResolver, undefined, this.path);
         const size = this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md';
-        const ref = await this.layoutBuilder
+        await this.layoutBuilder
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle(this.path ?? '')
+                .setTitle(title)
                 .setSize(size)
+                .setContext({ [AXP_RICH_TEXT_DIALOG_BODY_PATH]: resolvedHtml })
                 .content((layoutBuilder) => {
                 layoutBuilder.flex((flex) => {
-                    flex.mode('view').formField('Content', (field) => {
-                        field.readonly(true).customWidget('rich-text-editor', {
-                            src: this.displayHtml(),
-                            toolbar: [],
-                            height: 400,
-                        });
+                    flex.mode('view').richText({
+                        path: AXP_RICH_TEXT_DIALOG_BODY_PATH,
+                        defaultValue: resolvedHtml,
+                        showFullContent: true,
+                        height: 400,
                     });
                 });
             })
@@ -7380,20 +7505,31 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
             });
         })
             .show();
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget-view", usesInheritance: true, ngImport: i0, template: `
     @let html = getValue() | translate | async;
-    @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+    @if (showFullContent()) {
+      @if (html) {
+        <div
+          class="ax-overflow-auto ax-min-h-0 ax-rich-text-widget-full-preview"
+          [style.max-height.px]="previewMaxHeightPx()"
+          [innerHTML]="html | safe: 'html'"
+        ></div>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     } @else {
-      <span class="ax-text-muted">---</span>
+      @if (html) {
+        <span
+          class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer ax-text-muted"
+          (click)="openPopup()"
+          [innerHTML]="html | safe: 'html'"
+        >
+        </span>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -7403,15 +7539,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-rich-text-widget-view',
                     template: `
     @let html = getValue() | translate | async;
-    @if (html) {
-      <span
-        class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted"
-        (click)="openPopup()"
-        [innerHTML]="html | safe: 'html'"
-      >
-      </span>
+    @if (showFullContent()) {
+      @if (html) {
+        <div
+          class="ax-overflow-auto ax-min-h-0 ax-rich-text-widget-full-preview"
+          [style.max-height.px]="previewMaxHeightPx()"
+          [innerHTML]="html | safe: 'html'"
+        ></div>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     } @else {
-      <span class="ax-text-muted">---</span>
+      @if (html) {
+        <span
+          class="ax-truncate ax-underline ax-block ax-w-full ax-cursor-pointer ax-text-muted"
+          (click)="openPopup()"
+          [innerHTML]="html | safe: 'html'"
+        >
+        </span>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7426,10 +7574,11 @@ var richTextWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRichTextWidget = {
     name: 'rich-text-editor',
-    title: 'Rich Text',
-    description: 'Formats and edits rich text',
+    title: '@platform-layout-widgets:widgets.rich-text-editor.title',
+    description: '@platform-layout-widgets:widgets.rich-text-editor.description',
     icon: 'fa-light fa-input-text',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_RICH,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
@@ -7665,35 +7814,36 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 this.contextService.patch(itemToExpose, true);
             }
             //#endregion
-            //#region ----   Set Value Based on Mode   ----
-            if (this.filterMode()) {
-                // Filter mode: set value with operation structure
-                const newValue = e.value;
-                const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setValue({
-                    value: newValue,
-                    displayText: text,
-                    operation: {
-                        type: this.multiple() ? 'in' : 'equal',
-                    },
-                });
+        }
+        //#region ----   Set Value Based on Mode   ----
+        // Apply strategy even when the value comes from outside (isUserInteraction=false).
+        if (this.filterMode()) {
+            // Filter mode: set value with operation structure
+            const newValue = e.value;
+            const text = this.selectedItems().map((item) => get(item, this.textField()));
+            this.setValue({
+                value: newValue,
+                displayText: text,
+                operation: {
+                    type: this.multiple() ? 'in' : 'equal',
+                },
+            });
+        }
+        else {
+            // Normal mode: set value directly
+            if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
+                this.setValue(e.value);
             }
             else {
-                // Normal mode: set value directly
-                if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
-                    this.setValue(e.value);
+                if (this.multiple()) {
+                    this.setValue(this.selectedItems());
                 }
                 else {
-                    if (this.multiple()) {
-                        this.setValue(this.selectedItems());
-                    }
-                    else {
-                        this.setValue(this.selectedItems()[0]);
-                    }
+                    this.setValue(this.selectedItems()[0]);
                 }
             }
-            //#endregion
         }
+        //#endregion
     }
     handleSearchValueChange(e) {
         if (e.isUserInteraction) {
@@ -7907,10 +8057,11 @@ var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSelectBoxWidget = {
     name: 'select-editor',
-    title: 'Select Box',
-    description: 'Chooses from dropdown options',
+    title: '@platform-layout-widgets:widgets.select-editor.title',
+    description: '@platform-layout-widgets:widgets.select-editor.description',
     icon: 'fa-light fa-list-dropdown',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'select-filter',
     type: 'editor',
@@ -8264,10 +8415,11 @@ var selectionListWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSelectionListWidget = {
     name: 'selection-list-editor',
-    title: 'Selection List',
-    description: 'Selects from a list',
+    title: '@platform-layout-widgets:widgets.selection-list-editor.title',
+    description: '@platform-layout-widgets:widgets.selection-list-editor.description',
     icon: 'fa-light fa-list-radio',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'select-filter',
     properties: [
@@ -8757,10 +8909,11 @@ var tagEditorWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTagEditorWidget = {
     name: 'tag-editor',
-    title: 'Tag Editor',
+    title: '@platform-layout-widgets:widgets.tag-editor.title',
     icon: 'fa-light fa-tags',
-    description: 'Input and manage multiple tags',
+    description: '@platform-layout-widgets:widgets.tag-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -9144,10 +9297,11 @@ var templateBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTemplateBoxWidget = {
     name: 'template-box-editor',
-    title: 'Template Box',
+    title: '@platform-layout-widgets:widgets.template-box-editor.title',
     icon: 'fa-light fa-file-alt',
-    description: 'Advanced template text editor with language support',
+    description: '@platform-layout-widgets:widgets.template-box-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [
@@ -9420,10 +9574,11 @@ var textBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTextBoxWidget = {
     name: 'text-editor',
-    title: 'Text Box',
+    title: '@platform-layout-widgets:widgets.text-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'Inputs single-line text',
+    description: '@platform-layout-widgets:widgets.text-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -9765,11 +9920,12 @@ var toggleWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPToggleWidget = {
     name: 'toggle-editor',
-    title: 'Toggle',
-    description: 'Switches between on/off states',
+    title: '@platform-layout-widgets:widgets.toggle-editor.title',
+    description: '@platform-layout-widgets:widgets.toggle-editor.description',
     icon: 'fa-light fa-toggle-on',
     defaultFilterWidgetName: 'boolean-filter',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     properties: [
@@ -10342,10 +10498,11 @@ var avatarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAvatarWidget = {
     name: 'avatar',
-    title: 'Avatar',
-    description: 'Displays an avatar image based on a reference ID and type',
+    title: '@platform-layout-widgets:widgets.avatar.title',
+    description: '@platform-layout-widgets:widgets.avatar.description',
     icon: 'fa-light fa-image-user',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'User or entity avatar from a reference id/type. Use when the answer should show who or what something belongs to, not a full photo gallery.',
     groups: [AXPWidgetGroupEnum.EntityWidget],
     type: 'editor',
@@ -10583,10 +10740,11 @@ var codeEditorWidgetColumn_component = /*#__PURE__*/Object.freeze({
 //#region ----   Widget Config   ----
 const AXPCodeEditorWidget = {
     name: 'code-editor',
-    title: 'Code Editor',
-    description: 'A code editor widget for editing code expressions and scripts',
+    title: '@platform-layout-widgets:widgets.code-editor.title',
+    description: '@platform-layout-widgets:widgets.code-editor.description',
     icon: 'fa-light fa-code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Syntax-highlighted code block. Use for snippets, scripts, or configs where line structure and language matter; bind source via data path or options.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
@@ -10896,10 +11054,11 @@ var dataListWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPDataListWidget = {
     name: 'data-list',
-    title: 'Data List',
-    description: 'Displays data in a list like table format with customizable columns',
+    title: '@platform-layout-widgets:widgets.data-list.title',
+    description: '@platform-layout-widgets:widgets.data-list.description',
     icon: 'fa-light fa-table',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_LISTS,
     aiDescription: 'Use for tabular data: multiple rows with defined columns, paging, and optional row commands. Provide options.dataSource (rows) and options.columns.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -12304,10 +12463,11 @@ var fileUploaderWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPFileUploaderWidget = {
     name: 'file-uploader',
-    title: 'File Uploader',
-    description: 'Uploads and manages files',
+    title: '@platform-layout-widgets:widgets.file-uploader.title',
+    description: '@platform-layout-widgets:widgets.file-uploader.description',
     icon: 'fa-light fa-files',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use when the answer involves file attachments: list, upload, or download. Prefer when the user references documents or media beyond inline text.',
     groups: ['form-element'],
     type: 'editor',
@@ -13035,10 +13195,11 @@ var galleryWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGalleryWidget = {
     name: 'gallery',
-    title: 'Media Gallery',
-    description: 'Shows and edits image galleries',
+    title: '@platform-layout-widgets:widgets.gallery.title',
+    description: '@platform-layout-widgets:widgets.gallery.description',
     icon: 'fa-light fa-images',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Image gallery with thumbnails and optional fullscreen. Use for multiple images or a carousel-like browse experience (not a single static image).',
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [
@@ -13516,13 +13677,13 @@ var imageMarkerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPImageMarkerWidget = {
     name: 'image-marker',
-    title: 'Image Marker',
-    description: 'Image Marker Widget to add markers to an image',
+    title: '@platform-layout-widgets:widgets.image-marker.title',
+    description: '@platform-layout-widgets:widgets.image-marker.description',
     icon: 'fa-light fa-map-marker-alt',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use when highlighting points or regions on a base image (annotations, hotspots). Provide base image plus marker coordinates or overlays in options.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -13686,12 +13847,13 @@ var jsonViewerWidgetEdit_component = /*#__PURE__*/Object.freeze({
 //#region ----   Widget Config   ----
 const AXPJsonViewerWidget = {
     name: 'json-viewer',
-    title: 'JSON Viewer',
-    description: 'Displays JSON data in a formatted, collapsible tree view',
+    title: '@platform-layout-widgets:widgets.json-viewer.title',
+    description: '@platform-layout-widgets:widgets.json-viewer.description',
     icon: 'fa-light fa-code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_DATA,
     aiDescription: 'Shows JSON as an expandable tree. Prefer when the payload is structured data (objects/arrays) and hierarchy matters more than plain text.',
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -14154,10 +14316,11 @@ var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPQrcodeWidget = {
     name: 'qrcode',
-    title: 'QR Code',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    title: '@platform-layout-widgets:widgets.qrcode.title',
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     icon: 'fa-light fa-qrcode',
-    description: 'Display and edit QR Codes',
+    description: '@platform-layout-widgets:widgets.qrcode.description',
     aiDescription: 'Renders a scannable QR code from text or URL (options.content). Use when the user should open a link or payload on a phone.',
     type: 'view',
     properties: [
@@ -14447,9 +14610,10 @@ var schedulerPickerWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSchedulerPickerWidget = {
     name: 'scheduler-picker',
-    title: 'Scheduler Picker',
+    title: '@platform-layout-widgets:widgets.scheduler-picker.title',
     icon: 'fa-light fa-calendar-clock',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Schedule or calendar picker. Use when the user selects dates, times, or recurring slots; bind value via data path.',
     type: 'editor',
     groups: [AXPWidgetGroupEnum.FormElement],
@@ -14786,10 +14950,11 @@ var signaturePadWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPSignatureWidget = {
     name: 'signature',
-    title: 'Signature',
-    description: 'Captures digital signatures',
+    title: '@platform-layout-widgets:widgets.signature.title',
+    description: '@platform-layout-widgets:widgets.signature.description',
     icon: 'fa-light fa-file-signature',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Digital signature capture or display. Use when consent, approval, or handwritten input is required instead of typed text.',
     type: 'editor',
     properties: [
@@ -14873,6 +15038,8 @@ class AXPStatusChipComponent {
         this.isPopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopoverOpen" }] : /* istanbul ignore next */ []));
         this.isUpdating = signal(false, ...(ngDevMode ? [{ debugName: "isUpdating" }] : /* istanbul ignore next */ []));
         this.providerSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "providerSignal" }] : /* istanbul ignore next */ []));
+        /** Native tooltip from translated `AXPStatusDefinition.description` (i18n key). */
+        this.chipTooltip = signal(null, ...(ngDevMode ? [{ debugName: "chipTooltip" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Computed Properties   ----
         this.statuses = computed(() => this.providerSignal()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
@@ -14912,15 +15079,9 @@ class AXPStatusChipComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((s) => ({
-                    from: currentStatus.name,
-                    to: s.name,
-                    toStatus: s,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -14956,6 +15117,18 @@ class AXPStatusChipComponent {
                 this.providerSignal.set(provider);
             });
         }, ...(ngDevMode ? [{ debugName: "loadProvider" }] : /* istanbul ignore next */ []));
+        this.syncDescriptionTooltip = effect(() => {
+            const def = this.currentStatus();
+            const descKey = def?.description;
+            if (!descKey) {
+                untracked(() => this.chipTooltip.set(null));
+                return;
+            }
+            void this.translationService
+                .translateAsync(descKey)
+                .then((t) => untracked(() => this.chipTooltip.set(t || null)))
+                .catch(() => untracked(() => this.chipTooltip.set(null)));
+        }, ...(ngDevMode ? [{ debugName: "syncDescriptionTooltip" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Public Methods   ----
@@ -15054,8 +15227,12 @@ class AXPStatusChipComponent {
         [class.ax-cursor-pointer]="hasTransitions"
         [class.ax-cursor-default]="!hasTransitions"
         (click)="hasTransitions && openPopover()"
+        [attr.title]="chipTooltip() ?? null"
         #chipElement
       >
+        @if (currentStatusDef.icon) {
+          <i [class]="currentStatusDef.icon + ' ax-text-[0.85em] ax-opacity-90'"></i>
+        }
         <span>{{ currentStatusDef.title | translate | async }}</span>
         @if (hasTransitions) {
           <i class="fa-light fa-chevron-down ax-text-xs"></i>
@@ -15122,8 +15299,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         [class.ax-cursor-pointer]="hasTransitions"
         [class.ax-cursor-default]="!hasTransitions"
         (click)="hasTransitions && openPopover()"
+        [attr.title]="chipTooltip() ?? null"
         #chipElement
       >
+        @if (currentStatusDef.icon) {
+          <i [class]="currentStatusDef.icon + ' ax-text-[0.85em] ax-opacity-90'"></i>
+        }
         <span>{{ currentStatusDef.title | translate | async }}</span>
         @if (hasTransitions) {
           <i class="fa-light fa-chevron-down ax-text-xs"></i>
@@ -15217,7 +15398,17 @@ class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
          */
         this.columnReadonly = computed(() => !!this.options['readonly'], ...(ngDevMode ? [{ debugName: "columnReadonly" }] : /* istanbul ignore next */ []));
         this.entityData = computed(() => {
-            return this.rowDataSignal();
+            const row = this.rowDataSignal();
+            if (!row || typeof row !== 'object') {
+                return null;
+            }
+            const entityKey = this.options['entity'];
+            const fieldName = this.options['fieldName'];
+            return {
+                ...row,
+                ...(entityKey ? { entity: entityKey, entityName: entityKey } : {}),
+                ...(fieldName ? { statusField: fieldName } : {}),
+            };
         }, ...(ngDevMode ? [{ debugName: "entityData" }] : /* istanbul ignore next */ []));
         this.resolvedStatuses = computed(() => {
             return this.providerSignal()?.statuses ?? [];
@@ -15257,15 +15448,9 @@ class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15460,15 +15645,9 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15508,13 +15687,35 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
         // Could show a toast notification here if needed
     }
     /**
-     * Get entity data for command execution context
+     * Build context for default `Entity:UpdateStatus` (entity key, record id, status field path).
      */
     getEntityData() {
-        // Return current entity data if available
-        // This could be enhanced to get full entity context
-        const value = this.getValue();
-        return value ? { value } : null;
+        const opts = this.options();
+        const entityKey = (opts['entityName'] ?? opts['entity']);
+        const statusField = (opts['statusField'] ?? opts['fieldName'] ?? this.path);
+        const parentPath = this.parentPath();
+        const idPathCandidates = [
+            parentPath ? `${parentPath}.id` : null,
+            'id',
+            parentPath ? `${parentPath}._id` : null,
+            '_id',
+        ].filter((p) => !!p);
+        let id;
+        for (const p of idPathCandidates) {
+            id = this.contextService.getValue(p);
+            if (id != null && String(id).length > 0) {
+                break;
+            }
+        }
+        if (!entityKey || id == null || String(id).length === 0) {
+            return null;
+        }
+        return {
+            entity: entityKey,
+            entityName: entityKey,
+            statusField: statusField ?? 'statusId',
+            id: String(id),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStatusWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPStatusWidgetEditComponent, isStandalone: true, selector: "axp-status-widget-edit", viewQueries: [{ propertyName: "statusChip", first: true, predicate: AXPStatusChipComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
@@ -15630,15 +15831,9 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
             if (!Array.isArray(statuses) || statuses.length === 0) {
                 return [];
             }
-            // If no transitions defined, show all other statuses as available options
+            // No declared transitions: executeTransition() rejects every path — do not offer fake targets
             if (!Array.isArray(transitions) || transitions.length === 0) {
-                return statuses
-                    .filter((s) => s.name !== currentStatus.name)
-                    .map((status) => ({
-                    from: currentStatus.name,
-                    to: status.name,
-                    toStatus: status,
-                }));
+                return [];
             }
             // Filter transitions that start from current status
             const availableTransitions = transitions.filter((t) => t.from === currentStatus.name);
@@ -15731,10 +15926,11 @@ var statusWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPStatusWidget = {
     name: 'status-widget',
-    title: 'Status Widget',
-    description: 'Displays and manages entity status with visual indicators',
+    title: '@platform-layout-widgets:widgets.status-widget.title',
+    description: '@platform-layout-widgets:widgets.status-widget.description',
     icon: 'fa-light fa-circle-check',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_DATA,
     aiDescription: 'Visual status chip or badge for entity/state. Use when the answer should highlight a single workflow or lifecycle state (e.g. open, approved).',
     groups: [AXPWidgetGroupEnum.EntityWidget],
     defaultFilterWidgetName: 'status-filter',
@@ -15767,10 +15963,11 @@ const AXPStatusWidget = {
 //#region ----   Widget Config   ----
 const AXPStopwatchWidget = {
     name: 'stopwatch',
-    title: 'Stopwatch',
-    description: 'A stopwatch widget that can count up or count down from a time limit',
+    title: '@platform-layout-widgets:widgets.stopwatch.title',
+    description: '@platform-layout-widgets:widgets.stopwatch.description',
     icon: 'fa-light fa-stopwatch',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_TOOLS,
     aiDescription: 'Live stopwatch or countdown. Use when the answer involves elapsed time, deadlines, or timed steps; configure mode (count-up vs count-down) in options.',
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'view',
@@ -15951,10 +16148,11 @@ var stopwatchWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPWidgetFieldConfiguratorWidget = {
     name: 'widget-field-configurator',
-    title: 'Widget Field Configurator',
-    icon: 'fa-solid fa-puzzle-piece',
-    description: 'Configure widget type and options for a single field',
+    title: '@platform-layout-widgets:widgets.widget-field-configurator.title',
+    icon: 'fa-light fa-puzzle-piece',
+    description: '@platform-layout-widgets:widgets.widget-field-configurator.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CONFIG,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -16171,12 +16369,12 @@ class AXPWidgetFieldConfiguratorWidgetColumnComponent extends AXPColumnWidgetCom
     @if (widget()) {
       <i [class]="widget()?.icon" class="fa-fw"></i>&nbsp;
       <span [title]="widget()?.title" class="ax-text-xs ax-font-medium">
-        {{ widget()?.title }}
+        {{ widget()?.title | translate | async }}
       </span>
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetFieldConfiguratorWidgetColumnComponent, decorators: [{
             type: Component,
@@ -16186,14 +16384,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     @if (widget()) {
       <i [class]="widget()?.icon" class="fa-fw"></i>&nbsp;
       <span [title]="widget()?.title" class="ax-text-xs ax-font-medium">
-        {{ widget()?.title }}
+        {{ widget()?.title | translate | async }}
       </span>
     } @else {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [],
+                    imports: [AXTranslationModule, AsyncPipe],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -16205,10 +16403,11 @@ var widgetFieldConfiguratorWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPItemConfiguratorWidget = {
     name: 'item-configurator',
-    title: 'Item Configurator',
-    icon: 'fa-solid fa-sliders',
-    description: 'Select an item and edit settings via the generic property viewer; the form value remains a widget node (type + options) for compatibility.',
+    title: '@platform-layout-widgets:widgets.item-configurator.title',
+    icon: 'fa-light fa-sliders',
+    description: '@platform-layout-widgets:widgets.item-configurator.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CONFIG,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
@@ -17204,9 +17403,10 @@ var advancedGridWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAdvancedGridWidget = {
     name: 'advanced-grid-layout',
-    title: 'Advanced Grid Layout',
+    title: '@platform-layout-widgets:widgets.advanced-grid-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     icon: 'fa-light fa-grid-2',
     properties: [
         AXP_NAME_PROPERTY,
@@ -17444,9 +17644,10 @@ var advancedGridItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPAdvancedGridItemWidget = {
     name: 'advanced-grid-item-layout',
-    title: 'Advanced Grid Item',
+    title: '@platform-layout-widgets:widgets.advanced-grid-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     icon: 'fa-light fa-objects-column',
     properties: [
         AXP_NAME_PROPERTY,
@@ -17589,10 +17790,11 @@ var blockWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPBlockWidget = {
     name: 'block-layout',
     type: 'container',
-    title: 'Block Layout',
-    description: 'Organizes content in blocks',
+    title: '@platform-layout-widgets:widgets.block-layout.title',
+    description: '@platform-layout-widgets:widgets.block-layout.description',
     icon: 'fa-light fa-block',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -17765,10 +17967,11 @@ var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPFieldsetWidget = {
     name: 'fieldset-layout',
     type: 'container',
-    title: 'Fieldset',
-    description: 'Organizes content in a fieldset container',
+    title: '@platform-layout-widgets:widgets.fieldset-layout.title',
+    description: '@platform-layout-widgets:widgets.fieldset-layout.description',
     icon: 'fa-light fa-object-group',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [AXP_NAME_PROPERTY, AXP_TITLE_PROPERTY, AXP_ICON_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY],
     components: {
@@ -17869,7 +18072,7 @@ class AXPFlexWidgetViewComponent extends AXPFlexBaseLayoutWidgetComponent {
         [node]="node"
         [index]="index"
         [parentNode]="this"
-        [mode]="this.mode"
+        [mode]="node.mode ?? this.mode"
       ></ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -17885,7 +18088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         [node]="node"
         [index]="index"
         [parentNode]="this"
-        [mode]="this.mode"
+        [mode]="node.mode ?? this.mode"
       ></ng-container>
     }
   `,
@@ -17908,10 +18111,11 @@ var flexWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPFlexWidget = {
     name: 'flex-layout',
     type: 'container',
-    title: 'Flex Layout',
-    description: 'Organizes content in flexible layout',
+    title: '@platform-layout-widgets:widgets.flex-layout.title',
+    description: '@platform-layout-widgets:widgets.flex-layout.description',
     icon: 'fa-light fa-box-taped',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -18055,11 +18259,12 @@ var flexItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPFlexItemWidget = {
     name: 'flex-item-layout',
-    title: 'Flex Item',
+    title: '@platform-layout-widgets:widgets.flex-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     // groups: [AXPWidgetGroupEnum.FormElement],
-    description: 'Flex Item Layout',
+    description: '@platform-layout-widgets:widgets.flex-item-layout.description',
     icon: 'fa-light fa-rectangle-vertical-history',
     properties: [
         AXP_NAME_PROPERTY,
@@ -18151,10 +18356,11 @@ var pageWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPPageWidget = {
     name: 'page-layout',
-    title: 'Page',
-    description: 'Structures the entire page',
+    title: '@platform-layout-widgets:widgets.page-layout.title',
+    description: '@platform-layout-widgets:widgets.page-layout.description',
     icon: 'fa-light fa-page',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SHELL,
     type: 'container',
     properties: [
         AXP_NAME_PROPERTY,
@@ -18478,10 +18684,11 @@ var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPRepeaterWidget = {
     name: 'repeater-layout',
-    title: 'Repeater',
-    description: 'Adds repeating form elements',
+    title: '@platform-layout-widgets:widgets.repeater-layout.title',
+    description: '@platform-layout-widgets:widgets.repeater-layout.description',
     icon: 'fa-light fa-table-list',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'container',
     properties: [
@@ -18874,9 +19081,10 @@ var stepWizardWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPStepWizardWidget = {
     name: 'step-wizard',
-    title: 'Step Wizard',
-    icon: 'fa-solid fa-image-user',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    title: '@platform-layout-widgets:widgets.step-wizard.title',
+    icon: 'fa-light fa-image-user',
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for multi-step flows (wizard). Present when the user should follow ordered steps; children typically hold step content.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -19853,10 +20061,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const AXPTableWidget = {
     name: 'table-layout',
     type: 'container',
-    title: 'Table Layout',
-    description: 'Structures content into rows and cells',
+    title: '@platform-layout-widgets:widgets.table-layout.title',
+    description: '@platform-layout-widgets:widgets.table-layout.description',
     icon: 'fa-light fa-table',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     options: {
         canInsert: true,
@@ -20271,10 +20480,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const AXPTableItemWidget = {
     name: 'table-item-layout',
-    title: 'Table Item',
+    title: '@platform-layout-widgets:widgets.table-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
-    description: 'Table Item (row/cell) container',
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
+    description: '@platform-layout-widgets:widgets.table-item-layout.description',
     icon: 'fa-light fa-table-cells',
     properties: [
         AXP_NAME_PROPERTY,
@@ -23950,12 +24160,13 @@ var cronJobWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPCronJobWidget = {
     name: 'cron-job',
-    title: 'Cron Job',
+    title: '@platform-layout-widgets:widgets.cron-job.title',
     icon: 'fa-light fa-alarm-clock',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
     aiDescription: 'Cron expression editor and viewer. Use when the answer involves recurring schedules or job timing (not a one-off date picker).',
     type: 'editor',
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.BaseWidget],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -24099,10 +24310,11 @@ var metaDataWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPMetaDataWidget = {
     name: 'meta-data-editor',
-    title: 'Meta Data',
+    title: '@platform-layout-widgets:widgets.meta-data-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'meta data rendered',
+    description: '@platform-layout-widgets:widgets.meta-data-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
@@ -24410,10 +24622,11 @@ var numberUnitBoxWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPNumberUnitBoxWidget = {
     name: 'number-unit-editor',
-    title: 'Number Unit Box',
-    description: 'Inputs numeric values',
+    title: '@platform-layout-widgets:widgets.number-unit-editor.title',
+    description: '@platform-layout-widgets:widgets.number-unit-editor.description',
     icon: 'fa-light fa-input-numeric',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_NUMERIC,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'editor',
     defaultFilterWidgetName: 'number-filter',
@@ -24459,10 +24672,11 @@ const AXPNumberUnitBoxWidget = {
 
 const AXPTableEditorWidget = {
     name: 'table-editor',
-    title: 'Table Editor',
+    title: '@platform-layout-widgets:widgets.table-editor.title',
     icon: 'fa-light fa-input-text',
-    description: 'Inputs single-line text',
+    description: '@platform-layout-widgets:widgets.table-editor.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_COMPOSITE,
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [
@@ -25467,13 +25681,13 @@ var imageWidgetView_component = /*#__PURE__*/Object.freeze({
 //#region ----   Image Widget Config   ----
 const AXPImageWidget = {
     name: 'image',
-    title: 'Image',
-    description: 'Simple image viewer/editor that stores a URL or binary',
+    title: '@platform-layout-widgets:widgets.image.title',
+    description: '@platform-layout-widgets:widgets.image.description',
     icon: 'fa-light fa-image',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
     aiDescription: 'Use for a single image (URL or embedded). Prefer over plain markdown when aspect ratio, sizing, or binary handling matters.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -25645,13 +25859,13 @@ var listToolbarWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPListToolbarWidget = {
     name: 'list-toolbar',
-    title: 'List Toolbar',
-    description: '',
+    title: '@platform-layout-widgets:widgets.list-toolbar.title',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_LISTS,
     aiDescription: 'Toolbar for list views: sort, filter, and column toggles. Use next to data-list when the user may refine or reorder rows.',
     groups: [AXPWidgetGroupEnum.UtilityWidget],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -25690,13 +25904,13 @@ const AXPListToolbarWidget = {
 
 const AXPMapWidget = {
     name: 'map',
-    title: 'Map',
-    description: 'Displays and interacts with maps',
+    title: '@platform-layout-widgets:widgets.map.title',
+    description: '@platform-layout-widgets:widgets.map.description',
     icon: 'fa-light fa-map-location',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
+    subCategory: AXP_WIDGETS_ADVANCE_SUB_TOOLS,
     aiDescription: 'Use when the answer involves locations, routes, or areas on a map. Pass markers, polygons, or center/zoom via options; suitable for “where”, “near”, or geographic summaries.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    aiCatalog: 'include',
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -25851,7 +26065,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25917,10 +26131,11 @@ var timeDurationWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTimeDurationWidget = {
     name: 'time-duration',
-    title: 'Time Duration',
-    description: 'Selects a time duration',
+    title: '@platform-layout-widgets:widgets.time-duration.title',
+    description: '@platform-layout-widgets:widgets.time-duration.description',
     icon: 'fa-light fa-clock',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
     groups: [AXPWidgetGroupEnum.FormElement],
     defaultFilterWidgetName: 'time-duration-filter',
     type: 'editor',
@@ -27191,10 +27406,11 @@ const AXPTimeDurationFilterWidget = {
 
 const AXPDocumentWidget = {
     name: 'document-layout',
-    title: 'Document',
-    description: 'Structures the entire document',
+    title: '@platform-layout-widgets:widgets.document-layout.title',
+    description: '@platform-layout-widgets:widgets.document-layout.description',
     icon: 'fa-light fa-page',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SHELL,
     type: 'container',
     properties: [],
     components: {},
@@ -27207,6 +27423,24 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         this.showLabel = computed(() => this.options()['showLabel'] ?? true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
         this.badge = computed(() => this.options()['badge'], ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
         this.visible = computed(() => this.options()['visible'], ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.hintText = computed(() => this.options()['hint'], ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+        this.hasHint = computed(() => {
+            const h = this.hintText();
+            if (h == null) {
+                return false;
+            }
+            if (typeof h === 'string') {
+                return h.trim().length > 0;
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
+        this.hintDisplayMode = computed(() => this.options()['hintDisplayMode'] === 'icon' ? 'icon' : 'note', ...(ngDevMode ? [{ debugName: "hintDisplayMode" }] : /* istanbul ignore next */ []));
+        /** Info icon with tooltip (typically next to the label when the label is visible). */
+        this.hintAsIcon = computed(() => this.hasHint() && this.hintDisplayMode() === 'icon', ...(ngDevMode ? [{ debugName: "hintAsIcon" }] : /* istanbul ignore next */ []));
+        /** Visible helper copy under the field (inside `ax-form-field`). */
+        this.hintAsNote = computed(() => this.hasHint() && this.hintDisplayMode() === 'note', ...(ngDevMode ? [{ debugName: "hintAsNote" }] : /* istanbul ignore next */ []));
+        /** Label row needs to show even when label is hidden (e.g. icon-only hint with badge layout). */
+        this.showTopRow = computed(() => this.showLabel() || !!this.badge() || this.hintAsIcon(), ...(ngDevMode ? [{ debugName: "showTopRow" }] : /* istanbul ignore next */ []));
         this.isRequired = computed(() => this.children().some((c) => {
             const validations = c.options?.['validations'];
             return Array.isArray(validations) && validations.some((v) => v.rule === 'required');
@@ -27218,14 +27452,25 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFormFieldWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFormFieldWidgetViewComponent, isStandalone: true, selector: "axp-form-field-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-form-field>
-      @if (showLabel() || badge()) {
+      @if (showTopRow()) {
         <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
-          @if (showLabel()) {
-            <ax-label [required]="isRequired()">{{ label() | translate | async }}</ax-label>
-          }
+          <div class="ax-flex ax-min-w-0 ax-flex-wrap ax-items-center ax-gap-1 ax-leading-none">
+            @if (showLabel()) {
+              <ax-label [required]="isRequired()" class="ax-inline-flex ax-min-w-0 ax-items-center">{{ label() | translate | async }}</ax-label>
+            }
+            @if (hintAsIcon()) {
+              <i
+                role="button"
+                tabindex="0"
+                class="fa-regular fa-circle-info ax-relative ax-top-px ax-inline-flex ax-h-5 ax-w-5 ax-shrink-0 ax-cursor-help ax-items-center ax-justify-center ax-rounded-full ax-text-xs ax-leading-none ax-text-neutral-500 ax-outline-none ax-transition-[color,background-color] hover:ax-bg-neutral-100 hover:ax-text-neutral-800 focus-visible:ax-outline-2 focus-visible:ax-outline-primary-500 focus-visible:ax-outline-offset-1 ax-mt-[-5px]"
+                [axTooltip]="(hintText()! | translate | async) ?? ''"
+                axTooltipPlacement="top"
+                [attr.aria-label]="(hintText()! | translate | async) ?? ''"
+              ></i>
+            }
+          </div>
           @if (badge()) {
-            <!-- <ax-badge [text]="(badge() | translate | async) ?? ''" color="primary" class="ax-primary-lightest"></ax-badge> -->
-            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | translate | async }}</span>
+            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md">{{ badge() | translate | async }}</span>
           }
         </div>
       }
@@ -27239,8 +27484,13 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         >
         </ng-container>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hintText()! | translate | async }}
+        </p>
+      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i4$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -27248,14 +27498,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-form-field-widget-view',
                     template: `
     <ax-form-field>
-      @if (showLabel() || badge()) {
+      @if (showTopRow()) {
         <div class="ax-flex ax-gap-1 ax-items-center ax-justify-between">
-          @if (showLabel()) {
-            <ax-label [required]="isRequired()">{{ label() | translate | async }}</ax-label>
-          }
+          <div class="ax-flex ax-min-w-0 ax-flex-wrap ax-items-center ax-gap-1 ax-leading-none">
+            @if (showLabel()) {
+              <ax-label [required]="isRequired()" class="ax-inline-flex ax-min-w-0 ax-items-center">{{ label() | translate | async }}</ax-label>
+            }
+            @if (hintAsIcon()) {
+              <i
+                role="button"
+                tabindex="0"
+                class="fa-regular fa-circle-info ax-relative ax-top-px ax-inline-flex ax-h-5 ax-w-5 ax-shrink-0 ax-cursor-help ax-items-center ax-justify-center ax-rounded-full ax-text-xs ax-leading-none ax-text-neutral-500 ax-outline-none ax-transition-[color,background-color] hover:ax-bg-neutral-100 hover:ax-text-neutral-800 focus-visible:ax-outline-2 focus-visible:ax-outline-primary-500 focus-visible:ax-outline-offset-1 ax-mt-[-5px]"
+                [axTooltip]="(hintText()! | translate | async) ?? ''"
+                axTooltipPlacement="top"
+                [attr.aria-label]="(hintText()! | translate | async) ?? ''"
+              ></i>
+            }
+          </div>
           @if (badge()) {
-            <!-- <ax-badge [text]="(badge() | translate | async) ?? ''" color="primary" class="ax-primary-lightest"></ax-badge> -->
-            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md ">{{ badge() | translate | async }}</span>
+            <span class="ax-text ax-p-1 ax-text-xs ax-rounded-md">{{ badge() | translate | async }}</span>
           }
         </div>
       }
@@ -27269,10 +27530,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         >
         </ng-container>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hintText()! | translate | async }}
+        </p>
+      }
     </ax-form-field>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXFormModule, AXLabelModule, AXPWidgetCoreModule, AXTranslationModule, AXBadgeModule],
+                    imports: [
+                        CommonModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXPWidgetCoreModule,
+                        AXTranslationModule,
+                        AXBadgeModule,
+                        AXDecoratorModule,
+                        AXTooltipModule,
+                    ],
                     standalone: true,
                 }]
         }], propDecorators: { __class: [{
@@ -27289,6 +27564,20 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
     constructor() {
         super(...arguments);
         this.label = computed(() => this.options()['label'], ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = computed(() => this.options()['hint'], ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.hasHint = computed(() => {
+            const h = this.hint();
+            if (h == null || h === '') {
+                return false;
+            }
+            if (typeof h === 'string') {
+                return h.trim().length > 0;
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
+        this.hintDisplayMode = computed(() => this.options()['hintDisplayMode'] === 'icon' ? 'icon' : 'note', ...(ngDevMode ? [{ debugName: "hintDisplayMode" }] : /* istanbul ignore next */ []));
+        this.hintAsIcon = computed(() => this.hasHint() && this.hintDisplayMode() === 'icon', ...(ngDevMode ? [{ debugName: "hintAsIcon" }] : /* istanbul ignore next */ []));
+        this.hintAsNote = computed(() => this.hasHint() && this.hintDisplayMode() === 'note', ...(ngDevMode ? [{ debugName: "hintAsNote" }] : /* istanbul ignore next */ []));
     }
     get __class() {
         return this.hostClass();
@@ -27301,7 +27590,12 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-form-field>
-      <ax-label>{{ label() | translate | async }}</ax-label>
+      <div class="ax-flex ax-gap-1 ax-items-center">
+        <ax-label>{{ label() | translate | async }}</ax-label>
+        @if (hintAsIcon()) {
+          <i class="fa-regular fa-circle-info ax-text-sm ax-opacity-75" aria-hidden="true"></i>
+        }
+      </div>
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-designer-renderer
@@ -27314,6 +27608,11 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
       } @empty {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hint() | translate | async }}
+        </p>
+      }
     </ax-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -27323,7 +27622,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-form-field-widget-designer',
                     template: `
     <ax-form-field>
-      <ax-label>{{ label() | translate | async }}</ax-label>
+      <div class="ax-flex ax-gap-1 ax-items-center">
+        <ax-label>{{ label() | translate | async }}</ax-label>
+        @if (hintAsIcon()) {
+          <i class="fa-regular fa-circle-info ax-text-sm ax-opacity-75" aria-hidden="true"></i>
+        }
+      </div>
       @for (node of children(); track $index) {
         <ng-container
           axp-widget-designer-renderer
@@ -27336,6 +27640,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       } @empty {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
+      @if (hintAsNote()) {
+        <p class="ax-text-xs ax-mt-1 ax-font-normal ax-opacity-75">
+          {{ hint() | translate | async }}
+        </p>
+      }
     </ax-form-field>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27366,14 +27675,37 @@ var formFieldWidgetDesigner_component = /*#__PURE__*/Object.freeze({
     AXPFormFieldWidgetDesignerComponent: AXPFormFieldWidgetDesignerComponent
 });
 
+const AXP_FORM_FIELD_HINT_PROPERTY = createStringProperty({
+    name: 'hint',
+    title: 'Hint',
+    path: 'options.hint',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_FORM_FIELD_HINT_DISPLAY_MODE_PROPERTY = createSelectProperty({
+    name: 'hintDisplayMode',
+    title: 'Hint display',
+    path: 'options.hintDisplayMode',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: 'note',
+    dataSource: [
+        { id: 'note', title: 'Note (below field)' },
+        { id: 'icon', title: 'Icon (tooltip)' },
+    ],
+});
 const AXPFormFieldWidget = {
     name: 'form-field',
-    title: 'Form Field',
+    title: '@platform-layout-widgets:widgets.form-field.title',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_UTILITY,
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'container',
     icon: 'fa-light fa-pen-field',
-    properties: [AXP_NAME_PROPERTY, cloneProperty(AXP_LABEL_PROPERTY, { schema: { defaultValue: 'Sample Label' } })],
+    properties: [
+        AXP_NAME_PROPERTY,
+        cloneProperty(AXP_LABEL_PROPERTY, { schema: { defaultValue: 'Sample Label' } }),
+        AXP_FORM_FIELD_HINT_PROPERTY,
+        AXP_FORM_FIELD_HINT_DISPLAY_MODE_PROPERTY,
+    ],
     components: {
         view: {
             component: () => Promise.resolve().then(function () { return formFieldWidgetView_component; }).then((c) => c.AXPFormFieldWidgetViewComponent),
@@ -27864,9 +28196,10 @@ var gridWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGridWidget = {
     name: 'grid-layout',
-    title: 'Grid Layout',
+    title: '@platform-layout-widgets:widgets.grid-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-grid',
     properties: [
@@ -28103,9 +28436,10 @@ var gridItemWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPGridItemWidget = {
     name: 'grid-item-layout',
-    title: 'Grid Item',
+    title: '@platform-layout-widgets:widgets.grid-item-layout.title',
     type: 'container',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_GRID,
     // groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-objects-column',
     properties: [
@@ -28132,10 +28466,11 @@ const AXPGridItemWidget = {
 
 const AXPAlertBoxWidget = {
     name: 'alert-box-layout',
-    title: 'Alert Box',
-    description: 'Displays an alert with title and description using ax-alert',
+    title: '@platform-layout-widgets:widgets.alert-box-layout.title',
+    description: '@platform-layout-widgets:widgets.alert-box-layout.description',
     icon: 'fa-light fa-circle-info',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for notices: success, warning, danger, or info callouts with title and body. Prefer over plain text when severity or emphasis should be visible.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -28378,9 +28713,10 @@ var iconWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 const AXPIconWidget = {
     name: 'icon',
-    title: 'Icon',
+    title: '@platform-layout-widgets:widgets.icon.title',
     type: 'view',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_UTILITY,
     // groups: [AXPWidgetGroupEnum.FormElement],
     icon: 'fa-light fa-icons',
     properties: [AXP_NAME_PROPERTY],
@@ -28586,10 +28922,11 @@ var panelWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPPanelWidget = {
     name: 'panel-layout',
     type: 'container',
-    title: 'Panel Layout',
-    description: 'Organizes content in a collapsible panel',
+    title: '@platform-layout-widgets:widgets.panel-layout.title',
+    description: '@platform-layout-widgets:widgets.panel-layout.description',
     icon: 'fa-light fa-rectangle-list',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     groups: [AXPWidgetGroupEnum.FormElement],
     properties: [
         AXP_NAME_PROPERTY,
@@ -28843,13 +29180,14 @@ var tabsetWidgetDesigner_component = /*#__PURE__*/Object.freeze({
 
 const AXPTabSetWidget = {
     name: 'tabset-layout',
-    title: 'TabSet Layout',
-    description: 'A tab set layout is a widget that displays a tab set',
+    title: '@platform-layout-widgets:widgets.tabset-layout.title',
+    description: '@platform-layout-widgets:widgets.tabset-layout.description',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_TABS,
     aiDescription: 'Use to split content into labeled tabs. Pair with tabset-item children; each tab should map to one logical section of the answer.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -28930,13 +29268,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 const AXPTabSetItemWidget = {
     name: 'tabset-item',
-    title: 'TabSet Item',
-    description: 'A tab set item is a widget that displays a tab set item',
+    title: '@platform-layout-widgets:widgets.tabset-item.title',
+    description: '@platform-layout-widgets:widgets.tabset-item.description',
     type: 'view',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_TABS,
     aiDescription: 'Single tab panel inside a tabset. Use one item per tab label; put the tab content in the slot or bound child widgets.',
     groups: [AXPWidgetGroupEnum.FormElement],
-    icon: 'fa-solid fa-square',
+    icon: 'fa-light fa-square',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         view: {
@@ -28977,10 +29316,11 @@ var textBlockWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTextBlockWidget = {
     name: 'text-block-layout',
-    title: 'Text Block',
-    description: 'Displays text blocks',
+    title: '@platform-layout-widgets:widgets.text-block-layout.title',
+    description: '@platform-layout-widgets:widgets.text-block-layout.description',
     icon: 'fa-light fa-text',
-    categories: [AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_AI_CATEGORY],
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_SURFACES,
     aiDescription: 'Use for rich text blocks (options.content) when the answer needs structured prose beyond a single paragraph; supports inline formatting from the rich-text renderer.',
     groups: [AXPWidgetGroupEnum.FormElement],
     type: 'view',
@@ -29457,6 +29797,7 @@ var triggerExpressionEditorPopup_component = /*#__PURE__*/Object.freeze({
     AXPTriggerExpressionEditorPopupComponent: AXPTriggerExpressionEditorPopupComponent
 });
 
+//#region ----   Imports   ----
 //#endregion
 //#region ----   Widget Lists (single source of truth)   ----
 /**
@@ -29573,6 +29914,7 @@ const EXTENDED_WIDGETS = [
             name: 'select-filter',
             title: 'Select Filter',
             categories: AXP_WIDGETS_EDITOR_CATEGORY,
+            groups: [AXPWidgetGroupEnum.BaseWidget],
             type: 'filter',
             components: {},
             options: {
@@ -29676,7 +30018,7 @@ function toSerializableWidget(config) {
         ...(config.icon != null ? { icon: config.icon } : {}),
         ...(config.description != null ? { description: resolveWidgetLabelForAi(config.description) || undefined } : {}),
         ...(config.aiDescription != null && config.aiDescription !== '' ? { aiDescription: config.aiDescription } : {}),
-        categories: normalizeWidgetCategories(config.categories).map((c) => ({
+        categories: normalizeDefinitionCategories(config.categories).map((c) => ({
             name: c.name,
             title: resolveWidgetLabelForAi(c.title) || c.name,
             order: c.order,
@@ -29689,7 +30031,6 @@ function toSerializableWidget(config) {
         ...(config.designer != null ? { designer: config.designer } : {}),
         ...(config.options != null ? { options: config.options } : {}),
         ...(config.defaultFilterWidgetName != null ? { defaultFilterWidgetName: config.defaultFilterWidgetName } : {}),
-        ...(config.aiCatalog != null ? { aiCatalog: config.aiCatalog } : {}),
     };
 }
 function buildUsage(config) {
@@ -29712,7 +30053,7 @@ function buildUsage(config) {
 //#endregion
 //#region ---- Query ----
 /**
- * Read-only catalog of widgets suitable for AI structured rendering (Widgets:GetForAI).
+ * Read-only full widget registry (Widgets:GetForAI). Lists every registered widget.
  */
 class AXPGetWidgetsForAIQuery {
     constructor() {
@@ -29721,16 +30062,13 @@ class AXPGetWidgetsForAIQuery {
     async fetch(input) {
         const name = input?.name?.trim();
         if (!name) {
-            const list = this.registry
-                .all()
-                .filter((w) => isWidgetAiCatalogIncluded(w))
-                .map((w) => ({
+            const list = this.registry.all().map((w) => ({
                 name: String(w.name),
                 title: resolveWidgetLabelForAi(w.title) || String(w.name),
                 ...(w.description != null ? { description: resolveWidgetLabelForAi(w.description) || undefined } : {}),
                 ...(w.aiDescription != null && w.aiDescription !== '' ? { aiDescription: w.aiDescription } : {}),
                 type: w.type,
-                categories: normalizeWidgetCategories(w.categories).map((c) => ({
+                categories: normalizeDefinitionCategories(w.categories).map((c) => ({
                     name: c.name,
                     title: resolveWidgetLabelForAi(c.title) || c.name,
                     order: c.order,
@@ -29740,12 +30078,6 @@ class AXPGetWidgetsForAIQuery {
         }
         try {
             const config = this.registry.resolve(name);
-            if (!isWidgetAiCatalogIncluded(config)) {
-                return {
-                    success: false,
-                    error: `Widget "${name}" is not available for the AI widget catalog.`,
-                };
-            }
             return {
                 success: true,
                 detail: toSerializableWidget(config),