@praxisui/metadata-editor 10.0.0-rc.37 → 10.0.0-rc.39

package/fesm2022/praxisui-metadata-editor.mjs

@@ -6,7 +6,7 @@ import * as i3$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { isValidCssColor, DynamicFieldLoaderDirective, normalizeCssColorToRgb, providePraxisDynamicFieldsI18n } from '@praxisui/dynamic-fields';
 import * as i2$2 from '@praxisui/core';
-import { providePraxisI18n, PraxisI18nService, PraxisIconDirective, FieldControlType, INLINE_FILTER_CONTROL_TYPES, resolveInlineFilterControlType, ResourceDiscoveryService, normalizeControlTypeToken, providePraxisI18nConfig, RESOURCE_DISCOVERY_I18N_CONFIG, normalizeReactiveDeterminations, ComponentMetadataRegistry } from '@praxisui/core';
+import { providePraxisI18n, PraxisI18nService, PraxisIconDirective, FieldControlType, INLINE_FILTER_CONTROL_TYPES, resolveInlineFilterControlType, ResourceDiscoveryService, mapCatalogFieldsToMetadata, humanizeCatalogFieldName, normalizeControlTypeToken, hasSemanticFieldCalibrationDiff, calibrateFieldMetadataFromSemantics, providePraxisI18nConfig, RESOURCE_DISCOVERY_I18N_CONFIG, normalizeReactiveDeterminations, ComponentMetadataRegistry } from '@praxisui/core';
 import * as i5$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/material/icon';
