@praxisui/list 8.0.0-beta.0 → 8.0.0-beta.11

package/fesm2022/praxisui-list.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Input, ChangeDetectionStrategy, Component, LOCALE_ID, CSP_NONCE, EventEmitter, Output, Optional, Inject, ChangeDetectorRef, isDevMode, booleanAttribute, ENVIRONMENT_INITIALIZER, signal, computed } from '@angular/core';
+import { inject, Injectable, Input, ChangeDetectionStrategy, Component, LOCALE_ID, CSP_NONCE, EventEmitter, Output, Optional, SkipSelf, Inject, ChangeDetectorRef, isDevMode, booleanAttribute, ENVIRONMENT_INITIALIZER, signal, computed } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import * as i1 from '@angular/common';
 import { formatDate, CommonModule } from '@angular/common';
@@ -7,7 +7,7 @@ import * as i3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { resolveValuePresentation, LoggerService, GenericCrudService, toTitleCase, PraxisIconDirective, providePraxisI18n, PraxisI18nService, IconPickerService, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, SurfaceOpenActionEditorComponent, providePraxisI18nConfig, SURFACE_OPEN_I18N_CONFIG, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, PraxisJsonLogicService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL, LocalStorageAsyncAdapter, LocalStorageConfigService } from '@praxisui/core';
+import { resolveValuePresentation, LoggerService, GenericCrudService, toTitleCase, PraxisIconDirective, providePraxisI18n, PraxisI18nService, IconPickerService, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, SurfaceOpenActionEditorComponent, PRAXIS_I18N_CONFIG, providePraxisI18nConfig, SURFACE_OPEN_I18N_CONFIG, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, PraxisJsonLogicService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL, LocalStorageAsyncAdapter, LocalStorageConfigService } from '@praxisui/core';
 import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDividerModule } from '@angular/material/divider';
