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

package/fesm2022/praxisui-metadata-editor.mjs

@@ -12875,6 +12875,119 @@ class CascadeRulesService {
             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
@@ -12903,6 +13016,7 @@ class CascadeManagerTabComponent {
     connections; // optional signal for conflicts
     apply = new EventEmitter();
     cancel = new EventEmitter();
+    validChange = new EventEmitter();
     searchTerm = '';
     searchTimer = null;
     searchValue = '';
@@ -12924,6 +13038,7 @@ class CascadeManagerTabComponent {
     editMapRows = [];
     editInitialFilterMap = {};
     editInitialValuePath = 'id';
+    lastEmittedValid = null;
     setFeedback(message, tone = 'info') {
         this.feedbackMessage = message;
         this.feedbackTone = tone;
@@ -12944,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
@@ -12965,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;
@@ -13003,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 || {
@@ -13031,12 +13274,24 @@ class CascadeManagerTabComponent {
         // 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);
+        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);
@@ -13078,7 +13333,6 @@ class CascadeManagerTabComponent {
                     delete valuePaths[dep];
             }
         }
-        this.setFeedback('');
         const rule = {
             targetField: name,
             dependencyFields: deps,
@@ -13092,18 +13346,60 @@ class CascadeManagerTabComponent {
         };
         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);
@@ -13118,6 +13414,7 @@ class CascadeManagerTabComponent {
         map.set(name, next);
         this.rules.set(map);
         this.emitPatch();
+        this.syncValidityState();
     }
     emitPatch() {
         const out = {};
@@ -13185,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;
@@ -13205,6 +13514,7 @@ class CascadeManagerTabComponent {
         this.editMapRows = [];
         this.buildMapRowsFromDeps();
         this.editing.set(true);
+        this.syncValidityState();
     }
     buildMapRowsFromDeps() {
         const deps = this.editDepList;
@@ -13262,10 +13572,10 @@ class CascadeManagerTabComponent {
     }
     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++) {
@@ -13290,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`];
@@ -13313,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">
@@ -13323,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>
                     }
@@ -13338,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>
                   }
@@ -13361,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>
@@ -13389,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">
@@ -13404,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>
@@ -13414,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">
@@ -13450,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>
@@ -13465,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>
@@ -13508,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>
@@ -13530,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) {
@@ -13559,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>
@@ -13568,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) {
@@ -13580,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>
@@ -13592,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,
@@ -13645,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>
                     }
@@ -13660,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>
                   }
@@ -13683,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>
@@ -13711,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">
@@ -13726,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>
@@ -13736,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">
@@ -13772,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>
@@ -13787,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>
@@ -13830,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>
@@ -13852,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) {
@@ -13881,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>
@@ -13890,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) {
@@ -13902,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>
@@ -13914,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: [{
@@ -13945,6 +14473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], cancel: [{
                 type: Output
+            }], validChange: [{
+                type: Output
             }] } });
 
 /**