@@ -653,6 +653,8 @@ const METADATA_EDITOR_EN_US = {
     'praxis.metadataEditor.colorPalette.moveDown': 'Move down',
     'praxis.metadataEditor.colorPalette.remove': 'Remove',
     'praxis.metadataEditor.colorPalette.invalid': 'Enter a valid CSS color or var(--token).',
+    'praxis.metadataEditor.smartCalibrate.action': 'Calibrate from schema',
+    'praxis.metadataEditor.smartCalibrate.tooltip': 'Automatically infers control type (Currency, CPF/CNPJ, Date, Email, Phone, Select, Textarea), humanized label, and corporate defaults from field name and metadata.',
 };
 
 const METADATA_EDITOR_PT_BR = {
@@ -905,6 +907,8 @@ const METADATA_EDITOR_PT_BR = {
     'praxis.metadataEditor.colorPalette.moveDown': 'Mover para baixo',
     'praxis.metadataEditor.colorPalette.remove': 'Remover',
     'praxis.metadataEditor.colorPalette.invalid': 'Informe uma cor CSS válida ou var(--token).',
+    'praxis.metadataEditor.smartCalibrate.action': 'Calibrar pelo schema',
+    'praxis.metadataEditor.smartCalibrate.tooltip': 'Infere automaticamente o tipo de controle (Moeda, CPF/CNPJ, Data, E-mail, Telefone, Seleção, Texto longo), rótulo humanizado e padrões corporativos a partir do nome e metadados do campo.',
 };
 
 function createPraxisMetadataEditorI18nConfig(options = {}) {
@@ -10925,6 +10929,7 @@ class FieldMetadataEditorComponent {
     renderedProps = [];
     initialSnapshot = null;
     initialControlType;
+    initialSeed;
     baselineReady = false;
     formRebuild$ = new Subject();
     hostApplyPatch;
@@ -11104,17 +11109,86 @@ class FieldMetadataEditorComponent {
             if (!option?.responseFields?.length) {
                 continue;
             }
-            const key = this.normalizeResourceCacheKey(option.value);
-            if (key && !this.resourceSchemaFieldsByPath.has(key)) {
-                this.resourceSchemaFieldsByPath.set(key, option.responseFields
-                    .filter((field) => Boolean(field?.name && String(field.name).trim()))
-                    .map((field) => ({
-                    name: String(field.name).trim(),
-                    label: String(field.label ?? '').trim() || String(field.name).trim(),
-                    type: String(field.type ?? field.controlType ?? 'string').trim() || 'string',
-                    controlType: String(field.controlType ?? '').trim() || undefined,
+            const mappedMetas = mapCatalogFieldsToMetadata(option.responseFields);
+            const metaByName = new Map(mappedMetas.map((meta) => [meta.name, meta]));
+            const definitions = option.responseFields
+                .filter((field) => Boolean(field?.name && String(field.name).trim()))
+                .map((field) => {
+                const name = String(field.name).trim();
+                const rawLabel = String(field.label ?? '').trim();
+                const label = rawLabel && rawLabel !== name
+                    ? rawLabel
+                    : humanizeCatalogFieldName(name);
+                const mapped = metaByName.get(name);
+                return {
+                    name,
+                    label,
+                    type: String(field.type ?? field.controlType ?? 'string').trim() ||
+                        'string',
+                    controlType: String(field.controlType ?? mapped?.controlType ?? '').trim() ||
+                        undefined,
                     description: String(field.description ?? '').trim() || undefined,
-                })));
+                    ...(typeof field.format === 'string' && field.format.trim()
+                        ? { format: field.format.trim() }
+                        : {}),
+                    ...(typeof field.required === 'boolean'
+                        ? { required: field.required }
+                        : {}),
+                    ...(typeof field.minimum === 'number'
+                        ? { minimum: field.minimum }
+                        : {}),
+                    ...(typeof field.maximum === 'number'
+                        ? { maximum: field.maximum }
+                        : {}),
+                    ...(typeof field.minLength === 'number'
+                        ? { minLength: field.minLength }
+                        : {}),
+                    ...(typeof field.maxLength === 'number'
+                        ? { maxLength: field.maxLength }
+                        : {}),
+                    ...(typeof field.pattern === 'string' && field.pattern.trim()
+                        ? { pattern: field.pattern.trim() }
+                        : {}),
+                    ...(Array.isArray(field.enumValues)
+                        ? { enumValues: field.enumValues }
+                        : {}),
+                    ...(mapped?.options?.length
+                        ? {
+                            options: mapped.options.map((opt) => {
+                                const optLabel = String(opt.label ?? opt.text ?? opt.value);
+                                return {
+                                    key: String(opt.value),
+                                    value: String(opt.value),
+                                    label: optLabel,
+                                    text: opt.text ?? optLabel,
+                                };
+                            }),
+                        }
+                        : {}),
+                };
+            });
+            if (!definitions.length) {
+                continue;
+            }
+            const candidateKeys = new Set();
+            for (const candidate of [option.value, option.path, option.resourceKey]) {
+                const raw = String(candidate ?? '').trim();
+                if (!raw)
+                    continue;
+                const normalized = this.normalizeResourceCacheKey(raw);
+                if (normalized)
+                    candidateKeys.add(normalized);
+                const stripped = raw.replace(/^\/+|\/+$/g, '');
+                if (stripped)
+                    candidateKeys.add(stripped);
+                const withoutApi = stripped.replace(/^api\/+/i, '');
+                if (withoutApi)
+                    candidateKeys.add(withoutApi);
+            }
+            for (const cacheKey of candidateKeys) {
+                if (!this.resourceSchemaFieldsByPath.has(cacheKey)) {
+                    this.resourceSchemaFieldsByPath.set(cacheKey, definitions);
+                }
             }
         }
     }
@@ -11256,6 +11330,9 @@ class FieldMetadataEditorComponent {
         if (this.initialControlType === undefined) {
             this.initialControlType = ct;
         }
+        if (this.initialSeed === undefined) {
+            this.initialSeed = this.cloneSnapshot(this.seed ?? {});
+        }
         this.controlType = ct;
         let props = this.registry.getProperties(this.controlType);
         const controlTypeToken = normalizeControlTypeToken(this.controlType);
@@ -11999,6 +12076,9 @@ class FieldMetadataEditorComponent {
         }
     }
     reset() {
+        if (this.initialSeed !== undefined) {
+            this.seed = this.cloneSnapshot(this.initialSeed);
+        }
         if (this.initialControlType !== undefined && this.controlType !== this.initialControlType) {
             this.rebuildEditorForType(this.initialControlType);
         }
@@ -12019,6 +12099,79 @@ class FieldMetadataEditorComponent {
         if (value != null)
             this.onControlTypeChange(value);
     }
+    tx(key, fallback) {
+        const namespacedKey = key.startsWith('praxis.metadataEditor.')
+            ? key
+            : `praxis.metadataEditor.${key}`;
+        return this.i18n?.t(namespacedKey, undefined, fallback) ?? fallback;
+    }
+    buildCurrentSemanticFieldSnapshot() {
+        const currentRaw = this.form?.getRawValue?.() ?? {};
+        const merged = {
+            ...(this.seed || {}),
+        };
+        for (const [k, v] of Object.entries(currentRaw)) {
+            if (v !== undefined && v !== null && v !== '') {
+                merged[k] = v;
+            }
+        }
+        merged['name'] = String(currentRaw?.name ?? this.seed?.name ?? '').trim();
+        merged['controlType'] = this.controlType;
+        return merged;
+    }
+    canCalibrateFromSemantics() {
+        const snapshot = this.buildCurrentSemanticFieldSnapshot();
+        return hasSemanticFieldCalibrationDiff(snapshot);
+    }
+    calibrateFromSemantics() {
+        const mergedField = this.buildCurrentSemanticFieldSnapshot();
+        if (!hasSemanticFieldCalibrationDiff(mergedField)) {
+            return;
+        }
+        const calibrated = calibrateFieldMetadataFromSemantics(mergedField);
+        this.seed = {
+            ...(this.seed || {}),
+            ...calibrated,
+        };
+        const nextControlType = (calibrated.controlType ?? this.controlType);
+        if (nextControlType && nextControlType !== this.controlType) {
+            this.rebuildEditorForType(nextControlType);
+        }
+        const getByPath = (obj, path) => {
+            if (!obj || typeof obj !== 'object' || !path)
+                return undefined;
+            return path.split('.').reduce((acc, part) => (acc == null ? undefined : acc[part]), obj);
+        };
+        const formPatch = {};
+        for (const prop of this.normalizedProps || []) {
+            const propName = String(prop?.name ?? '').trim();
+            if (!propName)
+                continue;
+            const rawVal = getByPath(calibrated, propName);
+            if (rawVal === undefined)
+                continue;
+            const controlVal = this.toEditorControlValue(prop, rawVal);
+            if (controlVal !== undefined && controlVal !== null) {
+                try {
+                    this.factory.setValueByPath(this.form, propName, controlVal);
+                }
+                catch { }
+                if (!propName.includes('.') && this.form?.get(propName)) {
+                    formPatch[propName] = controlVal;
+                }
+            }
+        }
+        if (calibrated.options !== undefined &&
+            !this.form?.get('options') &&
+            this.form?.get('providerOptions')) {
+            const prop = this.normalizedProps?.find((p) => p?.name === 'providerOptions');
+            formPatch['providerOptions'] = this.toEditorControlValue(prop, calibrated.options);
+        }
+        if (Object.keys(formPatch).length > 0) {
+            this.form.patchValue(formPatch, { emitEvent: true });
+        }
+        this.isDirty$.next(true);
+    }
     withSharedFieldMetadataProperties(props) {
         const propNames = new Set(props.map((prop) => prop.name));
         const sharedProps = [...fieldPresentationProperties, ...fieldSubmitProperties];
@@ -12323,6 +12476,7 @@ class FieldMetadataEditorComponent {
         const statusKey = findExact([
             'status',
             'situacao',
+            'situacaofuncional',
             'ativo',
             'active',
             'estado',
@@ -12460,6 +12614,20 @@ class FieldMetadataEditorComponent {
         ], ngImport: i0, template: `
     @if (form) {
       <div class="p-3">
+        @if (canCalibrateFromSemantics()) {
+          <div class="d-flex justify-content-end mb-2">
+            <button
+              mat-stroked-button
+              type="button"
+              data-testid="field-metadata-smart-calibrate-btn"
+              (click)="calibrateFromSemantics()"
+              [matTooltip]="tx('smartCalibrate.tooltip', 'Infere automaticamente o tipo de controle, rótulo humanizado e padrões corporativos a partir do nome e metadados do campo.')"
+            >
+              <mat-icon aria-hidden="true">auto_fix_high</mat-icon>
+              {{ tx('smartCalibrate.action', 'Calibrar pelo schema') }}
+            </button>
+          </div>
+        }
         <praxis-dynamic-editor-renderer
           [properties]="renderedProps"
           [form]="form"
@@ -12472,7 +12640,7 @@ class FieldMetadataEditorComponent {
         }
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DynamicEditorRendererComponent, selector: "praxis-dynamic-editor-renderer", inputs: ["properties", "form"] }, { kind: "component", type: ArrayItemSchemaFieldsEditorComponent, selector: "praxis-array-item-schema-fields-editor", inputs: ["control", "arrayControl"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DynamicEditorRendererComponent, selector: "praxis-dynamic-editor-renderer", inputs: ["properties", "form"] }, { kind: "component", type: ArrayItemSchemaFieldsEditorComponent, selector: "praxis-array-item-schema-fields-editor", inputs: ["control", "arrayControl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldMetadataEditorComponent, decorators: [{
             type: Component,
@@ -12481,6 +12649,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     standalone: true,
                     imports: [
                         ReactiveFormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
                         DynamicEditorRendererComponent,
                         ArrayItemSchemaFieldsEditorComponent
                     ],
@@ -12492,6 +12663,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     template: `
     @if (form) {
       <div class="p-3">
+        @if (canCalibrateFromSemantics()) {
+          <div class="d-flex justify-content-end mb-2">
+            <button
+              mat-stroked-button
+              type="button"
+              data-testid="field-metadata-smart-calibrate-btn"
+              (click)="calibrateFromSemantics()"
+              [matTooltip]="tx('smartCalibrate.tooltip', 'Infere automaticamente o tipo de controle, rótulo humanizado e padrões corporativos a partir do nome e metadados do campo.')"
+            >
+              <mat-icon aria-hidden="true">auto_fix_high</mat-icon>
+              {{ tx('smartCalibrate.action', 'Calibrar pelo schema') }}
+            </button>
+          </div>
+        }
         <praxis-dynamic-editor-renderer
           [properties]="renderedProps"
           [form]="form"
@@ -12677,16 +12862,132 @@ class CascadeRulesService {
             dependencyLoadOnChange: null,
         };
     }
-    /** Suggest a basic mapping dep->dep and a default valuePath */
+    /** Fill missing mappings and value paths without replacing authored values. */
     suggest(rule, inferredValueKey) {
-        const map = {};
-        (rule.dependencyFields || []).forEach((dep) => (map[dep] = dep));
+        const map = { ...rule.dependencyFilterMap };
+        (rule.dependencyFields || []).forEach((dep) => {
+            if (!Object.prototype.hasOwnProperty.call(map, dep))
+                map[dep] = dep;
+        });
         return {
             ...rule,
             dependencyFilterMap: Object.keys(map).length ? map : rule.dependencyFilterMap,
             dependencyValuePath: rule.dependencyValuePath || inferredValueKey || 'id',
         };
     }
+    /**
+     * Validates the cascade dependency graph directly from an array of FieldMetadata/FieldDefinition.
+     */
+    validateFieldsCascadeGraph(fields) {
+        const rules = new Map();
+        for (const field of fields || []) {
+            const vm = this.hydrateRule(field);
+            if (vm) {
+                rules.set(field.name, vm);
+            }
+        }
+        return this.validateCascadeGraph(rules, fields);
+    }
+    /**
+     * Detects self-references, direct cycles (A -> B -> A) and indirect cycles (A -> B -> C -> A),
+     * including graphs where fields have multiple parent dependencies.
+     */
+    validateCascadeGraph(rules, fields = []) {
+        const ruleEntries = rules instanceof Map ? Array.from(rules.entries()) : Object.entries(rules || {});
+        const labelMap = this.getFieldLabelMap([...fields]);
+        const formatNode = (name) => {
+            const label = labelMap.get(name);
+            return label && label !== name ? `${label} (${name})` : name;
+        };
+        const adjacency = new Map();
+        for (const [target, rule] of ruleEntries) {
+            if (!rule || rule.enableDependencyCascade === false)
+                continue;
+            const deps = (rule.dependencyFields || [])
+                .filter((dep) => typeof dep === 'string')
+                .map((dep) => dep.trim())
+                .filter(Boolean);
+            if (deps.length > 0) {
+                adjacency.set(target, Array.from(new Set(deps)));
+            }
+        }
+        const cycles = [];
+        const fieldsInCycles = new Set();
+        const recordedCycleSignatures = new Set();
+        const canonicalizeCycle = (cyclePath) => {
+            const loop = cyclePath.slice(0, -1);
+            if (loop.length <= 1)
+                return loop.join('->');
+            let minIdx = 0;
+            for (let i = 1; i < loop.length; i++) {
+                if (loop[i].localeCompare(loop[minIdx]) < 0) {
+                    minIdx = i;
+                }
+            }
+            const rotated = [...loop.slice(minIdx), ...loop.slice(0, minIdx)];
+            return rotated.join('->');
+        };
+        const recordCycle = (rawCyclePath) => {
+            const signature = canonicalizeCycle(rawCyclePath);
+            if (recordedCycleSignatures.has(signature))
+                return;
+            recordedCycleSignatures.add(signature);
+            const loop = rawCyclePath.slice(0, -1);
+            loop.forEach((f) => fieldsInCycles.add(f));
+            const isSelfReference = loop.length === 1;
+            const formattedPath = rawCyclePath.map(formatNode).join(' → ');
+            const lastParent = rawCyclePath[rawCyclePath.length - 2];
+            const closingField = rawCyclePath[rawCyclePath.length - 1];
+            const message = isSelfReference
+                ? `Autorreferência inválida: o campo ${formatNode(closingField)} não pode depender de si mesmo. Remova "${closingField}" da lista de campos pais.`
+                : `Dependência circular detectada: ${formattedPath}. Para corrigir, remova a dependência entre ${formatNode(lastParent)} e ${formatNode(closingField)} em um dos campos do ciclo.`;
+            cycles.push({
+                path: rawCyclePath,
+                formattedPath,
+                isSelfReference,
+                message,
+            });
+        };
+        const sortedNodes = Array.from(adjacency.keys()).sort((a, b) => a.localeCompare(b));
+        const globallyVisited = new Set();
+        for (const startNode of sortedNodes) {
+            const stack = [];
+            const onStack = new Set();
+            const dfs = (current) => {
+                stack.push(current);
+                onStack.add(current);
+                const neighbors = adjacency.get(current) || [];
+                for (const dep of neighbors) {
+                    if (dep === current) {
+                        recordCycle([current, current]);
+                        continue;
+                    }
+                    if (onStack.has(dep)) {
+                        const cycleStartIndex = stack.indexOf(dep);
+                        if (cycleStartIndex >= 0) {
+                            const cyclePath = [...stack.slice(cycleStartIndex), dep];
+                            recordCycle(cyclePath);
+                        }
+                        continue;
+                    }
+                    if (!globallyVisited.has(dep) && adjacency.has(dep)) {
+                        dfs(dep);
+                    }
+                }
+                stack.pop();
+                onStack.delete(current);
+                globallyVisited.add(current);
+            };
+            if (!globallyVisited.has(startNode)) {
+                dfs(startNode);
+            }
+        }
+        return {
+            valid: cycles.length === 0,
+            cycles,
+            fieldsInCycles,
+        };
+    }
     normalizeDependencyFields(value) {
         if (Array.isArray(value)) {
             const deps = value
@@ -12715,6 +13016,7 @@ class CascadeManagerTabComponent {
     connections; // optional signal for conflicts
     apply = new EventEmitter();
     cancel = new EventEmitter();
+    validChange = new EventEmitter();
     searchTerm = '';
     searchTimer = null;
     searchValue = '';
@@ -12729,12 +13031,14 @@ class CascadeManagerTabComponent {
     editLoadOn = 'respectLoadOn';
     editDebounce = 150;
     editValuePath = '';
-    editFilterMapJson = '';
     importMode = false;
     importJson = '';
     feedbackMessage = '';
     feedbackTone = 'info';
     editMapRows = [];
+    editInitialFilterMap = {};
+    editInitialValuePath = 'id';
+    lastEmittedValid = null;
     setFeedback(message, tone = 'info') {
         this.feedbackMessage = message;
         this.feedbackTone = tone;
@@ -12755,20 +13059,17 @@ class CascadeManagerTabComponent {
             this.selectedFieldSig.set(this.fields[0].name);
             this.startEdit(this.fields[0].name);
         }
+        this.syncValidityState();
     }
     ngOnChanges(changes) {
         if (changes['fields'] && !changes['fields'].firstChange) {
-            // Re-hydrate rules from incoming fields while preserving existing ones when possible
+            // Re-hydrate rules from incoming fields; incoming fields own the canonical state
             const incoming = this.fields || [];
             const next = new Map();
-            // keep existing for fields still present
             for (const f of incoming) {
-                const existing = this.rules().get(f.name);
                 const hydrated = this.svc.hydrateRule(f);
                 if (hydrated)
                     next.set(f.name, hydrated);
-                else if (existing)
-                    next.set(f.name, existing);
             }
             this.rules.set(next);
             // preserve selection if still valid
@@ -12776,29 +13077,114 @@ class CascadeManagerTabComponent {
             if (sel && !incoming.some((f) => f.name === sel)) {
                 this.selectedFieldSig.set(incoming[0]?.name ?? null);
             }
+            const activeSel = this.selectedField();
+            if (activeSel) {
+                this.startEdit(activeSel);
+            }
+            this.syncValidityState();
         }
     }
-    _logCount = 0;
     filteredFields() {
         const q = (this.searchValue || '').toLowerCase();
         const labelMap = this.svc.getFieldLabelMap(this.fields);
         const result = this.fields
             .filter((f) => !q || f.name.toLowerCase().includes(q) || (labelMap.get(f.name) || '').toLowerCase().includes(q))
-            .sort((a, b) => (labelMap.get(a.name) || a.name).localeCompare(labelMap.get(b.name) || b.name));
+            .sort((a, b) => {
+            const labelCmp = (labelMap.get(a.name) || a.name).localeCompare(labelMap.get(b.name) || b.name);
+            return labelCmp !== 0 ? labelCmp : a.name.localeCompare(b.name);
+        });
         return result;
     }
     labelFor(name) {
         return this.svc.getFieldLabelMap(this.fields).get(name) || name;
     }
+    /**
+     * Disambiguates fields that share the same display label (e.g. "Cargo" for both `cargoId` and `cargoNome`).
+     */
+    disambiguatedLabelFor(name) {
+        const baseLabel = this.labelFor(name);
+        const duplicateCount = this.fields.filter((f) => (f.label || f.name).trim().toLowerCase() === baseLabel.trim().toLowerCase()).length;
+        if (duplicateCount <= 1) {
+            return baseLabel;
+        }
+        const roleHint = this.hasRemoteOptionSource(name) || /id$/i.test(name)
+            ? 'Selecionável · ID'
+            : 'Texto / Nome';
+        return `${baseLabel} — ${roleHint}`;
+    }
+    hasRemoteOptionSource(name) {
+        const f = this.fields.find((item) => item.name === name);
+        if (!f)
+            return false;
+        return Boolean(f.resourcePath ||
+            f.endpoint ||
+            f.optionSource?.resourcePath ||
+            f.optionSource?.key ||
+            f.controlType === 'async-select' ||
+            f.controlType === 'entity-lookup' ||
+            f.controlType === 'select' ||
+            f.controlType === 'multi-select');
+    }
+    fieldRoleBadge(name) {
+        const f = this.fields.find((item) => item.name === name);
+        if (!f)
+            return 'Campo';
+        const hasEndpoint = Boolean(f.resourcePath || f.endpoint || f.optionSource?.resourcePath || f.optionSource?.key);
+        if (hasEndpoint) {
+            return 'Opções remotas';
+        }
+        if (f.controlType === 'select' || f.controlType === 'async-select' || f.controlType === 'multi-select' || /id$/i.test(name)) {
+            return 'Selecionável';
+        }
+        return 'Texto / Exibição';
+    }
+    fieldRoleSummary(name) {
+        const f = this.fields.find((item) => item.name === name);
+        if (!f)
+            return 'Campo do formulário';
+        const resourcePath = f.resourcePath || f.optionSource?.resourcePath || f.endpoint;
+        if (resourcePath) {
+            return `Carrega opções de "${resourcePath}"`;
+        }
+        return `${this.fieldRoleBadge(name)} (${f.controlType || 'input'})`;
+    }
+    formatParentList(deps) {
+        if (!deps || !deps.length)
+            return '—';
+        return deps.map((d) => `${this.disambiguatedLabelFor(d)} (${d})`).join(', ');
+    }
+    formatRelationshipSummary(targetField, deps) {
+        if (!deps || !deps.length) {
+            return `Nenhum campo pai selecionado para ${this.disambiguatedLabelFor(targetField)} (${targetField}).`;
+        }
+        const parents = deps.map((d) => `${this.disambiguatedLabelFor(d)} (${d})`).join(' + ');
+        return `${parents} → filtra opções de ${this.disambiguatedLabelFor(targetField)} (${targetField})`;
+    }
+    formatLoadOnLabel(policy) {
+        switch (policy) {
+            case 'immediate':
+                return 'Imediato ao mudar o pai (immediate)';
+            case 'manual':
+                return 'Manual / sob demanda (manual)';
+            default:
+                return 'Seguir configuração do campo (respectLoadOn)';
+        }
+    }
+    formatMergeStrategyLabel(strategy) {
+        return strategy === 'replace'
+            ? 'Substituir filtros (replace)'
+            : 'Mesclar filtros (merge)';
+    }
     selectedField() {
         return this.selectedFieldSig();
     }
     selectField(name) {
         this.selectedFieldSig.set(name);
         this.startEdit(name);
+        this.syncValidityState();
     }
     hasRule(name) {
-        return this.rules().has(name);
+        return (this.rules().get(name)?.dependencyFields?.length ?? 0) > 0;
     }
     ruleFor(name) {
         return this.rules().get(name) || null;
@@ -12814,6 +13200,52 @@ class CascadeManagerTabComponent {
             return false;
         return this.connections.some((c) => c.toFieldName === name && (c.toInputPath || '').includes('filterCriteria'));
     }
+    /**
+     * Computes graph validation combining saved rules with any active draft in the inline editor.
+     */
+    validateCurrentGraph(includeDraft = true) {
+        const effectiveRules = new Map(this.rules());
+        const sel = this.selectedField();
+        if (includeDraft && this.editing() && sel) {
+            const draftDeps = (this.editDepList || []).filter(Boolean);
+            if (draftDeps.length > 0) {
+                effectiveRules.set(sel, {
+                    targetField: sel,
+                    dependencyFields: draftDeps,
+                    enableDependencyCascade: this.editEnable,
+                    resetOnDependentChange: this.editReset,
+                    dependencyFilterMap: {},
+                    dependencyValuePath: this.editValuePath || 'id',
+                    dependencyMergeStrategy: this.editMerge,
+                    dependencyDebounceMs: this.editDebounce ?? 150,
+                    dependencyLoadOnChange: this.editLoadOn,
+                });
+            }
+            else {
+                effectiveRules.delete(sel);
+            }
+        }
+        return this.svc.validateCascadeGraph(effectiveRules, this.fields);
+    }
+    activeCycleDiagnostics() {
+        return this.validateCurrentGraph(true).cycles;
+    }
+    isFieldInCycle(name) {
+        return this.validateCurrentGraph(true).fieldsInCycles.has(name);
+    }
+    hasBlockingErrors() {
+        return !this.validateCurrentGraph(true).valid;
+    }
+    syncValidityState() {
+        const isValid = this.validateCurrentGraph(true).valid;
+        if (this.lastEmittedValid !== isValid) {
+            this.lastEmittedValid = isValid;
+            this.validChange.emit(isValid);
+        }
+    }
+    onDraftControlChange() {
+        this.syncValidityState();
+    }
     startEdit(name) {
         const existing = this.ruleFor(name);
         const base = existing || {
@@ -12836,63 +13268,138 @@ class CascadeManagerTabComponent {
         this.editLoadOn = suggested.dependencyLoadOnChange || 'respectLoadOn';
         this.editDebounce = suggested.dependencyDebounceMs ?? 150;
         this.editValuePath = (typeof suggested.dependencyValuePath === 'string' ? suggested.dependencyValuePath : 'id') || '';
-        try {
-            this.editFilterMapJson = suggested.dependencyFilterMap ? JSON.stringify(suggested.dependencyFilterMap, null, 2) : '';
-        }
-        catch {
-            this.editFilterMapJson = '';
-        }
+        this.editInitialFilterMap = structuredClone(suggested.dependencyFilterMap || {});
+        this.editInitialValuePath = structuredClone(suggested.dependencyValuePath || 'id');
+        this.editMapRows = [];
         // Build mapping rows from dependencies
         this.buildMapRowsFromDeps();
         this.editing.set(true);
+        this.syncValidityState();
     }
     edit(name) { this.startEdit(name); }
-    cancelEdit() { this.editing.set(false); }
+    cancelEdit() {
+        const sel = this.selectedField();
+        if (sel) {
+            // Restore draft from committed rule before closing inline edit
+            const existing = this.ruleFor(sel);
+            this.editDepList = existing ? [...existing.dependencyFields] : [];
+            this.editEnable = existing ? existing.enableDependencyCascade : true;
+        }
+        this.editing.set(false);
+        this.syncValidityState();
+    }
     saveEdit(name) {
-        // Build rule from editor
+        // Build rule from editor (preserving self-reference prevention)
         const deps = this.editDepList.filter((s) => !!s && s !== name);
-        // Build map from rows; fallback to JSON when provided
-        let map = {};
-        this.editMapRows.forEach((r) => { if (!r.key && r.dep)
-            r.key = r.dep; if (r.dep)
-            map[r.dep] = r.valuePath ? { key: r.key || r.dep, valuePath: r.valuePath } : (r.key || r.dep); });
-        const raw = (this.editFilterMapJson || '').trim();
-        if (raw) {
-            try {
-                const fromJson = JSON.parse(raw);
-                map = { ...map, ...fromJson };
+        this.editDepList = [...deps];
+        // The rows own the draft. The opening snapshot only preserves entry shape;
+        // merging the original JSON after the rows would silently undo visual edits.
+        const map = structuredClone(this.editInitialFilterMap);
+        const dependenciesRemoved = (this.ruleFor(name)?.dependencyFields || [])
+            .some((dep) => !deps.includes(dep));
+        if (dependenciesRemoved) {
+            for (const dep of Object.keys(map)) {
+                if (!deps.includes(dep))
+                    delete map[dep];
             }
-            catch {
-                this.setFeedback('Mapeamento de filtros inválido (JSON).', 'error');
-                return;
+        }
+        for (const row of this.editMapRows) {
+            if (!deps.includes(row.dep))
+                continue;
+            const initial = this.editInitialFilterMap[row.dep];
+            const initialPath = this.initialRowValuePath(row.dep);
+            if (typeof initial === 'object' && initial !== null) {
+                const entry = { ...initial, key: row.key || row.dep };
+                if (row.valuePath !== initialPath) {
+                    if (row.valuePath)
+                        entry.valuePath = row.valuePath;
+                    else
+                        delete entry.valuePath;
+                }
+                map[row.dep] = entry;
+            }
+            else {
+                map[row.dep] = row.valuePath && row.valuePath !== initialPath
+                    ? { key: row.key || row.dep, valuePath: row.valuePath }
+                    : row.key || row.dep;
+            }
+        }
+        const valuePaths = this.buildValuePathOverrides(deps);
+        // Removed dependencies must lose their extraction overrides as well as their
+        // filter mappings, otherwise re-adding one resurrects stale extraction state.
+        if (dependenciesRemoved && typeof valuePaths === 'object') {
+            for (const dep of Object.keys(valuePaths)) {
+                if (!deps.includes(dep))
+                    delete valuePaths[dep];
             }
         }
-        this.setFeedback('');
         const rule = {
             targetField: name,
             dependencyFields: deps,
             enableDependencyCascade: this.editEnable,
             resetOnDependentChange: this.editReset,
             dependencyFilterMap: map,
-            dependencyValuePath: this.buildValuePathOverrides(deps),
+            dependencyValuePath: valuePaths,
             dependencyMergeStrategy: this.editMerge,
             dependencyDebounceMs: this.editDebounce ?? 150,
             dependencyLoadOnChange: this.editLoadOn,
         };
         const next = new Map(this.rules());
         next.set(name, rule);
+        const validation = this.svc.validateCascadeGraph(next, this.fields);
+        if (validation.fieldsInCycles.has(name)) {
+            const fieldCycle = validation.cycles.find((c) => c.path.includes(name)) || validation.cycles[0];
+            this.setFeedback(fieldCycle.message, 'error');
+            this.syncValidityState();
+            return;
+        }
+        if (!validation.valid) {
+            this.setFeedback(validation.cycles[0].message, 'error');
+        }
+        else {
+            this.setFeedback('');
+        }
         this.rules.set(next);
         this.emitPatch();
         this.editing.set(false);
+        this.syncValidityState();
+    }
+    /**
+     * Removes cyclic dependencies from the given field's draft (and saved rule if present).
+     */
+    breakCycleForField(name) {
+        const currentValidation = this.validateCurrentGraph(true);
+        if (!currentValidation.fieldsInCycles.has(name)) {
+            return;
+        }
+        const cyclicTargets = new Set([name]);
+        for (const cycle of currentValidation.cycles) {
+            for (let i = 0; i < cycle.path.length - 1; i++) {
+                if (cycle.path[i] === name) {
+                    cyclicTargets.add(cycle.path[i + 1]);
+                }
+            }
+        }
+        this.editDepList = (this.editDepList || []).filter((dep) => !cyclicTargets.has(dep));
+        this.onDepListChange();
+        if (this.rules().has(name)) {
+            this.saveEdit(name);
+        }
     }
     remove(name) {
         const next = new Map(this.rules());
         next.delete(name);
         this.rules.set(next);
+        if (this.selectedField() === name) {
+            this.editDepList = [];
+            this.editMapRows = [];
+        }
         const patch = {
             [name]: this.svc.clearPatch(),
         };
+        this.setFeedback('');
         this.apply.emit(patch);
+        this.syncValidityState();
     }
     quickSet(name, action) {
         const current = this.ruleFor(name);
@@ -12907,6 +13414,7 @@ class CascadeManagerTabComponent {
         map.set(name, next);
         this.rules.set(map);
         this.emitPatch();
+        this.syncValidityState();
     }
     emitPatch() {
         const out = {};
@@ -12974,14 +13482,26 @@ class CascadeManagerTabComponent {
             };
             next.set(field, vm);
         });
+        const validation = this.svc.validateCascadeGraph(next, this.fields);
         this.rules.set(next);
+        const sel = this.selectedField();
+        if (sel && next.has(sel)) {
+            this.startEdit(sel);
+        }
+        if (!validation.valid) {
+            this.setFeedback(validation.cycles[0].message, 'error');
+            this.syncValidityState();
+            return;
+        }
         this.emitPatch();
         this.importMode = false;
+        this.syncValidityState();
     }
     startTemplate(name, tpl) {
         const hasR = this.hasField('rotaId');
         const hasD = this.hasField('destinoReqId');
-        const deps = tpl === 'rota-destino' ? (hasR ? ['rotaId'] : []) : (hasR && hasD ? ['rotaId', 'destinoReqId'] : []);
+        const deps = (tpl === 'rota-destino' ? (hasR ? ['rotaId'] : []) : (hasR && hasD ? ['rotaId', 'destinoReqId'] : []))
+            .filter((dep) => dep !== name);
         this.editDepList = [...deps];
         this.editEnable = true;
         this.editReset = true;
@@ -12989,40 +13509,73 @@ class CascadeManagerTabComponent {
         this.editLoadOn = 'respectLoadOn';
         this.editDebounce = 150;
         this.editValuePath = 'id';
+        this.editInitialFilterMap = {};
+        this.editInitialValuePath = 'id';
+        this.editMapRows = [];
         this.buildMapRowsFromDeps();
         this.editing.set(true);
+        this.syncValidityState();
     }
     buildMapRowsFromDeps() {
         const deps = this.editDepList;
-        const existing = (() => { try {
-            return JSON.parse(this.editFilterMapJson || '{}');
-        }
-        catch {
-            return {};
-        } })();
+        const current = new Map(this.editMapRows.map((row) => [row.dep, row]));
         this.editMapRows = deps.map((dep) => {
-            const entry = existing[dep];
-            if (!entry)
-                return { dep, key: dep };
-            if (typeof entry === 'string')
-                return { dep, key: entry };
-            return { dep, key: entry.key || dep, valuePath: entry.valuePath };
+            const edited = current.get(dep);
+            if (edited)
+                return edited;
+            const entry = this.editInitialFilterMap[dep];
+            const key = typeof entry === 'string' ? entry : entry?.key || dep;
+            return { dep, key, valuePath: this.initialRowValuePath(dep) };
         });
     }
+    initialRowValuePath(dep) {
+        const entry = this.editInitialFilterMap[dep];
+        if (typeof entry === 'object' && entry?.valuePath)
+            return entry.valuePath;
+        return typeof this.editInitialValuePath === 'object'
+            ? this.editInitialValuePath[dep]
+            : undefined;
+    }
     buildValuePathOverrides(deps) {
-        // If any row defines a valuePath, return a record; else return default string
-        const record = {};
-        this.editMapRows.forEach((r) => { if (r.valuePath)
-            record[r.dep] = r.valuePath; });
-        const hasAny = Object.keys(record).length > 0;
-        return hasAny ? record : (this.editValuePath || 'id');
+        const initialDefault = typeof this.editInitialValuePath === 'string'
+            ? this.editInitialValuePath
+            : 'id';
+        const defaultChanged = this.editValuePath !== initialDefault;
+        const pathsChanged = this.editMapRows.some((row) => row.valuePath !== this.initialRowValuePath(row.dep));
+        if (!defaultChanged && !pathsChanged)
+            return structuredClone(this.editInitialValuePath);
+        const wasRecord = typeof this.editInitialValuePath === 'object';
+        if (!pathsChanged && !wasRecord)
+            return this.editValuePath || 'id';
+        // A specific extraction path must not erase the default/overrides used by
+        // other dependencies. Unchanged documents keep their original shape above.
+        const record = typeof this.editInitialValuePath === 'object'
+            ? { ...this.editInitialValuePath }
+            : {};
+        for (const dep of deps) {
+            const row = this.editMapRows.find((candidate) => candidate.dep === dep);
+            if (row && row.valuePath !== this.initialRowValuePath(dep)) {
+                record[dep] = row.valuePath || this.editValuePath || 'id';
+            }
+            else if (typeof this.editInitialValuePath === 'object') {
+                const existing = this.editInitialValuePath[dep];
+                if (existing !== undefined)
+                    record[dep] = existing;
+                else if (defaultChanged)
+                    record[dep] = this.editValuePath || 'id';
+            }
+            else {
+                record[dep] = this.editValuePath || 'id';
+            }
+        }
+        return record;
     }
     buildPreview() {
         try {
-            const deps = this.editDepList;
             const frag = {};
             this.editMapRows.forEach((r) => {
-                const example = r.valuePath ? 123 : 123; // simple placeholder id
+                const extractedProp = r.valuePath || this.editValuePath || 'id';
+                const example = `<valor de ${r.dep}.${extractedProp}>`;
                 const parts = (r.key || r.dep).split('.');
                 let ref = frag;
                 for (let i = 0; i < parts.length - 1; i++) {
@@ -13047,10 +13600,14 @@ class CascadeManagerTabComponent {
         const labelMap = this.svc.getFieldLabelMap(this.fields);
         return this.fields
             .filter((f) => f.name !== current)
-            .sort((a, b) => (labelMap.get(a.name) || a.name).localeCompare(labelMap.get(b.name) || b.name));
+            .sort((a, b) => {
+            const labelCmp = (labelMap.get(a.name) || a.name).localeCompare(labelMap.get(b.name) || b.name);
+            return labelCmp !== 0 ? labelCmp : a.name.localeCompare(b.name);
+        });
     }
     onDepListChange() {
         this.buildMapRowsFromDeps();
+        this.syncValidityState();
     }
     getKeySuggestions(dep) {
         const suggestions = [dep, `${dep}.id`, `${dep}.value`];
@@ -13070,7 +13627,7 @@ class CascadeManagerTabComponent {
         return [...new Set(suggestions)];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CascadeManagerTabComponent, deps: [{ token: CascadeRulesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CascadeManagerTabComponent, isStandalone: true, selector: "praxis-cascade-manager-tab", inputs: { fields: "fields", connections: "connections" }, outputs: { apply: "apply", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CascadeManagerTabComponent, isStandalone: true, selector: "praxis-cascade-manager-tab", inputs: { fields: "fields", connections: "connections" }, outputs: { apply: "apply", cancel: "cancel", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="cm-root">
       <!-- Left: Fields list -->
       <div class="cm-left">
@@ -13080,14 +13637,29 @@ class CascadeManagerTabComponent {
         </mat-form-field>
         @if (fields.length <= 50) {
           <div>
-            @for (f of filteredFields(); track f) {
-              <div (click)="selectField(f.name)" class="field-item" [class.selected]="f.name===selectedField()" tabindex="0" (keydown)="onFieldKeydown($event, f.name)">
-                <div>
-                  <div>{{ labelFor(f.name) }}</div>
-                  <small style="opacity:.7">{{ f.name }}</small>
+            @for (f of filteredFields(); track f.name) {
+              <div
+                (click)="selectField(f.name)"
+                class="field-item"
+                [class.selected]="f.name===selectedField()"
+                [class.has-cycle]="isFieldInCycle(f.name)"
+                tabindex="0"
+                (keydown)="onFieldKeydown($event, f.name)"
+                >
+                <div class="field-item-main">
+                  <div class="field-item-title">{{ disambiguatedLabelFor(f.name) }}</div>
+                  <div class="field-item-meta">
+                    <span>{{ f.name }}</span>
+                    <span class="field-role-pill" [class.field-role-pill--remote]="hasRemoteOptionSource(f.name)">
+                      {{ fieldRoleBadge(f.name) }}
+                    </span>
+                  </div>
                 </div>
-                @if (hasRule(f.name)) {
-                  <div class="rule-badges">
+                <div class="rule-badges">
+                  @if (isFieldInCycle(f.name)) {
+                    <span class="rule-badge b-conflict">Ciclo</span>
+                  }
+                  @if (hasRule(f.name)) {
                     @if (isCascadeEnabled(f.name)) {
                       <span class="rule-badge b-active">Ativo</span>
                     }
@@ -13095,22 +13667,38 @@ class CascadeManagerTabComponent {
                       <span class="rule-badge b-manual">Manual</span>
                     }
                     @if (loadOnChange(f.name)==='immediate') {
-                      <span class="rule-badge b-immediate">Immediate</span>
+                      <span class="rule-badge b-immediate">Imediato</span>
                     }
-                  </div>
-                }
+                  }
+                </div>
               </div>
             }
           </div>
         } @else {
-          <cdk-virtual-scroll-viewport itemSize="44" style="height: calc(100vh - 240px)">
-            <div *cdkVirtualFor="let f of filteredFields()" (click)="selectField(f.name)" class="field-item" [class.selected]="f.name===selectedField()" tabindex="0" (keydown)="onFieldKeydown($event, f.name)">
-              <div>
-                <div>{{ labelFor(f.name) }}</div>
-                <small style="opacity:.7">{{ f.name }}</small>
+          <cdk-virtual-scroll-viewport itemSize="48" style="height: calc(100vh - 240px)">
+            <div
+              *cdkVirtualFor="let f of filteredFields()"
+              (click)="selectField(f.name)"
+              class="field-item"
+              [class.selected]="f.name===selectedField()"
+              [class.has-cycle]="isFieldInCycle(f.name)"
+              tabindex="0"
+              (keydown)="onFieldKeydown($event, f.name)"
+              >
+              <div class="field-item-main">
+                <div class="field-item-title">{{ disambiguatedLabelFor(f.name) }}</div>
+                <div class="field-item-meta">
+                  <span>{{ f.name }}</span>
+                  <span class="field-role-pill" [class.field-role-pill--remote]="hasRemoteOptionSource(f.name)">
+                    {{ fieldRoleBadge(f.name) }}
+                  </span>
+                </div>
               </div>
-              @if (hasRule(f.name)) {
-                <div class="rule-badges">
+              <div class="rule-badges">
+                @if (isFieldInCycle(f.name)) {
+                  <span class="rule-badge b-conflict">Ciclo</span>
+                }
+                @if (hasRule(f.name)) {
                   @if (isCascadeEnabled(f.name)) {
                     <span class="rule-badge b-active">Ativo</span>
                   }
@@ -13118,27 +13706,27 @@ class CascadeManagerTabComponent {
                     <span class="rule-badge b-manual">Manual</span>
                   }
                   @if (loadOnChange(f.name)==='immediate') {
-                    <span class="rule-badge b-immediate">Immediate</span>
+                    <span class="rule-badge b-immediate">Imediato</span>
                   }
-                </div>
-              }
+                }
+              </div>
             </div>
           </cdk-virtual-scroll-viewport>
         }
       </div>
-    
+
       <!-- Right: Rules for selected field -->
       @if (selectedField(); as sel) {
         <div class="cm-right">
           <div class="cm-header">
             <div>
-              <h3 style="margin:0">{{ labelFor(sel) }}</h3>
-              <div style="opacity:.7">{{ sel }}</div>
+              <h3 style="margin:0">{{ disambiguatedLabelFor(sel) }}</h3>
+              <div style="opacity:.75; font-size:0.85rem">{{ sel }} · {{ fieldRoleSummary(sel) }}</div>
             </div>
             <div>
               <button mat-stroked-button color="primary" (click)="exportRules()" style="margin-right:8px">Exportar</button>
               <button mat-stroked-button (click)="toggleImport()" style="margin-right:8px">Importar</button>
-              <button mat-flat-button color="primary" [matMenuTriggerFor]="addMenu" [disabled]="editing()">Adicionar</button>
+              <button mat-flat-button color="primary" [matMenuTriggerFor]="addMenu">Modelos</button>
               <mat-menu #addMenu="matMenu">
                 <button mat-menu-item (click)="startEdit(sel)"><mat-icon [praxisIcon]="'add'"></mat-icon><span>Em branco</span></button>
                 <button mat-menu-item (click)="startTemplate(sel, 'rota-destino')" [disabled]="!hasField('rotaId') || !hasField('destinoReqId')"><mat-icon [praxisIcon]="'bolt'"></mat-icon><span>Rota → Destino (id)</span></button>
@@ -13146,9 +13734,45 @@ class CascadeManagerTabComponent {
               </mat-menu>
             </div>
           </div>
+
+          @if (activeCycleDiagnostics().length > 0) {
+            <div class="cm-cycle-alert" role="alert" data-testid="cascade-cycle-diagnostic">
+              <mat-icon [praxisIcon]="'error'"></mat-icon>
+              <div class="cm-cycle-alert-body">
+                <strong>Dependência circular detectada — não é possível aplicar enquanto houver ciclo</strong>
+                @for (cycle of activeCycleDiagnostics(); track cycle.formattedPath) {
+                  <div>{{ cycle.message }}</div>
+                }
+                @if (isFieldInCycle(sel)) {
+                  <div style="margin-top: 6px;">
+                    <button
+                      mat-stroked-button
+                      type="button"
+                      data-testid="cascade-break-cycle-button"
+                      (click)="breakCycleForField(sel)"
+                      >
+                      Remover dependência circular deste campo
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
           @if (feedbackMessage) {
             <div class="cm-feedback" [class.cm-feedback--error]="feedbackTone === 'error'" role="status">{{ feedbackMessage }}</div>
           }
+
+          @if (!hasRemoteOptionSource(sel)) {
+            <div class="cm-source-notice" role="note" data-testid="cascade-no-remote-source-notice">
+              <mat-icon [praxisIcon]="'info'"></mat-icon>
+              <div>
+                Este campo ({{ fieldRoleBadge(sel) }}) não declara fonte de opções remota (<code class="kbd">resourcePath</code> / <code class="kbd">optionSource</code>).
+                Campos de texto ou nomes resolvidos exibem valores derivados; para recarregar opções em cascata, selecione o campo selecionável (ex.: ID) correspondente.
+              </div>
+            </div>
+          }
+
           <!-- Conflict banner (connections) -->
           @if (hasConflict(sel)) {
             <div class="banner">
@@ -13161,6 +13785,7 @@ class CascadeManagerTabComponent {
               <button mat-stroked-button color="accent" (click)="quickSet(sel,'manual')">Definir manual</button>
             </div>
           }
+
           @if (importMode) {
             <div class="import-panel">
               <div style="display:flex; gap:8px; align-items:center; margin-bottom:8px"><mat-icon [praxisIcon]="'upload'"></mat-icon><strong>Importar regras (JSON)</strong></div>
@@ -13171,33 +13796,45 @@ class CascadeManagerTabComponent {
               </div>
             </div>
           }
-          @if (!ruleFor(sel)) {
+
+          @if (!hasRule(sel)) {
             <div>
-              <div class="rules-empty">Nenhuma cascata configurada. Clique em “Adicionar” para montar a dependência.</div>
+              <div class="rules-empty" data-testid="cascade-empty-guidance">
+                Nenhuma cascata salva para <strong>{{ disambiguatedLabelFor(sel) }}</strong>.
+                Selecione abaixo em <strong>“Este campo depende de (campos pais)”</strong> quais campos controlam as opções deste campo e clique em <strong>Salvar</strong>.
+              </div>
             </div>
           }
-          @if (ruleFor(sel); as rule) {
+          @if (hasRule(sel) && ruleFor(sel); as rule) {
             <div>
               <div class="rule-row">
                 <div>
-                  <div><strong>Dependentes:</strong> {{ rule.dependencyFields.join(', ') || '—' }}</div>
-                  <div style="opacity:.7">Load on change: {{ rule.dependencyLoadOnChange || 'respectLoadOn' }} | Merge: {{ rule.dependencyMergeStrategy || 'merge' }}</div>
+                  <div><strong>Depende de (campos pais):</strong> {{ formatParentList(rule.dependencyFields) }}</div>
+                  <div class="rule-summary-direction">
+                    <strong>Fluxo:</strong> {{ formatRelationshipSummary(sel, rule.dependencyFields) }}
+                  </div>
+                  <div class="rule-summary-policies">
+                    Quando recarregar: {{ formatLoadOnLabel(rule.dependencyLoadOnChange) }} | Como combinar filtros: {{ formatMergeStrategyLabel(rule.dependencyMergeStrategy) }}
+                  </div>
                 </div>
                 <div class="rule-actions">
-                  <button mat-icon-button matTooltip="Editar" (click)="startEdit(sel)"><mat-icon [praxisIcon]="'edit'"></mat-icon></button>
-                  <button mat-icon-button matTooltip="Duplicar" disabled><mat-icon [praxisIcon]="'content_copy'"></mat-icon></button>
-                  <button mat-icon-button matTooltip="Remover" (click)="remove(sel)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Editar regra de cascata" matTooltip="Editar" (click)="startEdit(sel)"><mat-icon [praxisIcon]="'edit'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Duplicar regra de cascata" matTooltip="Duplicar" disabled><mat-icon [praxisIcon]="'content_copy'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Remover regra de cascata" matTooltip="Remover" (click)="remove(sel)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
                 </div>
               </div>
             </div>
           }
+
           <!-- Editor com seções (sem acordeão duplo) -->
           <div class="panel-surface">
             <div class="panel-header" style="padding: 8px 4px; border-bottom: 1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));">
               <mat-icon [praxisIcon]="'rule'"></mat-icon>
               <div>
                 <div>Cascata do campo</div>
-                <small style="color: var(--md-sys-color-on-surface-variant);">Defina dependentes, quando recarregar e como mapear filtros</small>
+                <small style="color: var(--md-sys-color-on-surface-variant);">
+                  Defina de quais campos pais este campo depende, quando recarregar opções e qual filtro enviar ao serviço
+                </small>
               </div>
             </div>
             <div class="panel-stack">
@@ -13207,13 +13844,16 @@ class CascadeManagerTabComponent {
                   <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'tune'"></mat-icon> Básico</mat-panel-title>
                 </mat-expansion-panel-header>
                 <div class="form-grid">
+                  <p class="section-caption">
+                    Quando o usuário alterar qualquer um dos campos pais escolhidos abaixo, as opções disponíveis em <strong>{{ disambiguatedLabelFor(sel) }}</strong> serão filtradas.
+                  </p>
                   <div class="form-row">
                     <mat-form-field appearance="outline" class="full">
-                      <mat-label>Campos dependentes</mat-label>
+                      <mat-label>Este campo depende de (campos pais)</mat-label>
                       <mat-select multiple [(ngModel)]="editDepList" (ngModelChange)="onDepListChange()">
-                        @for (f of availableDependencyFields(); track f) {
+                        @for (f of availableDependencyFields(); track f.name) {
                           <mat-option [value]="f.name">
-                            {{ labelFor(f.name) }} ({{ f.name }})
+                            {{ disambiguatedLabelFor(f.name) }} ({{ f.name }}) · {{ fieldRoleBadge(f.name) }}
                           </mat-option>
                         }
                       </mat-select>
@@ -13222,42 +13862,54 @@ class CascadeManagerTabComponent {
                         matSuffix
                         class="help-icon-button"
                         type="button"
-                        [matTooltip]="'Selecione os campos que controlam este valor'"
+                        [matTooltip]="'Selecione os campos pais (origem) cujo valor filtrará as opções deste campo (destino)'"
                         matTooltipPosition="above"
                         >
                         <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
                       </button>
                     </mat-form-field>
                   </div>
+                  @if (editDepList.length > 0) {
+                    <div class="section-caption" data-testid="cascade-draft-direction-summary">
+                      <strong>Resumo da relação:</strong> {{ formatRelationshipSummary(sel, editDepList) }}
+                    </div>
+                  }
                   <div class="form-row">
-                    <mat-checkbox [(ngModel)]="editEnable">Ativar cascata nativa</mat-checkbox>
-                    <mat-checkbox [(ngModel)]="editReset">Resetar ao mudar</mat-checkbox>
+                    <mat-checkbox [(ngModel)]="editEnable" (ngModelChange)="onDraftControlChange()">
+                      Ativar cascata automática neste campo
+                    </mat-checkbox>
+                    <mat-checkbox [(ngModel)]="editReset" (ngModelChange)="onDraftControlChange()">
+                      Limpar seleção deste campo quando o campo pai mudar
+                    </mat-checkbox>
                   </div>
                 </div>
               </mat-expansion-panel>
               <!-- Execução -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'schedule'"></mat-icon> Execução</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'schedule'"></mat-icon> Quando recarregar e combinar filtros</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption">
+                  Controle o momento em que a consulta de opções é disparada e como o filtro do campo pai convive com outros filtros do campo.
+                </p>
                 <div class="form-row">
                   <mat-form-field appearance="outline">
-                    <mat-label>Carregar ao mudar</mat-label>
+                    <mat-label>Quando recarregar opções</mat-label>
                     <mat-select [(ngModel)]="editLoadOn">
-                      <mat-option value="respectLoadOn">Respeitar loadOn</mat-option>
-                      <mat-option value="immediate">Imediato</mat-option>
-                      <mat-option value="manual">Manual</mat-option>
+                      <mat-option value="respectLoadOn">Seguir configuração do campo (respectLoadOn)</mat-option>
+                      <mat-option value="immediate">Recarregar imediatamente ao mudar o pai (immediate)</mat-option>
+                      <mat-option value="manual">Somente sob comando manual / abertura (manual)</mat-option>
                     </mat-select>
                   </mat-form-field>
                   <mat-form-field appearance="outline">
-                    <mat-label>Merge de filtros</mat-label>
+                    <mat-label>Como combinar filtros</mat-label>
                     <mat-select [(ngModel)]="editMerge">
-                      <mat-option value="merge">merge (padrão)</mat-option>
-                      <mat-option value="replace">replace</mat-option>
+                      <mat-option value="merge">Mesclar com filtros existentes (merge — padrão)</mat-option>
+                      <mat-option value="replace">Substituir filtros anteriores (replace)</mat-option>
                     </mat-select>
                   </mat-form-field>
                   <mat-form-field appearance="outline">
-                    <mat-label>Atraso (ms)</mat-label>
+                    <mat-label>Atraso após mudança (ms)</mat-label>
                     <input matInput type="number" [(ngModel)]="editDebounce">
                   </mat-form-field>
                 </div>
@@ -13265,18 +13917,21 @@ class CascadeManagerTabComponent {
               <!-- Extração de valor -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'call_split'"></mat-icon> Extração de valor</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'call_split'"></mat-icon> Qual propriedade ler do campo pai</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption">
+                  Se o campo pai guardar um objeto completo (ex.: <code class="kbd">&#123; id: 10, nome: "TI" &#125;</code>), informe qual propriedade deve ser extraída para envio no filtro (padrão: <code class="kbd">id</code>).
+                </p>
                 <div class="form-row">
                   <mat-form-field appearance="outline" class="full">
-                    <mat-label>ValuePath padrão</mat-label>
+                    <mat-label>Propriedade padrão lida do campo pai (ValuePath)</mat-label>
                     <input matInput [(ngModel)]="editValuePath" placeholder="id">
                     <button
                       mat-icon-button
                       matSuffix
                       class="help-icon-button"
                       type="button"
-                      [matTooltip]="'Preenchido automaticamente a partir de optionValueKey() ou \\'id\\''"
+                      [matTooltip]="'Preenchido automaticamente a partir de optionValueKey do campo pai ou \\'id\\''"
                       matTooltipPosition="above"
                       >
                       <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13287,24 +13942,30 @@ class CascadeManagerTabComponent {
               <!-- Mapeamento de filtros (tabela) -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'filter_alt'"></mat-icon> Mapeamento de filtros</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'filter_alt'"></mat-icon> Mapeamento de filtros enviados ao serviço</mat-panel-title>
                 </mat-expansion-panel-header>
                 @if (editMapRows.length) {
+                  <p class="section-caption">
+                    Para cada campo pai, defina o nome do parâmetro esperado pelo serviço de opções deste campo e, se necessário, a propriedade específica a extrair.
+                  </p>
                   <table class="map-table">
                     <thead>
                       <tr>
-                        <th>Dependente</th>
-                        <th>Chave (dot‑path)</th>
-                        <th>ValuePath (opcional)</th>
+                        <th>Campo pai (origem)</th>
+                        <th>Parâmetro enviado ao filtro (dot‑path)</th>
+                        <th>Propriedade lida do pai (opcional)</th>
                       </tr>
                     </thead>
                     <tbody>
-                      @for (row of editMapRows; track row; let i = $index) {
+                      @for (row of editMapRows; track row.dep; let i = $index) {
                         <tr>
-                          <td>{{ row.dep }}</td>
+                          <td>
+                            <div><strong>{{ disambiguatedLabelFor(row.dep) }}</strong></div>
+                            <small style="opacity:.75">{{ row.dep }}</small>
+                          </td>
                           <td>
                             <mat-form-field appearance="outline" class="full">
-                              <mat-label>Chave</mat-label>
+                              <mat-label>Parâmetro no filtro</mat-label>
                               <input matInput [(ngModel)]="row.key" [matAutocomplete]="autoKey" [placeholder]="row.dep">
                               <mat-autocomplete #autoKey="matAutocomplete">
                                 @for (opt of getKeySuggestions(row.dep); track opt) {
@@ -13316,7 +13977,7 @@ class CascadeManagerTabComponent {
                                 matSuffix
                                 class="help-icon-button"
                                 type="button"
-                                [matTooltip]="'Use dot-notation (e.g. ' + row.dep + '.id) for nested objects'"
+                                [matTooltip]="'Use notação com ponto (ex.: ' + row.dep + '.id) quando o backend esperar filtro aninhado'"
                                 matTooltipPosition="above"
                                 >
                                 <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13325,7 +13986,7 @@ class CascadeManagerTabComponent {
                           </td>
                           <td>
                             <mat-form-field appearance="outline" class="full">
-                              <mat-label>ValuePath</mat-label>
+                              <mat-label>Propriedade do pai (ValuePath)</mat-label>
                               <input matInput [(ngModel)]="row.valuePath" [matAutocomplete]="autoValue" [placeholder]="editValuePath||'id'">
                               <mat-autocomplete #autoValue="matAutocomplete">
                                 @for (opt of getValuePathSuggestions(row.dep); track opt) {
@@ -13337,7 +13998,7 @@ class CascadeManagerTabComponent {
                                 matSuffix
                                 class="help-icon-button"
                                 type="button"
-                                [matTooltip]="'Opcional'"
+                                [matTooltip]="'Opcional: sobrescreve a propriedade padrão lida apenas para este campo pai'"
                                 matTooltipPosition="above"
                                 >
                                 <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13349,29 +14010,32 @@ class CascadeManagerTabComponent {
                     </tbody>
                   </table>
                 } @else {
-                  <div class="rules-empty">Defina dependentes para sugerir o mapeamento.</div>
+                  <div class="rules-empty">Selecione um ou mais campos pais em “Este campo depende de” para configurar o mapeamento de filtros.</div>
                 }
               </mat-expansion-panel>
               <!-- Preview -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'visibility'"></mat-icon> Preview</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'visibility'"></mat-icon> Exemplo ilustrativo do filtro enviado (Preview)</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption" data-testid="cascade-preview-explanation">
+                  Simulação ilustrativa (sem consulta ao servidor): mostra a estrutura JSON de filtro que será enviada ao carregar opções de <strong>{{ disambiguatedLabelFor(sel) }}</strong>.
+                </p>
                 <pre class="preview-box">{{ buildPreview() }}</pre>
                 <div style="display:flex; justify-content:flex-end; padding-top:6px">
-                  <button mat-stroked-button (click)="copyPreview()">Copiar</button>
+                  <button mat-stroked-button (click)="copyPreview()">Copiar exemplo</button>
                 </div>
               </mat-expansion-panel>
             </div>
             <div style="display:flex; gap:8px; justify-content:flex-end; padding:8px 12px;">
-              <button mat-stroked-button (click)="cancelEdit()">Cancelar</button>
-              <button mat-flat-button color="primary" (click)="saveEdit(sel)">Salvar</button>
+              <button mat-stroked-button type="button" (click)="cancelEdit()">Cancelar</button>
+              <button mat-flat-button color="primary" type="button" (click)="saveEdit(sel)">Salvar</button>
             </div>
           </div>
         </div>
       }
     </div>
-    `, isInline: true, styles: [":host{display:block;container-type:inline-size}.cm-root{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:8px;min-width:0}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px;min-width:0}@container (max-width: 720px){.cm-root{grid-template-columns:1fr}.cm-left{border-right:none;border-bottom:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:0;padding-bottom:12px}.cm-right{padding-left:0}}.field-item{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.cm-feedback{padding:8px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.cm-feedback--error{border-color:var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-empty{opacity:.8;font-style:italic;padding:8px 0;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:8px;padding:10px;margin-bottom:10px}.import-textarea{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-low));color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{padding-top:8px;margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;box-shadow:none}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface)}.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;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i13.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i13.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i13.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+    `, isInline: true, styles: [":host{display:block;container-type:inline-size}.cm-root{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:8px;min-width:0}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px;min-width:0}@container (max-width: 720px){.cm-root{grid-template-columns:1fr}.cm-left{border-right:none;border-bottom:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:0;padding-bottom:12px}.cm-right{padding-left:0}}.field-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.field-item.has-cycle{border-color:var(--md-sys-color-error)}.field-item-main{min-width:0;flex:1}.field-item-title{font-weight:500;word-break:break-word}.field-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;font-size:.75rem;color:var(--md-sys-color-on-surface-variant)}.field-role-pill{font-size:.7rem;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.field-role-pill--remote{background:color-mix(in srgb,var(--md-sys-color-primary-container) 65%,transparent);color:var(--md-sys-color-on-primary-container)}.rule-badges{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;white-space:nowrap}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.cm-feedback{padding:8px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.cm-feedback--error{border-color:var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-cycle-alert{padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);display:flex;gap:10px;align-items:flex-start}.cm-cycle-alert mat-icon{color:var(--md-sys-color-error);flex-shrink:0;margin-top:2px}.cm-cycle-alert-body{display:grid;gap:4px;flex:1}.cm-source-notice{padding:8px 12px;border-radius:8px;font-size:.82rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);display:flex;gap:8px;align-items:center}.rules-empty{opacity:.88;padding:8px 0;font-size:.85rem;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant);gap:8px}.rule-summary-direction{font-size:.85rem;margin-top:2px}.rule-summary-policies{font-size:.8rem;opacity:.78;margin-top:2px}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:8px;padding:10px;margin-bottom:10px}.import-textarea{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-low));color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.section-caption{margin:0 0 6px;font-size:.82rem;color:var(--md-sys-color-on-surface-variant)}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant);text-align:left;vertical-align:middle}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{padding-top:8px;margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;box-shadow:none}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface);margin:4px 0 0}.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;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i13.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i13.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i13.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CascadeManagerTabComponent, decorators: [{
             type: Component,
@@ -13402,14 +14066,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-form-field>
         @if (fields.length <= 50) {
           <div>
-            @for (f of filteredFields(); track f) {
-              <div (click)="selectField(f.name)" class="field-item" [class.selected]="f.name===selectedField()" tabindex="0" (keydown)="onFieldKeydown($event, f.name)">
-                <div>
-                  <div>{{ labelFor(f.name) }}</div>
-                  <small style="opacity:.7">{{ f.name }}</small>
+            @for (f of filteredFields(); track f.name) {
+              <div
+                (click)="selectField(f.name)"
+                class="field-item"
+                [class.selected]="f.name===selectedField()"
+                [class.has-cycle]="isFieldInCycle(f.name)"
+                tabindex="0"
+                (keydown)="onFieldKeydown($event, f.name)"
+                >
+                <div class="field-item-main">
+                  <div class="field-item-title">{{ disambiguatedLabelFor(f.name) }}</div>
+                  <div class="field-item-meta">
+                    <span>{{ f.name }}</span>
+                    <span class="field-role-pill" [class.field-role-pill--remote]="hasRemoteOptionSource(f.name)">
+                      {{ fieldRoleBadge(f.name) }}
+                    </span>
+                  </div>
                 </div>
-                @if (hasRule(f.name)) {
-                  <div class="rule-badges">
+                <div class="rule-badges">
+                  @if (isFieldInCycle(f.name)) {
+                    <span class="rule-badge b-conflict">Ciclo</span>
+                  }
+                  @if (hasRule(f.name)) {
                     @if (isCascadeEnabled(f.name)) {
                       <span class="rule-badge b-active">Ativo</span>
                     }
@@ -13417,22 +14096,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <span class="rule-badge b-manual">Manual</span>
                     }
                     @if (loadOnChange(f.name)==='immediate') {
-                      <span class="rule-badge b-immediate">Immediate</span>
+                      <span class="rule-badge b-immediate">Imediato</span>
                     }
-                  </div>
-                }
+                  }
+                </div>
               </div>
             }
           </div>
         } @else {
-          <cdk-virtual-scroll-viewport itemSize="44" style="height: calc(100vh - 240px)">
-            <div *cdkVirtualFor="let f of filteredFields()" (click)="selectField(f.name)" class="field-item" [class.selected]="f.name===selectedField()" tabindex="0" (keydown)="onFieldKeydown($event, f.name)">
-              <div>
-                <div>{{ labelFor(f.name) }}</div>
-                <small style="opacity:.7">{{ f.name }}</small>
+          <cdk-virtual-scroll-viewport itemSize="48" style="height: calc(100vh - 240px)">
+            <div
+              *cdkVirtualFor="let f of filteredFields()"
+              (click)="selectField(f.name)"
+              class="field-item"
+              [class.selected]="f.name===selectedField()"
+              [class.has-cycle]="isFieldInCycle(f.name)"
+              tabindex="0"
+              (keydown)="onFieldKeydown($event, f.name)"
+              >
+              <div class="field-item-main">
+                <div class="field-item-title">{{ disambiguatedLabelFor(f.name) }}</div>
+                <div class="field-item-meta">
+                  <span>{{ f.name }}</span>
+                  <span class="field-role-pill" [class.field-role-pill--remote]="hasRemoteOptionSource(f.name)">
+                    {{ fieldRoleBadge(f.name) }}
+                  </span>
+                </div>
               </div>
-              @if (hasRule(f.name)) {
-                <div class="rule-badges">
+              <div class="rule-badges">
+                @if (isFieldInCycle(f.name)) {
+                  <span class="rule-badge b-conflict">Ciclo</span>
+                }
+                @if (hasRule(f.name)) {
                   @if (isCascadeEnabled(f.name)) {
                     <span class="rule-badge b-active">Ativo</span>
                   }
@@ -13440,27 +14135,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <span class="rule-badge b-manual">Manual</span>
                   }
                   @if (loadOnChange(f.name)==='immediate') {
-                    <span class="rule-badge b-immediate">Immediate</span>
+                    <span class="rule-badge b-immediate">Imediato</span>
                   }
-                </div>
-              }
+                }
+              </div>
             </div>
           </cdk-virtual-scroll-viewport>
         }
       </div>
-    
+
       <!-- Right: Rules for selected field -->
       @if (selectedField(); as sel) {
         <div class="cm-right">
           <div class="cm-header">
             <div>
-              <h3 style="margin:0">{{ labelFor(sel) }}</h3>
-              <div style="opacity:.7">{{ sel }}</div>
+              <h3 style="margin:0">{{ disambiguatedLabelFor(sel) }}</h3>
+              <div style="opacity:.75; font-size:0.85rem">{{ sel }} · {{ fieldRoleSummary(sel) }}</div>
             </div>
             <div>
               <button mat-stroked-button color="primary" (click)="exportRules()" style="margin-right:8px">Exportar</button>
               <button mat-stroked-button (click)="toggleImport()" style="margin-right:8px">Importar</button>
-              <button mat-flat-button color="primary" [matMenuTriggerFor]="addMenu" [disabled]="editing()">Adicionar</button>
+              <button mat-flat-button color="primary" [matMenuTriggerFor]="addMenu">Modelos</button>
               <mat-menu #addMenu="matMenu">
                 <button mat-menu-item (click)="startEdit(sel)"><mat-icon [praxisIcon]="'add'"></mat-icon><span>Em branco</span></button>
                 <button mat-menu-item (click)="startTemplate(sel, 'rota-destino')" [disabled]="!hasField('rotaId') || !hasField('destinoReqId')"><mat-icon [praxisIcon]="'bolt'"></mat-icon><span>Rota → Destino (id)</span></button>
@@ -13468,9 +14163,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </mat-menu>
             </div>
           </div>
+
+          @if (activeCycleDiagnostics().length > 0) {
+            <div class="cm-cycle-alert" role="alert" data-testid="cascade-cycle-diagnostic">
+              <mat-icon [praxisIcon]="'error'"></mat-icon>
+              <div class="cm-cycle-alert-body">
+                <strong>Dependência circular detectada — não é possível aplicar enquanto houver ciclo</strong>
+                @for (cycle of activeCycleDiagnostics(); track cycle.formattedPath) {
+                  <div>{{ cycle.message }}</div>
+                }
+                @if (isFieldInCycle(sel)) {
+                  <div style="margin-top: 6px;">
+                    <button
+                      mat-stroked-button
+                      type="button"
+                      data-testid="cascade-break-cycle-button"
+                      (click)="breakCycleForField(sel)"
+                      >
+                      Remover dependência circular deste campo
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
           @if (feedbackMessage) {
             <div class="cm-feedback" [class.cm-feedback--error]="feedbackTone === 'error'" role="status">{{ feedbackMessage }}</div>
           }
+
+          @if (!hasRemoteOptionSource(sel)) {
+            <div class="cm-source-notice" role="note" data-testid="cascade-no-remote-source-notice">
+              <mat-icon [praxisIcon]="'info'"></mat-icon>
+              <div>
+                Este campo ({{ fieldRoleBadge(sel) }}) não declara fonte de opções remota (<code class="kbd">resourcePath</code> / <code class="kbd">optionSource</code>).
+                Campos de texto ou nomes resolvidos exibem valores derivados; para recarregar opções em cascata, selecione o campo selecionável (ex.: ID) correspondente.
+              </div>
+            </div>
+          }
+
           <!-- Conflict banner (connections) -->
           @if (hasConflict(sel)) {
             <div class="banner">
@@ -13483,6 +14214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <button mat-stroked-button color="accent" (click)="quickSet(sel,'manual')">Definir manual</button>
             </div>
           }
+
           @if (importMode) {
             <div class="import-panel">
               <div style="display:flex; gap:8px; align-items:center; margin-bottom:8px"><mat-icon [praxisIcon]="'upload'"></mat-icon><strong>Importar regras (JSON)</strong></div>
@@ -13493,33 +14225,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </div>
             </div>
           }
-          @if (!ruleFor(sel)) {
+
+          @if (!hasRule(sel)) {
             <div>
-              <div class="rules-empty">Nenhuma cascata configurada. Clique em “Adicionar” para montar a dependência.</div>
+              <div class="rules-empty" data-testid="cascade-empty-guidance">
+                Nenhuma cascata salva para <strong>{{ disambiguatedLabelFor(sel) }}</strong>.
+                Selecione abaixo em <strong>“Este campo depende de (campos pais)”</strong> quais campos controlam as opções deste campo e clique em <strong>Salvar</strong>.
+              </div>
             </div>
           }
-          @if (ruleFor(sel); as rule) {
+          @if (hasRule(sel) && ruleFor(sel); as rule) {
             <div>
               <div class="rule-row">
                 <div>
-                  <div><strong>Dependentes:</strong> {{ rule.dependencyFields.join(', ') || '—' }}</div>
-                  <div style="opacity:.7">Load on change: {{ rule.dependencyLoadOnChange || 'respectLoadOn' }} | Merge: {{ rule.dependencyMergeStrategy || 'merge' }}</div>
+                  <div><strong>Depende de (campos pais):</strong> {{ formatParentList(rule.dependencyFields) }}</div>
+                  <div class="rule-summary-direction">
+                    <strong>Fluxo:</strong> {{ formatRelationshipSummary(sel, rule.dependencyFields) }}
+                  </div>
+                  <div class="rule-summary-policies">
+                    Quando recarregar: {{ formatLoadOnLabel(rule.dependencyLoadOnChange) }} | Como combinar filtros: {{ formatMergeStrategyLabel(rule.dependencyMergeStrategy) }}
+                  </div>
                 </div>
                 <div class="rule-actions">
-                  <button mat-icon-button matTooltip="Editar" (click)="startEdit(sel)"><mat-icon [praxisIcon]="'edit'"></mat-icon></button>
-                  <button mat-icon-button matTooltip="Duplicar" disabled><mat-icon [praxisIcon]="'content_copy'"></mat-icon></button>
-                  <button mat-icon-button matTooltip="Remover" (click)="remove(sel)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Editar regra de cascata" matTooltip="Editar" (click)="startEdit(sel)"><mat-icon [praxisIcon]="'edit'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Duplicar regra de cascata" matTooltip="Duplicar" disabled><mat-icon [praxisIcon]="'content_copy'"></mat-icon></button>
+                  <button mat-icon-button type="button" aria-label="Remover regra de cascata" matTooltip="Remover" (click)="remove(sel)"><mat-icon [praxisIcon]="'delete'"></mat-icon></button>
                 </div>
               </div>
             </div>
           }
+
           <!-- Editor com seções (sem acordeão duplo) -->
           <div class="panel-surface">
             <div class="panel-header" style="padding: 8px 4px; border-bottom: 1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));">
               <mat-icon [praxisIcon]="'rule'"></mat-icon>
               <div>
                 <div>Cascata do campo</div>
-                <small style="color: var(--md-sys-color-on-surface-variant);">Defina dependentes, quando recarregar e como mapear filtros</small>
+                <small style="color: var(--md-sys-color-on-surface-variant);">
+                  Defina de quais campos pais este campo depende, quando recarregar opções e qual filtro enviar ao serviço
+                </small>
               </div>
             </div>
             <div class="panel-stack">
@@ -13529,13 +14273,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'tune'"></mat-icon> Básico</mat-panel-title>
                 </mat-expansion-panel-header>
                 <div class="form-grid">
+                  <p class="section-caption">
+                    Quando o usuário alterar qualquer um dos campos pais escolhidos abaixo, as opções disponíveis em <strong>{{ disambiguatedLabelFor(sel) }}</strong> serão filtradas.
+                  </p>
                   <div class="form-row">
                     <mat-form-field appearance="outline" class="full">
-                      <mat-label>Campos dependentes</mat-label>
+                      <mat-label>Este campo depende de (campos pais)</mat-label>
                       <mat-select multiple [(ngModel)]="editDepList" (ngModelChange)="onDepListChange()">
-                        @for (f of availableDependencyFields(); track f) {
+                        @for (f of availableDependencyFields(); track f.name) {
                           <mat-option [value]="f.name">
-                            {{ labelFor(f.name) }} ({{ f.name }})
+                            {{ disambiguatedLabelFor(f.name) }} ({{ f.name }}) · {{ fieldRoleBadge(f.name) }}
                           </mat-option>
                         }
                       </mat-select>
@@ -13544,42 +14291,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         matSuffix
                         class="help-icon-button"
                         type="button"
-                        [matTooltip]="'Selecione os campos que controlam este valor'"
+                        [matTooltip]="'Selecione os campos pais (origem) cujo valor filtrará as opções deste campo (destino)'"
                         matTooltipPosition="above"
                         >
                         <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
                       </button>
                     </mat-form-field>
                   </div>
+                  @if (editDepList.length > 0) {
+                    <div class="section-caption" data-testid="cascade-draft-direction-summary">
+                      <strong>Resumo da relação:</strong> {{ formatRelationshipSummary(sel, editDepList) }}
+                    </div>
+                  }
                   <div class="form-row">
-                    <mat-checkbox [(ngModel)]="editEnable">Ativar cascata nativa</mat-checkbox>
-                    <mat-checkbox [(ngModel)]="editReset">Resetar ao mudar</mat-checkbox>
+                    <mat-checkbox [(ngModel)]="editEnable" (ngModelChange)="onDraftControlChange()">
+                      Ativar cascata automática neste campo
+                    </mat-checkbox>
+                    <mat-checkbox [(ngModel)]="editReset" (ngModelChange)="onDraftControlChange()">
+                      Limpar seleção deste campo quando o campo pai mudar
+                    </mat-checkbox>
                   </div>
                 </div>
               </mat-expansion-panel>
               <!-- Execução -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'schedule'"></mat-icon> Execução</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'schedule'"></mat-icon> Quando recarregar e combinar filtros</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption">
+                  Controle o momento em que a consulta de opções é disparada e como o filtro do campo pai convive com outros filtros do campo.
+                </p>
                 <div class="form-row">
                   <mat-form-field appearance="outline">
-                    <mat-label>Carregar ao mudar</mat-label>
+                    <mat-label>Quando recarregar opções</mat-label>
                     <mat-select [(ngModel)]="editLoadOn">
-                      <mat-option value="respectLoadOn">Respeitar loadOn</mat-option>
-                      <mat-option value="immediate">Imediato</mat-option>
-                      <mat-option value="manual">Manual</mat-option>
+                      <mat-option value="respectLoadOn">Seguir configuração do campo (respectLoadOn)</mat-option>
+                      <mat-option value="immediate">Recarregar imediatamente ao mudar o pai (immediate)</mat-option>
+                      <mat-option value="manual">Somente sob comando manual / abertura (manual)</mat-option>
                     </mat-select>
                   </mat-form-field>
                   <mat-form-field appearance="outline">
-                    <mat-label>Merge de filtros</mat-label>
+                    <mat-label>Como combinar filtros</mat-label>
                     <mat-select [(ngModel)]="editMerge">
-                      <mat-option value="merge">merge (padrão)</mat-option>
-                      <mat-option value="replace">replace</mat-option>
+                      <mat-option value="merge">Mesclar com filtros existentes (merge — padrão)</mat-option>
+                      <mat-option value="replace">Substituir filtros anteriores (replace)</mat-option>
                     </mat-select>
                   </mat-form-field>
                   <mat-form-field appearance="outline">
-                    <mat-label>Atraso (ms)</mat-label>
+                    <mat-label>Atraso após mudança (ms)</mat-label>
                     <input matInput type="number" [(ngModel)]="editDebounce">
                   </mat-form-field>
                 </div>
@@ -13587,18 +14346,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <!-- Extração de valor -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'call_split'"></mat-icon> Extração de valor</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'call_split'"></mat-icon> Qual propriedade ler do campo pai</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption">
+                  Se o campo pai guardar um objeto completo (ex.: <code class="kbd">&#123; id: 10, nome: "TI" &#125;</code>), informe qual propriedade deve ser extraída para envio no filtro (padrão: <code class="kbd">id</code>).
+                </p>
                 <div class="form-row">
                   <mat-form-field appearance="outline" class="full">
-                    <mat-label>ValuePath padrão</mat-label>
+                    <mat-label>Propriedade padrão lida do campo pai (ValuePath)</mat-label>
                     <input matInput [(ngModel)]="editValuePath" placeholder="id">
                     <button
                       mat-icon-button
                       matSuffix
                       class="help-icon-button"
                       type="button"
-                      [matTooltip]="'Preenchido automaticamente a partir de optionValueKey() ou \\'id\\''"
+                      [matTooltip]="'Preenchido automaticamente a partir de optionValueKey do campo pai ou \\'id\\''"
                       matTooltipPosition="above"
                       >
                       <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13609,24 +14371,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <!-- Mapeamento de filtros (tabela) -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'filter_alt'"></mat-icon> Mapeamento de filtros</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'filter_alt'"></mat-icon> Mapeamento de filtros enviados ao serviço</mat-panel-title>
                 </mat-expansion-panel-header>
                 @if (editMapRows.length) {
+                  <p class="section-caption">
+                    Para cada campo pai, defina o nome do parâmetro esperado pelo serviço de opções deste campo e, se necessário, a propriedade específica a extrair.
+                  </p>
                   <table class="map-table">
                     <thead>
                       <tr>
-                        <th>Dependente</th>
-                        <th>Chave (dot‑path)</th>
-                        <th>ValuePath (opcional)</th>
+                        <th>Campo pai (origem)</th>
+                        <th>Parâmetro enviado ao filtro (dot‑path)</th>
+                        <th>Propriedade lida do pai (opcional)</th>
                       </tr>
                     </thead>
                     <tbody>
-                      @for (row of editMapRows; track row; let i = $index) {
+                      @for (row of editMapRows; track row.dep; let i = $index) {
                         <tr>
-                          <td>{{ row.dep }}</td>
+                          <td>
+                            <div><strong>{{ disambiguatedLabelFor(row.dep) }}</strong></div>
+                            <small style="opacity:.75">{{ row.dep }}</small>
+                          </td>
                           <td>
                             <mat-form-field appearance="outline" class="full">
-                              <mat-label>Chave</mat-label>
+                              <mat-label>Parâmetro no filtro</mat-label>
                               <input matInput [(ngModel)]="row.key" [matAutocomplete]="autoKey" [placeholder]="row.dep">
                               <mat-autocomplete #autoKey="matAutocomplete">
                                 @for (opt of getKeySuggestions(row.dep); track opt) {
@@ -13638,7 +14406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                 matSuffix
                                 class="help-icon-button"
                                 type="button"
-                                [matTooltip]="'Use dot-notation (e.g. ' + row.dep + '.id) for nested objects'"
+                                [matTooltip]="'Use notação com ponto (ex.: ' + row.dep + '.id) quando o backend esperar filtro aninhado'"
                                 matTooltipPosition="above"
                                 >
                                 <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13647,7 +14415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           </td>
                           <td>
                             <mat-form-field appearance="outline" class="full">
-                              <mat-label>ValuePath</mat-label>
+                              <mat-label>Propriedade do pai (ValuePath)</mat-label>
                               <input matInput [(ngModel)]="row.valuePath" [matAutocomplete]="autoValue" [placeholder]="editValuePath||'id'">
                               <mat-autocomplete #autoValue="matAutocomplete">
                                 @for (opt of getValuePathSuggestions(row.dep); track opt) {
@@ -13659,7 +14427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                 matSuffix
                                 class="help-icon-button"
                                 type="button"
-                                [matTooltip]="'Opcional'"
+                                [matTooltip]="'Opcional: sobrescreve a propriedade padrão lida apenas para este campo pai'"
                                 matTooltipPosition="above"
                                 >
                                 <mat-icon [praxisIcon]="'help_outline'"></mat-icon>
@@ -13671,29 +14439,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     </tbody>
                   </table>
                 } @else {
-                  <div class="rules-empty">Defina dependentes para sugerir o mapeamento.</div>
+                  <div class="rules-empty">Selecione um ou mais campos pais em “Este campo depende de” para configurar o mapeamento de filtros.</div>
                 }
               </mat-expansion-panel>
               <!-- Preview -->
               <mat-expansion-panel class="stack-panel">
                 <mat-expansion-panel-header>
-                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'visibility'"></mat-icon> Preview</mat-panel-title>
+                  <mat-panel-title class="panel-header"><mat-icon [praxisIcon]="'visibility'"></mat-icon> Exemplo ilustrativo do filtro enviado (Preview)</mat-panel-title>
                 </mat-expansion-panel-header>
+                <p class="section-caption" data-testid="cascade-preview-explanation">
+                  Simulação ilustrativa (sem consulta ao servidor): mostra a estrutura JSON de filtro que será enviada ao carregar opções de <strong>{{ disambiguatedLabelFor(sel) }}</strong>.
+                </p>
                 <pre class="preview-box">{{ buildPreview() }}</pre>
                 <div style="display:flex; justify-content:flex-end; padding-top:6px">
-                  <button mat-stroked-button (click)="copyPreview()">Copiar</button>
+                  <button mat-stroked-button (click)="copyPreview()">Copiar exemplo</button>
                 </div>
               </mat-expansion-panel>
             </div>
             <div style="display:flex; gap:8px; justify-content:flex-end; padding:8px 12px;">
-              <button mat-stroked-button (click)="cancelEdit()">Cancelar</button>
-              <button mat-flat-button color="primary" (click)="saveEdit(sel)">Salvar</button>
+              <button mat-stroked-button type="button" (click)="cancelEdit()">Cancelar</button>
+              <button mat-flat-button color="primary" type="button" (click)="saveEdit(sel)">Salvar</button>
             </div>
           </div>
         </div>
       }
     </div>
-    `, styles: [":host{display:block;container-type:inline-size}.cm-root{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:8px;min-width:0}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px;min-width:0}@container (max-width: 720px){.cm-root{grid-template-columns:1fr}.cm-left{border-right:none;border-bottom:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:0;padding-bottom:12px}.cm-right{padding-left:0}}.field-item{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.cm-feedback{padding:8px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.cm-feedback--error{border-color:var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-empty{opacity:.8;font-style:italic;padding:8px 0;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:8px;padding:10px;margin-bottom:10px}.import-textarea{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-low));color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{padding-top:8px;margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;box-shadow:none}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface)}.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;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
+    `, styles: [":host{display:block;container-type:inline-size}.cm-root{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:8px;min-width:0}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px;min-width:0}@container (max-width: 720px){.cm-root{grid-template-columns:1fr}.cm-left{border-right:none;border-bottom:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));padding-right:0;padding-bottom:12px}.cm-right{padding-left:0}}.field-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.field-item.has-cycle{border-color:var(--md-sys-color-error)}.field-item-main{min-width:0;flex:1}.field-item-title{font-weight:500;word-break:break-word}.field-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;font-size:.75rem;color:var(--md-sys-color-on-surface-variant)}.field-role-pill{font-size:.7rem;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.field-role-pill--remote{background:color-mix(in srgb,var(--md-sys-color-primary-container) 65%,transparent);color:var(--md-sys-color-on-primary-container)}.rule-badges{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;white-space:nowrap}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.cm-feedback{padding:8px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.cm-feedback--error{border-color:var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-cycle-alert{padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:10px;border:1px solid var(--md-sys-color-error);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);display:flex;gap:10px;align-items:flex-start}.cm-cycle-alert mat-icon{color:var(--md-sys-color-error);flex-shrink:0;margin-top:2px}.cm-cycle-alert-body{display:grid;gap:4px;flex:1}.cm-source-notice{padding:8px 12px;border-radius:8px;font-size:.82rem;margin-bottom:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);display:flex;gap:8px;align-items:center}.rules-empty{opacity:.88;padding:8px 0;font-size:.85rem;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant);gap:8px}.rule-summary-direction{font-size:.85rem;margin-top:2px}.rule-summary-policies{font-size:.8rem;opacity:.78;margin-top:2px}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:8px;padding:10px;margin-bottom:10px}.import-textarea{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container-low));color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.section-caption{margin:0 0 6px;font-size:.82rem;color:var(--md-sys-color-on-surface-variant)}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant);text-align:left;vertical-align:middle}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{padding-top:8px;margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container-high));border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;box-shadow:none}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface);margin:4px 0 0}.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;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"] }]
         }], ctorParameters: () => [{ type: CascadeRulesService }], propDecorators: { fields: [{
                 type: Input
             }], connections: [{
@@ -13702,6 +14473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], cancel: [{
                 type: Output
+            }], validChange: [{
+                type: Output
             }] } });
 
 /**