@@ -469,10 +469,9 @@ class ListDataService {
                         }
                         this.loading$.next(true);
                         const obs = this.crud.filter(query || {}, req).pipe(map((page) => {
-                            const content = (page?.content ?? page ?? []);
-                            const total = typeof page?.totalElements === 'number'
-                                ? page.totalElements
-                                : content.length;
+                            const resolvedPage = unwrapApiEnvelope(page);
+                            const content = extractPageContent(resolvedPage);
+                            const total = extractPageTotal(resolvedPage, content.length);
                             this.total$.next(total);
                             return content;
                         }), 
@@ -480,7 +479,7 @@ class ListDataService {
                         catchError((err) => {
                             this.warnFilterFallbackOnce(resourcePath, err);
                             return this.crud.getAll().pipe(map((arr) => {
-                                const content = arr || [];
+                                const content = extractPageContent(unwrapApiEnvelope(arr));
                                 this.total$.next(content.length);
                                 return content;
                             }));
@@ -601,6 +600,16 @@ class ListDataService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListDataService, decorators: [{
             type: Injectable
         }] });
+function unwrapApiEnvelope(page) {
+    return page?.data ?? page;
+}
+function extractPageContent(page) {
+    const content = page?.content ?? page ?? [];
+    return Array.isArray(content) ? content : [];
+}
+function extractPageTotal(page, fallback) {
+    return typeof page?.totalElements === 'number' ? page.totalElements : fallback;
+}
 function stableSerialize$1(value) {
     if (value === null || value === undefined)
         return String(value);
@@ -2037,21 +2046,22 @@ function normalizeListActionPayloads(actions) {
         if (!action || typeof action !== 'object')
             return action;
         const next = cloneJson(action);
-        if (typeof next.globalPayload === 'string') {
-            const trimmed = next.globalPayload.trim();
+        const globalAction = next.globalAction;
+        if (globalAction && typeof globalAction.payload === 'string') {
+            const trimmed = globalAction.payload.trim();
             if (!trimmed) {
-                next.globalPayload = undefined;
+                globalAction.payload = undefined;
             }
             else if (looksLikeJsonPayload(trimmed)) {
                 try {
-                    next.globalPayload = JSON.parse(trimmed);
+                    globalAction.payload = JSON.parse(trimmed);
                 }
                 catch {
-                    next.globalPayload = trimmed;
+                    globalAction.payload = trimmed;
                 }
             }
             else {
-                next.globalPayload = trimmed;
+                globalAction.payload = trimmed;
             }
         }
         next.placement = oneOf(next.placement, ACTION_PLACEMENTS, undefined);
@@ -2978,10 +2988,7 @@ function readBoolean(value) {
     return undefined;
 }
 function looksLikeJsonPayload(value) {
-    return (value.startsWith('{') ||
-        value.startsWith('[') ||
-        value.endsWith('}') ||
-        value.endsWith(']'));
+    return value.startsWith('{') || value.startsWith('[');
 }
 function isAcceptedImageUrl(value) {
     return ((value.startsWith('${') && value.endsWith('}')) ||
@@ -3366,7 +3373,7 @@ const PRAXIS_LIST_EN_US = {
     'Global action (Praxis)': 'Global action (Praxis)',
     '-- Select --': '-- Select --',
     'No global action registered.': 'No global action registered.',
-    'Select to add with a global `command`.': 'Select to add with a global `command`.',
+    'Select to add with a structured global action.': 'Select to add with a structured global action.',
     'Action type': 'Action type',
     Icon: 'Icon',
     Button: 'Button',
@@ -3400,7 +3407,7 @@ const PRAXIS_LIST_EN_US = {
     'Emit local event too': 'Emit local event too',
     JSON: 'JSON',
     ID: 'ID',
-    'Command (global)': 'Command (global)',
+    'Global action': 'Global action',
     Catalog: 'Catalog',
     Danger: 'Danger',
     Warning: 'Warning',
@@ -3591,7 +3598,7 @@ const PRAXIS_LIST_PT_BR = {
     'Global action (Praxis)': 'Ação global (Praxis)',
     '-- Select --': '-- Selecionar --',
     'No global action registered.': 'Nenhuma ação global registrada.',
-    'Select to add with a global `command`.': 'Selecione para adicionar com `command` global.',
+    'Select to add with a structured global action.': 'Selecione para adicionar com uma ação global estruturada.',
     'Action type': 'Tipo de ação',
     Icon: 'Ícone',
     Button: 'Botão',
@@ -3625,7 +3632,7 @@ const PRAXIS_LIST_PT_BR = {
     'Emit local event too': 'Emitir evento local também',
     JSON: 'JSON',
     ID: 'ID',
-    'Command (global)': 'Comando (global)',
+    'Global action': 'Ação global',
     Catalog: 'Catálogo',
     Danger: 'Perigo',
     Warning: 'Aviso',
@@ -4502,45 +4509,31 @@ class PraxisListConfigEditor {
         }
         this.onActionsChanged();
     }
-    isGlobalPayloadInvalid(payload) {
-        if (typeof payload !== 'string')
-            return false;
-        const trimmed = payload.trim();
-        if (!trimmed)
-            return false;
-        // Only validate if it looks like JSON object/array
-        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
-            try {
-                JSON.parse(trimmed);
-                return false;
-            }
-            catch {
-                return true;
-            }
-        }
-        return false;
-    }
-    applyGlobalPayloadExample(action) {
-        if (!action?.command)
+    applyGlobalActionPayloadExample(action) {
+        const cmd = this.getGlobalActionId(action);
+        if (!cmd)
             return;
-        const cmd = action.command.replace(/^global[:.]/, '').trim();
         const entry = this.globalActionCatalog.find((e) => e.id === cmd);
         if (entry?.payloadSchema?.example) {
-            action.globalPayload = JSON.stringify(entry.payloadSchema.example, null, 2);
+            action.globalAction = {
+                ...(action.globalAction || {}),
+                actionId: cmd,
+                payload: entry.payloadSchema.example,
+            };
             this.onActionsChanged();
         }
     }
-    globalPayloadExampleHint(action) {
-        if (!action?.command)
+    globalActionPayloadExampleHint(action) {
+        const cmd = this.getGlobalActionId(action);
+        if (!cmd)
             return '';
-        const cmd = action.command.replace(/^global[:.]/, '').trim();
         const entry = this.globalActionCatalog.find((e) => e.id === cmd);
         return entry?.payloadSchema?.example ? this.tx('Example available') : '';
     }
-    globalPayloadSchemaTooltip(action) {
-        if (!action?.command)
+    globalActionPayloadSchemaTooltip(action) {
+        const cmd = this.getGlobalActionId(action);
+        if (!cmd)
             return this.tx('No schema available.');
-        const cmd = action.command.replace(/^global[:.]/, '').trim();
         const entry = this.globalActionCatalog.find((e) => e.id === cmd);
         const schema = entry?.payloadSchema;
         if (!schema)
@@ -4570,27 +4563,79 @@ class PraxisListConfigEditor {
         }
         return lines.join('\n');
     }
+    onActionGlobalActionIdChange(action, actionId) {
+        const id = String(actionId || '').trim();
+        if (!id) {
+            delete action.globalAction;
+            this.onActionsChanged();
+            return;
+        }
+        action.globalAction = {
+            ...(action.globalAction || {}),
+            actionId: id,
+        };
+        this.onActionsChanged();
+    }
+    getGlobalActionPayloadText(action) {
+        const payload = action?.globalAction?.payload;
+        if (payload === undefined || payload === null)
+            return '';
+        if (typeof payload === 'string')
+            return payload;
+        try {
+            return JSON.stringify(payload, null, 2);
+        }
+        catch {
+            return '';
+        }
+    }
+    onGlobalActionPayloadTextChange(action, value) {
+        const text = String(value || '').trim();
+        if (!action.globalAction?.actionId)
+            return;
+        if (!text) {
+            action.globalAction = { ...action.globalAction, payload: undefined };
+            this.onActionsChanged();
+            return;
+        }
+        action.globalAction = {
+            ...action.globalAction,
+            payload: this.parseGlobalActionPayloadText(text),
+        };
+        this.onActionsChanged();
+    }
+    isGlobalActionPayloadInvalid(action) {
+        const payload = action?.globalAction?.payload;
+        if (typeof payload !== 'string')
+            return false;
+        const trimmed = payload.trim();
+        if (!trimmed)
+            return false;
+        if (!this.looksLikeJsonPayload(trimmed))
+            return false;
+        try {
+            JSON.parse(trimmed);
+            return false;
+        }
+        catch {
+            return true;
+        }
+    }
     isSurfaceOpenCommand(action) {
         return this.getGlobalActionSchema(action)?.editorMode === 'surface-open';
     }
-    getSurfaceOpenGlobalPayload(action) {
-        const raw = String(action?.globalPayload || '').trim();
-        if (raw) {
-            try {
-                const parsed = JSON.parse(raw);
-                if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-                    return this.normalizeSurfaceOpenPayload(parsed);
-                }
-            }
-            catch {
-                // keep default payload while authoring invalid JSON elsewhere
-            }
+    getSurfaceOpenGlobalActionPayload(action) {
+        const payload = action?.globalAction?.payload;
+        if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+            return this.normalizeSurfaceOpenPayload(payload);
         }
         return this.normalizeSurfaceOpenPayload(undefined);
     }
-    onSurfaceOpenGlobalPayloadChange(action, payload) {
-        action.command = 'global:surface.open';
-        action.globalPayload = JSON.stringify(this.normalizeSurfaceOpenPayload(payload));
+    onSurfaceOpenGlobalActionPayloadChange(action, payload) {
+        action.globalAction = {
+            actionId: 'surface.open',
+            payload: this.normalizeSurfaceOpenPayload(payload),
+        };
         this.onActionsChanged();
     }
     onGlobalActionSelected(id) {
@@ -4602,9 +4647,6 @@ class PraxisListConfigEditor {
     }
     addGlobalActionFromCatalog(action) {
         const payload = action.payloadSchema?.example;
-        const payloadText = payload != null && typeof payload === 'object'
-            ? JSON.stringify(payload, null, 2)
-            : payload;
         this.working = produce(this.working, (draft) => {
             draft.actions = draft.actions || [];
             draft.actions.push({
@@ -4613,8 +4655,9 @@ class PraxisListConfigEditor {
                 label: action.label || action.id,
                 color: undefined,
                 kind: 'icon',
-                command: `global:${action.id}`,
-                globalPayload: payloadText,
+                globalAction: payload !== undefined
+                    ? { actionId: action.id, payload }
+                    : { actionId: action.id },
             });
         });
         this.syncActionShowIfDrafts();
@@ -5679,8 +5722,25 @@ class PraxisListConfigEditor {
         return entry?.description || '';
     }
     getGlobalActionSchema(action) {
-        const id = String(action?.command || '').replace(/^global[:.]/, '').trim();
-        return getGlobalActionUiSchema(id);
+        return getGlobalActionUiSchema(this.getGlobalActionId(action));
+    }
+    getGlobalActionId(action) {
+        return String(action?.globalAction?.actionId || '').trim();
+    }
+    parseGlobalActionPayloadText(text) {
+        if (!this.looksLikeJsonPayload(text))
+            return text;
+        try {
+            return JSON.parse(text);
+        }
+        catch {
+            return text;
+        }
+    }
+    looksLikeJsonPayload(text) {
+        const value = String(text || '').trim();
+        return ((value.startsWith('{') && value.endsWith('}')) ||
+            (value.startsWith('[') && value.endsWith(']')));
     }
     normalizeSurfaceOpenPayload(payload) {
         return {
@@ -5878,13 +5938,31 @@ class PraxisListConfigEditor {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListConfigEditor, isStandalone: true, selector: "praxis-list-config-editor", inputs: { config: "config", listId: "listId" }, providers: [
+            {
+                provide: PRAXIS_I18N_CONFIG,
+                multi: true,
+                deps: [[new Optional(), new SkipSelf(), PraxisI18nService]],
+                useFactory: (parent) => ({
+                    locale: parent?.getLocale(),
+                    fallbackLocale: parent?.getFallbackLocale(),
+                }),
+            },
             providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
             providePraxisListI18n(),
-        ], ngImport: i0, template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('JSON')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\"\n      >\n      </praxis-list-json-config-editor>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || \"bolt\" }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a global `command`.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Command (global)') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>{{ actionVisibilityLabel() }}</mat-label>\n          <textarea\n            matInput\n            rows=\"3\"\n            [ngModel]=\"actionShowIfModel(i)\"\n            (ngModelChange)=\"onActionShowIfChanged(i, a, $event)\"\n          ></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Layout')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel') }}</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <ng-template matTabContent>\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type === 'gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var( --md-sys-color-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --md-sys-color-outline );--mdc-outlined-text-field-focus-outline-color: var( --md-sys-color-primary );--mdc-outlined-text-field-error-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-focus-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-hover-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-label-text-color: var( --md-sys-color-on-surface-variant );--mdc-outlined-text-field-input-text-color: var( --md-sys-color-on-surface );--mdc-outlined-text-field-supporting-text-color: var( --md-sys-color-on-surface-variant )}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$3.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i3$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i10.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }, { kind: "component", type: PraxisMetaEditorTextComponent, selector: "praxis-meta-editor-text", inputs: ["model", "setPipe"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorChipComponent, selector: "praxis-meta-editor-chip", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorRatingComponent, selector: "praxis-meta-editor-rating", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorCurrencyComponent, selector: "praxis-meta-editor-currency", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorDateComponent, selector: "praxis-meta-editor-date", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorIconComponent, selector: "praxis-meta-editor-icon", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorImageComponent, selector: "praxis-meta-editor-image", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisListJsonConfigEditorComponent, selector: "praxis-list-json-config-editor", inputs: ["document"], outputs: ["documentChange", "validationChange", "editorEvent"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
+        ], ngImport: i0, template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('JSON')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\"\n      >\n      </praxis-list-json-config-editor>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || \"bolt\" }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a structured global action.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action') }}</mat-label>\n          <mat-select\n            [ngModel]=\"getGlobalActionId(a)\"\n            (ngModelChange)=\"onActionGlobalActionIdChange(a, $event)\"\n          >\n            <mat-option value=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let action of globalActionCatalog\" [value]=\"action.id\">\n              {{ action.label || action.id }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>{{ actionVisibilityLabel() }}</mat-label>\n          <textarea\n            matInput\n            rows=\"3\"\n            [ngModel]=\"actionShowIfModel(i)\"\n            (ngModelChange)=\"onActionShowIfChanged(i, a, $event)\"\n          ></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.globalAction?.actionId\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalActionPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalActionPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalActionPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalActionPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [ngModel]=\"getGlobalActionPayloadText(a)\"\n              (ngModelChange)=\"onGlobalActionPayloadTextChange(a, $event)\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalActionPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalActionPayloadInvalid(a)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalActionPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalActionPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Layout')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel') }}</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <ng-template matTabContent>\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type === 'gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var( --md-sys-color-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --md-sys-color-outline );--mdc-outlined-text-field-focus-outline-color: var( --md-sys-color-primary );--mdc-outlined-text-field-error-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-focus-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-hover-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-label-text-color: var( --md-sys-color-on-surface-variant );--mdc-outlined-text-field-input-text-color: var( --md-sys-color-on-surface );--mdc-outlined-text-field-supporting-text-color: var( --md-sys-color-on-surface-variant )}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$3.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i3$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i10.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }, { kind: "component", type: PraxisMetaEditorTextComponent, selector: "praxis-meta-editor-text", inputs: ["model", "setPipe"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorChipComponent, selector: "praxis-meta-editor-chip", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorRatingComponent, selector: "praxis-meta-editor-rating", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorCurrencyComponent, selector: "praxis-meta-editor-currency", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorDateComponent, selector: "praxis-meta-editor-date", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorIconComponent, selector: "praxis-meta-editor-icon", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorImageComponent, selector: "praxis-meta-editor-image", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisListJsonConfigEditorComponent, selector: "praxis-list-json-config-editor", inputs: ["document"], outputs: ["documentChange", "validationChange", "editorEvent"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListConfigEditor, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-list-config-editor', standalone: true, providers: [
+                        {
+                            provide: PRAXIS_I18N_CONFIG,
+                            multi: true,
+                            deps: [[new Optional(), new SkipSelf(), PraxisI18nService]],
+                            useFactory: (parent) => ({
+                                locale: parent?.getLocale(),
+                                fallbackLocale: parent?.getFallbackLocale(),
+                            }),
+                        },
                         providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
                         providePraxisListI18n(),
                     ], imports: [
@@ -5915,7 +5993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         PraxisListJsonConfigEditorComponent,
                         PdxColorPickerComponent,
                         SurfaceOpenActionEditorComponent,
-                    ], template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('JSON')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\"\n      >\n      </praxis-list-json-config-editor>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || \"bolt\" }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a global `command`.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Command (global)') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>{{ actionVisibilityLabel() }}</mat-label>\n          <textarea\n            matInput\n            rows=\"3\"\n            [ngModel]=\"actionShowIfModel(i)\"\n            (ngModelChange)=\"onActionShowIfChanged(i, a, $event)\"\n          ></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Layout')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel') }}</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <ng-template matTabContent>\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type === 'gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var( --md-sys-color-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --md-sys-color-outline );--mdc-outlined-text-field-focus-outline-color: var( --md-sys-color-primary );--mdc-outlined-text-field-error-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-focus-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-hover-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-label-text-color: var( --md-sys-color-on-surface-variant );--mdc-outlined-text-field-input-text-color: var( --md-sys-color-on-surface );--mdc-outlined-text-field-supporting-text-color: var( --md-sys-color-on-surface-variant )}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('JSON')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\"\n      >\n      </praxis-list-json-config-editor>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || \"bolt\" }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a structured global action.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action') }}</mat-label>\n          <mat-select\n            [ngModel]=\"getGlobalActionId(a)\"\n            (ngModelChange)=\"onActionGlobalActionIdChange(a, $event)\"\n          >\n            <mat-option value=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let action of globalActionCatalog\" [value]=\"action.id\">\n              {{ action.label || action.id }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>{{ actionVisibilityLabel() }}</mat-label>\n          <textarea\n            matInput\n            rows=\"3\"\n            [ngModel]=\"actionShowIfModel(i)\"\n            (ngModelChange)=\"onActionShowIfChanged(i, a, $event)\"\n          ></textarea>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.globalAction?.actionId\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalActionPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalActionPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalActionPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalActionPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [ngModel]=\"getGlobalActionPayloadText(a)\"\n              (ngModelChange)=\"onGlobalActionPayloadTextChange(a, $event)\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalActionPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalActionPayloadInvalid(a)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalActionPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalActionPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Layout')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel') }}</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\n              }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"chip\") {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground.bind(this)\"\n                    [isCustomColor]=\"isCustomColor.bind(this)\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-chip>\n                }\n                @case (\"rating\") {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-rating>\n                }\n                @case (\"icon\") {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <ng-template matTabContent>\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\n    <ng-template matTabContent>\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type === 'gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre\n          >\n        </div>\n      </div>\n    </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var( --md-sys-color-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --md-sys-color-outline );--mdc-outlined-text-field-focus-outline-color: var( --md-sys-color-primary );--mdc-outlined-text-field-error-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-focus-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-error-hover-outline-color: var( --md-sys-color-error );--mdc-outlined-text-field-label-text-color: var( --md-sys-color-on-surface-variant );--mdc-outlined-text-field-input-text-color: var( --md-sys-color-on-surface );--mdc-outlined-text-field-supporting-text-color: var( --md-sys-color-on-surface-variant )}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5938,6 +6016,25 @@ const ENUMS = {
     layoutLines: [1, 2, 3],
     layoutDividers: ['none', 'between', 'all'],
     layoutModel: ['standard', 'media', 'hotel'],
+    rowLayoutType: ['grid', 'flex'],
+    rowLayoutSlot: [
+        'leading',
+        'primary',
+        'secondary',
+        'meta',
+        'trailing',
+        'identity',
+        'balance',
+        'limit',
+        'risk',
+        'alerts',
+        'owner',
+        'actions',
+        'expand',
+    ],
+    rowLayoutAlign: ['start', 'center', 'end', 'stretch'],
+    rowLayoutColumnAlign: ['start', 'center', 'end'],
+    rowLayoutJustify: ['start', 'center', 'end', 'stretch'],
     selectionMode: ['none', 'single', 'multiple'],
     selectionReturn: ['value', 'item', 'id'],
     skinType: [
@@ -5960,6 +6057,9 @@ const ENUMS = {
         'date',
         'html',
         'slot',
+        'metric',
+        'compose',
+        'component',
     ],
     templateVariant: ['filled', 'outlined'],
     metaPlacement: ['side', 'line'],
@@ -5968,6 +6068,23 @@ const ENUMS = {
     actionKind: ['icon', 'button'],
     actionButtonVariant: ['stroked', 'raised', 'flat'],
     actionEmitPayload: ['item', 'id', 'value'],
+    actionPlacement: ['actions', 'trailing'],
+    confirmationType: ['danger', 'warning', 'info'],
+    expandTrigger: ['row', 'icon', 'row+icon'],
+    expandMode: ['single', 'multiple'],
+    expandPlacement: ['expand', 'trailing'],
+    expansionSectionType: ['info-list', 'chip-list', 'timeline', 'key-value', 'metadata', 'component'],
+    expansionDataSourceMode: ['inline', 'resource', 'resourcePath'],
+    expansionFallbackMode: ['none', 'inline', 'resource'],
+    expansionRenderShell: ['attached', 'detached', 'modal'],
+    expansionColumns: [1, 2, 3],
+    metricLayout: ['value-only', 'value+caption', 'icon+value+caption', 'stacked-center'],
+    metricAlign: ['start', 'center', 'end'],
+    metricCaptionPosition: ['below-value', 'below-progress'],
+    metricProgressMode: ['determinate', 'indeterminate'],
+    metricIconPosition: ['left', 'right', 'top'],
+    composeDirection: ['row', 'column'],
+    composeOrientation: ['horizontal', 'vertical'],
 };
 function templateCaps(slot, label) {
     const base = `templating.${slot}`;
@@ -6079,6 +6196,80 @@ function templateCaps(slot, label) {
             valueKind: 'string',
             description: `Rating color (theme/M3/custom).`,
         },
+        {
+            path: `${base}.props.metric`,
+            category: 'templating',
+            valueKind: 'object',
+            description: `Metric props for ${label} (type=metric).`,
+        },
+        {
+            path: `${base}.props.metric.valueExpr`,
+            category: 'templating',
+            valueKind: 'expression',
+            description: `Metric value expression for ${label}.`,
+        },
+        {
+            path: `${base}.props.metric.caption`,
+            category: 'templating',
+            valueKind: 'string',
+            description: `Metric caption for ${label}.`,
+        },
+        {
+            path: `${base}.props.metric.layout`,
+            category: 'templating',
+            valueKind: 'enum',
+            allowedValues: ENUMS.metricLayout,
+            description: `Metric layout for ${label}.`,
+        },
+        {
+            path: `${base}.props.metric.progress`,
+            category: 'templating',
+            valueKind: 'object',
+            description: `Metric progress config for ${label}.`,
+        },
+        {
+            path: `${base}.props.metric.progress.valueExpr`,
+            category: 'templating',
+            valueKind: 'expression',
+            description: `Metric progress value expression for ${label}.`,
+        },
+        {
+            path: `${base}.props.compose`,
+            category: 'templating',
+            valueKind: 'object',
+            description: `Compose props for ${label} (type=compose).`,
+        },
+        {
+            path: `${base}.props.compose.items`,
+            category: 'templating',
+            valueKind: 'array',
+            description: `Compose child items for ${label}.`,
+        },
+        {
+            path: `${base}.props.compose.direction`,
+            category: 'templating',
+            valueKind: 'enum',
+            allowedValues: ENUMS.composeDirection,
+            description: `Compose direction for ${label}.`,
+        },
+        {
+            path: `${base}.props.component`,
+            category: 'templating',
+            valueKind: 'object',
+            description: `Runtime component props for ${label} (type=component).`,
+        },
+        {
+            path: `${base}.props.component.id`,
+            category: 'templating',
+            valueKind: 'string',
+            description: `Runtime component id for ${label}.`,
+        },
+        {
+            path: `${base}.props.component.inputs`,
+            category: 'templating',
+            valueKind: 'object',
+            description: `Runtime component input map for ${label}.`,
+        },
     ];
 }
 const LIST_AI_CAPABILITIES = {
@@ -6215,6 +6406,108 @@ const LIST_AI_CAPABILITIES = {
             valueKind: 'number',
             description: 'Remote page size.',
         },
+        {
+            path: 'layout.rowLayout',
+            category: 'layout',
+            valueKind: 'object',
+            description: 'Row layout grid/flex configuration for list variant.',
+        },
+        {
+            path: 'layout.rowLayout.type',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutType,
+            description: 'Row layout rendering type.',
+        },
+        {
+            path: 'layout.rowLayout.columns',
+            category: 'layout',
+            valueKind: 'array',
+            description: 'Stable row layout columns.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].slot',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutSlot,
+            description: 'Runtime-supported row layout slot.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].width',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'CSS width for a row layout column.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].minWidth',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Minimum CSS width for a row layout column.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].maxWidth',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Maximum CSS width for a row layout column.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].align',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutColumnAlign,
+            description: 'Column content alignment.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].justify',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutJustify,
+            description: 'Column grid justification.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].class',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'CSS class for a row layout column.',
+        },
+        {
+            path: 'layout.rowLayout.columns[].style',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Inline style for a row layout column.',
+        },
+        {
+            path: 'layout.rowLayout.gap',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Gap between row layout columns.',
+        },
+        {
+            path: 'layout.rowLayout.align',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutAlign,
+            description: 'Vertical alignment for the row layout.',
+        },
+        {
+            path: 'layout.rowLayout.itemAlignY',
+            category: 'layout',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutAlign,
+            description: 'Alias for row vertical alignment.',
+        },
+        {
+            path: 'layout.rowLayout.class',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'CSS class for row layout content.',
+        },
+        {
+            path: 'layout.rowLayout.style',
+            category: 'layout',
+            valueKind: 'string',
+            description: 'Inline style for row layout content.',
+        },
         {
             path: 'skin',
             category: 'skin',
@@ -6326,6 +6619,39 @@ const LIST_AI_CAPABILITIES = {
             allowedValues: ENUMS.selectionReturn,
             description: 'Selection return payload.',
         },
+        {
+            path: 'interaction',
+            category: 'interaction',
+            valueKind: 'object',
+            description: 'Expandable row interaction settings.',
+        },
+        {
+            path: 'interaction.expandable',
+            category: 'interaction',
+            valueKind: 'boolean',
+            description: 'Enable inline row expansion.',
+        },
+        {
+            path: 'interaction.expandTrigger',
+            category: 'interaction',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expandTrigger,
+            description: 'How expansion is triggered.',
+        },
+        {
+            path: 'interaction.expandMode',
+            category: 'interaction',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expandMode,
+            description: 'Whether one or many rows may be expanded.',
+        },
+        {
+            path: 'interaction.expandPlacement',
+            category: 'interaction',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expandPlacement,
+            description: 'Where the expansion control is rendered.',
+        },
         {
             path: 'templating',
             category: 'templating',
@@ -6337,6 +6663,12 @@ const LIST_AI_CAPABILITIES = {
         ...templateCaps('secondary', 'secondary'),
         ...templateCaps('meta', 'meta'),
         ...templateCaps('trailing', 'trailing'),
+        ...templateCaps('identity', 'identity'),
+        ...templateCaps('balance', 'balance'),
+        ...templateCaps('limit', 'limit'),
+        ...templateCaps('risk', 'risk'),
+        ...templateCaps('alerts', 'alerts'),
+        ...templateCaps('owner', 'owner'),
         ...templateCaps('sectionHeader', 'section header'),
         ...templateCaps('emptyState', 'empty state'),
         {
@@ -6438,6 +6770,12 @@ const LIST_AI_CAPABILITIES = {
             valueKind: 'array',
             description: 'Item actions array.',
         },
+        {
+            path: 'actions[]',
+            category: 'actions',
+            valueKind: 'object',
+            description: 'Single item action entry.',
+        },
         {
             path: 'actions[].id',
             category: 'actions',
@@ -6490,70 +6828,469 @@ const LIST_AI_CAPABILITIES = {
             description: 'Action emitted payload.',
         },
         {
-            path: 'actions[].command',
+            path: 'actions[].globalAction.[actionId]',
             category: 'actions',
             valueKind: 'string',
-            description: 'Global command (ex.: "global:toast.success").',
+            description: 'Canonical global app action id (ex.: "toast.success").',
         },
         {
-            path: 'actions[].globalPayload',
+            path: 'actions[].globalAction.payload',
             category: 'actions',
             valueKind: 'object',
-            description: 'Payload for global command (JSON/template).',
+            description: 'Structured payload for the global app action (JSON/template).',
         },
         {
             path: 'actions[].emitLocal',
             category: 'actions',
             valueKind: 'boolean',
-            description: 'Emit local actionClick even when command is set.',
+            description: 'Emit local actionClick even when globalAction is set.',
         },
         {
-            path: 'ui',
-            category: 'ui',
-            valueKind: 'object',
-            description: 'Lightweight toolbar UI.',
+            path: 'actions[].showLoading',
+            category: 'actions',
+            valueKind: 'boolean',
+            description: 'Show loading state while a global action executes.',
         },
         {
-            path: 'ui.showSearch',
-            category: 'ui',
-            valueKind: 'boolean',
-            description: 'Show search input.',
+            path: 'actions[].placement',
+            category: 'actions',
+            valueKind: 'enum',
+            allowedValues: ENUMS.actionPlacement,
+            description: 'Action placement in row layout actions or trailing slot.',
         },
         {
-            path: 'ui.searchField',
-            category: 'ui',
+            path: 'actions[].confirmation',
+            category: 'actions',
+            valueKind: 'object',
+            description: 'Confirmation prompt before executing the action.',
+        },
+        {
+            path: 'actions[].confirmation.title',
+            category: 'actions',
             valueKind: 'string',
-            description: 'Search field.',
+            description: 'Confirmation title.',
         },
         {
-            path: 'ui.searchPlaceholder',
-            category: 'ui',
+            path: 'actions[].confirmation.message',
+            category: 'actions',
             valueKind: 'string',
-            description: 'Search placeholder.',
+            description: 'Confirmation message.',
         },
         {
-            path: 'ui.showSort',
-            category: 'ui',
-            valueKind: 'boolean',
-            description: 'Show sort selector.',
+            path: 'actions[].confirmation.type',
+            category: 'actions',
+            valueKind: 'enum',
+            allowedValues: ENUMS.confirmationType,
+            description: 'Confirmation severity.',
         },
         {
-            path: 'ui.sortOptions',
-            category: 'ui',
-            valueKind: 'array',
-            description: 'Sort options (string or {label,value}).',
+            path: 'rules',
+            category: 'rules',
+            valueKind: 'object',
+            description: 'Conditional list item styling and slot override rules.',
         },
         {
-            path: 'ui.sortOptions[].label',
-            category: 'ui',
-            valueKind: 'string',
-            description: 'Sort option label.',
+            path: 'rules.itemStyles',
+            category: 'rules',
+            valueKind: 'array',
+            description: 'Conditional item style rules.',
         },
         {
-            path: 'ui.sortOptions[].value',
-            category: 'ui',
+            path: 'rules.itemStyles[].id',
+            category: 'rules',
             valueKind: 'string',
-            description: 'Sort option value.',
+            description: 'Stable item style rule id.',
+        },
+        {
+            path: 'rules.itemStyles[].condition',
+            category: 'rules',
+            valueKind: 'expression',
+            description: 'Json Logic condition in row context.',
+        },
+        {
+            path: 'rules.itemStyles[].class',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'CSS class applied when the rule matches.',
+        },
+        {
+            path: 'rules.itemStyles[].style',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'Inline style applied when the rule matches.',
+        },
+        {
+            path: 'rules.itemStyles[].border',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'Border style override applied when the rule matches.',
+        },
+        {
+            path: 'rules.itemStyles[].background',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'Background style override applied when the rule matches.',
+        },
+        {
+            path: 'rules.slotOverrides',
+            category: 'rules',
+            valueKind: 'array',
+            description: 'Conditional slot template override rules.',
+        },
+        {
+            path: 'rules.slotOverrides[].id',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'Stable slot override rule id.',
+        },
+        {
+            path: 'rules.slotOverrides[].slot',
+            category: 'rules',
+            valueKind: 'enum',
+            allowedValues: ENUMS.rowLayoutSlot.filter((slot) => slot !== 'actions' && slot !== 'expand'),
+            description: 'Templating slot affected by the override.',
+        },
+        {
+            path: 'rules.slotOverrides[].condition',
+            category: 'rules',
+            valueKind: 'expression',
+            description: 'Json Logic condition in row context.',
+        },
+        {
+            path: 'rules.slotOverrides[].template',
+            category: 'rules',
+            valueKind: 'object',
+            description: 'Template override applied when the rule matches.',
+        },
+        {
+            path: 'rules.slotOverrides[].class',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'CSS class appended when the rule matches.',
+        },
+        {
+            path: 'rules.slotOverrides[].style',
+            category: 'rules',
+            valueKind: 'string',
+            description: 'Inline style appended when the rule matches.',
+        },
+        {
+            path: 'rules.slotOverrides[].hide',
+            category: 'rules',
+            valueKind: 'boolean',
+            description: 'Hide the slot when the rule matches.',
+        },
+        {
+            path: 'expansion',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Inline expansion sections and remote detail contract.',
+        },
+        {
+            path: 'expansion.sections',
+            category: 'expansion',
+            valueKind: 'array',
+            description: 'Expansion detail sections.',
+        },
+        {
+            path: 'expansion.sections[].id',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Stable expansion section id.',
+        },
+        {
+            path: 'expansion.sections[].title',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Expansion section title.',
+        },
+        {
+            path: 'expansion.sections[].type',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expansionSectionType,
+            description: 'Expansion section renderer type.',
+        },
+        {
+            path: 'expansion.sections[].itemsExpr',
+            category: 'expansion',
+            valueKind: 'expression',
+            description: 'Expression used to resolve section items from the row.',
+        },
+        {
+            path: 'expansion.sections[].emptyLabel',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Empty label for an expansion section.',
+        },
+        {
+            path: 'expansion.sections[].metadata',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Metadata rendering options for metadata expansion sections.',
+        },
+        {
+            path: 'expansion.sections[].component',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Runtime component rendering options for component expansion sections.',
+        },
+        {
+            path: 'expansion.sections[].class',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'CSS class for an expansion section.',
+        },
+        {
+            path: 'expansion.sections[].style',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Inline style for an expansion section.',
+        },
+        {
+            path: 'expansion.sections[].showIf',
+            category: 'expansion',
+            valueKind: 'expression',
+            description: 'Json Logic visibility condition for an expansion section.',
+        },
+        {
+            path: 'expansion.dataSource',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Expansion detail data source.',
+        },
+        {
+            path: 'expansion.dataSource.mode',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expansionDataSourceMode,
+            description: 'Expansion data source mode.',
+        },
+        {
+            path: 'expansion.dataSource.resource',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Canonical resource descriptor for expansion details.',
+        },
+        {
+            path: 'expansion.dataSource.resource.kind',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Canonical expansion resource kind.',
+        },
+        {
+            path: 'expansion.dataSource.resource.id',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Canonical expansion resource id.',
+        },
+        {
+            path: 'expansion.dataSource.resource.version',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Canonical expansion resource version.',
+        },
+        {
+            path: 'expansion.dataSource.resourcePath',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Dynamic resource path descriptor for expansion details.',
+        },
+        {
+            path: 'expansion.dataSource.resourcePath.path',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Expression-backed remote path for expansion details.',
+        },
+        {
+            path: 'expansion.dataSource.resourcePath.method',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ['GET', 'POST'],
+            description: 'HTTP method for dynamic expansion resource path.',
+        },
+        {
+            path: 'expansion.dataSource.resourcePath.paramsMap',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Parameter map for dynamic expansion resource path.',
+        },
+        {
+            path: 'expansion.dataSource.resourceAllowList',
+            category: 'expansion',
+            valueKind: 'array',
+            description: 'Allowlist for dynamic expansion resource paths.',
+        },
+        {
+            path: 'expansion.dataSource.fallbackMode',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expansionFallbackMode,
+            description: 'Fallback mode for expansion detail loading.',
+        },
+        {
+            path: 'expansion.dataSource.cache',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Expansion detail cache configuration.',
+        },
+        {
+            path: 'expansion.dataSource.cache.enabled',
+            category: 'expansion',
+            valueKind: 'boolean',
+            description: 'Enable expansion detail cache.',
+        },
+        {
+            path: 'expansion.dataSource.cancelOnCollapse',
+            category: 'expansion',
+            valueKind: 'boolean',
+            description: 'Cancel expansion detail loading when a row collapses.',
+        },
+        {
+            path: 'expansion.schemaContract',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Fail-closed schema contract for remote expansion details.',
+        },
+        {
+            path: 'expansion.schemaContract.kind',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Expansion schema contract kind.',
+        },
+        {
+            path: 'expansion.schemaContract.version',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Expansion schema contract version.',
+        },
+        {
+            path: 'expansion.schemaContract.allowedNodes',
+            category: 'expansion',
+            valueKind: 'array',
+            description: 'Allowed remote expansion node types.',
+        },
+        {
+            path: 'expansion.schemaContract.maxSections',
+            category: 'expansion',
+            valueKind: 'number',
+            description: 'Maximum number of remote expansion sections.',
+        },
+        {
+            path: 'expansion.schemaContract.maxItemsPerSection',
+            category: 'expansion',
+            valueKind: 'number',
+            description: 'Maximum number of items per remote expansion section.',
+        },
+        {
+            path: 'expansion.schemaContract.requireSectionIds',
+            category: 'expansion',
+            valueKind: 'boolean',
+            description: 'Require explicit ids for remote expansion sections.',
+        },
+        {
+            path: 'expansion.rendering',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Expansion shell rendering configuration.',
+        },
+        {
+            path: 'expansion.rendering.shell',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expansionRenderShell,
+            description: 'Expansion shell attachment mode.',
+        },
+        {
+            path: 'expansion.rendering.columns',
+            category: 'expansion',
+            valueKind: 'enum',
+            allowedValues: ENUMS.expansionColumns,
+            description: 'Expansion detail column count.',
+        },
+        {
+            path: 'expansion.rendering.gap',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Gap between expansion sections.',
+        },
+        {
+            path: 'expansion.rendering.padding',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Padding inside the expansion shell.',
+        },
+        {
+            path: 'expansion.rendering.class',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'CSS class for the expansion shell.',
+        },
+        {
+            path: 'expansion.rendering.style',
+            category: 'expansion',
+            valueKind: 'string',
+            description: 'Inline style for the expansion shell.',
+        },
+        {
+            path: 'expansion.rendering.loadingTemplate',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Template rendered while expansion detail loads.',
+        },
+        {
+            path: 'expansion.rendering.errorTemplate',
+            category: 'expansion',
+            valueKind: 'object',
+            description: 'Template rendered when expansion detail loading fails.',
+        },
+        {
+            path: 'ui',
+            category: 'ui',
+            valueKind: 'object',
+            description: 'Lightweight toolbar UI.',
+        },
+        {
+            path: 'ui.showSearch',
+            category: 'ui',
+            valueKind: 'boolean',
+            description: 'Show search input.',
+        },
+        {
+            path: 'ui.searchField',
+            category: 'ui',
+            valueKind: 'string',
+            description: 'Search field.',
+        },
+        {
+            path: 'ui.searchPlaceholder',
+            category: 'ui',
+            valueKind: 'string',
+            description: 'Search placeholder.',
+        },
+        {
+            path: 'ui.showSort',
+            category: 'ui',
+            valueKind: 'boolean',
+            description: 'Show sort selector.',
+        },
+        {
+            path: 'ui.sortOptions',
+            category: 'ui',
+            valueKind: 'array',
+            description: 'Sort options (string or {label,value}).',
+        },
+        {
+            path: 'ui.sortOptions[].label',
+            category: 'ui',
+            valueKind: 'string',
+            description: 'Sort option label.',
+        },
+        {
+            path: 'ui.sortOptions[].value',
+            category: 'ui',
+            valueKind: 'string',
+            description: 'Sort option value.',
         },
         {
             path: 'ui.showRange',
@@ -6579,6 +7316,12 @@ const LIST_AI_CAPABILITIES = {
             valueKind: 'string',
             description: 'Currency code (ex.: BRL).',
         },
+        {
+            path: 'i18n.localization',
+            category: 'i18n',
+            valueKind: 'object',
+            description: 'Core localization defaults reused by list template pipes.',
+        },
         {
             path: 'a11y',
             category: 'a11y',
@@ -8946,36 +9689,36 @@ class PraxisList {
             if (!confirmed)
                 return;
         }
-        const command = (action?.command || '').trim();
-        const isGlobal = this.isGlobalCommand(command);
+        const globalAction = action?.globalAction;
         const loadingKey = this.buildActionLoadingKey(actionId, item, index);
         if (action?.showLoading)
             this.actionLoadingState[loadingKey] = true;
         try {
-            if (isGlobal) {
-                const actionIdResolved = command.replace(/^global[:.]/, '').trim();
-                const payload = this.resolveActionPayload(action?.globalPayload, item, index);
-                if (actionIdResolved) {
-                    if (this.globalActions &&
-                        typeof this.globalActions.execute === 'function') {
-                        await this.globalActions.execute(actionIdResolved, payload, {
-                            sourceId: this.listId,
-                            output: 'actionClick',
-                            payload,
-                            meta: { actionId },
-                        });
-                    }
-                    else {
-                        this.warnGlobalCommandUnavailableOnce(actionIdResolved);
-                    }
+            if (globalAction?.actionId) {
+                const payload = this.resolveActionPayload(globalAction.payload, item, index);
+                if (!this.globalActions) {
+                    return;
+                }
+                const result = await this.globalActions.executeRef({ ...globalAction, ...(payload !== undefined ? { payload } : {}) }, {
+                    sourceId: this.listId,
+                    output: 'actionClick',
+                    payload,
+                    runtime: { item },
+                    meta: { actionId },
+                });
+                if (result && !result.success && isDevMode()) {
+                    this.logger.warn('[PraxisList] global action returned an error.', this.buildLogOptions({ globalActionId: globalAction.actionId, actionId, error: result.error }, {
+                        context: { actionId },
+                        throttleKey: `praxis-list:global-action-result-error:${actionId}`,
+                    }));
                 }
             }
         }
         catch (error) {
             if (isDevMode()) {
-                this.logger.warn('[PraxisList] global command execution failed.', this.buildLogOptions({ command, actionId, error }, {
+                this.logger.warn('[PraxisList] global action execution failed.', this.buildLogOptions({ globalActionId: globalAction?.actionId, actionId, error }, {
                     context: { actionId },
-                    throttleKey: `praxis-list:global-command-execution-failed:${actionId}`,
+                    throttleKey: `praxis-list:global-action-execution-failed:${actionId}`,
                 }));
             }
         }
@@ -8983,15 +9726,11 @@ class PraxisList {
             if (action?.showLoading)
                 delete this.actionLoadingState[loadingKey];
         }
-        const emitLocal = action?.emitLocal ?? !isGlobal;
+        const emitLocal = action?.emitLocal ?? !globalAction?.actionId;
         if (emitLocal) {
             this.actionClick.emit({ actionId, item, index });
         }
     }
-    isGlobalCommand(command) {
-        const c = (command || '').trim();
-        return c.startsWith('global:') || c.startsWith('global.');
-    }
     resolveActionPayload(raw, item, index) {
         if (raw == null)
             return { item, index };
@@ -9016,19 +9755,27 @@ class PraxisList {
             return this.resolveTemplate(raw, ctx);
         return raw;
     }
-    resolveTemplate(raw, ctx) {
+    resolveTemplate(raw, ctx, key) {
+        if (this.isDeferredTemplateExpressionKey(key) && typeof raw === 'string') {
+            return raw;
+        }
         if (typeof raw === 'string')
             return this.resolveStringTemplate(raw, ctx);
         if (Array.isArray(raw))
-            return raw.map((v) => this.resolveTemplate(v, ctx));
+            return raw.map((v) => this.resolveTemplate(v, ctx, key));
         if (raw && typeof raw === 'object') {
             const out = {};
             for (const [k, v] of Object.entries(raw))
-                out[k] = this.resolveTemplate(v, ctx);
+                out[k] = this.resolveTemplate(v, ctx, k);
             return out;
         }
         return raw;
     }
+    isDeferredTemplateExpressionKey(key) {
+        if (!key)
+            return false;
+        return key === 'expr' || key.endsWith('Expr');
+    }
     resolveStringTemplate(raw, ctx) {
         const single = raw.match(/^\$\{([^}]+)\}$/);
         if (single)
@@ -9806,15 +10553,6 @@ class PraxisList {
         this.actionItemObjectIds.set(value, next);
         return next;
     }
-    warnGlobalCommandUnavailableOnce(actionIdResolved) {
-        if (!isDevMode())
-            return;
-        this.logger.warnOnce('[PraxisList] global command ignored because GlobalActionService is unavailable.', this.buildLogOptions({ actionId: actionIdResolved }, {
-            context: { actionId: actionIdResolved },
-            dedupeKey: `praxis-list:global-action-unavailable:${actionIdResolved}`,
-            throttleKey: 'praxis-list:global-action-unavailable',
-        }));
-    }
     buildLogOptions(data, options = {}) {
         const context = {
             ...this.logContext,
@@ -10218,6 +10956,1460 @@ function providePraxisListMetadata() {
     };
 }
 
+const templateSchema = {
+    type: 'object',
+    required: ['type', 'expr'],
+    properties: {
+        type: { enum: ['text', 'icon', 'image', 'chip', 'rating', 'currency', 'date', 'html', 'slot', 'metric', 'compose', 'component'] },
+        expr: { type: 'string' },
+        class: { type: 'string' },
+        style: { type: 'string' },
+        color: { type: 'string' },
+        variant: { enum: ['filled', 'outlined'] },
+        imageAlt: { type: 'string' },
+        props: {
+            type: 'object',
+            properties: {
+                rating: {
+                    type: 'object',
+                    properties: {
+                        max: { type: 'number' },
+                        size: { type: 'number' },
+                        color: { type: 'string' },
+                    },
+                },
+                metric: {
+                    type: 'object',
+                    properties: {
+                        label: { type: 'string' },
+                        valueExpr: { type: 'string' },
+                        caption: { type: 'string' },
+                        subcaption: { type: 'string' },
+                        captionPosition: { enum: ['below-value', 'below-progress'] },
+                        icon: { type: 'string' },
+                        iconExpr: { type: 'string' },
+                        tone: { type: 'string' },
+                        toneExpr: { type: 'string' },
+                        layout: { enum: ['value-only', 'value+caption', 'icon+value+caption', 'stacked-center'] },
+                        align: { enum: ['start', 'center', 'end'] },
+                        progress: {
+                            type: 'object',
+                            properties: {
+                                valueExpr: { type: 'string' },
+                                max: { type: 'number' },
+                                mode: { enum: ['determinate', 'indeterminate'] },
+                                color: { type: 'string' },
+                                colorExpr: { type: 'string' },
+                                trackColor: { type: 'string' },
+                            },
+                        },
+                        valueClass: { type: 'string' },
+                        valueStyle: { type: 'string' },
+                        showBar: { type: 'boolean' },
+                        barValueExpr: { type: 'string' },
+                        barColor: { type: 'string' },
+                        barVariant: { enum: ['determinate', 'indeterminate'] },
+                        legendExpr: { type: 'string' },
+                        iconPosition: { enum: ['left', 'right', 'top'] },
+                        iconColorExpr: { type: 'string' },
+                    },
+                },
+                compose: {
+                    type: 'object',
+                    properties: {
+                        items: { type: 'array', items: { type: 'object' } },
+                        nodes: { type: 'array', items: { type: 'object' } },
+                        direction: { enum: ['row', 'column'] },
+                        orientation: { enum: ['horizontal', 'vertical'] },
+                        align: { enum: ['start', 'center', 'end'] },
+                        gap: { type: 'string' },
+                        wrap: { type: 'boolean' },
+                        separator: { type: 'string' },
+                        class: { type: 'string' },
+                        style: { type: 'string' },
+                    },
+                },
+                component: {
+                    type: 'object',
+                    required: ['id'],
+                    properties: {
+                        id: { type: 'string' },
+                        inputs: { type: 'object' },
+                        class: { type: 'string' },
+                        style: { type: 'string' },
+                    },
+                },
+            },
+        },
+        badge: {
+            type: 'object',
+            properties: {
+                expr: { type: 'string' },
+                color: { type: 'string' },
+                variant: { enum: ['filled', 'outlined'] },
+            },
+        },
+    },
+};
+const templateSlotEnum = [
+    'leading',
+    'primary',
+    'secondary',
+    'meta',
+    'trailing',
+    'identity',
+    'balance',
+    'limit',
+    'risk',
+    'alerts',
+    'owner',
+    'sectionHeader',
+    'emptyState',
+];
+const rowLayoutSlotEnum = [...templateSlotEnum.filter(slot => slot !== 'sectionHeader' && slot !== 'emptyState'), 'actions', 'expand'];
+const actionSchema = {
+    type: 'object',
+    required: ['id', 'label'],
+    properties: {
+        id: { type: 'string' },
+        label: { type: 'string' },
+        icon: { type: 'string' },
+        color: { type: 'string' },
+        kind: { enum: ['icon', 'button'] },
+        buttonVariant: { enum: ['stroked', 'raised', 'flat'] },
+        showIf: { type: 'object' },
+        emitPayload: { enum: ['item', 'id', 'value'] },
+        globalAction: {
+            type: 'object',
+            properties: {
+                actionId: { type: 'string' },
+                payload: { type: 'object' },
+            },
+        },
+        emitLocal: { type: 'boolean' },
+        showLoading: { type: 'boolean' },
+        placement: { enum: ['actions', 'trailing'] },
+        confirmation: {
+            type: 'object',
+            properties: {
+                title: { type: 'string' },
+                message: { type: 'string' },
+                type: { enum: ['danger', 'warning', 'info'] },
+            },
+        },
+    },
+};
+const rowLayoutSchema = {
+    type: 'object',
+    properties: {
+        type: { enum: ['grid', 'flex'] },
+        columns: {
+            type: 'array',
+            items: {
+                type: 'object',
+                required: ['slot'],
+                properties: {
+                    slot: { enum: rowLayoutSlotEnum },
+                    width: { type: 'string' },
+                    minWidth: { type: 'string' },
+                    maxWidth: { type: 'string' },
+                    align: { enum: ['start', 'center', 'end'] },
+                    justify: { enum: ['start', 'center', 'end', 'stretch'] },
+                    class: { type: 'string' },
+                    style: { type: 'string' },
+                },
+            },
+        },
+        gap: { type: 'string' },
+        align: { enum: ['start', 'center', 'end', 'stretch'] },
+        itemAlignY: { enum: ['start', 'center', 'end', 'stretch'] },
+        class: { type: 'string' },
+        style: { type: 'string' },
+    },
+};
+const expansionSectionSchema = {
+    type: 'object',
+    required: ['id', 'type'],
+    properties: {
+        id: { type: 'string' },
+        title: { type: 'string' },
+        type: { enum: ['info-list', 'chip-list', 'timeline', 'key-value', 'metadata', 'component'] },
+        itemsExpr: { type: 'string' },
+        emptyLabel: { type: 'string' },
+        metadata: {
+            type: 'object',
+            properties: {
+                orientation: { enum: ['horizontal', 'vertical'] },
+                columns: { enum: [1, 2, 3] },
+                gap: { type: 'string' },
+                keyClass: { type: 'string' },
+                valueClass: { type: 'string' },
+                keyStyle: { type: 'string' },
+                valueStyle: { type: 'string' },
+            },
+        },
+        component: {
+            type: 'object',
+            properties: {
+                id: { type: 'string' },
+                inputs: { type: 'object' },
+                class: { type: 'string' },
+                style: { type: 'string' },
+            },
+        },
+        class: { type: 'string' },
+        style: { type: 'string' },
+        showIf: { type: 'object' },
+    },
+};
+const expansionSchema = {
+    type: 'object',
+    properties: {
+        sections: { type: 'array', items: expansionSectionSchema },
+        dataSource: {
+            type: 'object',
+            properties: {
+                mode: { enum: ['inline', 'resource', 'resourcePath'] },
+                resource: {
+                    type: 'object',
+                    properties: {
+                        kind: { type: 'string' },
+                        id: { type: 'string' },
+                        version: { type: 'string' },
+                    },
+                },
+                resourcePath: {
+                    type: 'object',
+                    properties: {
+                        path: { type: 'string' },
+                        method: { enum: ['GET', 'POST'] },
+                        paramsMap: { type: 'object' },
+                    },
+                },
+                resourceAllowList: { type: 'array', items: { type: 'string' } },
+                fallbackMode: { enum: ['none', 'inline', 'resource'] },
+                cache: { type: 'object', properties: { enabled: { type: 'boolean' } } },
+                cancelOnCollapse: { type: 'boolean' },
+            },
+        },
+        schemaContract: {
+            type: 'object',
+            properties: {
+                kind: { enum: ['praxis.detail.schema'] },
+                version: { type: 'string' },
+                allowedNodes: { type: 'array', items: { enum: ['info-list', 'chip-list', 'timeline', 'key-value', 'metadata', 'component'] } },
+                maxSections: { type: 'number' },
+                maxItemsPerSection: { type: 'number' },
+                requireSectionIds: { type: 'boolean' },
+            },
+        },
+        rendering: {
+            type: 'object',
+            properties: {
+                shell: { enum: ['attached', 'detached', 'modal'] },
+                columns: { enum: [1, 2, 3] },
+                gap: { type: 'string' },
+                padding: { type: 'string' },
+                class: { type: 'string' },
+                style: { type: 'string' },
+                loadingTemplate: templateSchema,
+                errorTemplate: templateSchema,
+            },
+        },
+    },
+};
+const sortOptionSchema = {
+    oneOf: [
+        { type: 'string' },
+        {
+            type: 'object',
+            required: ['label', 'value'],
+            properties: {
+                label: { type: 'string' },
+                value: { type: 'string' },
+            },
+        },
+    ],
+};
+const PRAXIS_LIST_AUTHORING_MANIFEST = {
+    schemaVersion: '1.0.0',
+    componentId: 'praxis-list',
+    ownerPackage: '@praxisui/list',
+    configSchemaId: 'PraxisListConfig',
+    manifestVersion: '1.1.0',
+    runtimeInputs: [
+        { name: 'config', type: 'PraxisListConfig', description: 'Canonical list configuration.' },
+        { name: 'listId', type: 'string', description: 'Stable list id used by persistence.' },
+        { name: 'enableCustomization', type: 'boolean', description: 'Enables runtime authoring surfaces.' },
+    ],
+    editableTargets: [
+        { kind: 'itemTemplate', resolver: 'list-template-slot', description: 'Template slot under templating.*.' },
+        { kind: 'primaryText', resolver: 'templating-primary', description: 'Primary text template.' },
+        { kind: 'secondaryText', resolver: 'templating-secondary', description: 'Secondary text template.' },
+        { kind: 'avatar', resolver: 'templating-leading', description: 'Leading/avatar template.' },
+        { kind: 'badge', resolver: 'templating-trailing-chip', description: 'Trailing badge/status template.' },
+        { kind: 'itemAction', resolver: 'actions-by-id', description: 'Item action resolved by actions[].id.' },
+        { kind: 'emptyState', resolver: 'templating-empty-state', description: 'Empty state template.' },
+        { kind: 'selection', resolver: 'selection-config', description: 'Selection configuration.' },
+        { kind: 'layout', resolver: 'layout-config', description: 'Layout configuration.' },
+        { kind: 'rowLayout', resolver: 'row-layout-config', description: 'Row layout grid/flex columns and placement slots.' },
+        { kind: 'dataBinding', resolver: 'data-source-config', description: 'Local or remote data source binding.' },
+        { kind: 'interaction', resolver: 'interaction-config', description: 'Expandable row interaction configuration.' },
+        { kind: 'expansion', resolver: 'expansion-config', description: 'Inline expansion sections, data source and rendering configuration.' },
+        { kind: 'rules', resolver: 'rules-config', description: 'Item style rules and slot override rules.' },
+        { kind: 'meta', resolver: 'list-root-config', description: 'Root list metadata such as id.' },
+        { kind: 'skin', resolver: 'skin-config', description: 'Visual skin configuration.' },
+        { kind: 'toolbarUi', resolver: 'ui-config', description: 'Search, sort and footer UI configuration.' },
+        { kind: 'localization', resolver: 'i18n-config', description: 'Locale and currency configuration.' },
+        { kind: 'accessibility', resolver: 'a11y-config', description: 'Accessibility configuration.' },
+        { kind: 'eventMapping', resolver: 'events-config', description: 'Declarative event name mappings.' },
+    ],
+    operations: [
+        {
+            operationId: 'list.id.set',
+            title: 'Set list id',
+            scope: 'meta',
+            targetKind: 'meta',
+            target: { kind: 'meta', resolver: 'list-root-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['id'],
+                properties: {
+                    id: { type: 'string' },
+                },
+            },
+            effects: [{ kind: 'set-value', path: 'id' }],
+            validators: ['list-id-stable', 'editor-round-trip-preserve'],
+            affectedPaths: ['id'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.primaryText.set',
+            title: 'Set primary item text',
+            scope: 'itemTemplate',
+            targetKind: 'primaryText',
+            target: { kind: 'primaryText', resolver: 'templating-primary', required: false },
+            inputSchema: templateSchema,
+            effects: [{ kind: 'merge-object', path: 'templating.primary' }],
+            validators: ['bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.primary'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.secondaryText.set',
+            title: 'Set secondary item text',
+            scope: 'itemTemplate',
+            targetKind: 'secondaryText',
+            target: { kind: 'secondaryText', resolver: 'templating-secondary', required: false },
+            inputSchema: templateSchema,
+            effects: [{ kind: 'merge-object', path: 'templating.secondary' }],
+            validators: ['bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.secondary'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.avatar.configure',
+            title: 'Configure item avatar',
+            scope: 'itemTemplate',
+            targetKind: 'avatar',
+            target: { kind: 'avatar', resolver: 'templating-leading', required: false },
+            inputSchema: {
+                ...templateSchema,
+                required: ['type'],
+            },
+            effects: [{ kind: 'merge-object', path: 'templating.leading' }],
+            validators: ['bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.leading'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.badge.configure',
+            title: 'Configure item badge',
+            scope: 'itemTemplate',
+            targetKind: 'badge',
+            target: { kind: 'badge', resolver: 'templating-trailing-chip', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['expr'],
+                properties: {
+                    expr: { type: 'string' },
+                    color: { type: 'string' },
+                    variant: { enum: ['filled', 'outlined'] },
+                    statusPosition: { enum: ['inline', 'top-right'] },
+                    labelMap: { type: 'object' },
+                    colorMap: { type: 'object' },
+                },
+            },
+            effects: [
+                { kind: 'merge-object', path: 'templating.trailing' },
+                { kind: 'set-value', path: 'templating.statusPosition' },
+                { kind: 'merge-object', path: 'templating.chipLabelMap' },
+                { kind: 'merge-object', path: 'templating.chipColorMap' },
+            ],
+            validators: ['bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.trailing', 'templating.statusPosition', 'templating.chipLabelMap', 'templating.chipColorMap'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'template.slot.set',
+            title: 'Set any list template slot',
+            scope: 'templating',
+            targetKind: 'itemTemplate',
+            target: { kind: 'itemTemplate', resolver: 'list-template-slot', required: true },
+            inputSchema: {
+                type: 'object',
+                required: ['slot', 'template'],
+                properties: {
+                    slot: { enum: templateSlotEnum },
+                    template: templateSchema,
+                },
+            },
+            effects: [{
+                    kind: 'compile-domain-patch',
+                    handler: 'list-template-slot-set',
+                    handlerContract: {
+                        reads: ['templating'],
+                        writes: [
+                            'templating.leading',
+                            'templating.primary',
+                            'templating.secondary',
+                            'templating.meta',
+                            'templating.trailing',
+                            'templating.identity',
+                            'templating.balance',
+                            'templating.limit',
+                            'templating.risk',
+                            'templating.alerts',
+                            'templating.owner',
+                            'templating.sectionHeader',
+                            'templating.emptyState',
+                        ],
+                        identityKeys: ['slot'],
+                        inputSchema: {
+                            type: 'object',
+                            required: ['slot', 'template'],
+                            properties: {
+                                slot: { enum: templateSlotEnum },
+                                template: templateSchema,
+                            },
+                        },
+                        failureModes: ['unsupported-template-slot', 'invalid-template-expression', 'ambiguous-template-slot'],
+                        description: 'Writes the requested template into one supported templating slot; slot is the stable identity, not array position.',
+                    },
+                }],
+            validators: ['template-slot-supported', 'bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'templating.leading',
+                'templating.primary',
+                'templating.secondary',
+                'templating.meta',
+                'templating.trailing',
+                'templating.identity',
+                'templating.balance',
+                'templating.limit',
+                'templating.risk',
+                'templating.alerts',
+                'templating.owner',
+                'templating.sectionHeader',
+                'templating.emptyState',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.action.add',
+            title: 'Add item action',
+            scope: 'itemAction',
+            targetKind: 'itemAction',
+            target: { kind: 'itemAction', resolver: 'actions-by-id', required: false },
+            inputSchema: actionSchema,
+            effects: [{ kind: 'append-unique', path: 'actions[]', key: 'id' }],
+            validators: ['action-id-stable', 'json-logic-valid', 'global-action-ref-valid', 'editor-round-trip-preserve'],
+            affectedPaths: ['actions[]'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'item.action.update',
+            title: 'Update item action',
+            scope: 'itemAction',
+            targetKind: 'itemAction',
+            target: { kind: 'itemAction', resolver: 'actions-by-id', required: true },
+            inputSchema: { ...actionSchema, required: ['id'] },
+            effects: [{ kind: 'merge-by-key', path: 'actions[]', key: 'id' }],
+            validators: ['action-exists', 'action-id-stable', 'json-logic-valid', 'global-action-ref-valid', 'declared-only-runtime-warning', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'actions',
+                'actions[].id',
+                'actions[].icon',
+                'actions[].label',
+                'actions[].color',
+                'actions[].kind',
+                'actions[].buttonVariant',
+                'actions[].showIf',
+                'actions[].emitPayload',
+                'actions[].globalAction.[actionId]',
+                'actions[].globalAction.payload',
+                'actions[].emitLocal',
+                'actions[].showLoading',
+                'actions[].placement',
+                'actions[].confirmation',
+                'actions[].confirmation.title',
+                'actions[].confirmation.message',
+                'actions[].confirmation.type',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized', 'target-exists'],
+        },
+        {
+            operationId: 'item.action.remove',
+            title: 'Remove item action',
+            scope: 'itemAction',
+            targetKind: 'itemAction',
+            target: { kind: 'itemAction', resolver: 'actions-by-id', required: true },
+            inputSchema: { type: 'object', required: ['id'], properties: { id: { type: 'string' } } },
+            effects: [{ kind: 'remove-by-key', path: 'actions[]', key: 'id' }],
+            destructive: true,
+            requiresConfirmation: true,
+            validators: ['action-exists', 'destructive-removal-confirmation', 'editor-round-trip-preserve'],
+            affectedPaths: ['actions[]'],
+            submissionImpact: false,
+            preconditions: ['config-initialized', 'target-exists'],
+        },
+        {
+            operationId: 'selection.mode.set',
+            title: 'Set selection mode',
+            scope: 'selection',
+            targetKind: 'selection',
+            target: { kind: 'selection', resolver: 'selection-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['mode'],
+                properties: {
+                    mode: { enum: ['none', 'single', 'multiple'] },
+                    compareBy: { type: 'string' },
+                    return: { enum: ['value', 'item', 'id'] },
+                    formControlName: { type: 'string' },
+                    formControlPath: { type: 'string' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'selection' }],
+            validators: ['selection-mode-supported', 'bound-field-exists', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'selection',
+                'selection.mode',
+                'selection.formControlName',
+                'selection.formControlPath',
+                'selection.compareBy',
+                'selection.return',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'interaction.expansion.configure',
+            title: 'Configure expandable row interaction',
+            scope: 'interaction',
+            targetKind: 'interaction',
+            target: { kind: 'interaction', resolver: 'interaction-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    expandable: { type: 'boolean' },
+                    expandTrigger: { enum: ['row', 'icon', 'row+icon'] },
+                    expandMode: { enum: ['single', 'multiple'] },
+                    expandPlacement: { enum: ['expand', 'trailing'] },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'interaction' }],
+            validators: ['interaction-value-supported', 'row-layout-placement-reachable', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'interaction',
+                'interaction.expandable',
+                'interaction.expandTrigger',
+                'interaction.expandMode',
+                'interaction.expandPlacement',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'layout.density.set',
+            title: 'Set list density',
+            scope: 'layout',
+            targetKind: 'layout',
+            target: { kind: 'layout', resolver: 'layout-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    density: { enum: ['default', 'comfortable', 'compact'] },
+                    variant: { enum: ['list', 'cards', 'tiles'] },
+                    itemSpacing: { enum: ['none', 'tight', 'default', 'relaxed'] },
+                    lines: { enum: [1, 2, 3] },
+                    dividers: { enum: ['none', 'between', 'all'] },
+                    model: { enum: ['standard', 'media', 'hotel'] },
+                    groupBy: { type: 'string' },
+                    stickySectionHeader: { type: 'boolean' },
+                    virtualScroll: { type: 'boolean' },
+                    pageSize: { type: 'number' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'layout' }],
+            validators: ['layout-value-supported', 'bound-field-exists', 'declared-only-runtime-warning', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'layout',
+                'layout.variant',
+                'layout.density',
+                'layout.itemSpacing',
+                'layout.lines',
+                'layout.dividers',
+                'layout.model',
+                'layout.groupBy',
+                'layout.stickySectionHeader',
+                'layout.virtualScroll',
+                'layout.pageSize',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'layout.rowLayout.configure',
+            title: 'Configure list row layout',
+            scope: 'rowLayout',
+            targetKind: 'rowLayout',
+            target: { kind: 'rowLayout', resolver: 'row-layout-config', required: false },
+            inputSchema: rowLayoutSchema,
+            effects: [{ kind: 'merge-object', path: 'layout.rowLayout' }],
+            validators: ['row-layout-supported', 'row-layout-placement-reachable', 'style-value-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'layout.rowLayout',
+                'layout.rowLayout.type',
+                'layout.rowLayout.columns',
+                'layout.rowLayout.columns[].slot',
+                'layout.rowLayout.columns[].width',
+                'layout.rowLayout.columns[].minWidth',
+                'layout.rowLayout.columns[].maxWidth',
+                'layout.rowLayout.columns[].align',
+                'layout.rowLayout.columns[].justify',
+                'layout.rowLayout.columns[].class',
+                'layout.rowLayout.columns[].style',
+                'layout.rowLayout.gap',
+                'layout.rowLayout.align',
+                'layout.rowLayout.itemAlignY',
+                'layout.rowLayout.class',
+                'layout.rowLayout.style',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'skin.configure',
+            title: 'Configure list skin',
+            scope: 'skin',
+            targetKind: 'skin',
+            target: { kind: 'skin', resolver: 'skin-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    type: { enum: ['pill-soft', 'gradient-tile', 'glass', 'elevated', 'outline', 'flat', 'neumorphism', 'custom'] },
+                    gradient: {
+                        type: 'object',
+                        properties: {
+                            from: { type: 'string' },
+                            to: { type: 'string' },
+                            angle: { type: 'number' },
+                        },
+                    },
+                    radius: { type: 'string' },
+                    shadow: { type: 'string' },
+                    border: { type: 'string' },
+                    backdropBlur: { type: 'string' },
+                    class: { type: 'string' },
+                    inlineStyle: { type: 'string' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'skin' }],
+            validators: ['skin-value-supported', 'style-value-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'skin',
+                'skin.type',
+                'skin.gradient',
+                'skin.gradient.from',
+                'skin.gradient.to',
+                'skin.gradient.angle',
+                'skin.radius',
+                'skin.shadow',
+                'skin.border',
+                'skin.backdropBlur',
+                'skin.class',
+                'skin.inlineStyle',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'templating.display.configure',
+            title: 'Configure list template display options',
+            scope: 'templating',
+            targetKind: 'itemTemplate',
+            target: { kind: 'itemTemplate', resolver: 'templating-display-options', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    metaPlacement: { enum: ['side', 'line'] },
+                    metaPrefixIcon: { type: 'string' },
+                    statusPosition: { enum: ['inline', 'top-right'] },
+                    chipColorMap: { type: 'object' },
+                    chipLabelMap: { type: 'object' },
+                    iconColorMap: { type: 'object' },
+                    featuresVisible: { type: 'boolean' },
+                    featuresMode: { enum: ['icons+labels', 'icons-only', 'labels-only'] },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'templating' }],
+            validators: ['template-display-supported', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'templating',
+                'templating.metaPlacement',
+                'templating.metaPrefixIcon',
+                'templating.statusPosition',
+                'templating.chipColorMap',
+                'templating.chipLabelMap',
+                'templating.iconColorMap',
+                'templating.featuresVisible',
+                'templating.featuresMode',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'templating.features.set',
+            title: 'Set list feature line',
+            scope: 'templating',
+            targetKind: 'itemTemplate',
+            target: { kind: 'itemTemplate', resolver: 'templating-features', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['features'],
+                properties: {
+                    features: {
+                        type: 'array',
+                        items: {
+                            type: 'object',
+                            required: ['expr'],
+                            properties: {
+                                icon: { type: 'string' },
+                                expr: { type: 'string' },
+                                class: { type: 'string' },
+                                style: { type: 'string' },
+                            },
+                        },
+                    },
+                },
+            },
+            effects: [{ kind: 'set-value', path: 'templating.features' }],
+            validators: ['bound-field-exists', 'template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'templating.features',
+                'templating.features[].icon',
+                'templating.features[].expr',
+                'templating.features[].class',
+                'templating.features[].style',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'templating.skeleton.configure',
+            title: 'Configure list skeleton',
+            scope: 'templating',
+            targetKind: 'itemTemplate',
+            target: { kind: 'itemTemplate', resolver: 'templating-skeleton', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['count'],
+                properties: {
+                    count: { type: 'number' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'templating.skeleton' }],
+            validators: ['skeleton-value-supported', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.skeleton', 'templating.skeleton.count'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'rules.itemStyle.upsert',
+            title: 'Upsert item style rule',
+            scope: 'rules',
+            targetKind: 'rules',
+            target: { kind: 'rules', resolver: 'rules-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['id'],
+                properties: {
+                    id: { type: 'string' },
+                    condition: { type: 'object' },
+                    class: { type: 'string' },
+                    style: { type: 'string' },
+                    border: { type: 'string' },
+                    background: { type: 'string' },
+                },
+            },
+            effects: [{ kind: 'merge-by-key', path: 'rules.itemStyles[]', key: 'id' }],
+            validators: ['rule-id-stable', 'json-logic-valid', 'style-value-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'rules',
+                'rules.itemStyles',
+                'rules.itemStyles[].id',
+                'rules.itemStyles[].condition',
+                'rules.itemStyles[].class',
+                'rules.itemStyles[].style',
+                'rules.itemStyles[].border',
+                'rules.itemStyles[].background',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'rules.slotOverride.upsert',
+            title: 'Upsert slot override rule',
+            scope: 'rules',
+            targetKind: 'rules',
+            target: { kind: 'rules', resolver: 'rules-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['id', 'slot'],
+                properties: {
+                    id: { type: 'string' },
+                    slot: { enum: templateSlotEnum.filter(slot => slot !== 'sectionHeader' && slot !== 'emptyState') },
+                    condition: { type: 'object' },
+                    template: templateSchema,
+                    class: { type: 'string' },
+                    style: { type: 'string' },
+                    hide: { type: 'boolean' },
+                },
+            },
+            effects: [{ kind: 'merge-by-key', path: 'rules.slotOverrides[]', key: 'id' }],
+            validators: ['rule-id-stable', 'template-slot-supported', 'json-logic-valid', 'template-expression-safe', 'style-value-safe', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'rules',
+                'rules.slotOverrides',
+                'rules.slotOverrides[].id',
+                'rules.slotOverrides[].slot',
+                'rules.slotOverrides[].condition',
+                'rules.slotOverrides[].template',
+                'rules.slotOverrides[].class',
+                'rules.slotOverrides[].style',
+                'rules.slotOverrides[].hide',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'emptyState.set',
+            title: 'Set empty state',
+            scope: 'itemTemplate',
+            targetKind: 'emptyState',
+            target: { kind: 'emptyState', resolver: 'templating-empty-state', required: false },
+            inputSchema: templateSchema,
+            effects: [{ kind: 'merge-object', path: 'templating.emptyState' }],
+            validators: ['template-expression-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['templating.emptyState'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'expansion.configure',
+            title: 'Configure list expansion',
+            scope: 'expansion',
+            targetKind: 'expansion',
+            target: { kind: 'expansion', resolver: 'expansion-config', required: false },
+            inputSchema: expansionSchema,
+            effects: [{ kind: 'merge-object', path: 'expansion' }],
+            validators: [
+                'expansion-section-id-stable',
+                'expansion-value-supported',
+                'json-logic-valid',
+                'template-expression-safe',
+                'remote-resource-binding-safe',
+                'style-value-safe',
+                'editor-round-trip-preserve',
+            ],
+            affectedPaths: [
+                'expansion',
+                'expansion.sections',
+                'expansion.sections[].id',
+                'expansion.sections[].title',
+                'expansion.sections[].type',
+                'expansion.sections[].itemsExpr',
+                'expansion.sections[].emptyLabel',
+                'expansion.sections[].metadata',
+                'expansion.sections[].component',
+                'expansion.sections[].class',
+                'expansion.sections[].style',
+                'expansion.sections[].showIf',
+                'expansion.dataSource',
+                'expansion.dataSource.mode',
+                'expansion.dataSource.resource',
+                'expansion.dataSource.resource.kind',
+                'expansion.dataSource.resource.id',
+                'expansion.dataSource.resource.version',
+                'expansion.dataSource.resourcePath',
+                'expansion.dataSource.resourcePath.path',
+                'expansion.dataSource.resourcePath.method',
+                'expansion.dataSource.resourcePath.paramsMap',
+                'expansion.dataSource.resourceAllowList',
+                'expansion.dataSource.fallbackMode',
+                'expansion.dataSource.cache',
+                'expansion.dataSource.cache.enabled',
+                'expansion.dataSource.cancelOnCollapse',
+                'expansion.schemaContract',
+                'expansion.schemaContract.kind',
+                'expansion.schemaContract.version',
+                'expansion.schemaContract.allowedNodes',
+                'expansion.schemaContract.maxSections',
+                'expansion.schemaContract.maxItemsPerSection',
+                'expansion.schemaContract.requireSectionIds',
+                'expansion.rendering',
+                'expansion.rendering.shell',
+                'expansion.rendering.columns',
+                'expansion.rendering.gap',
+                'expansion.rendering.padding',
+                'expansion.rendering.class',
+                'expansion.rendering.style',
+                'expansion.rendering.loadingTemplate',
+                'expansion.rendering.errorTemplate',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'data.resource.bind',
+            title: 'Bind remote resource',
+            scope: 'dataBinding',
+            targetKind: 'dataBinding',
+            target: { kind: 'dataBinding', resolver: 'data-source-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['resourcePath'],
+                properties: {
+                    resourcePath: { type: 'string' },
+                    query: { type: 'object' },
+                    sort: { type: 'array', items: { type: 'string' } },
+                    clearLocalData: { type: 'boolean', default: true },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'dataSource' }],
+            validators: ['remote-resource-binding-safe', 'local-remote-precedence-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['dataSource.resourcePath', 'dataSource.query', 'dataSource.sort', 'dataSource.data'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'data.local.set',
+            title: 'Set local list data',
+            scope: 'dataBinding',
+            targetKind: 'dataBinding',
+            target: { kind: 'dataBinding', resolver: 'data-source-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['data'],
+                properties: {
+                    data: { type: 'array' },
+                    clearResourcePath: { type: 'boolean', default: false },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'dataSource' }],
+            validators: ['local-data-array-safe', 'local-remote-precedence-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['dataSource', 'dataSource.data', 'dataSource.resourcePath'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'data.query.set',
+            title: 'Set remote list query',
+            scope: 'dataBinding',
+            targetKind: 'dataBinding',
+            target: { kind: 'dataBinding', resolver: 'data-source-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['query'],
+                properties: {
+                    query: { type: 'object' },
+                },
+            },
+            effects: [{ kind: 'set-value', path: 'dataSource.query' }],
+            validators: ['remote-resource-binding-safe', 'editor-round-trip-preserve'],
+            affectedPaths: ['dataSource.query'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'data.sort.set',
+            title: 'Set remote list sort',
+            scope: 'dataBinding',
+            targetKind: 'dataBinding',
+            target: { kind: 'dataBinding', resolver: 'data-source-config', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['sort'],
+                properties: {
+                    sort: { type: 'array', items: { type: 'string' } },
+                },
+            },
+            effects: [{ kind: 'set-value', path: 'dataSource.sort' }],
+            validators: ['sort-entry-supported', 'editor-round-trip-preserve'],
+            affectedPaths: ['dataSource.sort', 'dataSource.sort[]'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'ui.toolbar.configure',
+            title: 'Configure list toolbar UI',
+            scope: 'toolbarUi',
+            targetKind: 'toolbarUi',
+            target: { kind: 'toolbarUi', resolver: 'ui-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    showSearch: { type: 'boolean' },
+                    searchField: { type: 'string' },
+                    searchPlaceholder: { type: 'string' },
+                    showSort: { type: 'boolean' },
+                    sortOptions: { type: 'array', items: sortOptionSchema },
+                    showRange: { type: 'boolean' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'ui' }],
+            validators: ['bound-field-exists', 'sort-entry-supported', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'ui',
+                'ui.showSearch',
+                'ui.searchField',
+                'ui.searchPlaceholder',
+                'ui.showSort',
+                'ui.sortOptions',
+                'ui.sortOptions[].label',
+                'ui.sortOptions[].value',
+                'ui.showRange',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'i18n.configure',
+            title: 'Configure list localization',
+            scope: 'localization',
+            targetKind: 'localization',
+            target: { kind: 'localization', resolver: 'i18n-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    locale: { type: 'string' },
+                    currency: { type: 'string' },
+                    localization: { type: 'object' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'i18n' }],
+            validators: ['i18n-value-supported', 'editor-round-trip-preserve'],
+            affectedPaths: ['i18n', 'i18n.locale', 'i18n.currency', 'i18n.localization'],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'a11y.configure',
+            title: 'Configure list accessibility',
+            scope: 'accessibility',
+            targetKind: 'accessibility',
+            target: { kind: 'accessibility', resolver: 'a11y-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    ariaLabel: { type: 'string' },
+                    ariaLabelledBy: { type: 'string' },
+                    highContrast: { type: 'boolean' },
+                    reduceMotion: { type: 'boolean' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'a11y' }],
+            validators: ['a11y-value-supported', 'declared-only-runtime-warning', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'a11y',
+                'a11y.ariaLabel',
+                'a11y.ariaLabelledBy',
+                'a11y.highContrast',
+                'a11y.reduceMotion',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'events.map',
+            title: 'Configure declarative event mappings',
+            scope: 'eventMapping',
+            targetKind: 'eventMapping',
+            target: { kind: 'eventMapping', resolver: 'events-config', required: false },
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    itemClick: { type: 'string' },
+                    actionClick: { type: 'string' },
+                    selectionChange: { type: 'string' },
+                    loaded: { type: 'string' },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'events' }],
+            validators: ['event-name-supported', 'declared-only-runtime-warning', 'editor-round-trip-preserve'],
+            affectedPaths: [
+                'events',
+                'events.itemClick',
+                'events.actionClick',
+                'events.selectionChange',
+                'events.loaded',
+            ],
+            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            preconditions: ['config-initialized'],
+        },
+    ],
+    validators: [
+        { validatorId: 'list-id-stable', level: 'error', code: 'PL000', description: 'List id must remain stable for persistence and editor reopen flows.' },
+        { validatorId: 'bound-field-exists', level: 'error', code: 'PL001', description: 'Bound template and selection fields must exist in local data or schema context when available.' },
+        { validatorId: 'template-expression-safe', level: 'error', code: 'PL002', description: 'Template expressions must use supported ${item.path} syntax and allowed pipes.' },
+        { validatorId: 'action-id-stable', level: 'error', code: 'PL003', description: 'Item actions must declare stable unique ids.' },
+        { validatorId: 'action-exists', level: 'error', code: 'PL004', description: 'Target action id must exist before update or removal.' },
+        { validatorId: 'destructive-removal-confirmation', level: 'error', code: 'PL005', description: 'Destructive action removal requires explicit confirmation.' },
+        { validatorId: 'remote-resource-binding-safe', level: 'error', code: 'PL006', description: 'Remote resource binding must use canonical resource metadata and safe resourcePath values.' },
+        { validatorId: 'local-remote-precedence-safe', level: 'warning', code: 'PL007', description: 'When binding resourcePath, tools must account for dataSource.data taking precedence over remote data.' },
+        { validatorId: 'selection-mode-supported', level: 'error', code: 'PL008', description: 'Selection mode and return policy must match the runtime enum.' },
+        { validatorId: 'layout-value-supported', level: 'error', code: 'PL009', description: 'Layout density and related enum values must match PraxisListConfig.' },
+        { validatorId: 'json-logic-valid', level: 'error', code: 'PL010', description: 'Action visibility conditions must be serializable Json Logic.' },
+        { validatorId: 'global-action-ref-valid', level: 'warning', code: 'PL011', description: 'Structured globalAction refs must use a registered action id when registry context is available.' },
+        { validatorId: 'editor-round-trip-preserve', level: 'error', code: 'PL012', description: 'The list config editor and JSON editor must preserve the saved shape without drift.' },
+        { validatorId: 'template-slot-supported', level: 'error', code: 'PL013', description: 'Template slot names must be one of the runtime-supported catalog slots.' },
+        { validatorId: 'skin-value-supported', level: 'error', code: 'PL014', description: 'Skin values must match the runtime-supported skin contract.' },
+        { validatorId: 'style-value-safe', level: 'warning', code: 'PL015', description: 'Inline styles and classes must be safe for the host sanitization policy.' },
+        { validatorId: 'template-display-supported', level: 'error', code: 'PL016', description: 'Template display options must match the runtime enum contract.' },
+        { validatorId: 'skeleton-value-supported', level: 'error', code: 'PL017', description: 'Skeleton counts must be numeric and non-negative.' },
+        { validatorId: 'local-data-array-safe', level: 'error', code: 'PL018', description: 'Local list data must be an array and must not hide an intended remote binding accidentally.' },
+        { validatorId: 'sort-entry-supported', level: 'error', code: 'PL019', description: 'Sort entries must use the canonical field,direction format or labeled sort option shape.' },
+        { validatorId: 'i18n-value-supported', level: 'warning', code: 'PL020', description: 'Locale and currency values should be valid BCP 47 / ISO currency values when host validation is available.' },
+        { validatorId: 'a11y-value-supported', level: 'error', code: 'PL021', description: 'Accessibility labels must be non-empty when provided.' },
+        { validatorId: 'event-name-supported', level: 'warning', code: 'PL022', description: 'Declarative event names must be stable host event identifiers.' },
+        { validatorId: 'declared-only-runtime-warning', level: 'warning', code: 'PL023', description: 'Fields documented as declared-only may round-trip through config/editor without changing current runtime behavior.' },
+        { validatorId: 'row-layout-supported', level: 'error', code: 'PL024', description: 'Row layout columns must use supported slots and enum values.' },
+        { validatorId: 'row-layout-placement-reachable', level: 'warning', code: 'PL025', description: 'Action and expansion placements must be reachable from the active row layout.' },
+        { validatorId: 'interaction-value-supported', level: 'error', code: 'PL026', description: 'Interaction expansion values must match the runtime enum contract.' },
+        { validatorId: 'rule-id-stable', level: 'error', code: 'PL027', description: 'List style and slot override rules must declare stable unique ids.' },
+        { validatorId: 'expansion-section-id-stable', level: 'error', code: 'PL028', description: 'Expansion sections must declare stable unique ids.' },
+        { validatorId: 'expansion-value-supported', level: 'error', code: 'PL029', description: 'Expansion section, data source, schema contract and rendering values must match the runtime contract.' },
+    ],
+    roundTripRequirements: [
+        'List editor must preserve templating.primary, templating.secondary, templating.leading, templating.trailing and templating.emptyState.',
+        'Actions must round-trip by actions[].id rather than array index.',
+        'Rules must round-trip by rules.itemStyles[].id and rules.slotOverrides[].id rather than array index.',
+        'Expansion sections must round-trip by expansion.sections[].id rather than array index.',
+        'Row layout must preserve executive slots identity, balance, limit, risk, alerts, owner, actions and expand.',
+        'dataSource.data precedence over dataSource.resourcePath must remain explicit when binding remote resources.',
+    ],
+    examples: [
+        {
+            id: 'set-list-id',
+            request: 'Set the stable list id to employees-list.',
+            operationId: 'list.id.set',
+            params: { id: 'employees-list' },
+            isPositive: true,
+        },
+        {
+            id: 'bind-title-subtitle-fields',
+            request: 'Use name as title and department as subtitle.',
+            operationId: 'item.primaryText.set',
+            params: { type: 'text', expr: '${item.name}' },
+            isPositive: true,
+        },
+        {
+            id: 'bind-secondary-field',
+            request: 'Show department below the title.',
+            operationId: 'item.secondaryText.set',
+            params: { type: 'text', expr: '${item.department}' },
+            isPositive: true,
+        },
+        {
+            id: 'configure-avatar-image',
+            request: 'Use photoUrl as the item avatar.',
+            operationId: 'item.avatar.configure',
+            params: { type: 'image', expr: '${item.photoUrl}', imageAlt: 'Employee photo' },
+            isPositive: true,
+        },
+        {
+            id: 'set-template-slot',
+            request: 'Set the meta slot to show the employee score.',
+            operationId: 'template.slot.set',
+            params: { slot: 'meta', template: { type: 'metric', expr: '${item.score}' } },
+            isPositive: true,
+        },
+        {
+            id: 'add-item-action',
+            request: 'Add an edit action to every item.',
+            operationId: 'item.action.add',
+            params: { id: 'edit', label: 'Edit', icon: 'edit', kind: 'icon' },
+            isPositive: true,
+        },
+        {
+            id: 'update-item-action-placement',
+            request: 'Move the edit action into the dedicated actions column and show loading.',
+            operationId: 'item.action.update',
+            params: { id: 'edit', placement: 'actions', showLoading: true },
+            isPositive: true,
+        },
+        {
+            id: 'remove-item-action-with-confirmation',
+            request: 'Remove the edit action after confirmation.',
+            operationId: 'item.action.remove',
+            params: { id: 'edit' },
+            isPositive: true,
+        },
+        {
+            id: 'configure-badge-from-status',
+            request: 'Show a status badge in the item corner.',
+            operationId: 'item.badge.configure',
+            params: { expr: '${item.status}', statusPosition: 'top-right', color: 'primary' },
+            isPositive: true,
+        },
+        {
+            id: 'switch-selection-mode',
+            request: 'Allow selecting multiple employees by id.',
+            operationId: 'selection.mode.set',
+            params: { mode: 'multiple', compareBy: 'id', return: 'id' },
+            isPositive: true,
+        },
+        {
+            id: 'set-compact-density',
+            request: 'Make the list compact.',
+            operationId: 'layout.density.set',
+            params: { density: 'compact' },
+            isPositive: true,
+        },
+        {
+            id: 'reject-missing-field-binding',
+            request: 'Use missingField as the list title.',
+            operationId: 'item.primaryText.set',
+            params: { type: 'text', expr: '${item.missingField}' },
+            isPositive: false,
+        },
+        {
+            id: 'configure-list-skin',
+            request: 'Use an elevated card skin with rounded corners.',
+            operationId: 'skin.configure',
+            params: { type: 'elevated', radius: '8px', shadow: 'var(--mat-sys-level2)' },
+            isPositive: true,
+        },
+        {
+            id: 'configure-list-toolbar',
+            request: 'Show search by name and sort by created date.',
+            operationId: 'ui.toolbar.configure',
+            params: {
+                showSearch: true,
+                searchField: 'name',
+                showSort: true,
+                sortOptions: [{ label: 'Newest', value: 'createdAt,desc' }],
+            },
+            isPositive: true,
+        },
+        {
+            id: 'configure-accessibility-label',
+            request: 'Set an accessible label for the customer list.',
+            operationId: 'a11y.configure',
+            params: { ariaLabel: 'Customer list' },
+            isPositive: true,
+        },
+        {
+            id: 'map-declarative-events',
+            request: 'Map selection changes to the customerSelectionChanged event name.',
+            operationId: 'events.map',
+            params: { selectionChange: 'customerSelectionChanged' },
+            isPositive: true,
+        },
+        {
+            id: 'configure-template-display',
+            request: 'Move status chips to the top right and hide feature labels.',
+            operationId: 'templating.display.configure',
+            params: { statusPosition: 'top-right', featuresMode: 'icons-only' },
+            isPositive: true,
+        },
+        {
+            id: 'set-feature-line',
+            request: 'Show the amenities feature line.',
+            operationId: 'templating.features.set',
+            params: { features: [{ icon: 'wifi', expr: '${item.hasWifi}' }] },
+            isPositive: true,
+        },
+        {
+            id: 'configure-skeleton-count',
+            request: 'Render six skeleton rows while loading.',
+            operationId: 'templating.skeleton.configure',
+            params: { count: 6 },
+            isPositive: true,
+        },
+        {
+            id: 'override-risk-slot',
+            request: 'Show a warning icon in the risk slot for high-risk rows.',
+            operationId: 'rules.slotOverride.upsert',
+            params: {
+                id: 'high-risk-icon',
+                slot: 'risk',
+                condition: { '==': [{ var: 'row.risk' }, 'high'] },
+                template: { type: 'icon', expr: 'warning', color: 'warn' },
+            },
+            isPositive: true,
+        },
+        {
+            id: 'set-empty-state',
+            request: 'Show an empty employee message.',
+            operationId: 'emptyState.set',
+            params: { type: 'text', expr: 'No employees found' },
+            isPositive: true,
+        },
+        {
+            id: 'bind-remote-resource',
+            request: 'Bind the list to the employees resource.',
+            operationId: 'data.resource.bind',
+            params: { resourcePath: 'employees', sort: ['name,asc'] },
+            isPositive: true,
+        },
+        {
+            id: 'set-local-data',
+            request: 'Use a local employee array for the list.',
+            operationId: 'data.local.set',
+            params: { data: [{ id: 1, name: 'Ana' }] },
+            isPositive: true,
+        },
+        {
+            id: 'set-remote-query',
+            request: 'Filter remote employees by active status.',
+            operationId: 'data.query.set',
+            params: { query: { status: 'active' } },
+            isPositive: true,
+        },
+        {
+            id: 'set-remote-sort',
+            request: 'Sort remote employees by name ascending.',
+            operationId: 'data.sort.set',
+            params: { sort: ['name,asc'] },
+            isPositive: true,
+        },
+        {
+            id: 'configure-list-i18n',
+            request: 'Use Brazilian Portuguese and BRL defaults.',
+            operationId: 'i18n.configure',
+            params: { locale: 'pt-BR', currency: 'BRL' },
+            isPositive: true,
+        },
+        {
+            id: 'configure-row-layout-executive-slots',
+            request: 'Use an executive row with identity, balance and actions columns.',
+            operationId: 'layout.rowLayout.configure',
+            params: {
+                type: 'grid',
+                columns: [
+                    { slot: 'identity', width: '280px' },
+                    { slot: 'balance', width: '1fr' },
+                    { slot: 'actions', width: 'auto' },
+                ],
+            },
+            isPositive: true,
+        },
+        {
+            id: 'enable-inline-expansion',
+            request: 'Allow expanding one row at a time using the expand icon.',
+            operationId: 'interaction.expansion.configure',
+            params: { expandable: true, expandTrigger: 'icon', expandMode: 'single', expandPlacement: 'expand' },
+            isPositive: true,
+        },
+        {
+            id: 'add-expansion-section',
+            request: 'Add a detail expansion section backed by item details.',
+            operationId: 'expansion.configure',
+            params: {
+                sections: [{ id: 'details', type: 'metadata', title: 'Details', itemsExpr: '${item.details}' }],
+            },
+            isPositive: true,
+        },
+        {
+            id: 'style-high-risk-items',
+            request: 'Highlight rows where risk is high.',
+            operationId: 'rules.itemStyle.upsert',
+            params: {
+                id: 'high-risk',
+                condition: { '==': [{ var: 'row.risk' }, 'high'] },
+                class: 'risk-high',
+            },
+            isPositive: true,
+        },
+    ],
+};
+
 function createDemoCover(label, from, to) {
     const svg = `
 <svg xmlns="http://www.w3.org/2000/svg" width="360" height="220" viewBox="0 0 360 220">
@@ -11494,4 +13686,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ExecutiveAlertsComponent, ExecutiveBadgeComponent, ExecutiveOwnerComponent, LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PRAXIS_LIST_EN_US, PRAXIS_LIST_I18N_NAMESPACE, PRAXIS_LIST_PT_BR, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, PraxisListJsonConfigEditorComponent, adaptSelection, buildListApplyPlan, createListAuthoringDocument, evalExpr, evaluateTemplate, inferListAuthoringDocument, inferTemplatingFromSchema, isListTemplateSupportedByRichContentP0, mapListTemplateToRichContentP0, normalizeListActionPayloads, normalizeListAuthoringDocument, normalizeListConfig, parseLegacyOrListDocument, projectListAuthoringDocument, providePraxisListI18n, providePraxisListMetadata, serializeListAuthoringDocument, toCanonicalListConfig, validateListAuthoringDocument };
+export { ExecutiveAlertsComponent, ExecutiveBadgeComponent, ExecutiveOwnerComponent, LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_AUTHORING_MANIFEST, PRAXIS_LIST_COMPONENT_METADATA, PRAXIS_LIST_EN_US, PRAXIS_LIST_I18N_NAMESPACE, PRAXIS_LIST_PT_BR, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, PraxisListJsonConfigEditorComponent, adaptSelection, buildListApplyPlan, createListAuthoringDocument, evalExpr, evaluateTemplate, inferListAuthoringDocument, inferTemplatingFromSchema, isListTemplateSupportedByRichContentP0, mapListTemplateToRichContentP0, normalizeListActionPayloads, normalizeListAuthoringDocument, normalizeListConfig, parseLegacyOrListDocument, projectListAuthoringDocument, providePraxisListI18n, providePraxisListMetadata, serializeListAuthoringDocument, toCanonicalListConfig, validateListAuthoringDocument };