@praxisui/metadata-editor 8.0.0-beta.27 → 8.0.0-beta.29

package/fesm2022/praxisui-metadata-editor.mjs

@@ -530,6 +530,7 @@ class DynamicEditorRendererComponent {
         const order = [
             'geral',
             'apresent',
+            'display',
             'valida',
             'formato',
             'comport',
@@ -594,7 +595,7 @@ class DynamicEditorRendererComponent {
             .replace(/[ñ]/g, 'n');
         if (normalized.includes('geral'))
             return 'widgets';
-        if (normalized.includes('apresent'))
+        if (normalized.includes('apresent') || normalized.includes('display'))
             return 'slideshow';
         if (normalized.includes('dados') || normalized.includes('opcoes'))
             return 'list_alt';
@@ -753,7 +754,7 @@ class DynamicEditorRendererComponent {
         </mat-expansion-panel>
       </mat-accordion>
     </div>
-  `, isInline: true, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, #3f51b5));opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, #3f51b5));opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicEditorRendererComponent, decorators: [{
             type: Component,
@@ -2235,6 +2236,172 @@ const entityLookupProperties = [
         group: 'Exibicao de entidade',
         hint: 'Campo opcional com mensagem de bloqueio quando selectable=false.',
     },
+    {
+        name: 'optionSource.display.preset',
+        label: 'Preset canonico',
+        editorType: 'select',
+        group: 'Display canonico',
+        options: [
+            { value: 'compact', text: 'compact' },
+            { value: 'rich', text: 'rich' },
+            { value: 'directory', text: 'directory' },
+            { value: 'status', text: 'status' },
+            { value: 'reference', text: 'reference' },
+            { value: 'hierarchical', text: 'hierarchical' },
+        ],
+        hint: 'Intencao visual da entidade. Use directory para pessoas/equipes, reference para codigo + descricao e status quando o estado operacional for central.',
+    },
+    {
+        name: 'optionSource.display.usage',
+        label: 'Uso preferencial',
+        editorType: 'select',
+        group: 'Display canonico',
+        options: [
+            { value: 'form', text: 'form' },
+            { value: 'filter', text: 'filter' },
+            { value: 'table-cell', text: 'table-cell' },
+            { value: 'dashboard', text: 'dashboard' },
+            { value: 'wizard', text: 'wizard' },
+            { value: 'review', text: 'review' },
+        ],
+        hint: 'Contexto principal de uso desta option-source sem amarrar a regra a um componente especifico.',
+    },
+    {
+        name: 'optionSource.display.density',
+        label: 'Densidade',
+        editorType: 'select',
+        group: 'Display canonico',
+        options: [
+            { value: 'compact', text: 'compact' },
+            { value: 'comfortable', text: 'comfortable' },
+            { value: 'rich', text: 'rich' },
+        ],
+        hint: 'Densidade preferencial para runtimes. Filtros costumam usar compact; formularios, comfortable; revisoes, rich.',
+    },
+    {
+        name: 'optionSource.display.selectedLayout',
+        label: 'Layout selecionado canonico',
+        editorType: 'select',
+        group: 'Display canonico',
+        options: [
+            { value: 'card', text: 'card' },
+            { value: 'inline', text: 'inline' },
+            { value: 'compact', text: 'compact' },
+            { value: 'token', text: 'token' },
+        ],
+        hint: 'Layout preferencial do valor selecionado publicado pela option-source.',
+    },
+    {
+        name: 'optionSource.display.resultLayout',
+        label: 'Layout de resultados canonico',
+        editorType: 'select',
+        group: 'Display canonico',
+        options: [
+            { value: 'list', text: 'list' },
+            { value: 'denseList', text: 'denseList' },
+            { value: 'table', text: 'table' },
+            { value: 'card', text: 'card' },
+        ],
+        hint: 'Layout preferencial da lista de resultados publicado pela option-source.',
+    },
+    {
+        name: 'optionSource.display.primaryPropertyPath',
+        label: 'Campo primario',
+        editorType: 'text',
+        group: 'Display canonico',
+        hint: 'Campo semantico usado como titulo principal quando diferente de labelPropertyPath.',
+    },
+    {
+        name: 'optionSource.display.fields',
+        label: 'Campos ricos',
+        editorType: 'textarea',
+        group: 'Display canonico',
+        hint: 'JSON array de subinformacoes ricas. Ex.: [{ "key": "role", "propertyPath": "cargo.nome", "label": "Cargo", "icon": "work", "presentation": "text", "tone": "neutral" }, { "key": "department", "propertyPath": "departamento.nome", "label": "Departamento", "icon": "groups", "presentation": "chip", "tone": "info" }].',
+    },
+    {
+        name: 'optionSource.display.secondaryPropertyPaths',
+        label: 'Campos secundarios canonicos',
+        editorType: 'textarea',
+        group: 'Display canonico',
+        hint: 'JSON array ou uma linha por campo usado como subtitulo. Ex.: cargo.nome, departamento.nome.',
+    },
+    {
+        name: 'optionSource.display.badgePropertyPaths',
+        label: 'Campos de badges canonicos',
+        editorType: 'textarea',
+        group: 'Display canonico',
+        hint: 'JSON array ou uma linha por campo materializado como badge/chip.',
+    },
+    {
+        name: 'optionSource.display.avatarPropertyPath',
+        label: 'Campo de avatar',
+        editorType: 'text',
+        group: 'Display canonico',
+        hint: 'Campo usado para avatar/imagem; quando ausente, o runtime pode usar iniciais.',
+    },
+    {
+        name: 'optionSource.display.showAvatar',
+        label: 'Display: avatar',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showCode',
+        label: 'Display: codigo',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showDescription',
+        label: 'Display: descricao',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showStatus',
+        label: 'Display: status',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showBadges',
+        label: 'Display: badges',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showDisabledReason',
+        label: 'Display: motivo bloqueado',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.showResultCount',
+        label: 'Display: contador de resultados',
+        editorType: 'checkbox',
+        group: 'Display canonico',
+    },
+    {
+        name: 'optionSource.display.statusToneMap',
+        label: 'Mapa canonico de tons',
+        editorType: 'textarea',
+        group: 'Display canonico',
+        hint: 'JSON object. Ex.: { "ACTIVE": "success", "BLOCKED": "danger" }.',
+    },
+    {
+        name: 'optionSource.display.badgeKeys',
+        label: 'Chaves canonicas de badges',
+        editorType: 'textarea',
+        group: 'Display canonico',
+        hint: 'JSON array ou uma linha por chave complementar de badge.',
+    },
+    {
+        name: 'optionSource.display.maxVisibleBadges',
+        label: 'Maximo canonico de badges',
+        editorType: 'number',
+        group: 'Display canonico',
+        hint: 'Limite preferencial de badges antes de overflow.',
+    },
     {
         name: 'selectedLayout',
         label: 'Layout selecionado',
@@ -2551,6 +2718,55 @@ const entityLookupProperties = [
             { value: 'modal', text: 'Modal' },
         ],
     },
+    {
+        name: 'optionSource.detail.kind',
+        label: 'Tipo de detalhe',
+        editorType: 'select',
+        group: 'Navegacao',
+        options: [
+            { value: 'surface', text: 'surface' },
+            { value: 'route', text: 'route' },
+            { value: 'href', text: 'href' },
+        ],
+        hint: 'Use surface como contrato canonico de plataforma; route/href ficam como fallback legado.',
+    },
+    {
+        name: 'optionSource.detail.surfaceId',
+        label: 'Surface de detalhe',
+        editorType: 'text',
+        group: 'Navegacao',
+        hint: 'Id da surface item-level preferida. Ex.: view, detail.',
+    },
+    {
+        name: 'optionSource.detail.presentation',
+        label: 'Apresentacao da surface',
+        editorType: 'select',
+        group: 'Navegacao',
+        options: [
+            { value: 'drawer', text: 'Drawer' },
+            { value: 'modal', text: 'Modal' },
+        ],
+        hint: 'Como o runtime deve materializar a surface de detalhe.',
+    },
+    {
+        name: 'optionSource.detail.preferredWidget',
+        label: 'Widget preferido',
+        editorType: 'text',
+        group: 'Navegacao',
+        hint: 'Hint semantico para autoria/discovery. Ex.: praxis-dynamic-form.',
+    },
+    {
+        name: 'optionSource.detail.mode',
+        label: 'Modo da surface',
+        editorType: 'select',
+        group: 'Navegacao',
+        options: [
+            { value: 'view', text: 'view' },
+            { value: 'edit', text: 'edit' },
+            { value: 'create', text: 'create' },
+        ],
+        hint: 'Modo semantico da surface de detalhe.',
+    },
     {
         name: 'optionSource.create.hrefTemplate',
         label: 'Template create href',
@@ -7768,6 +7984,14 @@ class FieldMetadataEditorComponent {
                 this.normalizeJsonArrayProperty(filtering, 'sortOptions');
                 this.normalizeStringListProperty(filtering, 'quickFilterFields');
             }
+            const display = optionSource.display;
+            if (display && typeof display === 'object') {
+                this.normalizeJsonArrayProperty(display, 'fields');
+                this.normalizeStringListProperty(display, 'secondaryPropertyPaths');
+                this.normalizeStringListProperty(display, 'badgePropertyPaths');
+                this.normalizeStringListProperty(display, 'badgeKeys');
+                this.normalizeJsonObjectProperty(display, 'statusToneMap');
+            }
         }
         this.normalizeStringListProperty(patch, 'badgeKeys');
         this.normalizeJsonObjectProperty(patch, 'statusToneMap');
@@ -9188,6 +9412,31 @@ const optionSourceSchema = {
         labelField: { type: 'string' },
         dependsOn: { type: 'string' },
         dependencyFilterMap: { type: 'object' },
+        display: {
+            type: 'object',
+            properties: {
+                preset: { enum: ['compact', 'rich', 'directory', 'status', 'reference', 'hierarchical'] },
+                usage: { enum: ['form', 'filter', 'table-cell', 'dashboard', 'wizard', 'review'] },
+                density: { enum: ['compact', 'comfortable', 'rich'] },
+                selectedLayout: { enum: ['card', 'inline', 'compact', 'token'] },
+                resultLayout: { enum: ['list', 'denseList', 'table', 'card'] },
+                primaryPropertyPath: { type: 'string' },
+                fields: { type: 'array' },
+                secondaryPropertyPaths: { type: 'array' },
+                badgePropertyPaths: { type: 'array' },
+                statusToneMap: { type: 'object' },
+            },
+        },
+        detail: {
+            type: 'object',
+            properties: {
+                kind: { enum: ['surface', 'route', 'href'] },
+                surfaceId: { type: 'string' },
+                presentation: { enum: ['drawer', 'modal'] },
+                preferredWidget: { type: 'string' },
+                mode: { enum: ['view', 'edit', 'create'] },
+            },
+        },
         options: { type: 'array' },
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/metadata-editor",
-  "version": "8.0.0-beta.27",
+  "version": "8.0.0-beta.29",
   "description": "Metadata editor for Praxis UI fields and components with runtime integration.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
@@ -8,10 +8,10 @@
     "@angular/cdk": "^20.0.0",
     "@angular/forms": "^20.0.0",
     "@angular/material": "^20.0.0",
-    "@praxisui/ai": "^8.0.0-beta.27",
-    "@praxisui/core": "^8.0.0-beta.27",
-    "@praxisui/dynamic-fields": "^8.0.0-beta.27",
-    "@praxisui/settings-panel": "^8.0.0-beta.27",
+    "@praxisui/ai": "^8.0.0-beta.29",
+    "@praxisui/core": "^8.0.0-beta.29",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.29",
+    "@praxisui/settings-panel": "^8.0.0-beta.29",
     "rxjs": "~7.8.0"
   },
   "dependencies": {